cnhis-design-vue 2.1.80 → 2.1.81

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

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

package/packages/table-filter/src/base-search-com/BaseSearch.vue

@@ -1765,6 +1765,10 @@ export default create({
       inputDom.blur();
     },
     handleRequestedLabel(v) {
+      let requestedLabel = this.filterApiConfig?.requestedLabel
+      if(requestedLabel && typeof requestedLabel === 'function') {
+        return this.handleGetConfigApi(v, 'requestedLabel')
+      }
       let params = { type: v, pageSize: 10000 };
       return this.axios.get('/label/list', { params: params });
     },

package/packages/table-filter/src/components/render-widget/components/DateRangeQuick.vue

@@ -11,7 +11,7 @@
         {{ getI18nText(date.title, date.name) }}
       </a-radio-button>
       <span :class="['check-date-btn', marginx]" @click="checkDate">
-        {{ getI18nText('1.1.4.52', '选择时间') }}
+        {{ checkText }}
       </span>
       <div class="check-date" v-show="showDate">
         <a-date-picker
@@ -19,7 +19,7 @@
           :format="format"
           :show-time="showTimeStart"
           :placeholder="placeholderS"
-          style="width: 120px"
+          style="width: 200px;min-width: 195px;"
           allowClear
           :disabledDate="current => disabledDatePicker(current, 'start')"
           @change="dateChangeStr"
@@ -30,7 +30,7 @@
           :format="format"
           :show-time="showTimeEnd"
           :placeholder="placeholderE"
-          style="width: 120px"
+          style="width: 200px;min-width: 195px;"
           allowClear
           :disabledDate="current => disabledDatePicker(current, 'end')"
           @change="dateChangeEnd"
@@ -76,6 +76,10 @@ export default {
     event: "update:value"
   },
   computed: {
+    checkText() {
+      if(this.fieldType === 'DATE') return '选择日期'
+      return '选择时间'
+    },
     showTimeStart(){
       if(this.fieldType === 'DATE') return false;
       return { defaultValue: moment('00:00:00', 'HH:mm:ss') }

package/packages/table-filter/src/components/render-widget/components/Label.vue

@@ -0,0 +1,209 @@
+<template>
+   <div class="label-attr-filter-container">
+    <div class="edit-labels-content"
+      v-for="categoryItem in categoryList"
+      :key="categoryItem.classifyId"
+    >
+      <span class="edit-f-label">{{ categoryItem.classifyName }}：</span>
+      <div
+        class="edit-f-content"
+        :class="{
+          'label-select-height': !categoryItem.isUnfold && categoryItem.labelList && categoryItem.isShowBtn
+        }"
+      >
+        <div class="label-f-content" v-resize="el => onResize(el, categoryItem)">
+          <a-checkable-tag
+            v-for="item in categoryItem.labelList"
+            :key="item.labelCode"
+            v-model="item.isSelect"
+            @change="handleLabelChange($event, item, categoryItem)"
+            :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>
+      <div class="label-f-unfold-btn" v-if="categoryItem.labelList && categoryItem.isShowBtn">
+        <span @click.stop="handleLabelUpfold(categoryItem)">
+          <template v-if="categoryItem.isUnfold">
+            <span>收起</span>
+            <a-icon
+              type="up-square"
+            />
+          </template>
+          <template v-else>
+            <span>展开</span>
+            <a-icon
+              type="down-square"
+            />
+          </template>
+        </span>
+      </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import { Tag, Icon, Tooltip } from 'ant-design-vue';
+import resize from 'vue-resize-directive';
+
+const baseActiveColor = 'rgb(85, 133, 245)';
+export default {
+  inheritAttrs: false,
+  components: {
+    [Icon.name]: Icon,
+    [Tag.name]: Tag,
+    [Tag.CheckableTag.name]: Tag.CheckableTag,
+    [Tooltip.name]: Tooltip,
+  },
+  directives: { resize },
+  props: {
+    componentCfg: { type: Object },
+    value: {
+      type: [Array, String, Number],
+    },
+    getLabelListMethodRender: Function,
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  data() {
+    return {
+      // 选中项
+      selectedList: [],
+    }
+  },
+  computed: {
+    categoryList() {
+      const {
+        tagList = []
+      } = this.componentCfg;
+      if (tagList && tagList.length > 0) {
+        return tagList.map(category => {
+          category.labelList.map(label => {
+            const valueList = this.value ? this.value.split('|#|') : [];
+            this.selectedList = valueList;
+            // 初始化isSelect的状态
+            if (valueList.length > 0) {
+              label.isSelect = valueList.includes(label.labelShowText);
+            }
+          })
+          return category
+        })
+      }
+      return []
+    }
+  },
+  created() {
+    this.getLabelListMethodRender(this.componentCfg)
+  },
+  methods: {
+    onResize(el, categoryItem) {
+      this.$nextTick(() => {
+        let height = el.offsetHeight || 0;
+        if (!height) {
+          return;
+        }
+        if (height > 80) {
+          this.$set(categoryItem, 'isShowBtn', true);
+        } else {
+          this.$set(categoryItem, 'isShowBtn', false);
+          this.$set(categoryItem, 'isUnfold', false);
+        }
+      })
+    },
+    handleLabelUpfold(categoryItem) {
+      this.$set(categoryItem, 'isUnfold', !categoryItem.isUnfold);
+    },
+    formatStyle(item) {
+      return item.isSelect ? {
+        background: item.backgroundColor || baseActiveColor,
+        borderColor: item.backgroundColor || baseActiveColor
+      } : {}
+    },
+    handleLabelChange(isSelect, item) {
+      item.isSelect = isSelect;
+      if (isSelect) {
+        this.selectedList.push(item.labelShowText)
+      } else {
+        const index = this.selectedList.findIndex(labelText => labelText === item.labelShowText);
+        if (index > -1) {
+          this.selectedList.splice(index, 1);
+        }
+      }
+      // 将数据向外抛出
+      this.$emit("update:value", this.selectedList.join('|#|'));
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+.label-attr-filter-container {
+  .edit-labels-content{
+    .edit-f-label {
+      color: #000;
+      font-size: 14px;
+      line-height: 32px;
+      padding-left: 0;
+    }
+    .edit-f-content{
+      padding: 0 !important;
+      &.label-select-height{
+        overflow: hidden;
+        height: 74px;
+        flex: none !important;
+      }
+      .label-f-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;
+        }
+      }
+    }
+    .label-f-unfold-btn{
+      margin: 8px 0;
+      color: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+      .anticon{
+        font-size: 16px;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+</style>

package/packages/table-filter/src/components/render-widget/components/NumberRange.vue

@@ -6,16 +6,16 @@
     >
       <input
         v-model="lessValue"
-        :title="`起始${componentCfg.title}`"
-        :placeholder="`起始${componentCfg.title}`"
+        :title="placeholderS"
+        :placeholder="placeholderS"
         @keyup.enter="changeFilterNumber"
         @change="changeFilterNumber"
         class="ant-calendar-range-picker-input"/>
       <span class="ant-calendar-range-picker-separator"> ~ &nbsp;</span>
       <input
         v-model="bigValue"
-        :title="`截止${componentCfg.title}`"
-        :placeholder="`截止${componentCfg.title}`"
+        :title="placeholderE"
+        :placeholder="placeholderE"
         @keyup.enter="changeFilterNumber"
         @change="changeFilterNumber"
         class="ant-calendar-range-picker-input"/>
@@ -59,7 +59,9 @@ export default {
     },
     componentCfg: {
       type: Object
-    }
+    },
+    placeholderS: String,
+    placeholderE: String,
   },
   watch: {
     value: {

package/packages/table-filter/src/components/render-widget/components/SelectDynamic.vue

@@ -5,11 +5,12 @@
       showSearch
       :mode="mode"
       :placeholder="placeholder"
-      :dropdownMatchSelectWidth="true"
+      :dropdownMatchSelectWidth="!selectHasTitle"
       :maxTagCount="maxTagCount"
       :maxTagPlaceholder="maxTagPlaceholder"
       :filterOption="false"
       :allowClear="true"
+      :showArrow="true"
       ref="quickInputSelect"
       class="quick-dynamic-select"
       :notFoundContent="componentCfg.fetchingWordbook ? undefined : '暂无数据'"
@@ -163,30 +164,10 @@ export default {
   },
   // 生命周期
   created() {},
-  mounted() {
-    this.createSuffixIcon()
-  },
+  mounted() {},
 
   // 方法
   methods: {
-    createSuffixIcon() {
-      if (this.mode === "default") return;
-      let refDom = this.$refs.quickInputSelect;
-      if (!refDom) return;
-      let selectDom = refDom.$el;
-      if (!selectDom) return;
-
-      let pDom = selectDom.querySelector(".ant-select-selection--multiple");
-      if(!pDom) return;
-      let hasTag = pDom.querySelector(".quick-dynamic-select-span");
-      if (!hasTag) {
-        let tag = document.createElement("span");
-        tag.className = "quick-dynamic-select-span";
-        let icon = `<i aria-label="图标: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i>`;
-        tag.innerHTML = icon;
-        pDom.appendChild(tag);
-      }
-    },
     maxTagPlaceholder() {
       if (!Array.isArray(this.value)) return undefined;
       const { alias, title } = this.componentCfg;
@@ -220,28 +201,22 @@ export default {
   height: 32px;
   &.quick-dynamic-select-mul {
     .ant-select-selection--multiple {
-      max-height: unset !important;
+      max-height: 100% !important;
     }
   }
   .ant-select-selection--multiple {
     position: relative;
     max-height: 32px !important;
-    .quick-dynamic-select-span {
-      position: absolute;
-      right: 2px;
-      top: 4px;
-      top: 50%;
-      right: 11px;
-      transform-origin: 50% 50%;
-      margin-top: -7px;
-      line-height: 1;
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.25);
-    }
   }
   
 }
 
+.ant-select-dropdown--multiple {
+  .quick-dynamic-dropDown-container .quick-dynamic-select-title {
+    padding-right: 32px;
+  }
+}
+
 .c-s-title-line {
   font-weight: 700;
   color: #000;
@@ -274,6 +249,7 @@ export default {
   }
   &.quick-dynamic-dropDown-container-hasTitle {
     padding-top: 32px;
+    width: 240px;
   }
   .quick-dynamic-select-title {
     position: absolute;