cnhis-design-vue 2.2.3 → 2.2.5

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

@@ -1,597 +0,0 @@
-<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 && !isLock" @close="closeTag(v)">
-        {{ v.labelName }}
-      </a-tag>
-      <span v-if="!explicit && !isLock" 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 && !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)" :class="{'label-common-check-disabel': !item_is_edit}">
-        {{ 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) {
-      if(!this.item_is_edit) return;
-       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) {
-      if(!this.item_is_edit) return {}
-      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;
-    &.label-common-check-disabel {
-      color: rgba(33, 33, 33, 0.6);
-      background: rgb(250, 250, 250);
-      border-color: rgba(213, 213, 213, 0.8);
-      cursor: default;
-      &:hover,
-      &:active,
-      &:focus {
-        color: rgba(33, 33, 33, 0.6);
-        background: rgb(250, 250, 250);
-        border-color: rgba(213, 213, 213, 0.8);
-      }
-    }
-  }
-  /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>

package/packages/select-person/index.js

@@ -1,10 +0,0 @@
-// 导入组件
-import selectPerson from './select-person';
-
-// 为组件提供 install 安装方法，供按需引入
-selectPerson.install = function(Vue) {
-  Vue.component(selectPerson.name, selectPerson);
-};
-
-// 默认导出组件
-export default selectPerson;