提交 9d52e4f8 编写于 作者: Mosher's avatar Mosher

update:更新多选视图逻辑

上级 3c609cf3
......@@ -32,16 +32,19 @@ export class MPickupView extends PickupView {
*/
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];
const { selectedData, selections } = toRefs(this.state);
selections.value.splice(0, selections.value.length);
nextTick(() => {
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];
});
}
/**
......@@ -52,7 +55,7 @@ export class MPickupView extends PickupView {
*/
protected onMoveRight() {
const { selections, selectedData } = toRefs(this.state);
selections.value = selectedData.value;
selections.value = [...selectedData.value];
}
/**
......@@ -64,12 +67,16 @@ export class MPickupView extends PickupView {
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);
for (let i = 0; i < rightPanelSelections.value.length; i++) {
const index = selections.value.findIndex((select: IParam) => select.srfkey === rightPanelSelections.value[i].srfkey);
if (index !== -1) {
selections.value.splice(index, 1);
// 重新赋值确保数组变化,后续能监听到该变化
selections.value = [...selections.value];
}
});
rightPanelSelections.value.splice(i, 1);
i -= 1;
}
}
}
......@@ -109,6 +116,13 @@ export class MPickupView extends PickupView {
*/
protected onRightPanelClick(item: IParam, event: MouseEvent) {
const { rightPanelSelections } = toRefs(this.state);
// 判断右侧面板选中数据里面是否有正点击的这项,有就移除,没有就添加
const index = rightPanelSelections.value.indexOf(item);
if (index >= 0) {
rightPanelSelections.value.splice(index, 1);
} else {
rightPanelSelections.value.push(item);
}
}
/**
......@@ -117,14 +131,14 @@ export class MPickupView extends PickupView {
* @memberof MPickupView
*/
public onConfirm(): void {
const { selections } = this.state;
const { selections } = toRefs(this.state);
const data: IParam[] = [];
if (selections && selections.length) {
if (selections.value && selections.value.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 ? ',' : ''}`;
selections.value.forEach((select: IParam, index: number) => {
srfkey += `${select.srfkey}${index !== selections.value.length - 1 ? ',' : ''}`;
srfmajortext += `${select.srfmajortext}${index !== selections.value.length - 1 ? ',' : ''}`;
});
data.push({ srfkey: srfkey, srfmajortext: srfmajortext });
}
......
// 视图样式汇总
@use './view-base.scss';
\ No newline at end of file
@use './view-base.scss';
@use './mpickup-view.scss';
\ No newline at end of file
.app-mpickup-view {
.picker-item {
height: 32px;
line-height: 32px;
background: #ffffff;
color: #666666;
border-radius: 3px;
margin: 10px;
text-indent: 20px;
}
.picker-item__selected {
background: #e6f7ff;
}
}
\ No newline at end of file
......@@ -83,7 +83,7 @@ const { state, pickupViewPanel, onCancel, onConfirm, onCtrlEvent, onMoveRight, o
<div
v-for="(item, index) in state.selections"
:key="index"
:class="['picker-item', state.rightPanelSelections.includes((panel) => panel.srfkey === item.srfkey)]"
:class="['picker-item', state.rightPanelSelections.includes(item) ? 'picker-item__selected' : '']"
@click="(event) => onRightPanelClick(item, event)">
<span class="text">\{{item.srfmajortext}}</span>
</div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册