cnhis-design-vue 2.1.80 → 2.1.81

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

@@ -0,0 +1,80 @@
+<template>
+  <a-select
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-model="valueCp"
+    :maxTagCount="maxTagCount"
+    :maxTagPlaceholder="maxTagPlaceholder"
+  >
+    <a-select-option v-for="tag in optionList" :value="tag" :key="tag">{{ tag }}</a-select-option>
+  </a-select>
+</template>
+
+<script>
+import { Select } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    Select,
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: {
+      type: Object
+    },
+    getLabelListMethodRender: Function
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  created() {
+    this.getLabelListMethodRender(this.componentCfg)
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        const valueStr = val ? val.join('|#|') : val;
+        this.$emit("update:value", valueStr);
+      },
+      get() {
+        const valueList = this.value ? this.value.split('|#|') : [];
+        return valueList;
+      }
+    },
+    maxTagCount() {
+      if (!Array.isArray(this.valueCp)) return undefined;
+      const len = this.valueCp.length || 0;
+      return len > 1 ? 0 : 1;
+    },
+    optionList() {
+      const {
+        tagList = []
+      } = this.componentCfg;
+      if (tagList && tagList.length > 0) {
+        let result = [];
+        tagList.forEach(category => {
+          category.labelList.forEach(label => {
+            if(!result.includes(label.labelShowText)) result.push(label.labelShowText);
+          })
+        })
+        return result;
+      }
+      return []
+    }
+  },
+  methods: {
+    maxTagPlaceholder() {
+      if (!Array.isArray(this.valueCp)) return undefined;
+      const { alias, title } = this.componentCfg;
+      const len = this.valueCp.length || 0;
+      return this.valueCp.length > 1 ? `已选${len}个${alias || title}` : "";
+    }
+  },
+}
+</script>

package/packages/table-filter/src/components/render-widget/components/index.js

@@ -3,5 +3,7 @@ import Select from './Select.vue';
 import NumberRange from './NumberRange.vue';
 import DateRangeQuick from './DateRangeQuick.vue';
 import SelectDynamic from './SelectDynamic.vue';
+import Label from './Label.vue';
+import SelectLabel from './SelectLabel.vue'
 
-export { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic };
+export { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic, Label, SelectLabel };

package/packages/table-filter/src/components/render-widget/enums.js

@@ -9,7 +9,9 @@ export const WidgetTypeEnums = {
   INPUT_NUMBER_RANGE: 'NUMBER_RANGE',
   DATE_RANGE: 'DATE_RANGE',
   DATETIME_RANGE: 'DATETIME_RANGE',
-  DATE_RANGE_QUICK: 'DATE_RANGE_QUICK'
+  DATE_RANGE_QUICK: 'DATE_RANGE_QUICK',
+  LABEL: 'LABEL',
+  SELECT_LABEL: 'SELECT_LABEL'
 };
 
 export const DatePresetValEnums = {

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

@@ -2,7 +2,8 @@
 import { WidgetTypeEnums } from './enums';
 import { WidgetCfgMaps } from './widgetCfgMaps';
 import { filterApiFn } from '../../mixins/mixins';
-import dynamicMethod from './mixins/dynamic-method'
+import dynamicMethod from './mixins/dynamic-method';
+import labelMethod from './mixins/label-method';
 import { debounce } from "lodash";
 
 const UseSelfWidth = [WidgetTypeEnums.DATE, WidgetTypeEnums.DATE_TIME, WidgetTypeEnums.CHECKBOX_GROUP];
@@ -22,7 +23,7 @@ export default {
       default: () => ({})
     },
   },
