update: 多选组件

src/app-register.ts

@@ -142,7 +142,7 @@ import AppTodoList from './components/app-todo-list/app-todo-list.vue';
 import AppGridPagination from './components/app-grid-pagination/app-grid-pagination.vue';
 import AppSearchbar from './components/app-searchbar/app-searchbar.vue';
 import AppEYUpload from './components/app-ey-upload/app-ey-upload.vue';
-import AppEYMpicker from './components/app-ey-mpicker/app-ey-mpicker.vue';
+import AppEYMPicker from './components/app-ey-mpicker/app-ey-mpicker.vue';
 import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
 import AppAddressCascader from './components/app-address-cascader/app-address-cascader.vue';
 // 布局组件
@@ -316,7 +316,7 @@ export const AppComponents = {
         v.component('app-grid-pagination',AppGridPagination);
         v.component('app-searchbar',AppSearchbar);
         v.component('app-ey-upload',AppEYUpload);
-        v.component('app-ey-mpicker',AppEYMpicker);
+        v.component('app-ey-mpicker',AppEYMPicker);
         v.component('extend-action-timeline',ExtendActionTimeline);
         v.component('app-pickup-view-layout',AppPickUpViewLayout);
         v.component('app-mpickup-view-layout',AppMPickUpViewLayout);

src/components/app-ey-mpicker/app-ey-mpicker.scss

+.app-ey-mpicker {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    .el-select {
+        width: 100%;
+    }
+    .app-ey-mpicker__item {
+        width: 100%;
+        position: relative;
+        padding-right: 30px;
+        .app-ey-mpicker__search {
+            height: 34px;
+            position: absolute;
+            top: 0;
+            right: 40px;
+            color: var(--ey-color-gray-200);
+            font-size: 16px;
+        }
+        .app-ey-mpicker__button {
+            height: 34px;
+            position: absolute;
+            top: 0;
+            right: 4px;
+            display: flex;
+            align-items: center;
+            img {
+                height: 20px;
+                width: 20px;
+            }
+        }
+    }
+}
\ No newline at end of file

src/components/app-ey-mpicker/app-ey-mpicker.vue

 <template>
     <div class="app-ey-mpicker">
-       多选
+        <div class="app-ey-mpicker__item" v-for="count in selectCount" :key="count">
+            <el-select :value="getSelectLabel(count-1)" filterable remote :remote-method="onSearch" size="small" @change="onSelect" :disabled="disabled">
+                <template v-if="!valueItems[count-1]">
+                    <el-option v-for="(item, index) in items" :key="index" :label="item[deMajorField]" :value="item[deKeyField]"></el-option>
+                </template>
+            </el-select>
+            <span class="app-ey-mpicker__search">
+                <i class="el-icon-search" @click="openView(valueItems[count-1])"></i>
+            </span>
+            <div class="app-ey-mpicker__button">
+                <img v-if="count === selectCount" src="assets/img/ic_add_circle.svg" @click="selectCount++">
+                <img v-else src="assets/img/remove_circle.svg" @click="onRemove(valueItems[count-1])">
+            </div>
+        </div>
     </div>
 </template>
 <script lang = 'ts'>
@@ -9,7 +22,7 @@ import { Subject } from 'rxjs';
 
 @Component({
 })
-export default class AppEYMpicker extends Vue {
+export default class AppEYMPicker extends Vue {
 
     /**
      * 传入url
@@ -45,7 +58,7 @@ export default class AppEYMpicker extends Vue {
      * 局部上下文导航参数
      * 
      * @type {any}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop() public localContext!:any;
 
@@ -53,7 +66,7 @@ export default class AppEYMpicker extends Vue {
      * 局部导航参数
      * 
      * @type {any}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop() public localParam!:any;
 
@@ -66,7 +79,7 @@ export default class AppEYMpicker extends Vue {
      * 视图上下文
      *
      * @type {*}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop() public context!: any;
 
@@ -74,7 +87,7 @@ export default class AppEYMpicker extends Vue {
      * 视图参数
      *
      * @type {*}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop() public viewparams!: any;
 
@@ -82,7 +95,7 @@ export default class AppEYMpicker extends Vue {
      * AC参数
      *
      * @type {*}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop({default: () => {}}) public acParams?: any;
 
@@ -90,7 +103,7 @@ export default class AppEYMpicker extends Vue {
      * 应用实体主信息属性名称
      *
      * @type {string}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop({default: 'srfmajortext'}) public deMajorField!: string;
 
@@ -98,7 +111,7 @@ export default class AppEYMpicker extends Vue {
      * 应用实体主键属性名称
      *
      * @type {string}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop({default: 'srfkey'}) public deKeyField!: string;
 
@@ -106,7 +119,7 @@ export default class AppEYMpicker extends Vue {
      * 表单服务
      *
      * @type {*}
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     @Prop() public service?: any;
 
@@ -118,7 +131,7 @@ export default class AppEYMpicker extends Vue {
     /**
      * 当前表单项绑定值key的集合
      */
-    public value: any = [];
+    public valueItems: any = [];
 
     /**
      * 所有操作过的下拉选选项
@@ -131,6 +144,23 @@ export default class AppEYMpicker extends Vue {
      */
     public selectItems: Array<any> = [];
 
+    /**
+     * 选项框数量
+     * 
+     */
+    public selectCount: number = 1;
+
+     /**
+     * 获取选中label
+     * 
+     */
+    public getSelectLabel(index: number) {
+        const selection = this.selectItems[index];
+        if (selection) {
+            return selection[this.deMajorField];
+        }
+    }
+
     /**
      * 监听curvalue值
      * @param newVal 
@@ -138,17 +168,13 @@ export default class AppEYMpicker extends Vue {
      */
     @Watch('curvalue', {immediate:true, deep: true })
     oncurvalueChange(newVal: any, val: any) {
-        this.value = [];
+        this.valueItems = [];
         this.selectItems = [];
         if (newVal) {
             try {
               this.selectItems = this.parseValue(JSON.parse(newVal));
               this.selectItems.forEach((item: any) => {
-                  this.value.push(item[this.deKeyField]);
-                  let index = this.items.findIndex((i) => Object.is(i[this.deKeyField], item[this.deKeyField]));
-                  if (index < 0) {
-                      this.items.push({ [this.deMajorField]: item[this.deMajorField], [this.deKeyField]: item[this.deKeyField] });
-                  }
+                this.valueItems.push(item[this.deKeyField]);
               });
             } catch (error) {
               if((error as any).name === 'SyntaxError'){
@@ -159,12 +185,8 @@ export default class AppEYMpicker extends Vue {
                 }
                 if(srfkeys.length && srfkeys.length > 0 && srfmajortexts.length && srfmajortexts.length > 0 && srfkeys.length == srfmajortexts.length){
                     srfkeys.forEach((id: any, index: number) => {
-                        this.value.push(id);
+                        this.valueItems.push(id);
                         this.selectItems.push({[this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index]});
-                        let _index = this.items.findIndex((i) => Object.is(i[this.deKeyField],id));
-                        if (_index < 0) {
-                            this.items.push({[this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index]});
-                        }
                     });
                 }
               }
@@ -177,7 +199,7 @@ export default class AppEYMpicker extends Vue {
      * 远程执行搜索
      *
      * @param {*} query
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     public onSearch(query: any) {
         // 公共参数处理
@@ -220,7 +242,7 @@ export default class AppEYMpicker extends Vue {
      * 下拉选中回调
      *
      * @param {*} selects
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     public onSelect(selects: any) {
         let val: Array<any> = [];
@@ -247,7 +269,7 @@ export default class AppEYMpicker extends Vue {
      * 移除标签回调
      *
      * @param {*} tag
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     public onRemove(tag: any) {
         let index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], tag));
@@ -256,6 +278,7 @@ export default class AppEYMpicker extends Vue {
             let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : '';
             this.$emit('formitemvaluechange', { name: this.name, value: value });
         }
+        this.selectCount--;
     }
 
     /**
@@ -263,7 +286,7 @@ export default class AppEYMpicker extends Vue {
      *
      * @param {*} arg
      * @returns
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     public handlePublicParams(arg: any): boolean {
         if (!this.activeData) {
@@ -289,9 +312,9 @@ export default class AppEYMpicker extends Vue {
      * 打开视图
      *
      * @returns
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
-    public openView() {
+    public openView(value: string) {
         if (this.disabled) {
             return;
         }
@@ -325,14 +348,18 @@ export default class AppEYMpicker extends Vue {
                 if (result.datas && Array.isArray(result.datas)) {
                     result.datas.forEach((select: any) => {
                         selects.push({ [this.deKeyField]: select[this.deKeyField], [this.deMajorField]: select[this.deMajorField] });
-                        let index = this.items.findIndex((item) => Object.is(item[this.deKeyField], select[this.deKeyField]));
-                        if (index < 0) {
-                            this.items.push({ [this.deMajorField]: select[this.deMajorField], [this.deKeyField]: select[this.deKeyField] });
-                        }
                     });
                 }
+                if (value) {
+                    const index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], value));
+                    if (index != -1) {
+                        this.selectItems.splice(index, 1, ...selects);
+                    }
+                } else {
+                    this.selectItems.push(...selects);
+                }
                 if (this.name && this.activeData) {
-                    let value = selects.length > 0 ? JSON.stringify(this.formatValue(selects)) : '';
+                    let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : '';
                     this.$emit('formitemvaluechange', { name: this.name, value: value });
                 }
             })
@@ -343,7 +370,7 @@ export default class AppEYMpicker extends Vue {
      * 解析值,把srfkey和srfmajortext解析成实体属性名
      *
      * @param {any[]} value 需要转换的数组
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     public parseValue(value: any[]){
         let result = [];
@@ -361,7 +388,7 @@ export default class AppEYMpicker extends Vue {
      * 格式化值，把实体属性名格式化成srfkey和srfmajortext
      *
      * @param {any[]} value 需要转换的数组
-     * @memberof AppMpicker
+     * @memberof AppEYMPicker
      */
     public formatValue(value: any[]){
         let result = [];