穿梭框基础文件

src/components/app-transfer/app-transfer.vue

 <template>
-  <Select v-model="dataRight" style="width:586px" multiple>
-    <Option
-      class="hidden"
-      :value="item"
-      v-for="(item,i) in dataRight"
-      :key="i"
-    >{{dataLeft[item-1].label}}</Option>
+  <Select
+    @on-open-change="transferRefresh"
+    @on-change="dataChange"
+    v-model="dataRight"
+    style="width:586px"
+    multiple
+  >
+    <Option class="hidden" :value="item" v-for="(item,i) in dataRight" :key="i">{{findLabel(item)}}</Option>
     <el-transfer v-model="dataRight" :data="dataLeft" @change="dataChange" :titles="['未选择', '已选择']"></el-transfer>
   </Select>
 </template>
 <script lang="ts">
 import { Vue, Component, Watch, Prop, Model } from "vue-property-decorator";
 import CodeListService from "@service/app/codelist-service";
+import { ElSelect } from "element-ui/types/select";
 
 @Component({})
 export default class AppTransfer extends Vue {
   /**
    * 表单传递右侧框中的数据
    */
-  @Prop() public data?: any;
+  //   @Prop() public data?: any;
   /**
    * 左侧框数据
    */
@@ -38,14 +40,6 @@ export default class AppTransfer extends Vue {
     $store: this.$store
   });
 
-  /**
-   * 额外参数
-   *
-   * @type {*}
-   * @memberof AppTransfer
-   */
-  public otherParam: any;
-
   /**
    * 查询参数
    * @type {*}
@@ -53,12 +47,16 @@ export default class AppTransfer extends Vue {
    */
   public queryParam: any;
 
+  /**
+   * 表单传入字符串值分隔符
+   */
+  @Prop() public valueSeparator?: string;
   /**
    * 当前选中值
    * @type {any}
    * @memberof AppTransfer
    */
-  @Model("change") readonly itemValue!: any;
+  @Model("change") public itemValue!: any;
 
   /**
    * 代码表标识
@@ -76,33 +74,20 @@ export default class AppTransfer extends Vue {
    */
   @Prop() public codelistType?: string;
 
-  /**
-   * 监听表单数据
-   *
-   * @memberof AppTransfer
-   */
-
-  @Watch("data", { deep: true })
-  onDataChange(newVal: any, val: any) {
-    if (newVal) {
-    }
-  }
   /**
    * 组件change事件,右侧框数据变化时
    * @memberof AppTransfer
    */
   dataChange(e: any) {
     console.log(e);
-    let val: any[] = [];
     let newVal: any;
-    this.dataLeft.forEach((elem: any) => {
-      e.forEach((item: any) => {
-        if (elem.key === item) val.push(elem.value);
-      });
-    });
-    newVal = val.join(",");
+    newVal = e.join(`${this.valueSeparator}`);
     console.log(newVal, typeof newVal);
-    if (newVal) this.$emit("change", newVal);
+    if (newVal) {
+      this.$emit("change", newVal);
+    } else {
+      this.$emit("change", null);
+    }
   }
 
   /**
@@ -151,55 +136,6 @@ export default class AppTransfer extends Vue {
    */
   @Prop() public placeholder?: string;
 
-  /**
-   * 获取值对象
-   *
-   * @memberof AppTransfer
-   */
-  get currentVal() {
-    return this.itemValue;
-  }
-
-  /**
-   * 代码表
-   *
-   * @type {any[]}
-   * @memberof AppTransfer
-   */
-  // public items: any[] = [];
-
-  /**
-   * 公共参数处理
-   *
-   * @param {*} arg
-   * @returns
-   * @memberof AppTransfer
-   */
-  public handlePublicParams(arg: any) {
-    // 合并表单参数
-    arg.param = this.viewparams
-      ? JSON.parse(JSON.stringify(this.viewparams))
-      : {};
-    arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
-    // 附加参数处理
-    if (this.itemParam && this.itemParam.context) {
-      let _context = this.$util.formatData(
-        this.data,
-        arg.context,
-        this.itemParam.context
-      );
-      Object.assign(arg.context, _context);
-    }
-    if (this.itemParam && this.itemParam.param) {
-      let _param = this.$util.formatData(
-        this.data,
-        arg.param,
-        this.itemParam.param
-      );
-      Object.assign(arg.param, _param);
-    }
-  }
-
   /**
    * vue  生命周期
    *
@@ -225,7 +161,7 @@ export default class AppTransfer extends Vue {
         console.log(`----${this.tag}----代码表不存在`);
       }
     } else if (this.tag && Object.is(this.codelistType, "DYNAMIC")) {
-      // 公共参数处理
+      // 处理公共参数
       let data: any = {};
       this.handlePublicParams(data);
       // 参数处理
@@ -244,6 +180,38 @@ export default class AppTransfer extends Vue {
         });
     }
   }
+
+  /**
+   * 公共参数处理
+   *
+   * @param {*} arg
+   * @returns
+   * @memberof AppTransfer
+   */
+  public handlePublicParams(arg: any) {
+    // 合并表单参数
+    arg.param = this.viewparams
+      ? JSON.parse(JSON.stringify(this.viewparams))
+      : {};
+    arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
+    // 附加参数处理
+    if (this.itemParam && this.itemParam.context) {
+      let _context = this.$util.formatData(
+        this.itemValue,
+        arg.context,
+        this.itemParam.context
+      );
+      Object.assign(arg.context, _context);
+    }
+    if (this.itemParam && this.itemParam.param) {
+      let _param = this.$util.formatData(
+        this.itemValue,
+        arg.param,
+        this.itemParam.param
+      );
+      Object.assign(arg.param, _param);
+    }
+  }
   /**
    * 初始化左侧框数据
    */
@@ -253,8 +221,7 @@ export default class AppTransfer extends Vue {
     this.dataLeft = [];
     left.forEach((elem: any, i: any) => {
       this.dataLeft.push({
-        key: i + 1,
-        id: elem.id,
+        key: elem.id,
         value: elem.value,
         label: elem.label,
         disabled: elem.disabled
@@ -265,10 +232,12 @@ export default class AppTransfer extends Vue {
    * 初始化右侧框数据
    */
   public initRight() {
-    let _data: string = this.data;
+    let _data: any = this.itemValue;
     console.log(_data);
+    console.log(this.valueSeparator);
+
     if (_data) {
-      let newData: any[] = _data.split(",");
+      let newData: any[] = _data.split(`${this.valueSeparator}`);
       this.dataLeft.forEach((elem: any) => {
         newData.forEach((item: any) => {
           if (item === elem.value) {
@@ -278,6 +247,26 @@ export default class AppTransfer extends Vue {
       });
     }
   }
+  /**
+   * 穿梭框打开时刷新数据
+   */
+  public transferRefresh(e: any) {
+    console.log(e);
+    if (e && this.codelistType === "DYNAMIC") {
+      this.dataLeft = [];
+      this.dataRight = [];
+      this.dataHandle();
+    }
+  }
+
+  /**
+   * 找到dataLeft中key与dataRight中item相等的元素，返回label
+   */
+  public findLabel(item: any) {
+    for (const elem of this.dataLeft) {
+      if (elem.key === item) return elem.label;
+    }
+  }
 }
 </script>