From 554e778bfb3625c5aaa81e9b777bed23bdc36205 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Thu, 14 Nov 2024 16:17:58 +0800
Subject: [PATCH] feat(grid-select): [grid-select] add filter/config features
 and optimize demo/api docs (#2521)

* docs(grid-select): optimize demo/api

* docs(grid-select): add radio-config/select-config demo/api docs

* feat(grid-select): add filter and optimize demo/api docs
---
 examples/sites/demos/apis/grid-select.js      | 115 ++++++++++++++++--
 .../grid-select/config-composition-api.vue    |  84 +++++++++++++
 .../sites/demos/pc/app/grid-select/config.vue |  88 ++++++++++++++
 .../grid-select/filter-composition-api.vue    |  49 ++++++++
 .../sites/demos/pc/app/grid-select/filter.vue |  46 +++++++
 .../demos/pc/app/grid-select/multiple.vue     |   2 +-
 .../pc/app/grid-select/webdoc/grid-select.js  |  27 ++++
 packages/renderless/src/grid-select/index.ts  |  36 ++++++
 packages/renderless/src/grid-select/vue.ts    |  17 ++-
 packages/vue/src/grid-select/src/pc.vue       |  55 ++++++++-
 10 files changed, 505 insertions(+), 14 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/grid-select/config-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/grid-select/config.vue
 create mode 100644 examples/sites/demos/pc/app/grid-select/filter-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/grid-select/filter.vue

diff --git a/examples/sites/demos/apis/grid-select.js b/examples/sites/demos/apis/grid-select.js
index bfc456fed1..4b2a6c5d0c 100644
--- a/examples/sites/demos/apis/grid-select.js
+++ b/examples/sites/demos/apis/grid-select.js
@@ -5,6 +5,40 @@ export default {
       name: 'grid-select',
       type: 'component',
       props: [
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键清除的功能',
+            'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
+          },
+          mode: ['pc'],
+          pcDemo: 'clearable',
+          mfDemo: 'clearable'
+        },
+        {
+          name: 'filterable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可搜索',
+            'en-US': 'Is it searchable'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter-method'
+        },
+        {
+          name: 'filter-method',
+          type: '(query: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义过滤方法',
+            'en-US': 'Custom filtering method'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter-method'
+        },
         {
           name: 'grid-op',
           typeAnchorName: 'IGridOption',
@@ -39,6 +73,64 @@ export default {
           mode: ['pc'],
           pcDemo: 'multiple'
         },
+        {
+          name: 'radio-config',
+          typeAnchorName: 'IRadioConfig',
+          type: 'IRadioConfig',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '单选配置项',
+            'en-US': 'Radio config'
+          },
+          mode: ['pc'],
+          pcDemo: 'config'
+        },
+        {
+          name: 'remote',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否为远程搜索',
+            'en-US': 'Is it a remote search'
+          },
+          mode: ['pc'],
+          pcDemo: 'remote-method'
+        },
+        {
+          name: 'remote-method',
+          type: '(query:string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '远程搜索的方法',
+            'en-US': 'Remote search methods'
+          },
+          mode: ['pc'],
+          pcDemo: 'remote-method'
+        },
+        {
+          name: 'reserve-keyword',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '多选可搜索时，是否在选中一个选项后仍然保留当前的搜索关键词',
+            'en-US':
+              'When selecting multiple searchable options, do you still keep the current search keywords after selecting one option'
+          },
+          mode: ['pc'],
+          pcDemo: 'remote-method'
+        },
+        {
+          name: 'select-config',
+          typeAnchorName: 'ISelectConfig',
+          type: 'ISelectConfig',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '多选配置项',
+            'en-US': 'Select config'
+          },
+          mode: ['pc'],
+          pcDemo: 'config'
+        },
         {
           name: 'text-field',
           type: 'string',
@@ -70,14 +162,23 @@ export default {
       type: 'interface',
       code: `
 interface IGridOption {
-  data: Record<string, any>
-  columns: {
-    type: string
-    field: string
-    title: string
-    width: number
-  }[] // 表格列数据，用法同 Grid
+  data: Record<string, unknown>
+  columns: IColumnConfig[] // 表格列数据，同 Grid 组件的 IColumnConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
 }
+`
+    },
+    {
+      name: 'IRadioConfig',
+      type: 'interface',
+      code: `
+同 Grid 组件的 IRadioConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
+`
+    },
+    {
+      name: 'ISelectConfig',
+      type: 'interface',
+      code: `
+同 Grid 组件的 ISelectConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
 `
     }
   ]
