调整代码生成器前端模板

This commit is contained in:
Jason 2022-08-15 18:57:45 +08:00
parent faf5d24d4e
commit c15936a19c
4 changed files with 134 additions and 93 deletions

View File

@ -250,6 +250,16 @@
/>
</el-select>
</el-form-item>
<el-form-item label="树名称字段" prop="gen.treeName">
<el-select class="w-80" v-model="formData.gen.treeName" clearable>
<el-option
v-for="item in formData.column"
:key="item.id"
:value="item.columnName"
:label="`${item.columnName}${item.columnComment}`"
/>
</el-select>
</el-form-item>
</template>
</el-tab-pane>
</el-tabs>
@ -301,7 +311,8 @@ const formData = reactive({
subTableFk: '',
subTableName: '',
treeParent: '',
treePrimary: ''
treePrimary: '',
treeName: ''
}
})
@ -312,7 +323,10 @@ const rules = reactive({
['base.entityName']: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
['base.authorName']: [{ required: true, message: '请输入作者', trigger: 'blur' }],
['gen.moduleName']: [{ required: true, message: '请输入模块名', trigger: 'blur' }],
['gen.functionName']: [{ required: true, message: '请输入功能名称', trigger: 'blur' }]
['gen.functionName']: [{ required: true, message: '请输入功能名称', trigger: 'blur' }],
['gen.treePrimary']: [{ required: true, message: '请选择树主键字段', trigger: 'blur' }],
['gen.treeParent']: [{ required: true, message: '请选择树父级字段', trigger: 'blur' }],
['gen.treeName']: [{ required: true, message: '请选择树名称字段', trigger: 'blur' }]
})
const getDetails = async () => {

View File

@ -1,17 +1,31 @@
<template>
<div class="edit-popup">
<popup
ref="popupRef"
:title="popupTitle"
:async="true"
width="550px"
:clickModalClose="true"
@confirm="handleSubmit"
@close="handleClose"
ref="popupRef"
:title="popupTitle"
:async="true"
width="550px"
:clickModalClose="true"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
#foreach ($column in $columns)
#if($column.isEdit)
#if($table.treeParent!="" && $column.javaField==$table.treeParent)
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
<el-tree-select
class="flex-1"
v-model="formData.${column.javaField}"
:data="treeList"
clearable
node-key="${table.treePrimary}"
:props="{label: ${table.treeName}, value: ${table.treePrimary}, children: 'children'}"
:default-expand-all="true"
placeholder="请选择${column.columnComment}"
check-strictly
/>
</el-form-item>
#if($column.htmlType=="input")
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
<el-input v-model="formData.name" placeholder="请输入${column.columnComment}" />
@ -22,20 +36,6 @@
<el-input-number v-model="formData.sort" />
</div>
</el-form-item>
#elseif($column.htmlType=="treeSelect")
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
<el-tree-select
class="flex-1"
v-model="formData.${字段名}"
:data="treeList"
clearable
node-key="${树主键}"
:props="{label: ${显示的字段名如name}}"
:default-expand-all="true"
placeholder="请选择${字段描述}"
check-strictly
/>
</el-form-item>
#elseif($column.htmlType=="textarea")
<el-form-item label="备注" prop="remark">
<el-input
@ -106,7 +106,13 @@
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { ${moduleName}Edit, ${moduleName}Add, ${moduleName}All } from '@/api/${moduleName}'
import {
${moduleName}Edit,
${moduleName}Add,
#if($table.treePrimary && $table.treeParent)
${moduleName}Lists
#end
} from '@/api/${moduleName}'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
@ -128,8 +134,12 @@
})
const formData = reactive({
${primaryKey}: '',
#foreach ($column in $columns)
#if($column.isEdit)
#if($column.htmlType=="checkbox")
${column.javaField}: [],
#else
${column.javaField}: '',
#end
#end
@ -155,7 +165,13 @@
const handleSubmit = async () => {
await formRef.value?.validate()
mode.value == 'edit' ? await ${moduleName}Edit(formData) : await${moduleName}Add(formData)
const data = {...formData}
#foreach ($column in $columns)
#if($column.htmlType == "checkbox")
data.${column.javaField} = data.${column.javaField}.join(",");
#end
#end
mode.value == 'edit' ? await ${moduleName}Edit(data) : await ${moduleName}Add(data)
popupRef.value?.close()
feedback.msgSuccess('操作成功')
emit('success')
@ -171,6 +187,11 @@
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
#foreach ($column in $columns)
#if($column.htmlType == "checkbox")
formData.${column.javaField} = form.${column.javaField}.split(',')
#end
#end
}
}
}
@ -181,9 +202,9 @@
#if($table.treePrimary && $table.treeParent)
// 树表
const getLists = () => {
const getLists = async () => {
const data: any = await ${moduleName}List()
const item = { id: 0, menuName: '顶级', children: [] }
const item = { ${table.treePrimary}: 0, ${table.treeName}: '顶级', children: [] }
item.children = data
treeList.value.push(item)
}

View File

@ -14,19 +14,19 @@
#elseif($column.htmlType=="select")
<el-form-item label="${column.columnComment}" prop="${column.javaField}">
<el-select
v-model="queryParams.${column.javaField}"
class="w-56"
clearable
v-model="queryParams.${column.javaField}"
class="w-56"
clearable
>
#if($column.dictType=="")
<el-option label="请选择字典生成" value="" />
#else
<el-option label="全部" value="" />
<el-option
v-for="(item, index) in dictData.${column.dictType}"
:key="index"
:label="item.name"
:value="item.value"
v-for="(item, index) in dictData.${column.dictType}"
:key="index"
:label="item.name"
:value="item.value"
/>
#end
</el-select>
@ -55,65 +55,58 @@
<el-button @click="handleExpand"> 展开/折叠 </el-button>
</div>
<el-table
v-loading="loading"
ref="tableRef"
class="mt-4"
size="large"
:data="lists"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
v-loading="loading"
ref="tableRef"
class="mt-4"
size="large"
:data="lists"
row-key="${table.treePrimary}"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
#foreach ($column in $columns)
#if($column.isList)
#if($column.htmlType=="imageUpload")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="80">
<template #default="{ row }">
<div class="flex">
<icon :name="row.${column.javaField}" :size="20" />
</div>
</template>
</el-table-column>
#elseif($column.htmlType=="number")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100" />
#elseif($column.htmlType=="datetime")
<el-table-column
label="${column.columnComment}"
prop="${column.javaField}"
min-width="180"
></el-table-column>
#else
<el-table-column
label="${column.columnComment}"
prop="${column.javaField}"
min-width="150"
show-overflow-tooltip
/>
#if($column.htmlType=="select" || $column.htmlType=="radio" $column.htmlType=="checkbox")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100">
<template #default="{ row }">
<dict-value :options="dictData.${column.dictType}" :value="row.${column.javaField}" />
</template>
</el-table-column>
#elseif($column.htmlType=="imageUpload")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="60">
<template #default="{ row }">
<image-contain width="50px" height="50px" :src="row.${column.javaField}" />
</template>
</el-table-column>
#else
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100" />
#end
#end
#end
#end
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['${moduleName}:add']"
type="primary"
link
@click="handleAdd(row.id)"
v-perms="['${moduleName}:add']"
type="primary"
link
@click="handleAdd(row.${table.treePrimary})"
>
新增
</el-button>
<el-button
v-perms="['${moduleName}:edit']"
type="primary"
link
@click="handleEdit(row)"
v-perms="['${moduleName}:edit']"
type="primary"
link
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
v-perms="['${moduleName}:del']"
type="danger"
link
@click="handleDelete(row.id)"
v-perms="['${moduleName}:del']"
type="danger"
link
@click="handleDelete(row.${primaryKey})"
>
删除
</el-button>
@ -154,12 +147,12 @@
}
}
const handleAdd = async (id?: number) => {
const handleAdd = async (${table.treePrimary}?: number) => {
showEdit.value = true
await nextTick()
if (id) {
if (${table.treePrimary}) {
editRef.value?.setFormData({
pid: id
${table.treeParent}: ${table.treePrimary}
})
}
editRef.value?.open('add')

View File

@ -46,36 +46,44 @@
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div>
<el-button v-perms="['${moduleName}/add']" type="primary" @click="handleAdd()">
<el-button v-perms="['${moduleName}:add']" type="primary" @click="handleAdd()">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
<el-button
v-perms="['${moduleName}:del']"
:disabled="!selectData.length"
type="danger"
@click="handleDelete(selectData)"
>
<template #icon>
<icon name="el-icon-Delete" />
</template>
删除
</el-button>
</div>
<el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
<el-table class="mt-4"
size="large"
v-loading="pager.loading"
:data="pager.lists"
@selection-change="handleSelectionChange"
>
#foreach ($column in $columns)
#if($column.isList)
#if($column.htmlType=="select")
<el-table-column label="${column.columnComment}" prop="isStop" min-width="100">
#if($column.htmlType=="select" || $column.htmlType=="radio" $column.htmlType=="checkbox")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100">
<template #default="{ row }">
<dict-value :options="dictData.${column.dictType}" :value="row.${column.javaField}" />
</template>
</el-table-column>
#elseif($column.htmlType=="datetime")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="180" />
#elseif($column.htmlType=="imageUpload")
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="60">
<template #default="{ row }">
<image-contain width="50px" height="50px" :src="row.${column.javaField}" />
</template>
</el-table-column>
#elseif($column.htmlType=="select" || $column.htmlType=="radio")
<el-table-column label="${column.columnComment}" prop="${column.javaField}">
<template #default="{ row }">
<dict-value :options="dictData.${column.dictType}" :value="row.${column.javaField}" />
</template>
</el-table-column>
#else
<el-table-column label="${column.columnComment}" prop="${column.javaField}" min-width="100" />
#end
@ -95,7 +103,7 @@
v-perms="['${moduleName}:del']"
type="danger"
link
@click="handleDelete(row.id)"
@click="handleDelete(row.${primaryKey})"
>
删除
</el-button>
@ -144,8 +152,13 @@
#end
#end
}>([${dictFields}])
#end
const selectData = ref<any[]>([])
const handleSelectionChange = (selection: any[]) => {
selectData.value = selection.map(item => item.${primaryKey})
}
const handleAdd = async () => {
showEdit.value = true
await nextTick()
@ -159,7 +172,7 @@
editRef.value?.setFormData(data)
}
const handleDelete = async (${primaryKey}: number) => {
const handleDelete = async (${primaryKey}: number || number[]) => {
await ${moduleName}Delete({ ${primaryKey} })
feedback.msgSuccess('删除成功')
getLists()