From 02c8d53f2b5cf7018c45d71a56ade48baee350f9 Mon Sep 17 00:00:00 2001 From: zuohuaijun Date: Thu, 11 Jul 2024 02:51:21 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=98=8E=E8=B0=83=E6=95=B4=E5=AD=97?= =?UTF-8?q?=E5=85=B8=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Web/src/views/system/dict/index.vue | 293 ++++++++++++++-------------- 1 file changed, 142 insertions(+), 151 deletions(-) diff --git a/Web/src/views/system/dict/index.vue b/Web/src/views/system/dict/index.vue index df10f9d1..5d6e95d3 100644 --- a/Web/src/views/system/dict/index.vue +++ b/Web/src/views/system/dict/index.vue @@ -1,18 +1,18 @@ @@ -148,8 +130,9 @@ import { onMounted, reactive, ref } 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 { useUserInfo } from '/@/stores/userInfo'; import EditDictType from '/@/views/system/dict/component/editDictType.vue'; @@ -158,45 +141,39 @@ import ModifyRecord from '/@/components/table/modifyRecord.vue'; import { getAPI } from '/@/utils/axios-utils'; import { SysDictTypeApi, SysDictDataApi } from '/@/api-services/api'; -import { SysDictType, SysDictData } from '/@/api-services/models'; +import { SysDictType, PageDictTypeInput, SysDictData, PageDictDataInput } from '/@/api-services/models'; -const xGrid = ref(); -const xDictGrid = ref(); -const editRef = ref>(); -const editDictRef = ref>(); +const xGridDictType = ref(); +const xGridDictData = ref(); +const editRefDictType = ref>(); +const editRefDictData = ref>(); const state = reactive({ - queryParams: { + queryParamsDictType: { name: undefined, code: undefined, }, - queryDictParams: { + queryParamsDictData: { dictTypeId: undefined, value: undefined, code: undefined, }, - tableParams: { - page: 1, - pageSize: 50, - field: 'orderNo', // 默认的排序字段 - order: 'aes', // 排序方向 - descStr: 'desc', // 降序排序的关键字符 - total: 0 as any, + localPageParamDictType: { + pageSize: 50 as number, + defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' }, }, - tableDictParams: { - page: 1, - pageSize: 50, - field: 'orderNo', // 默认的排序字段 - order: 'aes', // 排序方向 - descStr: 'desc', // 降序排序的关键字符 - total: 0 as any, + localPageParamDictData: { + pageSize: 50 as number, + defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' }, }, title: '', }); +// 本地存储参数 +const localPageParamKey = 'localPageParam:sysDictType'; // 表格参数配置-字典类型 -const options = useVxeTable( +const optionsDictType = useVxeTable( { - id: 'sysDict', + id: 'sysDictType', name: '字典信息', columns: [ { type: 'seq', title: '序号', width: 60, fixed: 'left' }, @@ -207,75 +184,67 @@ const options = useVxeTable( { field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } }, { title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } }, ], - enableExport: auth('sysDictType:export'), - searchCallback: () => handleQuery(), - queryAllCallback: () => fetchData({ pageSize: 99999 }), }, - { rowConfig: { isCurrent: true, isHover: true }, checkboxConfig: { range: true, highlight: false } } + // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档 + { + // 代理配置 + proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } }, + // 排序配置 + sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParamDictType.defaultSort }, + // 分页配置 + pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParamDictType.pageSize }, + // 工具栏配置 + toolbarConfig: { export: false }, + // 行配置 + rowConfig: { isCurrent: true, isHover: true }, + checkboxConfig: { range: true, highlight: false }, + } ); // 页面初始化 onMounted(async () => { + state.localPageParamDictType = Local.get(localPageParamKey) || state.localPageParamDictType; await handleQuery(); }); -// 查询操作 -const handleQuery = async (reset = false) => { - options.loading = true; - if (reset) state.tableParams.page = 1; - var res = await fetchData(null); - await xGrid.value?.loadData(res.data.result?.items ?? []); - state.tableParams.total = res.data.result?.total; - options.loading = false; +// 查询api +const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => { + const params = Object.assign(state.queryParamsDictType, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageDictTypeInput; + return getAPI(SysDictTypeApi).apiSysDictTypePagePost(params); }; -// 获取数据 -const fetchData = async (tableParams: any) => { - let params = Object.assign(state.queryParams, state.tableParams, tableParams); - return getAPI(SysDictTypeApi).apiSysDictTypePagePost(params); +// 查询操作 +const handleQuery = async () => { + await xGridDictType.value?.commitProxy('query'); }; // 重置操作 const resetQuery = async () => { - state.queryParams.code = undefined; - state.queryParams.name = undefined; - await handleQuery(true); -}; - -// 改变页码序号或页面容量 -const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => { - state.tableParams.page = currentPage; - state.tableParams.pageSize = pageSize; - await handleQuery(); -}; - -// 列排序 -const sortChange = async (options: any) => { - state.tableParams.field = options.field; - state.tableParams.order = options.order; - await handleQuery(); + state.queryParamsDictType.code = undefined; + state.queryParamsDictType.name = undefined; + await xGridDictType.value?.commitProxy('reload'); }; // 打开新增页面 const handleAdd = () => { state.title = '添加字典'; - editRef.value?.openDialog({ status: 1, orderNo: 100 }); + editRefDictType.value?.openDialog({ status: 1, orderNo: 100 }); }; // 打开编辑页面 const handleEdit = (row: any) => { state.title = '编辑字典'; - editRef.value?.openDialog(row); + editRefDictType.value?.openDialog(row); }; -// 点击表格，加载字典值表格数据 +// 点击字典类型，加载其字典值数据 const handleDictData = async (scope: any) => { - state.queryDictParams.dictTypeId = scope.row.id; - await handleDictQuery(true); + state.queryParamsDictData.dictTypeId = scope.row.id; + await handleQueryDictData(); }; -// 删除 -const handleDelete = (row: any) => { +// 删除字典 +const handleDeleteDictType = (row: any) => { ElMessageBox.confirm(`确定删除字典：【${row.name}】?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', @@ -283,19 +252,32 @@ const handleDelete = (row: any) => { }) .then(async () => { await getAPI(SysDictTypeApi).apiSysDictTypeDeletePost({ id: row.id }); - handleQuery(); - updateDictSession(); - xDictGrid.value?.loadData([]); - state.tableDictParams.total = 0; + await handleQuery(); + await updateDictSession(); + xGridDictData.value?.loadData([]); ElMessage.success('删除成功'); }) .catch(() => {}); }; +// 表格事件 +const gridEventsDictType: VxeGridListeners = { + // 只对 pager-config 配置时有效，分页发生改变时会触发该事件 + async pageChange({ pageSize }) { + state.localPageParamDictType.pageSize = pageSize; + // Local.set(localPageParamKey, state.localPageParam); + }, + // 当排序条件发生变化时会触发该事件 + async sortChange({ field, order }) { + state.localPageParamDictType.defaultSort = { field: field, order: order!, descStr: 'desc' }; + // Local.set(localPageParamKey, state.localPageParam); + }, +}; + // 表格参数配置-字典值 -const dictOptions = useVxeTable( +const optionsDictData = useVxeTable( { - id: 'dictInfo', + id: 'sysDictData', name: '字典值信息', columns: [ { type: 'seq', title: '序号', width: 60, fixed: 'left' }, @@ -308,53 +290,62 @@ const dictOptions = useVxeTable( { field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } }, { title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } }, ], - enableExport: auth('sysDictType:export'), - searchCallback: () => handleDictQuery(), - queryAllCallback: () => fetchDictData({ pageSize: 99999 }), }, - { loading: false, rowConfig: { isCurrent: true, isHover: true }, checkboxConfig: { range: true, highlight: false } } + // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档 + { + // 代理配置 + proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryDictDataApi(page, sort) } }, + // // 排序配置 + // sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort }, + // // 分页配置 + // pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize }, + // 工具栏配置 + toolbarConfig: { export: false }, + // 等待 + loading: false, + // 行配置 + rowConfig: { isCurrent: true, isHover: true }, + // 多选配置 + checkboxConfig: { range: true, highlight: false }, + } ); -// 查询操作 -const handleDictQuery = async (reset = false) => { - dictOptions.loading = true; - if (reset) state.tableDictParams.page = 1; - var res = await fetchDictData(null); - xDictGrid.value?.loadData(res.data.result?.items ?? []); - state.tableDictParams.total = res.data.result?.total; - dictOptions.loading = false; -}; - -// 获取数据 -const fetchDictData = async (tableParams: any) => { - let params = Object.assign(state.queryDictParams, state.tableDictParams, tableParams); +// 查询api +const handleQueryDictDataApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => { + const params = Object.assign(state.queryParamsDictData, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageDictDataInput; return getAPI(SysDictDataApi).apiSysDictDataPagePost(params); }; -// 重置操作 -const resetDictQuery = async () => { - state.queryDictParams.value = undefined; - state.queryDictParams.code = undefined; - await handleDictQuery(true); +// 查询操作 +const handleQueryDictData = async () => { + await xGridDictData.value?.commitProxy('query'); }; -const handleDictAdd = () => { - if (!state.queryDictParams.dictTypeId) { +// 重置操作 +const resetQueryDictData = async () => { + state.queryParamsDictData.value = undefined; + state.queryParamsDictData.code = undefined; + await xGridDictData.value?.commitProxy('reload'); +}; + +// 添加字典值 +const handleAddDictData = () => { + if (!state.queryParamsDictData.dictTypeId) { ElMessage.warning('请选择字典'); return; } state.title = '添加字典值'; - editDictRef.value?.openDialog({ status: 1, orderNo: 100, dictTypeId: state.queryDictParams.dictTypeId }); + editRefDictData.value?.openDialog({ status: 1, orderNo: 100, dictTypeId: state.queryParamsDictData.dictTypeId }); }; // 打开编辑页面 -const handleDictEdit = (row: any) => { +const handleEditDictData = (row: any) => { state.title = '编辑字典值'; - editDictRef.value?.openDialog(row); + editRefDictData.value?.openDialog(row); }; -// 删除 -const handleDictDelete = (row: any) => { +// 删除字典值 +const handleDeleteDictData = (row: any) => { ElMessageBox.confirm(`确定删除字典值：【${row.value}】?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', @@ -362,25 +353,25 @@ const handleDictDelete = (row: any) => { }) .then(async () => { await getAPI(SysDictDataApi).apiSysDictDataDeletePost({ id: row.id }); - handleDictQuery(); - updateDictSession(); + await handleQueryDictData(); + await updateDictSession(); ElMessage.success('删除成功'); }) .catch(() => {}); }; -// 改变字典值页码序号或页面容量 -const dictPageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => { - state.tableDictParams.page = currentPage; - state.tableDictParams.pageSize = pageSize; - await handleDictQuery(); -}; - -// 字典值列排序 -const dictSortChange = async (options: any) => { - state.tableDictParams.field = options.field; - state.tableDictParams.order = options.order; - await handleDictQuery(); +// 表格事件 +const gridEventsDictData: VxeGridListeners = { + // 只对 pager-config 配置时有效，分页发生改变时会触发该事件 + async pageChange({ pageSize }) { + state.localPageParamDictData.pageSize = pageSize; + // Local.set(localPageParamKey, state.localPageParam); + }, + // 当排序条件发生变化时会触发该事件 + async sortChange({ field, order }) { + state.localPageParamDictData.defaultSort = { field: field, order: order!, descStr: 'desc' }; + // Local.set(localPageParamKey, state.localPageParam); + }, }; // 更新前端字典缓存