cnhis-design-vue 2.1.66 → 2.1.69

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

@@ -0,0 +1,68 @@
+import { DatePresetValEnums } from '../enums';
+import moment from 'moment';
+
+const Maps = new Map([
+  [
+    DatePresetValEnums.NOW,
+    () => moment(),
+  ],
+  [
+    DatePresetValEnums.TODAY,
+    () => moment().startOf("day"),
+  ],
+  [
+    DatePresetValEnums.TODAY_START,
+    () => moment().startOf("day")
+  ],
+  [
+    DatePresetValEnums.TODAY_END,
+    () => moment().endOf("day")
+  ],
+  [
+    DatePresetValEnums.TOMORROW,
+    () => moment().add(1, "days").startOf("day"),
+  ],
+  [
+    DatePresetValEnums.TOMORROW_START,
+    () => moment().add(1, "days").startOf("day")
+  ],
+  [
+    DatePresetValEnums.TOMORROW_END,
+    () => moment().add(1, "days").endOf("day")
+  ],
+  [
+    DatePresetValEnums.YESTERDAY,
+    () => moment().subtract(1, "days").startOf("day"),
+  ],
+  [
+    DatePresetValEnums.YESTERDAY_START,
+    () => moment().subtract(1, "days").startOf("day")
+  ],
+  [
+    DatePresetValEnums.YESTERDAY_END,
+    () => moment().subtract(1, "days").endOf("day")
+  ],
+  [
+    DatePresetValEnums.WEEK_START,
+    () => moment().startOf("week")
+  ],
+  [
+    DatePresetValEnums.WEEK_END,
+    () => moment().endOf("week")
+  ],
+  [
+    DatePresetValEnums.MONTH_START,
+    () => moment().startOf("month")
+  ],
+  [
+    DatePresetValEnums.MONTH_END,
+    () => moment().endOf("month")
+  ],
+])
+
+export const presetValToTimestamp = (presetVal, format = "x") => {
+  if (!Maps.has(presetVal)) return;
+  const fun = Maps.get(presetVal);
+  const val = fun().format(format);
+  return format === "x" || format === "X" ? Number(val) : val;
+};

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

@@ -0,0 +1,92 @@
+<script type="text/jsx">
+import { WidgetTypeEnums } from './enums';
+import { WidgetCfgMaps } from './widgetCfgMaps';
+
+const UseSelfWidth = [WidgetTypeEnums.DATE, WidgetTypeEnums.DATE_TIME, WidgetTypeEnums.CHECKBOX_GROUP];
+
+export default {
+  props: {
+    cfg: {
+      type: Object,
+      required: true,
+    }
+  },
+  model: {
+    event: "update:value",
+    prop: "value",
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        this.$emit("update:value", val);
+      },
+      get() {
+        return this.cfg.value;
+      }
+    }
+  },
+  data() {
+    return {
+      initialProps: {},
+    }
+  },
+  methods: {
+    search() {
+      this.$emit("outFilterChange");
+    },
+    getEleWidth(cfg) {
+      const { widgetType } = cfg;
+      if (UseSelfWidth.includes(widgetType)) return;
+      return `${cfg.advanceColWidth||200}px`;
+    },
+    initComponentProps(cfg) {
+      const { widgetType, alias, title, placeholder: customPlaceholder, widgetCfg } = cfg;
+      const { props, handlerProps } = WidgetCfgMaps.get(widgetType);
+      let Props = { ...props };
+      if (handlerProps) {
+        Props = handlerProps(Props, { ...widgetCfg, title: alias || title });
+      }
+      if (customPlaceholder) {
+        Props.placeholder = customPlaceholder;
+      }
+      this.initialProps = Props;
+      if (Props.value) {
+        this.valueCp = Props.value;
+      }
+    },
+    generateWidget(cfg) {
+      const { widgetType } = cfg;
+      if (!WidgetCfgMaps.has(widgetType)) {
+        return null;
+      }
+      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;
+        let eventHandler = this.search;
+        if (handler) {
+          eventHandler = (e) => {
+            handler(e, this.search, props);
+          };
+        }
+        return {
+          ...evts,
+          [name]: eventHandler,
+        };
+      }, {});
+
+      return <component style={{ width: this.getEleWidth(cfg), ...style }} attrs={{...props}} componentCfg={{...cfg}} on={{...EventsBySearch}} vModel={this.valueCp} />
+    }
+  },
+  created() {
+    this.initComponentProps(this.cfg);
+  },
+  render() {
+    return this.generateWidget(this.cfg);
+  },
+}
+</script>
+<style lang='less' scoped>
+</style>

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

