VistarStarDataIntegration/admin.net.pro/Admin.NET/Admin.NET.Web.Entry/wwwroot/template/web_views_index.vue.vm
2024-09-09 09:23:58 +08:00

470 lines
20 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@{
string LowerFirstLetter(string text)
{
return text.ToString()[..1].ToLower() + text[1..]; // 首字母小写
}
var pkField = Model.TableField.Where(c => c.ColumnKey == "True").FirstOrDefault();
string pkFieldName = null;
if(pkField != null && !string.IsNullOrEmpty(pkField.PropertyName))
{
pkFieldName = LowerFirstLetter(pkField.PropertyName);
}
Dictionary<string, int> definedObjects = new Dictionary<string, int>();
bool haveLikeCdt = false;
foreach (var column in Model.TableField){
if (column.QueryWhether == "Y" && column.QueryType == "like"){
haveLikeCdt = true;
}
}
}
<template>
<div class="@(@Model.LowerClassName)-container">
<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" >
<el-row :gutter="10">
@if(Model.QueryWhetherList.Count > 0){
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5">
<el-form-item label="关键字" prop="searchKey">
<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 :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" 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" />
</el-form-item>
</el-col>
} else if(@column.EffectType == "InputNumber") {
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" 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" />
</el-form-item>
</el-col>
} else if(@column.EffectType == "fk") {
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
<el-form-item label="@column.ColumnComment">
<el-select filterable="" v-model="state.queryParams.@(@column.LowerPropertyName)" placeholder="请选择@(@column.ColumnComment)" clearable>
<el-option v-for="(item,index) in @LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList" :key="index" :value="item.value" :label="item.label" />
</el-select>
</el-form-item>
</el-col>
} else if(@column.EffectType == "Select") {
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" 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" >
<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>
</el-col>
} else if(@column.EffectType == "EnumSelector") {
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" 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" >
<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>
</el-col>
} else if(@column.EffectType == "DatePicker") {
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI">
<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
@if(@column.QueryType == "~"){
@:<el-date-picker type="daterange" v-model="state.queryParams.@(@column.LowerPropertyName)Range" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
} else {
@:<el-date-picker placeholder="请选择@(@column.ColumnComment)" value-format="YYYY/MM/DD" v-model="state.queryParams.@(@column.LowerPropertyName)" />
}
</el-form-item>
</el-col>
}
}
}
</el-row>
</el-form>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<el-row>
<el-col>
<el-button-group>
<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>
</el-button-group>
</el-col>
</el-row>
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<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>
<template #toolbar_tools> </template>
<template #empty>
<el-empty :image-size="200" />
</template>
@foreach (var column in Model.TableField) {
if(@column.WhetherTable == "Y") {
if(@column.EffectType == "Upload") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<el-popover
@:v-if="row.@column.LowerPropertyName"
@:placement="bottom"
@::width="60"
@::height="60"
@:trigger="hover">
@:<template #reference>
@:<el-tag>查看文件</el-tag>
@:</template>
@:<template #default>
@:<el-image
@::src="row.@column.LowerPropertyName"
@::hide-on-click-modal="true"
@::preview-src-list="[row.@column.LowerPropertyName]"
@::initial-index="0"
@:fit="scale-down"
@:preview-teleported=""/>
@:</template>
@:</el-popover>
@:<el-tag v-else type="info">暂无文件</el-tag>
@:</template>
} else if(@column.EffectType == "fk") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<span>{{ row.@LowerFirstLetter(@column.PropertyName)@(@column.FkColumnName) }}</span>
@:</template>
} else if(@column.EffectType == "ApiTreeSelect") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<span>{{ row.@LowerFirstLetter(@column.PropertyName)@(column.DisplayColumn) }}</span>
@:</template>
} else if(@column.EffectType == "Switch") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<el-tag v-if="row.@(@column.LowerPropertyName)"> 是 </el-tag>
@:<el-tag type="danger" v-else> 否 </el-tag>
@:</template>
} else if(@column.EffectType == "ConstSelector") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<span>{{codeToName(row.@(@column.LowerPropertyName), '@(@column.DictTypeCode)')}}</span>
@:</template>
} else if(@column.EffectType == "Select") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<el-tag :type="di('@(@column.DictTypeCode)', row.@(@column.LowerPropertyName))?.tagType"> {{di('@(@column.DictTypeCode)', row.@column.LowerPropertyName)?.name}}</el-tag>
@:</template>
} else if(@column.EffectType == "EnumSelector") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<el-tag :type="dv('@(@column.DictTypeCode)', row.@(@column.LowerPropertyName))?.tagType"> {{dv('@(@column.DictTypeCode)', row.@column.LowerPropertyName)?.name}}</el-tag>
@:</template>
}
}
}
<template #row_record="{ row }">
<ModifyRecord :data="row" />
</template>
<template #row_buttons="{ row }">
@if(@Model.PrintType != "off") {
<el-tooltip content="打印" placement="top">
<el-button icon="ele-Printer" size="small" text type="primary" @@click="handlePrint(row)" v-auth="'@(@Model.LowerClassName)/print'" />
</el-tooltip>
}
<el-tooltip content="编辑" placement="top">
<el-button icon="ele-Edit" size="small" text type="primary" @@click="handleEdit(row)" v-auth="'@(@Model.LowerClassName)/update'" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button icon="ele-Delete" size="small" text type="danger" @@click="handleDelete(row)" v-auth="'@(@Model.LowerClassName)/delete'" />
</el-tooltip>
</template>
</vxe-grid>
</el-card>
@if(@Model.PrintType != "off"){
@:<PrintDialog ref="printDialogRef" :title="state.title" @@reloadTable="handleQuery" />
}
<EditDialog ref="editDialogRef" :title="state.title" @@reloadTable="handleQuery" />
</div>
</template>
<script lang="ts" setup name="@(@Model.LowerClassName)">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from "element-plus";
import { auth } from '/@@/utils/authFunction';
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";
}
@if(@Model.TableField.Any(x=>x.EffectType == "Select") || @Model.TableField.Any(x=>x.EffectType == "EnumSelector")){
@:import { getDictLabelByVal as di, getDictDataList as dl } from '/@@/utils/dict-utils';
}
@if(@Model.TableField.Any(x=>x.EffectType == "EnumSelector")){
@:import { getDictLabelByVal as dv } from '/@@/utils/dict-utils';
}
@if(@Model.TableField.Any(x=>x.EffectType == "DatePicker")){
@:import { formatDate } from '/@@/utils/formatTime';
}
@if(@Model.PrintType != "off"){
@:// 推荐设置操作 width 为 200
@:import { hiprint } from 'vue-plugin-hiprint';
@:import { SysPrintApi } from '/@@/api-services/api';
@:import { SysPrint } from '/@@/api-services/models';
}
// 子窗口
@if(@Model.PrintType != "off") {
@:import PrintDialog from '/@@/views/system/print/component/hiprint/preview.vue';
}
import EditDialog from '/@@/views/@(@Model.PagePath)/@(@Model.LowerClassName)/component/editDialog.vue';
import ModifyRecord from '/@@/components/table/modifyRecord.vue';
@if (@Model.IsApiService) {
// 接口函数
@:import { getAPI } from '/@@/utils/axios-utils';
// 接口
@:import { @(@Model.ClassName)Api } from '/@@/api-services/api';
// 模型
@:import { @(@Model.ClassName), @(@Model.ClassName)Input, @(@Model.ClassName)Output } from '/@@/api-services/models';
} else {
@:import { page@(@Model.ClassName), delete@(@Model.ClassName) } from '/@@/api/@(@Model.PagePath)/@(@Model.LowerClassName)';
foreach (var column in Model.QueryWhetherList){
if(@column.EffectType == "fk"){
@:import { get@(@column.FkEntityName)@(@column.PropertyName)Dropdown } from '/@@/api/@(@Model.PagePath)/@(@Model.LowerClassName)';
}
}
}
// 子窗口对象
const xGrid = ref<VxeGridInstance>();
@if(@Model.PrintType != "off") {
@:const printDialogRef = ref<InstanceType<typeof PrintDialog>>();
}
const editDialogRef = ref<InstanceType<typeof EditDialog>>();
// 变量
const state = reactive({
showAdvanceQueryUI: false,
queryParams: {
searchKey: undefined,
@if(Model.QueryWhetherList.Count > 0) {
@foreach (var column in Model.QueryWhetherList) {
@:@(@column.LowerPropertyName): undefined,
}
}
},
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;
};
// 表格参数配置
@if (@Model.IsApiService) {
@:const options = useVxeTable<@(@Model.ClassName)>(
} else {
@:const options = useVxeTable(
}
{
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', formatter: ({ cellValue }) => formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS'), @whethersortable },
} else {
@:{ field: '@column.LowerPropertyName', title: '@column.ColumnComment', minWidth: 100, showOverflow: 'tooltip', @whethersortable},
}
}
}
{ 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(() => {});
// 查询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 {
@:return page@(@Model.ClassName)(params);
}
};
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
await xGrid.value?.commitProxy('query');
options.loading = false;
};
// 重置操作
const resetQuery = async () => {
state.queryParams.searchKey = undefined,
@if(Model.QueryWhetherList.Count > 0) {
@foreach (var column in Model.QueryWhetherList) {
@:state.queryParams.@(@column.LowerPropertyName) = undefined,
}
}
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
const handleAdd = () => {
state.title = '添加@(@Model.BusName)';
let data = {
@foreach (var column in Model.TableField){
if(@column.WhetherAddUpdate == "Y"&&@column.DefaultValue!=null){
if(@column.NetType.StartsWith("int")||@column.NetType.StartsWith("decimal")){
@:@column.LowerPropertyName:@(string.IsNullOrEmpty(@column.DefaultValue)?0:@column.DefaultValue),
}
if(@column.NetType.StartsWith("string")){
@:@column.LowerPropertyName:'@(@column.DefaultValue)',
}
}
}
};
editDialogRef.value?.openDialog(data);
};
// 打开编辑页面
const handleEdit = (row: any) => {
state.title = '编辑@(@Model.BusName)';
editDialogRef.value?.openDialog(row);
};
@if(@Model.PrintType != "off") {
@:// 打开打印页面
@:const handlePrint = async (row: any) => {
@:state.title = '打印@(@Model.BusName)';
@if(@Model.PrintType != "off"){
if (@Model.IsApiService) {
@:var res = await getAPI(SysPrintApi).apiSysPrintPrintNameGet('@Model.PrintName');
} else {
@:var res = await getPrint@(@Model.ClassName)(row);
}
@:var printTemplate = res.data.result as SysPrint;
@:var template = JSON.parse(printTemplate.template);
@:var width = template.panels[0].width;
@:row['barCode'] = row.code;
@:row['qrCode'] = row.code;
@:row["printDate"] = formatDate(new Date(), 'YYYY-mm-dd HH:MM');
@:printDialogRef.value.showDialog(new hiprint.PrintTemplate({template: template}), row, width);
}
@if(@Model.PrintType == "auto"){
@:printDialogRef.value.showDialog(row);
}
@:};
}
// 删除
const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除@(@Model.BusName):【${row.title}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
@if (@Model.IsApiService) {
@:await getAPI(@(@Model.ClassName)Api).api@(@Model.ClassName)DeletePost({ id: row.id });
} else {
@:await delete@(@Model.ClassName)(row);
}
await handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 表格事件
@if (@Model.IsApiService) {
@:const gridEvents: VxeGridListeners<@(@Model.ClassName)> = {
} else {
@: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);
},
};
@foreach (var column in Model.QueryWhetherList) {
@if(@column.EffectType == "fk") {
@:const @LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList = ref<any>([]);
@:const get@(@column.FkEntityName)@(@column.PropertyName)DropdownList = async () => {
@if (@Model.IsApiService) {
@:let list = await getAPI(@(@Model.ClassName)Api).api@(@Model.ClassName)@(@column.FkEntityName)@(@column.PropertyName)DropdownGet();
} else {
@:let list = await get@(@column.FkEntityName)@(@column.PropertyName)Dropdown();
}
@:@LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList.value = list.data.result ?? [];
@:};
@:get@(@column.FkEntityName)@(@column.PropertyName)DropdownList();
}
}
</script>
<style lang="scss" scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
width: 100%;
}
:deep(.el-slider .el-input-number){
width: auto;
}
</style>