cnhis-design-vue 2.1.80 → 2.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "2.1.80",
+  "version": "2.1.81",
   "description": "前端业务UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",

package/packages/index.js

@@ -76,6 +76,7 @@ import { default as Age } from './age';
 import { default as SelectPerson } from './select-person';
 import { default as ScaleView } from './scale-view';
 import { default as SelectLabel } from './select-label';
+import { default as SelectTag } from './select-tag';
 import { default as VerificationCode } from './verification-code';
 import { default as DragLayout } from './drag-layout';
 import { default as MultiChat } from './multi-chat';
@@ -174,6 +175,7 @@ const components = [
   SelectPerson,
   ScaleView,
   SelectLabel,
+  SelectTag,
   VerificationCode,
   DragLayout,
   MultiChat,
@@ -290,6 +292,7 @@ export {
   locales,
   ScaleView,
   SelectLabel,
+  SelectTag,
   VerificationCode,
   DragLayout,
   MultiChat,

package/packages/select-tag/index.js

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

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

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