cnhis-design-vue 2.1.79 → 2.1.80

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

@@ -1,29 +1,34 @@
 export const WidgetTypeEnums = {
-  INPUT_NUMBER: "NUMBER",
-  INPUT: "TEXT",
-  SELECT: "SELECT",
-  DATE: "DATE",
-  DATE_TIME: "DATETIME",
+  INPUT_NUMBER: 'NUMBER',
+  INPUT: 'TEXT',
+  SELECT: 'SELECT',
+  SELECT_DYNAMIC: 'SELECT_DYNAMIC',
+  DATE: 'DATE',
+  DATE_TIME: 'DATETIME',
   CHECKBOX_GROUP: 'CHECKBOX_GROUP',
-}
+  INPUT_NUMBER_RANGE: 'NUMBER_RANGE',
+  DATE_RANGE: 'DATE_RANGE',
+  DATETIME_RANGE: 'DATETIME_RANGE',
+  DATE_RANGE_QUICK: 'DATE_RANGE_QUICK'
+};
 
 export const DatePresetValEnums = {
-  CUSTOM: "CUSTOM", // 自定义输入，特殊处理
+  CUSTOM: 'CUSTOM', // 自定义输入，特殊处理
 
-  NOW: "NOW",
-  TODAY: "TODAY",
-  TODAY_START: "TODAY_START",
-  TODAY_END: "TODAY_END",
-  TOMORROW: "TOMORROW",
-  TOMORROW_START: "TOMORROW_START",
-  TOMORROW_END: "TOMORROW_END",
-  YESTERDAY: "YESTERDAY",
-  YESTERDAY_START: "YESTERDAY_START",
-  YESTERDAY_END: "YESTERDAY_END",
+  NOW: 'NOW',
+  TODAY: 'TODAY',
+  TODAY_START: 'TODAY_START',
+  TODAY_END: 'TODAY_END',
+  TOMORROW: 'TOMORROW',
+  TOMORROW_START: 'TOMORROW_START',
+  TOMORROW_END: 'TOMORROW_END',
+  YESTERDAY: 'YESTERDAY',
+  YESTERDAY_START: 'YESTERDAY_START',
+  YESTERDAY_END: 'YESTERDAY_END',
 
-  WEEK_START: "THIS_WEEK_START",
-  WEEK_END: "THIS_WEEK_END",
+  WEEK_START: 'THIS_WEEK_START',
+  WEEK_END: 'THIS_WEEK_END',
 
-  MONTH_START: "THIS_MONTH_START",
-  MONTH_END: "THIS_MONTH_END",
-};
+  MONTH_START: 'THIS_MONTH_START',
+  MONTH_END: 'THIS_MONTH_END'
+};

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

@@ -1,16 +1,28 @@
 <script type="text/jsx">
 import { WidgetTypeEnums } from './enums';
 import { WidgetCfgMaps } from './widgetCfgMaps';
+import { filterApiFn } from '../../mixins/mixins';
+import dynamicMethod from './mixins/dynamic-method'
+import { debounce } from "lodash";
 
 const UseSelfWidth = [WidgetTypeEnums.DATE, WidgetTypeEnums.DATE_TIME, WidgetTypeEnums.CHECKBOX_GROUP];
+const unsetMinWidth = [WidgetTypeEnums.DATE, WidgetTypeEnums.DATE_TIME, WidgetTypeEnums.DATE_RANGE, WidgetTypeEnums.DATETIME_RANGE, WidgetTypeEnums.INPUT_NUMBER_RANGE];
 
 export default {
   props: {
     cfg: {
       type: Object,
       required: true,
-    }
+    },
+    source: {
+      type: String
+    },
+    filterApiConfig: {
+      type: Object,
+      default: () => ({})
+    },
   },
