perf: Form Table Search Descriptions 支持嵌套赋值

src/views/Authorization/User.vue

@@ -1,14 +1,17 @@
 <script setup lang="tsx">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Table, TableColumn } from '@/components/Table'
-import { ref, unref, nextTick, watch } from 'vue'
+import { Table } from '@/components/Table'
+import { ref, unref, nextTick, watch, reactive } from 'vue'
 import { ElButton, ElTree, ElInput, ElDivider } from 'element-plus'
-import { getDepartmentApi, getUserByIdApi } from '@/api/department'
+import { getDepartmentApi, getUserByIdApi, saveUserApi, deleteUserByIdApi } from '@/api/department'
 import type { DepartmentItem, DepartmentUserItem } from '@/api/department/types'
 import { useTable } from '@/hooks/web/useTable'
 import { Search } from '@/components/Search'
-import { FormSchema } from '@/components/Form'
+import Write from './components/Write.vue'
+import Detail from './components/Detail.vue'
+import { Dialog } from '@/components/Dialog'
+import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
 
 const { t } = useI18n()
 
@@ -25,16 +28,46 @@ const { tableRegister, tableState, tableMethods } = useTable({
       list: res.data.list || [],
       total: res.data.total || 0
     }
+  },
+  fetchDelApi: async () => {
+    const res = await deleteUserByIdApi(unref(ids))
+    return !!res
   }
 })
 const { total, loading, dataList, pageSize, currentPage } = tableState
-const { getList } = tableMethods
+const { getList, getElTableExpose, delList } = tableMethods
 
-const columns: TableColumn[] = [
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    field: 'selection',
+    search: {
+      hidden: true
+    },
+    form: {
+      hidden: true
+    },
+    detail: {
+      hidden: true
+    },
+    table: {
+      type: 'selection'
+    }
+  },
   {
     field: 'index',
     label: t('userDemo.index'),
-    type: 'index'
+    form: {
+      hidden: true
+    },
+    search: {
+      hidden: true
+    },
+    detail: {
+      hidden: true
+    },
+    table: {
+      type: 'index'
+    }
   },
   {
     field: 'username',
@@ -44,45 +77,100 @@ const columns: TableColumn[] = [
     field: 'account',
     label: t('userDemo.account')
   },
+  {
+    field: 'department.id',
+    label: t('userDemo.department'),
+    detail: {
+      slots: {
+        default: (data: DepartmentUserItem) => {
+          return <>{data.department.departmentName}</>
+        }
+      }
+    },
+    search: {
+      hidden: true
+    },
+    form: {
+      component: 'TreeSelect',
+      componentProps: {
+        nodeKey: 'id',
+        props: {
+          label: 'departmentName'
+        }
+      },
+      optionApi: async () => {
+        const res = await getDepartmentApi()
+        return res.data.list
+      }
+    },
+    table: {
+      type: 'index'
+    }
+  },
   {
     field: 'role',
-    label: t('userDemo.role')
+    label: t('userDemo.role'),
+    search: {
+      hidden: true
+    }
   },
   {
     field: 'email',
-    label: t('userDemo.email')
+    label: t('userDemo.email'),
+    form: {
+      component: 'Input'
+    },
+    search: {
+      hidden: true
+    }
   },
   {
     field: 'createTime',
-    label: t('userDemo.createTime')
+    label: t('userDemo.createTime'),
+    form: {
+      component: 'Input'
+    },
+    search: {
+      hidden: true
+    }
   },
   {
     field: 'action',
     label: t('userDemo.action'),
-    slots: {
-      default: (data) => {
-        return (
-          <ElButton type="primary" onClick={() => actionFn(data[0].row)}>
-            {t('tableDemo.action')}
-          </ElButton>
-        )
+    form: {
+      hidden: true
+    },
+    detail: {
+      hidden: true
+    },
+    search: {
+      hidden: true
+    },
+    table: {
+      width: 240,
+      slots: {
+        default: (data: any) => {
+          const row = data[0].row as DepartmentUserItem
+          return (
+            <>
+              <ElButton type="primary" onClick={() => action(row, 'edit')}>
+                {t('exampleDemo.edit')}
+              </ElButton>
+              <ElButton type="success" onClick={() => action(row, 'detail')}>
+                {t('exampleDemo.detail')}
+              </ElButton>
+              <ElButton type="danger" onClick={() => delData(row)}>
+                {t('exampleDemo.del')}
+              </ElButton>
+            </>
+          )
+        }
       }
     }
   }
-]
+])
 
