cnhis-design-vue 2.1.56 → 2.1.58

package/packages/select-label/select-label.vue

@@ -1,581 +1,581 @@
-<template>
-  <div class="label-page">
-    <div class="tag-label">
-      <a-tag v-for="v in labelSelectedList" :key="v.labelId" :style="handleLabelColor(v, true)" :closable="item_is_edit" @close="closeTag(v)">
-        {{ v.labelName }}
-      </a-tag>
-      <span v-if="!explicit" class="form-add-icon form-add-icon-label" @click="handleEditLabel" :class="{ disable: isLock }" v-show="item_is_edit">
-        <a-icon class="add-icon" type="plus-circle" />
-        新增
-      </span>
-    </div>
-    <div class="common-label" v-if="sourceType == 'form' && commonLabelList.length && item_is_edit && !explicit">
-      <span>常用</span>
-      <a-checkable-tag v-for="(item, i) in commonLabelList" v-model="item.isSelect" @change="handleCommonLabelChange($event, item)" :key="i" :style="handleLabelColor(item)">
-        {{ item.labelName }}
-      </a-checkable-tag>
-    </div>
-    <div v-if="explicit && item_is_edit">
-      <labelFormContent
-       :explicit="explicit"
-        v-bind="$attrs"
-        ref="labelFormContent"
-        :labelVisible="labelVisible"
-        :item="item"
-        :isEdit="isEdit"
-        :isLock="isLock"
-        :labelSelectedList="labelSelectedList"
-        :isChangeWindow="isChangeWindow"
-        :labelOptions="editLabelItem.labelObj"
-        :sourceType="sourceType"
-        @updateLabelData="updateLabelData"
-        @explicitOnChange="explicitOnChange"
-      ></labelFormContent>
-    </div>
-
-    <!-- 弹窗 -->
-    <a-modal
-      class="label-form-modal-wrap modal-wrap standard-modal standard-modal-white"
-      v-model="labelVisible"
-      @ok="handleSaveLabel"
-      @cancel="handleLabelCancel"
-      :maskClosable="false"
-      :destroyOnClose="true"
-      :width="modalWidth"
-      :cancelText="'取消'"
-      :okText="'确定'"
-      :bodyStyle="{
-        height: modalHeight,
-        maxHeight,
-        position: 'relative'
-      }"
-      :class="{ 'modal-screen': isChangeWindow }"
-      :closable="false"
-      centered
-      wrapClassName="crm-form-label-modal"
-    >
-      <template slot="title">
-        <div>
-          <!-- {{ $t("1.9.58") }} -->
-          选择标签
-        </div>
-        <div class="svg-wrap">
-          <svg-icon
-            @click="changeModalWindow"
-            :icon-class="
-              isChangeWindow
-                ? 'xitongtubiaodaohangtubiaozuixiaohua'
-                : 'xitongtubiaodaohangtubiaozuidahua'
-            "
-          ></svg-icon>
-          <!-- <a-icon :type="!isChangeWindow ? 'fullscreen' : 'fullscreen-exit'" @click="changeModalWindow" /> -->
-          <!-- <a-icon type="close" @click="handleLabelCancel" /> -->
-          <svg-icon
-            :icon-class="'xitongtubiaodaohangtubiaoguanbi'"
-            @click="handleLabelCancel"
-          ></svg-icon>
-        </div>
-      </template>
-      <labelFormContent
-       :explicit="explicit"
-        v-bind="$attrs"
-        ref="labelFormContent"
-        :labelVisible="labelVisible"
-        :item="item"
-        :isEdit="isEdit"
-        :isLock="isLock"
-        :labelSelectedList="labelSelectedList"
-        :isChangeWindow="isChangeWindow"
-        :labelOptions="editLabelItem.labelObj"
-        :sourceType="sourceType"
-        @updateLabelData="updateLabelData"
-      ></labelFormContent>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import { Tooltip, Icon, Button, Input, Tag, Modal } from 'ant-design-vue';
-import labelFormContent from './labelFormContent';
-import utils from '@/utils/utils-map';
-import create from '@/core/create';
-/**
- * @onChange="xxx" 获取保存的值
- */
-export default create({
-  name: 'select-label',
-  components: {
-    labelFormContent,
-    [Input.name]: Input,
-    [Icon.name]: Icon,
-    [Tooltip.name]: Tooltip,
-    [Button.name]: Button,
-    AModal: Modal,
-    [Tag.name]: Tag,
-    [Tag.CheckableTag.name]: Tag.CheckableTag
-  },
-  data() {
-    return {
-      labelVisible: false,
-      editLabelItem: {},
-      labelSelectedList: [],
-      labelSelectedEdit: [], // 编辑状态的label值
-      inited: false,
-      isChangeWindow: false,
-      modalWidth: '763px',
-      modalHeight: '404px',
-      maxHeight: '404px',
-      commonLabelList: [],
-      multipleChoiceConfig: {}
-    };
-  },
-  props: {
-    selectedList: {
-      // 默认选中的参数
-      type: Array,
-      default: () => []
-    },
-    item: {
-      type: Object,
-      default: () => ({})
-    },
-    // labelType: {
-    //   // 请求接口的type
-    //   type: String,
-    //   default: undefined
-    // },
-    isEdit: {
-      // 是否可以编辑
-      type: Boolean,
-      default: true
-    },
-    isDetail: {
-      // 是否查看详情
-      type: Boolean,
-      default: false
-    },
-    isLock: { type: Boolean, default: false },
-    sourceType: String,
-    getLabelList: {
-      type: Function,
-      default: () => Promise.resolve({ rows: [] })
-    },
-
-    explicit:{ // 标签选择外显
-      type: Boolean,
-      default: false
-    },
-
-    explicitHeiht:{
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    item_is_edit() {
-      const item = this?.item || {};
-      return (item.is_edit == 1 || item.isShow) && !this.isDetail;
-    }
-  },
-  mounted() {
-    // 外显初始化
-    if(this.explicit){
-      this.handleEditLabel();
-    } else {
-      // 获取标签分类
-      this.handleGetMultipleChoiceConfig(this.item);
-    }
-
-  },
-  watch: {
-    selectedList: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (val) {
-          let v = Array.isArray(val) ? val : [];
-          this.labelSelectedList = JSON.parse(JSON.stringify(v));
-          this.hadleCommonlabels(this.commonLabelList, this.labelSelectedList);
-        }
-      }
-    },
-    'item.label_type': {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!val || this.sourceType != 'form') return;
-        this.getCommonlabelsList(val);
-      }
-    }
-  },
-  methods: {
-    async getCommonlabelsList(type) {
-      let { data = {} } = (await this.commonlabels(type)) || {};
-      if (data.result !== 'SUCCESS') return;
-      let commonLabelList = data.map?.rows || [];
-      this.hadleCommonlabels(commonLabelList, this.labelSelectedList);
-      this.commonLabelList = commonLabelList;
-    },
-    hadleCommonlabels(commonLabelList, selectList) {
-      if (!commonLabelList.length) return;
-      commonLabelList.forEach(n => {
-        let isSelect = selectList.some(i => i.labelId == n.labelId);
-        n.isSelect = isSelect;
-      });
-    },
-    closeTag(d) {
-      const selectedList = this.labelSelectedList || [];
-      const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
-      if (fdIndex != -1) {
-        selectedList.splice(fdIndex, 1);
-      }
-      this.handleEmit(selectedList);
-      this.hanldeSetLabelItem(d.labelId, false);
-    },
-    handleCommonLabelChange(v, d) {
-       let multipleChoiceConfig = this.multipleChoiceConfig;
-      let selectedList = this.labelSelectedList || [];
-      if (v) {
-        if (selectedList.some(n => n.labelId == d.labelId)) {
-          return;
-        }
-        // 不允许多选的类型，先删除，再新增
-        if('2' == multipleChoiceConfig[d.typeId]){
-          selectedList = selectedList.filter(item => item.typeId !== d.typeId);
-        }
-        selectedList.push(d);
-      } else {
-        const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
-        if (fdIndex != -1) {
-          selectedList.splice(fdIndex, 1);
-        }
-      }
-      this.handleEmit(selectedList);
-    },
-    // TODO:
-    async commonlabels(type) {
-      let url = '/label/commonlabels';
-      if (this.commonLabelList.length) return;
-      return this.axios.get(url, {
-        params: {
-          type
-        }
-      });
-    },
-    handleEditLabel(type) {
-      if (this.isLock) return;
-      if(!this.explicit && type !== 'init') {
-        this.labelVisible = true;
-      }
-      this.handleGetLabelData(this.item)
-    },
-    handleLabelCancel() {
-      if(this.explicit) return;
-
-      this.$refs.labelFormContent?.resetShowAdd();
-      this.editLabelItem.showAdd = false;
-      this.editLabelItem = {};
-      this.inited = false;
-      this.modalWidth = '763px';
-      this.modalHeight = '404px';
-      this.maxHeight = '404px';
-      this.isChangeWindow = false;
-      this.labelVisible = false;
-    },
-    changeModalWindow() {
-      this.isChangeWindow = !this.isChangeWindow;
-      let docHeight = document.body.clientHeight;
-      this.modalWidth = this.modalWidth === '763px' ? `100%` : '763px';
-      this.modalHeight = this.modalHeight === '404px' ? `${docHeight - 110}px` : '404px';
-      this.maxHeight = this.modalHeight === 'auto' ? '404px' : 'none';
-    },
-
-    handleSaveLabel() {
-      this.$refs.labelFormContent?.handleLabelForm(selectList => {
-        this.handleEmit(selectList);
-        this.hadleCommonlabels(this.commonLabelList, selectList);
-        this.handleLabelCancel();
-      });
-    },
-    handleEmit(selectList) {
-      // this.$set(this, "labelSelectedList", selectList);
-      this.$emit('valueOnChange', [...selectList], this.item);
-      this.$emit('onChange', [...selectList]);
-    },
-
-    handleLabelColor(...arg) {
-      return utils.handleLabelColor(...arg);
-    },
-
-    async handleGetLabelData(v, update) {
-      const { rows, results } = await this.getLabelList(v, {update: update});
-      // console.log(rows, results)
-      const labelList = rows || [];
-      const labelObj = {};
-      const cacheKey = `${v.val_key}_${v.name}`;
-      //  this.labelSelected[d.cacheKey]
-      const selectList = update ? [...(this.labelSelectedEdit || [])] : [...(this.labelSelectedList || [])];
-      labelList.forEach(n => {
-        n.cacheKey = cacheKey;
-        // 根据 labelId 处理默认选中
-        /**
-         * typeName 按照分类处理
-         * 没有分类创建分类，有则添加
-         */
-        this.$set(n,'isSelect',false)
-        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);
-      update && this.$set(this, 'labelSelectedEdit', selectList);
-      // 缓存
-      this.editLabelItem = v;
-      this.setLabelTypeStatus(results);
-    },
-
-    setLabelTypeStatus(results) {
-      if (!results) return false;
-      let keys = Object.keys(results);
-      let multipleChoiceConfig ={};
-      let choiceTypes = (results.typeList || []).reduce((obj, item) => {
-        multipleChoiceConfig[item.typeId] = item.multipleChoice
-
-        obj[item.typeName] = {
-          multipleChoice:item.multipleChoice,
-          parentColor: item.parentColor,
-          allowCreateByPersonal:item.allowCreateByPersonal
-        }
-        return obj;
-      }, {});
-
-      if(this.explicit){
-        this.multipleChoiceConfig = multipleChoiceConfig;
-      }
-      keys.forEach(key => {
-        if (key === 'typeList') return;
-        // 空，允许
-        if (key === 'emptyTypes') {
-          results[key].forEach(item => {
-            this.$set(this.editLabelItem.labelObj, item.typeName, Object.assign({
-              addVal: '',
-              showAdd: false,
-              itemList: [],
-              typeId: item.typeId,
-              typeName: item.typeName,
-              allowCreateByPersonal: item.allowCreateByPersonal
-            },choiceTypes[item.typeName] || {}));
-          });
-          return;
-        }
-        if (utils.isPlainObject(results[key])) {
-          // 空，不允许
-          if (!this.editLabelItem.labelObj[key]) {
-            this.$set(this.editLabelItem.labelObj, key, Object.assign({
-              addVal: '',
-              showAdd: false,
-              itemList: false,
-              typeId: '',
-              typeName: key,
-              allowCreateByPersonal: choiceTypes[key]?.allowCreateByPersonal
-            },{...(choiceTypes[key] || {})}));
-          } else {
-            // 非空，不允许
-            this.$set(this.editLabelItem.labelObj[key], 'isNoAdd', true);
-            this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]?.multipleChoice);
-            this.$set(this.editLabelItem.labelObj[key], 'allowCreateByPersonal', choiceTypes[key]?.allowCreateByPersonal);
-            this.$set(this.editLabelItem.labelObj[key], 'parentColor', choiceTypes[key]?.parentColor);
-          }
-        } else {
-          this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]?.multipleChoice);
-          this.$set(this.editLabelItem.labelObj[key], 'allowCreateByPersonal', choiceTypes[key]?.allowCreateByPersonal);
-          this.$set(this.editLabelItem.labelObj[key], 'parentColor', choiceTypes[key]?.parentColor);
-        }
-      });
-   },
-
-    updateLabelData(){
-      this.handleGetLabelData(this.item, true)
-    },
-
-   /**
-     * 清空选项和常用值;
-     */
-    handleResetOptions() {
-      let fn = this?.$refs?.labelFormContent?.handleResetOptions;
-      if (typeof fn === "function") {
-        fn();
-        // 清空完需要刷新“常用值”
-        // 异步刷新
-        this.commonLabelList = [];
-        Promise.resolve().then(() => {
-          this.getCommonlabelsList(this.item.label_type);
-        });
-      }
-    },
-
-    // 标签外显发生变化
-    explicitOnChange(){
-      this.handleSaveLabel();
-    },
-
-    hanldeSetLabelItem(id, state){
-      if(this.explicit){
-        this.$nextTick(()=>{
-          this.$refs.labelFormContent?.hanldeSetLabelItem(id, state);
-        })
-      }
-    },
-
-    async handleGetMultipleChoiceConfig(v){
-      const { rows, results } = await this.getLabelList(v);
-      if (!results) return false;
-      let multipleChoiceConfig = (results.typeList || []).reduce((obj, item) => {
-        obj[item.typeId] = item.multipleChoice
-        return obj;
-      }, {});
-
-       this.multipleChoiceConfig = multipleChoiceConfig;
-      this.$set(this,'multipleChoiceConfig',multipleChoiceConfig);
-    }
-  }
-});
-</script>
-<style lang="less" scoped>
-.edit-label-content .edit-content .ant-tag-checkable span {
-  max-width: 84px;
-}
-.edit-content {
-  width: 100%;
-}
-.edit-content {
-  margin-bottom: 10px;
-}
-
-.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;
-  }
-}
-.tag-label {
-  /deep/ .ant-tag {
-    margin-bottom: 4px;
-    border: 1px solid #f1f1f1;
-    .anticon-close {
-      color: #fff;
-    }
-  }
-}
-.common-label {
-  padding: 8px 12px 4px;
-  margin-top: 8px;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  > span {
-    margin-right: 16px;
-    color: rgba(0, 0, 0, 0.9);
-  }
-  .ant-tag-checkable {
-    cursor: pointer;
-    box-sizing: border-box;
-  }
-  /deep/ .ant-tag {
-    margin-bottom: 4px;
-  }
-}
-.form-add-icon-label {
-  margin-bottom: 4px;
-  color: #2d7aff;
-  cursor: pointer;
-}
-.anticon + .anticon {
-  margin-left: 16px;
-}
-</style>
-<style lang="less">
-.label-form-modal-wrap {
-  transition: none;
-  .ant-modal-body {
-    padding: 0px;
-  }
-}
-
-// 弹框规范
-.standard-modal {
-  box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.14);
-  border-radius: 8px;
-  padding-bottom: 0px;
-  .ant-modal-content {
-    border-radius: 8px;
-  }
-  .ant-modal-header {
-    padding: 14px 16px;
-    height: 52px;
-    border-radius: 8px 8px 0 0;
-
-    .ant-modal-title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: #000000;
-      font-size: 16px;
-      .svg-wrap {
-        right: 16px;
-        svg {
-          font-size: 14px;
-          cursor: pointer;
-        }
-        svg + svg {
-          margin-left: 16px;
-        }
-      }
-    }
-  }
-  .ant-modal-footer {
-    box-sizing: border-box;
-    height: 52px;
-    border-radius: 0 0 8px 8px;
-    .ant-btn {
-      padding: 0 12px;
-    }
-  }
-  .ant-modal-close-x {
-    height: 54px;
-  }
-  .change-screen-svg {
-    top: -1px;
-  }
-  &.has-mask {
-    .ant-modal-close-icon {
-      color: #666;
-    }
-  }
-}
-.standard-modal-white {
-  .ant-modal-header {
-    background: #fff;
-  }
-}
-</style>
+<template>
+  <div class="label-page">
+    <div class="tag-label">
+      <a-tag v-for="v in labelSelectedList" :key="v.labelId" :style="handleLabelColor(v, true)" :closable="item_is_edit" @close="closeTag(v)">
+        {{ v.labelName }}
+      </a-tag>
+      <span v-if="!explicit" class="form-add-icon form-add-icon-label" @click="handleEditLabel" :class="{ disable: isLock }" v-show="item_is_edit">
+        <a-icon class="add-icon" type="plus-circle" />
+        新增
+      </span>
+    </div>
+    <div class="common-label" v-if="sourceType == 'form' && commonLabelList.length && item_is_edit && !explicit">
+      <span>常用</span>
+      <a-checkable-tag v-for="(item, i) in commonLabelList" v-model="item.isSelect" @change="handleCommonLabelChange($event, item)" :key="i" :style="handleLabelColor(item)">
+        {{ item.labelName }}
+      </a-checkable-tag>
+    </div>
+    <div v-if="explicit && item_is_edit">
+      <labelFormContent
+       :explicit="explicit"
+        v-bind="$attrs"
+        ref="labelFormContent"
+        :labelVisible="labelVisible"
+        :item="item"
+        :isEdit="isEdit"
+        :isLock="isLock"
+        :labelSelectedList="labelSelectedList"
+        :isChangeWindow="isChangeWindow"
+        :labelOptions="editLabelItem.labelObj"
+        :sourceType="sourceType"
+        @updateLabelData="updateLabelData"
+        @explicitOnChange="explicitOnChange"
+      ></labelFormContent>
+    </div>
+
+    <!-- 弹窗 -->
+    <a-modal
+      class="label-form-modal-wrap modal-wrap standard-modal standard-modal-white"
+      v-model="labelVisible"
+      @ok="handleSaveLabel"
+      @cancel="handleLabelCancel"
+      :maskClosable="false"
+      :destroyOnClose="true"
+      :width="modalWidth"
+      :cancelText="'取消'"
+      :okText="'确定'"
+      :bodyStyle="{
+        height: modalHeight,
+        maxHeight,
+        position: 'relative'
+      }"
+      :class="{ 'modal-screen': isChangeWindow }"
+      :closable="false"
+      centered
+      wrapClassName="crm-form-label-modal"
+    >
+      <template slot="title">
+        <div>
+          <!-- {{ $t("1.9.58") }} -->
+          选择标签
+        </div>
+        <div class="svg-wrap">
+          <svg-icon
+            @click="changeModalWindow"
+            :icon-class="
+              isChangeWindow
+                ? 'xitongtubiaodaohangtubiaozuixiaohua'
+                : 'xitongtubiaodaohangtubiaozuidahua'
+            "
+          ></svg-icon>
+          <!-- <a-icon :type="!isChangeWindow ? 'fullscreen' : 'fullscreen-exit'" @click="changeModalWindow" /> -->
+          <!-- <a-icon type="close" @click="handleLabelCancel" /> -->
+          <svg-icon
+            :icon-class="'xitongtubiaodaohangtubiaoguanbi'"
+            @click="handleLabelCancel"
+          ></svg-icon>
+        </div>
+      </template>
+      <labelFormContent
+       :explicit="explicit"
+        v-bind="$attrs"
+        ref="labelFormContent"
+        :labelVisible="labelVisible"
+        :item="item"
+        :isEdit="isEdit"
+        :isLock="isLock"
+        :labelSelectedList="labelSelectedList"
+        :isChangeWindow="isChangeWindow"
+        :labelOptions="editLabelItem.labelObj"
+        :sourceType="sourceType"
+        @updateLabelData="updateLabelData"
+      ></labelFormContent>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { Tooltip, Icon, Button, Input, Tag, Modal } from 'ant-design-vue';
+import labelFormContent from './labelFormContent';
+import utils from '@/utils/utils-map';
+import create from '@/core/create';
+/**
+ * @onChange="xxx" 获取保存的值
+ */
+export default create({
+  name: 'select-label',
+  components: {
+    labelFormContent,
+    [Input.name]: Input,
+    [Icon.name]: Icon,
+    [Tooltip.name]: Tooltip,
+    [Button.name]: Button,
+    AModal: Modal,
+    [Tag.name]: Tag,
+    [Tag.CheckableTag.name]: Tag.CheckableTag
+  },
+  data() {
+    return {
+      labelVisible: false,
+      editLabelItem: {},
+      labelSelectedList: [],
+      labelSelectedEdit: [], // 编辑状态的label值
+      inited: false,
+      isChangeWindow: false,
+      modalWidth: '763px',
+      modalHeight: '404px',
+      maxHeight: '404px',
+      commonLabelList: [],
+      multipleChoiceConfig: {}
+    };
+  },
+  props: {
+    selectedList: {
+      // 默认选中的参数
+      type: Array,
+      default: () => []
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    // labelType: {
+    //   // 请求接口的type
+    //   type: String,
+    //   default: undefined
+    // },
+    isEdit: {
+      // 是否可以编辑
+      type: Boolean,
+      default: true
+    },
+    isDetail: {
+      // 是否查看详情
+      type: Boolean,
+      default: false
+    },
+    isLock: { type: Boolean, default: false },
+    sourceType: String,
+    getLabelList: {
+      type: Function,
+      default: () => Promise.resolve({ rows: [] })
+    },
+
+    explicit:{ // 标签选择外显
+      type: Boolean,
+      default: false
+    },
+
+    explicitHeiht:{
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    item_is_edit() {
+      const item = this?.item || {};
+      return (item.is_edit == 1 || item.isShow) && !this.isDetail;
+    }
+  },
+  mounted() {
+    // 外显初始化
+    if(this.explicit){
+      this.handleEditLabel();
+    } else {
+      // 获取标签分类
+      this.handleGetMultipleChoiceConfig(this.item);
+    }
+
+  },
+  watch: {
+    selectedList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          let v = Array.isArray(val) ? val : [];
+          this.labelSelectedList = JSON.parse(JSON.stringify(v));
+          this.hadleCommonlabels(this.commonLabelList, this.labelSelectedList);
+        }
+      }
+    },
+    'item.label_type': {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (!val || this.sourceType != 'form') return;
+        this.getCommonlabelsList(val);
+      }
+    }
+  },
+  methods: {
+    async getCommonlabelsList(type) {
+      let { data = {} } = (await this.commonlabels(type)) || {};
+      if (data.result !== 'SUCCESS') return;
+      let commonLabelList = data.map?.rows || [];
+      this.hadleCommonlabels(commonLabelList, this.labelSelectedList);
+      this.commonLabelList = commonLabelList;
+    },
+    hadleCommonlabels(commonLabelList, selectList) {
+      if (!commonLabelList.length) return;
+      commonLabelList.forEach(n => {
+        let isSelect = selectList.some(i => i.labelId == n.labelId);
+        n.isSelect = isSelect;
+      });
+    },
+    closeTag(d) {
+      const selectedList = this.labelSelectedList || [];
+      const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
+      if (fdIndex != -1) {
+        selectedList.splice(fdIndex, 1);
+      }
+      this.handleEmit(selectedList);
+      this.hanldeSetLabelItem(d.labelId, false);
+    },
+    handleCommonLabelChange(v, d) {
+       let multipleChoiceConfig = this.multipleChoiceConfig;
+      let selectedList = this.labelSelectedList || [];
+      if (v) {
+        if (selectedList.some(n => n.labelId == d.labelId)) {
+          return;
+        }
+        // 不允许多选的类型，先删除，再新增
+        if('2' == multipleChoiceConfig[d.typeId]){
+          selectedList = selectedList.filter(item => item.typeId !== d.typeId);
+        }
+        selectedList.push(d);
+      } else {
+        const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
+        if (fdIndex != -1) {
+          selectedList.splice(fdIndex, 1);
+        }
+      }
+      this.handleEmit(selectedList);
+    },
+    // TODO:
+    async commonlabels(type) {
+      let url = '/label/commonlabels';
+      if (this.commonLabelList.length) return;
+      return this.axios.get(url, {
+        params: {
+          type
+        }
+      });
+    },
+    handleEditLabel(type) {
+      if (this.isLock) return;
+      if(!this.explicit && type !== 'init') {
+        this.labelVisible = true;
+      }
+      this.handleGetLabelData(this.item)
+    },
+    handleLabelCancel() {
+      if(this.explicit) return;
+
+      this.$refs.labelFormContent?.resetShowAdd();
+      this.editLabelItem.showAdd = false;
+      this.editLabelItem = {};
+      this.inited = false;
+      this.modalWidth = '763px';
+      this.modalHeight = '404px';
+      this.maxHeight = '404px';
+      this.isChangeWindow = false;
+      this.labelVisible = false;
+    },
+    changeModalWindow() {
+      this.isChangeWindow = !this.isChangeWindow;
+      let docHeight = document.body.clientHeight;
+      this.modalWidth = this.modalWidth === '763px' ? `100%` : '763px';
+      this.modalHeight = this.modalHeight === '404px' ? `${docHeight - 110}px` : '404px';
+      this.maxHeight = this.modalHeight === 'auto' ? '404px' : 'none';
+    },
+
+    handleSaveLabel() {
+      this.$refs.labelFormContent?.handleLabelForm(selectList => {
+        this.handleEmit(selectList);
+        this.hadleCommonlabels(this.commonLabelList, selectList);
+        this.handleLabelCancel();
+      });
+    },
+    handleEmit(selectList) {
+      // this.$set(this, "labelSelectedList", selectList);
+      this.$emit('valueOnChange', [...selectList], this.item);
+      this.$emit('onChange', [...selectList]);
+    },
+
+    handleLabelColor(...arg) {
+      return utils.handleLabelColor(...arg);
+    },
+
+    async handleGetLabelData(v, update) {
+      const { rows, results } = await this.getLabelList(v, {update: update});
+      // console.log(rows, results)
+      const labelList = rows || [];
+      const labelObj = {};
+      const cacheKey = `${v.val_key}_${v.name}`;
+      //  this.labelSelected[d.cacheKey]
+      const selectList = update ? [...(this.labelSelectedEdit || [])] : [...(this.labelSelectedList || [])];
+      labelList.forEach(n => {
+        n.cacheKey = cacheKey;
+        // 根据 labelId 处理默认选中
+        /**
+         * typeName 按照分类处理
+         * 没有分类创建分类，有则添加
+         */
+        this.$set(n,'isSelect',false)
+        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);
+      update && this.$set(this, 'labelSelectedEdit', selectList);
+      // 缓存
+      this.editLabelItem = v;
+      this.setLabelTypeStatus(results);
+    },
+
+    setLabelTypeStatus(results) {
+      if (!results) return false;
+      let keys = Object.keys(results);
+      let multipleChoiceConfig ={};
+      let choiceTypes = (results.typeList || []).reduce((obj, item) => {
+        multipleChoiceConfig[item.typeId] = item.multipleChoice
+
+        obj[item.typeName] = {
+          multipleChoice:item.multipleChoice,
+          parentColor: item.parentColor,
+          allowCreateByPersonal:item.allowCreateByPersonal
+        }
+        return obj;
+      }, {});
+
+      if(this.explicit){
+        this.multipleChoiceConfig = multipleChoiceConfig;
+      }
+      keys.forEach(key => {
+        if (key === 'typeList') return;
+        // 空，允许
+        if (key === 'emptyTypes') {
+          results[key].forEach(item => {
+            this.$set(this.editLabelItem.labelObj, item.typeName, Object.assign({
+              addVal: '',
+              showAdd: false,
+              itemList: [],
+              typeId: item.typeId,
+              typeName: item.typeName,
+              allowCreateByPersonal: item.allowCreateByPersonal
+            },choiceTypes[item.typeName] || {}));
+          });
+          return;
+        }
+        if (utils.isPlainObject(results[key])) {
+          // 空，不允许
+          if (!this.editLabelItem.labelObj[key]) {
+            this.$set(this.editLabelItem.labelObj, key, Object.assign({
+              addVal: '',
+              showAdd: false,
+              itemList: false,
+              typeId: '',
+              typeName: key,
+              allowCreateByPersonal: choiceTypes[key]?.allowCreateByPersonal
+            },{...(choiceTypes[key] || {})}));
+          } else {
+            // 非空，不允许
+            this.$set(this.editLabelItem.labelObj[key], 'isNoAdd', true);
+            this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]?.multipleChoice);
+            this.$set(this.editLabelItem.labelObj[key], 'allowCreateByPersonal', choiceTypes[key]?.allowCreateByPersonal);
+            this.$set(this.editLabelItem.labelObj[key], 'parentColor', choiceTypes[key]?.parentColor);
+          }
+        } else {
+          this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]?.multipleChoice);
+          this.$set(this.editLabelItem.labelObj[key], 'allowCreateByPersonal', choiceTypes[key]?.allowCreateByPersonal);
+          this.$set(this.editLabelItem.labelObj[key], 'parentColor', choiceTypes[key]?.parentColor);
+        }
+      });
+   },
+
+    updateLabelData(){
+      this.handleGetLabelData(this.item, true)
+    },
+
+   /**
+     * 清空选项和常用值;
+     */
+    handleResetOptions() {
+      let fn = this?.$refs?.labelFormContent?.handleResetOptions;
+      if (typeof fn === "function") {
+        fn();
+        // 清空完需要刷新“常用值”
+        // 异步刷新
+        this.commonLabelList = [];
+        Promise.resolve().then(() => {
+          this.getCommonlabelsList(this.item.label_type);
+        });
+      }
+    },
+
+    // 标签外显发生变化
+    explicitOnChange(){
+      this.handleSaveLabel();
+    },
+
+    hanldeSetLabelItem(id, state){
+      if(this.explicit){
+        this.$nextTick(()=>{
+          this.$refs.labelFormContent?.hanldeSetLabelItem(id, state);
+        })
+      }
+    },
+
+    async handleGetMultipleChoiceConfig(v){
+      const { rows, results } = await this.getLabelList(v);
+      if (!results) return false;
+      let multipleChoiceConfig = (results.typeList || []).reduce((obj, item) => {
+        obj[item.typeId] = item.multipleChoice
+        return obj;
+      }, {});
+
+       this.multipleChoiceConfig = multipleChoiceConfig;
+      this.$set(this,'multipleChoiceConfig',multipleChoiceConfig);
+    }
+  }
+});
+</script>
+<style lang="less" scoped>
+.edit-label-content .edit-content .ant-tag-checkable span {
+  max-width: 84px;
+}
+.edit-content {
+  width: 100%;
+}
+.edit-content {
+  margin-bottom: 10px;
+}
+
+.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;
+  }
+}
+.tag-label {
+  /deep/ .ant-tag {
+    margin-bottom: 4px;
+    border: 1px solid #f1f1f1;
+    .anticon-close {
+      color: #fff;
+    }
+  }
+}
+.common-label {
+  padding: 8px 12px 4px;
+  margin-top: 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  > span {
+    margin-right: 16px;
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .ant-tag-checkable {
+    cursor: pointer;
+    box-sizing: border-box;
+  }
+  /deep/ .ant-tag {
+    margin-bottom: 4px;
+  }
+}
+.form-add-icon-label {
+  margin-bottom: 4px;
+  color: #2d7aff;
+  cursor: pointer;
+}
+.anticon + .anticon {
+  margin-left: 16px;
+}
+</style>
+<style lang="less">
+.label-form-modal-wrap {
+  transition: none;
+  .ant-modal-body {
+    padding: 0px;
+  }
+}
+
+// 弹框规范
+.standard-modal {
+  box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.14);
+  border-radius: 8px;
+  padding-bottom: 0px;
+  .ant-modal-content {
+    border-radius: 8px;
+  }
+  .ant-modal-header {
+    padding: 14px 16px;
+    height: 52px;
+    border-radius: 8px 8px 0 0;
+
+    .ant-modal-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #000000;
+      font-size: 16px;
+      .svg-wrap {
+        right: 16px;
+        svg {
+          font-size: 14px;
+          cursor: pointer;
+        }
+        svg + svg {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+  .ant-modal-footer {
+    box-sizing: border-box;
+    height: 52px;
+    border-radius: 0 0 8px 8px;
+    .ant-btn {
+      padding: 0 12px;
+    }
+  }
+  .ant-modal-close-x {
+    height: 54px;
+  }
+  .change-screen-svg {
+    top: -1px;
+  }
+  &.has-mask {
+    .ant-modal-close-icon {
+      color: #666;
+    }
+  }
+}
+.standard-modal-white {
+  .ant-modal-header {
+    background: #fff;
+  }
+}
+</style>