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

update:更新多选视图逻辑

上级 3c609cf3
...@@ -32,7 +32,9 @@ export class MPickupView extends PickupView { ...@@ -32,7 +32,9 @@ export class MPickupView extends PickupView {
*/ */
protected initSelectedData() { protected initSelectedData() {
const { viewParams } = this.state; const { viewParams } = this.state;
const { selectedData, selections} = toRefs(this.state); const { selectedData, selections } = toRefs(this.state);
selections.value.splice(0, selections.value.length);
nextTick(() => {
const selected: IParam = viewParams?.selectedData?.[0] || {}; const selected: IParam = viewParams?.selectedData?.[0] || {};
const keys = selected.srfkey?.split(',') || []; const keys = selected.srfkey?.split(',') || [];
const texts = selected.srfmajortext?.split(',') || []; const texts = selected.srfmajortext?.split(',') || [];
...@@ -42,6 +44,7 @@ export class MPickupView extends PickupView { ...@@ -42,6 +44,7 @@ export class MPickupView extends PickupView {
}); });
} }
selections.value = [...selectedData.value]; selections.value = [...selectedData.value];
});
} }
/** /**
...@@ -52,7 +55,7 @@ export class MPickupView extends PickupView { ...@@ -52,7 +55,7 @@ export class MPickupView extends PickupView {
*/ */
protected onMoveRight() { protected onMoveRight() {
const { selections, selectedData } = toRefs(this.state); const { selections, selectedData } = toRefs(this.state);
selections.value = selectedData.value; selections.value = [...selectedData.value];
} }
/** /**
...@@ -64,12 +67,16 @@ export class MPickupView extends PickupView { ...@@ -64,12 +67,16 @@ export class MPickupView extends PickupView {
protected onMoveLeft() { protected onMoveLeft() {
const { selections, rightPanelSelections } = toRefs(this.state); const { selections, rightPanelSelections } = toRefs(this.state);
if (rightPanelSelections.value && rightPanelSelections.value.length) { if (rightPanelSelections.value && rightPanelSelections.value.length) {
rightPanelSelections.value.forEach((pickItem: IParam) => { for (let i = 0; i < rightPanelSelections.value.length; i++) {
const index = selections.value.findIndex((select: IParam) => select.srfkey === pickItem.srfkey); const index = selections.value.findIndex((select: IParam) => select.srfkey === rightPanelSelections.value[i].srfkey);
if (index !== -1) { if (index !== -1) {
selections.value.splice(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 { ...@@ -109,6 +116,13 @@ export class MPickupView extends PickupView {
*/ */
protected onRightPanelClick(item: IParam, event: MouseEvent) { protected onRightPanelClick(item: IParam, event: MouseEvent) {
const { rightPanelSelections } = toRefs(this.state); 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 { ...@@ -117,14 +131,14 @@ export class MPickupView extends PickupView {
* @memberof MPickupView * @memberof MPickupView
*/ */
public onConfirm(): void { public onConfirm(): void {
const { selections } = this.state; const { selections } = toRefs(this.state);
const data: IParam[] = []; const data: IParam[] = [];
if (selections && selections.length) { if (selections.value && selections.value.length) {
let srfkey: string = ''; let srfkey: string = '';
let srfmajortext: string = ''; let srfmajortext: string = '';
selections.forEach((select: IParam, index: number) => { selections.value.forEach((select: IParam, index: number) => {
srfkey += `${select.srfkey}${index !== selections.length - 1 ? ',' : ''}`; srfkey += `${select.srfkey}${index !== selections.value.length - 1 ? ',' : ''}`;
srfmajortext += `${select.srfmajortext}${index !== selections.length - 1 ? ',' : ''}`; srfmajortext += `${select.srfmajortext}${index !== selections.value.length - 1 ? ',' : ''}`;
}); });
data.push({ srfkey: srfkey, srfmajortext: srfmajortext }); data.push({ srfkey: srfkey, srfmajortext: srfmajortext });
} }
......
// 视图样式汇总 // 视图样式汇总
@use './view-base.scss'; @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 ...@@ -83,7 +83,7 @@ const { state, pickupViewPanel, onCancel, onConfirm, onCtrlEvent, onMoveRight, o
<div <div
v-for="(item, index) in state.selections" v-for="(item, index) in state.selections"
:key="index" :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)"> @click="(event) => onRightPanelClick(item, event)">
<span class="text">\{{item.srfmajortext}}</span> <span class="text">\{{item.srfmajortext}}</span>
</div> </div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册