+  mixins: [filterApiFn, dynamicMethod],
   model: {
     event: "update:value",
     prop: "value",
@@ -35,20 +47,35 @@ export default {
       this.$emit("outFilterChange");
     },
     getEleWidth(cfg) {
+      if(this.source === 'quickSearch') return '100%';
       const { widgetType } = cfg;
       if (UseSelfWidth.includes(widgetType)) return;
-      return `${cfg.advanceColWidth||200}px`;
+      let defW = 200
+      if(cfg?.fieldType?.includes?.('DATE') && cfg?.widgetCfg?.rangeFilter) {
+        defW = 350
+      }
+      return `${cfg.advanceColWidth||defW}px`;
+    },
+    getEleMinWidth(cfg){
+      if(this.source !== 'quickSearch') return `${cfg.advanceColWidth|| 195}px`;
+      const { widgetType } = cfg;
+      if (!unsetMinWidth.includes(widgetType)) return;
+      return `unset`;
     },
     initComponentProps(cfg) {
-      const { widgetType, alias, title, placeholder: customPlaceholder, widgetCfg } = cfg;
+      const { widgetType, alias, title, placeholder: customPlaceholder, widgetCfg, fieldType } = cfg;
       const { props, handlerProps } = WidgetCfgMaps.get(widgetType);
       let Props = { ...props };
       if (handlerProps) {
-        Props = handlerProps(Props, { ...widgetCfg, title: alias || title });
+        Props = handlerProps(Props, { ...widgetCfg, title: alias || title, fieldType });
       }
       if (customPlaceholder) {
         Props.placeholder = customPlaceholder;
       }
+      if(widgetType === 'SELECT_DYNAMIC') {
+        Props.dropdownVisibleChangeRender = this.dropdownVisibleChangeRender;
+        Props.handleWordBookSearchRender = this.handleWordBookSearchRender;
+      }
       this.initialProps = Props;
       if (Props.value) {
         this.valueCp = Props.value;
@@ -62,6 +89,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;
@@ -77,10 +105,15 @@ export default {
         };
       }, {});
 
-      return <component style={{ width: this.getEleWidth(cfg), ...style }} attrs={{...props}} componentCfg={{...cfg}} on={{...EventsBySearch}} vModel={this.valueCp} />
+      const setCfgCon = (val) => {
+        this.cfg.con = val;
+      }
+      let width = this.getEleWidth(cfg);
+      return <component attrs={{...props, source: this.source, componentCfg: this.cfg}} style={{ width, minWidth: this.getEleMinWidth(cfg), ...style }} on={{...EventsBySearch, setCfgCon}} vModel={this.valueCp} />
     }
   },
   created() {
+    this.handleWordBookSearchRender = debounce(this.handleWordBookSearchDef, 300)
     this.initComponentProps(this.cfg);
   },
   render() {

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

@@ -0,0 +1,158 @@
+import vexutils from '@/utils/vexutils';
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {
+    wordbookDataParamsRender(dynamicOptionInfo) {
+      let { dataSourceId, dataSourceType = 'WORDBOOK', filterKeys, autograph, defaultParams } = dynamicOptionInfo;
+      if (Array.isArray(filterKeys)) {
+        filterKeys = JSON.stringify(filterKeys);
+      }
+      const params = {
+        wordbookId: dataSourceId,
+        wordbookType: dataSourceType,
+        fieldKeys: filterKeys,
+        autograph
+      };
+      return params;
+    },
+    handleRenderFirstDef(item, rows) {
+      let { explicitDefaultVal, multiple } = item.widgetCfg;
+      let needSet = !item.initSearch && explicitDefaultVal;
+      if (!needSet) return;
+      let df = explicitDefaultVal;
+      let defval = [];
+      if (df === 'firstOption') {
+        let [v, k] = rows;
+        v && (defval = [v.myName]);
+      } else {
+        let f = rows.find(v => v.myName.includes(df));
+        if (f) {
+          defval = [f.myName];
+        }
+      }
+      item.value = multiple ? [...defval] : defval[0];
+    },
+    getWordbookDataRender(params, row) {
+      this.$set(row, 'fetchingWordbook', true);
+      return this.handleGetConfigApi(params, 'requestGetWordbookData')
+        .then(res => {
+          this.$set(row, 'fetchingWordbook', false);
+          if (typeof res.data === 'object') {
+            res.data.reqParams = params;
+          }
+          return res;
+        })
+        .catch(() => {
+          this.$set(row, 'fetchingWordbook', false);
+        });
+    },
+
+    formatWordbookDataRender(item, data, params) {
+      let searchPageConfig = {
+          page: 0,
+          hasNextPage: false,
+          isRequest: true,
+          keyword: params?.keyword || undefined,
+          asyncCount: undefined
+        },
+        resArr = [];
+      if (data && data.result === 'SUCCESS') {
+        let reqParams = data?.reqParams || {};
+        let { showKeys, valueKey } = item?.widgetCfg?.dynamicOptionInfo || {};
+        showKeys = Array.isArray(showKeys) ? showKeys : [showKeys];
+        let { page, hasNextPage, fieldList, rows = [] } = data.map;
+
+        // columnName title
+        // showKeys是 columnName 需要从fieldList中匹配住中文
+        let _showKeys_ = [];
+        showKeys.forEach(v => {
+          let mItem = fieldList.find(k => k.columnName === v);
+          if (mItem) {
+            _showKeys_.push(mItem.title);
+          }
+        });
+        this.$set(item, '_showKeys_', _showKeys_);
+
+        searchPageConfig = Object.assign(item.searchPageConfig || {}, {
+          page,
+          hasNextPage,
+          isRequest: true,
+          keyword: params?.keyword || undefined,
+          asyncCount: reqParams?.asyncCount || undefined
+        });
+        let rowsArr = rows.map(row => {
+          let showKeysStr = [];
+          // 取值是value, 展示是change_text
+          let valueKeyN = `_${valueKey}_`;
+          for (let key in row) {
+            let showVal = vexutils.stringToValue(row[key], 'change_text');
+            if (key === valueKey) {
+              row[valueKeyN] = vexutils.stringToValue(row[key]);
+            }
+            row[key] = showVal;
+          }
+          showKeys.forEach(s => {
+            // let str = vexutils.stringToValue(row[s]);
+            showKeysStr.push(row[s]);
+          });
+          // let name = vexutils.stringToValue(row[valueKey]);
+          let name = row[valueKeyN];
+          // 保存的时候值会变成字符串, 如果是数字的话回显会出问题, 这里全部处理成字符串
+          if (typeof name === 'number') {
+            name = String(name);
+          }
+          return Object.assign(row, {
+            myName: name,
+            _show_title: showKeysStr.join(' ')
+          });
+        });
+        // 数组对象去重
+        let obj = {};
+        resArr = rowsArr.reduce((cur, next) => {
+          obj[next.myName] ? '' : (obj[next.myName] = true && cur.push(next));
+          return cur;
+        }, []);
+      } else {
+        this.$set(item, '_showKeys_', []);
+      }
+      return {
+        rows: resArr,
+        searchPageConfig
+      };
+    },
+    wordbookDataMethodRender(params, item) {
+      this.getWordbookDataRender(params, item).then(({ data }) => {
+        let { rows, searchPageConfig } = this.formatWordbookDataRender(item, data, params);
+        this.handleRenderFirstDef(item, rows);
+        this.$set(item, 'dataSource', rows);
+        this.$set(item, 'searchPageConfig', searchPageConfig);
+      });
+    },
+    async getWordbookFirstOptionRender(item) {
+      try {
+        let params = this.wordbookDataParamsRender(item.widgetCfg.dynamicOptionInfo);
+        let { data } = (await this.getWordbookDataRender(params, item)) || {};
+        let { rows, searchPageConfig } = this.formatWordbookDataRender(item, data, params);
+        this.handleRenderFirstDef(item, rows);
+        this.$set(item, 'dataSource', rows);
+        this.$set(item, 'searchPageConfig', searchPageConfig);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    dropdownVisibleChangeRender(open, item) {
+      if (!open) return;
+      let params = this.wordbookDataParamsRender(item.widgetCfg.dynamicOptionInfo);
+      this.wordbookDataMethodRender(params, item);
+    },
+    handleWordBookSearchDef(value, item, config = {}) {
+      let params = this.wordbookDataParamsRender(item.widgetCfg.dynamicOptionInfo);
+      let rp = { keyword: value, ...params, ...config };
+      this.wordbookDataMethodRender(rp, item);
+    }
+  }
+};

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

@@ -1,92 +1,99 @@
 import { WidgetTypeEnums, DatePresetValEnums } from './enums';
 import { InputNumber, Input, DatePicker } from 'ant-design-vue';
-import { CheckboxGroup, Select } from './components';
+import { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic } from './components';
 import moment from 'moment';
 import { presetValToTimestamp } from './helpers/presetValToTimestamp';
 
-const SetDefVal = (defaultValue) => defaultValue
+const SetDefVal = defaultValue => defaultValue;
 
 export const WidgetCfgMaps = new Map([
   [
-    WidgetTypeEnums.INPUT_NUMBER, 
+    WidgetTypeEnums.INPUT_NUMBER,
     {
       component: InputNumber,
       props: {
-        allowClear: true,
+        allowClear: true
       },
-      eventsBySearch: [{
-        name: "keydown",
-        handler(e, search) {
-          if (e.key === 'Enter') {
-            search();
+      eventsBySearch: [
+        {
+          name: 'keydown',
+          handler(e, search) {
+            if (e.key === 'Enter') {
+              search();
+            }
           }
         }
-      }],
+      ],
       handlerProps(props, { title } = {}) {
-        const Props = { ...props, placeholder: `输入${title}` };
+        const Props = { ...props, placeholder: `请输入${title}` };
         return Props;
       },
-      setDefaultValue: SetDefVal,
+      setDefaultValue: SetDefVal
     }
   ],
   [
-    WidgetTypeEnums.INPUT, 
+    WidgetTypeEnums.INPUT,
     {
       component: Input,
       props: {
-        allowClear: true,
+        allowClear: true
       },
-      eventsBySearch: [{
-        name: "keydown",
-        handler(e, search) {
-          if (e.key === 'Enter') {
-            search();
+      eventsBySearch: [
+        {
+          name: 'keydown',
+          handler(e, search) {
+            if (e.key === 'Enter') {
+              search();
+            }
           }
         }
-      }],
+      ],
       handlerProps(props, { title } = {}) {
-        const Props = { ...props, placeholder: `搜索${title}` };
+        const Props = { ...props, placeholder: `请输入${title}` };
         return Props;
       },
-      setDefaultValue: SetDefVal,
+      setDefaultValue: SetDefVal
     }
   ],
   [
-    WidgetTypeEnums.SELECT, 
+    WidgetTypeEnums.SELECT,
     {
       component: Select,
       props: {
         allowClear: true,
         options: [],
         showSearch: true,
-        mode: "default",
-        showArrow: true,
-      },
-      eventsBySearch: [{
-        name: "change",
-        handler(e, search, props) {
-          const { mode } = props;
-          if (mode !== 'multiple') {
-            search();
+        mode: 'default',
+        showArrow: true
+      },
+      eventsBySearch: [
+        {
+          name: 'change',
+          handler(e, search, props) {
+            const { mode } = props;
+            if (mode !== 'multiple') {
+              search();
+            }
           }
         }
-      }],
+      ],
       handlerProps(props, { valueList, multiple, title } = {}) {
         const Props = { ...props, placeholder: `请选择${title}` };
         if (Array.isArray(valueList)) Props.options = valueList.map(({ value, label }) => ({ value, label }));
-        if (multiple) Props.mode = "multiple";
+        if (multiple) Props.mode = 'multiple';
         return Props;
       },
-      setDefaultValue: SetDefVal,
+      setDefaultValue: SetDefVal
     }
   ],
+
   [
-    WidgetTypeEnums.DATE, 
+    WidgetTypeEnums.DATE,
     {
       component: DatePicker,
       props: {
         allowClear: true,
-        valueFormat: "YYYY-MM-DD HH:mm:ss"
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
       },
       handlerProps(props, { title } = {}) {
         const Props = { ...props, placeholder: `请选择${title}` };
@@ -94,20 +101,20 @@ export const WidgetCfgMaps = new Map([
       },
       setDefaultValue(defaultValue, defValueUnit) {
         if (defValueUnit && defValueUnit !== DatePresetValEnums.CUSTOM) {
-          return presetValToTimestamp(defValueUnit, "YYYY-MM-DD HH:mm:ss");
+          return presetValToTimestamp(defValueUnit, 'YYYY-MM-DD HH:mm:ss');
         }
         return defaultValue;
       }
     }
   ],
   [
-    WidgetTypeEnums.DATE_TIME, 
+    WidgetTypeEnums.DATE_TIME,
     {
       component: DatePicker,
       props: {
         allowClear: true,
-        valueFormat: "YYYY-MM-DD HH:mm:ss",
-        "show-time": { defaultValue: moment('00:00:00', 'HH:mm:ss') }
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        'show-time': { defaultValue: moment('00:00:00', 'HH:mm:ss') }
       },
       handlerProps(props, { title } = {}) {
         const Props = { ...props, placeholder: `请选择${title}` };
@@ -115,7 +122,7 @@ export const WidgetCfgMaps = new Map([
       },
       setDefaultValue(defaultValue, defValueUnit) {
         if (defValueUnit && defValueUnit !== DatePresetValEnums.CUSTOM) {
-          return presetValToTimestamp(defValueUnit, "YYYY-MM-DD HH:mm:ss");
+          return presetValToTimestamp(defValueUnit, 'YYYY-MM-DD HH:mm:ss');
         }
         return defaultValue;
       }
@@ -127,14 +134,112 @@ export const WidgetCfgMaps = new Map([
       component: CheckboxGroup,
       props: {},
       style: {
-        "line-height": "32px"
+        'line-height': '32px'
+      },
+      handlerProps(props, { valueList, multiple } = {}) {
+        const Props = { ...props, multiple };
+        if (Array.isArray(valueList)) Props.options = valueList.map(({ value, label }) => ({ value, label }));
+        return Props;
       },
+      setDefaultValue: SetDefVal
+    }
+  ],
+  [
+    WidgetTypeEnums.INPUT_NUMBER_RANGE,
+    {
+      component: NumberRange,
+      props: {},
       handlerProps(props, { valueList, multiple } = {}) {
         const Props = { ...props, multiple };
         if (Array.isArray(valueList)) Props.options = valueList.map(({ value, label }) => ({ value, label }));
         return Props;
       },
-      setDefaultValue: SetDefVal,
+      setDefaultValue: SetDefVal
+    }
+  ],
+  [
+    WidgetTypeEnums.DATE_RANGE,
+    {
+      component: DatePicker.RangePicker,
+      props: {
+        allowClear: true,
+        valueFormat: 'YYYY-MM-DD'
+      },
+      handlerProps(props, { title } = {}) {
+        const Props = { ...props, placeholder: [`起始${title}`, `截止${title}`] };
+        return Props;
+      },
+      setDefaultValue(defaultValue, defValueUnit) {
+        if (defValueUnit && defValueUnit !== DatePresetValEnums.CUSTOM) {
+          let resDate = presetValToTimestamp(defValueUnit, 'YYYY-MM-DD');
+          return [resDate, resDate];
+        }
+        if (!defaultValue || (defaultValue && !Array.isArray(defaultValue))) {
+          return [];
+        }
+        return defaultValue;
+      }
+    }
+  ],
+  [
+    WidgetTypeEnums.DATETIME_RANGE,
+    {
+      component: DatePicker.RangePicker,
+      props: {
+        allowClear: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        'show-time': { defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }
+      },
+      handlerProps(props, { title } = {}) {
+        const Props = { ...props, placeholder: [`起始${title}`, `截止${title}`] };
+        return Props;
+      },
+      setDefaultValue(defaultValue, defValueUnit) {
+        if (defValueUnit && defValueUnit !== DatePresetValEnums.CUSTOM) {
+          let resDate = presetValToTimestamp(defValueUnit, 'YYYY-MM-DD HH:mm:ss');
+          return [resDate, resDate];
+        }
+        if (!defaultValue || (defaultValue && !Array.isArray(defaultValue))) {
+          return [];
+        }
+        return defaultValue;
+      }
+    }
+  ],
+  [
+    WidgetTypeEnums.DATE_RANGE_QUICK,
+    {
+      component: DateRangeQuick,
+      props: {},
+      handlerProps(props, { fieldType } = {}) {
+        const Props = { ...props, placeholderS: '开始时间', placeholderE: '结束时间', fieldType };
+        return Props;
+      },
+      setDefaultValue: SetDefVal
+    }
+  ],
+  [
+    WidgetTypeEnums.SELECT_DYNAMIC,
+    {
+      component: SelectDynamic,
+      props: {},
+      eventsBySearch: [
+        {
+          name: 'change',
+          handler(e, search, props) {
+            const { mode } = props;
+            if (mode !== 'multiple') {
+              search();
+            }
+          }
+        }
+      ],
+      handlerProps(props, { multiple, title } = {}) {
+        const Props = { ...props, placeholder: `请选择${title}` };
+        Props.mode = multiple ? 'multiple' : 'default';
+        return Props;
+      },
+      setDefaultValue: SetDefVal
     }
   ]
-]);
+]);

package/packages/table-filter/src/components/search-filter/SearchFilter.vue

@@ -42,6 +42,7 @@
 <script>
 import {Modal,Icon} from 'ant-design-vue'
 import SearchCondition from "../search-condition/SearchCondition.vue";
+import svgIcon from '@/component/svg/index.vue';
 export default {
   name: "SearchFilter",
   props: {
@@ -69,7 +70,8 @@ export default {
   components: {
     SearchCondition,
     AModal:Modal,
-    [Icon.name]:Icon
+    [Icon.name]:Icon,
+    svgIcon
   },
   watch: {
     visible(value) {