cnhis-design-vue 2.1.18 → 2.1.19

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

@@ -1,219 +1,219 @@
-<template>
-  <a-select
-    :mode="mode"
-    v-if="item.com == 'SelectMui'"
-    :placeholder="`请选择${item.alias || item.title}`"
-    :style="{width: `${item.advanceColWidth||160}px`}"
-    :dropdownMatchSelectWidth="false"
-    :maxTagCount="handleMaxTagCount(item)"
-    :maxTagPlaceholder="handleMaxTag(item)"
-    showSearch
-    :filterOption="false"
-    v-model="item.value"
-    @search="handleWordBookSearch($event, item)"
-    @dropdownVisibleChange="dropdownVisibleChange($event, item)"
-    class="quick-input-select"
-    :allowClear="item.explicitRequired != 1"
-    ref="quickInputSelect"
-    :class="{ 'quick-input-select-mul': handleMaxTagCount > 0 }"
-    :notFoundContent="fetchingWordbook ? undefined : '暂无数据'"
-  >
-    <!-- <a-spin v-if="fetchingWordbook" slot="notFoundContent" size="small" /> -->
-    <span v-if="fetchingWordbook" slot="notFoundContent" size="small" />
-    <template v-if="item.comType == 'SelectMuiWordBook'">
-      <a-select-option
-        v-for="(sea, k) in item.dataSource"
-        :key="item.sid + sea.myName"
-        :value="sea.myName"
-        :title="sea._show_title || sea.showKeys || sea.myName"
-        :disabled="(k === 0 && hasShowKeys && item.hasFieldList || (!showRemoveIcon && item.value && item.value.includes(sea.myName)))"
-      >
-        <div
-          v-if="item.hasFieldList && sea.showKeys"
-          :class="{
-            'c-s-title-line': k === 0,
-          }"
-          style="display: flex;"
-        >
-          <span style="flex: 1;" v-for="(v1, k1) in sea.showKeys.split('<&=&>')" :key="k1" class="c-s-content-item">{{ v1 }}</span>
-        </div>
-        <span v-else>
-          {{sea._show_title || sea.showKeys || sea.myName }}
-        </span>
-      </a-select-option>
-    </template>
-    <template v-else>
-      <a-select-option v-for="(i, d) in item.labelList" :key="d" :value="d" :disabled="(!showRemoveIcon && item.value && item.value.includes(d))">
-        {{ i.labelName || '' }}
-      </a-select-option>
-    </template>
-
-    <div slot="dropdownRender" class="c-m-sdrop-down-container" slot-scope="menu">
-      <a-spin :spinning="fetchingWordbook" :tip="`加载中...`" >
-        <v-nodes :vnodes="menu" />
-        <select-pages v-if="!isnoPages" :searchPageConfig="item.searchPageConfig" :handleSearchChangePage="handleSearchChangePage" />
-      </a-spin>
-    </div>
-    <span slot="removeIcon">
-        <a-icon v-if="showRemoveIcon" type="close" />
-        <span v-else></span>
-    </span>
-  </a-select>
-</template>
-<script>
-import { Select, Spin, Icon,Button } from 'ant-design-vue';
-import utils from '@/utils/utils-map';
-import selectPages from '@/component/select-pages';
-export default {
-  name: 'multiSelect',
-  components: {
-    [Select.name]: Select,
-    [Select.Option.name]: Select.Option,
-    [Spin.name]: Spin,
-    [Button.name]:Button,
-    [Icon.name]: Icon,
-    selectPages,
-    VNodes: {
-      functional: true,
-      render: (h, ctx) => ctx.props.vnodes
-    }
-  },
-  props: ['item', 'maxTagPlaceholder', 'outFilterChange', 'handleWordBookSearch', 'dropdownVisibleChange', 'source', 'fetchingWordbook',],
-  data() {
-    return {};
-  },
-
-  computed: {
-    handleMaxTagCount() {
-      return function(item) {
-        let len = this.maxTagPlaceholder(item);
-        if (len <= 1) return 1;
-        return 0;
-      };
-    },
-    handleMaxTag() {
-      return function(item) {
-        let len = this.maxTagPlaceholder(item);
-        if (len <= 1) return '';
-        return `已选${this.maxTagPlaceholder(item)}个${item.alias || item.title}`;
-      };
-    },
-
-    // 有没有分页配置
-    isnoPages(){
-     const { searchPageConfig } = this.item || {};
-     if(!searchPageConfig) return true;
-
-      return searchPageConfig.page <= 1 && !searchPageConfig.hasNextPage;
-    },
-
-    hasShowKeys(){
-      let showKeys = this?.item?.setting?.wordbook?.showKeys || [];
-      return showKeys.length > 0
-    },
-
-    showRemoveIcon(){
-      let v = this.item.value;
-      let f = 1 == this?.item?.filterExplicit
-      if(Array.isArray(v) && f){
-        let l = v.length;
-        if(this.item.explicitRequired == 1){
-          return l > 1
-        }
-      }
-
-      return true;
-    },
-    mode(){
-      return String(this?.item?.advanceOptionSetting) == '0'? 'default' : 'multiple'
-    }
-  },
-  watch: {},
-  // 生命周期
-  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');
-      let hasTag = pDom.querySelector('.quick-input-select-span');
-      if (!hasTag) {
-        let tag = document.createElement('span');
-        tag.className = 'quick-input-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);
-      }
-    },
-
-    filterOption(...arg) {
-      return utils.filterOption(...arg);
-    },
-
-    handleSearchChangePage(type) {
-      let cType = type || 'next';
-      let { page, keyword = undefined } = this?.item?.searchPageConfig;
-      page = cType === 'next' ? page + 1 : page - 1;
-      this.handleWordBookSearch(keyword, this.item, { page });
-    }
-  }
-};
-</script>
-<style lang="less">
-.ant-select-dropdown--empty {
-  .ant-select-dropdown-menu-item-disabled {
-    text-align: center;
-  }
-}
-.quick-input-select {
-  &.quick-input-select-mul {
-    .ant-select-selection--multiple {
-      max-height: unset !important;
-    }
-  }
-  .ant-select-selection--multiple {
-    position: relative;
-    max-height: 32px !important;
-    .quick-input-select-span {
-      position: absolute;
-      right: 2px;
-      top: 4px;
-      top: 50%;
-      right: 11px;
-      transform-origin: 50% 50%;
-      margin-top: -7px;
-      line-height: 1;
-      .quick-input-select-icon {
-        font-size: 12px;
-      }
-    }
-  }
-  margin-bottom: 8px;
-  margin-right: 8px;
-  height: 32px;
-}
-
-.c-s-title-line {
-  font-weight: 700;
-  color: #000;
-  font-size: 14px;
-}
-.c-s-content-item {
-  padding: 0 5px;
-}
-
-.c-m-sdrop-down-container {
-  .ant-select-dropdown-menu-item-disabled {
-    min-height: 42px;
-  }
-}
-</style>
+<template>
+  <a-select
+    :mode="mode"
+    v-if="item.com == 'SelectMui'"
+    :placeholder="`请选择${item.alias || item.title}`"
+    :style="{width: `${item.advanceColWidth||160}px`}"
+    :dropdownMatchSelectWidth="false"
+    :maxTagCount="handleMaxTagCount(item)"
+    :maxTagPlaceholder="handleMaxTag(item)"
+    showSearch
+    :filterOption="false"
+    v-model="item.value"
+    @search="handleWordBookSearch($event, item)"
+    @dropdownVisibleChange="dropdownVisibleChange($event, item)"
+    class="quick-input-select"
+    :allowClear="item.explicitRequired != 1"
+    ref="quickInputSelect"
+    :class="{ 'quick-input-select-mul': handleMaxTagCount > 0 }"
+    :notFoundContent="fetchingWordbook ? undefined : '暂无数据'"
+  >
+    <!-- <a-spin v-if="fetchingWordbook" slot="notFoundContent" size="small" /> -->
+    <span v-if="fetchingWordbook" slot="notFoundContent" size="small" />
+    <template v-if="item.comType == 'SelectMuiWordBook'">
+      <a-select-option
+        v-for="(sea, k) in item.dataSource"
+        :key="item.sid + sea.myName"
+        :value="sea.myName"
+        :title="sea._show_title || sea.showKeys || sea.myName"
+        :disabled="(k === 0 && hasShowKeys && item.hasFieldList || (!showRemoveIcon && item.value && item.value.includes(sea.myName)))"
+      >
+        <div
+          v-if="item.hasFieldList && sea.showKeys"
+          :class="{
+            'c-s-title-line': k === 0,
+          }"
+          style="display: flex;"
+        >
+          <span style="flex: 1;" v-for="(v1, k1) in sea.showKeys.split('<&=&>')" :key="k1" class="c-s-content-item">{{ v1 }}</span>
+        </div>
+        <span v-else>
+          {{sea._show_title || sea.showKeys || sea.myName }}
+        </span>
+      </a-select-option>
+    </template>
+    <template v-else>
+      <a-select-option v-for="(i, d) in item.labelList" :key="d" :value="d" :disabled="(!showRemoveIcon && item.value && item.value.includes(d))">
+        {{ i.labelName || '' }}
+      </a-select-option>
+    </template>
+
+    <div slot="dropdownRender" class="c-m-sdrop-down-container" slot-scope="menu">
+      <a-spin :spinning="fetchingWordbook" :tip="`加载中...`" >
+        <v-nodes :vnodes="menu" />
+        <select-pages v-if="!isnoPages" :searchPageConfig="item.searchPageConfig" :handleSearchChangePage="handleSearchChangePage" />
+      </a-spin>
+    </div>
+    <span slot="removeIcon">
+        <a-icon v-if="showRemoveIcon" type="close" />
+        <span v-else></span>
+    </span>
+  </a-select>
+</template>
+<script>
+import { Select, Spin, Icon,Button } from 'ant-design-vue';
+import utils from '@/utils/utils-map';
+import selectPages from '@/component/select-pages';
+export default {
+  name: 'multiSelect',
+  components: {
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option,
+    [Spin.name]: Spin,
+    [Button.name]:Button,
+    [Icon.name]: Icon,
+    selectPages,
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes
+    }
+  },
+  props: ['item', 'maxTagPlaceholder', 'outFilterChange', 'handleWordBookSearch', 'dropdownVisibleChange', 'source', 'fetchingWordbook',],
+  data() {
+    return {};
+  },
+
+  computed: {
+    handleMaxTagCount() {
+      return function(item) {
+        let len = this.maxTagPlaceholder(item);
+        if (len <= 1) return 1;
+        return 0;
+      };
+    },
+    handleMaxTag() {
+      return function(item) {
+        let len = this.maxTagPlaceholder(item);
+        if (len <= 1) return '';
+        return `已选${this.maxTagPlaceholder(item)}个${item.alias || item.title}`;
+      };
+    },
+
+    // 有没有分页配置
+    isnoPages(){
+     const { searchPageConfig } = this.item || {};
+     if(!searchPageConfig) return true;
+
+      return searchPageConfig.page <= 1 && !searchPageConfig.hasNextPage;
+    },
+
+    hasShowKeys(){
+      let showKeys = this?.item?.setting?.wordbook?.showKeys || [];
+      return showKeys.length > 0
+    },
+
+    showRemoveIcon(){
+      let v = this.item.value;
+      let f = 1 == this?.item?.filterExplicit
+      if(Array.isArray(v) && f){
+        let l = v.length;
+        if(this.item.explicitRequired == 1){
+          return l > 1
+        }
+      }
+
+      return true;
+    },
+    mode(){
+      return String(this?.item?.advanceOptionSetting) == '0'? 'default' : 'multiple'
+    }
+  },
+  watch: {},
+  // 生命周期
+  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');
+      let hasTag = pDom.querySelector('.quick-input-select-span');
+      if (!hasTag) {
+        let tag = document.createElement('span');
+        tag.className = 'quick-input-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);
+      }
+    },
+
+    filterOption(...arg) {
+      return utils.filterOption(...arg);
+    },
+
+    handleSearchChangePage(type) {
+      let cType = type || 'next';
+      let { page, keyword = undefined } = this?.item?.searchPageConfig;
+      page = cType === 'next' ? page + 1 : page - 1;
+      this.handleWordBookSearch(keyword, this.item, { page });
+    }
+  }
+};
+</script>
+<style lang="less">
+.ant-select-dropdown--empty {
+  .ant-select-dropdown-menu-item-disabled {
+    text-align: center;
+  }
+}
+.quick-input-select {
+  &.quick-input-select-mul {
+    .ant-select-selection--multiple {
+      max-height: unset !important;
+    }
+  }
+  .ant-select-selection--multiple {
+    position: relative;
+    max-height: 32px !important;
+    .quick-input-select-span {
+      position: absolute;
+      right: 2px;
+      top: 4px;
+      top: 50%;
+      right: 11px;
+      transform-origin: 50% 50%;
+      margin-top: -7px;
+      line-height: 1;
+      .quick-input-select-icon {
+        font-size: 12px;
+      }
+    }
+  }
+  margin-bottom: 8px;
+  margin-right: 8px;
+  height: 32px;
+}
+
+.c-s-title-line {
+  font-weight: 700;
+  color: #000;
+  font-size: 14px;
+}
+.c-s-content-item {
+  padding: 0 5px;
+}
+
+.c-m-sdrop-down-container {
+  .ant-select-dropdown-menu-item-disabled {
+    min-height: 42px;
+  }
+}
+</style>