cnhis-design-vue 0.1.77-beta → 0.1.81-beta

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

@@ -4,6 +4,7 @@
     v-if="item.com == 'SelectMui'"
     :placeholder="`请选择${item.alias || item.title}`"
     style="width: 160px"
+    :dropdownMatchSelectWidth="false"
     :maxTagCount="handleMaxTagCount(item)"
     :maxTagPlaceholder="handleMaxTag(item)"
     showSearch
@@ -20,41 +21,58 @@
     <a-spin v-if="fetchingWordbook" slot="notFoundContent" size="small" />
     <template v-if="item.comType == 'SelectMuiWordBook'">
       <a-select-option
-        v-for="sea in item.dataSource"
+        v-for="(sea, k) in item.dataSource"
         :key="item.sid + sea.myName"
         :value="sea.myName"
         :title="sea.showKeys || sea.myName"
+        :disabled="k === 0 && hasShowKeys && item.hasFieldList"
       >
-        {{ sea.showKeys || 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.showKeys || sea.myName }}
+        </span>
       </a-select-option>
     </template>
     <template v-else>
       <a-select-option v-for="(i, d) in item.labelList" :key="d">
-        {{ i.labelName || "" }}
+        {{ i.labelName || '' }}
       </a-select-option>
     </template>
+
+    <div slot="dropdownRender" class="drop-down-container" slot-scope="menu">
+      <a-spin :spinning="fetchingWordbook">
+        <v-nodes :vnodes="menu" />
+        <select-pages v-if="!isnoPages" :searchPageConfig="item.searchPageConfig" :handleSearchChangePage="handleSearchChangePage" />
+      </a-spin>
+    </div>
   </a-select>
 </template>
 <script>
 import { Select, Spin, Icon } from 'ant-design-vue';
 import utils from '@/utils/utils-map';
+import selectPages from './select-pages';
 export default {
-  name: "multiSelect",
+  name: 'multiSelect',
   components: {
-    [Select.name]:Select,
+    [Select.name]: Select,
     [Select.Option.name]: Select.Option,
     [Spin.name]: Spin,
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
+    selectPages,
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes
+    }
   },
-  props: [
-    "item",
-    "maxTagPlaceholder",
-    "outFilterChange",
-    "handleWordBookSearch",
-    "dropdownVisibleChange",
-    "source",
-    "fetchingWordbook"
-  ],
+  props: ['item', 'maxTagPlaceholder', 'outFilterChange', 'handleWordBookSearch', 'dropdownVisibleChange', 'source', 'fetchingWordbook'],
   data() {
     return {};
   },
@@ -70,9 +88,22 @@ export default {
     handleMaxTag() {
       return function(item) {
         let len = this.maxTagPlaceholder(item);
-        if (len <= 1) return "";
+        if (len <= 1) return '';
         return `已选${this.maxTagPlaceholder(item)}个${item.alias || item.title}`;
       };
+    },
+
+    // 有没有分页配置
+    isnoPages(){
+     const { searchPageConfig } = this.item || {};
+     if(!searchPageConfig) return;
+
+      return searchPageConfig.page <= 1 && !searchPageConfig.hasNextPage;
+    },
+
+    hasShowKeys(){
+      let showKeys = this?.item?.setting?.wordbook?.showKeys || [];
+      return showKeys.length > 0
     }
   },
   watch: {},
@@ -88,11 +119,13 @@ export default {
       let refDom = this.$refs.quickInputSelect;
       if (!refDom) return;
       let selectDom = refDom.$el;
-      let pDom = selectDom.querySelector(".ant-select-selection--multiple");
-      let hasTag = pDom.querySelector(".quick-input-select-span");
+      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 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);
@@ -101,6 +134,13 @@ export default {
 
     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 });
     }
   }
 };
@@ -138,4 +178,13 @@ export default {
   margin-right: 8px;
   height: 32px;
 }
+
+.c-s-title-line {
+  font-weight: 700;
+  color: #000;
+  font-size: 14px;
+}
+.c-s-content-item {
+  padding: 0 5px;
+}
 </style>

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

