cnhis-design-vue 2.1.56 → 2.1.57

package/packages/tag/src/TagGroup.vue

@@ -1,622 +1,622 @@
-<template>
-  <div class="label-wrap">
-    <div class="left-label-wrap">
-      <c-tabs
-        hideAdd
-        :activeKey="labelAnchorKey"
-        @change="labelAnchorTabsOnChange"
-        tab-position="left"
-        :class="['self-tabs', `self-tabs-${color}`]"
-      >
-        <template v-for="v in labelList">
-          <c-tab-pane :key="v.curKey">
-            <span slot="tab">
-              {{ v.title }}
-            </span>
-          </c-tab-pane>
-        </template>
-      </c-tabs>
-    </div>
-
-    <div class="right-label-wrap">
-      <a-anchor
-        v-show="false"
-        :getContainer="anchorGetContainer"
-        @click="handleAnchorClick"
-        @change="anchorOnChange"
-      >
-        <template v-for="(v, i) in labelList">
-          <a-anchor-link :key="v.curKey" :href="`#${v.curKey}`" :title="i" />
-        </template>
-      </a-anchor>
-      <div v-for="(v, k) in labelList" :key="k" class="edit-label-content">
-        <div class="edit-label" :id="v.curKey">
-          {{ v.title }}
-          <span class="edit-label-type">({{ v.multipleChoice == 2 ? "单" : "多" }}选)</span>
-        </div>
-        <div class="edit-content">
-          <!-- disable -->
-          <div v-if="!v.itemList" class="label-disable-wrap">
-            <p class="label-disable-title">无可选标签</p>
-            <p class="label-disable-desc">请联系管理员进行标签管理设置</p>
-          </div>
-          <!--  -->
-          <div v-else class="label-content">
-            <a-checkable-tag
-              v-for="item in v.itemList"
-              v-model="item.isSelect"
-              @change="handleLabelChange($event, item, v, v.curKey)"
-              :key="item.labelId"
-              :class="[{ 'sys-label-tag': item.isPublic && item.isPublic == 1 }, `label-tag-${color}`]"
-            >
-              <a-tooltip placement="topLeft">
-                <template slot="title">
-                  <span>{{ item.labelName }}</span>
-                </template>
-                {{ item.labelName }}
-              </a-tooltip>
-              <a-icon
-               class="label-close" 
-               v-show="!(item.isPublic && item.isPublic == 1)" 
-               type="close" 
-               @click.native.stop="handleDelLabel(item, v)"
-              />
-            </a-checkable-tag>
-            <a-button
-              v-if="isEdit && !v.isNoAdd"
-              type="dashed"
-              :class="['label-add', `label-tag-${color}`]"
-              v-show="!v.showAdd"
-              @click="handleAddLabel($event, v)"
-            >
-              <a-icon type="plus" />
-              标签
-            </a-button>
-            <a-input
-              v-if="isEdit && !v.isNoAdd"
-              :class="['label-add', 'add-input', `label-tag-${color}`]"
-              v-model.trim="v.addVal"
-              v-show="v.showAdd"
-              @blur="hanldeBlur($event, v, v.curKey)"
-            >
-              <a-icon slot="suffix" type="close" @click.native.stop="clearaddVal($event, v)" />
-            </a-input>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import create from "@/core/create";
-import { Tooltip, Icon, Button, Input, Tag, Anchor } from "ant-design-vue";
-import Tabs from '~/tabs';
-// import Anchor from '~/anchor';
-
-export default create({
-  name: 'tag-group',
-  components: {
-    [Input.name]: Input,
-    [Icon.name]: Icon,
-    [Tabs.name]: Tabs,
-    [Anchor.name]: Anchor,
-    [Anchor.Link.name]: Anchor.Link,
-    [Tooltip.name]: Tooltip,
-    [Button.name]: Button,
-    [Tag.name]: Tag,
-    [Tag.CheckableTag.name]: Tag.CheckableTag,
-  },
-
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    color: {
-      type: String,
-      default: 'blue',
-    },
-    isEdit: {
-      // 是否可以编辑
-      type: Boolean,
-      default: true
-    },
-  },
-
-  watch: {
-    list: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (val && val.length > 0) {
-          // this.labelList = [...val];
-          this.labelList = JSON.parse(JSON.stringify(val));
-          this.init();
-        }
-      }
-    },
-  },
-
-  data() {
-    return {
-      labelList: [],
-      labelAnchorKey: '',
-      labelSelectedEdit: [], // 编辑状态的label值
-      cacheAnchorKey: ''
-    }
-  },
-
-  created() {
-  },
-
-  methods: {
-    init() {
-      this.labelAnchorKey = this.labelList[0].curKey;
-    },
-    labelAnchorTabsOnChange(key) {
-      if (!key) return;
-      setTimeout(() => {
-        let anchorKey = "#" + key;
-        let curLink;
-        curLink = this.$el.querySelector("a[href='" + anchorKey + "']");
-        curLink && curLink.click();
-        this.labelAnchorKey = key;
-      }, 32);
-    },
-    handleLabelChange(v, d, labelGroup, k) {
-      const list = labelGroup.itemList;
-      const multipleChoice = labelGroup.multipleChoice;
-      let selectedList = this.labelSelectedEdit || [];
-      if (v) {
-        if (selectedList.some(n => n.labelId == d.labelId)) {
-          return;
-        }
-        // 单选处理
-        if (multipleChoice == 2) {
-          const { typeId, labelId } = d;
-          selectedList = selectedList.filter(item => item.typeId !== typeId);
-          list.forEach(item => {
-            if (item.labelId !== labelId) {
-              item.isSelect = false;
-            }
-          });
-        }
-        selectedList.push(d);
-      } else {
-        const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
-        if (fdIndex != -1) {
-          selectedList.splice(fdIndex, 1);
-        }
-      }
-      this.labelSelectedEdit = [...selectedList];
-      // console.log(this.labelSelectedEdit);
-      this.$emit('changeLabel', { val: this.labelSelectedEdit, curKey: k });
-    },
-    handleDelLabel(v, o) {
-      let selectList = this.labelSelectedEdit || [];
-      if (selectList && selectList.length) {
-        const delIndex = selectList.findIndex(n => n.labelId == v.labelId);
-        delIndex != -1 && selectList.splice(delIndex, 1);
-      }
-      const delI = o.itemList.findIndex(n => n.labelId == v.labelId);
-      delI != -1 && o.itemList.splice(delI, 1);
-      this.$emit('delLabel', { curKey: o.curKey, labelId: v.labelId });
-    },
-    clearaddVal(e, v) {
-      // e.preventDefault();
-      v.addVal = "";
-    },
-    handleAddLabel($event, item) {
-      item.showAdd = true;
-      const nextInput = $event.target.nextElementSibling;
-      this.$nextTick(() => {
-        nextInput?.firstChild?.focus();
-      }, 20);
-    },
-    hanldeBlur($event, d, k) {
-      setTimeout(() => {
-        // const className = $event.relatedTarget.className;
-        // if (className.includes("ant-modal-close") || className.includes("ant-btn")) {
-        //   d.showAdd = false;
-        //   d.addVal = "";
-        //   return;
-        // }
-        if (d.addVal) {
-          this.handleSaveLabel(d, k);
-        } else {
-          d.showAdd = false;
-        }
-      }, 150);  
-    },
-    handleSaveLabel(v, k) {
-      // 重复校验
-      let privateLabel = v.itemList.filter(item => {
-        return !(item.isPublic && item.isPublic == 1);
-      });
-      let hasRepetition = !!privateLabel.find(item => {
-        return item.labelName === v.addVal;
-      });
-      if (hasRepetition) {
-        this.$message.error("标签名称重复!");
-        return false;
-      }
-      // let parentColor = "";
-      // if (v.itemList?.length) {
-      //   parentColor = v.itemList[0].parentColor || v.parentColor || "";
-      // }
-      v.showAdd = false;
-      // 此处触发新增方法
-      const val = v.addVal;
-      v.addVal = '';
-      v.itemList.push({
-        labelId: `_${Date.now().toString()}`,
-        isSelect: false,
-        labelName: val
-      })
-      // this.$set(this.labelList, itemList, );
-      this.$emit('addLabel', {val, curKey: k});
-    },
-    anchorGetContainer() {
-      return this.$el?.querySelector(".right-label-wrap");
-    },
-    handleAnchorClick(e) {
-      e.preventDefault();
-    },
-    anchorOnChange(link) {
-      if (!link) return;
-      let curLink = link.slice(1);
-      this.cacheAnchorKey = curLink;
-    },
-  }
-})
-</script>
-
-<style lang="less">
-  @color-blue: #2d7aff;
-  @bg-blue: rgba(85, 133, 245, 1);
-  @color-yellow: #ff6a00;
-  @bg-yellow: rgba(204, 153, 0, 1);
-  @color-green: rgba(0, 204, 204, 1);
-  // @bg-green: rgba(204, 153, 0, 1);
-  .left-label-wrap {
-    .self-tabs {
-      &.self-tabs-blue {
-        .ant-tabs-tab-active {
-          color: @color-blue;
-        }
-        .ant-tabs-tab:hover {
-          color: @color-blue;
-        }
-        .ant-tabs-ink-bar {
-          background-color: @bg-blue;
-        }
-      }
-
-      &.self-tabs-yellow {
-        .ant-tabs-tab-active {
-          color: @color-yellow;
-        }
-        .ant-tabs-tab:hover {
-          color: @color-yellow;
-        }
-        .ant-tabs-ink-bar {
-          background-color: @color-yellow;
-        }
-      }
-
-      &.self-tabs-green {
-        .ant-tabs-tab-active {
-          color: @color-green;
-        }
-        .ant-tabs-tab:hover {
-          color: @color-green;
-        }
-        .ant-tabs-ink-bar {
-          background-color: @color-green;
-        }
-      }
-    }
-  }
-  .edit-label-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    font-size: 14px;
-
-    .edit-label {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0 5px 0 16px;
-      word-wrap: normal;
-      color: #212121;
-      font-size: 16px;
-    }
-
-    .edit-content {
-      flex: 1;
-      padding: 8px 0 0 16px;
-      width: 100%;
-
-      .label-content {
-        display: flex;
-        flex-wrap: wrap;
-        line-height: 34px;
-
-        .label-add {
-          position: relative;
-          cursor: pointer;
-          padding-right: 10px;
-          height: 32px;
-          min-width: 64px;
-          max-width: 108px;
-          margin-bottom: 10px;
-
-          &.add-input {
-            padding: 0;
-
-            .ant-input {
-              padding-right: 20px;
-            }
-
-            &.label-tag-blue {
-              .ant-input:focus {
-                border-color: @bg-blue;
-                box-shadow: 0 0 0 2px rgba(85, 133, 245, .2);
-              }
-            }
-            &.label-tag-yellow {
-              .ant-input:focus {
-                border-color: @bg-yellow;
-                box-shadow: 0 0 0 2px rgba(204, 153, 0, .2);
-              }
-            }
-            &.label-tag-green {
-              .ant-input:focus {
-                border-color: @color-green;
-                box-shadow: 0 0 0 2px rgba(0, 204, 204, .2);
-              }
-            }
-
-            .ant-input-suffix {
-              right: 6px;
-            }
-          }
-
-          &.label-tag-blue:hover {
-            border-color: @color-blue;
-            color: @color-blue;
-          }
-          &.label-tag-yellow:hover {
-            border-color: @color-yellow;
-            color: @color-yellow
-          }
-          &.label-tag-green:hover {
-            border-color: @color-green;
-            color: @color-green;
-          }
-
-          .ant-input:not(:last-child) {
-            padding-right: 14px;
-          }
-
-          .label-close {
-            font-size: 12px;
-          }
-          .anticon-close {
-            position: unset;
-            color: rgba(102, 102, 102, 0.6) !important;
-            font-size: 12px;
-            &:hover {
-              color: #666666 !important;
-            }
-          }
-        }
-
-        // .label-tag-blue {
-        //   background: rgba(255, 255, 255, 1);
-        //   color: @bg-blue;
-        //   border-color: @bg-blue;
-        // }
-
-        // .label-tag-yellow {
-        //   color: rgb(255, 255, 255);
-        //   border-color: rgb(204, 153, 0);
-        //   background: @bg-yellow
-        // }
-
-        // .label-tag-green {
-        //   color: rgba(255, 255, 255, 1);
-        //   border-color: @color-green;
-        //   background: @color-green;
-        // }
-      }
-
-      .ant-tag-checkable {
-        cursor: pointer;
-        position: relative;
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        min-width: 108px;
-        max-width: 108px;
-        // border: 1px solid rgba(85, 133, 245, 0.2);
-        // background: rgba(85, 133, 245, 0.2);
-        // color: #5585f5;
-        color: rgba(33, 33, 33, 0.6);
-        background: rgb(250, 250, 250);
-        border-color: rgba(213, 213, 213, 0.8);
-        font-size: 14px;
-        border-radius: 4px;
-        margin-bottom: 8px;
-        box-sizing: border-box;
-
-        span {
-          display: inline-block;
-          width: 80px;
-          height: 100%;
-          line-height: 30px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        &.label-tag-blue {
-          // border-color: rgba(85, 133, 245, 0.2);
-          // background: rgba(85, 133, 245, 0.2);
-          // color: @bg-blue;
-
-          .label-close {
-            color: @bg-blue;
-          }
-
-          &.ant-tag-checkable-checked {
-            background: @bg-blue;
-          }
-        }
-
-        &.label-tag-yellow {
-          // color: rgb(204, 153, 0);
-          // border-color: rgb(204, 153, 0);
-          // background: rgba(204, 153, 0, 0.2);
-
-          .label-close {
-            color: rgb(204, 153, 0);
-          }
-
-          &.ant-tag-checkable-checked {
-            background: @bg-yellow
-          }
-        }
-
-        &.label-tag-green {
-          // color: @color-green;
-          // border-color: @color-green;
-          // background: rgba(0, 204, 204, 0.2);
-
-          .label-close {
-            color: @color-green;
-          }
-
-          &.ant-tag-checkable-checked {
-            background: @color-green;
-          }
-        }
-      }
-
-      .ant-tag-checkable-checked {
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        width: 64px;
-        background: #5585f5;
-        color: #fff !important;
-        &.sys-label-tag {
-          width: 100%;
-        }
-
-        .label-close {
-          color: #fff !important;
-        }
-      }
-      .ant-btn-dashed {
-        color: #a6a6a6;
-        width: 104px;
-        padding: 0;
-        border-color: rgba(0, 0, 0, 0.2);
-      }
-      .label-close {
-        color: rgba(102, 102, 102, 0.6) !important;
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        font-size: 12px;
-        &:hover {
-          color: #666666 !important;
-        }
-      }
-    }
-  }
-</style>
-<style lang="less" scoped>
-  .label-disable-wrap {
-    width: 100%;
-    font-size: 14px;
-    line-height: 20px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .label-disable-img {
-      width: 320px;
-      height: 248px;
-    }
-
-    .label-disable-title {
-      color: #2e2e2e;
-      margin-bottom: 5px;
-    }
-
-    .label-disable-desc {
-      color: #969696;
-    }
-  }
-  .label-wrap {
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
-
-  .left-label-wrap {
-    width: 160px;
-    height: 404px;
-    max-height: 404px;
-    &.total-left-label-wrap {
-      height: calc(100vh - 109px);
-      max-height: calc(100vh - 109px);
-    }
-    /deep/.ant-tabs {
-      height: 100%;
-      .ant-tabs-nav-container {
-        padding: 0;
-      }
-      .ant-tabs-left-bar {
-        width: 100%;
-        .ant-tabs-tab {
-          text-align: left;
-        }
-      }
-      .ant-tabs-tab-prev,
-      .ant-tabs-tab-next {
-        display: none !important;
-      }
-      .ant-tabs-nav-wrap {
-        overflow-y: auto;
-        color: #212121;
-        .ant-tabs-tab {
-          padding: 12px 12px 12px 16px;
-          margin: 0px;
-        }
-      }
-      .ant-tabs-nav .ant-tabs-tab-active {
-        background-color: #f2f2f2;
-      }
-    }
-  }
-  .right-label-wrap {
-    flex: 1;
-    height: 404px;
-    max-height: 404px;
-    overflow-y: auto;
-    &.total-right-label-wrap {
-      max-height: calc(100vh - 109px);
-    }
-  }
-
-  .edit-label-type {
-    font-size: 12px;
-    margin-left: 4px;
-  }
+<template>
+  <div class="label-wrap">
+    <div class="left-label-wrap">
+      <c-tabs
+        hideAdd
+        :activeKey="labelAnchorKey"
+        @change="labelAnchorTabsOnChange"
+        tab-position="left"
+        :class="['self-tabs', `self-tabs-${color}`]"
+      >
+        <template v-for="v in labelList">
+          <c-tab-pane :key="v.curKey">
+            <span slot="tab">
+              {{ v.title }}
+            </span>
+          </c-tab-pane>
+        </template>
+      </c-tabs>
+    </div>
+
+    <div class="right-label-wrap">
+      <a-anchor
+        v-show="false"
+        :getContainer="anchorGetContainer"
+        @click="handleAnchorClick"
+        @change="anchorOnChange"
+      >
+        <template v-for="(v, i) in labelList">
+          <a-anchor-link :key="v.curKey" :href="`#${v.curKey}`" :title="i" />
+        </template>
+      </a-anchor>
+      <div v-for="(v, k) in labelList" :key="k" class="edit-label-content">
+        <div class="edit-label" :id="v.curKey">
+          {{ v.title }}
+          <span class="edit-label-type">({{ v.multipleChoice == 2 ? "单" : "多" }}选)</span>
+        </div>
+        <div class="edit-content">
+          <!-- disable -->
+          <div v-if="!v.itemList" class="label-disable-wrap">
+            <p class="label-disable-title">无可选标签</p>
+            <p class="label-disable-desc">请联系管理员进行标签管理设置</p>
+          </div>
+          <!--  -->
+          <div v-else class="label-content">
+            <a-checkable-tag
+              v-for="item in v.itemList"
+              v-model="item.isSelect"
+              @change="handleLabelChange($event, item, v, v.curKey)"
+              :key="item.labelId"
+              :class="[{ 'sys-label-tag': item.isPublic && item.isPublic == 1 }, `label-tag-${color}`]"
+            >
+              <a-tooltip placement="topLeft">
+                <template slot="title">
+                  <span>{{ item.labelName }}</span>
+                </template>
+                {{ item.labelName }}
+              </a-tooltip>
+              <a-icon
+               class="label-close" 
+               v-show="!(item.isPublic && item.isPublic == 1)" 
+               type="close" 
+               @click.native.stop="handleDelLabel(item, v)"
+              />
+            </a-checkable-tag>
+            <a-button
+              v-if="isEdit && !v.isNoAdd"
+              type="dashed"
+              :class="['label-add', `label-tag-${color}`]"
+              v-show="!v.showAdd"
+              @click="handleAddLabel($event, v)"
+            >
+              <a-icon type="plus" />
+              标签
+            </a-button>
+            <a-input
+              v-if="isEdit && !v.isNoAdd"
+              :class="['label-add', 'add-input', `label-tag-${color}`]"
+              v-model.trim="v.addVal"
+              v-show="v.showAdd"
+              @blur="hanldeBlur($event, v, v.curKey)"
+            >
+              <a-icon slot="suffix" type="close" @click.native.stop="clearaddVal($event, v)" />
+            </a-input>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "@/core/create";
+import { Tooltip, Icon, Button, Input, Tag, Anchor } from "ant-design-vue";
+import Tabs from '~/tabs';
+// import Anchor from '~/anchor';
+
+export default create({
+  name: 'tag-group',
+  components: {
+    [Input.name]: Input,
+    [Icon.name]: Icon,
+    [Tabs.name]: Tabs,
+    [Anchor.name]: Anchor,
+    [Anchor.Link.name]: Anchor.Link,
+    [Tooltip.name]: Tooltip,
+    [Button.name]: Button,
+    [Tag.name]: Tag,
+    [Tag.CheckableTag.name]: Tag.CheckableTag,
+  },
+
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: String,
+      default: 'blue',
+    },
+    isEdit: {
+      // 是否可以编辑
+      type: Boolean,
+      default: true
+    },
+  },
+
+  watch: {
+    list: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) {
+          // this.labelList = [...val];
+          this.labelList = JSON.parse(JSON.stringify(val));
+          this.init();
+        }
+      }
+    },
+  },
+
+  data() {
+    return {
+      labelList: [],
+      labelAnchorKey: '',
+      labelSelectedEdit: [], // 编辑状态的label值
+      cacheAnchorKey: ''
+    }
+  },
+
+  created() {
+  },
+
+  methods: {
+    init() {
+      this.labelAnchorKey = this.labelList[0].curKey;
+    },
+    labelAnchorTabsOnChange(key) {
+      if (!key) return;
+      setTimeout(() => {
+        let anchorKey = "#" + key;
+        let curLink;
+        curLink = this.$el.querySelector("a[href='" + anchorKey + "']");
+        curLink && curLink.click();
+        this.labelAnchorKey = key;
+      }, 32);
+    },
+    handleLabelChange(v, d, labelGroup, k) {
+      const list = labelGroup.itemList;
+      const multipleChoice = labelGroup.multipleChoice;
+      let selectedList = this.labelSelectedEdit || [];
+      if (v) {
+        if (selectedList.some(n => n.labelId == d.labelId)) {
+          return;
+        }
+        // 单选处理
+        if (multipleChoice == 2) {
+          const { typeId, labelId } = d;
+          selectedList = selectedList.filter(item => item.typeId !== typeId);
+          list.forEach(item => {
+            if (item.labelId !== labelId) {
+              item.isSelect = false;
+            }
+          });
+        }
+        selectedList.push(d);
+      } else {
+        const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
+        if (fdIndex != -1) {
+          selectedList.splice(fdIndex, 1);
+        }
+      }
+      this.labelSelectedEdit = [...selectedList];
+      // console.log(this.labelSelectedEdit);
+      this.$emit('changeLabel', { val: this.labelSelectedEdit, curKey: k });
+    },
+    handleDelLabel(v, o) {
+      let selectList = this.labelSelectedEdit || [];
+      if (selectList && selectList.length) {
+        const delIndex = selectList.findIndex(n => n.labelId == v.labelId);
+        delIndex != -1 && selectList.splice(delIndex, 1);
+      }
+      const delI = o.itemList.findIndex(n => n.labelId == v.labelId);
+      delI != -1 && o.itemList.splice(delI, 1);
+      this.$emit('delLabel', { curKey: o.curKey, labelId: v.labelId });
+    },
+    clearaddVal(e, v) {
+      // e.preventDefault();
+      v.addVal = "";
+    },
+    handleAddLabel($event, item) {
+      item.showAdd = true;
+      const nextInput = $event.target.nextElementSibling;
+      this.$nextTick(() => {
+        nextInput?.firstChild?.focus();
+      }, 20);
+    },
+    hanldeBlur($event, d, k) {
+      setTimeout(() => {
+        // const className = $event.relatedTarget.className;
+        // if (className.includes("ant-modal-close") || className.includes("ant-btn")) {
+        //   d.showAdd = false;
+        //   d.addVal = "";
+        //   return;
+        // }
+        if (d.addVal) {
+          this.handleSaveLabel(d, k);
+        } else {
+          d.showAdd = false;
+        }
+      }, 150);  
+    },
+    handleSaveLabel(v, k) {
+      // 重复校验
+      let privateLabel = v.itemList.filter(item => {
+        return !(item.isPublic && item.isPublic == 1);
+      });
+      let hasRepetition = !!privateLabel.find(item => {
+        return item.labelName === v.addVal;
+      });
+      if (hasRepetition) {
+        this.$message.error("标签名称重复!");
+        return false;
+      }
+      // let parentColor = "";
+      // if (v.itemList?.length) {
+      //   parentColor = v.itemList[0].parentColor || v.parentColor || "";
+      // }
+      v.showAdd = false;
+      // 此处触发新增方法
+      const val = v.addVal;
+      v.addVal = '';
+      v.itemList.push({
+        labelId: `_${Date.now().toString()}`,
+        isSelect: false,
+        labelName: val
+      })
+      // this.$set(this.labelList, itemList, );
+      this.$emit('addLabel', {val, curKey: k});
+    },
+    anchorGetContainer() {
+      return this.$el?.querySelector(".right-label-wrap");
+    },
+    handleAnchorClick(e) {
+      e.preventDefault();
+    },
+    anchorOnChange(link) {
+      if (!link) return;
+      let curLink = link.slice(1);
+      this.cacheAnchorKey = curLink;
+    },
+  }
+})
+</script>
+
+<style lang="less">
+  @color-blue: #2d7aff;
+  @bg-blue: rgba(85, 133, 245, 1);
+  @color-yellow: #ff6a00;
+  @bg-yellow: rgba(204, 153, 0, 1);
+  @color-green: rgba(0, 204, 204, 1);
+  // @bg-green: rgba(204, 153, 0, 1);
+  .left-label-wrap {
+    .self-tabs {
+      &.self-tabs-blue {
+        .ant-tabs-tab-active {
+          color: @color-blue;
+        }
+        .ant-tabs-tab:hover {
+          color: @color-blue;
+        }
+        .ant-tabs-ink-bar {
+          background-color: @bg-blue;
+        }
+      }
+
+      &.self-tabs-yellow {
+        .ant-tabs-tab-active {
+          color: @color-yellow;
+        }
+        .ant-tabs-tab:hover {
+          color: @color-yellow;
+        }
+        .ant-tabs-ink-bar {
+          background-color: @color-yellow;
+        }
+      }
+
+      &.self-tabs-green {
+        .ant-tabs-tab-active {
+          color: @color-green;
+        }
+        .ant-tabs-tab:hover {
+          color: @color-green;
+        }
+        .ant-tabs-ink-bar {
+          background-color: @color-green;
+        }
+      }
+    }
+  }
+  .edit-label-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    font-size: 14px;
+
+    .edit-label {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 5px 0 16px;
+      word-wrap: normal;
+      color: #212121;
+      font-size: 16px;
+    }
+
+    .edit-content {
+      flex: 1;
+      padding: 8px 0 0 16px;
+      width: 100%;
+
+      .label-content {
+        display: flex;
+        flex-wrap: wrap;
+        line-height: 34px;
+
+        .label-add {
+          position: relative;
+          cursor: pointer;
+          padding-right: 10px;
+          height: 32px;
+          min-width: 64px;
+          max-width: 108px;
+          margin-bottom: 10px;
+
+          &.add-input {
+            padding: 0;
+
+            .ant-input {
+              padding-right: 20px;
+            }
+
+            &.label-tag-blue {
+              .ant-input:focus {
+                border-color: @bg-blue;
+                box-shadow: 0 0 0 2px rgba(85, 133, 245, .2);
+              }
+            }
+            &.label-tag-yellow {
+              .ant-input:focus {
+                border-color: @bg-yellow;
+                box-shadow: 0 0 0 2px rgba(204, 153, 0, .2);
+              }
+            }
+            &.label-tag-green {
+              .ant-input:focus {
+                border-color: @color-green;
+                box-shadow: 0 0 0 2px rgba(0, 204, 204, .2);
+              }
+            }
+
+            .ant-input-suffix {
+              right: 6px;
+            }
+          }
+
+          &.label-tag-blue:hover {
+            border-color: @color-blue;
+            color: @color-blue;
+          }
+          &.label-tag-yellow:hover {
+            border-color: @color-yellow;
+            color: @color-yellow
+          }
+          &.label-tag-green:hover {
+            border-color: @color-green;
+            color: @color-green;
+          }
+
+          .ant-input:not(:last-child) {
+            padding-right: 14px;
+          }
+
+          .label-close {
+            font-size: 12px;
+          }
+          .anticon-close {
+            position: unset;
+            color: rgba(102, 102, 102, 0.6) !important;
+            font-size: 12px;
+            &:hover {
+              color: #666666 !important;
+            }
+          }
+        }
+
+        // .label-tag-blue {
+        //   background: rgba(255, 255, 255, 1);
+        //   color: @bg-blue;
+        //   border-color: @bg-blue;
+        // }
+
+        // .label-tag-yellow {
+        //   color: rgb(255, 255, 255);
+        //   border-color: rgb(204, 153, 0);
+        //   background: @bg-yellow
+        // }
+
+        // .label-tag-green {
+        //   color: rgba(255, 255, 255, 1);
+        //   border-color: @color-green;
+        //   background: @color-green;
+        // }
+      }
+
+      .ant-tag-checkable {
+        cursor: pointer;
+        position: relative;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        min-width: 108px;
+        max-width: 108px;
+        // border: 1px solid rgba(85, 133, 245, 0.2);
+        // background: rgba(85, 133, 245, 0.2);
+        // color: #5585f5;
+        color: rgba(33, 33, 33, 0.6);
+        background: rgb(250, 250, 250);
+        border-color: rgba(213, 213, 213, 0.8);
+        font-size: 14px;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        box-sizing: border-box;
+
+        span {
+          display: inline-block;
+          width: 80px;
+          height: 100%;
+          line-height: 30px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &.label-tag-blue {
+          // border-color: rgba(85, 133, 245, 0.2);
+          // background: rgba(85, 133, 245, 0.2);
+          // color: @bg-blue;
+
+          .label-close {
+            color: @bg-blue;
+          }
+
+          &.ant-tag-checkable-checked {
+            background: @bg-blue;
+          }
+        }
+
+        &.label-tag-yellow {
+          // color: rgb(204, 153, 0);
+          // border-color: rgb(204, 153, 0);
+          // background: rgba(204, 153, 0, 0.2);
+
+          .label-close {
+            color: rgb(204, 153, 0);
+          }
+
+          &.ant-tag-checkable-checked {
+            background: @bg-yellow
+          }
+        }
+
+        &.label-tag-green {
+          // color: @color-green;
+          // border-color: @color-green;
+          // background: rgba(0, 204, 204, 0.2);
+
+          .label-close {
+            color: @color-green;
+          }
+
+          &.ant-tag-checkable-checked {
+            background: @color-green;
+          }
+        }
+      }
+
+      .ant-tag-checkable-checked {
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        width: 64px;
+        background: #5585f5;
+        color: #fff !important;
+        &.sys-label-tag {
+          width: 100%;
+        }
+
+        .label-close {
+          color: #fff !important;
+        }
+      }
+      .ant-btn-dashed {
+        color: #a6a6a6;
+        width: 104px;
+        padding: 0;
+        border-color: rgba(0, 0, 0, 0.2);
+      }
+      .label-close {
+        color: rgba(102, 102, 102, 0.6) !important;
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 12px;
+        &:hover {
+          color: #666666 !important;
+        }
+      }
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .label-disable-wrap {
+    width: 100%;
+    font-size: 14px;
+    line-height: 20px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .label-disable-img {
+      width: 320px;
+      height: 248px;
+    }
+
+    .label-disable-title {
+      color: #2e2e2e;
+      margin-bottom: 5px;
+    }
+
+    .label-disable-desc {
+      color: #969696;
+    }
+  }
+  .label-wrap {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .left-label-wrap {
+    width: 160px;
+    height: 404px;
+    max-height: 404px;
+    &.total-left-label-wrap {
+      height: calc(100vh - 109px);
+      max-height: calc(100vh - 109px);
+    }
+    /deep/.ant-tabs {
+      height: 100%;
+      .ant-tabs-nav-container {
+        padding: 0;
+      }
+      .ant-tabs-left-bar {
+        width: 100%;
+        .ant-tabs-tab {
+          text-align: left;
+        }
+      }
+      .ant-tabs-tab-prev,
+      .ant-tabs-tab-next {
+        display: none !important;
+      }
+      .ant-tabs-nav-wrap {
+        overflow-y: auto;
+        color: #212121;
+        .ant-tabs-tab {
+          padding: 12px 12px 12px 16px;
+          margin: 0px;
+        }
+      }
+      .ant-tabs-nav .ant-tabs-tab-active {
+        background-color: #f2f2f2;
+      }
+    }
+  }
+  .right-label-wrap {
+    flex: 1;
+    height: 404px;
+    max-height: 404px;
+    overflow-y: auto;
+    &.total-right-label-wrap {
+      max-height: calc(100vh - 109px);
+    }
+  }
+
+  .edit-label-type {
+    font-size: 12px;
+    margin-left: 4px;
+  }
 </style>