@@ -0,0 +1,140 @@
+import { WidgetTypeEnums, DatePresetValEnums } from './enums';
+import { InputNumber, Input, DatePicker } from 'ant-design-vue';
+import { CheckboxGroup, Select } from './components';
+import moment from 'moment';
+import { presetValToTimestamp } from './helpers/presetValToTimestamp';
+
+const SetDefVal = (defaultValue) => defaultValue
+
+export const WidgetCfgMaps = new Map([
+  [
+    WidgetTypeEnums.INPUT_NUMBER, 
+    {
+      component: InputNumber,
+      props: {
+        allowClear: true,
+      },
+      eventsBySearch: [{
+        name: "keydown",
+        handler(e, search) {
+          if (e.key === 'Enter') {
+            search();
+          }
+        }
+      }],
+      handlerProps(props, { title } = {}) {
+        const Props = { ...props, placeholder: `输入${title}` };
+        return Props;
+      },
+      setDefaultValue: SetDefVal,
+    }
+  ],
+  [
+    WidgetTypeEnums.INPUT, 
+    {
+      component: Input,
+      props: {
+        allowClear: true,
+      },
+      eventsBySearch: [{
+        name: "keydown",
+        handler(e, search) {
+          if (e.key === 'Enter') {
+            search();
+          }
+        }
+      }],
+      handlerProps(props, { title } = {}) {
+        const Props = { ...props, placeholder: `搜索${title}` };
+        return Props;
+      },
+      setDefaultValue: SetDefVal,
+    }
+  ],
+  [
+    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();
+          }
+        }
+      }],
+      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";
+        return Props;
+      },
+      setDefaultValue: SetDefVal,
+    }
+  ],
+  [
+    WidgetTypeEnums.DATE, 
+    {
+      component: DatePicker,
+      props: {
+        allowClear: true,
+        valueFormat: "YYYY-MM-DD HH:mm:ss"
+      },
+      handlerProps(props, { title } = {}) {
+        const Props = { ...props, placeholder: `请选择${title}` };
+        return Props;
+      },
+      setDefaultValue(defaultValue, defValueUnit) {
+        if (defValueUnit && defValueUnit !== DatePresetValEnums.CUSTOM) {
+          return presetValToTimestamp(defValueUnit, "YYYY-MM-DD HH:mm:ss");
+        }
+        return defaultValue;
+      }
+    }
+  ],
+  [
+    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') }
+      },
+      handlerProps(props, { title } = {}) {
+        const Props = { ...props, placeholder: `请选择${title}` };
+        return Props;
+      },
+      setDefaultValue(defaultValue, defValueUnit) {
+        if (defValueUnit && defValueUnit !== DatePresetValEnums.CUSTOM) {
+          return presetValToTimestamp(defValueUnit, "YYYY-MM-DD HH:mm:ss");
+        }
+        return defaultValue;
+      }
+    }
+  ],
+  [
+    WidgetTypeEnums.CHECKBOX_GROUP,
+    {
+      component: CheckboxGroup,
+      props: {},
+      style: {
+        "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,
+    }
+  ]
+]);

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

@@ -2,7 +2,7 @@
   <div class="search">
     <TableModal
       v-bind="$attrs"
-      :dataSource="conditionList"
+      :dataSource="curConditionList"
       :visibleIn="oneVisible"
       @handleOk="oneSave"
       @close="oneCancel"
@@ -18,20 +18,26 @@
         <a-button type="primary" @click="add">新增</a-button>
       </template>
     </TableModal>
-    <SearchFilter
-      ref="searchFilter"
-      v-bind="$attrs"
-      :visible="addVisible"
-      @saveAdd="saveAdd"
-      @cancelSaveAdd="cancelSaveAdd"
-      :conditionList="conditionList"
-      :actionList_prop="actionList_prop"
-      :searchFieldList="newSearchFieldList"
-      :isInSearch="true"
-      :isCnHis="true"
-      :showCompareField="true"
-      :filterApiConfig="filterApiConfig"
-    />
+    <slot 
+      name="searchCondition" 
+      :attrs="{ ...$attrs, visible: addVisible, loading: saveLoading, conditionList, actionList_prop, searchFieldList, isInSearch: true, isCnHis: true, showCompareField: true, filterApiConfig }" 
+      :listeners="{ saveAdd, cancelSaveAdd }" 
+      ref="searchFilter">
+      <SearchFilter
+        ref="searchFilter"
+        v-bind="$attrs"
+        :visible="addVisible"
+        @saveAdd="saveAdd"
+        @cancelSaveAdd="cancelSaveAdd"
+        :conditionList="curConditionList"
+        :actionList_prop="actionList_prop"
+        :searchFieldList="newSearchFieldList"
+        :isInSearch="true"
+        :isCnHis="true"
+        :showCompareField="true"
+        :filterApiConfig="filterApiConfig"
+      />
+    </slot>
   </div>
 </template>
 
