feat(menu): 修复table模板

Author: pixelmaxQm

server/resource/package/web/view/table.vue.tpl

@@ -1,7 +1,5 @@
 {{- $global := . }}
-{{- $top := . -}}
 {{- $templateID := printf "%s_%s" .Package .StructName }}
-
 {{- if .IsAdd }}
 
 // 请在搜索条件中增加如下代码
@@ -35,6 +33,78 @@
               {{- end }}
             {{- end }}
 
+// 字典增加如下代码
+    {{- range $index, $element := .DictTypes}}
+const {{ $element }}Options = ref([])
+    {{- end }}
+
+// setOptions方法中增加如下调用
+
+{{- range $index, $element := .DictTypes }}
+    {{ $element }}Options.value = await getDictFunc('{{$element}}')
+{{- end }}
+
+// 基础formData结构（变量处和关闭表单处）增加如下字段
+{{- range .Fields}}
+          {{- if .Form}}
+            {{ GenerateDefaultFormValue . }}
+          {{- end }}
+        {{- end }}
+// 验证规则中增加如下字段
+
+{{- range .Fields }}
+        {{- if .Form }}
+            {{- if eq .Require true }}
+{{.FieldJson }} : [{
+    required: true,
+    message: '{{ .ErrorText }}',
+    trigger: ['input','blur'],
+},
+               {{- if eq .FieldType "string" }}
+{
+    whitespace: true,
+    message: t('general.noOnlySpace'),
+    trigger: ['input', 'blur'],
+}
+              {{- end }}
+],
+            {{- end }}
+        {{- end }}
+    {{- end }}
+
+
+
+{{- if .HasDataSource }}
+// 请引用
+get{{.StructName}}DataSource,
+
+//  获取数据源
+const dataSource = ref({})
+const getDataSourceFunc = async()=>{
+  const res = await get{{.StructName}}DataSource()
+  if (res.code === 0) {
+    dataSource.value = res.data
+  }
+}
+getDataSourceFunc()
+{{- end }}
+
+{{- else }}
+
+{{- if not .OnlyTemplate}}
+<template>
+  <div>
+  {{- if not .IsTree }}
+    <div class="gva-search-box">
+      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">
+      {{- if .GvaModel }}
+      <el-form-item label="创建日期" prop="createdAtRange">
+      <template #label>
+        <span>
+          创建日期
+          <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
+            <el-icon><QuestionFilled /></el-icon>
+          </el-tooltip>
         </span>
       </template>
 
@@ -70,8 +140,8 @@
   {{- end }}
     <div class="gva-table-box">
         <div class="gva-btn-list">
