feat: 树形结构可定义展示key和填充key

flipped-aurora · Nov 18, 2024 · 10e167c · 10e167c
1 parent 3b76694
commit 10e167c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 19 deletions.
diff --git a/server/model/system/request/sys_auto_code.go b/server/model/system/request/sys_auto_code.go
@@ -28,6 +28,7 @@ type AutoCode struct {
 	AutoCreateBtnAuth   bool                   `json:"autoCreateBtnAuth" example:"false"`   // 是否自动创建按钮权限
 	OnlyTemplate        bool                   `json:"onlyTemplate" example:"false"`        // 是否只生成模板
 	IsTree              bool                   `json:"isTree" example:"false"`              // 是否树形结构
+	TreeJson            string                 `json:"treeJson" example:"展示的树json字段"`       // 展示的树json字段
 	IsAdd               bool                   `json:"isAdd" example:"false"`               // 是否新增
 	Fields              []*AutoCodeField       `json:"fields"`
 	Module              string                 `json:"-"`

diff --git a/server/resource/package/server/service/service.go.tpl b/server/resource/package/server/service/service.go.tpl
@@ -60,7 +60,9 @@ import (
 {{- if not .OnlyTemplate }}
 	"{{.Module}}/global"
 	"{{.Module}}/model/{{.Package}}"
+	{{- if not .IsTree}}
     {{.Package}}Req "{{.Module}}/model/{{.Package}}/request"
+    {{- end }}
     {{- if .AutoCreateResource }}
     "gorm.io/gorm"
     {{- end}}

diff --git a/server/resource/package/web/view/form.vue.tpl b/server/resource/package/web/view/form.vue.tpl
@@ -172,9 +172,10 @@ getDataSourceFunc()
                   :data="tableData"
                   check-strictly
                   :render-after-expand="false"
-                  show-checkbox
+                  :props="defaultProps"
+                  clearable
                   style="width: 240px"
-                  placeholder="为空默认为根节点"
+                  placeholder="根节点"
               />
           </el-form-item>
         {{- end }}
@@ -293,6 +294,12 @@ const router = useRouter()
 {{- if .IsTree }}
 const tableData = ref([])
 
+const defaultProps = {
+  children: "children",
+  label: "{{ .TreeJson }}",
+  value: "{{ .PrimaryField.FieldJson }}"
+}
+
 const getTableData = async() => {
   const table = await get{{.StructName}}List()
   if (table.code === 0) {
@@ -313,7 +320,7 @@ const {{ $element }}Options = ref([])
     {{- end }}
 const formData = ref({
         {{- if .IsTree }}
-            parentID:0,
+            parentID: undefined,
         {{- end }}
         {{- range .Fields}}
           {{- if .Form }}

diff --git a/server/resource/package/web/view/table.vue.tpl b/server/resource/package/web/view/table.vue.tpl
@@ -671,8 +671,10 @@ getDataSourceFunc()
                     :data="tableData"
                     check-strictly
                     :render-after-expand="false"
-                    show-checkbox
+                    :props="defaultProps"
+                    clearable
                     style="width: 240px"
+                    placeholder="根节点"
                 />
             </el-form-item>
           {{- end }}
@@ -759,9 +761,10 @@ getDataSourceFunc()
                   check-strictly
                   disabled
                   :render-after-expand="false"
-                  show-checkbox
+                  :props="defaultProps"
+                  clearable
                   style="width: 240px"
-                  placeholder="为空默认为根节点"
+                  placeholder="根节点"
                 />
             </el-descriptions-item>
             {{- end }}
@@ -884,7 +887,7 @@ const {{ $element }}Options = ref([])
     {{- end }}
 const formData = ref({
         {{- if .IsTree }}
-            parentID:0,
+            parentID:undefined,
         {{- end }}
         {{- range .Fields}}
           {{- if .Form}}
@@ -1076,6 +1079,13 @@ const getTableData = async() => {
   }
 }
 {{- else }}
+// 树选择器配置
+const defaultProps = {
+  children: "children",
+  label: "{{ .TreeJson }}",
+  value: "{{ .PrimaryField.FieldJson }}"
+}
+
 // 查询
 const getTableData = async() => {
   const table = await get{{.StructName}}List()
@@ -1187,7 +1197,7 @@ const dialogFormVisible = ref(false)
 const openDialog = ({{- if .IsTree -}}row{{- end -}}) => {
     type.value = 'create'
     {{- if .IsTree }}
-    formData.value.parentID = row ? row.{{.PrimaryField.FieldJson}} : 0
+    formData.value.parentID = row ? row.{{.PrimaryField.FieldJson}} : undefined
     {{- end }}
     dialogFormVisible.value = true
 }

diff --git a/web/src/view/systemTools/autoCode/index.vue b/web/src/view/systemTools/autoCode/index.vue
@@ -404,34 +404,38 @@
             <el-form-item>
               <template #label>
                 <el-tooltip
-                    content="注：会自动创建parentID来进行父子关系关联,仅支持主键为int类型"
-                    placement="bottom"
-                    effect="light"
+                  content="注：使用基础模板将不会生成任何结构体和CURD,仅仅配置enter等属性方便自行开发非CURD逻辑"
+                  placement="bottom"
+                  effect="light"
                 >
                   <div>
-                    树型结构 <el-icon><QuestionFilled /></el-icon>
+                    基础模板 <el-icon><QuestionFilled /></el-icon>
                   </div>
                 </el-tooltip>
               </template>
-              <el-checkbox v-model="form.isTree" />
+              <el-checkbox v-model="form.onlyTemplate" />
             </el-form-item>
           </el-col>
-          <el-col :span="3">
+          <el-col :span="9">
             <el-form-item>
               <template #label>
                 <el-tooltip
-                  content="注：使用基础模板将不会生成任何结构体和CURD,仅仅配置enter等属性方便自行开发非CURD逻辑"
-                  placement="bottom"
-                  effect="light"
+                    content="注：会自动创建parentID来进行父子关系关联,仅支持主键为int类型"
+                    placement="bottom"
+                    effect="light"
                 >
                   <div>
-                    基础模板 <el-icon><QuestionFilled /></el-icon>
+                    树型结构 <el-icon><QuestionFilled /></el-icon>
                   </div>
                 </el-tooltip>
               </template>
-              <el-checkbox v-model="form.onlyTemplate" />
+              <div class="flex gap-2 items-center">
+                <el-checkbox v-model="form.isTree" />
+                <el-input v-model="form.treeJson" :disabled="!form.isTree" placeholder="前端展示json属性"></el-input>
+              </div>
             </el-form-item>
           </el-col>
+
         </el-row>
       </el-form>
     </div>
@@ -1041,6 +1045,7 @@
     autoCreateResource: false,
     onlyTemplate: false,
     isTree: false,
+    treeJson: "",
     fields: []
   })
   const rules = ref({
@@ -1154,6 +1159,13 @@
   }
   const autoCodeForm = ref(null)
   const enterForm = async (isPreview) => {
+    if (form.value.isTree && !form.value.treeJson){
+      ElMessage({
+        type: 'error',
+        message: '请填写树型结构的前端展示json属性'
+      })
+      return false
+    }
     if (!form.value.onlyTemplate) {
       if (form.value.fields.length <= 0) {
         ElMessage({
@@ -1463,6 +1475,7 @@
       autoCreateResource: false,
       onlyTemplate: false,
       isTree: false,
+      treeJson: "",
       fields: []
     }
     await nextTick()