穿梭框本地文件更新

src/components/app-transfer/app-transfer.less

-.ivu-select-dropdown {
+.transfer-select{
+  .ivu-select-dropdown {
       padding: 0px;
       .hidden {
           display: none;
       }
+      .el-transfer{
+          min-width: 100% !important;
+          display: flex;
+          justify-content: space-between;
+          .el-transfer-panel{
+              min-width: 25%;
           }
+          .el-transfer__buttons{
+              align-self: center;
+          }
+      }
+  }
+}
+

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

 <template>
     <Select
+        class="transfer-select"
         @on-open-change="transferRefresh"
         @on-change="dataChange"
         v-model="dataRight"
-    :style="{width:width?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>
+        :style="{width:width}"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        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="['未选择', '已选择']"/>
     </Select>
 </template>
+
 <script lang="ts">
 import { Vue, Component, Watch, Prop, Model } from "vue-property-decorator";
 import CodeListService from "@service/app/codelist-service";
@@ -17,29 +26,29 @@ import { ElSelect } from "element-ui/types/select";
 
 @Component({})
 export default class AppTransfer extends Vue {
-
     /**
-   * 穿梭框宽度
+     * 传入表单数据
      *
      * @type {*}
      * @memberof AppTransfer
      */
-  @Prop() public width: any;
+    @Prop() public data:any;
 
     /**
-   * 表单传入字符串值分隔符
+     * 穿梭框宽度
      * 
      * @type {string}
      * @memberof AppTransfer
      */
-  @Prop() public valueSeparator!: string;
+    @Prop() public width?: string;
 
     /**
-   * 当前选中值
-   * @type {any}
+     * 表单传入字符串值分隔符
+     * 
+     * @type {string}
      * @memberof AppTransfer
      */
-  @Model("change") public itemValue!: any;
+    @Prop() public valueSeparator?: string;
 
     /**
      * 代码表标识
@@ -99,18 +108,24 @@ export default class AppTransfer extends Vue {
     @Prop() public disabled?: any;
 
     /**
-   * placeholder
+     * 穿梭框提示内容
      * 
      * @type {string}
      * @memberof AppTransfer
-   *
      */
     @Prop() public placeholder?: string;
 
+    /**
+     * 当前选中值
+     * 
+     * @type {any}
+     * @memberof AppTransfer
+     */
+    @Model("change") public itemValue!: any;
+
     /**
      * 左侧框数据
      * 
-   * @type {any[]}
      * @memberof AppTransfer
      */
     public dataLeft: any[] = [];
@@ -118,7 +133,6 @@ export default class AppTransfer extends Vue {
     /**
      * 右侧框数据
      * 
-   * @type {any[]}
      * @memberof AppTransfer
      */
     public dataRight: any[] = [];
@@ -129,42 +143,18 @@ export default class AppTransfer extends Vue {
      * @type {CodeListService}
      * @memberof AppTransfer
      */
-
-  public codeListService: CodeListService = new CodeListService({$store: this.$store});
+    public codeListService: CodeListService = new CodeListService({
+        $store: this.$store
+    });
 
     /**
      * vue  生命周期
-   *
      * @memberof AppTransfer
      */
     public created() {
         this.dataHandle();
     }
 
-  /**
-   * 组件change事件,右侧框数据变化时
-   * 
-   * @memberof AppTransfer
-   */
-  dataChange(e: any) {
-    let _valueSeparator: string = this.initValueSeparator();
-    let newVal: string = e.join(`${_valueSeparator}`);
-    if (newVal) {
-      this.$emit("change", newVal);
-    } else {
-      this.$emit("change", null);
-    }
-  }
-
-  /**
-   * 初始化valueSeparator
-   * 
-   * @memberof AppTransfer
-   */
-  public initValueSeparator() {
-    return this.valueSeparator?this.valueSeparator:",";
-  }
-
     /**
      * 数据处理
      * 
@@ -175,8 +165,7 @@ export default class AppTransfer extends Vue {
         const codelist = this.$store.getters.getCodeList(this.tag);
         if (codelist) {
             this.dataLeft = [...JSON.parse(JSON.stringify(codelist.items))];
-        this.initLeft();
-        this.initRight();
+            this.initData()
         } else {
             console.log(`----${this.tag}----代码表不存在`);
         }
@@ -187,11 +176,13 @@ export default class AppTransfer extends Vue {
             // 参数处理
             let _context = data.context;
             let _param = data.param;
-      this.codeListService.getItems(this.tag, _context, _param).then((res: any) => {
+            this.codeListService
+                .getItems(this.tag, _context, _param)
+                .then((res: any) => {
                     this.dataLeft = res;
-          this.initLeft();
-          this.initRight();
-        }).catch((error: any) => {
+                    this.initData()
+                })
+                .catch((error: any) => {
                     console.log(`----${this.tag}----代码表不存在`);
                 });
         }
@@ -210,21 +201,22 @@ export default class AppTransfer extends Vue {
         arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
         // 附加参数处理
         if (this.localContext && Object.keys(this.localContext).length > 0) {
-      let _context = this.$util.computedNavData(this.itemValue,arg.context,arg.param,this.localContext);
+            let _context = this.$util.computedNavData(this.data,arg.context,arg.param,this.localContext);
             Object.assign(arg.context, _context);
         }
         if (this.localParam && Object.keys(this.localParam).length > 0) {
-      let _param = this.$util.computedNavData(this.itemValue,arg.context,arg.param,this.localParam);
+            let _param = this.$util.computedNavData(this.data,arg.context,arg.param,this.localParam);
             Object.assign(arg.param, _param);
         }
     }
 
     /**
-   * 初始化左侧框数据
+     * 初始化获取到的选项数据
      * 
      * @memberof AppTransfer
      */
-  public initLeft() {
+    public initData(){
+        // 初始化左侧框数据
         let left: any[] = [];
         Object.assign(left, this.dataLeft);
         this.dataLeft = [];
@@ -236,14 +228,8 @@ export default class AppTransfer extends Vue {
                 disabled: elem.disabled
             });
         });
-  }
 
-  /**
-   * 初始化右侧框数据
-   * 
-   * @memberof AppTransfer
-   */
-  public initRight() {
+        // 初始化右侧框数据
         let _valueSeparator: any;
         _valueSeparator = this.initValueSeparator();
         let _data: any = this.itemValue;
@@ -261,12 +247,34 @@ export default class AppTransfer extends Vue {
         }
     }
 
+    /**
+     * 组件change事件,右侧框数据变化时
+     * @memberof AppTransfer
+     */
+    public dataChange(e: any) {
+        let _valueSeparator: string;
+        _valueSeparator = this.initValueSeparator();
+        let newVal: string = e.join(`${_valueSeparator}`);
+        if (newVal) {
+            this.$emit("change", newVal);
+        } else {
+            this.$emit("change", null);
+        }
+    }
+
+    /**
+     * 初始化valueSeparator
+     * @memberof AppTransfer
+     */
+    public initValueSeparator() {
+        return this.valueSeparator ? this.valueSeparator : ",";
+    }
+
     /**
      * 穿梭框打开时刷新数据
-   *
      * @memberof AppTransfer
      */
-  public transferRefresh(e: any) {
+    public transferRefresh(e: boolean) {
         if (e && this.codelistType === "DYNAMIC") {
             this.dataLeft = [];
             this.dataHandle();
@@ -275,7 +283,6 @@ export default class AppTransfer extends Vue {
 
     /**
      * 找到dataLeft中key与dataRight中item相等的元素，返回label
-   * 
      * @memberof AppTransfer
      */
     public findLabel(item: any) {
@@ -283,7 +290,6 @@ export default class AppTransfer extends Vue {
             if (elem.key === item) return elem.label;
         }
     }
-
 }
 </script>