cnhis-design-vue 2.2.3 → 2.2.5

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

@@ -1,157 +0,0 @@
-<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="placeholderS"
-        :placeholder="placeholderS"
-        @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="placeholderE"
-        :placeholder="placeholderE"
-        @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
-    },
-    placeholderS: String,
-    placeholderE: String,
-  },
-  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;
-    },
-    handleChangeValue(lessValue, bigValue) {
-      if(!lessValue && lessValue !== 0) return;
-      if(!bigValue && bigValue !== 0) return;
-      let lessNum = +lessValue
-      if(isNaN(lessNum)) return;
-      let bigNum = +bigValue
-      if(isNaN(bigNum)) return;
-      if(lessNum > bigNum) {
-        return `${bigValue}~${lessValue}`
-      }
-    },
-    changeFilterNumber() {
-      let res = `${this.lessValue ?? ''}~${this.bigValue ?? ''}`
-      let transferRes = this.handleChangeValue(this.lessValue, this.bigValue)
-      if(transferRes) res = transferRes;
-      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,62 +0,0 @@
-<template>
-  <Select
-    v-bind="$attrs"
-    v-on="$listeners"
-    v-model="valueCp"
-    :maxTagCount="maxTagCount"
-    :maxTagPlaceholder="maxTagPlaceholder"
-    :filterOption="filterOption"
-  ></Select>
-</template>
-
-<script>
-import utils from '@/utils/utils-map';
-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}` : "";
-    },
-    filterOption(...arg) {
-      return utils.filterOption(...arg);
-    }
-  },
-}
-</script>
-<style lang='less'>
-</style>

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

@@ -1,287 +0,0 @@
-<template>
-  <div class="SelectDynamic">
-    <a-select
-      v-model="valueCp"
-      showSearch
-      :mode="mode"
-      :placeholder="placeholder"
-      :dropdownMatchSelectWidth="!selectHasTitle"
-      :maxTagCount="maxTagCount"
-      :maxTagPlaceholder="maxTagPlaceholder"
-      :filterOption="false"
-      :allowClear="allowClear"
-      :showArrow="true"
-      ref="quickInputSelect"
-      class="quick-dynamic-select"
-      :notFoundContent="componentCfg.fetchingWordbook ? undefined : '暂无数据'"
-      :class="{ 'quick-dynamic-select-mul': maxTagCount > 0 }"
-      @search="handleWordBookSearchDebounce"
-      @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'
-import { debounce } from "lodash";
-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,
-    allowClear: Boolean
-  },
-  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() {
-    this.handleWordBookSearchDebounce = debounce(this.handleWordBookSearch, 300)
-  },
-  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')
-    },
-    handleWordBookSearch(keyword) {
-      this.handleWordBookSearchRender(keyword, this.componentCfg, { skipFirstDef: true });
-    },
-    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, skipFirstDef: true });
-    }
-  }
-};
-</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

@@ -1,80 +0,0 @@
-<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>