cnhis-design-vue 2.1.79 → 2.1.81

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

@@ -0,0 +1,280 @@
+<template>
+  <div class="SelectDynamic">
+    <a-select
+      v-model="valueCp"
+      showSearch
+      :mode="mode"
+      :placeholder="placeholder"
+      :dropdownMatchSelectWidth="!selectHasTitle"
+      :maxTagCount="maxTagCount"
+      :maxTagPlaceholder="maxTagPlaceholder"
+      :filterOption="false"
+      :allowClear="true"
+      :showArrow="true"
+      ref="quickInputSelect"
+      class="quick-dynamic-select"
+      :notFoundContent="componentCfg.fetchingWordbook ? undefined : '暂无数据'"
+      :class="{ 'quick-dynamic-select-mul': maxTagCount > 0 }"
+      @search="handleWordBookSearchRender($event, componentCfg)"
+      @dropdownVisibleChange="dropdownVisibleChangeRender($event, componentCfg)"
+      @change="handleChange($event, componentCfg)"
+    >
+      <template>
+        <a-select-option
+          v-for="(sea, k) in componentCfg.dataSource"
+          :key="k + sea.myName"
+          :value="sea.myName"
+          class="quick-dynamic-select-item"
+        >
+          <span v-for="(v, i) in showKeys" :key="i" :style="getShowKeysMax">
+            <Ellipsis :content="sea[v]"></Ellipsis>
+          </span>
+        </a-select-option>
+      </template>
+      <span slot="notFoundContent">暂无数据</span>
+      <div
+        slot="dropdownRender"
+        class="quick-dynamic-dropDown-container"
+        :class="{ 'quick-dynamic-dropDown-container-hasTitle': selectHasTitle }"
+        slot-scope="menu"
+      >
+        <a-spin v-if="componentCfg.fetchingWordbook" :spinning="componentCfg.fetchingWordbook" :tip="`加载中...`" >
+          <v-nodes :vnodes="menu" />
+          <!-- <select-pages v-if="!isnoPages" :searchPageConfig="componentCfg.searchPageConfig" :handleSearchChangePage="handleSearchChangePage" /> -->
+        </a-spin>
+        <template v-else-if="selectHasTitle">
+          <v-nodes :vnodes="menu" />
+          <div class="quick-dynamic-select-title">
+            <span v-for="(v, i) in _showKeys_" :key="i">
+              <Ellipsis :content="v"></Ellipsis>
+            </span>
+          </div>
+        </template>
+        <template v-else>
+          <v-nodes :vnodes="menu" />
+        </template>
+      </div>
+      <span slot="removeIcon">
+          <a-icon v-if="showRemoveIcon" type="close" />
+          <span v-else></span>
+      </span>
+    </a-select>
+  </div>
+</template>
+<script>
+import { Select, Spin, Icon,Button } from 'ant-design-vue';
+import selectPages from '@/component/select-pages';
+import Ellipsis from '~/ellipsis'
+export default {
+  name: "SelectDynamic",
+  components: {
+    Select,
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option,
+    [Spin.name]: Spin,
+    [Button.name]:Button,
+    [Icon.name]: Icon,
+    selectPages,
+    Ellipsis,
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes
+    }
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: { type: Object },
+    placeholder: String,
+    mode: String,
+    handleWordBookSearchRender: Function,
+    dropdownVisibleChangeRender: Function
+  },
+  data() {
+    return {};
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        this.$emit("update:value", val);
+      },
+      get() {
+        return this.value;
+      }
+    },
+    showSelectTitle() {
+      let { fetchingWordbook, dataSource } = this.componentCfg || {};
+      return !fetchingWordbook && !!dataSource?.length;
+    },
+    showKeys() {
+      let { showKeys } = this.componentCfg?.widgetCfg?.dynamicOptionInfo || {};
+      return showKeys;
+    },
+    _showKeys_() {
+      let { _showKeys_ } = this.componentCfg || {};
+      if(_showKeys_?.length) return _showKeys_;
+      return this.showKeys;
+    },
+    getShowKeysMax(){
+      let len = this.showKeys?.length || 1
+      let maxWidth = 100 / len
+      return {
+        maxWidth: `${maxWidth}%`
+      }
+    },
+    selectHasTitle() {
+      const {showSelectTitle, showKeys, componentCfg} = this;
+      return showSelectTitle && Array.isArray(showKeys) && showKeys?.length > 1 && componentCfg?.dataSource?.length;
+    },
+    maxTagCount() {
+      if (!Array.isArray(this.value)) return undefined;
+      const len = this.value.length || 0;
+      return len > 1 ? 0 : 1;
+    },
+    showRemoveIcon(){
+      let v = this.value;
+      let f = 1 == this?.componentCfg?.filterExplicit
+      if(Array.isArray(v) && f){
+        let l = v.length;
+        if(this.componentCfg.explicitRequired == 1){
+          return l > 1
+        }
+      }
+
+      return true;
+    },
+    // 有没有分页配置
+    isnoPages(){
+     const { searchPageConfig } = this.componentCfg || {};
+     if(!searchPageConfig) return true;
+
+      return searchPageConfig.page <= 1 && !searchPageConfig.hasNextPage;
+    }
+  },
+  watch: {
+    // value: {
+    //   immediate: true,
+    //   handler(val) {}
+    // }
+  },
+  // 生命周期
+  created() {},
+  mounted() {},
+
+  // 方法
+  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}` : "";
+    },
+    handleChange(val, item){
+      if(this.mode === 'multiple') return;
+      this.$emit('change')
+    },
+    handleSearchChangePage(type) {
+      let cType = type || 'next';
+      let { page, keyword = undefined } = this?.componentCfg?.searchPageConfig;
+      page = cType === 'next' ? page + 1 : page - 1;
+      this.handleWordBookSearchRender(keyword, this.componentCfg, { page });
+    }
+  }
+};
+</script>
+<style lang="less">
+.SelectDynamic {
+  width: 100%;
+}
+.ant-select-dropdown--empty {
+  .ant-select-dropdown-menu-item-disabled {
+    text-align: center;
+  }
+}
+.quick-dynamic-select {
+  width: 100%;
+  height: 32px;
+  &.quick-dynamic-select-mul {
+    .ant-select-selection--multiple {
+      max-height: 100% !important;
+    }
+  }
+  .ant-select-selection--multiple {
+    position: relative;
+    max-height: 32px !important;
+  }
+  
+}
+
+.ant-select-dropdown--multiple {
+  .quick-dynamic-dropDown-container .quick-dynamic-select-title {
+    padding-right: 32px;
+  }
+}
+
+.c-s-title-line {
+  font-weight: 700;
+  color: #000;
+  font-size: 14px;
+}
+.c-s-content-item {
+  padding: 0 5px;
+}
+
+.quick-dynamic-dropDown-container {
+  position: relative;
+  .ant-select-dropdown-menu {
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 6px;
+      background-color: #f2f2f2;
+    }
+
+    /*定义滚动条轨道 内阴影+圆角*/
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background-color: #f2f2f2;
+    }
+
+    /*定义滑块 内阴影+圆角*/
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: #dbdcdc;
+    }
+  }
+  &.quick-dynamic-dropDown-container-hasTitle {
+    padding-top: 32px;
+    width: 240px;
+  }
+  .quick-dynamic-select-title {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding: 5px 12px;
+    display: table;
+    table-layout: fixed;
+    color: #212121;
+    font-weight: 700;
+    font-size: 14px;
+    > span {
+      display: table-cell;
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+  }
+  .quick-dynamic-select-item {
+    display: flex;
+    > span {
+      flex: 1;
+    }
+  }
+  .ant-select-dropdown-menu-item-disabled {
+    min-height: 42px;
+  }
+}
+</style>

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

@@ -1,7 +1,9 @@
 import CheckboxGroup from './CheckboxGroup.vue';
 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
-}
+export { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic, Label, SelectLabel };

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

@@ -1,29 +1,36 @@
 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',
+  LABEL: 'LABEL',
+  SELECT_LABEL: 'SELECT_LABEL'
+};
 
 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,29 @@
 <script type="text/jsx">
 import { WidgetTypeEnums } from './enums';
 import { WidgetCfgMaps } from './widgetCfgMaps';
+import { filterApiFn } from '../../mixins/mixins';
+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];
+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, labelMethod],
   model: {
     event: "update:value",
     prop: "value",
@@ -23,6 +36,9 @@ export default {
       get() {
         return this.cfg.value;
       }
+    },
+    isQuick() {
+      return this.source === 'quickSearch'
     }
   },
   data() {
@@ -35,20 +51,38 @@ export default {
       this.$emit("outFilterChange");
     },
     getEleWidth(cfg) {
+      if(this.isQuick) 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.isQuick) 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, isQuick: this.isQuick });
       }
       if (customPlaceholder) {
         Props.placeholder = customPlaceholder;
       }
+      if(widgetType === 'SELECT_DYNAMIC') {
+        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;
@@ -63,6 +97,7 @@ export default {
       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;
@@ -77,10 +112,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() {