diff --git a/Web/src/views/system/codeGen/component/genConfigDialog.vue b/Web/src/views/system/codeGen/component/genConfigDialog.vue index 1a737c3e..e2a05877 100644 --- a/Web/src/views/system/codeGen/component/genConfigDialog.vue +++ b/Web/src/views/system/codeGen/component/genConfigDialog.vue @@ -109,6 +109,7 @@ const state = reactive({ allEnumSelector: [] as any, }); +// 页面初始化 onMounted(async () => { var res = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('code_gen_effect_type'); state.effectTypeList = res.data.result; @@ -140,6 +141,7 @@ onUnmounted(() => { mittBus.off('submitRefresh', () => {}); mittBus.off('submitRefreshFk', () => {}); }); + // 控件类型改变 const effectTypeChange = (data: any, index: number) => { let value = data.effectType; @@ -190,8 +192,8 @@ function effectTypeEnable(data: any) { } // 打开弹窗 -const openDialog = (addRow: any) => { - handleQuery(addRow); +const openDialog = async (addRow: any) => { + await handleQuery(addRow); state.isShowDialog = true; }; diff --git a/Web/src/views/system/codeGen/index.vue b/Web/src/views/system/codeGen/index.vue index 0161b4b0..bddcbfa4 100644 --- a/Web/src/views/system/codeGen/index.vue +++ b/Web/src/views/system/codeGen/index.vue @@ -5,12 +5,12 @@ - + - + @@ -21,7 +21,7 @@ - 查询 + 查询 重置 @@ -29,7 +29,7 @@ - + @@ -62,15 +62,6 @@ 生成 - @@ -84,8 +75,9 @@ import { onMounted, reactive, ref, defineAsyncComponent } from 'vue'; import { ElMessageBox, ElMessage } from 'element-plus'; import { auth } from '/@/utils/authFunction'; -import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table'; -import { useVxeTable } from '/@/hooks/vxeTableOptionsHook'; +import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table'; +import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook'; +import { Local } from '/@/utils/storage'; import { downloadByUrl } from '/@/utils/download'; import EditCodeGenDialog from './component/editCodeGenDialog.vue'; @@ -93,7 +85,7 @@ import CodeConfigDialog from './component/genConfigDialog.vue'; import { getAPI } from '/@/utils/axios-utils'; import { SysCodeGenApi } from '/@/api-services/api'; -import { SysCodeGen } from '/@/api-services/models'; +import { SysCodeGen, PageCodeGenInput } from '/@/api-services/models'; const PreviewDialog = defineAsyncComponent(() => import('./component/previewDialog.vue')); const xGrid = ref(); @@ -110,85 +102,73 @@ const state = reactive({ tableName: undefined, busName: undefined, }, - tableParams: { - page: 1, - pageSize: 50, - field: 'id', // 默认的排序字段 - order: 'aes', // 排序方向 - descStr: 'desc', // 降序排序的关键字符 - total: 0 as any, + localPageParam: { + pageSize: 50 as number, + defaultSort: { field: 'id', order: 'asc', descStr: 'desc' }, }, visible: false, title: '', applicationNamespaces: [] as Array, }); +// 本地存储参数 +const localPageParamKey = 'localPageParam:sysCodeGen'; // 表格参数配置 -const options = useVxeTable({ - id: 'sysCodeGen', - name: '代码生成', - columns: [ - // { type: 'checkbox', width: 40, fixed: 'left' }, - { type: 'seq', title: '序号', width: 60, fixed: 'left' }, - { field: 'configId', title: '库定位器', minWidth: 200, showOverflow: 'tooltip' }, - { field: 'tableName', title: '表名称', minWidth: 200, showOverflow: 'tooltip' }, - { field: 'busName', title: '业务名', minWidth: 200, showOverflow: 'tooltip' }, - { field: 'nameSpace', title: '命名空间', minWidth: 200, showOverflow: 'tooltip' }, - { field: 'authorName', title: '作者姓名', minWidth: 200, showOverflow: 'tooltip' }, - { field: 'generateType', title: '生成方式', minWidth: 140, showOverflow: 'tooltip', slots: { default: 'row_generateType' } }, - { title: '操作', fixed: 'right', width: 280, showOverflow: true, slots: { default: 'row_buttons' } }, - ], - enableExport: auth('sysCodeGen:export'), - searchCallback: () => handleQuery(), - queryAllCallback: () => fetchData({ pageSize: 99999 }), -}); +const options = useVxeTable( + { + id: 'sysCodeGen', + name: '代码生成', + columns: [ + // { type: 'checkbox', width: 40, fixed: 'left' }, + { type: 'seq', title: '序号', width: 60, fixed: 'left' }, + { field: 'configId', title: '库定位器', minWidth: 200, showOverflow: 'tooltip' }, + { field: 'tableName', title: '表名称', minWidth: 200, showOverflow: 'tooltip' }, + { field: 'busName', title: '业务名', minWidth: 200, showOverflow: 'tooltip' }, + { field: 'nameSpace', title: '命名空间', minWidth: 200, showOverflow: 'tooltip' }, + { field: 'authorName', title: '作者姓名', minWidth: 200, showOverflow: 'tooltip' }, + { field: 'generateType', title: '生成方式', minWidth: 140, showOverflow: 'tooltip', slots: { default: 'row_generateType' } }, + { title: '操作', fixed: 'right', width: 280, showOverflow: true, slots: { default: 'row_buttons' } }, + ], + }, + // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档 + { + // 代理配置 + proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } }, + // 排序配置 + sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort }, + // 分页配置 + pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize }, + // 工具栏配置 + toolbarConfig: { export: false }, + } +); // 页面初始化 onMounted(async () => { + state.localPageParam = Local.get(localPageParamKey) || state.localPageParam; await handleQuery(); + + // 获取命名空间集合 let res = await getAPI(SysCodeGenApi).apiSysCodeGenApplicationNamespacesGet(); state.applicationNamespaces = res.data.result as Array; }); -// 查询操作 -const handleQuery = async (reset = false) => { - options.loading = true; - if (reset) state.tableParams.page = 1; - var res = await fetchData(null); - xGrid.value?.loadData(res.data.result?.items ?? []); - state.tableParams.total = res.data.result?.total; - options.loading = false; -}; - -// 获取数据 -const fetchData = async (tableParams: any) => { - let params = Object.assign(state.queryParams, state.tableParams, tableParams); +// 查询api +const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => { + const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageCodeGenInput; return getAPI(SysCodeGenApi).apiSysCodeGenPagePost(params); }; +// 查询操作 +const handleQuery = async () => { + await xGrid.value?.commitProxy('query'); +}; + // 重置操作 -const resetQuery = () => { +const resetQuery = async () => { state.queryParams.busName = undefined; state.queryParams.tableName = undefined; - handleQuery(true); -}; - -const handleConfig = (row: any) => { - CodeConfigRef.value?.openDialog(row); -}; - -// 改变页码序号或页面容量 -const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => { - state.tableParams.page = currentPage; - state.tableParams.pageSize = pageSize; - handleQuery(); -}; - -// 列排序 -const sortChange = (options: any) => { - state.tableParams.field = options.field; - state.tableParams.order = options.order; - handleQuery(); + await xGrid.value?.commitProxy('reload'); }; // 打开新增页面 @@ -220,12 +200,31 @@ const handleDelete = (row: any) => { }) .then(async () => { await getAPI(SysCodeGenApi).apiSysCodeGenDeletePost([{ id: row.id }]); - handleQuery(); + await handleQuery(); ElMessage.success('操作成功'); }) .catch(() => {}); }; +// 表格事件 +const gridEvents: VxeGridListeners = { + // 只对 pager-config 配置时有效，分页发生改变时会触发该事件 + async pageChange({ pageSize }) { + state.localPageParam.pageSize = pageSize; + Local.set(localPageParamKey, state.localPageParam); + }, + // 当排序条件发生变化时会触发该事件 + async sortChange({ field, order }) { + state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' }; + Local.set(localPageParamKey, state.localPageParam); + }, +}; + +// 打开配置 +const handleConfig = (row: any) => { + CodeConfigRef.value?.openDialog(row); +}; + // 开始生成代码 const handleGenerate = (row: any) => { ElMessageBox.confirm(`确定要生成吗?`, '提示', { @@ -236,7 +235,7 @@ const handleGenerate = (row: any) => { .then(async () => { var res = await getAPI(SysCodeGenApi).apiSysCodeGenRunLocalPost(row); if (res.data.result != null && res.data.result.url != null) downloadByUrl({ url: res.data.result.url }); - handleQuery(); + await handleQuery(); ElMessage.success('操作成功'); }) .catch(() => {});