doway-coms 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doway-coms",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "doway组件库",
   "author": "dowaysoft",
   "main": "packages/index.js",

package/packages/BasePagination/src/index.vue

@@ -19,7 +19,7 @@
         :page-size="pageSize"
         :total="totalRows"
         size="small"
-        :page-sizes="[10, 20 ,50, 100, 150, 200]"
+        :page-sizes="pageSizeOptions"
         @page-change="onPageChange"
         style="margin-top: 10px;"
         :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"

package/packages/BasePulldown/src/index.vue

@@ -1,4 +1,4 @@
-<template>
+  <template>
   <div class="d-control-container">
     <div
       class="d-control-label"
@@ -62,9 +62,13 @@
               ref="pupupGridView"
               :data="searchRows"
               @cell-click="gridCellClick"
+              @filter-visible="filterVisible"
               :columns="internalColumns"
               :checkbox-config="{ checkMethod: checkMethod }"
               @sort-change="sortChange"
+              :filter-config="{
+                remote: true,
+              }"
               :sort-config="{
                 multiple: true,
                 remote: true,
@@ -84,6 +88,40 @@
                   </div>
                 </div>
               </template>
+<!--              <template #checkbox_filter="scope">-->
+<!--                <div class="interceptor-class">-->
+<!--                  <a-checkbox-group-->
+<!--                    v-model="scope.column.filters[0].data.displayValues"-->
+<!--                    @keyup.enter.native="filterConfirm(scope.column)"-->
+<!--                  >-->
+<!--                    <div style="max-height:200px;overflow-y:scroll">-->
+<!--                      <div style="text-align:left;" v-for="loopSource in scope.column.params.dataSource" :key="loopSource.value">-->
+<!--                        <a-checkbox-->
+<!--                          v-show="loopSource.caption.indexOf(scope.column.filters[0].data.displayValueSearchText)>-1"-->
+<!--                          :value="loopSource.value"-->
+<!--                          style="margin: 5px 0;"-->
+<!--                        >{{ loopSource.caption }}-->
+<!--                        </a-checkbox>-->
+<!--                      </div>-->
+<!--                    </div>-->
+<!--                  </a-checkbox-group>-->
+<!--                  <br>-->
+<!--                  <a-button @click="filterConfirm(scope.column)">确认</a-button>-->
+<!--                </div>-->
+<!--              </template>-->
+<!--              普通输入框的过滤筛选-->
+              <template #text_filter="{ column }">
+                <div class="interceptor-class"> 
+                  <div
+                      v-for="(item, $index) in column.filters"
+                      :key="$index"
+                    >
+                  <a-input allowClear v-model="item.data" @keyup.enter.native="filterConfirm(column)" style="margin-bottom: 5px;" />
+                  </div>
+                  <a-button @click="filterAddExp(column)">添加条件</a-button>
+                  <a-button @click="filterConfirm(column)">确认</a-button>
+                </div>
+              </template>
               <template #pager>
                 <a-row>
                   <a-col :span="8">
@@ -141,7 +179,6 @@
         <span v-else> {{ currentValue }}</span>
       </span>
     </div>
-
     <keep-alive>
       <div
         :is="popupAddName"
@@ -188,6 +225,10 @@ export default {
       },
       sorts: [],
       defaultSort: [],
