<template> {[if eq .IsDrawer 2]} <el-drawer :title="dialogTitle" v-model="dialogVisible" :close-on-click-modal="false" :size="$isMobile()?'100%':'40%'" direction="rtl"> <el-card class="box-card"> {[else]} <Dialog v-model="dialogVisible" :title="dialogTitle"> {[end]} <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="90px" > <el-row :gutter="20">{[range $index, $item := .SubColumns]}{[if eq $item.IsEdit "1"]}{[if eq $item.HtmlType "input"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-input v-model="formData.{[$item.ColumnNameLower]}" placeholder="请输入{[$item.ColumnComment]}" /> </el-form-item> </el-col>{[else if eq $item.HtmlType "number"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-input-number v-model="formData.{[$item.ColumnNameLower]}" placeholder="请输入{[$item.ColumnComment]}" /> </el-form-item> </el-col>{[else if eq $item.HtmlType "select"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-select v-model="formData.{[$item.ColumnNameLower]}" placeholder="{[$item.ColumnComment]}"> <el-option v-for="dict in {[$item.ColumnNameLower]}Options" {[if eq $item.Source "2"]} :key="dict.id" :label="dict.label" :value="dict.id" {[else]} :key="dict.id" :label="dict.label" :value="dict.id"{[end]} /> </el-select> </el-form-item> </el-col>{[else if eq $item.HtmlType "switch"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-switch v-model="formData.{[$item.ColumnNameLower]}" :active-value="1" :inactive-value="2" active-text="是" inactive-text="否"> </el-switch> </el-form-item> </el-col>{[else if eq $item.HtmlType "treeSelect"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <treeselect v-model="formData.{[$item.ColumnNameLower]}" :options="{[$item.ColumnNameLower]}Options" :props="defaultProps" placeholder="选择{[$item.ColumnComment]}" /> </el-form-item> </el-col>{[else if eq $item.HtmlType "imageUpload"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <UploadImg v-model="formData.{[$item.ColumnNameLower]}" /> </el-form-item> </el-col>{[else if eq $item.HtmlType "fileUpload"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <file-upload v-model="formData.{[$item.ColumnNameLower]}" :limit="1" /> </el-form-item> </el-col> {[else if eq $item.HtmlType "radio"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}"> {[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-radio-group v-model="formData.{[$item.ColumnNameLower]}"> <el-radio v-for="dict in {[$item.ColumnNameLower]}Options" :key="dict.id" :label="dict.id" >{{ dict.label }} </el-radio> </el-radio-group> </el-form-item> </el-col>{[else if eq $item.HtmlType "textarea"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-input v-model="formData.{[$item.ColumnNameLower]}" type="textarea" placeholder="请输入{[$item.ColumnComment]}" /> </el-form-item> </el-col>{[else if eq $item.HtmlType "datetime"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-date-picker v-model="formData.{[$item.ColumnNameLower]}" type="date" placeholder="选择日期"> </el-date-picker> </el-form-item> </el-col>{[else if eq $item.HtmlType "editor"]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <editor v-model="formData.{[$item.ColumnNameLower]}" :min-height="192"/> </el-form-item> </el-col>{[else]}{[if eq $item.IsRow "1"]} <el-col :span="24">{[else]} <el-col :span="{[$.Span]}">{[end]} <el-form-item label="{[$item.ColumnComment]}" prop="{[$item.ColumnNameLower]}"> <el-input v-model="formData.{[$item.ColumnNameLower]}" placeholder="请输入{[$item.ColumnComment]}" /> </el-form-item> </el-col> {[end]} {[end]} {[end]} </el-row> </el-form>{[if eq .IsDrawer 2]} </el-card> <div class="dialog-footer"> <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> <el-button @click="dialogVisible = false">取 消</el-button> </div> </el-drawer>{[else]} <template #footer> <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> <el-button @click="dialogVisible = false">取 消</el-button> </template> </Dialog>{[end]} </template> {[htmlSafe "<script lang=\"ts\" setup>"]} import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { CommonStatusEnum } from '@/utils/constants' import * as {[.ClassNameUpper]}Api from '@/api/{[.ModuleName]}/{[toMiddle .ClassNameCamel]}'{[range $index, $item := .Columns]}{[if eq $item.Source "2"]} import * as {[toUpper $item.Menu]}Api from "@/api/{[$item.Module]}/{[toMiddle $item.Menu]}"{[end]}{[end]} /** 定义变量*/ const { t } = useI18n() // 国际化 const message = useMessage() // 消息弹窗 const dialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 const formType = ref('') // 表单的类型:create - 新增;update - 修改 const formData = ref({ id: undefined,{[range $index, $item := .Columns]}{[if eq $item.IsEdit "1"]}{[if $item.ColumnDefault]}{[if eq $item.GoType "string"]} {[$item.ColumnNameLower]}: '{[$item.ColumnDefault]}',{[else]} {[$item.ColumnNameLower]}: {[$item.ColumnDefault]},{[end]}{[else]} //{[$item.ColumnComment]}字段 {[$item.ColumnNameLower]}: undefined,{[end]} {[end]}{[end]} }) const formRules = reactive({{[range $index, $item := .Columns]}{[if eq $item.IsRequired "1"]} {[$item.ColumnNameLower]}: [{ required: true, message: "{[$item.ColumnComment]}不能为空", trigger: "blur" }],{[end]}{[end]} }) {[range $index, $item := .Columns]}{[if eq $item.Source "1"]} //{[$item.ColumnComment]}数据字典 let {[$item.ColumnNameLower]}Options = ref([]){[else if eq $item.Source "2"]} //{[$item.ColumnComment]}数据菜单 let {[$item.ColumnNameLower]}Options = ref([]){[else if eq $item.Source "3"]} //{[$item.ColumnComment]}本地数据 {[if eq $item.GoType "string"]} const {[$item.ColumnNameLower]}Options = [ {[range $i, $it := $item.Data]} {id:'{[$it.Id]}',label:"{[$it.Label]}",color:"{[$it.Color]}"}{[if not (isLast $i (len $item.Data))]},{[end]}{[end]}] {[else]} const {[$item.ColumnNameLower]}Options = [ {[range $i, $it := $item.Data]} {id:{[$it.Id]},label:"{[$it.Label]}",color:"{[$it.Color]}"}{[if not (isLast $i (len $item.Data))]},{[end]}{[end]}] {[end]}{[end]}{[end]} /**定义窗体*/ const formRef = ref() // 表单 Ref /**定义方法*/ /** 打开弹窗 */ const open = async (type: string, id?: number) => { dialogVisible.value = true dialogTitle.value = t('action.' + type) formType.value = type resetForm(){[range $index, $item := .Columns]}{[if eq $item.Source "1"]} //获取{[$item.ColumnComment]}数据字典 getDicts("{[$item.DictType]}").then(response => { {[$item.ColumnNameLower]}Options = response.data; }){[else if eq $item.Source "2"]} //获取{[$item.ColumnComment]}菜单 getList{[$item.ColumnNameUpper]}(){[end]}{[end]} // 修改时,设置数据 if (id) { formLoading.value = true try { formData.value = await {[.ClassNameUpper]}Api.get{[.ClassNameUpper]}(id) } finally { formLoading.value = false } } } {[range $index, $item := .Columns]}{[if eq $item.Source "2"]} //查询{[$item.ColumnComment]}菜单 const getList{[$item.ColumnNameUpper]}= async () =>{ const data = await {[toUpper $item.Menu]}Api.get{[toUpper $item.Menu]}List(){[if eq $item.HtmlType "select"]} {[$item.ColumnNameLower]}Options.value = data{[else if eq $item.HtmlType "treeSelect"]} // response.data.push({ id: 0, menuName: '顶级节点', children: [] }); {[$item.ColumnNameLower]}List= Object.assign([],data) {[$item.ColumnNameLower]}List.push({ id: 0, menuName: '顶级节点', children: []}) const root = { id: 0, label: '顶级节点', children: [] } root.children = this.handleTree(response.data, 'id') this.{[$item.ColumnNameLower]}Options.push(root){[end]} }{[end]}{[end]} /** 重置表单 */ const resetForm = () => { formData.value = { id: undefined,{[range $index, $item := .Columns]}{[if eq $item.IsEdit "1"]}{[if $item.ColumnDefault]}{[if eq $item.GoType "string"]} {[$item.ColumnNameLower]}: '{[$item.ColumnDefault]}',{[else]} {[$item.ColumnNameLower]}: {[$item.ColumnDefault]},{[end]}{[else]} //{[$item.ColumnComment]}字段 {[$item.ColumnNameLower]}: undefined,{[end]} {[end]}{[end]} } formRef.value?.resetFields() } /** 提交表单 */ const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 const submitForm = async () => { // 校验表单 if (!formRef) return const valid = await formRef.value.validate() if (!valid) return // 提交请求 formLoading.value = true try { const data = formData.value as unknown as {[.ClassNameUpper]}Api.{[.ClassNameUpper]}VO if (formType.value === 'create') { await {[.ClassNameUpper]}Api.create{[.ClassNameUpper]}(data) message.success(t('common.createSuccess')) } else { await {[.ClassNameUpper]}Api.update{[.ClassNameUpper]}(data) message.success(t('common.updateSuccess')) } dialogVisible.value = false // 发送操作成功的事件 emit('success') } finally { formLoading.value = false } } /**define方法*/ defineOptions({ name: 'SystemTestForm' }) defineExpose({ open }) // 提供 open 方法,用于打开弹窗 </script>