代码生成：增加 tree 树形的示例

Author: YunaiV

src/api/infra/demo/demo02/index.ts

@@ -0,0 +1,37 @@
+import request from '@/config/axios'
+
+export interface Demo02CategoryVO {
+  id: number
+  name: string
+  parentId: number
+}
+
+// 查询示例分类列表
+export const getDemo02CategoryList = async (params) => {
+  return await request.get({ url: `/infra/demo02-category/list`, params })
+}
+
+// 查询示例分类详情
+export const getDemo02Category = async (id: number) => {
+  return await request.get({ url: `/infra/demo02-category/get?id=` + id })
+}
+
+// 新增示例分类
+export const createDemo02Category = async (data: Demo02CategoryVO) => {
+  return await request.post({ url: `/infra/demo02-category/create`, data })
+}
+
+// 修改示例分类
+export const updateDemo02Category = async (data: Demo02CategoryVO) => {
+  return await request.put({ url: `/infra/demo02-category/update`, data })
+}
+
+// 删除示例分类
+export const deleteDemo02Category = async (id: number) => {
+  return await request.delete({ url: `/infra/demo02-category/delete?id=` + id })
+}
+
+// 导出示例分类 Excel
+export const exportDemo02Category = async (params) => {
+  return await request.download({ url: `/infra/demo02-category/export-excel`, params })
+}

src/api/infra/demo02/index.ts

@@ -6,26 +6,30 @@
       :rules="formRules"
       label-width="100px"
       v-loading="formLoading"
-    />
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane label="学生联系人" name="demoStudentContact">
-        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-      <el-tab-pane label="学生地址" name="demoStudentAddress">
-        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="父级编号" prop="parentId">
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="demo02CategoryTree"
+          :props="defaultProps"
+          check-strictly
+          default-expand-all
+          placeholder="请选择父级编号"
+        />
+      </el-form-item>
+    </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
 <script setup lang="ts">
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentContactForm from './DemoStudentContactForm.vue'
-import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
+import * as Demo02CategoryApi from '@/api/infra/demo/demo02'
+import { defaultProps, handleTree } from '@/utils/tree'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -35,15 +39,16 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  id: undefined
+  id: undefined,
+  name: undefined,
+  parentId: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  parentId: [{ required: true, message: '父级编号不能为空', trigger: 'blur' }]
 })
-const formRules = reactive({})
 const formRef = ref() // 表单 Ref
-
-/** 子表的表单 */
-const subTabsName = ref('demoStudentContact')
-const demoStudentContactFormRef = ref()
-const demoStudentAddressFormRef = ref()
+const demo02CategoryTree = ref() // 树形结构
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -55,11 +60,12 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await DemoStudentApi.getDemoStudent(id)
+      formData.value = await Demo02CategoryApi.getDemo02Category(id)
     } finally {
       formLoading.value = false
     }
   }
+  await getDemo02CategoryTree()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -68,31 +74,15 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
-  // 校验子表单
-  try {
-    await demoStudentContactFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demoStudentContact'
-    return
-  }
-  try {
-    await demoStudentAddressFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demoStudentAddress'
-    return
-  }
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
-    // 拼接子表的数据
-    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
-    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
+    const data = formData.value as unknown as Demo02CategoryApi.Demo02CategoryVO
     if (formType.value === 'create') {
-      await DemoStudentApi.createDemoStudent(data)
+      await Demo02CategoryApi.createDemo02Category(data)
       message.success(t('common.createSuccess'))
     } else {
-      await DemoStudentApi.updateDemoStudent(data)
+      await Demo02CategoryApi.updateDemo02Category(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -106,8 +96,19 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: undefined
+    id: undefined,
+    name: undefined,
+    parentId: undefined
   }
   formRef.value?.resetFields()
 }
-</script>
+
+/** 获得示例分类树 */
+const getDemo02CategoryTree = async () => {
+  demo02CategoryTree.value = []
+  const data = await Demo02CategoryApi.getDemo02CategoryList()
+  const root: Tree = { id: 0, name: '顶级示例分类', children: [] }
+  root.children = handleTree(data, 'id', 'parentId')
+  demo02CategoryTree.value.push(root)
+}
+</script>