From 0f1b7b8dbe66924dce11c28980160d7db9948afa Mon Sep 17 00:00:00 2001 From: Master Date: Thu, 11 Jul 2024 14:47:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E6=A8=A1=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wwwroot/Template/index.vue.vm | 183 +++++++++--------- 1 file changed, 91 insertions(+), 92 deletions(-) diff --git a/Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/index.vue.vm b/Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/index.vue.vm index de62f3c7..15ce0282 100644 --- a/Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/index.vue.vm +++ b/Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/index.vue.vm @@ -20,25 +20,25 @@ - @@ -198,8 +189,10 @@ 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'; @if(@Model.TableField.Any(x=>x.EffectType == "ConstSelector")){ @:import { codeToName, getConstType } from "/@@/utils/constHelper"; @@ -260,81 +253,82 @@ const state = reactive({ } } }, - tableParams: { - page: 1, - pageSize: 50, - field: 'id', // 默认的排序字段 - order: 'aes', // 排序方向 - descStr: 'desc', // 降序排序的关键字符 - total: 0 as any, + localPageParam: { + pageSize: 50 as number, + defaultSort: { field: 'createTime', order: 'asc', descStr: 'desc' }, }, visible: false, title: '', }); +// 本地存储参数 +const localPageParamKey = 'localPageParam:@(@Model.LowerClassName)'; + // 改变高级查询的控件显示状态 const changeAdvanceQueryUI = () => { state.showAdvanceQueryUI = !state.showAdvanceQueryUI; }; // 表格参数配置 -const options = useVxeTable<@(@Model.ClassName)>({ - id: '@(@Model.ClassName)', - name: '@(@Model.BusName)', - columns: [ - { type: 'seq', title: '序号', width: 60, fixed: 'left' }, - @foreach (var column in Model.TableField) { - var whethersortable =column.WhetherSortable == "Y" ? "sortable: true" : "sortable: false"; - if(@column.WhetherTable == "Y") { - if(@column.EffectType == "Upload" || @column.EffectType == "fk" || @column.EffectType == "ApiTreeSelect" || @column.EffectType == "Switch" || @column.EffectType == "ConstSelector") { - if(@column.EffectType == "Upload") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } else if(@column.EffectType == "fk") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } else if(@column.EffectType == "ApiTreeSelect") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } else if(@column.EffectType == "Switch") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } else if(@column.EffectType == "ConstSelector") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } - } else if(@column.EffectType == "Select") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } else if(@column.EffectType == "EnumSelector") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } else if(@column.EffectType == "DatePicker") { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, - } else { - @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', @whethersortable}, - } - } - } - { field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } }, - { title: '操作', fixed: 'right', width: 180, showOverflow: true, slots: { default: 'row_buttons' } }, - ], - enableExport: auth('@(@Model.LowerClassName):export'), - searchCallback: () => handleQuery(), - queryAllCallback: () => fetchData({ pageSize: 99999 }), -}); +const options = useVxeTable<@(@Model.ClassName)>( + { + id: '@(@Model.ClassName)', + name: '@(@Model.BusName)', + columns: [ + { type: 'seq', title: '序号', width: 60, fixed: 'left' }, + @foreach (var column in Model.TableField) { + var whethersortable =column.WhetherSortable == "Y" ? "sortable: true" : "sortable: false"; + if(@column.WhetherTable == "Y") { + if(@column.EffectType == "Upload" || @column.EffectType == "fk" || @column.EffectType == "ApiTreeSelect" || @column.EffectType == "Switch" || @column.EffectType == "ConstSelector") { + if(@column.EffectType == "Upload") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } else if(@column.EffectType == "fk") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } else if(@column.EffectType == "ApiTreeSelect") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } else if(@column.EffectType == "Switch") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } else if(@column.EffectType == "ConstSelector") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } + } else if(@column.EffectType == "Select") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } else if(@column.EffectType == "EnumSelector") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } else if(@column.EffectType == "DatePicker") { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_@column.LowerPropertyName' }, @whethersortable }, + } else { + @:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', @whethersortable}, + } + } + } + { field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } }, + { title: '操作', fixed: 'right', width: 180, 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 }, + // 行设置 + rowConfig: { height: 80 }, + } +); // 页面初始化 onMounted(async () => { await handleQuery(); }); -// 查询操作 -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 @(@Model.ClassName)Input; @if (@Model.IsApiService) { @:return getAPI(@(@Model.ClassName)Api).api@(@Model.ClassName)PagePost(params); } else { @@ -342,6 +336,11 @@ const fetchData = async (tableParams: any) => { } }; +// 查询操作 +const handleQuery = async (reset = false) => { + await xGrid.value?.commitProxy('query'); +}; + // 重置操作 const resetQuery = () => { state.queryParams.searchKey = undefined, @@ -350,21 +349,7 @@ const resetQuery = () => { @:state.queryParams.@(@column.LowerPropertyName) = undefined, } } - handleQuery(true); -}; - -// 改变页码序号或页面容量 -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'); }; // 打开新增页面 @@ -419,6 +404,20 @@ const handleDelete = (row: any) => { .catch(() => {}); }; +// 表格事件 +const gridEvents: VxeGridListeners<@(@Model.ClassName)> = { + // 只对 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); + }, +}; + @foreach (var column in Model.QueryWhetherList) { @if(@column.EffectType == "fk") { @:const @LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList = ref([]);