cnhis-design-vue 2.2.3 → 2.2.5

package/packages/select-tag/index.js

@@ -1,14 +0,0 @@
-import SelectTag from './select-label';
-import TagFormContent from './labelFormContent';
-
-SelectTag.install = function(Vue){
-  Vue.component(SelectTag.name, SelectTag);
-  Vue.component(TagFormContent.name, TagFormContent);
-}
-
-
-Object.assign(SelectTag, {
-  TagFormContent,
-});
-
-export default SelectTag;

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

@@ -1,133 +0,0 @@
-<template>
-  <div class="edit-content">
-    <div v-if="!labelList || labelList.length === 0" class="label-disable-wrap">
-      <p class="label-disable-title">无可选标签</p>
-      <p class="label-disable-desc">请联系管理员进行标签管理设置</p>
-    </div>
-
-    <div v-else class="label-content">
-      <a-checkable-tag
-        v-for="item in labelList"
-        v-model="item.isSelect"
-        @change="onHandleLabelChange($event, item, categoryItem)"
-        :key="item.labelCode"
-        :style="formatStyle(item)"
-      >
-        <a-tooltip placement="topLeft" :mouseEnterDelay="0.5" :mouseLeaveDelay="0">
-          <template slot="title">
-            <span>{{ item.labelShowText }}</span>
-          </template>
-          {{ item.labelShowText }}
-        </a-tooltip>
-      </a-checkable-tag>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Tooltip, Icon, Button, Input, Tag, Tabs, Anchor } from 'ant-design-vue';
-import create from '@/core/create';
-
-const baseActiveColor = 'rgb(85, 133, 245)';
-export default create({
-  name: 'label-classify',
-  data() {
-    return {};
-  },
-  props: {
-    categoryItem:{
-      type: Object,
-      default:()=>({})
-    },
-    selectedList:{
-      type: Array,
-      default:()=>[]
-    },
-    handleLabelChange: {
-      type: Function,
-      default: ()=>{}
-    }
-  },
-  computed: {
-    labelList(){
-      if (this.categoryItem?.labelList) {
-        return this.categoryItem.labelList.map(item => {
-          return {
-            ...item,
-            isSelect: this.showCheck(item)
-          }
-        })
-      }
-      return [];
-    }
-  },
-  methods: {
-    showCheck(label) {
-      const labelIndex = this.selectedList.findIndex(selectLabel => selectLabel.classifyId === this.categoryItem.classifyId && selectLabel.labelCode === label.labelCode);
-      return labelIndex > -1;
-    },
-    onHandleLabelChange(isSelect, item, categoryItem) {
-      this.handleLabelChange(isSelect, item, categoryItem);
-    },
-    formatStyle(item) {
-      return this.showCheck(item) ? {
-        background: item.backgroundColor || baseActiveColor,
-        borderColor: item.backgroundColor || baseActiveColor
-      } : {}
-    }
-  },
-  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
-  },
-});
-</script>
-
-<style lang="less" scoped>
-.edit-content{
-  flex: 1;
-  padding: 8px 0 0 16px;
-  width: 100%;
-  .label-content{
-    display: flex;
-    flex-wrap: wrap;
-    line-height: 34px;
-    .ant-tag-checkable{
-      cursor: pointer;
-      position: relative;
-      height: 32px;
-      line-height: 32px;
-      text-align: center;
-      min-width: 108px;
-      max-width: 108px;
-      color: rgba(33, 33, 33, 0.6);
-      background: rgb(250, 250, 250);
-      border-color: rgba(213, 213, 213, 0.8);
-      font-size: 14px;
-      border-radius: 4px;
-      margin-bottom: 8px;
-      box-sizing: border-box;
-      span {
-        display: inline-block;
-        width: 80px;
-        height: 100%;
-        line-height: 30px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-    .ant-tag-checkable-checked {
-      color: #fff !important;
-    }
-  }
-}
-</style>

package/packages/select-tag/labelFormContent.vue

@@ -1,295 +0,0 @@
-<template>
-  <div class="labelFormContent-page">
-    <template v-if="!tagRequestMap.status">
-      <div class="label-disable-wrap" >{{tagRequestMap.resultMsg}}</div>
-    </template>
-    <template v-else>
-      <div v-if="!categoryList.length" class="label-disable-wrap">
-        <p class="label-disable-title">无可选标签</p>
-        <p class="label-disable-desc">请联系管理员进行标签管理设置</p>
-      </div>
-      <div v-show="categoryList.length > 0" class="label-wrap" >
-        <!-- 表单内嵌打开标签组件的样式 -->
-        <div v-if="explicit" class="explicit-continer">
-          <a-tabs hideAdd :activeKey="labelAnchorKey" type="card" @change="labelAnchorTabsOnChange" tab-position="top">
-            <a-tab-pane v-for="(v) in categoryList" :key="`#${v.classifyId}-${v.classifyName}`">
-              <span slot="tab">
-                {{ v.classifyName }}
-                <!-- <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span> -->
-              </span>
-              <div class="explicit-label-wrap left-label-wrap">
-                <div class="edit-label-content">
-                  <labelClassify
-                    :categoryItem="v"
-                    :selectedList="curSelectedList"
-                    :handleLabelChange="handleLabelChange"
-                  />
-                </div>
-              </div>
-            </a-tab-pane>
-          </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">
-            <a-tab-pane v-for="(v) in categoryList" :key="`#${v.classifyId}-${v.classifyName}`">
-              <span slot="tab">
-                {{ v.classifyName }}
-              </span>
-            </a-tab-pane>
-          </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">
-            <a-anchor-link
-              v-for="(v) in categoryList"
-              :key="v.classifyId"
-              :href="`#${v.classifyId}-${v.classifyName}`"
-              :title="v.classifyName"
-            />
-          </a-anchor>
-          <div v-for="(v, k) in categoryList" :key="k" class="edit-label-content">
-            <div class="edit-label" :id="`${v.classifyId}-${v.classifyName}`">
-              {{ v.classifyName }}
-              <!-- <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span> -->
-            </div>
-            <labelClassify
-              :categoryItem="v"
-              :selectedList="curSelectedList"
-              :handleLabelChange="handleLabelChange"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-<script>
-
-import { Tooltip, Icon, Button, Input, Tag, Tabs, Anchor } from 'ant-design-vue';
-import create from '@/core/create';
-
-import labelClassify from './label-classify.vue';
-export default create({
-  name: 'tag-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: {
-    // 选中的标签列表
-    selectedList: {
-      type: Array,
-      default: () => []
-    },
-    // 配置项
-    categoryList: {
-      type: Array,
-      default: () => []
-    },
-    // 弹窗样式
-    isChangeWindow: {
-      type: Boolean,
-      default: false
-    },
-    // 标签选择外显
-    explicit: {
-      type: Boolean,
-      default: false
-    },
-    // 接口请求状态
-    tagRequestMap: {
-      type: Object,
-      default: () => ({
-        status: true,
-        resultMsg: ''
-      })
-    }
-  },
-  inject: {},
-  data() {
-    return {
-      labelAnchorKey: this.categoryList?.length > 0 ? `#${this.categoryList[0].classifyId}-${this.categoryList[0].classifyName}` : '',
-      cacheAnchorKey: '',
-
-      curSelectedList: [] // 当前选中的label项
-    };
-  },
-
-  watch: {
-    selectedList: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (val) {
-          let list = Array.isArray(val) ? val : [];
-          this.curSelectedList = JSON.parse(JSON.stringify(list));
-        }
-      }
-    }
-  },
-  // 方法
-  methods: {
-    labelAnchorTabsOnChange(key) {
-      if (!key) return;
-      setTimeout(() => {
-        // let anchorKey = '#' + key;
-        let curLink;
-        curLink = this.$el.querySelector("a[href='" + key + "']");
-        curLink && curLink.click();
-        this.labelAnchorKey = key;
-      }, 32);
-    },
-    anchorOnChange(link) {
-      if (!link) return;
-      let curLink = link.slice(1);
-      this.cacheAnchorKey = curLink;
-    },
-    anchorGetContainer() {
-      return this.$el?.querySelector('.right-label-wrap');
-    },
-    handleAnchorClick(e) {
-      e.preventDefault();
-    },
-    handleLabelForm(cb) {
-      const selectList = [...(this.curSelectedList || [])];
-      cb(selectList);
-    },
-    handleLabelChange(isSelect, labelItem, categoryItem) {
-      let curSelecteds = this.curSelectedList || [];
-      if (isSelect) {
-        curSelecteds.push({
-          classifyId: categoryItem.classifyId,
-          classifyName: categoryItem.classifyName,
-          labelCode: labelItem.labelCode,
-          labelShowText: labelItem.labelShowText,
-          backgroundColor: labelItem.backgroundColor
-        })
-      } else {
-        const fdIndex = curSelecteds.findIndex(selectLabel => selectLabel.classifyId === categoryItem.classifyId && selectLabel.labelCode === labelItem.labelCode);
-        fdIndex > -1 && curSelecteds.splice(fdIndex, 1);
-      }
-      this.curSelectedList = curSelecteds;
-
-      // 外显实时改变通知
-      if (this.explicit) {
-        this.$emit('explicitOnChange', curSelecteds);
-      }
-    }
-  }
-});
-</script>
-<style lang="less" scoped>
-.labelFormContent-page {
-  width: 100%;
-  height: 100%;
-  .label-disable-wrap{
-    margin-top: 20px;
-    width: 100%;
-    font-size: 14px;
-    line-height: 20px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    color: #969696;
-    .label-disable-title {
-      color: #2e2e2e;
-      margin-bottom: 5px;
-    }
-  }
-
-  .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;
-      overflow-y: auto;
-      .edit-label-content{
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        font-size: 14px;
-        .edit-label{
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 0 5px 0 16px;
-          word-wrap: normal;
-          color: #212121;
-          font-size: 16px;
-        }
-      }
-      &.total-right-label-wrap {
-        max-height: calc(100vh - 109px);
-      }
-    }
-  }
-}
-
-</style>

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

