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

2023-08-05 10:38:49 +08:00
parent dfea91c7e1
commit 46ddf62d2d
20 changed files with 428 additions and 158 deletions
--- a/src/views/Authorization/User.vue
+++ b/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>
--- a/src/views/Authorization/components/Detail.vue
+++ b/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>
--- a/src/views/Authorization/components/Write.vue
+++ b/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>
--- a/src/views/Example/Dialog/ExampleDialog.vue
+++ b/src/views/Example/Dialog/ExampleDialog.vue
@@ -48,10 +48,10 @@ const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    form: {
-      show: false
+      hidden: true
    },
    detail: {
-      show: false
+      hidden: true
    },
    table: {
      type: 'selection'
@@ -62,21 +62,19 @@ const crudSchemas = reactive<CrudSchema[]>([
    label: t('tableDemo.index'),
    type: 'index',
    form: {
-      show: false
+      hidden: true
    },
    detail: {
-      show: false
+      hidden: true
    }
  },
  {
    field: 'title',
    label: t('tableDemo.title'),
    search: {
-      show: true,
      component: 'Input'
    },
    form: {
-      show: true,
      component: 'Input',
      colProps: {
        span: 24
@@ -94,7 +92,6 @@ const crudSchemas = reactive<CrudSchema[]>([
    field: 'display_time',
    label: t('tableDemo.displayTime'),
    form: {
-      show: true,
      component: 'DatePicker',
      componentProps: {
        type: 'datetime',
@@ -120,7 +117,6 @@ const crudSchemas = reactive<CrudSchema[]>([
      )
    },
    form: {
-      show: true,
      component: 'Select',
      componentProps: {
        style: {
@@ -166,7 +162,6 @@ const crudSchemas = reactive<CrudSchema[]>([
    field: 'pageviews',
    label: t('tableDemo.pageviews'),
    form: {
-      show: true,
      component: 'InputNumber',
      value: 0
    }
@@ -178,7 +173,6 @@ const crudSchemas = reactive<CrudSchema[]>([
      show: false
    },
    form: {
-      show: true,
      component: 'Editor',
      colProps: {
        span: 24
@@ -198,10 +192,10 @@ const crudSchemas = reactive<CrudSchema[]>([
    width: '260px',
    label: t('tableDemo.action'),
    form: {
-      show: false
+      hidden: true
    },
    detail: {
-      show: false
+      hidden: true
    },
    table: {
      slots: {
--- a/src/views/Example/Dialog/components/Detail.vue
+++ b/src/views/Example/Dialog/components/Detail.vue
@@ -2,10 +2,6 @@
 import { PropType } from 'vue'
 import type { TableData } from '@/api/table/types'
 import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
-import { useI18n } from '@/hooks/web/useI18n'
-import { ElTag } from 'element-plus'
-
-const { t } = useI18n()

 defineProps({
  currentRow: {
@@ -20,21 +16,5 @@ defineProps({
 </script>

 <template>
-  <Descriptions :schema="detailSchema" :data="currentRow || {}">
-    <template #importance="{ row }: { row: TableData }">
-      <ElTag :type="row.importance === 1 ? 'success' : row.importance === 2 ? 'warning' : 'danger'">
-        {{
-          row.importance === 1
-            ? t('tableDemo.important')
-            : row.importance === 2
-            ? t('tableDemo.good')
-            : t('tableDemo.commonly')
-        }}
-      </ElTag>
-    </template>
-
-    <template #content="{ row }: { row: TableData }">
-      <div v-html="row.content"></div>
-    </template>
-  </Descriptions>
+  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
 </template>
--- a/src/views/Example/Page/ExamplePage.vue
+++ b/src/views/Example/Page/ExamplePage.vue
@@ -65,10 +65,10 @@ const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    form: {
-      show: false
+      hidden: true
    },
    detail: {
-      show: false
+      hidden: true
    },
    table: {
      type: 'selection'
@@ -79,21 +79,19 @@ const crudSchemas = reactive<CrudSchema[]>([
    label: t('tableDemo.index'),
    type: 'index',
    form: {
-      show: false
+      hidden: true
    },
    detail: {
-      show: false
+      hidden: true
    }
  },
  {
    field: 'title',
    label: t('tableDemo.title'),
    search: {
-      show: true,
      component: 'Input'
    },
    form: {
-      show: true,
      component: 'Input',
      colProps: {
        span: 24
@@ -111,7 +109,6 @@ const crudSchemas = reactive<CrudSchema[]>([
    field: 'display_time',
    label: t('tableDemo.displayTime'),
    form: {
-      show: true,
      component: 'DatePicker',
      componentProps: {
        type: 'datetime',
@@ -137,7 +134,6 @@ const crudSchemas = reactive<CrudSchema[]>([
      )
    },
    form: {
-      show: true,
      component: 'Select',
      componentProps: {
        style: {
@@ -164,7 +160,6 @@ const crudSchemas = reactive<CrudSchema[]>([
    field: 'pageviews',
    label: t('tableDemo.pageviews'),
    form: {
-      show: true,
      component: 'InputNumber',
      value: 0
    }
@@ -173,10 +168,9 @@ const crudSchemas = reactive<CrudSchema[]>([
    field: 'content',
    label: t('exampleDemo.content'),
    table: {
-      show: false
+      hidden: true
    },
    form: {
-      show: true,
      component: 'Editor',
      colProps: {
        span: 24
@@ -191,10 +185,10 @@ const crudSchemas = reactive<CrudSchema[]>([
    width: '260px',
    label: t('tableDemo.action'),
    form: {
-      show: false
+      hidden: true
    },
    detail: {
-      show: false
+      hidden: true
    },
    table: {
      slots: {
--- a/src/views/Example/Page/components/Detail.vue
+++ b/src/views/Example/Page/components/Detail.vue
@@ -65,21 +65,5 @@ const schema = reactive<DescriptionsSchema[]>([
 </script>

 <template>
-  <Descriptions :schema="schema" :data="currentRow || {}">
-    <template #importance="{ row }: { row: TableData }">
-      <ElTag :type="row.importance === 1 ? 'success' : row.importance === 2 ? 'warning' : 'danger'">
-        {{
-          row.importance === 1
-            ? t('tableDemo.important')
-            : row.importance === 2
-            ? t('tableDemo.good')
-            : t('tableDemo.commonly')
-        }}
-      </ElTag>
-    </template>
-
-    <template #content="{ row }: { row: TableData }">
-      <div v-html="row.content"></div>
-    </template>
-  </Descriptions>
+  <Descriptions :schema="schema" :data="currentRow || {}" />
 </template>