update: 客户标签-设置标签值

src/view/manualTag/manualTagEdit.vue

@@ -34,8 +34,9 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="标签值：" prop="tagValue">
+          <p class="tag-list-tips">支持批量复制Excel中的数据粘贴至下方输入框</p>
           <div class="tag-list">
-            <tag-value-item v-for="item in ruleForm.tagValue" :current-length="ruleForm.tagValue.length" :key="item.id" :item="item" class="w-full" @add="onAddTagVal" @del="onDelTagVal" />
+            <tag-value-item v-for="item in ruleForm.tagValue" :current-length="ruleForm.tagValue.length" :key="item.id" :item="item" class="w-full" @add="onAddTagVal" @del="onDelTagVal" @paste="onPasteVal" />
           </div>
         </el-form-item>
         <el-form-item label="标签描述：" prop="tagDescribe">
@@ -322,10 +323,37 @@ export default {
         this.ruleForm.tagValue.splice(index, 1);
       }
     },
+    onPasteVal(e) {
+      // 只可粘贴一列
+      // 一个单元格处理成一个标签值
+      const html = e.clipboardData.getData('text/html');
+      const $doc = new DOMParser().parseFromString(html,'text/html');
+      const $tds = Array.from($doc.querySelectorAll('table tr')).map(el => Array.from(el.childNodes).filter(item => item.tagName == 'TD'));
+      if ($tds.some(el => el.length > 1)) {
+        return this.$message.warning('请不要复制多列');
+      }
+      const data = $tds.filter(el => el.length > 0).map(el => el[0].innerText).filter(el => el.length > 0);
+      this.ruleForm.tagValue = this.ruleForm.tagValue.filter(el => el.tagItemName.length > 0);
+      // 加上已填写的数据大于100时，不进行粘贴
+      if (this.ruleForm.tagValue.length + data.length > 100) {
+        return this.$message.warning(`最多可以复制${100 - this.ruleForm.tagValue.length}个标签值`);
+      }
+      this.ruleForm.tagValue = this.ruleForm.tagValue.concat(data.map(el => {
+        return {
+          id: GenNonDuplicateID(),
+          deleteFlag: false,
+          tagItemName: el
+        }
+      }));
+    }
   }
 };
 </script>
 <style lang="scss" scoped>
+.tag-list-tips {
+  font-size: 12px;
+  color: #909399;
+}
 /deep/ .el-dialog {
   margin-top: 10vh !important;
 }

src/view/manualTag/tag-value-item.vue

 <template>
   <div class="flex">
-    <el-input v-model="item.tagItemName" placeholder="请输入标签值" class="w-380" maxlength="15" show-word-limit @change="onChange" />
-    <template>
-      <i v-if="currentLength < 50" class="iconfont plus icon margin icon-PlusOutlined" @click="add" />
-      <i v-else class="icon margin" />
-    </template>
+    <el-input v-model="item.tagItemName" placeholder="请输入标签值" class="w-380" maxlength="15" show-word-limit @change="onChange" @paste.native="onPaste" />
+    <i class="iconfont plus icon margin icon-PlusOutlined" @click="add" />
     <i v-if="currentLength > 1 && !item.tagItemId" class="iconfont delete icon icon-delete" @click="del" />
   </div>
 </template>
@@ -22,7 +19,19 @@ export default {
     };
   },
   methods: {
+    onPaste(e) {
+      if (this.currentLength >= 100) {
+        return this.$message.warning('标签值最多支持设置100个');
+      }
+      this.$emit('paste', e);
+      setTimeout(() => {
+        this.item.tagItemName = '';
+      }, 10);
+    },
     add() {
+      if (this.currentLength >= 100) {
+        return this.$message.warning('标签值最多支持设置100个');
+      }
       this.$emit('add', this.item.id);
     },
     del() {