fix(grid): [grid] fix remote filter default value

opentiny · Apr 17, 2024 · b0c4ee0 · b0c4ee0
1 parent f834ca7
commit b0c4ee0
Show file tree

Hide file tree

Showing 6 changed files with 299 additions and 0 deletions.
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <tiny-button class="mb-20" @click="loadData">加载数据</tiny-button>
+    <tiny-grid ref="grid" :fetch-data="fetchData" :auto-load="false" remote-filter :pager="pager">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期" sortable></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市" :filter="cityFilter" sortable></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Button as TinyButton } from '@opentiny/vue'
+
+const pager = ref({
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 5,
+    total: 0,
+    pageSizes: [5, 10, 15, 20],
+    layout: 'total, prev, pager, next, jumper, sizes'
+  }
+})
+
+const cityFilter = {
+  multi: true,
+  enumable: true,
+  defaultFilter: false,
+  inputFilter: false,
+  condition: {
+    type: 'enum',
+    value: ['福州']
+  }
+}
+
+const fetchData = ref({
+  filter: true,
+  api: getData
+})
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    city: '福州',
+    employees: 800,
+    createdDate: '2014-04-30 00:56:00'
+  },
+  {
+    id: '2',
+    name: 'WWW科技YX公司',
+    city: '深圳',
+    employees: 300,
+    createdDate: '2016-07-08 12:36:22'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    city: '中山',
+    employees: 1300,
+    createdDate: '2014-02-14 14:14:14'
+  },
+  {
+    id: '4',
+    name: 'TGB科技YX公司',
+    city: '龙岩',
+    employees: 360,
+    createdDate: '2013-01-13 13:13:13'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    city: '韶关',
+    employees: 810,
+    createdDate: '2012-12-12 12:12:12'
+  },
+  {
+    id: '6',
+    name: 'WSX科技YX公司',
+    city: '黄冈',
+    employees: 800,
+    createdDate: '2011-11-11 11:11:11'
+  },
+  {
+    id: '7',
+    name: 'KBG物业YX公司',
+    city: '赤壁',
+    employees: 400,
+    createdDate: '2016-04-30 23:56:00'
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术YX公司',
+    city: '深圳',
+    employees: 540,
+    createdDate: '2016-06-03 13:53:25'
+  }
+])
+
+const grid = ref()
+
+function loadData() {
+  grid.value.handleFetch()
+}
+function getData({ page, filters }) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // 此处为用户自定义的服务端分页、排序、过滤服务
+      const startIndex = (page.currentPage - 1) * page.pageSize
+      const allData = tableData.value.filter((item) => {
+        return !filters.city || !filters.city.value.length || filters.city.value.includes(item.city)
+      })
+      const data = {
+        result: allData.slice(startIndex, startIndex + page.pageSize),
+        page: Object.assign({}, page, { total: allData.length })
+      }
+
+      resolve({ result: data.result, page: data.page })
+    }, 200)
+  })
+}
+</script>
+
+<style scoped>
+.mb-20 {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-default.spec.js b/examples/sites/demos/pc/app/grid/filter/server-filter-default.spec.js
@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('服务端过滤', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#server-filter-default')
+  await page.waitForTimeout(3000)
+  await page.getByRole('button', { name: '加载数据' }).click()
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(1)
+})
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <tiny-button class="mb-20" @click="loadData">加载数据</tiny-button>
+    <tiny-grid ref="grid" :fetch-data="fetchData" :auto-load="false" remote-filter :pager="pager">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期" sortable></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市" :filter="cityFilter" sortable></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn, Pager, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      pager: {
+        component: Pager,
+        attrs: {
+          currentPage: 1,
+          pageSize: 5,
+          total: 0,
+          pageSizes: [5, 10, 15, 20],
+          layout: 'total, prev, pager, next, jumper, sizes'
+        }
+      },
+      cityFilter: {
+        multi: true,
+        enumable: true,
+        defaultFilter: false,
+        inputFilter: false,
+        condition: {
+          type: 'enum',
+          value: ['福州']
+        }
+      },
+      fetchData: {
+        filter: true,
+        api: this.getData
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          city: '福州',
+          employees: 800,
+          createdDate: '2014-04-30 00:56:00'
+        },
+        {
+          id: '2',
+          name: 'WWW科技YX公司',
+          city: '深圳',
+          employees: 300,
+          createdDate: '2016-07-08 12:36:22'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          city: '中山',
+          employees: 1300,
+          createdDate: '2014-02-14 14:14:14'
+        },
+        {
+          id: '4',
+          name: 'TGB科技YX公司',
+          city: '龙岩',
+          employees: 360,
+          createdDate: '2013-01-13 13:13:13'
+        },
+        {
+          id: '5',
+          name: 'YHN科技YX公司',
+          city: '韶关',
+          employees: 810,
+          createdDate: '2012-12-12 12:12:12'
+        },
+        {
+          id: '6',
+          name: 'WSX科技YX公司',
+          city: '黄冈',
+          employees: 800,
+          createdDate: '2011-11-11 11:11:11'
+        },
+        {
+          id: '7',
+          name: 'KBG物业YX公司',
+          city: '赤壁',
+          employees: 400,
+          createdDate: '2016-04-30 23:56:00'
+        },
+        {
+          id: '8',
+          name: '深圳市福德宝网络技术YX公司',
+          city: '深圳',
+          employees: 540,
+          createdDate: '2016-06-03 13:53:25'
+        }
+      ]
+    }
+  },
+  methods: {
+    loadData() {
+      this.$refs.grid.handleFetch()
+    },
+    getData({ page, filters }) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          // 此处为用户自定义的服务端分页、排序、过滤服务
+          const startIndex = (page.currentPage - 1) * page.pageSize
+          const allData = this.tableData.filter((item) => {
+            return !filters.city || !filters.city.value.length || filters.city.value.includes(item.city)
+          })
+          const data = {
+            result: allData.slice(startIndex, startIndex + page.pageSize),
+            page: Object.assign({}, page, { total: allData.length })
+          }
+
+          resolve({ result: data.result, page: data.page })
+        }, 200)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mb-20 {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-filter.js b/examples/sites/demos/pc/app/grid/webdoc/grid-filter.js
@@ -97,6 +97,17 @@ export default {
       },
       'codeFiles': ['filter/server-filter.vue']
     },
