cnhis-design-vue 2.2.1 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "前端业务UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",

package/packages/big-table/src/BigTable.vue

@@ -165,6 +165,7 @@ import batchEditing from './utils/batchEditing';
 import checkStrictly from './utils/checkStrictly';
 import headerFilter from './utils/headerFilter';
 import EditForm from './components/edit-form/EditForm.vue';
+import HeaderFilter from './components/HeaderFilter.vue'
 
 import nestTable from './utils/nestTable';
 import eventBroadcast from './utils/eventBroadcast';
@@ -1522,7 +1523,8 @@ export default create({
               checkAll: false,
               searchFilterText: '',
               searchFilterCONVERT: [],
-              filterSort: ''
+              filterSort: '',
+              wordbookSearch: {...this.wordbookSearchDef}
             })
           );
           col.slots.header = this.formatterHeader(item);
@@ -1625,6 +1627,7 @@ export default create({
     setFilterStatus() {
       // 表头没有过滤字段 不需要设置
       if (!this.filterFields || !Object.keys(this.filterFields).length) return;
+      this.filterCheckedOptionMap = {};
       let val = this.quickSearchConfig;
       if (!val || !val.length) {
         let keys = Object.keys(this.filterFields);
@@ -1647,9 +1650,17 @@ export default create({
             this.$set(this.filterFields[itemKey], 'CONVERT', []);
             return false;
           }
+          let value = item.value;
+          if (!this.isApiTable) {
+            if(Array.isArray(value)&& value.length) {
+              value = value.map(item => JSON.stringify(item))
+            }
+            if(value && typeof value === 'string' ) {
+              value = value.includes('|#|') ? value.split('|#|') : [value]
+            }
+          }
 
-          let value = this.isApiTable ? item.value : item.value.map(item => JSON.stringify(item));
-          this.$set(this.filterFields[itemKey], 'CONVERT', value);
+          this.$set(this.filterFields[itemKey], 'CONVERT', value || []);
         }
       });
     },
@@ -1730,86 +1741,20 @@ export default create({
                   width: this.filterWidth + this.distance + 'px'
                 }}
               >
-                <div class="sort-list" style={{ display: field.isSort ? 'block' : 'none' }}>
-                  <div class={['sort-item', { active: field.filterSort === 'asc' }]} onClick={() => this.handlefilterBoxClickSort('asc', field)}>
-                    <i class="sort-icon sort-icon-asc" />
-                    <span class="sort-text">升序 A to Z</span>
-                  </div>
-                  <div class={['sort-item', { active: field.filterSort === 'desc' }]} onClick={() => this.handlefilterBoxClickSort('desc', field)}>
-                    <i class="sort-icon sort-icon-asc" />
-                    <span class="sort-text">降序 Z to A</span>
-                  </div>
-                </div>
-
-                <div class="filter-header">
-                  <i class="filter-header-icon vxe-filter--btn vxe-icon--funnel" />
-                  <span class="filter-header-text">筛选</span>
-                </div>
-
-                {showfilterSearch ? (
-                  <div class="checkbox-wrap checkbox-wrap--search">
-                    <div class="check-search-wrap">
-                      <a-input-search
-                        placeholder="字段搜索"
-                        class="check-seach-input"
-                        allowClear={true}
-                        onSearch={val => {
-                          this.handleFilterSeachDebounce(val, item);
-                        }}
-                      />
-                    </div>
-                  </div>
-                ) : (
-                  ''
-                )}
-                <div class="checkbox-box">
-                  <div class="checkbox-wrap js-checkbox-wrap" style={{ height: this.filterHeight + this.distance + 'px' }}>
-                    {showSelectAll && !field.searchFilterText ? (
-                      <div class="ant-checkbox-group">
-                        <a-checkbox
-                          indeterminate={field.indeterminate}
-                          checked={field.checkAll}
-                          onChange={val => {
-                            this.handleFilterChangeAll(val, field);
-                          }}
-                        >
-                          全选
-                        </a-checkbox>
-                      </div>
-                    ) : (
-                      ''
-                    )}
-
-                    {!field.searchFilterText ? (
-                      <a-checkbox-group options={filterOptions} value={field.CONVERT} onChange={val => this.handleFilterChange(val, item.columnName, field)} />
-                    ) : (
-                      <a-checkbox-group
-                        options={field.filterSettingMap && field.filterSettingMap.filterOptions || []}
-                        value={field.searchFilterCONVERT}
-                        onChange={val => this.handleFilterSearchChange(val, item.columnName, field)}
-                      />
-                    )}
-                  </div>
-                </div>
-
-                <div class="checkbox-btn-wrap" style={{ justifyContent: field.CONVERT.length ? 'space-between' : 'flex-end' }}>
-                  {field.CONVERT.length ? (
-                    <div class="checkbox-btn-status">
-                      <span>已选择{field.CONVERT.length}项</span>
-                      <a-button class="checkbox-btn checkbox-btn-clear" type="link" onClick={() => this.handleFilterClearAll(field)}>
-                        清空
-                      </a-button>
-                    </div>
-                  ) : null}
-                  <div>
-                    <a-button class="checkbox-btn" onClick={() => this.handleCancelFilter()}>
-                      取消
-                    </a-button>
-                    <a-button class="checkbox-btn" type="primary" onClick={() => this.handleFilter(field)}>
-                      确定
-                    </a-button>
-                  </div>
-                </div>
+                <HeaderFilter
+                  field={field}
+                  cHeight={this.filterHeight + this.distance}
+                  handlefilterBoxClickSort={this.handlefilterBoxClickSort}
+                  handleFilterSeachDebounce={this.handleFilterSeachDebounce}
+                  handleFilterChangeAll={this.handleFilterChangeAll}
+                  handleFilterChange={this.handleFilterChange}
+                  handleFilterSearchChange={this.handleFilterSearchChange}
+                  handleFilterClearAll={this.handleFilterClearAll}
+                  handleCancelFilter={this.handleCancelFilter}
+                  handleFilter={this.handleFilter}
+                >
+                </HeaderFilter>
+
                 <div
                   class="arrows-icon"
                   onmousedown={e => {

package/packages/big-table/src/assets/style/table-global.less

@@ -2,170 +2,16 @@
 .big-table-filter-wrap {
   position: absolute;
   z-index: 99998;
-  transform: translateX(-2%);
-
-  // max-width: 400px;
   min-width: 280px;
+  min-height: 100px;
   border-radius: 4px;
   background-color: #fff;
-  // border: 1px solid #dadce0;
   -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width 2s;
-  padding-top: 8px;
-  text-align: left;
-  .sort-item {
-    line-height: 32px;
-    padding: 0 13px;
-    display: flex;
-    align-items: center;
-
-    &:hover,
-    &.active {
-      background: #f2f2f2;
-    }
-  }
-  .sort-icon {
-    width: 16px;
-    height: 16px;
-    background-size: contain;
-    display: inline-block;
-  }
-  .sort-icon-asc {
-    background-image: url('../img/icon-asc.png');
-  }
-  .sort-text {
-    margin-left: 11px;
-    font-size: 14px;
-    line-height: 32px;
-    color: rgba(0, 0, 0, 0.8);
-  }
-  .sort-icon-desc {
-    background-image: url('../img/icon-desc.png');
-  }
-  .filter-header {
-    padding: 0 13px;
-    cursor: initial;
-  }
-  .filter-header-icon {
-    border-top-color: #333;
-    border-right-color: #333;
-  }
-  .filter-header-text {
-    margin-left: 11px;
-  }
-
-  .check-search-wrap {
-    padding: 8px 0;
-    width: 100%;
-    background: #f7f7f7;
-    display: flex;
-    justify-content: center;
-  }
-  .check-seach-input {
-    // width: 206px;
-    line-height: 32px;
-  }
-
-  .checkbox-box {
-    padding-right: 3px;
-    margin-top: 4px;
-    width: 100%;
-  }
-  .checkbox-wrap {
-    padding-left: 13px;
-    padding-right: 3px;
-    width: 100%;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    // max-height: 165px;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #d5d5d5;
-      border-radius: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: #fff; //设置背景透明
-      border-radius: 4px;
-    }
-    &::-webkit-scrollbar-corner {
-      background-color: #000;
-      border-radius: 4px;
-      width: 4px;
-    }
-  }
-  .checkbox-wrap--search {
-    padding-right: 10px;
-  }
-
-  .ant-checkbox-group-item,
-  .ant-checkbox-wrapper {
-    padding-left: 10px;
-    padding-right: 10px;
-    line-height: 32px;
-    height: 32px;
-    box-sizing: border-box;
-    margin-right: 0;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background: #f7f7f7;
-    display: block;
-
-    &:hover {
-      background: #ececec;
-    }
-  }
-
-  .checkbox-btn-wrap {
-    display: flex;
-    // justify-content: space-between;
-    padding: 8px 10px 8px 14px;
-
-    .checkbox-btn {
-      width: 56px;
-      padding: 0;
-    }
-    .checkbox-btn + .checkbox-btn {
-      margin-left: 8px;
-    }
-    .checkbox-btn-status {
-      .checkbox-btn {
-        border: 0;
-        border-radius: 0;
-        width: initial;
-        margin: 0 13px;
-        position: relative;
-        &:hover::after {
-          display: block;
-          content: '';
-          position: absolute;
-          bottom: 5px;
-          width: 100%;
-          height: 1px;
-          background-color: @primary-color;
-        }
-      }
-    }
-  }
   .arrows-icon {
     position: absolute;
     bottom: -1px;
     right: -1px;
-    // transform: rotate(90deg);
     font-size: 15px;
     cursor: nw-resize;
     width: 25px;

package/packages/big-table/src/components/HeaderFilter.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="c-filter-container">
+    <a-spin :spinning="wordbookSearch.fetchingWordbook" class="filter-loading" >
+      
+     
+        <div class="sort-list" :style="{ display: field.isSort ? 'block' : 'none' }">
+          <div
+            :class="['sort-item', { active: field.filterSort === 'asc' }]"
+            @click="() => handlefilterBoxClickSort('asc', field)"
+          >
+            <i class="sort-icon sort-icon-asc"></i>
+            <span class="sort-text">升序 A to Z</span>
+          </div>
+          <div
+            :class="['sort-item', { active: field.filterSort === 'desc' }]"
+            @click="() => handlefilterBoxClickSort('desc', field)"
+          >
+            <i class="sort-icon sort-icon-asc"></i>
+            <span class="sort-text">降序 Z to A</span>
+          </div>
+        </div>
+        <template v-if="searchErr">
+          <a-empty :description="resultMsg" />
+        </template>
+
+        <div class="check-wrap-div" v-show="!searchErr">
+          <div v-if="showfilterSearch" class="checkbox-wrap checkbox-wrap--search">
+            <div class="check-search-wrap">
+              <a-input-search
+                placeholder="字段搜索"
+                class="check-seach-input"
+                :allowClear="true"
+                @search="(val) => handleFilterSeachDebounce(val, field)"
+              />
+            </div>
+          </div>
+          <div class="checkbox-box">
+            <div class="checkbox-wrap js-checkbox-wrap" :style="{ height: useCHeight + 'px' }">
+              <div v-if="showCheckAll" class="ant-checkbox-group">
+                <a-checkbox
+                  :indeterminate="indeterminate"
+                  :checked="checkAll"
+                  @change="(val) => handleFilterChangeAll(val, field)"
+                >
+                  全选
+                </a-checkbox>
+              </div>
+              <a-checkbox-group
+                v-if="!searchFilterText"
+                :options="filterOptions"
+                name="CheckboxHeaderFilter_C"
+                :value="CONVERT"
+                class="c-chekbox-group"
+                @change="(val) => handleFilterChange(val, field.columnName, field)"
+              >
+                <!-- 这里的设置主要是给字典搜索的筛选, 如果展示的label过长那么添加个title -->
+                <template slot="label" slot-scope="{ _show_title }" >
+                  <span  :title="_show_title">{{ _show_title }}</span>
+                </template>
+              </a-checkbox-group>
+              <a-checkbox-group
+                v-else
+                :options="filterOptions"
+                :value="searchFilterCONVERT"
+                class="s-chekbox-group"
+                name="CheckboxHeaderFilter_S"
+                @change="(val) => handleFilterSearchChange(val , field.columnName, field)"
+              />
+            </div>
+            <div  v-if="showPage" class="checkbox-page">
+              <select-pages :searchPageConfig="wordbookSearch" :handleSearchChangePage="handleSearchChangePage" />
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="checkbox-btn-wrap"
+          :style="{ justifyContent: CONVERTLen ? 'space-between' : 'flex-end' }"
+        >
+          <div v-if="CONVERTLen" class="checkbox-btn-status">
+            <span>已选择{{ CONVERTLen }}项</span>
+            <a-button class="checkbox-btn checkbox-btn-clear" type="link" @click="() => handleFilterClearAll(field)">
+              清空
+            </a-button>
+          </div>
+          <div>
+            <a-button class="checkbox-btn" @click="() => handleCancelFilter(field)"> 取消 </a-button>
+            <a-button class="checkbox-btn" type="primary" @click="() => handleFilter(field)">确定 </a-button>
+          </div>
+        </div>
+    </a-spin>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+import { Checkbox, Input, Button, Spin, Empty } from 'ant-design-vue';
+import selectPages from '@/component/select-pages';
+export default {
+  name: "HeaderFilter",
+  props: {
+    field: { type: Object, default: () => ({}) },
+    cHeight: { type: Number, default: 0 },
+    handlefilterBoxClickSort: { type: Function, default: () => {} },
+    handleFilterSeachDebounce: { type: Function, default: () => {} },
+    handleFilterChangeAll: { type: Function, default: () => {} },
+    handleFilterChange: { type: Function, default: () => {} },
+    handleFilterSearchChange: { type: Function, default: () => {} },
+    handleFilterClearAll: { type: Function, default: () => {} },
+    handleCancelFilter: { type: Function, default: () => {} },
+    handleFilter: { type: Function, default: () => {} }
+  },
+  components: {
+    [Checkbox.Group.name]:Checkbox.Group,
+    [Checkbox.name]: Checkbox,
+    [Input.Search.name]: Input.Search,
+    [Input.name]: Input,
+    [Button.name]: Button,
+    [Spin.name]: Spin,
+    [Empty.name]: Empty,
+    selectPages
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    
+    filterSettingMap() {
+      return this.field?.filterSettingMap || {};
+    },
+    useCHeight() {
+      if(!this.showPage) return this.cHeight;
+      return this.cHeight - 33;
+    },
+    showfilterSearch() {
+      return this.filterSettingMap.showfilterSearch;
+    },
+    searchFilterText() {
+      return this.field?.searchFilterText;
+    },
+    showCheckAll() {
+      return this.filterSettingMap.showSelectAll && !this.searchFilterText;
+    },
+    checkAll() {
+      return this.field?.checkAll;
+    },
+    indeterminate() {
+      return this.field?.indeterminate;
+    },
+    filterOptions() {
+      return this.filterSettingMap.filterOptions || [];
+    },
+    CONVERT() {
+      return this.field?.CONVERT || [];
+    },
+    searchFilterCONVERT() {
+      return this.field?.searchFilterCONVERT || [];
+    },
+    CONVERTLen() {
+      return this.CONVERT?.length || 0;
+    },
+    wordbookSearch() {
+      return this.field?.wordbookSearch || {};
+    },
+    searchErr(){
+      return this.filterSettingMap.isVaildWordbook && this.wordbookSearch.isRequest && this.wordbookSearch.result && this.wordbookSearch.result !== 'SUCCESS'
+    },
+    resultMsg(){
+      return this.wordbookSearch.resultMsg || '暂无数据';
+    },
+    showPage(){
+      const isVaildWordbook =  this.filterSettingMap.isVaildWordbook;
+      const {hasNextPage, page} = this.wordbookSearch;
+      return isVaildWordbook && (hasNextPage || page > 1)
+    },
+    
+  },
+  watch: {},
+  // 生命周期
+  beforeCreate(){},
+  created() {},
+  mounted() {},
+
+  // 方法
+  methods: {
+    handleSearchChangePage(type){
+      let cType = type || 'next';
+      let { page, keyword = undefined } = this?.wordbookSearch;
+      page = cType === 'next' ? page + 1 : page - 1;
+      this.handleFilterSeachDebounce(keyword, this.field, {page});
+    },
+  }
+};
+</script>
+<style lang="less">
+.c-filter-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transition: width 2s;
+  padding-top: 8px;
+  text-align: left;
+  border-radius: 4px;
+  .filter-loading {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .ant-spin-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+  .sort-item {
+    line-height: 32px;
+    padding: 0 13px;
+    display: flex;
+    align-items: center;
+
+    &:hover,
+    &.active {
+      background: #f2f2f2;
+    }
+  }
+  .sort-icon {
+    width: 16px;
+    height: 16px;
+    background-size: contain;
+    display: inline-block;
+  }
+  .sort-icon-asc {
+    background-image: url("../assets/img/icon-asc.png");
+  }
+  .sort-text {
+    margin-left: 11px;
+    font-size: 14px;
+    line-height: 32px;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  .sort-icon-desc {
+    background-image: url("../assets/img/icon-desc.png");
+  }
+  .filter-header {
+    padding: 0 13px;
+    cursor: initial;
+  }
+  .filter-header-icon {
+    border-top-color: #333;
+    border-right-color: #333;
+  }
+  .filter-header-text {
+    margin-left: 11px;
+  }
+
+  .check-search-wrap {
+    padding: 8px 0;
+    width: 100%;
+    background: #f7f7f7;
+    display: flex;
+    justify-content: center;
+  }
+  .check-seach-input {
+    line-height: 32px;
+  }
+
+  .checkbox-box {
+    padding-right: 3px;
+    margin-top: 4px;
+    width: 100%;
+  }
+  .check-wrap-div {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  .checkbox-wrap {
+    padding-left: 13px;
+    padding-right: 3px;
+    width: 100%;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #d5d5d5;
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: #fff; //设置背景透明
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-corner {
+      background-color: #000;
+      border-radius: 4px;
+      width: 4px;
+    }
+  }
+  .checkbox-wrap--search {
+    padding-right: 10px;
+  }
+
+  .ant-checkbox-group-item,
+  .ant-checkbox-wrapper {
+    padding-left: 10px;
+    padding-right: 10px;
+    line-height: 32px;
+    height: 32px;
+    box-sizing: border-box;
+    margin-right: 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: #f7f7f7;
+    display: block;
+
+    &:hover {
+      background: #ececec;
+    }
+  }
+
+  .checkbox-page {
+    padding-left: 13px;
+    padding-right: 7px;
+    .form-select-btn {
+      border: 1px solid #d5d5d5;
+    }
+  }
+
+  .checkbox-btn-wrap {
+    display: flex;
+    padding: 8px 10px 8px 14px;
+
+    .checkbox-btn {
+      width: 56px;
+      padding: 0;
+    }
+    .checkbox-btn + .checkbox-btn {
+      margin-left: 8px;
+    }
+    .checkbox-btn-status {
+      .checkbox-btn {
+        border: 0;
+        border-radius: 0;
+        width: initial;
+        margin: 0 13px;
+        position: relative;
+        &:hover::after {
+          display: block;
+          content: "";
+          position: absolute;
+          bottom: 5px;
+          width: 100%;
+          height: 1px;
+          background-color: @primary-color;
+        }
+      }
+    }
+  }
+}
+</style>

package/packages/big-table/src/utils/bigTableProps.js

@@ -105,7 +105,8 @@ const bigTableProps = {
   aboutPositionBtm: { type: Boolean, default: false },
   treeVirtualScroll: { type: Boolean, default: false }, // 树表是否开启虚拟滚动，目前值对 istree = 1 有效
   tableDataType: { type: String, defualt: 'SQL' },
-  libSource: { type: String }
+  libSource: { type: String },
+  requestGetWordbookData: Function
 };
 
 export default bigTableProps;