-const searchSchema: FormSchema[] = [
-  {
-    field: 'username',
-    label: t('userDemo.username'),
-    component: 'Input'
-  },
-  {
-    field: 'account',
-    label: t('userDemo.account'),
-    component: 'Input'
-  }
-]
+const { allSchemas } = useCrudSchemas(crudSchemas)
 
 const searchParams = ref({})
 const setSearchParams = (params: any) => {
@@ -91,10 +179,6 @@ const setSearchParams = (params: any) => {
   getList()
 }
 
-const actionFn = (data: DepartmentUserItem) => {
-  console.log(data)
-}
-
 const treeEl = ref<typeof ElTree>()
 
 const currentNodeKey = ref('')
@@ -128,6 +212,65 @@ const filterNode = (value: string, data: DepartmentItem) => {
   if (!value) return true
   return data.departmentName.includes(value)
 }
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+
+const currentRow = ref<DepartmentUserItem>()
+const actionType = ref('')
+
+const AddAction = () => {
+  dialogTitle.value = t('exampleDemo.add')
+  currentRow.value = undefined
+  dialogVisible.value = true
+  actionType.value = ''
+}
+
+const delLoading = ref(false)
+const ids = ref<string[]>([])
+
+const delData = async (row?: DepartmentUserItem) => {
+  const elTableExpose = await getElTableExpose()
+  ids.value = row
+    ? [row.id]
+    : elTableExpose?.getSelectionRows().map((v: DepartmentUserItem) => v.id) || []
+  delLoading.value = true
+
+  await delList(unref(ids).length).finally(() => {
+    delLoading.value = false
+  })
+}
+
+const action = (row: DepartmentUserItem, type: string) => {
+  dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
+  actionType.value = type
+  currentRow.value = { ...row, department: unref(treeEl)?.getCurrentNode() || {} }
+  dialogVisible.value = true
+}
+
+const writeRef = ref<ComponentRef<typeof Write>>()
+
+const saveLoading = ref(false)
+
+const save = async () => {
+  const write = unref(writeRef)
+  const formData = await write?.submit()
+  if (formData) {
+    saveLoading.value = true
+    try {
+      const res = await saveUserApi(formData)
+      if (res) {
+        currentPage.value = 1
+        getList()
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      saveLoading.value = false
+      dialogVisible.value = false
+    }
+  }
+}
 </script>
 
 <template>
@@ -157,20 +300,56 @@ const filterNode = (value: string, data: DepartmentItem) => {
       />
     </ContentWrap>
     <ContentWrap class="flex-[3] ml-20px">
-      <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
-      <div>
-        <Table
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :columns="columns"
-          :data="dataList"
-          :loading="loading"
-          @register="tableRegister"
-          :pagination="{
-            total
-          }"
-        />
+      <Search
+        :schema="allSchemas.searchSchema"
+        @reset="setSearchParams"
+        @search="setSearchParams"
+      />
+
+      <div class="mb-10px">
+        <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
+        <ElButton :loading="delLoading" type="danger" @click="delData()">
+          {{ t('exampleDemo.del') }}
+        </ElButton>
       </div>
+      <Table
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :columns="allSchemas.tableColumns"
+        :data="dataList"
+        :loading="loading"
+        @register="tableRegister"
+        :pagination="{
+          total
+        }"
+      />
     </ContentWrap>
+
+    <Dialog v-model="dialogVisible" :title="dialogTitle">
+      <Write
+        v-if="actionType !== 'detail'"
+        ref="writeRef"
+        :form-schema="allSchemas.formSchema"
+        :current-row="currentRow"
+      />
+
+      <Detail
+        v-if="actionType === 'detail'"
+        :detail-schema="allSchemas.detailSchema"
+        :current-row="currentRow"
+      />
+
+      <template #footer>
+        <ElButton
+          v-if="actionType !== 'detail'"
+          type="primary"
+          :loading="saveLoading"
+          @click="save"
+        >
+          {{ t('exampleDemo.save') }}
+        </ElButton>
+        <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+      </template>
+    </Dialog>
   </div>
 </template>

src/views/Authorization/components/Detail.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { DepartmentUserItem } from '@/api/department/types'
+import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
+
+defineProps({
+  currentRow: {
+    type: Object as PropType<DepartmentUserItem>,
+    default: () => undefined
+  },
+  detailSchema: {
+    type: Array as PropType<DescriptionsSchema[]>,
+    default: () => []
+  }
+})
+</script>
+
+<template>
+  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
+</template>

src/views/Authorization/components/Write.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Form, FormSchema } from '@/components/Form'
+import { useForm } from '@/hooks/web/useForm'
+import { PropType, reactive, watch } from 'vue'
+import { DepartmentUserItem } from '@/api/department/types'
+import { useValidator } from '@/hooks/web/useValidator'
+
+const { required } = useValidator()
+
+const props = defineProps({
+  currentRow: {
+    type: Object as PropType<DepartmentUserItem>,
+    default: () => undefined
+  },
+  formSchema: {
+    type: Array as PropType<FormSchema[]>,
+    default: () => []
+  }
+})
+
+const rules = reactive({
+  username: [required()],
+  account: [required()],
+  role: [required()],
+  email: [required()],
+  createTime: [required()]
+})
+
+const { formRegister, formMethods } = useForm()
+const { setValues, getFormData, getElFormExpose } = formMethods
+
+const submit = async () => {
+  const elForm = await getElFormExpose()
+  const valid = await elForm?.validate().catch((err) => {
+    console.log(err)
+  })
+  if (valid) {
+    const formData = getFormData()
+    return formData
+  }
+}
+
+watch(
+  () => props.currentRow,
+  (currentRow) => {
+    if (!currentRow) return
+    setValues(currentRow)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+defineExpose({
+  submit
+})
+</script>
+
+<template>
+  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
+</template>