cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/select-label/labelFormContent.vue

@@ -1,787 +0,0 @@
-<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>