cnhis-design-vue 2.1.79 → 2.1.80

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

@@ -0,0 +1,212 @@
+<template>
+  <div class="filter-date-range">
+    <a-radio-group v-model="con" buttonStyle="solid">
+      <a-radio-button
+        v-for="date in dateTeam0"
+        v-show="!showDate"
+        @click="clickRadioGroup(date.con)"
+        :key="date.con"
+        :value="date.con"
+      >
+        {{ getI18nText(date.title, date.name) }}
+      </a-radio-button>
+      <span :class="['check-date-btn', marginx]" @click="checkDate">
+        {{ getI18nText('1.1.4.52', '选择时间') }}
+      </span>
+      <div class="check-date" v-show="showDate">
+        <a-date-picker
+          v-model="value_start"
+          :format="format"
+          :show-time="showTimeStart"
+          :placeholder="placeholderS"
+          style="width: 120px"
+          allowClear
+          :disabledDate="current => disabledDatePicker(current, 'start')"
+          @change="dateChangeStr"
+        />
+        &nbsp;
+        <a-date-picker
+          v-model="value_end"
+          :format="format"
+          :show-time="showTimeEnd"
+          :placeholder="placeholderE"
+          style="width: 120px"
+          allowClear
+          :disabledDate="current => disabledDatePicker(current, 'end')"
+          @change="dateChangeEnd"
+        />
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import { Radio, DatePicker } from 'ant-design-vue';
+import { dataOptions } from '~/table-filter/src/const/dataOptions';
+import moment from 'moment';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    [DatePicker.name]: DatePicker,
+    [Radio.Button.name]: Radio.Button,
+    [Radio.Group.name]: Radio.Group,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: { type: Object },
+    placeholderS: String,
+    placeholderE: String,
+    fieldType: String
+  },
+  data(){
+    return {
+      showDate: false,
+      marginx: 'ml',
+      con: null,
+      value_start: null,
+      value_end: null,
+      ...dataOptions
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    showTimeStart(){
+      if(this.fieldType === 'DATE') return false;
+      return { defaultValue: moment('00:00:00', 'HH:mm:ss') }
+    },
+    showTimeEnd(){
+      if(this.fieldType === 'DATE') return false;
+      return { defaultValue: moment('23:59:59', 'HH:mm:ss') }
+    },
+    format(){
+      if(this.fieldType === 'DATE') return 'YYYY-MM-DD';
+      return 'YYYY-MM-DD HH:mm:ss'
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if(!val && !this.componentCfg?.con) {
+          this.clearData()
+        }
+      }
+    }
+  },
+  created(){
+    this.init();
+  },
+  methods: {
+    handleMoment(val) {
+      if(!val || !val._isAMomentObject) return null;
+      return val.format(this.format) || null;
+    },
+    init(){
+      if(!this.value) return;
+      let resVal = this.value
+      if (
+        resVal?.length === 1 &&
+        resVal[0] &&
+        typeof resVal[0] === "string" &&
+        resVal[0].includes("~")
+      ) {
+        resVal = resVal[0].split("~");
+      }
+      if(!Array.isArray(resVal)) return;
+      this.value_start = resVal[0];
+      this.value_end = resVal[1];
+    },
+    // 单选按钮组合点击取消选中状态
+    clickRadioGroup(con) {
+      this.$emit("update:value", []);
+      this.value_start = null;
+      this.value_end = null;
+      if (this.con == con) {
+        this.con = null;
+      } else {
+        this.con = con;
+      }
+      this.$emit('setCfgCon', this.con);
+    },
+    checkDate() {
+      this.showDate = !this.showDate;
+      this.showDate ? (this.marginx = "mr") : (this.marginx = "ml");
+    },
+    clearData(){
+      this.con = null;
+      this.value_start = null;
+      this.value_end = null;
+      this.marginx = 'ml';
+      this.showDate = false;
+      this.$emit('setCfgCon', this.con);
+    },
+    dateChangeStr(date){
+      this.$emit('setCfgCon', 'EQ')
+      let str = `${this.handleMoment(date) || ''}~${this.handleMoment(this.value_end) || ''}`
+      this.$emit("update:value", str);
+    },
+    dateChangeEnd(date){
+      this.$emit('setCfgCon', 'EQ')
+      let str = `${this.handleMoment(this.value_start) || ''}~${this.handleMoment(date) || ''}`
+      this.$emit("update:value", str);
+    },
+    /**
+     * 限制日期填写
+     */
+    disabledDatePicker(current, t){
+      let f = false;
+      if(t=== 'start'){
+         const end_val = this.value_end;
+         f = end_val && current.valueOf() > end_val.valueOf();
+      } else if(t=== 'end') {
+        const start_val = this.value_start;
+         f = start_val && current.valueOf() <= start_val.valueOf();
+      }
+      /**
+       * 2 过去时间
+       * 3 未来时间
+       */
+      let type = String(this.componentCfg?.advanceOptionSetting);
+      if(!['2','3'].includes(type)) return f;
+      if(type === '2'){
+         return current >= moment().endOf('day') || f;
+      } else if(type==='3'){
+         return current && current < moment().startOf('day') || f;
+      }
+      return f
+    },
+    getI18nText(i, d) {
+      if (Array.isArray(i)) {
+        return this.$t ? this.$t.apply(this, i) : d;
+      }
+      return this.$t ? this.$t(i) : d;
+    },
+  },
+}
+</script>
+<style lang='less' scoped>
+.check-date-btn {
+  display: inline-block;
+  line-height: 32px;
+  height: 32px;
+  padding: 0 10px;
+  background-color: #ddd;
+  cursor: pointer;
+  &.ml {
+    margin-left: 12px;
+  }
+  &.mr {
+    margin-right: 12px;
+  }
+}
+.check-date {
+  display: inline-block;
+  line-height: 33px;
+}
+</style>

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