同步模版
This commit is contained in:
Master
parent
a9f719a9b5
commit
0f1b7b8dbe
@ -20,25 +20,25 @@
|
||||
<template>
|
||||
<div class="@(@Model.LowerClassName)-container" v-loading="options.loading">
|
||||
<el-card shadow="hover" :body-style="{ padding: '20px 20px 16px 10px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
|
||||
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%" @@submit.prevent="handleQuery(true)" >
|
||||
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%" @@submit.prevent="handleQuery" >
|
||||
<el-row :gutter="10">
|
||||
@if(Model.QueryWhetherList.Count > 0){
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="关键字" prop="searchKey">
|
||||
<el-input v-model="state.queryParams.searchKey" placeholder="请输入模糊查询关键字" clearable @@keyup.enter.native="handleQuery(true)" />
|
||||
<el-input v-model="state.queryParams.searchKey" placeholder="请输入模糊查询关键字" clearable @@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
foreach (var column in Model.QueryWhetherList) {
|
||||
if(@column.EffectType == "Input" || @column.EffectType == "InputTextArea") {
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
|
||||
<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
|
||||
<el-input v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="@column.ColumnComment" clearable @@keyup.enter.native="handleQuery(true)" />
|
||||
<el-input v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="@column.ColumnComment" clearable @@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
} else if(@column.EffectType == "InputNumber") {
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
|
||||
<el-form-item label="@column.ColumnComment">
|
||||
<el-input-number v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="请输入@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery(true)" />
|
||||
<el-input-number v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="请输入@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
} else if(@column.EffectType == "fk") {
|
||||
@ -52,7 +52,7 @@
|
||||
} else if(@column.EffectType == "Select") {
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
|
||||
<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
|
||||
<el-select v-model="state.queryParams.@(@column.LowerPropertyName)" filterable placeholder="请选择@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery(true)" >
|
||||
<el-select v-model="state.queryParams.@(@column.LowerPropertyName)" filterable placeholder="请选择@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery" >
|
||||
<el-option v-for="(item,index) in dl('@(@column.DictTypeCode)')" :key="index" :value="item.code" :label="`${item.name} [${item.code}] ${item.value}`" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -60,7 +60,7 @@
|
||||
} else if(@column.EffectType == "EnumSelector") {
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.showAdvanceQueryUI">
|
||||
<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
|
||||
<el-select v-model="state.queryParams.@(@column.LowerPropertyName)" filterable placeholder="请选择@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery(true)" >
|
||||
<el-select v-model="state.queryParams.@(@column.LowerPropertyName)" filterable placeholder="请选择@(@column.ColumnComment)" clearable @@keyup.enter.native="handleQuery" >
|
||||
<el-option v-for="(item,index) in dl('@(@column.DictTypeCode)')" :key="index" :value="item.value" :label="`${item.name} [${item.code}] ${item.value}`" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -86,7 +86,7 @@
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="ele-Search" @@click="handleQuery(true)" v-auth="'@(@Model.LowerClassName):page'" :loading="options.loading"> 查询 </el-button>
|
||||
<el-button type="primary" icon="ele-Search" @@click="handleQuery" v-auth="'@(@Model.LowerClassName):page'" :loading="options.loading"> 查询 </el-button>
|
||||
<el-button icon="ele-Refresh" @@click="resetQuery" :loading="options.loading"> 重置 </el-button>
|
||||
<el-button icon="ele-ZoomIn" @@click="changeAdvanceQueryUI" v-if="!state.showAdvanceQueryUI" style="margin-left: 5px"> 高级查询 </el-button>
|
||||
<el-button icon="ele-ZoomOut" @@click="changeAdvanceQueryUI" v-if="state.showAdvanceQueryUI" style="margin-left: 5px"> 隐藏 </el-button>
|
||||
@ -96,7 +96,7 @@
|
||||
</el-card>
|
||||
|
||||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||||
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @@sort-change="sortChange">
|
||||
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
|
||||
<template #toolbar_buttons>
|
||||
<el-button type="primary" icon="ele-Plus" @@click="handleAdd" v-auth="'@(@Model.LowerClassName):add'"> 新增 </el-button>
|
||||
</template>
|
||||
@ -177,15 +177,6 @@
|
||||
<el-button icon="ele-Delete" size="small" text type="danger" @@click="handleDelete(row)" v-auth="'@(@Model.LowerClassName):delete'" :disabled="row.status === 1" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template #pager>
|
||||
<vxe-pager
|
||||
:loading="options.loading"
|
||||
v-model:current-page="state.tableParams.page"
|
||||
v-model:page-size="state.tableParams.pageSize"
|
||||
:total="state.tableParams.total"
|
||||
@@page-change="pageChange"
|
||||
/>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</el-card>
|
||||
|
||||
@ -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<any>([]);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user