refactor: 代码生成支持js，已知问题修复
This commit is contained in:
Ray.Hao
63
src/main/resources/templates/codegen/api.js.vm
Normal file
63
src/main/resources/templates/codegen/api.js.vm
Normal file
@@ -0,0 +1,63 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const ${entityUpperSnake}_BASE_URL = "/api/v1/${entityKebab}";
|
||||
|
||||
const ${entityName}API = {
|
||||
/** 获取${businessName}分页数据 */
|
||||
getPage(queryParams) {
|
||||
return request({
|
||||
url: `${${entityUpperSnake}_BASE_URL}`,
|
||||
method: "get",
|
||||
params: queryParams,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取${businessName}表单数据
|
||||
* @param {string} id ${businessName}ID
|
||||
*/
|
||||
getFormData(id) {
|
||||
return request({
|
||||
url: `${${entityUpperSnake}_BASE_URL}/${id}/form`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 新增${businessName}
|
||||
* @param {Object} data ${businessName}表单数据
|
||||
*/
|
||||
create(data) {
|
||||
return request({
|
||||
url: `${${entityUpperSnake}_BASE_URL}`,
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新${businessName}
|
||||
* @param {string} id ${businessName}ID
|
||||
* @param {Object} data ${businessName}表单数据
|
||||
*/
|
||||
update(id, data) {
|
||||
return request({
|
||||
url: `${${entityUpperSnake}_BASE_URL}/${id}`,
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 批量删除${businessName}，多个以英文逗号分割
|
||||
* @param {string} ids ${businessName}ID字符串
|
||||
*/
|
||||
deleteByIds(ids) {
|
||||
return request({
|
||||
url: `${${entityUpperSnake}_BASE_URL}/${ids}`,
|
||||
method: "delete",
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default ${entityName}API;
|
||||
369
src/main/resources/templates/codegen/index.curd.js.vue.vm
Normal file
369
src/main/resources/templates/codegen/index.curd.js.vue.vm
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<div class="app-container h-full flex flex-1 flex-col">
|
||||
<!-- 搜索 -->
|
||||
<PageSearch
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
>
|
||||
#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" />
|
||||
</template>
|
||||
#end
|
||||
#end
|
||||
</PageSearch>
|
||||
|
||||
<!-- 列表 -->
|
||||
<PageContent
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleAddClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operate-click="handleOperateClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
#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" />
|
||||
</template>
|
||||
#end
|
||||
#end
|
||||
</PageContent>
|
||||
|
||||
<!-- 新增 -->
|
||||
<PageModal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<template #$fieldConfig.fieldName="scope">
|
||||
<Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
|
||||
</template>
|
||||
#end
|
||||
#end
|
||||
</PageModal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<PageModal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<template #$fieldConfig.fieldName="scope">
|
||||
<Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
|
||||
</template>
|
||||
#end
|
||||
#end
|
||||
</PageModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({ name: "$entityName" });
|
||||
|
||||
import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
|
||||
// 组合式 CRUD
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
addModalRef,
|
||||
editModalRef,
|
||||
handleQueryClick,
|
||||
handleResetClick,
|
||||
handleAddClick,
|
||||
handleEditClick,
|
||||
handleSubmitClick,
|
||||
handleExportClick,
|
||||
handleSearchClick,
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
|
||||
// 搜索配置
|
||||
const searchConfig = reactive({
|
||||
pageName: "${moduleName}:${entityKebab}",
|
||||
formItems: [
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInQuery == 1)
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
{
|
||||
type: "custom",
|
||||
slotName: "$fieldConfig.fieldName",
|
||||
label: "$fieldConfig.fieldComment",
|
||||
prop: "$fieldConfig.fieldName",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
clearable: true,
|
||||
style: { width: "200px" },
|
||||
},
|
||||
},
|
||||
#else
|
||||
{
|
||||
#if($fieldConfig.javaType == "String")
|
||||
type: "input",
|
||||
#elseif($fieldConfig.javaType == "Integer" || $fieldConfig.javaType == "Long")
|
||||
type: "input-number",
|
||||
#elseif($fieldConfig.javaType == "Date" || $fieldConfig.javaType == "LocalDateTime")
|
||||
type: "date-picker",
|
||||
#else
|
||||
type: "input",
|
||||
#end
|
||||
label: "$fieldConfig.fieldComment",
|
||||
prop: "$fieldConfig.fieldName",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
#if($fieldConfig.javaType == "Date" || $fieldConfig.javaType == "LocalDateTime")
|
||||
type: "daterange",
|
||||
"range-separator": "~",
|
||||
"start-placeholder": "开始时间",
|
||||
"end-placeholder": "截止时间",
|
||||
"value-format": "YYYY-MM-DD",
|
||||
#end
|
||||
clearable: true,
|
||||
style: { width: "200px" },
|
||||
},
|
||||
},
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
],
|
||||
});
|
||||
|
||||
// 列表配置
|
||||
const contentConfig = reactive({
|
||||
// 权限前缀
|
||||
pageName: "${moduleName}:${entityKebab}",
|
||||
table: {
|
||||
border: true,
|
||||
highlightCurrentRow: true,
|
||||
},
|
||||
// 主键
|
||||
pk: "id",
|
||||
// 列表查询接口
|
||||
indexAction: ${entityName}API.getPage,
|
||||
// 删除接口
|
||||
deleteAction: ${entityName}API.deleteByIds,
|
||||
// 数据解析函数
|
||||
parseData(res) {
|
||||
return {
|
||||
total: res?.page?.total ?? 0,
|
||||
list: res?.data ?? [],
|
||||
};
|
||||
},
|
||||
// 分页配置
|
||||
pagination: {
|
||||
background: true,
|
||||
layout: "total, sizes, prev, pager, next, jumper",
|
||||
pageSize: 20,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
// 工具栏配置
|
||||
toolbar: ["add", "delete"],
|
||||
defaultToolbar: ["refresh", "filter"],
|
||||
// 表格列配置
|
||||
cols: [
|
||||
{ type: "selection", width: 55, align: "center" },
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInList == 1)
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
{
|
||||
label: "$fieldConfig.fieldComment",
|
||||
prop: "$fieldConfig.fieldName",
|
||||
templet: "custom",
|
||||
slotName: "$fieldConfig.fieldName"
|
||||
},
|
||||
#else
|
||||
{ label: "$fieldConfig.fieldComment", prop: "$fieldConfig.fieldName" },
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
{
|
||||
label: "操作",
|
||||
prop: "operation",
|
||||
width: 220,
|
||||
templet: "tool",
|
||||
operat: ["edit", "delete"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 新增配置
|
||||
const addModalConfig = reactive({
|
||||
// 权限前缀
|
||||
pageName: "${moduleName}:${entityKebab}",
|
||||
// 主键
|
||||
pk: "id",
|
||||
// 弹窗配置
|
||||
dialog: {
|
||||
title: "新增$!{entityComment}",
|
||||
width: 800,
|
||||
draggable: true,
|
||||
},
|
||||
form: {
|
||||
labelWidth: 100,
|
||||
},
|
||||
// 表单项配置
|
||||
formItems: [
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType != "HIDDEN")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
{
|
||||
type: "custom",
|
||||
label: "$fieldConfig.fieldComment",
|
||||
prop: "$fieldConfig.fieldName",
|
||||
slotName: "$fieldConfig.fieldName",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
style: { width: "100%" }
|
||||
},
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
rules: [{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "change" }],
|
||||
#end
|
||||
},
|
||||
#else
|
||||
{
|
||||
#if($fieldConfig.javaType == "String")
|
||||
#if($fieldConfig.fieldName.contains("password") || $fieldConfig.fieldName.contains("pwd"))
|
||||
type: "input",
|
||||
attrs: {
|
||||
type: "password",
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
showPassword: true
|
||||
},
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
rules: [{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "blur" }],
|
||||
#end
|
||||
#elseif($fieldConfig.fieldName.contains("email"))
|
||||
type: "input",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
maxlength: 50
|
||||
},
|
||||
rules: [
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "blur" },
|
||||
#end
|
||||
{ pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: "请输入正确的邮箱地址", trigger: "blur" }
|
||||
],
|
||||
#elseif($fieldConfig.fieldName.contains("mobile") || $fieldConfig.fieldName.contains("phone"))
|
||||
type: "input",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
maxlength: 11
|
||||
},
|
||||
rules: [
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "blur" },
|
||||
#end
|
||||
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
|
||||
],
|
||||
#else
|
||||
type: "input",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment"
|
||||
},
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
rules: [{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "blur" }],
|
||||
#end
|
||||
#end
|
||||
#elseif($fieldConfig.javaType == "Integer" || $fieldConfig.javaType == "Long")
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
style: { width: "100%" }
|
||||
},
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
rules: [{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "blur" }],
|
||||
#end
|
||||
#elseif($fieldConfig.javaType == "BigDecimal" || $fieldConfig.javaType == "Double")
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
precision: 2,
|
||||
style: { width: "100%" }
|
||||
},
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
rules: [{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "blur" }],
|
||||
#end
|
||||
#elseif($fieldConfig.javaType == "Date" || $fieldConfig.javaType == "LocalDateTime")
|
||||
type: "date-picker",
|
||||
attrs: {
|
||||
type: "datetime",
|
||||
placeholder: "$fieldConfig.fieldComment",
|
||||
format: "YYYY-MM-DD HH:mm:ss",
|
||||
"value-format": "YYYY-MM-DD HH:mm:ss",
|
||||
style: { width: "100%" }
|
||||
},
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
rules: [{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "change" }],
|
||||
#end
|
||||
#elseif($fieldConfig.javaType == "Boolean" || $fieldConfig.fieldName.contains("status"))
|
||||
type: "switch",
|
||||
attrs: {
|
||||
activeText: "启用",
|
||||
inactiveText: "禁用",
|
||||
activeValue: 1,
|
||||
inactiveValue: 0
|
||||
},
|
||||
initialValue: 1,
|
||||
#else
|
||||
type: "input",
|
||||
attrs: {
|
||||
placeholder: "$fieldConfig.fieldComment"
|
||||
},
|
||||
#if($fieldConfig.isRequired == 1)
|
||||
rules: [{ required: true, message: "$fieldConfig.fieldComment不能为空", trigger: "blur" }],
|
||||
#end
|
||||
#end
|
||||
label: "$fieldConfig.fieldComment",
|
||||
prop: "$fieldConfig.fieldName",
|
||||
},
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
],
|
||||
// 提交函数
|
||||
formAction(data) {
|
||||
if (data.id) {
|
||||
// 编辑
|
||||
return ${entityName}API.update(data.id, data);
|
||||
} else {
|
||||
// 新增
|
||||
return ${entityName}API.create(data);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// 编辑配置
|
||||
const editModalConfig = reactive({
|
||||
pageName: "${moduleName}:${entityKebab}",
|
||||
component: "drawer",
|
||||
drawer: {
|
||||
title: "编辑$!{entityComment}",
|
||||
size: 500,
|
||||
},
|
||||
pk: "id",
|
||||
formAction(data) {
|
||||
return ${entityName}API.update(data.id, data);
|
||||
},
|
||||
formItems: addModalConfig.formItems, // 复用新增的表单项
|
||||
});
|
||||
|
||||
// 处理操作按钮点击
|
||||
const handleOperateClick = (data) => {
|
||||
if (data.name === "edit") {
|
||||
handleEditClick(data.row, async () => {
|
||||
return await ${entityName}API.getFormData(String(data.row.id));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 处理工具栏按钮点击（删除等）
|
||||
const handleToolbarClick = (name) => {
|
||||
console.log(name);
|
||||
};
|
||||
|
||||
</script>
|
||||
417
src/main/resources/templates/codegen/index.js.vue.vm
Normal file
417
src/main/resources/templates/codegen/index.js.vue.vm
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInQuery == 1)
|
||||
<el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
|
||||
#if($fieldConfig.formType == "INPUT")
|
||||
<el-input
|
||||
v-model="queryParams.$fieldConfig.fieldName"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
clearable
|
||||
@keyup.enter="handleQuery()"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "SELECT")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="queryParams.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-select v-model="queryParams.$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 == "RADIO")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="formData.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-radio-group v-model="queryParams.$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 == "CHECK_BOX")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="formData.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-checkbox-group v-model="queryParams.$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 == "INPUT_NUMBER")
|
||||
<el-input-number
|
||||
v-model="queryParams.$fieldConfig.fieldName"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "SWITCH")
|
||||
<el-switch
|
||||
v-model="queryParams.$fieldConfig.fieldName"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "TEXT_AREA")
|
||||
<el-input type="textarea"
|
||||
v-model="queryParams.$fieldConfig.fieldName"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "DATE_TIME")
|
||||
<el-date-picker
|
||||
v-model="queryParams.$fieldConfig.fieldName"
|
||||
#if($fieldConfig.queryType == "BETWEEN")
|
||||
type="daterange"
|
||||
range-separator="~"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
#else
|
||||
type="datetime"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
#end
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "DATE")
|
||||
<el-date-picker
|
||||
class="!w-[240px]"
|
||||
v-model="queryParams.$fieldConfig.fieldName"
|
||||
#if($fieldConfig.queryType == "BETWEEN")
|
||||
type="daterange"
|
||||
range-separator="~"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
#else
|
||||
type="date"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
#end
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
#end
|
||||
</el-form-item>
|
||||
#end
|
||||
#end
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="mb-10px">
|
||||
<el-button
|
||||
v-hasPerm="['${moduleName}:${entityKebab}:add']"
|
||||
type="success"
|
||||
icon="plus"
|
||||
@click="handleOpenDialog()"
|
||||
>新增</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['${moduleName}:${entityKebab}:delete']"
|
||||
type="danger"
|
||||
:disabled="removeIds.length === 0"
|
||||
icon="delete"
|
||||
@click="handleDelete()"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="pageData"
|
||||
highlight-current-row
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInList == 1)
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<el-table-column label="$fieldConfig.fieldComment" width="150" align="center">
|
||||
<template #default="scope">
|
||||
<DictLabel v-model="scope.row.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
#else
|
||||
<el-table-column
|
||||
key="$fieldConfig.fieldName"
|
||||
label="$fieldConfig.fieldComment"
|
||||
prop="$fieldConfig.fieldName"
|
||||
min-width="150"
|
||||
align="center"
|
||||
/>
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
<el-table-column fixed="right" label="操作" width="220">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPerm="['${moduleName}:${entityKebab}:edit']"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleOpenDialog(String(scope.row.id))"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['${moduleName}:${entityKebab}:delete']"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="handleDelete(String(scope.row.id))"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery()"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- $!{businessName}表单弹窗 -->
|
||||
<el-dialog
|
||||
v-model="dialog.visible"
|
||||
:title="dialog.title"
|
||||
width="500px"
|
||||
@close="handleCloseDialog"
|
||||
>
|
||||
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
|
||||
#foreach($fieldConfig in $fieldConfigs)
|
||||
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType != "HIDDEN")
|
||||
<el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
|
||||
#if($fieldConfig.formType == "INPUT")
|
||||
<el-input
|
||||
v-model="formData.$fieldConfig.fieldName"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "SELECT")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="formData.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-select v-model="formData.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
|
||||
<el-option :value="0" label="选项一"/>
|
||||
<el-option :value="1" label="选项二"/>
|
||||
</el-select>
|
||||
#end
|
||||
#elseif($fieldConfig.formType == "RADIO")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-radio-group v-model="formData.$fieldConfig.fieldName">
|
||||
<el-radio :value="0">选项一</el-radio>
|
||||
<el-radio :value="1">选项二</el-radio>
|
||||
</el-radio-group>
|
||||
#end
|
||||
#elseif($fieldConfig.formType == "CHECK_BOX")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-checkbox-group v-model="formData.$fieldConfig.fieldName">
|
||||
<el-checkbox :value="0">选项一</el-checkbox>
|
||||
<el-checkbox :value="1">选项二</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
#end
|
||||
#elseif($fieldConfig.formType == "INPUT_NUMBER")
|
||||
<el-input-number
|
||||
v-model="formData.$fieldConfig.fieldName"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "SWITCH")
|
||||
<el-switch
|
||||
v-model="formData.$fieldConfig.fieldName"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "TEXT_AREA")
|
||||
<el-input type="textarea"
|
||||
v-model="formData.$fieldConfig.fieldName"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "DATE_TIME")
|
||||
<el-date-picker
|
||||
v-model="formData.$fieldConfig.fieldName"
|
||||
type="datetime"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
#elseif($fieldConfig.formType == "DATE")
|
||||
<el-date-picker
|
||||
class="!w-[240px]"
|
||||
v-model="formData.$fieldConfig.fieldName"
|
||||
type="date"
|
||||
placeholder="$fieldConfig.fieldComment"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
#end
|
||||
</el-form-item>
|
||||
|
||||
#elseif($fieldConfig.formType == "HIDDEN")
|
||||
<el-input type="hidden" v-model="formData.$fieldConfig.fieldName" />
|
||||
#end
|
||||
#end
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSubmit()">确定</el-button>
|
||||
<el-button @click="handleCloseDialog()">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "${entityName}",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
|
||||
|
||||
const queryFormRef = ref();
|
||||
const dataFormRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
const removeIds = ref([]);
|
||||
const total = ref(0);
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
// $!{businessName}表格数据
|
||||
const pageData = ref([]);
|
||||
|
||||
// 弹窗
|
||||
const dialog = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
});
|
||||
|
||||
// $!{businessName}表单数据
|
||||
const formData = reactive({});
|
||||
|
||||
// $!{businessName}表单校验规则
|
||||
const rules = reactive({
|
||||
#if($fieldConfigs)
|
||||
#foreach($fieldConfig in ${fieldConfigs})
|
||||
#if($fieldConfig.isShowInForm && $fieldConfig.isRequired)
|
||||
${fieldConfig.fieldName}: [{ required: true, message: "请输入${fieldConfig.fieldComment}", trigger: "blur" }],
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
});
|
||||
|
||||
/** 查询$!{businessName} */
|
||||
function handleQuery() {
|
||||
loading.value = true;
|
||||
${entityName}API.getPage(queryParams)
|
||||
.then((res) => {
|
||||
pageData.value = res.data;
|
||||
total.value = res.page?.total ?? 0;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 重置$!{businessName}查询 */
|
||||
function handleResetQuery() {
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.pageNum = 1;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 行复选框选中记录选中ID集合 */
|
||||
function handleSelectionChange(selection) {
|
||||
removeIds.value = selection.map((item) => String(item.id));
|
||||
}
|
||||
|
||||
/** 打开$!{businessName}弹窗 */
|
||||
function handleOpenDialog(id) {
|
||||
dialog.visible = true;
|
||||
if (id) {
|
||||
dialog.title = "修改$!{businessName}";
|
||||
${entityName}API.getFormData(id).then((data) => {
|
||||
Object.assign(formData, data);
|
||||
});
|
||||
} else {
|
||||
dialog.title = "新增$!{businessName}";
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交$!{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("修改成功");
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
} else {
|
||||
${entityName}API.create(formData)
|
||||
.then(() => {
|
||||
ElMessage.success("新增成功");
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 关闭$!{businessName}弹窗 */
|
||||
function handleCloseDialog() {
|
||||
dialog.visible = false;
|
||||
dataFormRef.value?.resetFields();
|
||||
dataFormRef.value?.clearValidate();
|
||||
formData.id = undefined;
|
||||
}
|
||||
|
||||
/** 删除$!{businessName} */
|
||||
function handleDelete(id) {
|
||||
const ids = [id || removeIds.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("已取消删除");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
@@ -23,7 +23,7 @@
|
||||
#end
|
||||
#elseif($fieldConfig.formType == "RADIO")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
|
||||
<Dict v-model="formData.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-radio-group v-model="queryParams.$fieldConfig.fieldName">
|
||||
<el-radio :key="1" :value="1">选项一</el-radio>
|
||||
@@ -32,7 +32,7 @@
|
||||
#end
|
||||
#elseif($fieldConfig.formType == "CHECK_BOX")
|
||||
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
|
||||
<Dict v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
|
||||
<Dict v-model="formData.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
|
||||
#else
|
||||
<el-checkbox-group v-model="queryParams.$fieldConfig.fieldName">
|
||||
<el-checkbox :key="1" :label="1">选项一</el-checkbox>
|
||||
|
||||
Reference in New Issue
Block a user