cnhis-design-vue 2.1.56 → 2.1.57

package/packages/select-label/labelFormContent.vue

@@ -1,787 +1,787 @@
-<template>
-  <div class="labelFormContent-page">
-    <div v-if="allDisable" class="label-disable-wrap">
-      <p class="label-disable-title">无可选标签</p>
-      <p class="label-disable-desc">请联系管理员进行标签管理设置</p>
-    </div>
-    <div v-show="!allDisable" style="height: 100%;">
-      <div class="label-wrap">
-        <!-- 表单内嵌打开标签组件的样式 -->
-        <div v-if="explicit" class="explicit-continer">
-          <a-tabs hideAdd :activeKey="labelAnchorKey" type="card" @change="labelAnchorTabsOnChange" tab-position="top">
-            <template v-for="(v, i) in labelConfig">
-              <a-tab-pane :key="v.curKey">
-                <span slot="tab">
-                  {{ i }}
-                  <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span>
-                </span>
-                <div class="explicit-label-wrap left-label-wrap">
-                  <div class="edit-label-content">
-                    <labelClassify
-                      :classifyItem="v"
-                      :handleLabelChange="handleLabelChange"
-                      :handleLabelColor="handleLabelColor"
-                      :handleDelLabel="handleDelLabel"
-                      :hanldeBlur="hanldeBlur"
-                      :handleAddLabel="handleAddLabel"
-                      :clearaddVal="clearaddVal"
-                      :isEdit="isEdit"
-                      :sourceType="sourceType"
-                    />
-                  </div>
-                </div>
-              </a-tab-pane>
-            </template>
-          </a-tabs>
-        </div>
-        <!-- 普通标签样式 -->
-        <div
-          v-else
-          class="left-label-wrap"
-          :class="{
-            'total-left-label-wrap': isChangeWindow
-          }"
-        >
-          <a-tabs hideAdd :activeKey="labelAnchorKey" @change="labelAnchorTabsOnChange" tab-position="left">
-            <template v-for="(v, i) in labelConfig">
-              <a-tab-pane :key="v.curKey">
-                <span slot="tab">
-                  {{ i }}
-                </span>
-              </a-tab-pane>
-            </template>
-          </a-tabs>
-        </div>
-
-        <div
-          v-if="!explicit"
-          class="right-label-wrap"
-          :class="{
-            'total-right-label-wrap': isChangeWindow
-          }"
-        >
-          <a-anchor v-show="false" :getContainer="anchorGetContainer" @click="handleAnchorClick" @change="anchorOnChange">
-            <template v-for="(v, i) in labelConfig">
-              <a-anchor-link :key="v.curKey" :href="`#${v.curKey}`" :title="i" />
-            </template>
-          </a-anchor>
-          <div v-for="(v, k) in labelConfig" :key="k" class="edit-label-content">
-            <div class="edit-label" :id="v.curKey">
-              {{ k }}
-              <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span>
-            </div>
-            <labelClassify
-              :classifyItem="v"
-              :handleLabelChange="handleLabelChange"
-              :handleLabelColor="handleLabelColor"
-              :handleDelLabel="handleDelLabel"
-              :hanldeBlur="hanldeBlur"
-              :handleAddLabel="handleAddLabel"
-              :clearaddVal="clearaddVal"
-              :isEdit="isEdit"
-              :sourceType="sourceType"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-/**
- * getLabelList() 获取标签数据
- * deleteLabel()  删除标签
- * saveLabelItem()新增单条数据
- */
-
-/**
- * 分类
- * labelObj = {
- *  multipleChoice: 2 多选 / 1 单选
- *  typeName: String 分类名称
- *  typeId: String 分类id
- *  itemList: Array [item] 分类标签集合
- *  curKey? 唯一值组件内部生成
- * }
- *
- * 标签
- * item = {
- *  isSelect: Boolean 是否已选
- *  labelId: String 标签id
- *  labelName: String 标签名称
- *  isPublic: ?
- *  isNoAdd： Boolean 不可添加
- *  showAdd： Boolean 是否展示添加按钮
- *  addVal: String 添加标签输入的值
- * }
- */
-import utils from '@/utils/utils-map';
-import { Tooltip, Icon, Button, Input, Tag, Tabs, Anchor } from 'ant-design-vue';
-import create from '@/core/create';
-import vexutils from '@/utils/vexutils';
-
-import labelClassify from './label-classify.vue';
-export default create({
-  name: 'label-form-content',
-  components: {
-    [Input.name]: Input,
-    [Icon.name]: Icon,
-    [Tabs.name]: Tabs,
-    [Tabs.TabPane.name]: Tabs.TabPane,
-    [Anchor.name]: Anchor,
-    [Anchor.Link.name]: Anchor.Link,
-    [Tooltip.name]: Tooltip,
-    [Button.name]: Button,
-    [Tag.name]: Tag,
-    [Tag.CheckableTag.name]: Tag.CheckableTag,
-    labelClassify
-  },
-  props: {
-    item: {
-      type: Object,
-      default: () => ({})
-    },
-    isEdit: {
-      // 是否可以编辑
-      type: Boolean,
-      default: true
-    },
-    isLock: { type: Boolean, default: false },
-    labelSelectedList: Array,
-    labelVisible: Boolean,
-    isChangeWindow: Boolean,
-    getLabelList: {
-      type: Function,
-      default: () => Promise.resolve({ rows: [] })
-    },
-    deleteLabel: {
-      type: Function,
-      default: () => Promise.resolve({ status: true })
-    },
-    saveLabelItem: {
-      type: Function,
-      default: () => Promise.resolve({ status: true })
-    },
-    labelOptions: {
-      type: Object
-    },
-    sourceType: String,
-
-    explicit: {
-      // 标签选择外显
-      type: Boolean,
-      default: false
-    }
-  },
-  inject: {},
-  data() {
-    return {
-      editLabelItem: {},
-      inited: false,
-      labelSelectedEdit: [], // 编辑状态的label值
-      labelAnchorKey: '',
-      cacheAnchorKey: '',
-      labelConfig: {} // label选项
-    };
-  },
-
-  computed: {
-    allDisable() {
-      if (!this.inited) return false;
-
-      let labelObj = this?.labelConfig;
-
-      if (!labelObj) return true;
-
-      let keys = Object.keys(labelObj);
-      return keys.every(key => {
-        return !labelObj[key].itemList;
-      });
-    },
-    SelectedList() {
-      const { labelSelectedList = [], labelSelectedEdit = [] } = this;
-      let list = [].concat(labelSelectedEdit, labelSelectedList);
-      return this.uniqArrObj(list,'labelId')
-    },
-    selectLabelId() {
-      const list = this?.SelectedList || [];
-      if (Array.isArray(list)) {
-        return list.map(v => v.labelId);
-      }
-      return [];
-    }
-  },
-  watch: {
-    labelOptions: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!val) return;
-        this.handleLabelInit();
-      }
-    }
-    // labelVisible: {
-    //   immediate: true,
-    //   handler(val) {
-    //     if (!val) return;
-    //     this.handleEditLabel(this.item);
-    //   }
-    // }
-  },
-  // 生命周期
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {
-    randomId(len) {
-      return Math.random()
-        .toString(36)
-        .substr(3, len);
-    },
-
-    uniqArrObj(arr, name) {
-      let obj = {};
-      return arr.reduce((cur, next) => {
-        obj[next[name]] ? '' : (obj[next[name]] = true && cur.push(next));
-        return cur;
-      }, []);
-    },
-
-    handleLabelInit() {
-      if (this.isLock) return;
-      this.cacheLabelConfig = { ...this.labelConfig };
-      const copy = JSON.parse(JSON.stringify(this.labelOptions));
-
-      for (let key in copy) {
-        // let olbKey = this?.cacheLabelConfig[key]?.curKey
-        let typeId = copy[key]?.typeId || '';
-        Object.assign(copy[key], {
-          curKey: `${key}_${typeId}}`
-        });
-        // ~${this.randomId()
-      }
-      this.$set(this, 'labelConfig', copy);
-      this.$nextTick(() => {
-        this.hanldeBackfill();
-        let defKey = undefined;
-        if (this.explicit && this.inited) {
-          defKey = this.labelAnchorKey;
-        }
-        this.setLabelDeafultClick(this.labelConfig, defKey);
-        this.inited = true;
-      });
-    },
-
-    hanldeBackfill() {
-      const { labelConfig, SelectedList = [], selectLabelId } = this;
-      this.$set(this, 'labelSelectedEdit', SelectedList);
-      if (typeof labelConfig === 'object') {
-        let keys = Object.keys(labelConfig || {});
-        keys.forEach(k => {
-          let itemList = labelConfig[k]?.itemList || [];
-          if (itemList.length) {
-            itemList.forEach(v => {
-              if (selectLabelId.includes(v.labelId)) {
-                this.$set(v, 'isSelect', true);
-              }
-            });
-          }
-        });
-      }
-    },
-
-    // 标签处理
-    // async handleEditLabel(v = {}, update = false) {
-    //   try {
-    //     if (this.isLock) return;
-    //     if (v.labelList && !update) {
-    //       this.handleLabelSelected(v.labelList, this.labelSelectedList, v.labelObj);
-    //       this.inited = true;
-    //       this.editLabelItem = v;
-    //       this.setLabelDeafultClick(v.labelObj);
-    //     } else {
-    //       // TODO:
-    //       const { rows, results } = await this.getLabelList(v);
-    //       const labelList = rows || [];
-    //       const labelObj = {};
-    //       const cacheKey = `${v.val_key}_${v.name}`;
-    //       //  this.labelSelected[d.cacheKey]
-    //       let isSelect = false;
-    //       const selectList = update ? [...(this.labelSelectedEdit || [])] : [...(this.labelSelectedList || [])];
-    //       labelList.forEach(n => {
-    //         n.cacheKey = cacheKey;
-    //         // 根据 labelId 处理默认选中
-
-    //         /**
-    //          * 回填的值可能不在数据中，但是不能丢失。
-    //          */
-    //         isSelect = selectList.findIndex(i => i.labelId == n.labelId) !== -1;
-    //         n.isSelect = isSelect; // 是否已选
-    //         this.$set(n, 'isSelect', isSelect);
-    //         /**
-    //          * typeName 按照分类处理
-    //          * 没有分类创建分类，有则添加
-    //          */
-    //         if (labelObj[n.typeName]) {
-    //           labelObj[n.typeName].itemList.push({ ...n });
-    //         } else {
-    //           labelObj[n.typeName] = {
-    //             itemList: [{ ...n }],
-    //             showAdd: false,
-    //             addVal: '',
-    //             typeName: n.typeName,
-    //             typeId: n.typeId
-    //           };
-    //         }
-    //       });
-    //       /**
-    //        * labelObj 展示的分类值
-    //        * labelList 原始数据结构
-    //        * selectList 已选的数据
-    //        */
-    //       this.$set(v, 'labelObj', labelObj);
-    //       this.$set(v, 'labelList', labelList);
-    //       this.$set(this, 'labelSelectedEdit', selectList);
-    //       // 缓存
-    //       this.editLabelItem = v;
-    //       this.setLabelTypeStatus(results);
-    //       for (let key in labelObj) {
-    //         Object.assign(labelObj[key], {
-    //           curKey: this.randomId()
-    //         });
-    //       }
-    //       this.setLabelDeafultClick(labelObj);
-
-    //       this.inited = true;
-    //     }
-    //   } catch (error) {
-    //     this.$set(v, 'labelObj', {});
-    //     this.$set(v, 'labelList', []);
-    //     console.log(error);
-    //     this.inited = true;
-    //   }
-    // },
-    // 默认选中第一个分类
-    setLabelDeafultClick(labelObj, deafulteKey) {
-      if (!labelObj) return;
-      let objKeys = Object.keys(labelObj) || [];
-      if (!objKeys.length) return;
-      let curKey = labelObj[objKeys[0]].curKey;
-      // 找到默认选中的tab
-      if (deafulteKey && typeof deafulteKey === 'string') {
-        let [q] = deafulteKey.split('~');
-        let f = objKeys.find(k => labelObj[k] && labelObj[k].curKey && labelObj[k].curKey.includes(q));
-        if (f) {
-          curKey = labelObj[f].curKey;
-        }
-      }
-      if (!curKey) return;
-      this.labelAnchorTabsOnChange(curKey);
-    },
-    handleLabelSelected(labelList, selectList = [], labelObj) {
-      this.$set(this, 'labelSelectedEdit', selectList);
-      if (!labelList || !labelList.length || !labelObj || !Object.keys(labelObj).length) return;
-      labelList.forEach(n => {
-        // 根据 labelId 处理默认选中
-        let isSelect = selectList.some(i => i.labelId == n.labelId);
-        this.$set(n, 'isSelect', isSelect);
-        let { itemList = [] } = labelObj[n.typeName] || {};
-        if (itemList.length) {
-          let matchItem = itemList.find(v => v.labelId == n.labelId);
-          matchItem && this.$set(matchItem, 'isSelect', isSelect);
-        }
-      });
-    },
-    setLabelTypeStatus(results) {
-      if (!results) return false;
-      let keys = Object.keys(results);
-
-      let choiceTypes = (results.typeList || []).reduce((obj, item) => {
-        obj[item.typeName] = item.multipleChoice;
-        return obj;
-      }, {});
-      keys.forEach(key => {
-        if (key === 'typeList') return;
-        // 空，允许
-        if (key === 'emptyTypes') {
-          results[key].forEach(item => {
-            this.$set(this.editLabelItem.labelObj, item.typeName, {
-              multipleChoice: choiceTypes[item.typeName],
-              addVal: '',
-              showAdd: false,
-              itemList: [],
-              typeId: item.typeId,
-              typeName: item.typeName
-            });
-          });
-          return;
-        }
-        if (utils.isPlainObject(results[key])) {
-          // 空，不允许
-          if (!this.editLabelItem.labelObj[key]) {
-            this.$set(this.editLabelItem.labelObj, key, {
-              multipleChoice: choiceTypes[key],
-              addVal: '',
-              showAdd: false,
-              itemList: false,
-              typeId: '',
-              typeName: key
-            });
-          } else {
-            // 非空，不允许
-            this.$set(this.editLabelItem.labelObj[key], 'isNoAdd', true);
-            this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]);
-          }
-        } else {
-          this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]);
-        }
-      });
-    },
-    resetShowAdd() {
-      let { labelObj } = this.editLabelItem;
-      if (!labelObj || !Object.keys(labelObj).length) return;
-      for (let key in labelObj) {
-        let item = labelObj[key];
-        Object.assign(item, {
-          showAdd: false
-        });
-      }
-    },
-
-    handleAddLabel($event, item) {
-      item.showAdd = true;
-      const nextInput = $event.target.nextElementSibling;
-      this.$nextTick(() => {
-        nextInput?.firstChild?.focus();
-      }, 20);
-    },
-
-    handleLabelForm(cb) {
-      const selectList = [...(this.labelSelectedEdit || [])];
-      cb(selectList);
-    },
-    hanldeBlur($event, d) {
-      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.handleReqSaveLabel(d);
-        } else {
-          d.showAdd = false;
-        }
-      }, 150);
-    },
-    clearaddVal(e, v) {
-      // e.preventDefault();
-      v.addVal = '';
-    },
-
-    async handleReqSaveLabel(v) {
-      // 重复校验
-      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 || '';
-      } else {
-        parentColor = v?.parentColor || '';
-      }
-
-      const params = {
-        type: v.typeId,
-        name: v.addVal,
-        parentColor
-      };
-      // TODO:
-      const { status } = await this.saveLabelItem(params, v);
-      if (status) {
-        this.$message.success('添加成功！');
-        // this.handleEditLabel(this.editLabelItem, true);
-        this.$emit('updateLabelData');
-        v.showAdd = false;
-      }
-    },
-
-    handleLabelChange(v, d, labelGroup) {
-      const list = labelGroup.itemList;
-      const multipleChoice = labelGroup.multipleChoice;
-      // let selectedList = this.labelSelectedEdit || [];
-      // 修复 标签多选 点击modal取消按钮 回显也会被选中
-      let selectedList = (this.labelSelectedEdit?.length && vexutils.clone(this.labelSelectedEdit, true)) || [];
-      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];
-      this.$forceUpdate();
-
-      // 外显实时改变通知
-      if (this.explicit) {
-        this.$emit('explicitOnChange', [...this.labelSelectedEdit]);
-      }
-    },
-
-    async handleDelLabel(v) {
-      // TODO:
-      const { status } = await this.deleteLabel(v, this.item);
-      if (status) {
-        this.$message.success('删除成功！');
-        // cacheKey
-        const selectList = this.labelSelectedEdit || [];
-        const selectObj = this.labelSelectedList || [];
-        if (selectList && selectList.length) {
-          const delIndex = selectList.findIndex(n => n.labelId == v.labelId);
-          delIndex != -1 && selectList.splice(delIndex, 1);
-        }
-        if (selectObj && selectObj.length) {
-          const delKey = selectObj.findIndex(n => n.labelId == v.labelId);
-          delKey != -1 && selectObj.splice(delKey, 1);
-          this.$emit('valueOnChange', [...selectObj], this.item);
-          this.$emit('onChange', [...selectObj]);
-        }
-        this.$emit('updateLabelData');
-        // this.handleEditLabel(this.editLabelItem, true);
-      } else {
-        this.$message.warning('删除失败');
-      }
-    },
-
-    handleGetLabelSubmit() {
-      const selectedList = this.labelSelectedList || [];
-      const labelStrList = [];
-      const labels = [];
-      // "cacheKey":"label_标签","isSelect":true
-      selectedList.forEach(v => {
-        delete v.cacheKey;
-        delete v.isSelect;
-        labels.push(v);
-        labelStrList.push(v.labelName);
-      });
-      return JSON.stringify({
-        labelStr: labelStrList.join(','),
-        labels: labels
-      });
-    },
-    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);
-    },
-    handleAnchorClick(e) {
-      e.preventDefault();
-    },
-    anchorOnChange(link) {
-      if (!link) return;
-      let curLink = link.slice(1);
-      this.cacheAnchorKey = curLink;
-    },
-    anchorGetContainer() {
-      return this.$el?.querySelector('.right-label-wrap');
-    },
-
-    handleLabelColor(...arg) {
-      return utils.handleLabelColor(...arg);
-    },
-
-    /**
-     * 重置label选项
-     */
-    handleResetOptions() {
-      this.$set(this.item, 'labelObj', {});
-      this.$set(this.item, 'labelList', null);
-    },
-
-    /**
-     * 设置标签单个状态
-     */
-    hanldeSetLabelItem(id, state) {
-      const { labelConfig } = this;
-      if (typeof labelConfig === 'object') {
-        let keys = Object.keys(labelConfig || {});
-        keys.forEach(k => {
-          let itemList = labelConfig[k]?.itemList || [];
-          if (itemList.length) {
-            itemList.forEach(v => {
-              if (id == v.labelId) {
-                this.$set(v, 'isSelect', state);
-              }
-            });
-          }
-        });
-      }
-      // 如果是删除
-      if (false === state) {
-        // 删除选中list
-        if (Array.isArray(this.labelSelectedEdit)) {
-          const fdIndex = this.labelSelectedEdit.findIndex(n => n.labelId == id);
-          if (fdIndex != -1) {
-            this.labelSelectedEdit.splice(fdIndex, 1);
-          }
-        }
-      }
-    }
-  }
-});
-</script>
-<style lang="less" scoped>
-.labelFormContent-page {
-  width: 100%;
-  height: 100%;
-  .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);
-      }
-      &.explicit-label-wrap {
-        width: 100%;
-        height: auto;
-        overflow: hidden;
-        overflow-y: auto;
-      }
-      /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);
-      }
-    }
-    .explicit-continer {
-      width: 100%;
-      border: 1px solid #d5d5d5;
-      // background: #F9F9F9;
-      /deep/ .ant-tabs-card {
-        .ant-tabs-nav-container {
-          height: 30px;
-          line-height: 30px;
-          margin-top: 0px;
-          .ant-tabs-tab-prev {
-            border-bottom: 1px solid #e8e8e8;
-            border-right: 1px solid #e8e8e8;
-          }
-          .ant-tabs-tab-next {
-            border-bottom: 1px solid #e8e8e8;
-            border-left: 1px solid #e8e8e8;
-          }
-        }
-        > .ant-tabs-content {
-          // height: 120px;
-          margin-top: -16px;
-
-          > .ant-tabs-tabpane {
-            background: #fff;
-            padding: 16px;
-          }
-        }
-
-        // ant-tabs-tab
-
-        > .ant-tabs-bar {
-          border-color: #fff;
-          .ant-tabs-tab {
-            margin-right: 0;
-            border-radius: 0;
-            line-height: 30px;
-            height: 30px;
-
-            border-right: 1px solid #e8e8e8 !important;
-            border-bottom: 1px solid #e8e8e8;
-            border-top: none;
-
-            // border-color: transparent;
-            background: #f9f9f9;
-            &:first-of-type {
-              border-left: 1px solid #e8e8e8;
-            }
-            &.ant-tabs-tab-active {
-              border-bottom-color: #fff;
-              background: #fff;
-            }
-          }
-        }
-
-        .ant-tabs-bar;
-      }
-    }
-  }
-  .edit-label-type {
-    font-size: 12px;
-    margin-left: 4px;
-  }
-}
-
-.label-disable-wrap {
-  text-align: center;
-}
-</style>
+<template>
+  <div class="labelFormContent-page">
+    <div v-if="allDisable" class="label-disable-wrap">
+      <p class="label-disable-title">无可选标签</p>
+      <p class="label-disable-desc">请联系管理员进行标签管理设置</p>
+    </div>
+    <div v-show="!allDisable" style="height: 100%;">
+      <div class="label-wrap">
+        <!-- 表单内嵌打开标签组件的样式 -->
+        <div v-if="explicit" class="explicit-continer">
+          <a-tabs hideAdd :activeKey="labelAnchorKey" type="card" @change="labelAnchorTabsOnChange" tab-position="top">
+            <template v-for="(v, i) in labelConfig">
+              <a-tab-pane :key="v.curKey">
+                <span slot="tab">
+                  {{ i }}
+                  <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span>
+                </span>
+                <div class="explicit-label-wrap left-label-wrap">
+                  <div class="edit-label-content">
+                    <labelClassify
+                      :classifyItem="v"
+                      :handleLabelChange="handleLabelChange"
+                      :handleLabelColor="handleLabelColor"
+                      :handleDelLabel="handleDelLabel"
+                      :hanldeBlur="hanldeBlur"
+                      :handleAddLabel="handleAddLabel"
+                      :clearaddVal="clearaddVal"
+                      :isEdit="isEdit"
+                      :sourceType="sourceType"
+                    />
+                  </div>
+                </div>
+              </a-tab-pane>
+            </template>
+          </a-tabs>
+        </div>
+        <!-- 普通标签样式 -->
+        <div
+          v-else
+          class="left-label-wrap"
+          :class="{
+            'total-left-label-wrap': isChangeWindow
+          }"
+        >
+          <a-tabs hideAdd :activeKey="labelAnchorKey" @change="labelAnchorTabsOnChange" tab-position="left">
+            <template v-for="(v, i) in labelConfig">
+              <a-tab-pane :key="v.curKey">
+                <span slot="tab">
+                  {{ i }}
+                </span>
+              </a-tab-pane>
+            </template>
+          </a-tabs>
+        </div>
+
+        <div
+          v-if="!explicit"
+          class="right-label-wrap"
+          :class="{
+            'total-right-label-wrap': isChangeWindow
+          }"
+        >
+          <a-anchor v-show="false" :getContainer="anchorGetContainer" @click="handleAnchorClick" @change="anchorOnChange">
+            <template v-for="(v, i) in labelConfig">
+              <a-anchor-link :key="v.curKey" :href="`#${v.curKey}`" :title="i" />
+            </template>
+          </a-anchor>
+          <div v-for="(v, k) in labelConfig" :key="k" class="edit-label-content">
+            <div class="edit-label" :id="v.curKey">
+              {{ k }}
+              <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span>
+            </div>
+            <labelClassify
+              :classifyItem="v"
+              :handleLabelChange="handleLabelChange"
+              :handleLabelColor="handleLabelColor"
+              :handleDelLabel="handleDelLabel"
+              :hanldeBlur="hanldeBlur"
+              :handleAddLabel="handleAddLabel"
+              :clearaddVal="clearaddVal"
+              :isEdit="isEdit"
+              :sourceType="sourceType"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * getLabelList() 获取标签数据
+ * deleteLabel()  删除标签
+ * saveLabelItem()新增单条数据
+ */
+
+/**
+ * 分类
+ * labelObj = {
+ *  multipleChoice: 2 多选 / 1 单选
+ *  typeName: String 分类名称
+ *  typeId: String 分类id
+ *  itemList: Array [item] 分类标签集合
+ *  curKey? 唯一值组件内部生成
+ * }
+ *
+ * 标签
+ * item = {
+ *  isSelect: Boolean 是否已选
+ *  labelId: String 标签id
+ *  labelName: String 标签名称
+ *  isPublic: ?
+ *  isNoAdd： Boolean 不可添加
+ *  showAdd： Boolean 是否展示添加按钮
+ *  addVal: String 添加标签输入的值
+ * }
+ */
+import utils from '@/utils/utils-map';
+import { Tooltip, Icon, Button, Input, Tag, Tabs, Anchor } from 'ant-design-vue';
+import create from '@/core/create';
+import vexutils from '@/utils/vexutils';
+
+import labelClassify from './label-classify.vue';
+export default create({
+  name: 'label-form-content',
+  components: {
+    [Input.name]: Input,
+    [Icon.name]: Icon,
+    [Tabs.name]: Tabs,
+    [Tabs.TabPane.name]: Tabs.TabPane,
+    [Anchor.name]: Anchor,
+    [Anchor.Link.name]: Anchor.Link,
+    [Tooltip.name]: Tooltip,
+    [Button.name]: Button,
+    [Tag.name]: Tag,
+    [Tag.CheckableTag.name]: Tag.CheckableTag,
+    labelClassify
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: {
+      // 是否可以编辑
+      type: Boolean,
+      default: true
+    },
+    isLock: { type: Boolean, default: false },
+    labelSelectedList: Array,
+    labelVisible: Boolean,
+    isChangeWindow: Boolean,
+    getLabelList: {
+      type: Function,
+      default: () => Promise.resolve({ rows: [] })
+    },
+    deleteLabel: {
+      type: Function,
+      default: () => Promise.resolve({ status: true })
+    },
+    saveLabelItem: {
+      type: Function,
+      default: () => Promise.resolve({ status: true })
+    },
+    labelOptions: {
+      type: Object
+    },
+    sourceType: String,
+
+    explicit: {
+      // 标签选择外显
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: {},
+  data() {
+    return {
+      editLabelItem: {},
+      inited: false,
+      labelSelectedEdit: [], // 编辑状态的label值
+      labelAnchorKey: '',
+      cacheAnchorKey: '',
+      labelConfig: {} // label选项
+    };
+  },
+
+  computed: {
+    allDisable() {
+      if (!this.inited) return false;
+
+      let labelObj = this?.labelConfig;
+
+      if (!labelObj) return true;
+
+      let keys = Object.keys(labelObj);
+      return keys.every(key => {
+        return !labelObj[key].itemList;
+      });
+    },
+    SelectedList() {
+      const { labelSelectedList = [], labelSelectedEdit = [] } = this;
+      let list = [].concat(labelSelectedEdit, labelSelectedList);
+      return this.uniqArrObj(list,'labelId')
+    },
+    selectLabelId() {
+      const list = this?.SelectedList || [];
+      if (Array.isArray(list)) {
+        return list.map(v => v.labelId);
+      }
+      return [];
+    }
+  },
+  watch: {
+    labelOptions: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (!val) return;
+        this.handleLabelInit();
+      }
+    }
+    // labelVisible: {
+    //   immediate: true,
+    //   handler(val) {
+    //     if (!val) return;
+    //     this.handleEditLabel(this.item);
+    //   }
+    // }
+  },
+  // 生命周期
+  created() {},
+  mounted() {},
+
+  // 方法
+  methods: {
+    randomId(len) {
+      return Math.random()
+        .toString(36)
+        .substr(3, len);
+    },
+
+    uniqArrObj(arr, name) {
+      let obj = {};
+      return arr.reduce((cur, next) => {
+        obj[next[name]] ? '' : (obj[next[name]] = true && cur.push(next));
+        return cur;
+      }, []);
+    },
+
+    handleLabelInit() {
+      if (this.isLock) return;
+      this.cacheLabelConfig = { ...this.labelConfig };
+      const copy = JSON.parse(JSON.stringify(this.labelOptions));
+
+      for (let key in copy) {
+        // let olbKey = this?.cacheLabelConfig[key]?.curKey
+        let typeId = copy[key]?.typeId || '';
+        Object.assign(copy[key], {
+          curKey: `${key}_${typeId}}`
+        });
+        // ~${this.randomId()
+      }
+      this.$set(this, 'labelConfig', copy);
+      this.$nextTick(() => {
+        this.hanldeBackfill();
+        let defKey = undefined;
+        if (this.explicit && this.inited) {
+          defKey = this.labelAnchorKey;
+        }
+        this.setLabelDeafultClick(this.labelConfig, defKey);
+        this.inited = true;
+      });
+    },
+
+    hanldeBackfill() {
+      const { labelConfig, SelectedList = [], selectLabelId } = this;
+      this.$set(this, 'labelSelectedEdit', SelectedList);
+      if (typeof labelConfig === 'object') {
+        let keys = Object.keys(labelConfig || {});
+        keys.forEach(k => {
+          let itemList = labelConfig[k]?.itemList || [];
+          if (itemList.length) {
+            itemList.forEach(v => {
+              if (selectLabelId.includes(v.labelId)) {
+                this.$set(v, 'isSelect', true);
+              }
+            });
+          }
+        });
+      }
+    },
+
+    // 标签处理
+    // async handleEditLabel(v = {}, update = false) {
+    //   try {
+    //     if (this.isLock) return;
+    //     if (v.labelList && !update) {
+    //       this.handleLabelSelected(v.labelList, this.labelSelectedList, v.labelObj);
+    //       this.inited = true;
+    //       this.editLabelItem = v;
+    //       this.setLabelDeafultClick(v.labelObj);
+    //     } else {
+    //       // TODO:
+    //       const { rows, results } = await this.getLabelList(v);
+    //       const labelList = rows || [];
+    //       const labelObj = {};
+    //       const cacheKey = `${v.val_key}_${v.name}`;
+    //       //  this.labelSelected[d.cacheKey]
+    //       let isSelect = false;
+    //       const selectList = update ? [...(this.labelSelectedEdit || [])] : [...(this.labelSelectedList || [])];
+    //       labelList.forEach(n => {
+    //         n.cacheKey = cacheKey;
+    //         // 根据 labelId 处理默认选中
+
+    //         /**
+    //          * 回填的值可能不在数据中，但是不能丢失。
+    //          */
+    //         isSelect = selectList.findIndex(i => i.labelId == n.labelId) !== -1;
+    //         n.isSelect = isSelect; // 是否已选
+    //         this.$set(n, 'isSelect', isSelect);
+    //         /**
+    //          * typeName 按照分类处理
+    //          * 没有分类创建分类，有则添加
+    //          */
+    //         if (labelObj[n.typeName]) {
+    //           labelObj[n.typeName].itemList.push({ ...n });
+    //         } else {
+    //           labelObj[n.typeName] = {
+    //             itemList: [{ ...n }],
+    //             showAdd: false,
+    //             addVal: '',
+    //             typeName: n.typeName,
+    //             typeId: n.typeId
+    //           };
+    //         }
+    //       });
+    //       /**
+    //        * labelObj 展示的分类值
+    //        * labelList 原始数据结构
+    //        * selectList 已选的数据
+    //        */
+    //       this.$set(v, 'labelObj', labelObj);
+    //       this.$set(v, 'labelList', labelList);
+    //       this.$set(this, 'labelSelectedEdit', selectList);
+    //       // 缓存
+    //       this.editLabelItem = v;
+    //       this.setLabelTypeStatus(results);
+    //       for (let key in labelObj) {
+    //         Object.assign(labelObj[key], {
+    //           curKey: this.randomId()
+    //         });
+    //       }
+    //       this.setLabelDeafultClick(labelObj);
+
+    //       this.inited = true;
+    //     }
+    //   } catch (error) {
+    //     this.$set(v, 'labelObj', {});
+    //     this.$set(v, 'labelList', []);
+    //     console.log(error);
+    //     this.inited = true;
+    //   }
+    // },
+    // 默认选中第一个分类
+    setLabelDeafultClick(labelObj, deafulteKey) {
+      if (!labelObj) return;
+      let objKeys = Object.keys(labelObj) || [];
+      if (!objKeys.length) return;
+      let curKey = labelObj[objKeys[0]].curKey;
+      // 找到默认选中的tab
+      if (deafulteKey && typeof deafulteKey === 'string') {
+        let [q] = deafulteKey.split('~');
+        let f = objKeys.find(k => labelObj[k] && labelObj[k].curKey && labelObj[k].curKey.includes(q));
+        if (f) {
+          curKey = labelObj[f].curKey;
+        }
+      }
+      if (!curKey) return;
+      this.labelAnchorTabsOnChange(curKey);
+    },
+    handleLabelSelected(labelList, selectList = [], labelObj) {
+      this.$set(this, 'labelSelectedEdit', selectList);
+      if (!labelList || !labelList.length || !labelObj || !Object.keys(labelObj).length) return;
+      labelList.forEach(n => {
+        // 根据 labelId 处理默认选中
+        let isSelect = selectList.some(i => i.labelId == n.labelId);
+        this.$set(n, 'isSelect', isSelect);
+        let { itemList = [] } = labelObj[n.typeName] || {};
+        if (itemList.length) {
+          let matchItem = itemList.find(v => v.labelId == n.labelId);
+          matchItem && this.$set(matchItem, 'isSelect', isSelect);
+        }
+      });
+    },
+    setLabelTypeStatus(results) {
+      if (!results) return false;
+      let keys = Object.keys(results);
+
+      let choiceTypes = (results.typeList || []).reduce((obj, item) => {
+        obj[item.typeName] = item.multipleChoice;
+        return obj;
+      }, {});
+      keys.forEach(key => {
+        if (key === 'typeList') return;
+        // 空，允许
+        if (key === 'emptyTypes') {
+          results[key].forEach(item => {
+            this.$set(this.editLabelItem.labelObj, item.typeName, {
+              multipleChoice: choiceTypes[item.typeName],
+              addVal: '',
+              showAdd: false,
+              itemList: [],
+              typeId: item.typeId,
+              typeName: item.typeName
+            });
+          });
+          return;
+        }
+        if (utils.isPlainObject(results[key])) {
+          // 空，不允许
+          if (!this.editLabelItem.labelObj[key]) {
+            this.$set(this.editLabelItem.labelObj, key, {
+              multipleChoice: choiceTypes[key],
+              addVal: '',
+              showAdd: false,
+              itemList: false,
+              typeId: '',
+              typeName: key
+            });
+          } else {
+            // 非空，不允许
+            this.$set(this.editLabelItem.labelObj[key], 'isNoAdd', true);
+            this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]);
+          }
+        } else {
+          this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]);
+        }
+      });
+    },
+    resetShowAdd() {
+      let { labelObj } = this.editLabelItem;
+      if (!labelObj || !Object.keys(labelObj).length) return;
+      for (let key in labelObj) {
+        let item = labelObj[key];
+        Object.assign(item, {
+          showAdd: false
+        });
+      }
+    },
+
+    handleAddLabel($event, item) {
+      item.showAdd = true;
+      const nextInput = $event.target.nextElementSibling;
+      this.$nextTick(() => {
+        nextInput?.firstChild?.focus();
+      }, 20);
+    },
+
+    handleLabelForm(cb) {
+      const selectList = [...(this.labelSelectedEdit || [])];
+      cb(selectList);
+    },
+    hanldeBlur($event, d) {
+      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.handleReqSaveLabel(d);
+        } else {
+          d.showAdd = false;
+        }
+      }, 150);
+    },
+    clearaddVal(e, v) {
+      // e.preventDefault();
+      v.addVal = '';
+    },
+
+    async handleReqSaveLabel(v) {
+      // 重复校验
+      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 || '';
+      } else {
+        parentColor = v?.parentColor || '';
+      }
+
+      const params = {
+        type: v.typeId,
+        name: v.addVal,
+        parentColor
+      };
+      // TODO:
+      const { status } = await this.saveLabelItem(params, v);
+      if (status) {
+        this.$message.success('添加成功！');
+        // this.handleEditLabel(this.editLabelItem, true);
+        this.$emit('updateLabelData');
+        v.showAdd = false;
+      }
+    },
+
+    handleLabelChange(v, d, labelGroup) {
+      const list = labelGroup.itemList;
+      const multipleChoice = labelGroup.multipleChoice;
+      // let selectedList = this.labelSelectedEdit || [];
+      // 修复 标签多选 点击modal取消按钮 回显也会被选中
+      let selectedList = (this.labelSelectedEdit?.length && vexutils.clone(this.labelSelectedEdit, true)) || [];
+      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];
+      this.$forceUpdate();
+
+      // 外显实时改变通知
+      if (this.explicit) {
+        this.$emit('explicitOnChange', [...this.labelSelectedEdit]);
+      }
+    },
+
+    async handleDelLabel(v) {
+      // TODO:
+      const { status } = await this.deleteLabel(v, this.item);
+      if (status) {
+        this.$message.success('删除成功！');
+        // cacheKey
+        const selectList = this.labelSelectedEdit || [];
+        const selectObj = this.labelSelectedList || [];
+        if (selectList && selectList.length) {
+          const delIndex = selectList.findIndex(n => n.labelId == v.labelId);
+          delIndex != -1 && selectList.splice(delIndex, 1);
+        }
+        if (selectObj && selectObj.length) {
+          const delKey = selectObj.findIndex(n => n.labelId == v.labelId);
+          delKey != -1 && selectObj.splice(delKey, 1);
+          this.$emit('valueOnChange', [...selectObj], this.item);
+          this.$emit('onChange', [...selectObj]);
+        }
+        this.$emit('updateLabelData');
+        // this.handleEditLabel(this.editLabelItem, true);
+      } else {
+        this.$message.warning('删除失败');
+      }
+    },
+
+    handleGetLabelSubmit() {
+      const selectedList = this.labelSelectedList || [];
+      const labelStrList = [];
+      const labels = [];
+      // "cacheKey":"label_标签","isSelect":true
+      selectedList.forEach(v => {
+        delete v.cacheKey;
+        delete v.isSelect;
+        labels.push(v);
+        labelStrList.push(v.labelName);
+      });
+      return JSON.stringify({
+        labelStr: labelStrList.join(','),
+        labels: labels
+      });
+    },
+    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);
+    },
+    handleAnchorClick(e) {
+      e.preventDefault();
+    },
+    anchorOnChange(link) {
+      if (!link) return;
+      let curLink = link.slice(1);
+      this.cacheAnchorKey = curLink;
+    },
+    anchorGetContainer() {
+      return this.$el?.querySelector('.right-label-wrap');
+    },
+
+    handleLabelColor(...arg) {
+      return utils.handleLabelColor(...arg);
+    },
+
+    /**
+     * 重置label选项
+     */
+    handleResetOptions() {
+      this.$set(this.item, 'labelObj', {});
+      this.$set(this.item, 'labelList', null);
+    },
+
+    /**
+     * 设置标签单个状态
+     */
+    hanldeSetLabelItem(id, state) {
+      const { labelConfig } = this;
+      if (typeof labelConfig === 'object') {
+        let keys = Object.keys(labelConfig || {});
+        keys.forEach(k => {
+          let itemList = labelConfig[k]?.itemList || [];
+          if (itemList.length) {
+            itemList.forEach(v => {
+              if (id == v.labelId) {
+                this.$set(v, 'isSelect', state);
+              }
+            });
+          }
+        });
+      }
+      // 如果是删除
+      if (false === state) {
+        // 删除选中list
+        if (Array.isArray(this.labelSelectedEdit)) {
+          const fdIndex = this.labelSelectedEdit.findIndex(n => n.labelId == id);
+          if (fdIndex != -1) {
+            this.labelSelectedEdit.splice(fdIndex, 1);
+          }
+        }
+      }
+    }
+  }
+});
+</script>
+<style lang="less" scoped>
+.labelFormContent-page {
+  width: 100%;
+  height: 100%;
+  .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);
+      }
+      &.explicit-label-wrap {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        overflow-y: auto;
+      }
+      /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);
+      }
+    }
+    .explicit-continer {
+      width: 100%;
+      border: 1px solid #d5d5d5;
+      // background: #F9F9F9;
+      /deep/ .ant-tabs-card {
+        .ant-tabs-nav-container {
+          height: 30px;
+          line-height: 30px;
+          margin-top: 0px;
+          .ant-tabs-tab-prev {
+            border-bottom: 1px solid #e8e8e8;
+            border-right: 1px solid #e8e8e8;
+          }
+          .ant-tabs-tab-next {
+            border-bottom: 1px solid #e8e8e8;
+            border-left: 1px solid #e8e8e8;
+          }
+        }
+        > .ant-tabs-content {
+          // height: 120px;
+          margin-top: -16px;
+
+          > .ant-tabs-tabpane {
+            background: #fff;
+            padding: 16px;
+          }
+        }
+
+        // ant-tabs-tab
+
+        > .ant-tabs-bar {
+          border-color: #fff;
+          .ant-tabs-tab {
+            margin-right: 0;
+            border-radius: 0;
+            line-height: 30px;
+            height: 30px;
+
+            border-right: 1px solid #e8e8e8 !important;
+            border-bottom: 1px solid #e8e8e8;
+            border-top: none;
+
+            // border-color: transparent;
+            background: #f9f9f9;
+            &:first-of-type {
+              border-left: 1px solid #e8e8e8;
+            }
+            &.ant-tabs-tab-active {
+              border-bottom-color: #fff;
+              background: #fff;
+            }
+          }
+        }
+
+        .ant-tabs-bar;
+      }
+    }
+  }
+  .edit-label-type {
+    font-size: 12px;
+    margin-left: 4px;
+  }
+}
+
+.label-disable-wrap {
+  text-align: center;
+}
+</style>