@@ -0,0 +1,72 @@
+<template functional>
+  <div class="form-select-btn" @mousedown="e => e.preventDefault()">
+    <a-button
+      :disabled="props.searchPageConfig.page <= 1"
+      type="dashed"
+      block
+      @click.self.stop="props.handleSearchChangePage('prev')"
+    >
+      <a-icon type="left" /> 上一页
+    </a-button>
+    <a-button
+      :disabled="!props.searchPageConfig.hasNextPage"
+      type="dashed"
+      block
+      @click.self.stop="props.handleSearchChangePage('next')"
+    >
+      下一页 <a-icon type="right" />
+    </a-button>
+  </div>
+</template>
+
+<script>
+import {Button,Icon} from 'ant-design-vue'
+export default {
+  name: "selectPages",
+  components:{
+    [Button.name]:Button,
+    [Icon.name]:Icon
+  },
+  props: {
+    searchPageConfig: {
+      type: Object,
+      default: () => ({
+        page: 1,
+        total: 1,
+        hasNextPage: false
+      })
+    },
+    handleSearchChangePage: {
+      type: Function,
+      default: () => {}
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.form-select-btn {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-around;
+  border-top: 1px solid #d5d5d5;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  /deep/ .ant-btn {
+    border: none;
+    border-radius: 0 0 4px 4px;
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+  /deep/ .ant-btn-dashed[disabled] {
+    background-color: #fff !important;
+  }
+
+  .ant-btn + .ant-btn {
+    border-left: 1px solid #d5d5d5;
+    border-bottom-left-radius: 0;
+  }
+}
+</style>

package/packages/table-filter/src/components/out-quick-search/out-quick-search.vue

@@ -91,6 +91,7 @@
 
 import multiSelect from '../multi-select/multi-select';
 import { filterApiFn } from '../../mixins/mixins';
+import wordBookutils from '../../mixins/wordBookutils';
 
 const EVALUATEList = [
   {
@@ -149,7 +150,7 @@ export default {
 
   // 方法
   methods: {
-    handleWordBookSearch(value, item) {
+    handleWordBookSearch(value, item, config = {}) {
       if (item.comType != "SelectMuiWordBook") return;
       let curAutograph = item.settingObj.wordbook && item.settingObj.wordbook.autograph;
       let params = {
@@ -163,8 +164,9 @@ export default {
           obj[item.p_name] = item.p_value;
         });
       }
-      this.getWordbookData(item.setting.wordbook, { ...params, ...obj }).then(({ data }) => {
-        this.handleWordbookData(item, data);
+      let rp = { ...params, ...obj, ...config }
+      this.getWordbookData(item.setting.wordbook, rp).then(({ data }) => {
+        this.handleWordbookData(item, data, rp);
       });
     },
     dropdownVisibleChange(open, item) {
@@ -180,43 +182,16 @@ export default {
           obj.autograph = item.settingObj.wordbook.autograph;
         }
         this.getWordbookData(item.setting.wordbook, obj).then(({ data }) => {
-          this.handleWordbookData(item, data);
+          this.handleWordbookData(item, data, obj);
         });
       }
     },
-    handleWordbookData(item, data) {
-      let { setting = {} } = item;
-      let { showKeys = [], defaultValue, defaultValueTitle } = setting.wordbook || {};
-      let defaultItem = null;
-      if (defaultValue && defaultValueTitle) {
-        defaultItem = {
-          myName: defaultValue,
-          showKeys: defaultValueTitle
-        };
-      }
-      if (data && data.result) {
-        // 数组赋值并添加唯一name
-        item.dataSource = data.map.rows.map(row => {
-          let showKeysStr = [];
-          showKeys.forEach(ren => {
-            showKeysStr.push(row[ren]);
-          });
-          return Object.assign(row, {
-            myName: row[item.setting.wordbook.field_key],
-            showKeys: showKeysStr.join("")
-          });
-        });
-        // 数组对象去重
-        let obj = {};
-        let arr = item.dataSource.reduce((cur, next) => {
-          obj[next.myName] ? "" : (obj[next.myName] = true && cur.push(next));
-          return cur;
-        }, []);
-        if (defaultItem) {
-          arr.unshift(defaultItem);
-        }
-        item.dataSource = arr;
-      }
+    handleWordbookData(item, data, params) {
+      this.$set(item, "hasFieldList", false);
+      const {rows,hasFieldList,searchPageConfig} = wordBookutils.handleWordbookData(item,data,params);
+      this.$set(item, "hasFieldList", hasFieldList);
+      this.$set(item, "dataSource", rows);
+      item.searchPageConfig = Object.assign(item.searchPageConfig, searchPageConfig);
     },
     getWordbookData(o, obj) {
       let { id, filterKeys, wordbookType } = o;
@@ -227,6 +202,7 @@ export default {
         wordbookId: id,
         fieldKeys: resFieldKeys,
         wordbookType: wordbookType || "WORDBOOK",
+        asyncCount: 1, // 开启性能模式
         ...obj
       };
       return this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: o }).then(res => {

package/packages/table-filter/src/mixins/mixins.js

@@ -402,6 +402,13 @@ export const outQuickSearchFn = {
           this.$set(el, "comType", "SelectMuiWordBook");
           this.$set(el, "value", []);
           this.$set(el, "dataSource", []);
+          this.$set(el, "searchPageConfig", {
+            keyword: undefined,
+            isRequest: false, // 是否已请求
+            page: 1, // 当前页
+            total: 1, // 总页数
+            hasNextPage: false
+          });
         } else {
           if (["MONEY", "PERCENTAGE", "AGE", "NUMBER"].includes(attr) || el.fieldType == "NUMBER") {
             this.$set(el, "con", "BIGANDLESS");

package/packages/table-filter/src/mixins/wordBookutils.js

@@ -0,0 +1,98 @@
+import vexutils from '@/utils/vexutils';
+
+const SYMBOL = "<&=&>"
+/**
+ * 处理  getWordbookData 接口返回的数据以及配置
+ */
+const formatWordbookDataUtils = {
+  hasArray: (arr) => Array.isArray(arr) && arr.length > 0,
+  handleWordbookData(item, data, params) {
+    // this.$set(item, "hasFieldList", false);
+    let { setting = {} } = item;
+    let { showKeys = [], defaultValue, defaultValueTitle } = setting.wordbook || {};
+    let defaultItem = null;
+
+    let resArr = [];
+    let hasFieldList = false;
+    let searchPageConfig = {};
+
+    if (defaultValue && defaultValueTitle) {
+      defaultItem = {
+        myName: defaultValue,
+        showKeys: defaultValueTitle
+      };
+    }
+    if (data && data.result) {
+       let {  page, hasNextPage,fieldList } = data.map;
+        searchPageConfig = Object.assign(item.searchPageConfig, {
+          page,
+          hasNextPage,
+          isRequest: true,
+          keyword: params?.keyword || undefined
+        });
+      // 数组赋值并添加唯一name
+      let rows = data.map.rows.map(row => {
+        let showKeysStr = [];
+        showKeys.forEach(ren => {
+          let str = vexutils.stringToValue(row[ren],'change_text')
+          showKeysStr.push(str);
+        });
+        let name = vexutils.stringToValue(row[item.setting.wordbook.field_key],'value')
+        return Object.assign(row, {
+          myName: name,
+          showKeys: showKeysStr.join(SYMBOL)
+        });
+      });
+      // 数组对象去重
+      let obj = {};
+      resArr = rows.reduce((cur, next) => {
+        obj[next.myName] ? "" : (obj[next.myName] = true && cur.push(next));
+        return cur;
+      }, []);
+      if (defaultItem) {
+        resArr.unshift(defaultItem);
+      }
+      if(formatWordbookDataUtils.hasArray(fieldList) && formatWordbookDataUtils.hasArray(showKeys) && showKeys.length > 1){
+        let t = formatWordbookDataUtils.getTitleHeader(fieldList,showKeys);
+        resArr.unshift({
+            myName: t,
+          showKeys: t,
+           sid: Math.random()
+        })
+        // this.$set(item, "hasFieldList", true);
+        hasFieldList = true;
+      }
+      // this.$set(item, "dataSource", resArr);
+    }
+
+    return {
+      rows:resArr,
+      hasFieldList,
+      searchPageConfig
+    }
+  },
+
+  // 下拉搜索框获取字段title
+  getTitleHeader(fieldList, renderKey) {
+    let titleHeader = [];
+    let renderKeyArr = [];
+    if (Array.isArray(renderKey)) {
+      renderKeyArr = [...renderKey];
+    } else {
+      renderKeyArr = [renderKey];
+    }
+    renderKeyArr.forEach(render => {
+      for (let i = 0; i < fieldList.length; i++) {
+        if (render === fieldList[i].columnName) {
+          titleHeader.push(`${fieldList[i].title}`);
+          break;
+        }
+      }
+    });
+    let res = titleHeader.join(SYMBOL);
+    return res;
+  },
+}
+
+
+export default formatWordbookDataUtils;

package/packages/table-filter/src/quick-search/QuickSearch.vue

@@ -714,6 +714,8 @@ import rangeAge from '../components/range-age/index';
 import multiSelect from '../components/multi-select/multi-select';
 import resize from 'vue-resize-directive';
 import { durationMixin, $utils, filterApiFn } from '../mixins/mixins';
+import vexutils from '@/utils/vexutils';
+import wordBookutils from '../mixins/wordBookutils';
 import create from '@/core/create';
 export default create({
   name: "quick-search",
@@ -980,6 +982,13 @@ export default create({
             this.$set(el, "value", []);
             this.$set(el, "com", "SelectMui");
             this.$set(el, "comType", "SelectMuiWordBook");
+            this.$set(el, "searchPageConfig", {
+              keyword: undefined,
+              isRequest: false, // 是否已请求
+              page: 1, // 当前页
+              total: 1, // 总页数
+              hasNextPage: false
+            });
             return;
           } else if (el.setting.showSetting && el.setting.showSetting.length > 0) {
             this.$set(el, "con", "CONVERT");
@@ -1095,6 +1104,7 @@ export default create({
         wordbookId: id,
         fieldKeys: resFieldKeys,
         wordbookType: wordbookType || "WORDBOOK",
+        asyncCount: 1, // 开启性能模式
         ...obj
       };
       return this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: o }).then(res => {
@@ -1104,39 +1114,12 @@ export default create({
         this.fetchingWordbook = false;
       });
     },
-    handleWordbookData(item, data) {
-      let { setting = {} } = item;
-      let { showKeys = [], defaultValue, defaultValueTitle } = setting.wordbook || {};
-      let defaultItem = null;
-      if (defaultValue && defaultValueTitle) {
-        defaultItem = {
-          myName: defaultValue,
-          showKeys: defaultValueTitle
-        };
-      }
-      if (data && data.result) {
-        // 数组赋值并添加唯一name
-        let rows = data.map.rows.map(row => {
-          let showKeysStr = [];
-          showKeys.forEach(ren => {
-            showKeysStr.push(row[ren]);
-          });
-          return Object.assign(row, {
-            myName: row[item.setting.wordbook.field_key],
-            showKeys: showKeysStr.join("")
-          });
-        });
-        // 数组对象去重
-        let obj = {};
-        let arr = rows.reduce((cur, next) => {
-          obj[next.myName] ? "" : (obj[next.myName] = true && cur.push(next));
-          return cur;
-        }, []);
-        if (defaultItem) {
-          arr.unshift(defaultItem);
-        }
-        this.$set(item, "dataSource", arr);
-      }
+    handleWordbookData(item, data, params) {
+      this.$set(item, "hasFieldList", false);
+      const {rows,hasFieldList,searchPageConfig} = wordBookutils.handleWordbookData(item,data,params);
+      this.$set(item, "hasFieldList", hasFieldList);
+      this.$set(item, "dataSource", rows);
+      item.searchPageConfig = Object.assign(item.searchPageConfig, searchPageConfig);
     },
     filterChange() {},
     maxTagPlaceholder(item) {
@@ -1161,14 +1144,14 @@ export default create({
         this.curAutograph = item.settingObj.wordbook && item.settingObj.wordbook.autograph;
         this.searchItem = item;
         this.getWordbookData(item.setting.wordbook, obj).then(({ data }) => {
-          this.handleWordbookData(item, data);
+          this.handleWordbookData(item, data, obj);
         });
       }
     },
     /**
      * 输入自动联想
      */
-    handleSearch(value, item) {
+    handleSearch(value, item, config={}) {
       let params = {
         keyword: value,
         autograph: this.curAutograph
@@ -1180,14 +1163,15 @@ export default create({
           obj[item.p_name] = item.p_value;
         });
       }
-      this.getWordbookData(this.curWordbookData, { ...params, ...obj }).then(({ data }) => {
-        this.handleWordbookData(this.searchItem, data);
+      let rp = { ...params, ...obj, ...config };
+      this.getWordbookData(this.curWordbookData, rp).then(({ data }) => {
+        this.handleWordbookData(this.searchItem, data, rp);
       });
     },
     onSave() {
       let mergeConObj = this.getMergeConObj();
       this.resetChangeWindow();
-      
+
       if (!this.validConObj(mergeConObj, this.searchFieldList, this.searchFieldLimit)) return false;
       this.$emit("onSave", mergeConObj);
       return this.quickSearch;

package/src/utils/vexutils.js

@@ -681,7 +681,23 @@ XEUtils.mixin({
   },
   filterOption(input, option) {
     return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-  }
+  },
+
+  /**
+   * 转换含有###的值
+   * @param {*} item
+   * @param {*} k key
+   * @returns
+   */
+   stringToValue(item, k = "value") {
+      if (XEUtils.isString(item)) {
+        if (item && item.startsWith("###{")) {
+          let temp = JSON.parse(item.replace("###", ""));
+          item = temp[k];
+        }
+      }
+    return item;
+  },
 });
 
 export default XEUtils;