@@ -45,6 +51,7 @@ import { filterApiFn } from '~/table-filter/src/mixins/mixins';
 import TableModal from '../table-modal/TableModal';
 import SearchFilter from '../search-filter/SearchFilter';
 import { Button } from 'ant-design-vue';
+import vexutils from '@/utils/vexutils';
 export default {
   mixins: [filterApiFn],
   name: 'set-classification',
@@ -77,11 +84,12 @@ export default {
       searchName: this.searchDefName || '全部数据',
       confirmLoading: false,
       // oneVisible: false,
-      // conditionList: [],
+      curConditionList: [],
       addVisible: false,
       actionList_prop: {},
       selectKeys: [],
-      newSearchFieldList: []
+      newSearchFieldList: [],
+      saveLoading: false
     };
   },
   computed: {
@@ -109,6 +117,17 @@ export default {
           this.newSearchFieldList = val.filter(i => i.columnName !== 'operatorColumn');
         }
       }
+    },
+    addVisible: {
+      handler(val) {
+        if (!val) this.actionList_prop = {};
+      }
+    },
+    conditionList: {
+      immediate: true,
+      handler(value) {
+        this.curConditionList = vexutils.clone(value, true);
+      }
     }
   },
   methods: {
@@ -151,7 +170,7 @@ export default {
     },
     oneCancel() {
       this.setOneVisible(false);
-      this.conditionList.forEach(item => {
+      this.curConditionList.forEach(item => {
         item.checked = false;
       });
     },
@@ -160,20 +179,25 @@ export default {
       this.addVisible = true;
     },
     edit(item, name) {
-      this.addVisible = true;
       this.actionList_prop = Object.assign(item, { from: 'edit' });
+      this.$nextTick(() => {
+        this.addVisible = true;
+      });
     },
     copy(item, name) {
-      this.addVisible = true;
       this.actionList_prop = Object.assign(item, { from: 'copy' });
+      this.$nextTick(() => {
+        this.addVisible = true;
+      });
     },
     // 保存列表搜索分类
     async saveAdd(params) {
       try {
         Object.assign(params, {
           tableId: this.$attrs.tableId,
-          conditionList: JSON.stringify(this.conditionList)
+          conditionList: JSON.stringify(this.curConditionList)
         });
+        this.saveLoading = true;
         // TODO:api
         let res = await this.handleGetConfigApi(params, 'requestSaveTableCondiTion');
         if (!res) return;
@@ -185,6 +209,8 @@ export default {
         this.addVisible = false;
       } catch (error) {
         console.log(error);
+      } finally {
+        this.saveLoading = false;
       }
     },
     cancelSaveAdd() {
@@ -192,7 +218,7 @@ export default {
       this.actionList_prop = {};
     },
     changeData(data, checkedItem) {
-      this.conditionList = data;
+      this.curConditionList = data;
       this.checkedItem = checkedItem;
     },
     async delItem(checkedItem, name) {

package/packages/table-filter/src/components/table-modal/TableModal.vue

@@ -142,6 +142,7 @@ import { Modal, Icon, Button, Tooltip, Switch, Popconfirm } from 'ant-design-vue
 import { filterApiFn } from '~/table-filter/src/mixins/mixins';
 import draggable from 'vuedraggable';
 import svgIcon from '@/component/svg/index.vue';
+import vexutils from '@/utils/vexutils';
 export default {
   mixins: [filterApiFn],
   inject: { isShowResetButton: { from: 'root_isShowResetButton' } },
@@ -177,7 +178,7 @@ export default {
   },
   data() {
     return {
-      homeList: this.dataSource,
+      homeList: [],
       visible: this.visibleIn,
       isChangeWindow: false,
       modalWidth: this.type == 'other' ? '100%' : '860px',
@@ -191,10 +192,13 @@ export default {
     dataSource: {
       deep: false,
       handler(value) {
-        this.homeList = value;
+        this.homeList = vexutils.clone(value, true);
       }
     }
   },
+  mounted(){
+    this.homeList = vexutils.clone(this.dataSource, true);
+  },
   methods: {
     /**
      * 保存

package/packages/table-filter/src/const/dataOptions.js

@@ -5,28 +5,28 @@ export const dataOptions = {
     { con: 'YESTERDAY', title: '1.1.4.39', name: '昨天' },
     { con: 'THIS_WEEK', title: '1.1.4.40', name: '本周' },
     { con: 'NEXT_WEEK', title: '1.1.4.41', name: '下周' },
-    { con: 'UP_WEEK', title: '1.1.4.42', name: '上周' },
+    { con: 'LAST_WEEK', title: '1.1.4.42', name: '上周' },
     { con: 'THIS_MONTH', title: '1.1.4.43', name: '本月' },
     { con: 'NEXT_MONTH', title: '1.1.4.44', name: '下月' },
-    { con: 'UP_MONTH', title: '1.1.4.45', name: '上月' },
+    { con: 'LAST_MONTH', title: '1.1.4.45', name: '上月' },
     { con: 'THIS_SEASON', title: '1.1.4.46', name: '本季度' },
     { con: 'NEXT_SEASON', title: '1.1.4.47', name: '下季度' },
-    { con: 'UP_SEASON', title: '1.1.4.48', name: '上季度' },
+    { con: 'LAST_SEASON', title: '1.1.4.48', name: '上季度' },
     { con: 'THIS_YEAR', title: '1.1.4.49', name: '本年' },
     { con: 'NEXT_YEAR', title: '1.1.4.50', name: '下年' },
-    { con: 'UP_YEAR', title: '1.1.4.51', name: '上年' }
+    { con: 'LAST_YEAR', title: '1.1.4.51', name: '上年' }
   ],
   dateTeam2: [
     { con: 'TODAY', title: '1.1.4.37', name: '今天' },
     { con: 'YESTERDAY', title: '1.1.4.39', name: '昨天' },
     { con: 'THIS_WEEK', title: '1.1.4.40', name: '本周' },
-    { con: 'UP_WEEK', title: '1.1.4.42', name: '上周' },
+    { con: 'LAST_WEEK', title: '1.1.4.42', name: '上周' },
     { con: 'THIS_MONTH', title: '1.1.4.43', name: '本月' },
-    { con: 'UP_MONTH', title: '1.1.4.45', name: '上月' },
+    { con: 'LAST_MONTH', title: '1.1.4.45', name: '上月' },
     { con: 'THIS_SEASON', title: '1.1.4.46', name: '本季度' },
-    { con: 'UP_SEASON', title: '1.1.4.48', name: '上季度' },
+    { con: 'LAST_SEASON', title: '1.1.4.48', name: '上季度' },
     { con: 'THIS_YEAR', title: '1.1.4.49', name: '本年' },
-    { con: 'UP_YEAR', title: '1.1.4.51', name: '上年' }
+    { con: 'LAST_YEAR', title: '1.1.4.51', name: '上年' }
   ],
   dateTeam3: [
     { con: 'TODAY', title: '1.1.4.37', name: '今天' },

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

@@ -1,3 +1,5 @@
+import renderWidget from './renderWidget';
+
 const DURATIONS = {
   minute: '分钟',
   hour: '小时',
@@ -390,10 +392,14 @@ export const $utils = {
 
 //  start--- 筛选外显 ---start
 export const outQuickSearchFn = {
+  mixins: [renderWidget],
   methods: {
     handlerInitSearchItem(arr) {
       if (!Array.isArray(arr)) return;
       arr.forEach(el => {
+        // 直接渲染相应组件，不经过下面的字段判断
+        if (this.initRenderWidgetCfg(el)) return;
+
         el.setting = typeof el.setting == "string" ? JSON.parse(el.setting) : el.setting;
         const attr = el?.settingObj?.attr || "";
         const isPreciseSearch = el?.settingObj?.isPreciseSearch || "";
@@ -413,12 +419,20 @@ export const outQuickSearchFn = {
           // 设置了默认值
           let df = el.explicitDefaultVal;
           if(df){
-            let i = df == 'firstOption' ? 0 : showSetting.findIndex(v => v.change_text == df);
-            if(i > -1){
+            if (df == 'firstOption') {
+              tvalue = String(advanceOptionSetting) === '0' ? 0 : [0];
+            } else {
               if(String(advanceOptionSetting) === '0'){
-                tvalue = i
+                // 单选
+                const index = showSetting.findIndex(v => v.change_text == df);
+                if (index > -1) tvalue = index;
               } else {
-                tvalue.push(i)
+                // 多选 多默认值 处理
+                const dfs = df.split(',');
+                dfs.forEach((d) => {
+                  const index = showSetting.findIndex(v => v.change_text == d);
+                  if (index > -1) tvalue.push(index);
+                });
               }
             }
           }
@@ -546,6 +560,12 @@ export const outQuickSearchFn = {
       }
       let conObj = [];
       arr.forEach(item => {
+        const renderConObj = this.getRenderSearchConObj(item);
+        if (renderConObj) {
+          conObj.push(renderConObj);
+          return;
+        }
+
         let temp = {
           field_key: item.columnName,
           con: item.con,

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

@@ -0,0 +1,89 @@
+import { WidgetCfgMaps } from '../components/render-widget/widgetCfgMaps';
+import { WidgetTypeEnums, DatePresetValEnums } from '../components/render-widget/enums';
+
+function randomkey() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+// 外层换行
+const BlockEle = [WidgetTypeEnums.CHECKBOX_GROUP];
+
+export default {
+  methods: {
+    isRender(cfg) {
+      return cfg.widgetCfg?.isRender;
+    },
+    getDefValByRenderWidget(cfg) {
+      const { widgetType, defaultValue, defValueUnit } = cfg.widgetCfg || {};
+      const Widget = WidgetCfgMaps.get(widgetType);
+      let defVal;
+      if (Widget) {
+        const { setDefaultValue } = Widget;
+        if (setDefaultValue) defVal = setDefaultValue(defaultValue, defValueUnit);
+      }
+      return defVal;
+    },
+    initRenderWidgetCfg(cfg) {
+      const isRender = this.isRender(cfg);
+      if (!isRender) return isRender;
+
+      const { widgetType } = cfg.widgetCfg || {};
+
+      this.$set(cfg, "_frontId", randomkey());
+      this.$set(cfg, "isRender", isRender);
+      this.$set(cfg, "widgetType", widgetType);
+      this.$set(cfg, "con", "EQ");
+
+      if (BlockEle.includes(widgetType)) this.$set(cfg, "_isBlock", true); 
+
+      this.$set(cfg, 'value', this.getDefValByRenderWidget(cfg));
+
+      return isRender;
+    },
+    getRenderSearchConObj(cfg) {
+      const isRender = this.isRender(cfg);
+      if (!isRender) return null;
+      const { columnName, con, value, widgetType } = cfg;
+      
+      let unit = null;
+      // 时间组件 unit 设置为自定义
+      const dateWidgetTypes = [WidgetTypeEnums.DATE, WidgetTypeEnums.DATE_TIME];
+      if (dateWidgetTypes.includes(widgetType)) {
+        unit = DatePresetValEnums.CUSTOM;
+      }
+
+      const val = Array.isArray(value) ? value : value ? [value] : [];
+
+      return {
+        field_key: columnName,
+        con,
+        value: val.length > 0 ? val : null,
+        unit,
+      }
+    },
+    getDefValByRenderConObj(conObj, cfg) {
+      const isRender = this.isRender(cfg);
+      if (!isRender) return null;
+      const { widgetType, multiple } = cfg.widgetCfg || {};
+      const { value } = conObj;
+      if ((widgetType === WidgetTypeEnums.SELECT || widgetType === WidgetTypeEnums.CHECKBOX_GROUP) && multiple) {
+        return Array.isArray(value) ? value : value ? [value] : [];
+      }
+      return !Array.isArray(value) ? value : value[0];
+    },
+    isExistDefValByRenderWidget(cfg) {
+      const { defaultValue, defValueUnit } = cfg.widgetCfg || {};
+      return !!(defaultValue || defValueUnit);
+    },
+    resetRenderWidgetValue(cfg) {
+      const isRender = this.isRender(cfg);
+      if (!isRender) return isRender;
+      cfg.value = undefined;
+      return isRender;
+    }
+  },
+}

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

@@ -25,16 +25,16 @@ export default {
           YESTERDAY: 1 / 30,
           THIS_WEEK: 7 / 30,
           NEXT_WEEK: 7 / 30,
-          UP_WEEK: 7 / 30,
+          LAST_WEEK: 7 / 30,
           THIS_MONTH: 1,
           NEXT_MONTH: 1,
-          UP_MONTH: 1,
+          LAST_MONTH: 1,
           THIS_SEASON: 3,
           NEXT_SEASON: 3,
-          UP_SEASON: 3,
+          LAST_SEASON: 3,
           THIS_YEAR: 12,
           NEXT_YEAR: 12,
-          UP_YEAR: 12
+          LAST_YEAR: 12
         };
         const unitToMonth = {
           HOUR: 1 / 24 / 30,