添加穿梭框导入匹配功能

examples/containers/Transfer.vue

@@ -3,6 +3,10 @@
     <ks-transfer
       v-model="value"
       :list="list"
+      :mapProps="{
+        key: 'id',
+        label:'label'
+      }"
     >
       <template
         slot="option"

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.73",
+  "version": "0.1.74",
   "description": "任意门组件库",
   "main": "lib/rymUi.common.js",
   "scripts": {

src/components/Transfer/Transfer.vue

@@ -17,6 +17,12 @@
             @click="filterAllData"
           >检索</el-button>
         </div>
+        <div>
+          <el-button
+            size="mini"
+            @click="showImportDialog"
+          >导入</el-button>
+        </div>
       </div>
       <div class="transfer-allData-box">
         <ul
@@ -132,10 +138,37 @@
             </li>
 
           </template>
-
         </ul>
       </div>
     </div>
+    <el-input
+      id="copyArea"
+      class="copyArea"
+      type="textarea"
+      resize="none"
+    ></el-input>
+    <normal-dialog
+      title="导入"
+      :visible.sync="importDialogVisible"
+      :before-close="closeHandle"
+    >
+      <el-input
+        type="textarea"
+        v-model="importData"
+        :maxlength="200"
+        :autosize="{ minRows: 5, maxRows: 10}"
+        resize="none"
+        placeholder="请粘贴数据"
+        clearable
+      ></el-input>
+      <div slot="footer">
+        <el-button
+          type="primary"
+          @click="checkImportData"
+        >确定</el-button>
+        <el-button @click="closeHandle">取消</el-button>
+      </div>
+    </normal-dialog>
   </div>
 </template>
 
@@ -147,7 +180,13 @@ export default {
     list: Array,
     value: Array,
     onChange: Function,
-    mapProps: Object,
+    mapProps: {
+      type: Object,
+      default: () => ({
+        key: 'id',
+        label: 'name',
+      }),
+    },
   },
 
   data() {
@@ -161,6 +200,8 @@ export default {
       dragging: false,
       startIndex: undefined,
       lastIndex: undefined,
+      importDialogVisible: false,
+      importData: '',
     };
   },
   watch: {
@@ -175,31 +216,20 @@ export default {
   computed: {
     allDataOptions() {
       return this.list
-        .filter(
-          i =>
-            !this.trueValue.includes(
-              this.mapProps ? i[this.mapProps.key] : i.id
-            )
-        )
+        .filter(i => !this.trueValue.includes(i[this.mapProps.key]))
         .filter(i =>
           this.filters.allValue
-            ? this.mapProps
-              ? i[this.mapProps.label].includes(this.filters.allValue)
-              : i.label.includes(this.filters.allValue)
-            : true
+            ? i[this.mapProps.label].includes(this.filters.allValue)
+            : i.label.includes(this.filters.allValue)
         );
     },
     selectDataOptions() {
       return this.list
-        .filter(i =>
-          this.trueValue.includes(this.mapProps ? i[this.mapProps.key] : i.id)
-        )
+        .filter(i => this.trueValue.includes(i[this.mapProps.key]))
         .filter(i =>
           this.filters.selectedValue
-            ? this.mapProps
-              ? i[this.mapProps.label].includes(this.filters.selectedValue)
-              : i.label.includes(this.filters.selectedValue)
-            : true
+            ? i[this.mapProps.label].includes(this.filters.selectedValue)
+            : i.label.includes(this.filters.selectedValue)
         );
     },
   },
@@ -250,11 +280,7 @@ export default {
       this.$emit('close');
     },
     getValue(key, item) {
-      if (this.mapProps) {
-        return item[this.mapProps[key]];
-      }
-      if (key === 'key') return item.id;
-      return item[key];
+      return item[this.mapProps[key]];
     },
     selectedValueHandle(key, val) {
       this.selected[key] = [val];
@@ -299,6 +325,51 @@ export default {
     resetSelect(key) {
       this.selected[key] = [];
     },
+    showImportDialog() {
+      this.importDialogVisible = true;
+    },
+    closeHandle(done) {
+      this.importData = '';
+      done && typeof done == 'function'
+        ? done()
+        : (this.importDialogVisible = false);
+    },
+    checkImportData() {
+      let dataList = this.importData.split(/\W/);
+      console.log(dataList);
+      let errorList = [];
+      let selectedList = [];
+      for (let index = 0; index < dataList.length; index++) {
+        const element = dataList[index];
+        let dataIndex = this.allDataOptions.findIndex(
+          i => i[this.mapProps.label] === element
+        );
+        if (dataIndex > -1) {
+          selectedList.push(this.allDataOptions[dataIndex][this.mapProps.key]);
+        } else {
+          errorList.push(element);
+        }
+      }
+      this.selected.all = selectedList;
+      if (errorList.length > 0) {
+        this.showFailMessage(errorList);
+      }
+      this.closeHandle();
+    },
+    showFailMessage(list) {
+      console.log(list);
+      this.$mdAlert
+        .confirm(list.join(',') + ' 等数据并未匹配到选项,点击确认复制失败选项')
+        .then(action => {
+          let input = document.getElementById('copyArea');
+          input.value = list.join('\n');
+          input.select();
+          document.execCommand('copy');
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
   },
 };
 </script>
@@ -365,5 +436,12 @@ export default {
       margin: 0 10px 0 5px;
     }
   }
+  .copyArea {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: -10;
+  }
 }
 </style>