cnhis-design-vue 2.1.68 → 2.1.70

package/package.json

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

package/packages/big-table/src/BigTable.vue

@@ -2008,7 +2008,7 @@ export default create({
         let transformWrapRight = transformWrap?.getBoundingClientRect().right || 0;
         field.right = transformWrapRight - btnRectRight - btnWidth / 2 + 'px';
       } else {
-        field.left = btnRectLeft + 'px';
+        field.left = btnRectLeft + (this.filterLeftOffset || 0) + 'px';
       }
 
       field.top = btnRectTop + FILTER_BOX_TOP_OFFSET + (this.filterTopOffset || 0) + 'px';

package/packages/big-table/src/utils/bigTableProps.js

@@ -83,6 +83,11 @@ const bigTableProps = {
     type: Number,
     default: 0
   },
+  filterLeftOffset: {
+    // 表头 left 调节
+    type: Number,
+    default: 0
+  },
   editFormApiConfig: Object, // 编辑表格api
   defaultEditAllRow: Boolean,
   editTableUid: [String, Number],

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

@@ -47,13 +47,16 @@
           <slot name="classification"></slot>
           <li v-if="showQuickSearch" ref="quickSearchLi">
             <a-button class="search-default" type="default" @click="foldQuickSearch">
-              <svg-icon icon-class="anniushaixuan" style="color: #2463F4; margin-right: 6px"></svg-icon>
+              <svg-icon icon-class="anniushaixuan" style="color: inherit; margin-right: 6px"></svg-icon>
               筛选 {{ qqConObjCount ? `(${qqConObjCount})` : '' }}
             </a-button>
           </li>
           <!-- start--筛选外显--start -->
           <template v-for="item in outSearchFieldList">
-            <outQuickSearch :key="item.id + item.random_key" :item="item" :ref="item.columnName + item.random_key" :filterApiConfig="filterApiConfigOutSearch" @outFilterChange="outFilterChange"></outQuickSearch>
+            <li class="outQuickSearch-li" v-if="item.isRender" :key="item._frontId">
+              <RenderWidget style="margin: 0 8px 8px 0" :cfg="item" v-model="item.value" @outFilterChange="outFilterChange" />
+            </li>
+            <outQuickSearch v-else :key="item.id + item.random_key" :item="item" :ref="item.columnName + item.random_key" :filterApiConfig="filterApiConfigOutSearch" @outFilterChange="outFilterChange"></outQuickSearch>
           </template>
           <!-- end--筛选外显--end -->
 
@@ -65,7 +68,7 @@
           </template>
           <!-- end--筛选外显 跨表--end -->
 
-          <li v-if="isShowSetting('hideSearch') && !showRelatedTreeBtn" ref="inputSearchLi" class="baseSearch-input-search">
+          <li v-if="isShowInputSearch" ref="inputSearchLi" class="baseSearch-input-search">
             <template v-if="outSearchFieldList && outSearchFieldList.length">
               <slot name="searchInput" :width="(searchInputWidth || inputSearchW)" :searchPlaceHolder="searchPlaceHolder" :showPlaceholderPrefix="showPlaceholderPrefix" :type="'outSearch'">
                 <a-input
@@ -116,6 +119,13 @@
               查询
             </a-button>
           </li>
+          <!-- 无外显字段查询，且隐藏模糊搜索 -->
+          <li v-if="showApiSearch">
+            <a-button type="primary" @click="apiSearch" style="margin: 0 8px 8px 0">
+              <a-icon type="search" style="margin-right: 6px" />
+              查询
+            </a-button>
+          </li>
           <li v-if="showResetFilterBtn">
             <a-button @click="handleReset" style="margin: 0 8px 8px 0">
               <svg-icon icon-class="xitongtubiaoliebiaocaozuoanniushanchu" style="margin-right: 6px"></svg-icon>
@@ -390,7 +400,7 @@
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 
-import cloneDeep from 'lodash/cloneDeep';
+import _ from 'lodash';
 import vexutils from '@/utils/vexutils';
 import { Button, Icon, Dropdown, Select, Upload, DatePicker, Input, Menu } from 'ant-design-vue';
 import resize from 'vue-resize-directive';
@@ -412,6 +422,8 @@ import preventReClick from '@/directive/preventReClick';
 import getBtnIcon from '../components/button-icon/getBtnIcon.js';
 import ButtonGroup from '../components/button-group/ButtonGroup.vue';
 
+import RenderWidget from '../components/render-widget/index.vue';
+
 const EVALUATEList = [
   {
     label: '一星',
@@ -465,6 +477,9 @@ export default create({
       type: Number,
       default: 0
     },
+    searchInputPlaceHolder: {
+      type: String,
+    },
     onSearch: Function,
     rowBtnList: {
       type: Array,
@@ -611,9 +626,13 @@ export default create({
       default: 1000
     },
     isCardNewBatch: {type: Boolean, deafult: false},
-    isBatchSelect: {type: [Number, Boolean, String], default: ''}
+    isBatchSelect: {type: [Number, Boolean, String], default: ''},
+    isAvailableApiType:  {type: Boolean, deafult: false},
+    apiSearch: Function,
+    tableDataType: String
   },
   components: {
+    RenderWidget,
     [Button.name]: Button,
     [Icon.name]: Icon,
     [Dropdown.name]: Dropdown,
@@ -794,6 +813,8 @@ export default create({
       };
     },
     searchPlaceHolder() {
+      if (this.searchInputPlaceHolder) return this.searchInputPlaceHolder;
+
       if (!this.useFieldList?.length || this.showRelatedTreeBtn) return '请输入关键字搜索';
       let str = '';
       let strList = this.useFieldList
@@ -807,6 +828,9 @@ export default create({
       return str || '请输入关键字搜索';
     },
     showRelatedSearch() {
+      // sql类型的列表, 且有筛选外显的时候不展示平铺列表的search
+      if (this.relatedSqlOutSearch) return false;
+      if (this.isAvailableApiType) return false;
       return this.showRelatedTreeBtn && this.isShowSetting('hideSearch');
     },
     showQuickSearch() {
@@ -820,6 +844,18 @@ export default create({
     },
     isCard() {
       return this.TypeOfDisplay === 'cardNew' && this.isBatchSelect == 1
+    },
+    showApiSearch(){
+      return !this.outSearchFieldList?.length && this.isAvailableApiType
+    },
+    // sql类型的列表, 且有筛选外显的时候不展示平铺列表的search
+    relatedSqlOutSearch() {
+      return this.tableDataType === 'SQL' && !!this.outSearchFieldList?.length
+    },
+    isShowInputSearch() {
+      if(!this.isShowSetting('hideSearch')) return false;
+      if(!this.showRelatedTreeBtn) return true;
+      return this.relatedSqlOutSearch;
     }
   },
   data() {
@@ -1026,11 +1062,11 @@ export default create({
       if (!this.validConObj(obj, this.searchFieldList, this.searchFieldLimit)) return false;
       let copy = [];
       if (this.outSearchFieldList.length) {
-        copy = cloneDeep(this.outSearchFieldList, true);
+        copy = _.cloneDeep(this.outSearchFieldList, true);
       }
       let copyRelation = [];
       if (this.outRelationQuickSearch.length) {
-        copyRelation = cloneDeep(this.outRelationQuickSearch, true);
+        copyRelation = _.cloneDeep(this.outRelationQuickSearch, true);
       }
       this.$emit('onSave', obj, isOutFilter, copy, copyRelation, config);
       this.modalVisible = false;
@@ -1476,7 +1512,7 @@ export default create({
         if (!(btn.isShow == '1' && btn.type != 'LINK')) return;
         btn.isHide = false;
         btn.isButtonGroup = false;
-        let cloneBtn = cloneDeep(btn);
+        let cloneBtn = _.cloneDeep(btn);
         this.setBtnStatus(cloneBtn);
         // 按钮自适应 即使折叠也平铺显示出来
         if (this.isShowSetting('buttonAdaption')) {
@@ -1758,14 +1794,20 @@ export default create({
         this.handlerInitSearchItem(item.fieldList);
       });
       if (this.lastOutSearchFieldList.length > 0) {
-        this.outSearchFieldList = cloneDeep(this.lastOutSearchFieldList);
+        this.outSearchFieldList = _.cloneDeep(this.lastOutSearchFieldList);
       }
       if (this.lastOutRelationQuickSearch.length) {
         this.outRelationQuickSearch = this.$utils.clone(this.lastOutRelationQuickSearch, true);
       }
 
       // 如有配置默认值
-      if (this.outSearchFieldList.some(v => !!v.explicitDefaultVal)) {
+      const isSetDefVal = this.outSearchFieldList.some(v => {
+        if (this.isRender(v)) {
+          return this.isExistDefValByRenderWidget(v);
+        }
+        return !!v.explicitDefaultVal
+      });
+      if (isSetDefVal) {
         this.$emit('outSearchInit');
         if ('reset' != config?.type) {
           this.outFilterChange({ type: 'outSearchInit' });
@@ -1863,7 +1905,7 @@ export default create({
       return paramsArray;
     },
     setPrintNumberToBtnList(printNumberList = [], btnList = []) {
-      let cloneList = cloneDeep(btnList);
+      let cloneList = _.cloneDeep(btnList);
 
       printNumberList.forEach((item, index) => {
         const i = cloneList.findIndex(v => v.settingObj[0].trigger_id == item.id);
@@ -2026,7 +2068,13 @@ export default create({
      * 获取外显检索的默认值设置
      */
     handleGetOutSearchInitValue() {
-      if (this.outSearchFieldList.some(v => !!v.explicitDefaultVal)) {
+      const isSetDefVal = this.outSearchFieldList.some(v => {
+        if (this.isRender(v)) {
+          return this.isExistDefValByRenderWidget(v);
+        }
+        return !!v.explicitDefaultVal
+      });
+      if (isSetDefVal) {
         let conObj = this.getConObjParams() || [];
         return conObj;
       }

package/packages/table-filter/src/classification/Classification-com.vue

@@ -420,7 +420,11 @@
       :tableId="tableId"
       :classifyModal="classifyModal"
       :filterApiConfig="filterApiConfig"
-    />
+    >
+      <template #searchCondition="{ attrs, listeners }">
+        <slot name="searchCondition" :attrs="attrs" :listeners="listeners"></slot>
+      </template>
+    </set-classification>
   </div>
 </template>
 

package/packages/table-filter/src/components/c-tree-select/tree-select.vue

@@ -15,7 +15,7 @@
     :allowClear="item.explicitRequired != 1"
     treeNodeFilterProp="title"
     ref="quickInputSelect"
-    :placeholder="`请选择${item.alias || item.title}`"
+    :placeholder="item.placeholder || `请选择${item.alias || item.title}`"
   >
     <a-icon slot="suffixIcon" type="smile" />
     <span class="init-key-loading" v-if="key === '_init_key_'" slot="title" slot-scope="{ key, value }" style="color: #08c">

package/packages/table-filter/src/components/multi-select/multi-select.vue

@@ -2,7 +2,7 @@
   <a-select
     :mode="mode"
     v-if="item.com == 'SelectMui'"
-    :placeholder="`请选择${item.alias || item.title}`"
+    :placeholder="item.placeholder || `请选择${item.alias || item.title}`"
     :style="{width: `${item.advanceColWidth||160}px`}"
     :dropdownMatchSelectWidth="false"
     :maxTagCount="handleMaxTagCount(item)"

package/packages/table-filter/src/components/out-quick-search/out-quick-search.vue

@@ -9,7 +9,7 @@
           margin: '0 8px 8px 0',
           'font-family': item.PASSWORDTYPE ? 'text-security-disc' : 'inherit'
         }"
-        :placeholder="`搜索${item.alias || item.title}`"
+        :placeholder="item.placeholder || `搜索${item.alias || item.title}`"
         v-model="item.value"
         allowClear
       >
@@ -55,7 +55,7 @@
       @change="outFilterChange"
       @ok="outFilterChange"
       v-model="item.value"
-      :placeholder="`请选择${item.alias || item.title}`"
+      :placeholder="item.placeholder || `请选择${item.alias || item.title}`"
       v-if="item.com == 'DayPicker'"
       style="margin: 0 8px 8px 0"
       :showTime="false"

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

@@ -0,0 +1,52 @@
+<template>
+  <CheckboxGroup v-bind="$attrs" :value="valueCp" @change="onChange"></CheckboxGroup>
+</template>
+
+<script>
+import { Checkbox } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    CheckboxGroup: Checkbox.Group,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        this.$emit("update:value", val);
+      },
+      get() {
+        return Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+      }
+    }
+  },
+  methods: {
+    filterNewVal(val) {
+      return val.filter((v) => !this.valueCp.includes(v));
+    },
+    onChange(val) {
+      if (!this.multiple && Array.isArray(val)) {
+        this.valueCp = this.filterNewVal(val)[0];
+        return;
+      }
+      this.valueCp = val;
+    },
+  },
+}
+
+</script>
+<style lang='less'>
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+   <Select v-bind="$attrs" v-on="$listeners" v-model="valueCp" :maxTagCount="maxTagCount" :maxTagPlaceholder="maxTagPlaceholder"></Select>
+</template>
+
+<script>
+import { Select } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    Select,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: {
+      type: Object
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        this.$emit("update:value", val);
+      },
+      get() {
+        return this.value;
+      }
+    },
+    maxTagCount() {
+      if (!Array.isArray(this.value)) return undefined;
+      const len = this.value.length || 0;
+      return len > 1 ? 0 : 1;
+    },
+  },
+  methods: {
+    maxTagPlaceholder() {
+      if (!Array.isArray(this.value)) return undefined;
+      const { alias, title } = this.componentCfg;
+      const len = this.value.length || 0;
+      return this.value.length > 1 ? `已选${len}个${alias || title}` : "";
+    }
+  },
+}
+</script>
+<style lang='less'>
+</style>

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

@@ -0,0 +1,7 @@
+import CheckboxGroup from './CheckboxGroup.vue';
+import Select from './Select.vue';
+
+export {
+  CheckboxGroup,
+  Select
+}

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

@@ -0,0 +1,29 @@
+export const WidgetTypeEnums = {
+  INPUT_NUMBER: "NUMBER",
+  INPUT: "TEXT",
+  SELECT: "SELECT",
+  DATE: "DATE",
+  DATE_TIME: "DATETIME",
+  CHECKBOX_GROUP: 'CHECKBOX_GROUP',
+}
+
+export const DatePresetValEnums = {
+  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",
+
+  WEEK_START: "THIS_WEEK_START",
+  WEEK_END: "THIS_WEEK_END",
+
+  MONTH_START: "THIS_MONTH_START",
+  MONTH_END: "THIS_MONTH_END",
+};

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>