tongtong/youlai-boot
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(codegen): 修复前端模板语法与对齐问题

Browse Source
This commit is contained in:
Ray.Hao
2026-06-25 12:41:02 +08:00
parent 6b6c06370f
commit 6943f12d79
20 changed files with 342 additions and 1441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/main/resources/templates/codegen/backend/query.java.vm
View File

@@ -4,7 +4,17 @@ import ${packageName}.common.base.BaseQuery;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Getter;
import lombok.Setter;
#if($fieldConfigs)
#set ($hasDateBetween = false)
#foreach($fieldConfig in ${fieldConfigs})
#if(($fieldConfig.formType.name() == "DATE" || $fieldConfig.formType.name() == "DATE_TIME") && $fieldConfig.queryType.name() == "BETWEEN")
#set ($hasDateBetween = true)
#end
#end
#if($hasDateBetween)
import java.util.List;
#end
#end
#if(${hasLocalDateTime})
import java.time.LocalDateTime;
#end

15
src/main/resources/templates/codegen/frontend/js/index.curd.js.vue.vm
View File

@@ -10,7 +10,7 @@
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInQuery == 1 && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<template #$fieldConfig.fieldName="scope">
<Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
<DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
</template>
#end
#end
@@ -30,7 +30,7 @@
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInList == 1 && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<template #$fieldConfig.fieldName="scope">
<DictLabel v-model="scope.row[scope.prop]" code="$fieldConfig.dictType" />
<DictTag v-model="scope.row[scope.prop]" code="$fieldConfig.dictType" />
</template>
#end
#end
@@ -41,7 +41,7 @@
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<template #$fieldConfig.fieldName="scope">
<Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
<DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
</template>
#end
#end
@@ -52,7 +52,7 @@
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<template #$fieldConfig.fieldName="scope">
<Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
<DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
</template>
#end
#end
@@ -61,7 +61,10 @@
</template>
<script setup>
defineOptions({ name: "$entityName" });
defineOptions({
name: "$entityName",
inheritAttrs: false,
});
import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
import usePage from "@/components/CURD/usePage";
@@ -183,7 +186,7 @@ const contentConfig = reactive({
{
label: "操作",
prop: "operation",
width: 220,
width: 180,
templet: "tool",
operat: ["edit", "delete"],
},

279
src/main/resources/templates/codegen/frontend/js/index.js.vue.vm
View File

@@ -1,63 +1,64 @@
<template>
<div class="page-container">
<!-- 搜索 -->
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-form ref="queryFormRef" :model="params" :inline="true">
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInQuery == 1)
<el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
#if($fieldConfig.formType.name() == "INPUT")
<el-input
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
placeholder="$fieldConfig.fieldComment"
clearable
@keyup.enter="handleQuery()"
/>
#elseif($fieldConfig.formType.name() == "SELECT")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<DictSelect v-model="queryParams.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
<DictSelect v-model="params.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
#else
<el-select v-model="queryParams.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
<el-select v-model="params.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
<el-option :key="1" :value="1" label="选项一"/>
<el-option :key="2" :value="2" label="选项二"/>
</el-select>
#end
#elseif($fieldConfig.formType.name() == "RADIO")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<DictSelect v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
<DictSelect v-model="params.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
#else
<el-radio-group v-model="queryParams.$fieldConfig.fieldName">
<el-radio-group v-model="params.$fieldConfig.fieldName">
<el-radio :key="1" :value="1">选项一</el-radio>
<el-radio :key="2" :value="2">选项二</el-radio>
</el-radio-group>
#end
#elseif($fieldConfig.formType.name() == "CHECK_BOX")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<DictSelect v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
<DictSelect v-model="params.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
#else
<el-checkbox-group v-model="queryParams.$fieldConfig.fieldName">
<el-checkbox-group v-model="params.$fieldConfig.fieldName">
<el-checkbox :key="1" :label="1">选项一</el-checkbox>
<el-checkbox :key="2" :label="2">选项二</el-checkbox>
</el-checkbox-group>
#end
#elseif($fieldConfig.formType.name() == "INPUT_NUMBER")
<el-input-number
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
placeholder="$fieldConfig.fieldComment"
/>
#elseif($fieldConfig.formType.name() == "SWITCH")
<el-switch
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
:active-value="1"
:inactive-value="0"
/>
#elseif($fieldConfig.formType.name() == "TEXT_AREA")
<el-input type="textarea"
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
placeholder="$fieldConfig.fieldComment"
/>
#elseif($fieldConfig.formType.name() == "DATE_TIME")
<el-date-picker
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
#if($fieldConfig.queryType.name() == "BETWEEN")
type="daterange"
range-separator="~"
@@ -72,7 +73,7 @@
#elseif($fieldConfig.formType.name() == "DATE")
<el-date-picker
class="!w-[240px]"
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
#if($fieldConfig.queryType.name() == "BETWEEN")
type="daterange"
range-separator="~"
@@ -89,41 +90,53 @@
#end
#end
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
<el-button type="primary" @click="handleQuery">搜索</el-button>
<el-button @click="handleResetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="page-content" shadow="never">
<!-- 表格 -->
<el-card ref="tableWrapperRef" class="page-content" shadow="never">
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button
v-hasPerm="['${moduleName}:${entityKebab}:create']"
type="success"
icon="plus"
type="primary"
@click="handleCreateClick()"
>新增</el-button>
<el-button
v-hasPerm="['${moduleName}:${entityKebab}:delete']"
type="danger"
:disabled="!hasSelection"
icon="delete"
@click="handleDelete()"
@click="handleBatchDelete()"
>删除</el-button>
</div>
<div class="page-toolbar__right">
<el-tooltip content="刷新" placement="top">
<el-button class="page-icon-btn" @click="fetchData">
<el-icon><Refresh /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="全屏" placement="top">
<el-button class="page-icon-btn" @click="toggleFullscreen">
<el-icon><FullScreen /></el-icon>
</el-button>
</el-tooltip>
</div>
</div>
<el-table
ref="dataTableRef"
v-loading="loading"
:data="pageData"
border
stripe
highlight-current-row
row-key="id"
@selection-change="handleSelectionChange"
>
<div class="page-table-wrapper">
<el-table
ref="dataTableRef"
v-loading="loading"
class="page-table"
:data="list"
height="100%"
border
highlight-current-row
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInList == 1)
@@ -144,14 +157,13 @@
#end
#end
#end
<el-table-column fixed="right" label="操作" width="220">
<el-table-column fixed="right" label="操作" width="180">
<template #default="scope">
<el-button
v-hasPerm="['${moduleName}:${entityKebab}:update']"
type="primary"
size="small"
link
icon="edit"
@click="handleEditClick(String(scope.row.id))"
>
编辑
@@ -161,7 +173,6 @@
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(String(scope.row.id))"
>
删除
@@ -169,23 +180,23 @@
</template>
</el-table-column>
</el-table>
<div class="page-pagination">
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="fetchList"
/>
</div>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="params.pageNum"
v-model:limit="params.pageSize"
class="page-pagination"
@pagination="fetchData"
/>
</el-card>
<!-- $!{businessName}表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
width="500px"
width="600px"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
@@ -265,8 +276,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit()">确定</el-button>
<el-button @click="closeDialog()">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
@@ -274,9 +285,10 @@
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useFullscreen } from "@vueuse/core";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTableSelection } from "@/composables";
import { FullScreen, Refresh } from "@element-plus/icons-vue";
import { usePageTable, useTableSelection } from "@/composables";
import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
defineOptions({
@@ -286,17 +298,22 @@
const queryFormRef = ref();
const dataFormRef = ref();
const tableWrapperRef = ref(null);
const { toggle: toggleFullscreen } = useFullscreen(tableWrapperRef);
const loading = ref(false);
const total = ref(0);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
});
const initialFormData = reactive({});
// $!{businessName}表格数据
const pageData = ref([]);
const { loading, list, total, params, fetchData, handleQuery, handleResetQuery } = usePageTable({
initialParams: {
pageNum: 1,
pageSize: 10,
},
request: ${entityName}API.getPage,
onBeforeReset: () => queryFormRef.value?.resetFields(),
});
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection();
const dialog = reactive({
title: "",
@@ -317,112 +334,114 @@
#end
});
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection();
async function fetchList() {
loading.value = true;
try {
const data = await ${entityName}API.getPage(queryParams);
pageData.value = data.list;
total.value = data.total ?? 0;
} finally {
loading.value = false;
}
}
/** 查询$!{businessName} */
function handleQuery() {
queryParams.pageNum = 1;
fetchList();
}
/** 重置$!{businessName}查询 */
function handleResetQuery() {
queryFormRef.value?.resetFields();
handleQuery();
}
/**
* 打开表单弹窗
*/
function openDialog() {
dialog.visible = true;
}
/**
* 关闭弹窗并重置表单
*/
function closeDialog() {
dialog.visible = false;
resetForm();
}
/**
* 重置表单
*/
function resetForm() {
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
formData.id = undefined;
Object.keys(formData).forEach((key) => {
delete formData[key];
});
Object.assign(formData, initialFormData);
}
/**
* 打开新增弹窗
*/
async function handleCreateClick() {
dialog.title = "新增$!{businessName}";
openDialog();
}
/**
* 打开编辑弹窗并回填数据
*/
async function handleEditClick(id) {
dialog.title = "修改$!{businessName}";
${entityName}API.getFormData(id).then((data) => {
Object.assign(formData, data);
openDialog();
});
const data = await ${entityName}API.getFormData(id);
Object.assign(formData, data);
openDialog();
}
/** 提交$!{businessName}表单 */
function handleSubmit() {
dataFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const id = formData.id;
if (id) {
${entityName}API.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
} else {
${entityName}API.create(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
}
/**
* 提交$!{businessName}表单
*/
async function handleSubmit() {
const valid = await dataFormRef.value?.validate().then(
() => true,
() => false
);
if (!valid) return;
loading.value = true;
try {
const id = formData.id;
if (id) {
await ${entityName}API.update(id, formData);
ElMessage.success("修改成功");
} else {
await ${entityName}API.create(formData);
ElMessage.success("新增成功");
}
});
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
}
}
/** 删除$!{businessName} */
function handleDelete(id) {
const ids = [id || selectedIds.value].join(",");
/**
* 批量删除$!{businessName}
*/
function handleBatchDelete() {
handleDelete();
}
/**
* 删除$!{businessName}
*/
async function handleDelete(id) {
const ids = id || selectedIds.value.join(",");
if (!ids) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
${entityName}API.deleteByIds(ids)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
},
() => {
ElMessage.info("已取消删除");
}
);
try {
await ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
});
} catch {
ElMessage.info("已取消删除");
return;
}
loading.value = true;
try {
await ${entityName}API.deleteByIds(ids);
ElMessage.success("删除成功");
handleResetQuery();
} finally {
loading.value = false;
}
}
onMounted(() => {

2
src/main/resources/templates/codegen/frontend/ts/api-types.ts.vm
View File

@@ -26,7 +26,7 @@ export interface ${entityName}QueryParams extends BaseQueryParams {
/** $!{businessName}表单对象 */
export interface ${entityName}Form {
id?: number;
id?: string;
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInForm)
#if("$!fieldConfig.fieldComment" != "")

33
src/main/resources/templates/codegen/frontend/ts/api.ts.vm
View File

@@ -7,30 +7,20 @@ const ${entityUpperSnake}_BASE_URL = "/api/v1/${entityKebab}";
const ${entityName}API = {
/** 获取${businessName}分页数据 */
getPage(queryParams?: ${entityName}QueryParams) {
return request<any, PageResult<${entityName}Item>>({
return request<unknown, PageResult<${entityName}Item>>({
url: `${${entityUpperSnake}_BASE_URL}`,
method: "get",
params: queryParams,
});
},
/**
* 获取${businessName}表单数据
*
* @param id ${businessName}ID
* @returns ${businessName}表单数据
*/
/** 获取${businessName}表单数据 */
getFormData(id: string) {
return request<any, ${entityName}Form>({
return request<unknown, ${entityName}Form>({
url: `${${entityUpperSnake}_BASE_URL}/${id}/form`,
method: "get",
});
},
/**
* 添加${businessName}
*
* @param data ${businessName}表单数据
*/
/** 新增${businessName} */
create(data: ${entityName}Form) {
return request({
url: `${${entityUpperSnake}_BASE_URL}`,
@@ -38,13 +28,7 @@ const ${entityName}API = {
data,
});
},
/**
* 更新${businessName}
*
* @param id ${businessName}ID
* @param data ${businessName}表单数据
*/
/** 更新${businessName} */
update(id: string, data: ${entityName}Form) {
return request({
url: `${${entityUpperSnake}_BASE_URL}/${id}`,
@@ -52,12 +36,7 @@ const ${entityName}API = {
data,
});
},
/**
* 批量删除${businessName}，多个以英文逗号(,)分割
*
* @param ids ${businessName}ID字符串，多个以英文逗号(,)分割
*/
/** 批量删除${businessName}，多个以英文逗号(,)分割 */
deleteByIds(ids: string) {
return request({
url: `${${entityUpperSnake}_BASE_URL}/${ids}`,

11
src/main/resources/templates/codegen/frontend/ts/index.curd.vue.vm
View File

@@ -61,11 +61,14 @@
</template>
<script setup lang="ts">
defineOptions({ name: "$entityName" });
defineOptions({
name: "$entityName",
inheritAttrs: false,
});
import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
import type { ${entityName}Form, ${entityName}QueryParams } from "@/api/${moduleName}/${entityKebab}";
import type { IObject, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
import type { IObject, IOperateData, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
// 组合式 CRUD
@@ -185,7 +188,7 @@ const contentConfig: IContentConfig<${entityName}QueryParams> = reactive({
{
label: "操作",
prop: "operation",
width: 220,
width: 180,
templet: "tool",
operat: ["edit", "delete"],
},
@@ -355,7 +358,7 @@ const editModalConfig: IModalConfig<${entityName}Form> = reactive({
});
// 处理操作按钮点击
const handleOperateClick = (data: IObject) => {
const handleOperateClick = (data: IOperateData) => {
if (data.name === "edit") {
handleEditClick(data.row, async () => {
return await ${entityName}API.getFormData(String(data.row.id));

292
src/main/resources/templates/codegen/frontend/ts/index.vue.vm
View File

@@ -1,63 +1,64 @@
<template>
<div class="page-container">
<!-- 搜索 -->
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-form ref="queryFormRef" :model="params" :inline="true">
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInQuery == 1)
<el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
#if($fieldConfig.formType.name() == "INPUT")
<el-input
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
placeholder="$fieldConfig.fieldComment"
clearable
@keyup.enter="handleQuery()"
/>
#elseif($fieldConfig.formType.name() == "SELECT")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<DictSelect v-model="queryParams.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
<DictSelect v-model="params.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
#else
<el-select v-model="queryParams.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
<el-select v-model="params.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
<el-option :key="1" :value="1" label="选项一"/>
<el-option :key="2" :value="2" label="选项二"/>
</el-select>
#end
#elseif($fieldConfig.formType.name() == "RADIO")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<DictSelect v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
<DictSelect v-model="params.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
#else
<el-radio-group v-model="queryParams.$fieldConfig.fieldName">
<el-radio-group v-model="params.$fieldConfig.fieldName">
<el-radio :key="1" :value="1">选项一</el-radio>
<el-radio :key="2" :value="2">选项二</el-radio>
</el-radio-group>
#end
#elseif($fieldConfig.formType.name() == "CHECK_BOX")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<DictSelect v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
<DictSelect v-model="params.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
#else
<el-checkbox-group v-model="queryParams.$fieldConfig.fieldName">
<el-checkbox-group v-model="params.$fieldConfig.fieldName">
<el-checkbox :key="1" :label="1">选项一</el-checkbox>
<el-checkbox :key="2" :label="2">选项二</el-checkbox>
</el-checkbox-group>
#end
#elseif($fieldConfig.formType.name() == "INPUT_NUMBER")
<el-input-number
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
placeholder="$fieldConfig.fieldComment"
/>
#elseif($fieldConfig.formType.name() == "SWITCH")
<el-switch
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
:active-value="1"
:inactive-value="0"
/>
#elseif($fieldConfig.formType.name() == "TEXT_AREA")
<el-input type="textarea"
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
placeholder="$fieldConfig.fieldComment"
/>
#elseif($fieldConfig.formType.name() == "DATE_TIME")
<el-date-picker
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
#if($fieldConfig.queryType.name() == "BETWEEN")
type="daterange"
range-separator="~"
@@ -72,7 +73,7 @@
#elseif($fieldConfig.formType.name() == "DATE")
<el-date-picker
class="!w-[240px]"
v-model="queryParams.$fieldConfig.fieldName"
v-model="params.$fieldConfig.fieldName"
#if($fieldConfig.queryType.name() == "BETWEEN")
type="daterange"
range-separator="~"
@@ -89,41 +90,53 @@
#end
#end
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
<el-button type="primary" @click="handleQuery">搜索</el-button>
<el-button @click="handleResetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="page-content" shadow="never">
<!-- 表格 -->
<el-card ref="tableWrapperRef" class="page-content" shadow="never">
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button
v-hasPerm="['${moduleName}:${entityKebab}:create']"
type="success"
icon="plus"
type="primary"
@click="handleCreateClick()"
>新增</el-button>
<el-button
v-hasPerm="['${moduleName}:${entityKebab}:delete']"
type="danger"
:disabled="!hasSelection"
icon="delete"
@click="handleDelete()"
@click="handleBatchDelete()"
>删除</el-button>
</div>
<div class="page-toolbar__right">
<el-tooltip content="刷新" placement="top">
<el-button class="page-icon-btn" @click="fetchData">
<el-icon><Refresh /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="全屏" placement="top">
<el-button class="page-icon-btn" @click="toggleFullscreen">
<el-icon><FullScreen /></el-icon>
</el-button>
</el-tooltip>
</div>
</div>
<el-table
ref="dataTableRef"
v-loading="loading"
:data="pageData"
border
stripe
highlight-current-row
row-key="id"
@selection-change="handleSelectionChange"
>
<div class="page-table-wrapper">
<el-table
ref="dataTableRef"
v-loading="loading"
class="page-table"
:data="list"
height="100%"
border
highlight-current-row
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInList == 1)
@@ -144,14 +157,13 @@
#end
#end
#end
<el-table-column fixed="right" label="操作" width="220">
<el-table-column fixed="right" label="操作" width="180">
<template #default="scope">
<el-button
v-hasPerm="['${moduleName}:${entityKebab}:update']"
type="primary"
size="small"
link
icon="edit"
@click="handleEditClick(String(scope.row.id))"
>
编辑
@@ -161,7 +173,6 @@
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(String(scope.row.id))"
>
删除
@@ -169,23 +180,23 @@
</template>
</el-table-column>
</el-table>
<div class="page-pagination">
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="fetchList"
/>
</div>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="params.pageNum"
v-model:limit="params.pageSize"
class="page-pagination"
@pagination="fetchData"
/>
</el-card>
<!-- $!{businessName}表单弹窗 -->
<!-- 表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
width="500px"
width="600px"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
@@ -265,8 +276,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit()">确定</el-button>
<el-button @click="closeDialog()">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
@@ -274,9 +285,15 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import { useTableSelection } from "@/composables";
import { useFullscreen } from "@vueuse/core";
import {
ElMessage,
ElMessageBox,
type FormInstance,
type FormRules,
} from "element-plus";
import { FullScreen, Refresh } from "@element-plus/icons-vue";
import { usePageTable, useTableSelection } from "@/composables";
import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
import type { ${entityName}Item, ${entityName}Form, ${entityName}QueryParams } from "@/api/${moduleName}/${entityKebab}";
@@ -287,17 +304,26 @@
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
const tableWrapperRef = ref<HTMLElement | null>(null);
const { toggle: toggleFullscreen } = useFullscreen(tableWrapperRef);
const loading = ref(false);
const total = ref(0);
const queryParams = reactive<${entityName}QueryParams>({
pageNum: 1,
pageSize: 10,
} as ${entityName}QueryParams);
const initialFormData = reactive({} as ${entityName}Form);
Object.assign(initialFormData, {} as ${entityName}Form);
// $!{businessName}表格数据
const pageData = ref<${entityName}Item[]>([]);
const { loading, list, total, params, fetchData, handleQuery, handleResetQuery } = usePageTable<
${entityName}Item,
${entityName}QueryParams
>({
initialParams: {
pageNum: 1,
pageSize: 10,
} as ${entityName}QueryParams,
request: ${entityName}API.getPage,
onBeforeReset: () => queryFormRef.value?.resetFields(),
});
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<${entityName}Item>();
// 弹窗
const dialog = reactive({
@@ -319,112 +345,114 @@
#end
};
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<${entityName}Item>();
async function fetchList(): Promise<void> {
loading.value = true;
try {
const data = await ${entityName}API.getPage(queryParams);
pageData.value = data.list;
total.value = data.total ?? 0;
} finally {
loading.value = false;
}
}
/** 查询$!{businessName} */
function handleQuery(): void {
queryParams.pageNum = 1;
fetchList();
}
/** 重置$!{businessName}查询 */
function handleResetQuery() {
queryFormRef.value?.resetFields();
handleQuery();
}
/**
* 打开表单弹窗
*/
function openDialog(): void {
dialog.visible = true;
}
/**
* 关闭弹窗并重置表单
*/
function closeDialog(): void {
dialog.visible = false;
resetForm();
}
/**
* 重置表单
*/
function resetForm(): void {
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
formData.id = undefined;
Object.keys(formData).forEach((key) => {
delete (formData as Record<string, unknown>)[key];
});
Object.assign(formData, initialFormData);
}
/**
* 打开新增弹窗
*/
async function handleCreateClick(): Promise<void> {
dialog.title = "新增$!{businessName}";
openDialog();
}
/**
* 打开编辑弹窗并回填数据
*/
async function handleEditClick(id: string): Promise<void> {
dialog.title = "修改$!{businessName}";
${entityName}API.getFormData(id).then((data) => {
Object.assign(formData, data);
openDialog();
});
const data = await ${entityName}API.getFormData(id);
Object.assign(formData, data);
openDialog();
}
/** 提交$!{businessName}表单 */
function handleSubmit() {
dataFormRef.value?.validate((valid: any) => {
if (valid) {
loading.value = true;
const id = formData.id;
if (id) {
${entityName}API.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
} else {
${entityName}API.create(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
}
/**
* 提交$!{businessName}表单
*/
async function handleSubmit(): Promise<void> {
const valid = await dataFormRef.value?.validate().then(
() => true,
() => false
);
if (!valid) return;
loading.value = true;
try {
const id = formData.id;
if (id) {
await ${entityName}API.update(id, formData);
ElMessage.success("修改成功");
} else {
await ${entityName}API.create(formData);
ElMessage.success("新增成功");
}
});
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
}
}
/** 删除$!{businessName} */
function handleDelete(id?: string) {
const ids = [id || selectedIds.value].join(",");
/**
* 批量删除$!{businessName}
*/
function handleBatchDelete(): void {
handleDelete();
}
/**
* 删除$!{businessName}
*/
async function handleDelete(id?: string): Promise<void> {
const ids = id || selectedIds.value.join(",");
if (!ids) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
${entityName}API.deleteByIds(ids)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
},
() => {
ElMessage.info("已取消删除");
}
);
try {
await ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
});
} catch {
ElMessage.info("已取消删除");
return;
}
loading.value = true;
try {
await ${entityName}API.deleteByIds(ids);
ElMessage.success("删除成功");
handleResetQuery();
} finally {
loading.value = false;
}
}
onMounted(() => {