@@ -1,274 +0,0 @@
-<template>
-  <div class="label-page">
-    <div class="tag-label">
-      <a-tag
-        v-for="v in outSelectedList"
-        :key="`${v.classifyId}-${v.labelCode}`"
-        :closable="true"
-        @close="closeTag(v)"
-        :style="formatActiveStyle(v)"
-      >
-        {{ v.labelShowText }}
-      </a-tag>
-      <span v-if="!explicit" class="form-add-icon form-add-icon-label" @click="handleEditLabel">
-        <a-icon class="add-icon" type="plus-circle" />
-        新增
-      </span>
-    </div>
-    <div v-if="explicit">
-      <labelFormContent
-        ref="labelFormContent"
-        :categoryList="categoryList"
-				:selectedList="outSelectedList"
-				:isChangeWindow="isChangeWindow"
-				:explicit="explicit"
-        :tagRequestMap="tagRequestMap"
-				@explicitOnChange="explicitOnChange"
-      ></labelFormContent>
-    </div>
-
-    <!-- 弹窗 -->
-    <a-modal
-      class="label-form-modal-wrap modal-wrap select-tag-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>
-          选择标签
-        </div>
-        <div class="svg-wrap">
-          <svg-icon
-            @click="changeModalWindow"
-            :icon-class="
-              isChangeWindow
-                ? 'xitongtubiaodaohangtubiaozuixiaohua'
-                : 'xitongtubiaodaohangtubiaozuidahua'
-            "
-          ></svg-icon>
-          <svg-icon
-            :icon-class="'xitongtubiaodaohangtubiaoguanbi'"
-            @click="handleLabelCancel"
-          ></svg-icon>
-        </div>
-      </template>
-      <labelFormContent
-        ref="labelFormContent"
-        :categoryList="categoryList"
-        :selectedList="outSelectedList"
-        :isChangeWindow="isChangeWindow"
-        :explicit="explicit"
-        :tagRequestMap="tagRequestMap"
-        @explicitOnChange="explicitOnChange"
-      ></labelFormContent>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import { Tooltip, Icon, Button, Input, Tag, Modal } from 'ant-design-vue';
-import labelFormContent from './labelFormContent';
-import SvgIcon from '@/component/svg/index.vue';
-import utils from '@/utils/utils-map';
-import create from '@/core/create';
-/**
- * @onChange="xxx" 获取保存的值
- */
-export default create({
-  name: 'select-tag',
-  components: {
-    labelFormContent,
-    SvgIcon,
-    [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,
-      isChangeWindow: false,
-      modalWidth: '763px',
-      modalHeight: '404px',
-      maxHeight: '404px',
-
-      outSelectedList: [],
-    };
-  },
-  props: {
-    // 选中的标签
-    selectedList: {
-      type: Array,
-      default: () => []
-    },
-    // 标签列表
-    categoryList: {
-      type: Array,
-      default: () => []
-    },
-    // 标签是否外显
-    explicit:{
-      type: Boolean,
-      default: false
-    },
-    // 接口请求状态
-    tagRequestMap: {
-      type: Object,
-      default: () => ({
-        status: true,
-        resultMsg: ''
-      })
-    }
-  },
-
-  watch: {
-    selectedList: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (val) {
-          let list = Array.isArray(val) ? val : [];
-          this.outSelectedList = JSON.parse(JSON.stringify(list));
-        }
-      }
-    }
-  },
-  methods: {
-    formatActiveStyle(activeItem) {
-      return {
-        background: activeItem.backgroundColor,
-        color: '#fff',
-        borderColor: activeItem.backgroundColor
-      }
-    },
-    closeTag(selectItem) {
-      const selectedList = this.outSelectedList || [];
-      const fdIndex = selectedList.findIndex(sItem => sItem.classifyId == selectItem.classifyId && sItem.labelCode == selectItem.labelCode);
-      if (fdIndex > -1) {
-        selectedList.splice(fdIndex, 1);
-      }
-      this.outSelectedList = selectedList;
-      this.$emit('onChange', [...selectedList]);
-    },
-    handleEditLabel(type) {
-      if(!this.explicit) {
-        this.labelVisible = true;
-      }
-    },
-    handleLabelCancel() {
-      if(this.explicit) return;
-      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.$emit('onChange', [...selectList]);
-        this.outSelectedList = selectList;
-        this.handleLabelCancel();
-      });
-    },
-    // 标签外显发生变化
-    explicitOnChange(){
-      this.handleSaveLabel();
-    }
-  }
-});
-</script>
-<style lang="less" scoped>
-.tag-label {
-  /deep/ .ant-tag {
-    margin-bottom: 4px;
-    border: 1px solid #f1f1f1;
-    .anticon-close {
-      color: #fff;
-    }
-  }
-  .form-add-icon-label {
-    color: #2d7aff;
-    cursor: pointer;
-  }
-}
-
-
-</style>
-<style lang="less">
-// 弹框规范
-.select-tag-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;
-    }
-  }
-}
-</style>