提交 5e586c16 编写于 作者: Mosher's avatar Mosher

update:支持列表界面行为和选中效果

上级 e88f8b54
......@@ -12,12 +12,69 @@ export class ListControl extends MDControl {
/**
* @description 触发界面行为
* @protected
* @param {IParam} item 列表数据
* @param {IParam} action 界面行为
* @param {MouseEvent} event 鼠标源事件
* @memberof ListControl
*/
protected onUIAction(action: IParam, event: MouseEvent) {
console.log(action, event);
protected onUIAction(item: IParam, action: IParam, event: MouseEvent) {
if (!item || !action) {
console.warn("行为执行参数不足");
return;
}
const inputParam = {
context: this.state.context,
viewParams: this.state.viewParams,
data: [item],
event: event,
actionEnvironment: this
};
// 执行行为
App.getAppActionService().execute(action, inputParam);
}
/**
* @description 使用自定义模块
* @protected
* @return {*}
* @memberof ListControl
*/
protected useCustom() {
/**
* 列表项选中
* @param item
* @param event
*/
const onListItemSelected = (item: IParam, event: MouseEvent) => {
const { isMultiple } = this.state;
const { selectedData } = toRefs(this.state);
const index = selectedData.value.findIndex((selection: any) => selection.srfkey === item.srfkey);
// 存在选中则删除
if (index !== -1) {
selectedData.value.splice(index, 1);
} else {
// 单选清空已选中
if (!isMultiple) {
selectedData.value.splice(index, selectedData.value.length);
}
selectedData.value.push(item);
}
this.emit('ctrlEvent', { tag: this.props.name, action: 'selectionchange', data: selectedData });
}
/**
* 是否选中
* @param item 列表项
* @returns
*/
const isSelected = (item: IParam): boolean => {
const { selectedData } = toRefs(this.state);
return selectedData.value.findIndex((selection: any) => selection.srfkey === item.srfkey) !== -1;
}
return {
onListItemSelected: onListItemSelected.bind(this),
isSelected: isSelected.bind(this)
}
}
/**
......@@ -29,7 +86,8 @@ export class ListControl extends MDControl {
const superParams = super.moduleInstall();
return {
...superParams,
onUIAction: this.onUIAction.bind(this)
onUIAction: this.onUIAction.bind(this),
useCustom: this.useCustom()
}
}
......
......@@ -13,4 +13,8 @@
color: #d2d2d2;
cursor: no-drop;
}
.app-list-item:hover,
.app-list-item__selection {
background-color: #dcf4ff;
}
}
\ No newline at end of file
......@@ -57,7 +57,8 @@ export const ctrlState = {
mdCtrlPaging: {
enablePagingBar: true,
current: 1,
pageSize: {{#if ctrl.pagingSize}}{{ctrl.pagingSize}}{{else}}20{{/if}}
pageSize: {{#if ctrl.pagingSize}}{{ctrl.pagingSize}}{{else}}20{{/if}},
pagination: {}
},
// 界面行为
uIActions: {
......
......@@ -35,7 +35,8 @@ interface CtrlEmit {
const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力
const { name, state, onUIAction, newRow, remove, save, load, refresh, getData, xDataCtrl, exportExcel } = new ListControl(ctrlState, props, emit).moduleInstall();
const { name, state, onUIAction, newRow, remove, save, load, refresh, getData, xDataCtrl, exportExcel, useCustom } = new ListControl(ctrlState, props, emit).moduleInstall();
const { onListItemSelected, isSelected } = useCustom;
// 暴露内部状态及能力
defineExpose({ name, state, newRow, remove, save, load, refresh, getData, exportExcel });
......@@ -47,7 +48,9 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData, export
item-layout="horizontal"
:data-source="state.items">
<template #renderItem="{ item }">
<a-list-item class="app-list-item">
<a-list-item
:class="['app-list-item', isSelected(item) ? 'app-list-item__selection' : '']"
@click="(event) => onListItemSelected(item, event)">
<a-list-item-meta
:description="item.srfdescription">
<template #title>
......@@ -64,7 +67,7 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData, export
v-if="action.visible"
:class="['list-item__action', action.disabled ? 'disabled' : '']"
:title="action.tooltip ? action.tooltip : action.caption"
@click="(event) => onUIAction(action, event)">
@click.stop="(event) => onUIAction(item, action, event)">
<template v-if="action.showIcon">
<i v-if="action.cssClass" :class="action.cssClass" />
<img v-if="action.imagePath" :src="action.imagePath" />
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册