shop/resources/template/code/vue3/edit.tpl

<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>