-            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.add"{{ end }} type="primary" icon="plus" @click="openDialog()">新增</el-button>
-            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.batchDelete"{{ end }} icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
+            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.add"{{ end }} type="primary" icon="plus" @click="openDialog()">{{"{{"}}t('general.add'){{"}}"}}</el-button>
+            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.batchDelete"{{ end }} icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">{{"{{"}}t('general.delete'){{"}}"}}</el-button>
             {{ if .HasExcel -}}
             <ExportTemplate {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.exportTemplate"{{ end }} template-id="{{$templateID}}" />
             <ExportExcel {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.exportExcel"{{ end }} template-id="{{$templateID}}" filterDeleted/>
@@ -91,7 +161,7 @@
         >
         <el-table-column type="selection" width="55" />
         {{ if .GvaModel }}
-        <el-table-column sortable align="left" label="日期" prop="CreatedAt" {{- if .IsTree }} min-{{- end }}width="180">
+        <el-table-column sortable align="left" label="日期" prop="CreatedAt" {{- if .IsTree }} min-{{- end -}}width="180">
             <template #default="scope">{{ "{{ formatDate(scope.row.CreatedAt) }}" }}</template>
         </el-table-column>
         {{ end }}
@@ -100,14 +170,14 @@
             {{ GenerateTableColumn . }}
         {{- end }}
         {{- end }}
-        <el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
+        <el-table-column align="left" :label="t('general.operations')" fixed="right" :min-width="appStore.operateMinWith">
             <template #default="scope">
             {{- if .IsTree }}
-            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.add"{{ end }} type="primary" link class="table-button" @click="openDialog(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>新增子节点</el-button>
+            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.add"{{ end }} type="primary" link class="table-button" @click="openDialog(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>{{"{{"}}t('general.addChild'){{"}}"}}</el-button>
             {{- end }}
-            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.info"{{ end }} type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看</el-button>
-            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.edit"{{ end }} type="primary" link icon="edit" class="table-button" @click="update{{.StructName}}Func(scope.row)">编辑</el-button>
-            <el-button {{ if .IsTree }}v-if="!scope.row.children?.length" {{ end }} {{if $global.AutoCreateBtnAuth }}v-auth="btnAuth.delete"{{ end }} type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
+            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.info"{{ end }} type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>{{"{{"}}t('general.detail'){{"}}"}} </el-button>
+            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.edit"{{ end }} type="primary" link icon="edit" class="table-button" @click="update{{.StructName}}Func(scope.row)">{{"{{"}}t('general.edit'){{"}}"}}</el-button>
+            <el-button {{ if .IsTree }}v-if="!scope.row.children?.length" {{ end }} {{if $global.AutoCreateBtnAuth }}v-auth="btnAuth.delete"{{ end }} type="primary" link icon="delete" @click="deleteRow(scope.row)">{{"{{"}}t('general.delete'){{"}}"}}</el-button>
             </template>
         </el-table-column>
         </el-table>
@@ -128,15 +198,15 @@
               <div class="flex justify-between items-center">
                 <span class="text-lg">{{"{{"}}type==='create'?t('general.add'):t('general.edit'){{"}}"}}</span>
                 <div>
-                  <el-button type="primary" @click="enterDialog">{{"{{"}}t('general.confirm'){{"}}"}}</el-button>
-                  <el-button @click="closeDialog">{{"{{"}}t('general.close'){{"}}"}}</el-button>
+                  <el-button :loading="btnLoading" type="primary" @click="enterDialog">{{"{{"}}t('general.confirm'){{"}}"}}</el-button>
+                  <el-button @click="closeDialog">{{"{{"}}t('general.cancel'){{"}}"}}</el-button>
                 </div>
               </div>
             </template>
 
           <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
           {{- if .IsTree }}
-            <el-form-item label="父节点:" prop="parentID" >
+            <el-form-item :label="t('general.parentNode')" prop="parentID" >
                 <el-tree-select
                     v-model="formData.parentID"
                     :data="[rootNode,...tableData]"
@@ -145,37 +215,51 @@
                     :props="defaultProps"
                     clearable
                     style="width: 240px"
-                    placeholder="根节点"
+                    :placeholder="t('general.rootNode')"
                 />
             </el-form-item>
           {{- end }}
         {{- range .Fields}}
           {{- if .Form}}
-            <el-form-item :label="t('{{$top.Package}}.{{$top.StructName}}.{{.FieldName}}')"  prop="{{.FieldJson}}" >
-          {{- if .CheckDataSource}}
-            <el-select {{if eq .DataSource.Association 2}} multiple {{ end }} v-model="formData.{{.FieldJson}}" :placeholder="t('{{$top.Package}}.{{$top.StructName}}.{{.FieldName}}')" style="width:100%" :clearable="{{.Clearable}}" >
-              <el-option v-for="(item,key) in dataSource.{{.FieldJson}}" :key="key" :label="item.label" :value="item.value" />
-            </el-select>
-          {{- else }}
-          {{- if eq .FieldType "bool" }}
-              <el-switch v-model="formData.{{.FieldJson}}" active-color="#13ce66" inactive-color="#ff4949" :active-text="t('general.yes')" :inactive-text="t('general.no')" clearable ></el-switch>
-          {{- end }}
-          {{- if eq .FieldType "string" }}
-          {{- if .DictType}}
-              <el-select v-model="formData.{{ .FieldJson }}" :placeholder="t('{{$top.Package}}.{{$top.StructName}}.{{.FieldName}}')" style="width:100%" :clearable="{{.Clearable}}" >
-                <el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
-              </el-select>
-          {{- else }}
-              <el-input v-model="formData.{{.FieldJson}}" :clearable="{{.Clearable}}"  :placeholder="t('{{$top.Package}}.{{$top.StructName}}.{{.FieldName}}')" />
-          {{- end }}
+            {{ GenerateFormItem . }}
           {{- end }}
-          {{- if eq .FieldType "richtext" }}
-              <RichEdit v-model="formData.{{.FieldJson}}"/>
           {{- end }}
-          {{- if eq .FieldType "json" }}
-              // 此字段为json结构，可以前端自行控制展示和数据绑定模式 需绑定json的key为 formData.{{.FieldJson}} 后端会按照json的类型进行存取
-              {{"{{"}} formData.{{.FieldJson}} {{"}}"}}
+          </el-form>
+    </el-drawer>
+
+    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" :title="t('general.detail')">
+            <el-descriptions :column="1" border>
+            {{- if .IsTree }}
+            <el-descriptions-item :label="t('general.parentNode')">
+                <el-tree-select
+                  v-model="detailForm.parentID"
+                  :data="[rootNode,...tableData]"
+                  check-strictly
+                  disabled
+                  :render-after-expand="false"
+                  :props="defaultProps"
+                  clearable
+                  style="width: 240px"
+                  :placeholder="t('general.rootNode')"
+                />
+            </el-descriptions-item>
+            {{- end }}
+            {{- range .Fields}}
+              {{- if .Desc }}
+                    {{ GenerateDescriptionItem . }}
+              {{- end }}
+            {{- end }}
+            </el-descriptions>
+        </el-drawer>
+
+  </div>
+</template>
+
+<script setup>
+import {
+  {{- if .HasDataSource }}
     get{{.StructName}}DataSource,
+  {{- end }}
   create{{.StructName}},
   delete{{.StructName}},
   delete{{.StructName}}ByIds,
@@ -214,7 +298,6 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { ref, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
-
 {{- if .AutoCreateBtnAuth }}
 // 引入按钮权限标识
 import { useBtnAuth } from '@/utils/btnAuth'
@@ -230,6 +313,7 @@ import ImportExcel from '@/components/exportExcel/importExcel.vue'
 import ExportTemplate from '@/components/exportExcel/exportTemplate.vue'
 {{- end}}
 
+
 defineOptions({
     name: '{{.StructName}}'
 })
@@ -297,39 +381,6 @@ const rule = reactive({
     {{- end }}
 })
 
-const searchRule = reactive({
-  createdAt: [
-    { validator: (rule, value, callback) => {
-      if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
-        callback(new Error(t('general.placeInputEndData')))
-      } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
-        callback(new Error(t('general.placeInputStartData')))
-      } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
-        callback(new Error(t('general.startDataMustBeforeEndData')))
-      } else {
-        callback()
-      }
-    }, trigger: 'change' }
-  ],
-  {{- range .Fields }}
-    {{- if .FieldSearchType}}
-      {{- if eq .FieldType "time.Time" }}
-        {{.FieldJson }} : [{ validator: (rule, value, callback) => {
-        if (searchInfo.value.start{{.FieldName}} && !searchInfo.value.end{{.FieldName}}) {
-          callback(new Error(t('general.placeInputEndData')))
-        } else if (!searchInfo.value.start{{.FieldName}} && searchInfo.value.end{{.FieldName}}) {
-          callback(new Error(t('general.placeInputStartData')))
-        } else if (searchInfo.value.start{{.FieldName}} && searchInfo.value.end{{.FieldName}} && (searchInfo.value.start{{.FieldName}}.getTime() === searchInfo.value.end{{.FieldName}}.getTime() || searchInfo.value.start{{.FieldName}}.getTime() > searchInfo.value.end{{.FieldName}}.getTime())) {
-          callback(new Error(t('general.startDataMustBeforeEndData')))
-        } else {
-          callback()
-        }
-      }, trigger: 'change' }],
-      {{- end }}
-    {{- end }}
-  {{- end }}
-})
-
 const elFormRef = ref()
 const elSearchFormRef = ref()
 
@@ -420,7 +471,7 @@ const defaultProps = {
 
 const rootNode = {
   {{ .PrimaryField.FieldJson }}: 0,
-  {{ .TreeJson }}: '根节点',
+  {{ .TreeJson }}: t('general.rootNode'),
   children: []
 }
 
@@ -457,9 +508,9 @@ const handleSelectionChange = (val) => {
 
 // 删除行
 const deleteRow = (row) => {
-  ElMessageBox.confirm(t('general.deleteConfirm'), t('general.hint'), {
-    confirmButtonText: t('general.confirm'),
-    cancelButtonText: t('general.cancel'),
+    ElMessageBox.confirm(t('general.deleteConfirm'), t('general.hint'), {
+        confirmButtonText: t('general.confirm'),
+         cancelButtonText: t('general.cancel'),
         type: 'warning'
     }).then(() => {
             delete{{.StructName}}Func(row)
@@ -519,7 +570,7 @@ const delete{{.StructName}}Func = async (row) => {
     if (res.code === 0) {
         ElMessage({
                 type: 'success',
-                message: t('general.deleteSuccess')
+                message: '删除成功'
             })
             if (tableData.value.length === 1 && page.value > 1) {
             page.value--
@@ -553,8 +604,9 @@ const closeDialog = () => {
 }
 // 弹窗确定
 const enterDialog = async () => {
+     btnLoading.value = true
      elFormRef.value?.validate( async (valid) => {
-             if (!valid) return
+             if (!valid) return btnLoading.value = false
               let res
               switch (type.value) {
                 case 'create':
@@ -567,6 +619,7 @@ const enterDialog = async () => {
                   res = await create{{.StructName}}(formData.value)
                   break
               }
+              btnLoading.value = false
               if (res.code === 0) {
                 ElMessage({
                   type: 'success',
@@ -578,7 +631,7 @@ const enterDialog = async () => {
       })
 }
 
-const detailFrom = ref({})
+const detailForm = ref({})
 
 // 查看详情控制标记
 const detailShow = ref(false)
@@ -595,7 +648,7 @@ const getDetails = async (row) => {
   // 打开弹窗
   const res = await find{{.StructName}}({ {{.PrimaryField.FieldJson}}: row.{{.PrimaryField.FieldJson}} })
   if (res.code === 0) {
-    detailFrom.value = res.data
+    detailForm.value = res.data
     openDetailShow()
   }
 }
@@ -604,7 +657,7 @@ const getDetails = async (row) => {
 // 关闭详情弹窗
 const closeDetailShow = () => {
   detailShow.value = false
-  detailFrom.value = {}
+  detailForm.value = {}
 }
 
 
@@ -638,6 +691,6 @@ defineOptions({
 </script>
 <style>
 </style>
-{{- end}}
-
 {{- end }}
+
+{{- end }}