cnhis-design-vue 2.1.78 → 2.1.80

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

@@ -0,0 +1,145 @@
+<template>
+   <div class="filter-number-range">
+    <span
+      class="ant-calendar-picker-input ant-input num-picker"
+      :class="{ 'num-picker-unit': componentCfg.inputUnit }"
+    >
+      <input
+        v-model="lessValue"
+        :title="`起始${componentCfg.title}`"
+        :placeholder="`起始${componentCfg.title}`"
+        @keyup.enter="changeFilterNumber"
+        @change="changeFilterNumber"
+        class="ant-calendar-range-picker-input"/>
+      <span class="ant-calendar-range-picker-separator"> ~ &nbsp;</span>
+      <input
+        v-model="bigValue"
+        :title="`截止${componentCfg.title}`"
+        :placeholder="`截止${componentCfg.title}`"
+        @keyup.enter="changeFilterNumber"
+        @change="changeFilterNumber"
+        class="ant-calendar-range-picker-input"/>
+      <template v-if="componentCfg.inputUnit">&nbsp;{{ componentCfg.inputUnit }}</template>
+      <span
+        class="ant-input-suffix clear-number-icon"
+        v-if="lessValue || bigValue"
+        @click="clearFilterNumber"
+        ><i
+          aria-label="图标: close-circle"
+          tabindex="-1"
+          class="anticon anticon-close-circle ant-input-clear-icon"
+          ><svg
+            viewBox="64 64 896 896"
+            data-icon="close-circle"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            aria-hidden="true"
+            focusable="false"
+            class=""
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            ></path></svg></i></span
+    ></span>
+  </div>
+</template>
+
+<script>
+import { Select } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    Select,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: {
+      type: Object
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if(!val) {
+          this.clearFilterNumber()
+        }
+      }
+    }
+  },
+  data(){
+    return {
+      lessValue: undefined,
+      bigValue: undefined
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {},
+  created(){
+    this.init();
+  },
+  methods: {
+    init(){
+      // 参数查询会被处理为["1~22"]
+      if(!this.value || !Array.isArray(this.value)) {
+        this.clearFilterNumber();
+        return;
+      }
+      let resVal = this.value[0]
+      if(!resVal || typeof resVal !== 'string' || !resVal.includes('~')) {
+        this.clearFilterNumber();
+        return;
+      }
+      this.lessValue = resVal.split('~')?.[0] ?? undefined;
+      this.bigValue = resVal.split('~')?.[1] ?? undefined;
+    },
+    changeFilterNumber() {
+      let res = `${this.lessValue ?? ''}~${this.bigValue ?? ''}`
+      if (this.lessValue && this.bigValue && this.lessValue > this.bigValue) {
+        res = `${this.bigValue}~${this.lessValue}`
+      }
+      this.$emit("update:value", res);
+    },
+    clearFilterNumber() {
+      this.lessValue = undefined;
+      this.bigValue = undefined;
+      this.$emit("update:value", '');
+    },
+  },
+}
+</script>
+<style lang='less' scoped>
+/deep/ .num-picker {
+  position: relative;
+  display: flex;
+  &.num-picker-unit {
+    padding-right: 20px;
+  }
+  input {
+    text-align: left !important;
+  }
+  &:hover {
+    .clear-number-icon {
+      display: block;
+    }
+  }
+  /deep/ .ant-calendar-range-picker-input {
+    text-align: left;
+  }
+  .clear-number-icon {
+    position: absolute;
+    right: 5px;
+    top: 6px;
+    display: none;
+    cursor: pointer;
+    z-index: 1000;
+  }
+}
+</style>

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

@@ -1,51 +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'>
+<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/SelectDynamic.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="SelectDynamic">
+    <a-select
+      v-model="valueCp"
+      showSearch
+      :mode="mode"
+      :placeholder="placeholder"
+      :dropdownMatchSelectWidth="true"
+      :maxTagCount="maxTagCount"
+      :maxTagPlaceholder="maxTagPlaceholder"
+      :filterOption="false"
+      :allowClear="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() {
+    this.createSuffixIcon()
+  },
+
+  // 方法
+  methods: {
+    createSuffixIcon() {
+      if (this.mode === "default") return;
+      let refDom = this.$refs.quickInputSelect;
+      if (!refDom) return;
+      let selectDom = refDom.$el;
+      if (!selectDom) return;
+
+      let pDom = selectDom.querySelector(".ant-select-selection--multiple");
+      if(!pDom) return;
+      let hasTag = pDom.querySelector(".quick-dynamic-select-span");
+      if (!hasTag) {
+        let tag = document.createElement("span");
+        tag.className = "quick-dynamic-select-span";
+        let icon = `<i aria-label="图标: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i>`;
+        tag.innerHTML = icon;
+        pDom.appendChild(tag);
+      }
+    },
+    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: unset !important;
+    }
+  }
+  .ant-select-selection--multiple {
+    position: relative;
+    max-height: 32px !important;
+    .quick-dynamic-select-span {
+      position: absolute;
+      right: 2px;
+      top: 4px;
+      top: 50%;
+      right: 11px;
+      transform-origin: 50% 50%;
+      margin-top: -7px;
+      line-height: 1;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+  
+}
+
+.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;
+  }
+  .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/index.js

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

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",
-  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",
-};
+export const WidgetTypeEnums = {
+  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', // 自定义输入，特殊处理
+
+  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'
+};