+      filterExpression: {
+        operator: 'and',
+        expressions: []
+      }
     };
   },
   props: {
@@ -387,6 +428,27 @@ export default {
       if (this.columns[i].isCheckbox === true) {
         this.columns[i]["type"] = "checkbox";
       }
+      // 设置字段的过滤插槽
+      if(this.columns[i].fieldFilter) {
+        this.columns[i]["filterMultiple"] = false;
+        this.columns[i]['filters'] = [
+          {
+            data: ''
+          }
+        ]
+        switch(this.columns[i].controlType) {
+          // case 'checkbox':
+          //   this.columns[i]['slots'] = {
+          //     filter: `checkbox_filter`
+          //   }
+          //   break
+          default:
+            this.columns[i]['slots'] = {
+              filter: `text_filter`
+            }
+            break
+        }
+      }
       // 默认排序
       if (this.columns[i].defaultSort) {
         this.defaultSort.push({
@@ -464,6 +526,7 @@ export default {
     inputClickEvent(event) {
       if (this.$refs.pulldownRef.isPanelVisible() === false) {
         this.$refs.pulldownRef.showPanel();
+        this.clearColumnFilter()
         this.searchData();
       } else {
         this.$refs.pulldownRef.hidePanel();
@@ -744,6 +807,9 @@ export default {
       };
       //查询之前从外部组件构造其他的条件
       this.$emit("preSearch", postExpression, repeatRowInfo);
+      if(this.filterExpression.expressions.length > 0) {
+        postExpression.expression.expressions.push(this.filterExpression)
+      }
       let postData = {
         fields: this.fetchFields,
         begin:
@@ -755,7 +821,7 @@ export default {
         sorts: this.sorts,
         extendParams: postExpression.extendParams,
       };
-      console.log(postData.sorts);
+      // console.log(postData.sorts);
       let tempApi = this.getPostApi(postData);
 
       // let tempApi = this.api
@@ -786,6 +852,7 @@ export default {
             vm.gridPagerConfig.total = responseData.extData.totalRows;
           } else {
             vm.searchRows = responseData.content;
+            vm.$refs.pupupGridView.loadData(vm.searchRows)
             vm.gridPagerConfig.total = responseData.otherContent.totalRows;
           }
           if (repeatRowInfo.field) {
@@ -863,6 +930,80 @@ export default {
       this.sorts = currentSort;
       this.searchData();
     },
+
+    // 下拉容器筛选条件被触发
+    filterVisible({column}) {
+      XEUtils.remove(column.filters, item => {
+        return item.data === ''
+      })
+      if(column.filters.length === 0) {
+        column.filters.push({
+          data: ''
+        })
+      }
+    },
+    filterConfirm(column) {
+      let vm = this
+      this.filterExpression = {
+        operator: 'and',
+        expressions: []
+      }
+      column.filters[0].checked =
+        column.filters[0].data !== '';
+        //通知外部筛选改变事件
+      let columns = this.$refs.pupupGridView.getTableColumn().collectColumn
+      XEUtils.each(columns, item => {
+        let filterExpression = {
+          operator: 'or',
+          expressions: []
+        }
+        if(item.filters && item.filters[0].checked) {
+          XEUtils.each(item.filters, loopItem => {
+            if(loopItem.data !== '') {
+              filterExpression.expressions.push({
+                field: item.field,
+                operator: "CO",
+                value: loopItem.data
+              })
+            }
+          })
+          if(filterExpression.expressions.length > 0) {
+            vm.filterExpression.expressions.push(filterExpression)
+          }
+        }
+      })
+      this.gridPagerConfig.currentPage = 1
+      this.searchData()
+      this.$refs.pupupGridView.closeFilter()
+    },
+        // 添加筛选条件
+    filterAddExp(column) {
+      column['filters'].push({
+        data: ''
+      })
+    },
+
+  //   清楚筛选条件
+    clearColumnFilter() {
+      let columns = []
+      try {
+        columns = this.$refs.pupupGridView.getTableColumn().collectColumn
+      }catch (err) {
+        console.debug(err)
+      }
+
+        XEUtils.each(columns, item => {
+          if(item.filters && item.filters[0].checked) {
+            item.filters = [{
+              data: ''
+            }]
+          }
+        })
+        this.filterExpression = {
+          operator: 'and',
+          expressions: []
+        }
+    },
   },
 };
 </script>
@@ -877,9 +1018,14 @@ export default {
 }
 
 .d-grid-control {
-  width: 100%;
   height: 30px;
 }
+  .interceptor-class {
+    padding: 10px;
+    ::v-deep .ant-btn {
+      margin: 10px 10px 0;
+    }
+  }
 </style>