编剧数据表前端验证

This commit is contained in:
Jason 2022-08-15 10:50:52 +08:00
parent e65979d0ce
commit 0831d571a9
3 changed files with 38 additions and 24 deletions

View File

@ -13,7 +13,7 @@
> >
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="基础信息" name="base"> <el-tab-pane label="基础信息" name="base">
<el-form-item label="表名称" prop="tableName"> <el-form-item label="表名称" prop="base.tableName">
<div class="w-80"> <div class="w-80">
<el-input <el-input
v-model="formData.base.tableName" v-model="formData.base.tableName"
@ -21,7 +21,7 @@
/> />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="表描述" prop="tableComment"> <el-form-item label="表描述" prop="base.tableComment">
<div class="w-80"> <div class="w-80">
<el-input <el-input
v-model="formData.base.tableComment" v-model="formData.base.tableComment"
@ -29,7 +29,7 @@
/> />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="实体类名称" prop="entityName"> <el-form-item label="实体类名称" prop="base.entityName">
<div class="w-80"> <div class="w-80">
<el-input <el-input
v-model="formData.base.entityName" v-model="formData.base.entityName"
@ -38,9 +38,12 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="作者"> <el-form-item label="作者" prop="base.authorName">
<div class="w-80"> <div class="w-80">
<el-input v-model="formData.base.authorName" /> <el-input
v-model="formData.base.authorName"
placeholder="请输入作者"
/>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label="备注">
@ -181,19 +184,13 @@
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="生成配置" name="config"> <el-tab-pane label="生成配置" name="config">
<el-form-item label="模板类型" prop="template_type"> <el-form-item label="模板类型" prop="gen.genTpl" required>
<el-radio-group v-model="formData.gen.genTpl"> <el-radio-group v-model="formData.gen.genTpl">
<el-radio :label="GenTpl.CURD">单表增删改查</el-radio> <el-radio :label="GenTpl.CURD">单表增删改查</el-radio>
<el-radio :label="GenTpl.TREE">树表增删改查</el-radio> <el-radio :label="GenTpl.TREE">树表增删改查</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="生成方式" prop="generate_type"> <el-form-item label="模块名" prop="gen.moduleName">
<el-radio-group v-model="formData.gen.genType">
<el-radio :label="GenType.ZIP">压缩包下载</el-radio>
<el-radio :label="GenType.CUSTOM_PATH">自定义路径</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="模块名" prop="moduleName">
<div class="w-80"> <div class="w-80">
<el-input <el-input
v-model="formData.gen.moduleName" v-model="formData.gen.moduleName"
@ -202,7 +199,7 @@
<div class="form-tips">生成文件所在模块名</div> <div class="form-tips">生成文件所在模块名</div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="功能名称" prop="functionName"> <el-form-item label="功能名称" prop="gen.functionName">
<div class="w-80"> <div class="w-80">
<el-input <el-input
v-model="formData.gen.functionName" v-model="formData.gen.functionName"
@ -210,10 +207,16 @@
/> />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="生成方式" prop="gen.genType">
<el-radio-group v-model="formData.gen.genType">
<el-radio :label="GenType.ZIP">压缩包下载</el-radio>
<el-radio :label="GenType.CUSTOM_PATH">自定义路径</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item <el-form-item
v-if="formData.gen.genType == GenType.CUSTOM_PATH" v-if="formData.gen.genType == GenType.CUSTOM_PATH"
label="自定义路径" label="自定义路径"
prop="treePrimary" prop="gen.genPath"
> >
<div class="w-80"> <div class="w-80">
<el-input <el-input
@ -223,7 +226,7 @@
</div> </div>
</el-form-item> </el-form-item>
<template v-if="formData.gen.genTpl == GenTpl.TREE"> <template v-if="formData.gen.genTpl == GenTpl.TREE">
<el-form-item label="树主键字段" prop="treePrimary"> <el-form-item label="树主键字段" prop="gen.treePrimary">
<el-select <el-select
class="w-80" class="w-80"
v-model="formData.gen.treePrimary" v-model="formData.gen.treePrimary"
@ -237,7 +240,7 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="树父级字段" prop="treeParent"> <el-form-item label="树父级字段" prop="gen.treeParent">
<el-select class="w-80" v-model="formData.gen.treeParent" clearable> <el-select class="w-80" v-model="formData.gen.treeParent" clearable>
<el-option <el-option
v-for="item in formData.column" v-for="item in formData.column"
@ -304,9 +307,12 @@ const formData = reactive({
const formRef = shallowRef<FormInstance>() const formRef = shallowRef<FormInstance>()
const rules = reactive({ const rules = reactive({
table_name: [{ required: true, message: '请输入表名称', trigger: 'blur' }], ['base.tableName']: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
table_comment: [{ required: true, message: '请输入表描述', trigger: 'blur' }], ['base.tableComment']: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
module_name: [{ required: true, message: '请输入模块名', trigger: 'blur' }] ['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' }]
}) })
const getDetails = async () => { const getDetails = async () => {

View File

@ -11,6 +11,7 @@
<el-button @click="handleExpand"> 展开/折叠 </el-button> <el-button @click="handleExpand"> 展开/折叠 </el-button>
</div> </div>
<el-table <el-table
v-loading="loading"
ref="tableRef" ref="tableRef"
class="mt-4" class="mt-4"
size="large" size="large"
@ -98,12 +99,19 @@ import feedback from '@/utils/feedback'
const tableRef = shallowRef<InstanceType<typeof ElTable>>() const tableRef = shallowRef<InstanceType<typeof ElTable>>()
const editRef = shallowRef<InstanceType<typeof EditPopup>>() const editRef = shallowRef<InstanceType<typeof EditPopup>>()
let isExpand = false let isExpand = false
const loading = ref(false)
const showEdit = ref(false) const showEdit = ref(false)
const lists = ref([]) const lists = ref([])
const getLists = async () => { const getLists = async () => {
const data = await menuLists() loading.value = true
lists.value = data try {
const data = await menuLists()
lists.value = data
loading.value = false
} catch (error) {
loading.value = false
}
} }
const handleAdd = async (id?: number) => { const handleAdd = async (id?: number) => {

View File

@ -9,9 +9,9 @@
新增 新增
</el-button> </el-button>
</div> </div>
<div class="mt-4" v-loading="pager.loading"> <div class="mt-4">
<div> <div>
<el-table :data="pager.lists" size="large"> <el-table :data="pager.lists" size="large" v-loading="pager.loading">
<el-table-column prop="id" label="ID" min-width="100" /> <el-table-column prop="id" label="ID" min-width="100" />
<el-table-column prop="name" label="名称" min-width="150" /> <el-table-column prop="name" label="名称" min-width="150" />
<el-table-column <el-table-column