diff --git a/examples/sites/demos/pc/app/grid-select/config-composition-api.vue b/examples/sites/demos/pc/app/grid-select/config-composition-api.vue
new file mode 100644
index 0000000000..e42828984f
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid-select/config-composition-api.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <p>场景1：单选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueSingle"
+      value-field="id"
+      text-field="city"
+      :grid-op="gridOpSingle"
+      :radio-config="radioConfig"
+    ></tiny-grid-select>
+    <br /><br />
+    <p>场景2：多选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueMulti"
+      multiple
+      value-field="id"
+      text-field="city"
+      :grid-op="gridOpMulti"
+      :select-config="selectConfig"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinyGridSelect } from '@opentiny/vue'
+
+const valueSingle = ref('')
+const valueMulti = ref([])
+
+const gridOpSingle = reactive({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+    { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+    { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+    { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+    { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+  ],
+  columns: [
+    { type: 'radio', title: '' },
+    { field: 'area', title: '区域', width: 90 },
+    { field: 'province', title: '省份', width: 60 },
+    { field: 'city', title: '城市', width: 60 }
+  ]
+})
+
+const gridOpMulti = reactive({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+    { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+    { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+    { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+    { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+  ],
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'area', title: '区域', width: 90 },
+    { field: 'province', title: '省份', width: 60 },
+    { field: 'city', title: '城市', width: 60 }
+  ]
+})
+
+const radioConfig = ref({
+  trigger: 'row',
+  checkMethod({ rowIndex }) {
+    return rowIndex % 2 === 1
+  }
+})
+
+const selectConfig = ref({
+  trigger: 'row',
+  checkMethod({ rowIndex }) {
+    return rowIndex % 2 === 0
+  }
+})
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid-select/config.vue b/examples/sites/demos/pc/app/grid-select/config.vue
new file mode 100644
index 0000000000..75ffe4f92d
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid-select/config.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <p>场景1：单选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueSingle"
+      value-field="id"
+      text-field="city"
+      :grid-op="gridOpSingle"
+      :radio-config="radioConfig"
+    ></tiny-grid-select>
+    <br /><br />
+    <p>场景2：多选</p>
+    <br />
+    <tiny-grid-select
+      v-model="valueMulti"
+      multiple
+      value-field="id"
+      text-field="city"
+      :grid-op="gridOpMulti"
+      :select-config="selectConfig"
+    ></tiny-grid-select>
+  </div>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  data() {
+    return {
+      valueSingle: '',
+      valueMulti: [],
+      gridOpSingle: {
+        data: [
+          { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+          { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+          { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+          { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+          { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+        ],
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      gridOpMulti: {
+        data: [
+          { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+          { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+          { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+          { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+          { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+        ],
+        columns: [
+          { type: 'selection', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      },
+      radioConfig: {
+        trigger: 'row',
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 1
+        }
+      },
+      selectConfig: {
+        trigger: 'row',
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 0
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid-select/filter-composition-api.vue b/examples/sites/demos/pc/app/grid-select/filter-composition-api.vue
new file mode 100644
index 0000000000..ed99e2e95e
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid-select/filter-composition-api.vue
@@ -0,0 +1,49 @@
+<template>
+  <tiny-grid-select
+    v-model="valueSingle"
+    filterable
+    :filter-method="filter"
+    value-field="id"
+    text-field="city"
+    :grid-op="gridOpSingle"
+  ></tiny-grid-select>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinyGridSelect } from '@opentiny/vue'
+
+const valueSingle = ref('')
+
+const gridOpSingle = reactive({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+    { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+    { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+    { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+    { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+  ],
+  columns: [
+    { type: 'radio', title: '' },
+    { field: 'area', title: '区域', width: 90 },
+    { field: 'province', title: '省份', width: 60 },
+    { field: 'city', title: '城市', width: 60 }
+  ]
+})
+
+const filter = (value) => {
+  if (!value) {
+    return gridOpSingle.data
+  }
+
+  return gridOpSingle.data.filter((item) => {
+    return item.city.includes(value)
+  })
+}
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid-select/filter.vue b/examples/sites/demos/pc/app/grid-select/filter.vue
new file mode 100644
index 0000000000..958b4e28ce
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid-select/filter.vue
@@ -0,0 +1,46 @@
+<template>
+  <tiny-grid-select
+    v-model="valueSingle"
+    filterable
+    :filter-method="filter"
+    value-field="id"
+    text-field="city"
+    :grid-op="gridOpSingle"
+  ></tiny-grid-select>
+</template>
+
+<script>
+import { TinyGridSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGridSelect
+  },
+  data() {
+    return {
+      valueSingle: [],
+      gridOpSingle: {
+        data: [
+          { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+          { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+          { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+          { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+          { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+        ],
+        columns: [
+          { type: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 90 },
+          { field: 'province', title: '省份', width: 60 },
+          { field: 'city', title: '城市', width: 60 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-grid-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid-select/multiple.vue b/examples/sites/demos/pc/app/grid-select/multiple.vue
index 78ff4c778f..6b4ed8f8b5 100644
--- a/examples/sites/demos/pc/app/grid-select/multiple.vue
+++ b/examples/sites/demos/pc/app/grid-select/multiple.vue
@@ -17,7 +17,7 @@ export default {
   },
   data() {
     return {
-      value: '',
+      value: [],
       treeOp: {
         data: [
           { id: '001', area: '华南区', province: '广东省', city: '广州市' },
diff --git a/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js b/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js
index d751cd5e31..dc49fc4bf3 100644
--- a/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js
+++ b/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js
@@ -30,6 +30,33 @@ export default {
         'en-US': ''
       },
       codeFiles: ['multiple.vue']
+    },
+    {
+      demoId: 'filter',
+      name: {
+        'zh-CN': '可过滤',
+        'en-US': 'Filterable'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>filterable</code> 设置是否可过滤，<code>filter-method</code> 设置自定义过滤逻辑。</p>\n',
+        'en-US': ''
+      },
+      codeFiles: ['filter.vue']
+    },
+    {
+      demoId: 'config',
+      name: {
+        'zh-CN': '配置项',
+        'en-US': 'Config'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>select-config</code> （多选）或 <code>radio-config</code> （单选）属性的 <code>checkMethod</code> 自定义禁用逻辑，返回 true (启用) / false (禁用)。配置 <code>{ trigger: "row" }</code> 可以设置点击行选中数据。</p>\n',
+        'en-US':
+          "<p>By customizing the disable logic through the <code>select-config</code> (multiple selection) or <code>radio-config</code> (single selection) attribute's <code>checkMethod</code>, return true (Enable) / false (disable).Configure {trigger: 'row'} to set the selected data in the click row.</p>"
+      },
+      codeFiles: ['config.vue']
     }
   ]
 }
diff --git a/packages/renderless/src/grid-select/index.ts b/packages/renderless/src/grid-select/index.ts
index 6dbfdd6f6a..d23bca6e6c 100644
--- a/packages/renderless/src/grid-select/index.ts
+++ b/packages/renderless/src/grid-select/index.ts
@@ -1,3 +1,39 @@
+export const buildSelectConfig =
+  ({ props, state }) =>
+  () => {
+    const checkRowKeys = state.gridCheckedData
+    const selectConfig = props.selectConfig
+
+    return Object.assign({}, selectConfig, { checkRowKeys })
+  }
+
+export const buildRadioConfig =
+  ({ props, state }) =>
+  () => {
+    const checkRowKey = state.currentKey
+    const highlight = true
+    const radioConfig = props.radioConfig
+
+    return Object.assign({}, radioConfig, { checkRowKey, highlight })
+  }
+
+export const filter =
+  ({ props, state, vm }) =>
+  (value) => {
+    const { filterMethod } = props
+
+    const table = vm.$refs.gridRef.$refs.tinyTable
+    const fullData = table.afterFullData
+
+    vm.$refs.gridRef.scrollTo(null, 0)
+
+    table.afterFullData = filterMethod(value, fullData) || []
+
+    vm.$refs.gridRef.handleTableData(!value)
+
+    state.previousQuery = value
+  }
+
 export const radioChange =
   ({ props, vm, emit }) =>
   ({ row }) => {
diff --git a/packages/renderless/src/grid-select/vue.ts b/packages/renderless/src/grid-select/vue.ts
index d45bea784b..53a058f1a4 100644
--- a/packages/renderless/src/grid-select/vue.ts
+++ b/packages/renderless/src/grid-select/vue.ts
@@ -1,20 +1,29 @@
-import { radioChange, selectChange } from './index'
+import { buildRadioConfig, buildSelectConfig, filter, radioChange, selectChange } from './index'
 
-export const api = ['state', 'radioChange', 'selectChange']
+export const api = ['state', 'buildRadioConfig', 'buildSelectConfig', 'filter', 'radioChange', 'selectChange']
 
-export const renderless = (props, { reactive }, { vm, emit }) => {
+export const renderless = (props, { reactive, watch }, { vm, emit }) => {
   const api = {}
 
   const state = reactive({
     value: props.modelValue,
-    gridData: props.gridOp
+    gridData: props.gridOp.data
   })
 
   Object.assign(api, {
     state,
+    buildRadioConfig: buildRadioConfig({ props, state }),
+    buildSelectConfig: buildSelectConfig({ props, state }),
+    filter: filter({ props, state, vm }),
     radioChange: radioChange({ props, vm, emit }),
     selectChange: selectChange({ props, vm, emit })
   })
 
+  watch(
+    () => props.gridOp.data,
+    (data) => data && (state.gridData = data),
+    { immediate: true, deep: true }
+  )
+
   return api
 }
diff --git a/packages/vue/src/grid-select/src/pc.vue b/packages/vue/src/grid-select/src/pc.vue
index cbba91dbe7..e3ab4d56fa 100644
--- a/packages/vue/src/grid-select/src/pc.vue
+++ b/packages/vue/src/grid-select/src/pc.vue
@@ -1,10 +1,19 @@
 <template>
-  <tiny-base-select ref="baseSelectRef" class="tiny-grid-select" v-model="state.value" :multiple="multiple">
+  <tiny-base-select
+    ref="baseSelectRef"
+    class="tiny-grid-select"
+    v-model="state.value"
+    :multiple="multiple"
+    :filterable="filterable"
+    :filter-method="filter"
+  >
     <template #panel>
       <tiny-grid
         ref="gridRef"
         auto-resize
         :row-id="valueField"
+        :select-config="buildSelectConfig()"
+        :radio-config="buildRadioConfig()"
         :highlight-current-row="true"
         :columns="state.gridData.columns"
         :data="state.gridData"
@@ -12,7 +21,7 @@
         @select-change="selectChange"
         @radio-change="radioChange"
         @mousedown.stop
-        v-bind="state.gridData"
+        v-bind="gridOp"
       ></tiny-grid>
     </template>
   </tiny-base-select>
@@ -32,14 +41,56 @@ export default defineComponent({
   },
   props: {
     clearable: Boolean,
+    extraQueryParams: {
+      type: [Object, String, Boolean, Array, Number],
+      default: ''
+    },
     filterable: Boolean,
     filterMethod: Function,
     gridOp: {
       type: Object,
       default: () => ({})
     },
+    initLabel: {
+      type: String,
+      default: ''
+    },
+    initQuery: Function,
     modelValue: {},
     multiple: Boolean,
+    radioConfig: {
+      type: Object,
+      default() {
+        return {
+          checkMethod() {
+            return true
+          }
+        }
+      }
+    },
+    remote: Boolean,
+    remoteConfig: {
+      type: Object,
+      default() {
+        return {
+          showIcon: false,
+          clearData: false,
+          autoSearch: false
+        }
+      }
+    },
+    remoteMethod: Function,
+    reserveKeyword: Boolean,
+    selectConfig: {
+      type: Object,
+      default() {
+        return {
+          checkMethod() {
+            return true
+          }
+        }
+      }
+    },
     textField: {
       type: String,
       default: 'label'