提交 3c609cf3 编写于 作者: Mosher's avatar Mosher

update:更新

上级 0e167c54
...@@ -24,31 +24,112 @@ export class MPickupView extends PickupView { ...@@ -24,31 +24,112 @@ export class MPickupView extends PickupView {
*/ */
public declare props: MPickupViewProps; public declare props: MPickupViewProps;
public onMoveRight() { /**
* 初始化选中数据
*
* @protected
* @memberof MPickupView
*/
protected initSelectedData() {
const { viewParams } = this.state;
const { selectedData, selections} = toRefs(this.state);
const selected: IParam = viewParams?.selectedData?.[0] || {};
const keys = selected.srfkey?.split(',') || [];
const texts = selected.srfmajortext?.split(',') || [];
if (keys.length && texts.length) {
keys.forEach((key: string, index: number) => {
selectedData.value.push({ srfkey: key, srfmajortext: texts[index] });
});
}
selections.value = [...selectedData.value];
}
/**
* 将选中数据移动到右侧
*
* @protected
* @memberof MPickupView
*/
protected onMoveRight() {
const { selections, selectedData } = toRefs(this.state); const { selections, selectedData } = toRefs(this.state);
selections.value = selectedData.value; selections.value = selectedData.value;
} }
public onMoveLeft() { /**
const { selections } = toRefs(this.state); * 移动到左侧
const index = selections.value.findIndex((selection: any) => Object.is(this.select.srfkey, selection.srfkey)); *
if (index !== -1) { * @protected
selections.value.splice(index, 1); * @memberof MPickupView
*/
protected onMoveLeft() {
const { selections, rightPanelSelections } = toRefs(this.state);
if (rightPanelSelections.value && rightPanelSelections.value.length) {
rightPanelSelections.value.forEach((pickItem: IParam) => {
const index = selections.value.findIndex((select: IParam) => select.srfkey === pickItem.srfkey);
if (index !== -1) {
selections.value.splice(index, 1);
}
});
} }
} }
public onAllMoveRight() { /**
//todo * 全部移到右侧(选中)
*
* @protected
* @memberof MPickupView
*/
protected onAllMoveRight() {
if (this.xDataControl && this.xDataControl.state) {
const items = this.xDataControl.state.items || [];
const { selections, selectedData } = toRefs(this.state);
selectedData.value = [...items];
selections.value = [...items];
}
} }
public onAllMoveLeft() { /**
const { selections, selectedData } = toRefs(this.state); * 全部移到左侧(取消选中)
*
* @protected
* @memberof MPickupView
*/
protected onAllMoveLeft() {
const { selections } = toRefs(this.state);
selections.value = []; selections.value = [];
selectedData.value = [];
} }
/**
* 右侧面板项点击
*
* @protected
* @param {IParam} item
* @param {MouseEvent} event
* @memberof MPickupView
*/
protected onRightPanelClick(item: IParam, event: MouseEvent) { protected onRightPanelClick(item: IParam, event: MouseEvent) {
console.log("选中右侧面板数据", item, event); const { rightPanelSelections } = toRefs(this.state);
}
/**
* 确认
*
* @memberof MPickupView
*/
public onConfirm(): void {
const { selections } = this.state;
const data: IParam[] = [];
if (selections && selections.length) {
let srfkey: string = '';
let srfmajortext: string = '';
selections.forEach((select: IParam, index: number) => {
srfkey += `${select.srfkey}${index !== selections.length - 1 ? ',' : ''}`;
srfmajortext += `${select.srfmajortext}${index !== selections.length - 1 ? ',' : ''}`;
});
data.push({ srfkey: srfkey, srfmajortext: srfmajortext });
}
this.emit('viewEvent', { tag: this.state.viewName, action: 'viewDataChange', data: data });
this.emit('viewEvent', { tag: this.state.viewName, action: 'viewClose', data: null });
} }
/** /**
......
import { IActionParam } from "@core"; import { IActionParam } from "@core";
import { IParam } from "@core/interface";
import { MainView } from "../main-view"; import { MainView } from "../main-view";
import { PickupViewProps } from "./pickup-view-prop"; import { PickupViewProps } from "./pickup-view-prop";
import { PickupViewState } from "./pickup-view-state"; import { PickupViewState } from "./pickup-view-state";
...@@ -25,6 +26,14 @@ export class PickupView extends MainView { ...@@ -25,6 +26,14 @@ export class PickupView extends MainView {
*/ */
public declare props: PickupViewProps; public declare props: PickupViewProps;
/**
* 选择视图面板引用
*
* @type {IParam}
* @memberof PickupView
*/
public declare pickupViewPanel: IParam;
/** /**
* 使用视图初始化模块 * 使用视图初始化模块
* *
...@@ -32,8 +41,22 @@ export class PickupView extends MainView { ...@@ -32,8 +41,22 @@ export class PickupView extends MainView {
*/ */
public useViewInit() { public useViewInit() {
super.useViewInit(); super.useViewInit();
this.pickupViewPanel = ref(null);
this.initSelectedData();
onMounted(() => {
this.xDataControl = unref(this.pickupViewPanel);
});
}
/**
* 初始化选中数据
*
* @protected
* @memberof PickupView
*/
protected initSelectedData() {
const { viewParams } = this.state; const { viewParams } = this.state;
this.state.selectedData = ref(viewParams.selectedData) || ref([]); this.state.selectedData = viewParams?.selectedData ? ref(viewParams.selectedData) : ref([]);
} }
/** /**
...@@ -79,6 +102,7 @@ export class PickupView extends MainView { ...@@ -79,6 +102,7 @@ export class PickupView extends MainView {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
return { return {
...superParams, ...superParams,
pickupViewPanel: this.pickupViewPanel,
onCancel: this.onCancel.bind(this), onCancel: this.onCancel.bind(this),
onConfirm: this.onConfirm.bind(this) onConfirm: this.onConfirm.bind(this)
}; };
......
...@@ -28,4 +28,11 @@ export interface PickupViewPanelControlState extends MainControlState { ...@@ -28,4 +28,11 @@ export interface PickupViewPanelControlState extends MainControlState {
* @memberof PickupViewPanelControlState * @memberof PickupViewPanelControlState
*/ */
selectedData: IParam[]; selectedData: IParam[];
/**
* @description 多数据视图数据集合
* @type {IParam[]}
* @memberof PickupViewPanelControlState
*/
items: IParam[];
} }
\ No newline at end of file
...@@ -18,28 +18,6 @@ export class PickupViewPanelControl extends MainControl { ...@@ -18,28 +18,6 @@ export class PickupViewPanelControl extends MainControl {
*/ */
public declare state: PickupViewPanelControlState; public declare state: PickupViewPanelControlState;
/**
* @description
* @param {PickupViewPanelControlProps} props
* @memberof PickupViewPanelControl
*/
public useLoad(props: PickupViewPanelControlProps) {
const { viewSubject, controlName, context, viewParams } = this.state;
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) {
viewSubject.next({ tag: tag, action: "load", data: data });
}
})
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
})
}
}
/** /**
* 部件事件 * 部件事件
* *
...@@ -52,6 +30,9 @@ export class PickupViewPanelControl extends MainControl { ...@@ -52,6 +30,9 @@ export class PickupViewPanelControl extends MainControl {
if (Object.is("selectionChange", action)) { if (Object.is("selectionChange", action)) {
this.handleSelectionChange(data); this.handleSelectionChange(data);
} }
if (Object.is("viewLoad", action)) {
this.handleViewLoad(data);
}
} }
/** /**
...@@ -66,7 +47,7 @@ export class PickupViewPanelControl extends MainControl { ...@@ -66,7 +47,7 @@ export class PickupViewPanelControl extends MainControl {
if (items && items.length) { if (items && items.length) {
const { appDeKeyFieldName, appDeMajorFieldName } = this.state; const { appDeKeyFieldName, appDeMajorFieldName } = this.state;
const _items: IParam[] = []; const _items: IParam[] = [];
items.forEach((item: IParam, index: number) => { items.forEach((item: IParam) => {
_items.push({ _items.push({
srfkey: item.srfkey ? item.srfkey : item[appDeKeyFieldName.toLowerCase()], srfkey: item.srfkey ? item.srfkey : item[appDeKeyFieldName.toLowerCase()],
srfmajortext: item.srfmajortext ? item.srfmajortext : item[appDeMajorFieldName.toLowerCase()] srfmajortext: item.srfmajortext ? item.srfmajortext : item[appDeMajorFieldName.toLowerCase()]
...@@ -78,6 +59,26 @@ export class PickupViewPanelControl extends MainControl { ...@@ -78,6 +59,26 @@ export class PickupViewPanelControl extends MainControl {
this.emit("onCtrlEvent", { tag: this.props.name, action: 'selectionChange', data: [] }); this.emit("onCtrlEvent", { tag: this.props.name, action: 'selectionChange', data: [] });
} }
/**
* 处理视图加载完成事件
*
* @private
* @param {IParam[]} [data=[]]
* @memberof PickupViewPanelControl
*/
private handleViewLoad(data: IParam[] = []) {
const { items } = toRefs(this.state);
const { appDeKeyFieldName, appDeMajorFieldName } = this.state;
const _items: IParam[] = [];
data.forEach((item: any) => {
_items.push({
srfkey: item.srfkey ? item.srfkey : item[appDeKeyFieldName.toLowerCase()],
srfmajortext: item.srfmajortext ? item.srfmajortext : item[appDeMajorFieldName.toLowerCase()]
});
});
items.value = [..._items];
}
/** /**
* @description 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @return {*} * @return {*}
...@@ -87,7 +88,6 @@ export class PickupViewPanelControl extends MainControl { ...@@ -87,7 +88,6 @@ export class PickupViewPanelControl extends MainControl {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
return { return {
...superParams, ...superParams,
load:this.useLoad.bind(this),
onViewEvent: this.onViewEvent.bind(this) onViewEvent: this.onViewEvent.bind(this)
}; };
} }
......
export const viewState = { export const viewState = {
// 实际选中数据 // 实际选中数据
selections: [], selections: [],
selectedData: [],
// 右侧面板选中数据 // 右侧面板选中数据
rightPanelSelections: [], rightPanelSelections: [],
{{> @macro/front-end/views/view-base-config.hbs}} {{> @macro/front-end/views/view-base-config.hbs}}
......
...@@ -30,7 +30,7 @@ const emit = defineEmits<ViewEmit>(); ...@@ -30,7 +30,7 @@ const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const mpickupView = new MPickupView(viewState, props, emit).moduleInstall(); const mpickupView = new MPickupView(viewState, props, emit).moduleInstall();
const { state, onCancel, onConfirm, onCtrlEvent, onMoveRight, onMoveLeft, onAllMoveRight, onAllMoveLeft, onRightPanelClick } = mpickupView; const { state, pickupViewPanel, onCancel, onConfirm, onCtrlEvent, onMoveRight, onMoveLeft, onAllMoveRight, onAllMoveLeft, onRightPanelClick } = mpickupView;
</script> </script>
<template> <template>
...@@ -55,6 +55,7 @@ const { state, onCancel, onConfirm, onCtrlEvent, onMoveRight, onMoveLeft, onAllM ...@@ -55,6 +55,7 @@ const { state, onCancel, onConfirm, onCtrlEvent, onMoveRight, onMoveLeft, onAllM
{{#eq controlType "PICKUPVIEWPANEL"}} {{#eq controlType "PICKUPVIEWPANEL"}}
<{{codeName}}PickupViewPanel <{{codeName}}PickupViewPanel
name="{{name}}" name="{{name}}"
ref="pickupViewPanel"
:context="state.context" :context="state.context"
:rowEditState="state.rowEditState" :rowEditState="state.rowEditState"
:rowActiveMode="state.gridRowActiveMode" :rowActiveMode="state.gridRowActiveMode"
...@@ -79,8 +80,12 @@ const { state, onCancel, onConfirm, onCtrlEvent, onMoveRight, onMoveLeft, onAllM ...@@ -79,8 +80,12 @@ const { state, onCancel, onConfirm, onCtrlEvent, onMoveRight, onMoveLeft, onAllM
</a-space> </a-space>
</a-col> </a-col>
<a-col :span="5" class="split__right"> <a-col :span="5" class="split__right">
<div v-for="(item, index) in state.selections" :key="index" class="selection-item" @click="(event) => onRightPanelClick(item, event)"> <div
<span class="text">\{{item.srfmajortext}}</span> v-for="(item, index) in state.selections"
:key="index"
:class="['picker-item', state.rightPanelSelections.includes((panel) => panel.srfkey === item.srfkey)]"
@click="(event) => onRightPanelClick(item, event)">
<span class="text">\{{item.srfmajortext}}</span>
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
......
...@@ -8,4 +8,5 @@ export const ctrlState = { ...@@ -8,4 +8,5 @@ export const ctrlState = {
controlName: '{{ctrl.name}}', controlName: '{{ctrl.name}}',
selectedData: [], selectedData: [],
data: {}, data: {},
items: []
}; };
\ No newline at end of file
...@@ -40,7 +40,7 @@ const emit = defineEmits <CtrlEmit> (); ...@@ -40,7 +40,7 @@ const emit = defineEmits <CtrlEmit> ();
const { name, state, onViewEvent } = new PickupViewPanelControl(ctrlState, props, emit).moduleInstall(); const { name, state, onViewEvent } = new PickupViewPanelControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力 // 暴露内部状态及能力
defineExpose({ name, state}); defineExpose({ name, state });
</script> </script>
<template> <template>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册