-  mixins: [filterApiFn, dynamicMethod],
+  mixins: [filterApiFn, dynamicMethod, labelMethod],
   model: {
     event: "update:value",
     prop: "value",
@@ -35,6 +36,9 @@ export default {
       get() {
         return this.cfg.value;
       }
+    },
+    isQuick() {
+      return this.source === 'quickSearch'
     }
   },
   data() {
@@ -47,7 +51,7 @@ export default {
       this.$emit("outFilterChange");
     },
     getEleWidth(cfg) {
-      if(this.source === 'quickSearch') return '100%';
+      if(this.isQuick) return '100%';
       const { widgetType } = cfg;
       if (UseSelfWidth.includes(widgetType)) return;
       let defW = 200
@@ -57,7 +61,7 @@ export default {
       return `${cfg.advanceColWidth||defW}px`;
     },
     getEleMinWidth(cfg){
-      if(this.source !== 'quickSearch') return `${cfg.advanceColWidth|| 195}px`;
+      if(!this.isQuick) return `${cfg.advanceColWidth|| 195}px`;
       const { widgetType } = cfg;
       if (!unsetMinWidth.includes(widgetType)) return;
       return `unset`;
@@ -67,7 +71,7 @@ export default {
       const { props, handlerProps } = WidgetCfgMaps.get(widgetType);
       let Props = { ...props };
       if (handlerProps) {
-        Props = handlerProps(Props, { ...widgetCfg, title: alias || title, fieldType });
+        Props = handlerProps(Props, { ...widgetCfg, title: alias || title, fieldType, isQuick: this.isQuick });
       }
       if (customPlaceholder) {
         Props.placeholder = customPlaceholder;
@@ -76,6 +80,9 @@ export default {
         Props.dropdownVisibleChangeRender = this.dropdownVisibleChangeRender;
         Props.handleWordBookSearchRender = this.handleWordBookSearchRender;
       }
+      if(widgetType === 'LABEL' || widgetType === 'SELECT_LABEL') {
+        Props.getLabelListMethodRender = this.getLabelListMethodRender;
+      }
       this.initialProps = Props;
       if (Props.value) {
         this.valueCp = Props.value;
@@ -89,7 +96,7 @@ export default {
       const { value } = cfg;
       const { component, style, eventsBySearch = [] } = WidgetCfgMaps.get(widgetType);
       const props = { ...this.initialProps, value };
-      
+
 
       const EventsBySearch = eventsBySearch.reduce((evts, item) => {
         const { name, handler } = item;

package/packages/table-filter/src/components/render-widget/mixins/dynamic-method.js

@@ -151,7 +151,13 @@ export default {
     },
     handleWordBookSearchDef(value, item, config = {}) {
       let params = this.wordbookDataParamsRender(item.widgetCfg.dynamicOptionInfo);
-      let rp = { keyword: value, ...params, ...config };
+      let { tableDataType, filterKeys } = item?.widgetCfg?.dynamicOptionInfo || {};
+      let searchKeyName = 'keyword';
+      // API类型的列表, keyword名字为filterKeys的值
+      if (tableDataType === 'API' && Array.isArray(filterKeys) && filterKeys.length) {
+        searchKeyName = filterKeys[0] || 'keyword';
+      }
+      let rp = { [searchKeyName]: value, ...params, ...config };
       this.wordbookDataMethodRender(rp, item);
     }
   }

package/packages/table-filter/src/components/render-widget/mixins/label-method.js

@@ -0,0 +1,23 @@
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    getLabelDataRender(params) {
+      return this.handleGetConfigApi(params, 'requestListByClassify').then(res => {
+        if (typeof res.data === 'object') {
+          res.data.reqParams = params;
+        }
+        return res;
+      });
+    },
+    getLabelListMethodRender(item) {
+      const { classifyStr = '' } = item.widgetCfg || {};
+      this.getLabelDataRender({ classifyStr }).then(({ data }) => {
+        const { list = [] } = data;
+        this.$set(item, 'tagList', list);
+      });
+    }
+  }
+};

package/packages/table-filter/src/components/render-widget/widgetCfgMaps.js

@@ -1,6 +1,6 @@
 import { WidgetTypeEnums, DatePresetValEnums } from './enums';
 import { InputNumber, Input, DatePicker } from 'ant-design-vue';
-import { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic } from './components';
+import { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic, Label, SelectLabel } from './components';
 import moment from 'moment';
 import { presetValToTimestamp } from './helpers/presetValToTimestamp';
 
@@ -149,8 +149,10 @@ export const WidgetCfgMaps = new Map([
     {
       component: NumberRange,
       props: {},
-      handlerProps(props, { valueList, multiple } = {}) {
-        const Props = { ...props, multiple };
+      handlerProps(props, { valueList, multiple, title, isQuick } = {}) {
+        const placeholderS = isQuick ? '最小值' : `起始${title}`;
+        const placeholderE = isQuick ? '最大值' : `截止${title}`;
+        const Props = { ...props, multiple, placeholderS, placeholderE };
         if (Array.isArray(valueList)) Props.options = valueList.map(({ value, label }) => ({ value, label }));
         return Props;
       },
@@ -212,7 +214,8 @@ export const WidgetCfgMaps = new Map([
       component: DateRangeQuick,
       props: {},
       handlerProps(props, { fieldType } = {}) {
-        const Props = { ...props, placeholderS: '开始时间', placeholderE: '结束时间', fieldType };
+        let str = fieldType === 'DATE' ? '日期' : '时间';
+        const Props = { ...props, placeholderS: `开始${str}`, placeholderE: `结束${str}`, fieldType };
         return Props;
       },
       setDefaultValue: SetDefVal
@@ -241,5 +244,45 @@ export const WidgetCfgMaps = new Map([
       },
       setDefaultValue: SetDefVal
     }
-  ]
+  ],
+  [
+    WidgetTypeEnums.LABEL,
+    {
+      component: Label,
+      props: {},
+      handlerProps(props) {
+        const Props = { ...props };
+        return Props;
+      },
+      setDefaultValue(defaultValue, defValueUnit) {
+        if (defaultValue && Array.isArray(defaultValue)) {
+          return defaultValue.join('|#|');
+        }
+        return defaultValue;
+      }
+    }
+  ],
+  [
+    WidgetTypeEnums.SELECT_LABEL,
+    {
+      component: SelectLabel,
+      props: {
+        allowClear: true,
+        showSearch: true,
+        mode: 'default',
+        showArrow: true
+      },
+      handlerProps(props, { multiple, title } = {}) {
+        const Props = { ...props, placeholder: `请选择${title}` };
+        Props.mode = multiple ? 'multiple' : 'default';
+        return Props;
+      },
+      setDefaultValue(defaultValue, defValueUnit) {
+        if (defaultValue && Array.isArray(defaultValue)) {
+          return defaultValue.join('|#|');
+        }
+        return defaultValue;
+      }
+    }
+  ],
 ]);

package/packages/table-filter/src/components/search-modal/set-classification.vue

@@ -191,7 +191,7 @@ export default {
       });
     },
     // 保存列表搜索分类
-    async saveAdd(params) {
+    async saveAdd(params, isValidConObj, config = {}) {
       try {
         Object.assign(params, {
           tableId: this.$attrs.tableId,
@@ -202,9 +202,13 @@ export default {
         let res = await this.handleGetConfigApi(params, 'requestSaveTableCondiTion');
         if (!res) return;
         let searchFilter = this.$refs.searchFilter;
+        let {cancelSaveAdd} = config
         if (searchFilter) {
           searchFilter.cancelSaveAdd();
         }
+        if(!searchFilter && typeof cancelSaveAdd === 'function') {
+          cancelSaveAdd()
+        }
         this.$emit('saveGetTableCondiTionList');
         this.addVisible = false;
       } catch (error) {

package/packages/table-filter/src/mixins/renderWidget.js

@@ -10,7 +10,7 @@ function randomkey() {
 }
 
 // 外层换行
-const BlockEle = [WidgetTypeEnums.CHECKBOX_GROUP, WidgetTypeEnums.DATE_RANGE_QUICK];
+const BlockEle = [WidgetTypeEnums.CHECKBOX_GROUP, WidgetTypeEnums.DATE_RANGE_QUICK, WidgetTypeEnums.CHECKBOX_GROUP, WidgetTypeEnums.LABEL];
 
 export default {
   methods: {

package/packages/table-filter/src/quick-search/QuickSearch.vue

@@ -49,12 +49,12 @@
                   <div class="edit-label">{{ k }}：</div>
 
                   <div
-                    class="edit-content quickSearch_label-container"
+                    class="quickSearch_label-container"
                     :class="{
                       'label-container-height': !v.isUnfold && v.itemList && v.isShowBtn
                     }"
                   >
-                    <div class="label-content" v-resize="el => onResize(el, v)">
+                    <div class="quick-label-content" v-resize="el => onResize(el, v)">
                       <a-checkable-tag
                         v-for="(v, i) in v.itemList"
                         v-model="v.isSelect"
@@ -62,7 +62,7 @@
                         :key="i"
                         :style="handleLabelColor(v)"
                       >
-                        <a-tooltip placement="topLeft">
+                        <a-tooltip placement="topLeft" :mouseEnterDelay="0.5" :mouseLeaveDelay="0">
                           <template slot="title">
                             <span>{{ v.labelName }}</span>
                           </template>
@@ -393,8 +393,8 @@
                   <slot v-if="item.labelObj && Object.keys(item.labelObj || {}).length > 0">
                     <div v-for="(v, k) in item.labelObj" :key="k" class="edit-label-content">
                       <div class="edit-label">{{ k }}：</div>
-                      <div class="edit-content">
-                        <div class="label-content">
+                      <div class="quickSearch_label-container">
+                        <div class="quick-label-content">
                           <a-checkable-tag
                             v-for="(v, i) in v.itemList"
                             v-model="v.isSelect"
@@ -402,7 +402,7 @@
                             :key="i"
                             :class="['label-tag-' + handleLabelColorClass(v)]"
                           >
-                            <a-tooltip placement="topLeft">
+                            <a-tooltip placement="topLeft" :mouseEnterDelay="0.5" :mouseLeaveDelay="0">
                               <template slot="title">
                                 <span>{{ v.labelName }}</span>
                               </template>
@@ -722,6 +722,8 @@ import TextOverTooltip from "../components/TextOverTooltip";
 import CheckboxGroup from '../components/checkbox-group/CheckboxGroup.vue'
 import svgIcon from '@/component/svg/index.vue';
 
+const baseActiveColor = 'rgb(85, 133, 245)';
+
 export default create({
   name: "quick-search",
   mixins: [durationMixin, $utils, filterApiFn, tableSearchCon, renderWidget],
@@ -913,8 +915,14 @@ export default create({
     filterOption(...arg) {
       return utils.filterOption(...arg);
     },
-    handleLabelColor(...arg) {
-      return utils.handleLabelColor(...arg);
+    handleLabelColor(item) {
+      if('backgroundColor' in item) {
+        return item.isSelect ? {
+        background: item.backgroundColor || baseActiveColor,
+        borderColor: item.backgroundColor || baseActiveColor
+      } : {}
+      }
+      return utils.handleLabelColor(item);
     },
     init() {
       this.quickSearch = [];
@@ -1777,13 +1785,18 @@ export default create({
 
     /* 获取 label */
     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 });
     },
 
     async handleSetLabelOptions(labelType, el) {
       let labelObj = {};
-      let labelList = await this.handleGetConfigApi(labelType, 'requestedLabel');
+      let res = (await this.handleRequestedLabel(labelType)) || {};
+      let labelList = res?.data?.map?.rows ||[]
       labelList.forEach(n => {
         this.$set(n, 'isSelect', false);
         if (labelObj[n.typeName]) {
@@ -2069,14 +2082,46 @@ export default create({
       line-height: 32px;
       padding-left: 0;;
     }
+    .quickSearch_label-container{
+      padding: 0;
+    }
     .label-container-height {
       overflow: hidden;
-      // width: 380px;
       height: 74px;
       flex: none;
     }
-    .edit-content {
-      padding: 0;
+    .quick-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;
+      }
     }
     .label-unfold-btn {
       margin: 8px 0;