+    {
+      'demoId': 'server-filter-default',
+      'name': { 'zh-CN': '服务端过滤默认选中值', 'en-US': 'Server-side filtering default selected value' },
+      'desc': {
+        'zh-CN':
+          '<p>配置 remote-filter 开启服务端过滤后，表格初始化时，如果设置了 <code>auto-load</code> 会在表格列初始化钱调用 <code>handleFetch</code>，因此此时无法获取到过滤参数，如果需要设置服务端过滤默认选中值，需将 <code>auto-load</code> 设置为false且手动调用一次 <code>handleFetch</code> 方法。</p>\n',
+        'en-US':
+          '<p>Set the default input filtering options through the <code>inputFilter.relation</code> attribute. \n Enter the built-in options for filtering: <code>equals</code>, <code>unequal</code>, <code>greaterThan</code>, <code>lessThan</code>, <code>equalToGreaterThan</code>, <code>equalToLessThan</code>, <code>contains</code>, <code>startwith</code>, <code>endwith</code>; Custom options can also be configured. \n When configuring custom options, you need to configure the filtering method through the <code>inputFilter.method</code> attribute. </p>\n'
+      },
+      'codeFiles': ['filter/server-filter-default.vue']
+    },
     {
       'demoId': 'filter-default-relation',
       'name': { 'zh-CN': '输入过滤的默认选项', 'en-US': '' },

diff --git a/packages/vue/src/grid/src/filter/src/methods.ts b/packages/vue/src/grid/src/filter/src/methods.ts
@@ -333,5 +333,8 @@ export default {
     this.clearSelection()
 
     return this.updateData()
+  },
+  getAllFilter() {
+    return columnfilters(this.visibleColumn)
   }
 }
diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts
@@ -825,6 +825,11 @@ const Methods = {
     // 经过动态列个性化合并后，部分列可能被操作隐藏等，此步骤计算可见列
     this.refreshColumn()
 
+    // 可见列刷新后，更新一下表格服务端过滤参数
+    if (this.remoteFilter) {
+      this.$grid.filterData = this.getAllFilter()
+    }
+
     // 可见列确定之后触发一次列就绪事件
     if (!this.isColumnReady) {
       this.isColumnReady = true