BJ_ZTEITS-Developers / parking-cloud-yudao

Commit f352c4d941e2a32ca4f4960c88cdd6eecc202a01

Authored by xingyu
1 parent a984eac9

reactor: 重构 XTable

Inline Side-by-side
Showing 32 changed files with 250 additions and 285 deletions
yudao-ui-admin-vue3/src/components/XTable/src/XTable.vue
  View file @f352c4d
... ... @@ -118,45 +118,64 @@ const getColumnsConfig = (options: XTableProps) => {
118 118  
119 119 // 动态请求
120 120 const getProxyConfig = (options: XTableProps) => {
121   - const { getListApi, proxyConfig, data } = options
  121 + const { getListApi, proxyConfig, data, isList } = options
122 122 if (proxyConfig || data) return
123   - if (getListApi && isFunction(getListApi)) {
124   - options.proxyConfig = {
125   - seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
126   - form: proxyForm, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
127   - props: { result: 'list', total: 'total' },
128   - ajax: {
129   - query: async ({ page, form }) => {
130   - let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
131   - if (options.params) {
132   - queryParams = Object.assign(queryParams, options.params)
133   - }
134   - if (!options?.treeConfig) {
135   - queryParams.pageSize = page.pageSize
136   - queryParams.pageNo = page.currentPage
137   - }
138   - return new Promise(async (resolve) => {
139   - resolve(await getListApi(queryParams))
140   - })
141   - },
142   - delete: ({ body }) => {
143   - return new Promise(async (resolve) => {
144   - if (options.deleteApi) {
145   - resolve(await options.deleteApi(JSON.stringify(body)))
146   - } else {
147   - Promise.reject('未设置deleteApi')
  123 + if (getListApi && isFunction(getListApi) && !isList) {
  124 + if (!isList) {
  125 + options.proxyConfig = {
  126 + seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
  127 + form: proxyForm, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
  128 + props: { result: 'list', total: 'total' },
  129 + ajax: {
  130 + query: async ({ page, form }) => {
  131 + let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
  132 + if (options.params) {
  133 + queryParams = Object.assign(queryParams, options.params)
  134 + }
  135 + if (!options?.treeConfig) {
  136 + queryParams.pageSize = page.pageSize
  137 + queryParams.pageNo = page.currentPage
148 138 }
149   - })
150   - },
151   - queryAll: ({ form }) => {
152   - const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
153   - return new Promise(async (resolve) => {
154   - if (options.getAllListApi) {
155   - resolve(await options.getAllListApi(queryParams))
156   - } else {
  139 + return new Promise(async (resolve) => {
157 140 resolve(await getListApi(queryParams))
  141 + })
  142 + },
  143 + delete: ({ body }) => {
  144 + return new Promise(async (resolve) => {
  145 + if (options.deleteApi) {
  146 + resolve(await options.deleteApi(JSON.stringify(body)))
  147 + } else {
  148 + Promise.reject('未设置deleteApi')
  149 + }
  150 + })
  151 + },
  152 + queryAll: ({ form }) => {
  153 + const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
  154 + return new Promise(async (resolve) => {
  155 + if (options.getAllListApi) {
  156 + resolve(await options.getAllListApi(queryParams))
  157 + } else {
  158 + resolve(await getListApi(queryParams))
  159 + }
  160 + })
  161 + }
  162 + }
  163 + }
  164 + } else {
  165 + options.proxyConfig = {
  166 + seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
  167 + form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
  168 + props: { result: 'data' },
  169 + ajax: {
  170 + query: ({ form }) => {
  171 + let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
  172 + if (options?.params) {
  173 + queryParams = Object.assign(queryParams, options.params)
158 174 }
159   - })
  175 + return new Promise(async (resolve) => {
  176 + resolve(await getListApi(queryParams))
  177 + })
  178 + }
160 179 }
161 180 }
162 181 }
... ... @@ -232,14 +251,14 @@ const getPageConfig = (options: XTableProps) => {
232 251  
233 252 // tool bar
234 253 const getToolBarConfig = (options: XTableProps) => {
235   - const { toolBar, toolbarConfig } = options
  254 + const { toolBar, toolbarConfig, topActionSlots } = options
236 255 if (toolbarConfig) return
237 256 if (toolBar) {
238 257 if (!isBoolean(toolBar)) {
239 258 options.toolbarConfig = toolBar
240 259 return
241 260 }
242   - } else {
  261 + } else if (!topActionSlots) {
243 262 options.toolbarConfig = {
244 263 slots: { buttons: 'toolbar_buttons' }
245 264 }
... ...
yudao-ui-admin-vue3/src/components/XTable/src/type.ts
  View file @f352c4d
... ... @@ -6,6 +6,7 @@ export type XTableProps<D = any> = VxeGridProps<D> & {
6 6 height?: number // 高度 默认730
7 7 topActionSlots?: boolean // 是否开启表格内顶部操作栏插槽
8 8 treeConfig?: VxeTablePropTypes.TreeConfig // 树形表单配置
  9 + isList?: boolean // 是否不带分页的list
9 10 getListApi?: Function
10 11 getAllListApi?: Function
11 12 deleteApi?: Function
... ...
yudao-ui-admin-vue3/src/views/infra/apiAccessLog/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #duration_default="{ row }">
6 6 <span>{{ row.duration + 'ms' }}</span>
7 7 </template>
... ... @@ -17,7 +17,7 @@
17 17 @click="handleDetail(row)"
18 18 />
19 19 </template>
20   - </vxe-grid>
  20 + </XTable>
21 21 </ContentWrap>
22 22 <XModal v-model="dialogVisible" :title="dialogTitle">
23 23 <!-- 对话框(详情) -->
... ... @@ -38,15 +38,14 @@
38 38 <script setup lang="ts" name="ApiAccessLog">
39 39 import { ref } from 'vue'
40 40 import { useI18n } from '@/hooks/web/useI18n'
41   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
42   -import { VxeGridInstance } from 'vxe-table'
  41 +import { useXTable } from '@/hooks/web/useXTable'
43 42 import { allSchemas } from './apiAccessLog.data'
44 43 import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
  44 +
45 45 const { t } = useI18n() // 国际化
46 46  
47 47 // 列表相关的变量
48   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
49   -const { gridOptions } = useVxeGrid<ApiAccessLogApi.ApiAccessLogVO>({
  48 +const [registerTable] = useXTable({
50 49 allSchemas: allSchemas,
51 50 topActionSlots: false,
52 51 getListApi: ApiAccessLogApi.getApiAccessLogPageApi
... ...
yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：导出 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -40,7 +40,7 @@
40 40 @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
41 41 />
42 42 </template>
43   - </vxe-grid>
  43 + </XTable>
44 44 </ContentWrap>
45 45 <XModal v-model="dialogVisible" :title="dialogTitle">
46 46 <!-- 对话框(详情) -->
... ... @@ -54,18 +54,17 @@
54 54 <script setup lang="ts" name="ApiErrorLog">
55 55 import { ref } from 'vue'
56 56 import { useI18n } from '@/hooks/web/useI18n'
57   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
58   -import { VxeGridInstance } from 'vxe-table'
  57 +import { useXTable } from '@/hooks/web/useXTable'
59 58 import { allSchemas } from './apiErrorLog.data'
60 59 import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
61 60 import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
62 61 import { useMessage } from '@/hooks/web/useMessage'
63   -const message = useMessage()
  62 +
64 63 const { t } = useI18n() // 国际化
  64 +const message = useMessage()
65 65  
66 66 // ========== 列表相关 ==========
67   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
68   -const { gridOptions, getList, exportList } = useVxeGrid<ApiErrorLogApi.ApiErrorLogVO>({
  67 +const [registerTable, { reload, exportList }] = useXTable({
69 68 allSchemas: allSchemas,
70 69 getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
71 70 exportListApi: ApiErrorLogApi.exportApiErrorLogApi
... ... @@ -84,7 +83,7 @@ const handleDetail = (row: ApiErrorLogApi.ApiErrorLogVO) =&gt; {
84 83 }
85 84 // 导出
86 85 const handleExport = async () => {
87   - await exportList(xGrid, '错误数据.xls')
  86 + await exportList('错误数据.xls')
88 87 }
89 88 // 异常处理操作
90 89 const handleProcessClick = (
... ... @@ -100,7 +99,7 @@ const handleProcessClick = (
100 99 })
101 100 .finally(async () => {
102 101 // 刷新列表
103   - await getList(xGrid)
  102 + await reload()
104 103 })
105 104 .catch(() => {})
106 105 }
... ...
yudao-ui-admin-vue3/src/views/infra/codegen/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：导入 -->
7 7 <XButton
... ... @@ -49,7 +49,7 @@
49 49 @click="handleGenTable(row)"
50 50 />
51 51 </template>
52   - </vxe-grid>
  52 + </XTable>
53 53 </ContentWrap>
54 54 <!-- 弹窗：导入表 -->
55 55 <ImportTable ref="importRef" @ok="handleQuery()" />
... ... @@ -59,10 +59,9 @@
59 59 <script setup lang="ts" name="Codegen">
60 60 import { ref } from 'vue'
61 61 import { useRouter } from 'vue-router'
62   -import { VxeGridInstance } from 'vxe-table'
63 62 import { useI18n } from '@/hooks/web/useI18n'
64 63 import { useMessage } from '@/hooks/web/useMessage'
65   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
  64 +import { useXTable } from '@/hooks/web/useXTable'
66 65 import download from '@/utils/download'
67 66 import * as CodegenApi from '@/api/infra/codegen'
68 67 import { CodegenTableVO } from '@/api/infra/codegen/types'
... ... @@ -73,8 +72,7 @@ const { t } = useI18n() // 国际化
73 72 const message = useMessage() // 消息弹窗
74 73 const { push } = useRouter() // 路由跳转
75 74 // 列表相关的变量
76   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
77   -const { gridOptions, getList, deleteData } = useVxeGrid<CodegenTableVO>({
  75 +const [registerTable, { reload, deleteData }] = useXTable({
78 76 allSchemas: allSchemas,
79 77 getListApi: CodegenApi.getCodegenTablePageApi,
80 78 deleteApi: CodegenApi.deleteCodegenTableApi
... ... @@ -112,10 +110,10 @@ const handleGenTable = async (row: CodegenTableVO) =&gt; {
112 110 }
113 111 // 删除操作
114 112 const handleDelete = async (rowId: number) => {
115   - await deleteData(xGrid, rowId)
  113 + await deleteData(rowId)
116 114 }
117 115 // 查询操作
118 116 const handleQuery = async () => {
119   - await getList(xGrid)
  117 + await reload()
120 118 }
121 119 </script>
... ...
yudao-ui-admin-vue3/src/views/infra/config/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -46,7 +46,7 @@
46 46 @click="handleDelete(row.id)"
47 47 />
48 48 </template>
49   - </vxe-grid>
  49 + </XTable>
50 50 </ContentWrap>
51 51  
52 52 <XModal v-model="dialogVisible" :title="dialogTitle">
... ... @@ -87,8 +87,7 @@
87 87 import { ref, unref } from 'vue'
88 88 import { useI18n } from '@/hooks/web/useI18n'
89 89 import { useMessage } from '@/hooks/web/useMessage'
90   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
91   -import { VxeGridInstance } from 'vxe-table'
  90 +import { useXTable } from '@/hooks/web/useXTable'
92 91 import { FormExpose } from '@/components/Form'
93 92 // 业务相关的 import
94 93 import * as ConfigApi from '@/api/infra/config'
... ... @@ -97,8 +96,7 @@ import { rules, allSchemas } from &#39;./config.data&#39;
97 96 const { t } = useI18n() // 国际化
98 97 const message = useMessage() // 消息弹窗
99 98 // 列表相关的变量
100   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
101   -const { gridOptions, getList, deleteData, exportList } = useVxeGrid<ConfigApi.ConfigVO>({
  99 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
102 100 allSchemas: allSchemas,
103 101 getListApi: ConfigApi.getConfigPageApi,
104 102 deleteApi: ConfigApi.deleteConfigApi,
... ... @@ -127,7 +125,7 @@ const handleCreate = () =&gt; {
127 125  
128 126 // 导出操作
129 127 const handleExport = async () => {
130   - await exportList(xGrid, '配置.xls')
  128 + await exportList('配置.xls')
131 129 }
132 130  
133 131 // 修改操作
... ... @@ -147,7 +145,7 @@ const handleDetail = async (rowId: number) =&gt; {
147 145  
148 146 // 删除操作
149 147 const handleDelete = async (rowId: number) => {
150   - await deleteData(xGrid, rowId)
  148 + await deleteData(rowId)
151 149 }
152 150  
153 151 // 提交按钮
... ... @@ -171,7 +169,7 @@ const submitForm = async () =&gt; {
171 169 } finally {
172 170 actionLoading.value = false
173 171 // 刷新列表
174   - await getList(xGrid)
  172 + await reload()
175 173 }
176 174 }
177 175 })
... ...
yudao-ui-admin-vue3/src/views/infra/dataSourceConfig/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <XButton
7 7 type="primary"
... ... @@ -34,7 +34,7 @@
34 34 @click="handleDelete(row.id)"
35 35 />
36 36 </template>
37   - </vxe-grid>
  37 + </XTable>
38 38 </ContentWrap>
39 39 <XModal v-model="dialogVisible" :title="dialogTitle">
40 40 <!-- 对话框(添加 / 修改) -->
... ... @@ -69,9 +69,8 @@
69 69 // 全局相关的 import
70 70 import { ref, unref } from 'vue'
71 71 import { useI18n } from '@/hooks/web/useI18n'
  72 +import { useXTable } from '@/hooks/web/useXTable'
72 73 import { useMessage } from '@/hooks/web/useMessage'
73   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
74   -import { VxeGridInstance } from 'vxe-table'
75 74 import { FormExpose } from '@/components/Form'
76 75 // 业务相关的 import
77 76 import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig'
... ... @@ -80,8 +79,7 @@ import { rules, allSchemas } from &#39;./dataSourceConfig.data&#39;
80 79 const { t } = useI18n() // 国际化
81 80 const message = useMessage() // 消息弹窗
82 81 // 列表相关的变量
83   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
84   -const { gridOptions, getList, deleteData } = useVxeGrid<DataSourceConfiggApi.DataSourceConfigVO>({
  82 +const [registerTable, { reload, deleteData }] = useXTable({
85 83 allSchemas: allSchemas,
86 84 isList: true,
87 85 getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
... ... @@ -125,7 +123,7 @@ const handleDetail = async (rowId: number) =&gt; {
125 123  
126 124 // 删除操作
127 125 const handleDelete = async (rowId: number) => {
128   - await deleteData(xGrid, rowId)
  126 + await deleteData(rowId)
129 127 }
130 128  
131 129 // 提交按钮
... ... @@ -149,7 +147,7 @@ const submitForm = async () =&gt; {
149 147 } finally {
150 148 loading.value = false
151 149 // 刷新列表
152   - await getList(xGrid)
  150 + await reload()
153 151 }
154 152 }
155 153 })
... ...
yudao-ui-admin-vue3/src/views/infra/fileConfig/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -44,7 +44,7 @@
44 44 @click="handleDelete(row.id)"
45 45 />
46 46 </template>
47   - </vxe-grid>
  47 + </XTable>
48 48 </ContentWrap>
49 49 <XModal v-model="dialogVisible" :title="dialogTitle">
50 50 <!-- 对话框(添加 / 修改) -->
... ... @@ -173,8 +173,7 @@ import {
173 173 } from 'element-plus'
174 174 import { useI18n } from '@/hooks/web/useI18n'
175 175 import { useMessage } from '@/hooks/web/useMessage'
176   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
177   -import { VxeGridInstance } from 'vxe-table'
  176 +import { useXTable } from '@/hooks/web/useXTable'
178 177 // 业务相关的 import
179 178 import * as FileConfigApi from '@/api/infra/fileConfig'
180 179 import { rules, allSchemas } from './fileConfig.data'
... ... @@ -183,8 +182,7 @@ import { getIntDictOptions, DICT_TYPE } from &#39;@/utils/dict&#39;
183 182 const { t } = useI18n() // 国际化
184 183 const message = useMessage() // 消息弹窗
185 184 // 列表相关的变量
186   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
187   -const { gridOptions, getList, deleteData } = useVxeGrid<FileConfigApi.FileConfigVO>({
  185 +const [registerTable, { reload, deleteData }] = useXTable({
188 186 allSchemas: allSchemas,
189 187 getListApi: FileConfigApi.getFileConfigPageApi,
190 188 deleteApi: FileConfigApi.deleteFileConfigApi
... ... @@ -276,7 +274,7 @@ const handleMaster = (row: FileConfigApi.FileConfigVO) =&gt; {
276 274 .confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder'))
277 275 .then(async () => {
278 276 await FileConfigApi.updateFileConfigMasterApi(row.id)
279   - await getList(xGrid)
  277 + await reload()
280 278 })
281 279 }
282 280  
... ... @@ -287,7 +285,7 @@ const handleTest = async (rowId: number) =&gt; {
287 285  
288 286 // 删除操作
289 287 const handleDelete = async (rowId: number) => {
290   - await deleteData(xGrid, rowId)
  288 + await deleteData(rowId)
291 289 }
292 290  
293 291 // 提交按钮
... ... @@ -308,7 +306,7 @@ const submitForm = async (formEl: FormInstance | undefined) =&gt; {
308 306 dialogVisible.value = false
309 307 } finally {
310 308 actionLoading.value = false
311   - await getList(xGrid)
  309 + await reload()
312 310 }
313 311 }
314 312 })
... ...
yudao-ui-admin-vue3/src/views/infra/fileList/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <XButton
7 7 type="primary"
... ... @@ -24,7 +24,7 @@
24 24 @click="handleDelete(row.id)"
25 25 />
26 26 </template>
27   - </vxe-grid>
  27 + </XTable>
28 28 </ContentWrap>
29 29 <XModal v-model="dialogVisible" :title="dialogTitle">
30 30 <!-- 对话框(详情) -->
... ... @@ -85,8 +85,7 @@
85 85 import { ref, unref } from 'vue'
86 86 import { useI18n } from '@/hooks/web/useI18n'
87 87 import { useMessage } from '@/hooks/web/useMessage'
88   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
89   -import { VxeGridInstance } from 'vxe-table'
  88 +import { useXTable } from '@/hooks/web/useXTable'
90 89 import { ElUpload, ElImage, UploadInstance, UploadRawFile } from 'element-plus'
91 90 // 业务相关的 import
92 91 import { allSchemas } from './fileList.data'
... ... @@ -98,8 +97,7 @@ const { t } = useI18n() // 国际化
98 97 const message = useMessage() // 消息弹窗
99 98  
100 99 // 列表相关的变量
101   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
102   -const { gridOptions, getList, deleteData } = useVxeGrid<FileApi.FileVO>({
  100 +const [registerTable, { reload, deleteData }] = useXTable({
103 101 allSchemas: allSchemas,
104 102 getListApi: FileApi.getFilePageApi,
105 103 deleteApi: FileApi.deleteFileApi
... ... @@ -145,7 +143,7 @@ const handleFileSuccess = async (response: any): Promise&lt;void&gt; =&gt; {
145 143 message.success('上传成功')
146 144 uploadDialogVisible.value = false
147 145 uploadDisabled.value = false
148   - await getList(xGrid)
  146 + await reload()
149 147 }
150 148 // 文件数超出提示
151 149 const handleExceed = (): void => {
... ... @@ -166,7 +164,7 @@ const handleDetail = (row: FileApi.FileVO) =&gt; {
166 164  
167 165 // 删除操作
168 166 const handleDelete = async (rowId: number) => {
169   - await deleteData(xGrid, rowId)
  167 + await deleteData(rowId)
170 168 }
171 169  
172 170 // ========== 复制相关 ==========
... ...
yudao-ui-admin-vue3/src/views/infra/job/JobLog.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <XButton
7 7 type="warning"
... ... @@ -29,7 +29,7 @@
29 29 @click="handleDetail(row)"
30 30 />
31 31 </template>
32   - </vxe-grid>
  32 + </XTable>
33 33 </ContentWrap>
34 34 <XModal v-model="dialogVisible" :title="dialogTitle">
35 35 <!-- 对话框(详情) -->
... ... @@ -51,15 +51,13 @@
51 51 import { ref } from 'vue'
52 52 import dayjs from 'dayjs'
53 53 import { useI18n } from '@/hooks/web/useI18n'
54   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
55   -import { VxeGridInstance } from 'vxe-table'
  54 +import { useXTable } from '@/hooks/web/useXTable'
56 55 import * as JobLogApi from '@/api/infra/jobLog'
57 56 import { allSchemas } from './jobLog.data'
58 57  
59 58 const { t } = useI18n() // 国际化
60 59 // 列表相关的变量
61   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
62   -const { gridOptions, exportList } = useVxeGrid<JobLogApi.JobLogVO>({
  60 +const [registerTable, { exportList }] = useXTable({
63 61 allSchemas: allSchemas,
64 62 getListApi: JobLogApi.getJobLogPageApi,
65 63 exportListApi: JobLogApi.exportJobLogApi
... ... @@ -81,6 +79,6 @@ const handleDetail = async (row: JobLogApi.JobLogVO) =&gt; {
81 79 }
82 80 // 导出操作
83 81 const handleExport = async () => {
84   - await exportList(xGrid, '定时任务详情.xls')
  82 + await exportList('定时任务详情.xls')
85 83 }
86 84 </script>
... ...
yudao-ui-admin-vue3/src/views/infra/job/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -83,7 +83,7 @@
83 83 </template>
84 84 </el-dropdown>
85 85 </template>
86   - </vxe-grid>
  86 + </XTable>
87 87 </ContentWrap>
88 88 <XModal v-model="dialogVisible" :title="dialogTitle">
89 89 <!-- 对话框(添加 / 修改) -->
... ... @@ -134,8 +134,7 @@ import { useRouter } from &#39;vue-router&#39;
134 134 import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
135 135 import { useI18n } from '@/hooks/web/useI18n'
136 136 import { useMessage } from '@/hooks/web/useMessage'
137   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
138   -import { VxeGridInstance } from 'vxe-table'
  137 +import { useXTable } from '@/hooks/web/useXTable'
139 138 import { FormExpose } from '@/components/Form'
140 139 import { Crontab } from '@/components/Crontab'
141 140 import * as JobApi from '@/api/infra/job'
... ... @@ -147,8 +146,7 @@ const message = useMessage() // 消息弹窗
147 146 const { push } = useRouter()
148 147  
149 148 // 列表相关的变量
150   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
151   -const { gridOptions, getList, deleteData, exportList } = useVxeGrid<JobApi.JobVO>({
  149 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
152 150 allSchemas: allSchemas,
153 151 getListApi: JobApi.getJobPageApi,
154 152 deleteApi: JobApi.deleteJobApi,
... ... @@ -183,7 +181,7 @@ const handleCreate = () =&gt; {
183 181  
184 182 // 导出操作
185 183 const handleExport = async () => {
186   - await exportList(xGrid, '定时任务.xls')
  184 + await exportList('定时任务.xls')
187 185 }
188 186  
189 187 // 修改操作
... ... @@ -252,7 +250,7 @@ const parseTime = (time) =&gt; {
252 250  
253 251 // 删除操作
254 252 const handleDelete = async (rowId: number) => {
255   - await deleteData(xGrid, rowId)
  253 + await deleteData(rowId)
256 254 }
257 255 const handleChangeStatus = async (row: JobApi.JobVO) => {
258 256 const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
... ... @@ -267,7 +265,7 @@ const handleChangeStatus = async (row: JobApi.JobVO) =&gt; {
267 265 : InfraJobStatusEnum.STOP
268 266 await JobApi.updateJobStatusApi(row.id, status)
269 267 message.success(text + '成功')
270   - await getList(xGrid)
  268 + await reload()
271 269 })
272 270 .catch(() => {
273 271 row.status =
... ... @@ -289,7 +287,7 @@ const handleRun = (row: JobApi.JobVO) =&gt; {
289 287 message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => {
290 288 await JobApi.runJobApi(row.id)
291 289 message.success('执行成功')
292   - await getList(xGrid)
  290 + await reload()
293 291 })
294 292 }
295 293 // 提交按钮
... ... @@ -312,7 +310,7 @@ const submitForm = async () =&gt; {
312 310 dialogVisible.value = false
313 311 } finally {
314 312 actionLoading.value = false
315   - await getList(xGrid)
  313 + await reload()
316 314 }
317 315 }
318 316 })
... ...
yudao-ui-admin-vue3/src/views/pay/app/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -43,7 +43,7 @@
43 43 @click="handleDelete(row.id)"
44 44 />
45 45 </template>
46   - </vxe-grid>
  46 + </XTable>
47 47 </ContentWrap>
48 48  
49 49 <XModal v-model="dialogVisible" :title="dialogTitle">
... ... @@ -79,8 +79,7 @@
79 79 import { ref, unref } from 'vue'
80 80 import { useI18n } from '@/hooks/web/useI18n'
81 81 import { useMessage } from '@/hooks/web/useMessage'
82   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
83   -import { VxeGridInstance } from 'vxe-table'
  82 +import { useXTable } from '@/hooks/web/useXTable'
84 83 import { FormExpose } from '@/components/Form'
85 84 import { rules, allSchemas } from './app.data'
86 85 import * as AppApi from '@/api/pay/app'
... ... @@ -89,8 +88,7 @@ const { t } = useI18n() // 国际化
89 88 const message = useMessage() // 消息弹窗
90 89  
91 90 // 列表相关的变量
92   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
93   -const { gridOptions, getList, deleteData, exportList } = useVxeGrid<AppApi.AppVO>({
  91 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
94 92 allSchemas: allSchemas,
95 93 getListApi: AppApi.getAppPageApi,
96 94 deleteApi: AppApi.deleteAppApi,
... ... @@ -119,7 +117,7 @@ const handleCreate = () =&gt; {
119 117  
120 118 // 导出操作
121 119 const handleExport = async () => {
122   - await exportList(xGrid, '应用信息.xls')
  120 + await exportList('应用信息.xls')
123 121 }
124 122  
125 123 // 修改操作
... ... @@ -139,7 +137,7 @@ const handleDetail = async (rowId: number) =&gt; {
139 137  
140 138 // 删除操作
141 139 const handleDelete = async (rowId: number) => {
142   - await deleteData(xGrid, rowId)
  140 + await deleteData(rowId)
143 141 }
144 142  
145 143 // 提交按钮
... ... @@ -163,7 +161,7 @@ const submitForm = async () =&gt; {
163 161 } finally {
164 162 actionLoading.value = false
165 163 // 刷新列表
166   - await getList(xGrid)
  164 + await reload()
167 165 }
168 166 }
169 167 })
... ...
yudao-ui-admin-vue3/src/views/pay/merchant/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -43,7 +43,7 @@
43 43 @click="handleDelete(row.id)"
44 44 />
45 45 </template>
46   - </vxe-grid>
  46 + </XTable>
47 47 </ContentWrap>
48 48 <XModal v-model="dialogVisible" :title="dialogTitle">
49 49 <!-- 对话框(添加 / 修改) -->
... ... @@ -78,8 +78,7 @@
78 78 import { ref, unref } from 'vue'
79 79 import { useI18n } from '@/hooks/web/useI18n'
80 80 import { useMessage } from '@/hooks/web/useMessage'
81   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
82   -import { VxeGridInstance } from 'vxe-table'
  81 +import { useXTable } from '@/hooks/web/useXTable'
83 82 import { FormExpose } from '@/components/Form'
84 83 import { rules, allSchemas } from './merchant.data'
85 84 import * as MerchantApi from '@/api/pay/merchant'
... ... @@ -87,8 +86,7 @@ import * as MerchantApi from &#39;@/api/pay/merchant&#39;
87 86 const { t } = useI18n() // 国际化
88 87 const message = useMessage() // 消息弹窗
89 88 // 列表相关的变量
90   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
91   -const { gridOptions, getList, deleteData, exportList } = useVxeGrid<MerchantApi.MerchantVO>({
  89 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
92 90 allSchemas: allSchemas,
93 91 getListApi: MerchantApi.getMerchantPageApi,
94 92 deleteApi: MerchantApi.deleteMerchantApi,
... ... @@ -117,7 +115,7 @@ const handleCreate = () =&gt; {
117 115  
118 116 // 导出操作
119 117 const handleExport = async () => {
120   - await exportList(xGrid, '商户列表.xls')
  118 + await exportList('商户列表.xls')
121 119 }
122 120  
123 121 // 修改操作
... ... @@ -137,7 +135,7 @@ const handleDetail = async (rowId: number) =&gt; {
137 135  
138 136 // 删除操作
139 137 const handleDelete = async (rowId: number) => {
140   - await deleteData(xGrid, rowId)
  138 + await deleteData(rowId)
141 139 }
142 140  
143 141 // 提交按钮
... ... @@ -161,7 +159,7 @@ const submitForm = async () =&gt; {
161 159 } finally {
162 160 actionLoading.value = false
163 161 // 刷新列表
164   - await getList(xGrid)
  162 + await reload()
165 163 }
166 164 }
167 165 })
... ...
yudao-ui-admin-vue3/src/views/pay/order/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -29,7 +29,7 @@
29 29 @click="handleDetail(row.id)"
30 30 />
31 31 </template>
32   - </vxe-grid>
  32 + </XTable>
33 33 </ContentWrap>
34 34 <XModal v-model="dialogVisible" :title="dialogTitle">
35 35 <!-- 对话框(详情) -->
... ... @@ -44,15 +44,13 @@
44 44 <script setup lang="ts" name="Order">
45 45 import { ref } from 'vue'
46 46 import { useI18n } from '@/hooks/web/useI18n'
47   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
48   -import { VxeGridInstance } from 'vxe-table'
  47 +import { useXTable } from '@/hooks/web/useXTable'
49 48 import { allSchemas } from './order.data'
50 49 import * as OrderApi from '@/api/pay/order'
51 50  
52 51 const { t } = useI18n() // 国际化
53 52 // 列表相关的变量
54   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
55   -const { gridOptions, exportList } = useVxeGrid<OrderApi.OrderVO>({
  53 +const [registerTable, { exportList }] = useXTable({
56 54 allSchemas: allSchemas,
57 55 getListApi: OrderApi.getOrderPageApi,
58 56 exportListApi: OrderApi.exportOrderApi
... ... @@ -76,7 +74,7 @@ const handleCreate = () =&gt; {
76 74 }
77 75 // 导出操作
78 76 const handleExport = async () => {
79   - await exportList(xGrid, '订单数据.xls')
  77 + await exportList('订单数据.xls')
80 78 }
81 79  
82 80 // 详情操作
... ...
yudao-ui-admin-vue3/src/views/pay/refund/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：导出 -->
7 7 <XButton
... ... @@ -21,7 +21,7 @@
21 21 @click="handleDetail(row.id)"
22 22 />
23 23 </template>
24   - </vxe-grid>
  24 + </XTable>
25 25 </ContentWrap>
26 26  
27 27 <XModal v-model="dialogVisible" :title="t('action.detail')">
... ... @@ -36,16 +36,14 @@
36 36 <script setup lang="ts" name="Refund">
37 37 import { ref } from 'vue'
38 38 import { useI18n } from '@/hooks/web/useI18n'
39   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
40   -import { VxeGridInstance } from 'vxe-table'
  39 +import { useXTable } from '@/hooks/web/useXTable'
41 40 import { allSchemas } from './refund.data'
42 41 import * as RefundApi from '@/api/pay/refund'
43 42  
44 43 const { t } = useI18n() // 国际化
45 44  
46 45 // 列表相关的变量
47   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
48   -const { gridOptions, exportList } = useVxeGrid<RefundApi.RefundVO>({
  46 +const [registerTable, { exportList }] = useXTable({
49 47 allSchemas: allSchemas,
50 48 getListApi: RefundApi.getRefundPageApi,
51 49 exportListApi: RefundApi.exportRefundApi
... ... @@ -53,7 +51,7 @@ const { gridOptions, exportList } = useVxeGrid&lt;RefundApi.RefundVO&gt;({
53 51  
54 52 // 导出操作
55 53 const handleExport = async () => {
56   - await exportList(xGrid, '退款订单.xls')
  54 + await exportList('退款订单.xls')
57 55 }
58 56  
59 57 // ========== CRUD 相关 ==========
... ...
yudao-ui-admin-vue3/src/views/system/dept/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" show-overflow class="xtable-scrollbar">
  4 + <XTable @register="registerTable" show-overflow>
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -33,7 +33,7 @@
33 33 @click="handleDelete(row.id)"
34 34 />
35 35 </template>
36   - </vxe-grid>
  36 + </XTable>
37 37 </ContentWrap>
38 38 <!-- 添加或修改菜单对话框 -->
39 39 <XModal id="deptModel" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -81,7 +81,7 @@ import { VxeGridInstance } from &#39;vxe-table&#39;
81 81 import { handleTree, defaultProps } from '@/utils/tree'
82 82 import { useI18n } from '@/hooks/web/useI18n'
83 83 import { useMessage } from '@/hooks/web/useMessage'
84   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
  84 +import { useXTable } from '@/hooks/web/useXTable'
85 85 import { FormExpose } from '@/components/Form'
86 86 import { allSchemas, rules } from './dept.data'
87 87 import * as DeptApi from '@/api/system/dept'
... ... @@ -119,7 +119,7 @@ const getTree = async () =&gt; {
119 119 dept.children = handleTree(res)
120 120 deptOptions.value.push(dept)
121 121 }
122   -const { gridOptions, getList, deleteData } = useVxeGrid<DeptApi.DeptVO>({
  122 +const [registerTable, { reload, deleteData }] = useXTable({
123 123 allSchemas: allSchemas,
124 124 treeConfig: treeConfig,
125 125 getListApi: DeptApi.getDeptPageApi,
... ... @@ -168,7 +168,7 @@ const submitForm = async () =&gt; {
168 168 dialogVisible.value = false
169 169 } finally {
170 170 actionLoading.value = false
171   - await getList(xGrid)
  171 + await reload()
172 172 }
173 173 }
174 174 })
... ... @@ -176,7 +176,7 @@ const submitForm = async () =&gt; {
176 176  
177 177 // 删除操作
178 178 const handleDelete = async (rowId: number) => {
179   - await deleteData(xGrid, rowId)
  179 + await deleteData(rowId)
180 180 }
181 181  
182 182 const userNicknameFormat = (row) => {
... ...
yudao-ui-admin-vue3/src/views/system/errorCode/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：新增 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -35,7 +35,7 @@
35 35 @click="handleDelete(row.id)"
36 36 />
37 37 </template>
38   - </vxe-grid>
  38 + </XTable>
39 39 </ContentWrap>
40 40 <!-- 弹窗 -->
41 41 <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -71,8 +71,7 @@
71 71 import { ref, unref } from 'vue'
72 72 import { useI18n } from '@/hooks/web/useI18n'
73 73 import { useMessage } from '@/hooks/web/useMessage'
74   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
75   -import { VxeGridInstance } from 'vxe-table'
  74 +import { useXTable } from '@/hooks/web/useXTable'
76 75 import { FormExpose } from '@/components/Form'
77 76 // 业务相关的 import
78 77 import { rules, allSchemas } from './errorCode.data'
... ... @@ -81,8 +80,7 @@ import * as ErrorCodeApi from &#39;@/api/system/errorCode&#39;
81 80 const { t } = useI18n() // 国际化
82 81 const message = useMessage() // 消息弹窗
83 82 // 列表相关的变量
84   -const xGrid = ref<VxeGridInstance>() // grid Ref
85   -const { gridOptions, getList, deleteData } = useVxeGrid<ErrorCodeApi.ErrorCodeVO>({
  83 +const [registerTable, { reload, deleteData }] = useXTable({
86 84 allSchemas: allSchemas,
87 85 getListApi: ErrorCodeApi.getErrorCodePageApi,
88 86 deleteApi: ErrorCodeApi.deleteErrorCodeApi
... ... @@ -125,7 +123,7 @@ const handleDetail = async (rowId: number) =&gt; {
125 123  
126 124 // 删除操作
127 125 const handleDelete = async (rowId: number) => {
128   - await deleteData(xGrid, rowId)
  126 + await deleteData(rowId)
129 127 }
130 128  
131 129 // 提交新增/修改的表单
... ... @@ -149,7 +147,7 @@ const submitForm = async () =&gt; {
149 147 } finally {
150 148 actionLoading.value = false
151 149 // 刷新列表
152   - await getList(xGrid)
  150 + await reload()
153 151 }
154 152 }
155 153 })
... ...
yudao-ui-admin-vue3/src/views/system/loginlog/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：导出 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -15,7 +15,7 @@
15 15 <!-- 操作：详情 -->
16 16 <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
17 17 </template>
18   - </vxe-grid>
  18 + </XTable>
19 19 </ContentWrap>
20 20 <!-- 弹窗 -->
21 21 <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -31,16 +31,14 @@
31 31 // 全局相关的 import
32 32 import { ref } from 'vue'
33 33 import { useI18n } from '@/hooks/web/useI18n'
34   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
35   -import { VxeGridInstance } from 'vxe-table'
  34 +import { useXTable } from '@/hooks/web/useXTable'
36 35 // 业务相关的 import
37 36 import { allSchemas } from './loginLog.data'
38 37 import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog'
39 38  
40 39 const { t } = useI18n() // 国际化
41 40 // 列表相关的变量
42   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
43   -const { gridOptions, exportList } = useVxeGrid<LoginLogVO>({
  41 +const [registerTable, { exportList }] = useXTable({
44 42 allSchemas: allSchemas,
45 43 getListApi: getLoginLogPageApi,
46 44 exportListApi: exportLoginLogApi
... ... @@ -59,6 +57,6 @@ const handleDetail = async (row: LoginLogVO) =&gt; {
59 57  
60 58 // 导出操作
61 59 const handleExport = async () => {
62   - await exportList(xGrid, '登录列表.xls')
  60 + await exportList('登录列表.xls')
63 61 }
64 62 </script>
... ...
yudao-ui-admin-vue3/src/views/system/menu/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" show-overflow class="xtable-scrollbar">
  4 + <XTable @register="registerTable" show-overflow>
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -34,7 +34,7 @@
34 34 @click="handleDelete(row.id)"
35 35 />
36 36 </template>
37   - </vxe-grid>
  37 + </XTable>
38 38 </ContentWrap>
39 39 <!-- 添加或修改菜单对话框 -->
40 40 <XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -201,7 +201,7 @@ import { SystemMenuTypeEnum, CommonStatusEnum } from &#39;@/utils/constants&#39;
201 201 import { handleTree, defaultProps } from '@/utils/tree'
202 202 import * as MenuApi from '@/api/system/menu'
203 203 import { allSchemas, rules } from './menu.data'
204   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
  204 +import { useXTable } from '@/hooks/web/useXTable'
205 205  
206 206 const { t } = useI18n() // 国际化
207 207 const message = useMessage() // 消息弹窗
... ... @@ -215,7 +215,7 @@ const treeConfig = {
215 215 parentField: 'parentId',
216 216 expandAll: false
217 217 }
218   -const { gridOptions, getList, deleteData } = useVxeGrid<MenuApi.MenuVO>({
  218 +const [registerTable, { reload, deleteData }] = useXTable({
219 219 allSchemas: allSchemas,
220 220 treeConfig: treeConfig,
221 221 getListApi: MenuApi.getMenuListApi,
... ... @@ -326,7 +326,7 @@ const submitForm = async () =&gt; {
326 326 actionLoading.value = false
327 327 wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
328 328 // 操作成功，重新加载列表
329   - await getList(xGrid)
  329 + await reload()
330 330 }
331 331 }
332 332  
... ... @@ -338,6 +338,6 @@ const isExternal = (path: string) =&gt; {
338 338 // ========== 删除 ==========
339 339 // 删除操作
340 340 const handleDelete = async (rowId: number) => {
341   - await deleteData(xGrid, rowId)
  341 + await deleteData(rowId)
342 342 }
343 343 </script>
... ...
yudao-ui-admin-vue3/src/views/system/notice/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：新增 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -35,7 +35,7 @@
35 35 @click="handleDelete(row.id)"
36 36 />
37 37 </template>
38   - </vxe-grid>
  38 + </XTable>
39 39 </ContentWrap>
40 40 <!-- 弹窗 -->
41 41 <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -75,8 +75,7 @@
75 75 import { ref, unref } from 'vue'
76 76 import { useI18n } from '@/hooks/web/useI18n'
77 77 import { useMessage } from '@/hooks/web/useMessage'
78   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
79   -import { VxeGridInstance } from 'vxe-table'
  78 +import { useXTable } from '@/hooks/web/useXTable'
80 79 import { FormExpose } from '@/components/Form'
81 80 // 业务相关的 import
82 81 import * as NoticeApi from '@/api/system/notice'
... ... @@ -86,8 +85,7 @@ import { Editor } from &#39;@/components/Editor&#39;
86 85 const { t } = useI18n() // 国际化
87 86 const message = useMessage() // 消息弹窗
88 87 // 列表相关的变量
89   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
90   -const { gridOptions, getList, deleteData } = useVxeGrid<NoticeApi.NoticeVO>({
  88 +const [registerTable, { reload, deleteData }] = useXTable({
91 89 allSchemas: allSchemas,
92 90 getListApi: NoticeApi.getNoticePageApi,
93 91 deleteApi: NoticeApi.deleteNoticeApi
... ... @@ -130,7 +128,7 @@ const handleDetail = async (rowId: number) =&gt; {
130 128  
131 129 // 删除操作
132 130 const handleDelete = async (rowId: number) => {
133   - await deleteData(xGrid, rowId)
  131 + await deleteData(rowId)
134 132 }
135 133  
136 134 // 提交新增/修改的表单
... ... @@ -153,7 +151,7 @@ const submitForm = async () =&gt; {
153 151 dialogVisible.value = false
154 152 } finally {
155 153 actionLoading.value = false
156   - await getList(xGrid)
  154 + await reload()
157 155 }
158 156 }
159 157 })
... ...
yudao-ui-admin-vue3/src/views/system/oauth2/client/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -51,7 +51,7 @@
51 51 @click="handleDelete(row.id)"
52 52 />
53 53 </template>
54   - </vxe-grid>
  54 + </XTable>
55 55 </ContentWrap>
56 56 <!-- 弹窗 -->
57 57 <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -135,8 +135,7 @@ import { ref, unref } from &#39;vue&#39;
135 135 import { ElTag } from 'element-plus'
136 136 import { useI18n } from '@/hooks/web/useI18n'
137 137 import { useMessage } from '@/hooks/web/useMessage'
138   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
139   -import { VxeGridInstance } from 'vxe-table'
  138 +import { useXTable } from '@/hooks/web/useXTable'
140 139 import { FormExpose } from '@/components/Form'
141 140 // 业务相关的 import
142 141 import * as ClientApi from '@/api/system/oauth2/client'
... ... @@ -146,8 +145,7 @@ const { t } = useI18n() // 国际化
146 145 const message = useMessage() // 消息弹窗
147 146  
148 147 // 列表相关的变量
149   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
150   -const { gridOptions, getList, deleteData } = useVxeGrid<ClientApi.OAuth2ClientVO>({
  148 +const [registerTable, { reload, deleteData }] = useXTable({
151 149 allSchemas: allSchemas,
152 150 getListApi: ClientApi.getOAuth2ClientPageApi,
153 151 deleteApi: ClientApi.deleteOAuth2ClientApi
... ... @@ -188,7 +186,7 @@ const handleDetail = async (rowId: number) =&gt; {
188 186  
189 187 // 删除操作
190 188 const handleDelete = async (rowId: number) => {
191   - await deleteData(xGrid, rowId)
  189 + await deleteData(rowId)
192 190 }
193 191  
194 192 // 提交新增/修改的表单
... ... @@ -212,7 +210,7 @@ const submitForm = async () =&gt; {
212 210 } finally {
213 211 actionLoading.value = false
214 212 // 刷新列表
215   - await getList(xGrid)
  213 + await reload()
216 214 }
217 215 }
218 216 })
... ...
yudao-ui-admin-vue3/src/views/system/oauth2/token/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #actionbtns_default="{ row }">
6 6 <!-- 操作：详情 -->
7 7 <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
... ... @@ -13,7 +13,7 @@
13 13 @click="handleForceLogout(row.id)"
14 14 />
15 15 </template>
16   - </vxe-grid>
  16 + </XTable>
17 17 </ContentWrap>
18 18 <XModal v-model="dialogVisible" :title="dialogTitle">
19 19 <!-- 对话框(详情) -->
... ... @@ -28,8 +28,7 @@
28 28 import { ref } from 'vue'
29 29 import { useI18n } from '@/hooks/web/useI18n'
30 30 import { useMessage } from '@/hooks/web/useMessage'
31   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
32   -import { VxeGridInstance } from 'vxe-table'
  31 +import { useXTable } from '@/hooks/web/useXTable'
33 32  
34 33 import { allSchemas } from './token.data'
35 34 import * as TokenApi from '@/api/system/oauth2/token'
... ... @@ -37,8 +36,7 @@ import * as TokenApi from &#39;@/api/system/oauth2/token&#39;
37 36 const { t } = useI18n() // 国际化
38 37 const message = useMessage() // 消息弹窗
39 38 // 列表相关的变量
40   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
41   -const { gridOptions, getList } = useVxeGrid<TokenApi.OAuth2TokenVO>({
  39 +const [registerTable, { reload }] = useXTable({
42 40 allSchemas: allSchemas,
43 41 topActionSlots: false,
44 42 getListApi: TokenApi.getAccessTokenPageApi
... ... @@ -65,7 +63,7 @@ const handleForceLogout = (rowId: number) =&gt; {
65 63 })
66 64 .finally(async () => {
67 65 // 刷新列表
68   - await getList(xGrid)
  66 + await reload()
69 67 })
70 68 }
71 69 </script>
... ...
yudao-ui-admin-vue3/src/views/system/operatelog/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -22,7 +22,7 @@
22 22 <!-- 操作：详情 -->
23 23 <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
24 24 </template>
25   - </vxe-grid>
  25 + </XTable>
26 26 </ContentWrap>
27 27 <!-- 弹窗 -->
28 28 <XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')">
... ... @@ -45,16 +45,14 @@
45 45 // 全局相关的 import
46 46 import { ref } from 'vue'
47 47 import { useI18n } from '@/hooks/web/useI18n'
48   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
49   -import { VxeGridInstance } from 'vxe-table'
  48 +import { useXTable } from '@/hooks/web/useXTable'
50 49 // 业务相关的 import
51 50 import * as OperateLogApi from '@/api/system/operatelog'
52 51 import { allSchemas } from './operatelog.data'
53 52  
54 53 const { t } = useI18n() // 国际化
55 54 // 列表相关的变量
56   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
57   -const { gridOptions, exportList } = useVxeGrid<OperateLogApi.OperateLogVO>({
  55 +const [registerTable, { exportList }] = useXTable({
58 56 allSchemas: allSchemas,
59 57 getListApi: OperateLogApi.getOperateLogPageApi,
60 58 exportListApi: OperateLogApi.exportOperateLogApi
... ... @@ -73,6 +71,6 @@ const handleDetail = (row: OperateLogApi.OperateLogVO) =&gt; {
73 71  
74 72 // 导出操作
75 73 const handleExport = async () => {
76   - await exportList(xGrid, '操作日志.xls')
  74 + await exportList('操作日志.xls')
77 75 }
78 76 </script>
... ...
yudao-ui-admin-vue3/src/views/system/post/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -43,7 +43,7 @@
43 43 @click="handleDelete(row.id)"
44 44 />
45 45 </template>
46   - </vxe-grid>
  46 + </XTable>
47 47 </ContentWrap>
48 48 <!-- 弹窗 -->
49 49 <XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
... ... @@ -79,8 +79,7 @@
79 79 import { ref, unref } from 'vue'
80 80 import { useI18n } from '@/hooks/web/useI18n'
81 81 import { useMessage } from '@/hooks/web/useMessage'
82   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
83   -import { VxeGridInstance } from 'vxe-table'
  82 +import { useXTable } from '@/hooks/web/useXTable'
84 83 import { FormExpose } from '@/components/Form'
85 84 // 业务相关的 import
86 85 import * as PostApi from '@/api/system/post'
... ... @@ -89,8 +88,7 @@ import { rules, allSchemas } from &#39;./post.data&#39;
89 88 const { t } = useI18n() // 国际化
90 89 const message = useMessage() // 消息弹窗
91 90 // 列表相关的变量
92   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
93   -const { gridOptions, getList, deleteData, exportList } = useVxeGrid<PostApi.PostVO>({
  91 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
94 92 allSchemas: allSchemas,
95 93 getListApi: PostApi.getPostPageApi,
96 94 deleteApi: PostApi.deletePostApi,
... ... @@ -121,7 +119,7 @@ const handleCreate = () =&gt; {
121 119  
122 120 // 导出操作
123 121 const handleExport = async () => {
124   - await exportList(xGrid, '岗位列表.xls')
  122 + await exportList('岗位列表.xls')
125 123 }
126 124  
127 125 // 修改操作
... ... @@ -143,7 +141,7 @@ const handleDetail = async (rowId: number) =&gt; {
143 141  
144 142 // 删除操作
145 143 const handleDelete = async (rowId: number) => {
146   - await deleteData(xGrid, rowId)
  144 + await deleteData(rowId)
147 145 }
148 146  
149 147 // 提交新增/修改的表单
... ... @@ -167,7 +165,7 @@ const submitForm = async () =&gt; {
167 165 } finally {
168 166 actionLoading.value = false
169 167 // 刷新列表
170   - await getList(xGrid)
  168 + await reload()
171 169 }
172 170 }
173 171 })
... ...
yudao-ui-admin-vue3/src/views/system/role/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：新增 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -49,7 +49,7 @@
49 49 @click="handleDelete(row.id)"
50 50 />
51 51 </template>
52   - </vxe-grid>
  52 + </XTable>
53 53 </ContentWrap>
54 54  
55 55 <XModal v-model="dialogVisible" :title="dialogTitle">
... ... @@ -159,11 +159,10 @@ import {
159 159 ElSwitch,
160 160 ElTag
161 161 } from 'element-plus'
162   -import { VxeGridInstance } from 'vxe-table'
163 162 import { FormExpose } from '@/components/Form'
164 163 import { useI18n } from '@/hooks/web/useI18n'
165 164 import { useMessage } from '@/hooks/web/useMessage'
166   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
  165 +import { useXTable } from '@/hooks/web/useXTable'
167 166 import { handleTree, defaultProps } from '@/utils/tree'
168 167 import { SystemDataScopeEnum } from '@/utils/constants'
169 168 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
... ... @@ -176,8 +175,7 @@ import * as PermissionApi from &#39;@/api/system/permission&#39;
176 175 const { t } = useI18n() // 国际化
177 176 const message = useMessage() // 消息弹窗
178 177 // 列表相关的变量
179   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
180   -const { gridOptions, getList, deleteData } = useVxeGrid<RoleApi.RoleVO>({
  178 +const [registerTable, { reload, deleteData }] = useXTable({
181 179 allSchemas: allSchemas,
182 180 getListApi: RoleApi.getRolePageApi,
183 181 deleteApi: RoleApi.deleteRoleApi
... ... @@ -221,7 +219,7 @@ const handleDetail = async (rowId: number) =&gt; {
221 219  
222 220 // 删除操作
223 221 const handleDelete = async (rowId: number) => {
224   - await deleteData(xGrid, rowId)
  222 + await deleteData(rowId)
225 223 }
226 224  
227 225 // 提交按钮
... ... @@ -245,7 +243,7 @@ const submitForm = async () =&gt; {
245 243 } finally {
246 244 actionLoading.value = false
247 245 // 刷新列表
248   - await getList(xGrid)
  246 + await reload()
249 247 }
250 248 }
251 249 })
... ...
yudao-ui-admin-vue3/src/views/system/sensitiveWord/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -53,7 +53,7 @@
53 53 @click="handleDelete(row.id)"
54 54 />
55 55 </template>
56   - </vxe-grid>
  56 + </XTable>
57 57 </ContentWrap>
58 58  
59 59 <XModal v-model="dialogVisible" :title="dialogTitle">
... ... @@ -106,8 +106,7 @@
106 106 import { onMounted, ref, unref } from 'vue'
107 107 import { useI18n } from '@/hooks/web/useI18n'
108 108 import { useMessage } from '@/hooks/web/useMessage'
109   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
110   -import { VxeGridInstance } from 'vxe-table'
  109 +import { useXTable } from '@/hooks/web/useXTable'
111 110 import { FormExpose } from '@/components/Form'
112 111 import { ElTag, ElSelect, ElOption } from 'element-plus'
113 112 import * as SensitiveWordApi from '@/api/system/sensitiveWord'
... ... @@ -116,14 +115,12 @@ import { rules, allSchemas } from &#39;./sensitiveWord.data&#39;
116 115 const { t } = useI18n() // 国际化
117 116 const message = useMessage() // 消息弹窗
118 117 // 列表相关的变量
119   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
120   -const { gridOptions, getList, deleteData, exportList } =
121   - useVxeGrid<SensitiveWordApi.SensitiveWordVO>({
122   - allSchemas: allSchemas,
123   - getListApi: SensitiveWordApi.getSensitiveWordPageApi,
124   - deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
125   - exportListApi: SensitiveWordApi.exportSensitiveWordApi
126   - })
  118 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
  119 + allSchemas: allSchemas,
  120 + getListApi: SensitiveWordApi.getSensitiveWordPageApi,
  121 + deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
  122 + exportListApi: SensitiveWordApi.exportSensitiveWordApi
  123 +})
127 124 const actionLoading = ref(false) // 遮罩层
128 125 const actionType = ref('') // 操作按钮的类型
129 126 const dialogVisible = ref(false) // 是否显示弹出层
... ... @@ -152,7 +149,7 @@ const handleCreate = () =&gt; {
152 149  
153 150 // 导出操作
154 151 const handleExport = async () => {
155   - await exportList(xGrid, '敏感词数据.xls')
  152 + await exportList('敏感词数据.xls')
156 153 }
157 154  
158 155 // 修改操作
... ... @@ -172,7 +169,7 @@ const handleDetail = async (rowId: number) =&gt; {
172 169  
173 170 // 删除操作
174 171 const handleDelete = async (rowId: number) => {
175   - await deleteData(xGrid, rowId)
  172 + await deleteData(rowId)
176 173 }
177 174  
178 175 // 提交按钮
... ... @@ -196,7 +193,7 @@ const submitForm = async () =&gt; {
196 193 } finally {
197 194 actionLoading.value = false
198 195 // 刷新列表
199   - await getList(xGrid)
  196 + await reload()
200 197 }
201 198 }
202 199 })
... ...
yudao-ui-admin-vue3/src/views/system/sms/smsChannel/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：新增 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -35,7 +35,7 @@
35 35 @click="handleDelete(row.id)"
36 36 />
37 37 </template>
38   - </vxe-grid>
  38 + </XTable>
39 39 </ContentWrap>
40 40  
41 41 <XModal id="smsChannel" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -72,8 +72,7 @@
72 72 import { ref, unref } from 'vue'
73 73 import { useI18n } from '@/hooks/web/useI18n'
74 74 import { useMessage } from '@/hooks/web/useMessage'
75   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
76   -import { VxeGridInstance } from 'vxe-table'
  75 +import { useXTable } from '@/hooks/web/useXTable'
77 76 import { FormExpose } from '@/components/Form'
78 77 // 业务相关的 import
79 78 import * as SmsChannelApi from '@/api/system/sms/smsChannel'
... ... @@ -83,8 +82,7 @@ const { t } = useI18n() // 国际化
83 82 const message = useMessage() // 消息弹窗
84 83  
85 84 // 列表相关的变量
86   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
87   -const { gridOptions, getList, deleteData } = useVxeGrid<SmsChannelApi.SmsChannelVO>({
  85 +const [registerTable, { reload, deleteData }] = useXTable({
88 86 allSchemas: allSchemas,
89 87 getListApi: SmsChannelApi.getSmsChannelPageApi,
90 88 deleteApi: SmsChannelApi.deleteSmsChannelApi
... ... @@ -127,7 +125,7 @@ const handleDetail = async (rowId: number) =&gt; {
127 125  
128 126 // 删除操作
129 127 const handleDelete = async (rowId: number) => {
130   - await deleteData(xGrid, rowId)
  128 + await deleteData(rowId)
131 129 }
132 130  
133 131 // 提交按钮
... ... @@ -151,7 +149,7 @@ const submitForm = async () =&gt; {
151 149 } finally {
152 150 actionLoading.value = false
153 151 // 刷新列表
154   - await getList(xGrid)
  152 + await reload()
155 153 }
156 154 }
157 155 })
... ...
yudao-ui-admin-vue3/src/views/system/sms/smsLog/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：导出 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -14,7 +14,7 @@
14 14 <template #actionbtns_default="{ row }">
15 15 <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
16 16 </template>
17   - </vxe-grid>
  17 + </XTable>
18 18 </ContentWrap>
19 19  
20 20 <XModal id="smsLog" v-model="dialogVisible" :title="dialogTitle">
... ... @@ -34,15 +34,13 @@
34 34 // 全局相关的 import
35 35 import { ref } from 'vue'
36 36 import { useI18n } from '@/hooks/web/useI18n'
37   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
38   -import { VxeGridInstance } from 'vxe-table'
  37 +import { useXTable } from '@/hooks/web/useXTable'
39 38 import { allSchemas } from './sms.log.data'
40 39 import * as SmsLoglApi from '@/api/system/sms/smsLog'
41 40 const { t } = useI18n() // 国际化
42 41  
43 42 // 列表相关的变量
44   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
45   -const { gridOptions, exportList } = useVxeGrid<SmsLoglApi.SmsLogVO>({
  43 +const [registerTable, { exportList }] = useXTable({
46 44 allSchemas: allSchemas,
47 45 getListApi: SmsLoglApi.getSmsLogPageApi,
48 46 exportListApi: SmsLoglApi.exportSmsLogApi
... ... @@ -62,6 +60,6 @@ const handleDetail = (row: SmsLoglApi.SmsLogVO) =&gt; {
62 60  
63 61 // 导出操作
64 62 const handleExport = async () => {
65   - await exportList(xGrid, '短信日志.xls')
  63 + await exportList('短信日志.xls')
66 64 }
67 65 </script>
... ...
yudao-ui-admin-vue3/src/views/system/sms/smsTemplate/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <!-- 操作：新增 -->
6 6 <template #toolbar_buttons>
7 7 <XButton
... ... @@ -41,7 +41,7 @@
41 41 @click="handleDelete(row.id)"
42 42 />
43 43 </template>
44   - </vxe-grid>
  44 + </XTable>
45 45 </ContentWrap>
46 46 <XModal id="smsTemplate" v-model="dialogVisible" :title="dialogTitle">
47 47 <!-- 对话框(添加 / 修改) -->
... ... @@ -113,8 +113,7 @@
113 113 import { ref, unref } from 'vue'
114 114 import { useI18n } from '@/hooks/web/useI18n'
115 115 import { useMessage } from '@/hooks/web/useMessage'
116   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
117   -import { VxeGridInstance } from 'vxe-table'
  116 +import { useXTable } from '@/hooks/web/useXTable'
118 117 import { FormExpose } from '@/components/Form'
119 118 import { ElForm, ElFormItem, ElInput } from 'element-plus'
120 119 // 业务相关的 import
... ... @@ -125,8 +124,7 @@ const { t } = useI18n() // 国际化
125 124 const message = useMessage() // 消息弹窗
126 125  
127 126 // 列表相关的变量
128   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
129   -const { gridOptions, getList, deleteData } = useVxeGrid<SmsTemplateApi.SmsTemplateVO>({
  127 +const [registerTable, { reload, deleteData }] = useXTable({
130 128 allSchemas: allSchemas,
131 129 getListApi: SmsTemplateApi.getSmsTemplatePageApi,
132 130 deleteApi: SmsTemplateApi.deleteSmsTemplateApi
... ... @@ -170,7 +168,7 @@ const handleDetail = async (rowId: number) =&gt; {
170 168  
171 169 // 删除操作
172 170 const handleDelete = async (rowId: number) => {
173   - await deleteData(xGrid, rowId)
  171 + await deleteData(rowId)
174 172 }
175 173  
176 174 // 提交按钮
... ... @@ -194,7 +192,7 @@ const submitForm = async () =&gt; {
194 192 } finally {
195 193 actionLoading.value = false
196 194 // 刷新列表
197   - await getList(xGrid)
  195 + await reload()
198 196 }
199 197 }
200 198 })
... ...
yudao-ui-admin-vue3/src/views/system/tenant/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <!-- 操作：新增 -->
7 7 <XButton
... ... @@ -49,7 +49,7 @@
49 49 @click="handleDelete(row.id)"
50 50 />
51 51 </template>
52   - </vxe-grid>
  52 + </XTable>
53 53 </ContentWrap>
54 54 <XModal v-model="dialogVisible" :title="dialogTitle">
55 55 <!-- 对话框(添加 / 修改) -->
... ... @@ -89,8 +89,7 @@
89 89 import { ref, unref } from 'vue'
90 90 import { useI18n } from '@/hooks/web/useI18n'
91 91 import { useMessage } from '@/hooks/web/useMessage'
92   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
93   -import { VxeGridInstance } from 'vxe-table'
  92 +import { useXTable } from '@/hooks/web/useXTable'
94 93 import { ElTag } from 'element-plus'
95 94 import { FormExpose } from '@/components/Form'
96 95 import * as TenantApi from '@/api/system/tenant'
... ... @@ -99,8 +98,7 @@ import { rules, allSchemas, tenantPackageOption } from &#39;./tenant.data&#39;
99 98 const { t } = useI18n() // 国际化
100 99 const message = useMessage() // 消息弹窗
101 100 // 列表相关的变量
102   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
103   -const { gridOptions, getList, deleteData, exportList } = useVxeGrid<TenantApi.TenantVO>({
  101 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
104 102 allSchemas: allSchemas,
105 103 getListApi: TenantApi.getTenantPageApi,
106 104 deleteApi: TenantApi.deleteTenantApi,
... ... @@ -153,12 +151,12 @@ const handleDetail = async (rowId: number) =&gt; {
153 151  
154 152 // 删除操作
155 153 const handleDelete = async (rowId: number) => {
156   - await deleteData(xGrid, rowId)
  154 + await deleteData(rowId)
157 155 }
158 156  
159 157 // 导出操作
160 158 const handleExport = async () => {
161   - await exportList(xGrid, '租户列表.xls')
  159 + await exportList('租户列表.xls')
162 160 }
163 161  
164 162 // 提交按钮
... ... @@ -183,7 +181,7 @@ const submitForm = async () =&gt; {
183 181 } finally {
184 182 actionLoading.value = false
185 183 // 刷新列表
186   - await getList(xGrid)
  184 + await reload()
187 185 }
188 186 }
189 187 })
... ...
yudao-ui-admin-vue3/src/views/system/tenantPackage/index.vue
  View file @f352c4d
1 1 <template>
2 2 <ContentWrap>
3 3 <!-- 列表 -->
4   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  4 + <XTable @register="registerTable">
5 5 <template #toolbar_buttons>
6 6 <XButton
7 7 type="primary"
... ... @@ -14,7 +14,7 @@
14 14 <XTextButton preIcon="ep:edit" :title="t('action.edit')" @click="handleUpdate(row.id)" />
15 15 <XTextButton preIcon="ep:delete" :title="t('action.del')" @click="handleDelete(row.id)" />
16 16 </template>
17   - </vxe-grid>
  17 + </XTable>
18 18 </ContentWrap>
19 19 <XModal v-model="dialogVisible" :title="dialogTitle">
20 20 <!-- 对话框(添加 / 修改) -->
... ... @@ -69,8 +69,7 @@ import { onMounted, ref, unref } from &#39;vue&#39;
69 69 import { handleTree, defaultProps } from '@/utils/tree'
70 70 import { useI18n } from '@/hooks/web/useI18n'
71 71 import { useMessage } from '@/hooks/web/useMessage'
72   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
73   -import { VxeGridInstance } from 'vxe-table'
  72 +import { useXTable } from '@/hooks/web/useXTable'
74 73 import { FormExpose } from '@/components/Form'
75 74 import { ElCard, ElSwitch, ElTree } from 'element-plus'
76 75 // 业务相关的 import
... ... @@ -86,7 +85,6 @@ const menuExpand = ref(false)
86 85 const menuNodeAll = ref(false)
87 86 const treeRef = ref<InstanceType<typeof ElTree>>()
88 87 const treeNodeAll = ref(false)
89   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
90 88 const formRef = ref<FormExpose>() // 表单 Ref
91 89 const loading = ref(false) // 遮罩层
92 90 const actionType = ref('') // 操作按钮的类型
... ... @@ -102,7 +100,7 @@ const getTree = async () =&gt; {
102 100 menuOptions.value = handleTree(res)
103 101 }
104 102  
105   -const { gridOptions, getList, deleteData } = useVxeGrid<TenantPackageApi.TenantPackageVO>({
  103 +const [registerTable, { reload, deleteData }] = useXTable({
106 104 allSchemas: allSchemas,
107 105 getListApi: TenantPackageApi.getTenantPackageTypePageApi,
108 106 deleteApi: TenantPackageApi.deleteTenantPackageTypeApi
... ... @@ -136,7 +134,7 @@ const handleUpdate = async (rowId: number) =&gt; {
136 134  
137 135 // 删除操作
138 136 const handleDelete = async (rowId: number) => {
139   - await deleteData(xGrid, rowId)
  137 + await deleteData(rowId)
140 138 }
141 139  
142 140 // 提交按钮
... ... @@ -162,7 +160,7 @@ const submitForm = async () =&gt; {
162 160 } finally {
163 161 loading.value = false
164 162 // 刷新列表
165   - await getList(xGrid)
  163 + await reload()
166 164 }
167 165 }
168 166 })
... ...
yudao-ui-admin-vue3/src/views/system/user/index.vue
  View file @f352c4d
... ... @@ -27,7 +27,7 @@
27 27 </div>
28 28 </template>
29 29 <!-- 列表 -->
30   - <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  30 + <XTable @register="registerTable">
31 31 <template #toolbar_buttons>
32 32 <!-- 操作：新增 -->
33 33 <XButton
... ... @@ -119,7 +119,7 @@
119 119 </template>
120 120 </el-dropdown>
121 121 </template>
122   - </vxe-grid>
  122 + </XTable>
123 123 </el-card>
124 124 </div>
125 125 <XModal v-model="dialogVisible" :title="dialogTitle">
... ... @@ -283,14 +283,13 @@ import {
283 283 UploadRawFile
284 284 } from 'element-plus'
285 285 import { useRouter } from 'vue-router'
286   -import { VxeGridInstance } from 'vxe-table'
287 286 import { handleTree, defaultProps } from '@/utils/tree'
288 287 import download from '@/utils/download'
289 288 import { CommonStatusEnum } from '@/utils/constants'
290 289 import { getAccessToken, getTenantId } from '@/utils/auth'
291 290 import { useI18n } from '@/hooks/web/useI18n'
292 291 import { useMessage } from '@/hooks/web/useMessage'
293   -import { useVxeGrid } from '@/hooks/web/useVxeGrid'
  292 +import { useXTable } from '@/hooks/web/useXTable'
294 293 import { FormExpose } from '@/components/Form'
295 294 import { rules, allSchemas } from './user.data'
296 295 import * as UserApi from '@/api/system/user'
... ... @@ -312,10 +311,9 @@ const queryParams = reactive({
312 311 // ========== 列表相关 ==========
313 312 const tableTitle = ref('用户列表')
314 313 // 列表相关的变量
315   -const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
316   -const { gridOptions, getList, deleteData, exportList } = useVxeGrid<UserApi.UserVO>({
  314 +const [registerTable, { reload, deleteData, exportList }] = useXTable({
317 315 allSchemas: allSchemas,
318   - queryParams: queryParams,
  316 + params: queryParams,
319 317 getListApi: UserApi.getUserPageApi,
320 318 deleteApi: UserApi.deleteUserApi,
321 319 exportListApi: UserApi.exportUserApi
... ... @@ -334,7 +332,7 @@ const filterNode = (value: string, data: Tree) =&gt; {
334 332 }
335 333 const handleDeptNodeClick = async (row: { [key: string]: any }) => {
336 334 queryParams.deptId = row.id
337   - await getList(xGrid)
  335 + await reload()
338 336 }
339 337 const { push } = useRouter()
340 338 const handleDeptEdit = () => {
... ... @@ -409,7 +407,7 @@ const handleDetail = async (rowId: number) =&gt; {
409 407 }
410 408 // 删除操作
411 409 const handleDelete = async (rowId: number) => {
412   - await deleteData(xGrid, rowId)
  410 + await deleteData(rowId)
413 411 }
414 412 // 提交按钮
415 413 const submitForm = async () => {
... ... @@ -428,7 +426,7 @@ const submitForm = async () =&gt; {
428 426 } finally {
429 427 // unref(formRef)?.setSchema(allSchemas.formSchema)
430 428 // 刷新列表
431   - await getList(xGrid)
  429 + await reload()
432 430 loading.value = false
433 431 }
434 432 }
... ... @@ -443,7 +441,7 @@ const handleStatusChange = async (row: UserApi.UserVO) =&gt; {
443 441 await UserApi.updateUserStatusApi(row.id, row.status)
444 442 message.success(text + '成功')
445 443 // 刷新列表
446   - await getList(xGrid)
  444 + await reload()
447 445 })
448 446 .catch(() => {
449 447 row.status =
... ... @@ -544,7 +542,7 @@ const handleFileSuccess = async (response: any): Promise&lt;void&gt; =&gt; {
544 542 text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
545 543 }
546 544 message.alert(text)
547   - await getList(xGrid)
  545 + await reload()
548 546 }
549 547 // 文件数超出提示
550 548 const handleExceed = (): void => {
... ...