feat: 综合示例重构

2023-07-23 15:15:28 +08:00
parent c181887f7f
commit 9a0259de5c
16 changed files with 510 additions and 451 deletions
--- a/src/views/Example/Dialog/ExampleDialog.vue
+++ b/src/views/Example/Dialog/ExampleDialog.vue
@@ -1,10 +1,10 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { ContentWrap } from '@/components/ContentWrap'
 import { Search } from '@/components/Search'
 import { Dialog } from '@/components/Dialog'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElButton, ElTag } from 'element-plus'
-import { Table } from '@/components/Table'
+import { Table, TableColumn } from '@/components/Table'
 import { getTableListApi, saveTableApi, delTableListApi } from '@/api/table'
 import { useTable } from '@/hooks/web/useTable'
 import { TableData } from '@/api/table/types'
@@ -12,27 +12,51 @@ import { h, ref, unref, reactive } from 'vue'
 import Write from './components/Write.vue'
 import Detail from './components/Detail.vue'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
-import { TableColumn } from '@/types/table'

-const { register, tableObject, methods } = useTable<TableData>({
-  getListApi: getTableListApi,
-  delListApi: delTableListApi,
-  response: {
-    list: 'list',
-    total: 'total'
+const ids = ref<string[]>([])
+
+const { tableRegister, tableState, tableMethods } = useTable({
+  fetchDataApi: async () => {
+    const { currentPage, pageSize } = tableState
+    const res = await getTableListApi({
+      pageIndex: unref(currentPage),
+      pageSize: unref(pageSize),
+      ...unref(searchParams)
+    })
+    return {
+      list: res.data.list,
+      total: res.data.total
+    }
  },
-  defaultParams: {
-    title: 's'
+  fetchDelApi: async () => {
+    const res = await delTableListApi(unref(ids))
+    return !!res
  }
 })
+const { loading, dataList, total, currentPage, pageSize } = tableState
+const { getList, getElTableExpose, delList } = tableMethods

-const { getList, setSearchParams } = methods
-
-getList()
+const searchParams = ref({})
+const setSearchParams = (params: any) => {
+  searchParams.value = params
+  getList()
+}

 const { t } = useI18n()

 const crudSchemas = reactive<CrudSchema[]>([
+  {
+    field: 'selection',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    },
+    table: {
+      type: 'selection'
+    }
+  },
  {
    field: 'index',
    label: t('tableDemo.index'),
@@ -48,9 +72,12 @@ const crudSchemas = reactive<CrudSchema[]>([
    field: 'title',
    label: t('tableDemo.title'),
    search: {
-      show: true
+      show: true,
+      component: 'Input'
    },
    form: {
+      show: true,
+      component: 'Input',
      colProps: {
        span: 24
      }
@@ -67,6 +94,7 @@ const crudSchemas = reactive<CrudSchema[]>([
    field: 'display_time',
    label: t('tableDemo.displayTime'),
    form: {
+      show: true,
      component: 'DatePicker',
      componentProps: {
        type: 'datetime',
@@ -92,6 +120,7 @@ const crudSchemas = reactive<CrudSchema[]>([
      )
    },
    form: {
+      show: true,
      component: 'Select',
      componentProps: {
        style: {
@@ -112,12 +141,32 @@ const crudSchemas = reactive<CrudSchema[]>([
          }
        ]
      }
+    },
+    detail: {
+      slots: {
+        default: (data: any) => {
+          return (
+            <ElTag
+              type={
+                data.importance === 1 ? 'success' : data.importance === 2 ? 'warning' : 'danger'
+              }
+            >
+              {data.importance === 1
+                ? t('tableDemo.important')
+                : data.importance === 2
+                ? t('tableDemo.good')
+                : t('tableDemo.commonly')}
+            </ElTag>
+          )
+        }
+      }
    }
  },
  {
    field: 'pageviews',
    label: t('tableDemo.pageviews'),
    form: {
+      show: true,
      component: 'InputNumber',
      value: 0
    }
@@ -129,13 +178,19 @@ const crudSchemas = reactive<CrudSchema[]>([
      show: false
    },
    form: {
+      show: true,
      component: 'Editor',
      colProps: {
        span: 24
      }
    },
    detail: {
-      span: 24
+      span: 24,
+      slots: {
+        default: (data: any) => {
+          return <div innerHTML={data.content}></div>
+        }
+      }
    }
  },
  {
@@ -147,115 +202,108 @@ const crudSchemas = reactive<CrudSchema[]>([
    },
    detail: {
      show: false
+    },
+    table: {
+      slots: {
+        default: (data: any) => {
+          return (
+            <>
+              <ElButton type="primary" onClick={() => action(data[0].row, 'edit')}>
+                {t('exampleDemo.edit')}
+              </ElButton>
+              <ElButton type="success" onClick={() => action(data[0].row, 'detail')}>
+                {t('exampleDemo.detail')}
+              </ElButton>
+              <ElButton type="danger" onClick={() => delData(data[0].row)}>
+                {t('exampleDemo.del')}
+              </ElButton>
+            </>
+          )
+        }
+      }
    }
  }
 ])

+// @ts-ignore
 const { allSchemas } = useCrudSchemas(crudSchemas)

 const dialogVisible = ref(false)
-
 const dialogTitle = ref('')

+const currentRow = ref<TableData | null>(null)
+const actionType = ref('')
+
 const AddAction = () => {
  dialogTitle.value = t('exampleDemo.add')
-  tableObject.currentRow = null
+  currentRow.value = null
  dialogVisible.value = true
  actionType.value = ''
 }

 const delLoading = ref(false)

-const delData = async (row: TableData | null, multiple: boolean) => {
-  tableObject.currentRow = row
-  const { delList, getSelections } = methods
-  const selections = await getSelections()
+const delData = async (row: TableData | null) => {
+  const elTableExpose = await getElTableExpose()
+  ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v: TableData) => v.id) || []
  delLoading.value = true
-  await delList(
-    multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
-    multiple
-  ).finally(() => {
+  await delList(unref(ids).length).finally(() => {
    delLoading.value = false
  })
 }

-const actionType = ref('')
-
 const action = (row: TableData, type: string) => {
  dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
  actionType.value = type
-  tableObject.currentRow = row
+  currentRow.value = row
  dialogVisible.value = true
 }

 const writeRef = ref<ComponentRef<typeof Write>>()

-const loading = ref(false)
+const saveLoading = ref(false)

 const save = async () => {
  const write = unref(writeRef)
-  await write?.elFormRef?.validate(async (isValid) => {
-    if (isValid) {
-      loading.value = true
-      const data = (await write?.getFormData()) as TableData
-      const res = await saveTableApi(data)
-        .catch(() => {})
-        .finally(() => {
-          loading.value = false
-        })
-      if (res) {
-        dialogVisible.value = false
-        tableObject.currentPage = 1
-        getList()
-      }
+  const formData = await write?.submit()
+  if (formData) {
+    saveLoading.value = true
+    const res = await saveTableApi(formData)
+      .catch(() => {})
+      .finally(() => {
+        saveLoading.value = false
+      })
+    if (res) {
+      dialogVisible.value = false
+      currentPage.value = 1
+      getList()
    }
-  })
+  }
 }
 </script>

 <template>
  <ContentWrap>
-    <Search
-      :model="{ title: 's' }"
-      :schema="allSchemas.searchSchema"
-      @search="setSearchParams"
-      @reset="setSearchParams"
-    />
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />

    <div class="mb-10px">
      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
-      <ElButton :loading="delLoading" type="danger" @click="delData(null, true)">
+      <ElButton :loading="delLoading" type="danger" @click="delData(null)">
        {{ t('exampleDemo.del') }}
      </ElButton>
    </div>

    <Table
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
+      v-model:pageSize="pageSize"
+      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
+      :data="dataList"
+      :loading="loading"
      :pagination="{
-        total: tableObject.total
+        total: total
      }"
-      @register="register"
-    >
-      <template #action="{ row }">
-        <ElButton type="primary" v-hasPermi="['example:dialog:edit']" @click="action(row, 'edit')">
-          {{ t('exampleDemo.edit') }}
-        </ElButton>
-        <ElButton
-          type="success"
-          v-hasPermi="['example:dialog:view']"
-          @click="action(row, 'detail')"
-        >
-          {{ t('exampleDemo.detail') }}
-        </ElButton>
-        <ElButton type="danger" v-hasPermi="['example:dialog:delete']" @click="delData(row, false)">
-          {{ t('exampleDemo.del') }}
-        </ElButton>
-      </template>
-    </Table>
+      @register="tableRegister"
+    />
  </ContentWrap>

  <Dialog v-model="dialogVisible" :title="dialogTitle">
@@ -263,17 +311,17 @@ const save = async () => {
      v-if="actionType !== 'detail'"
      ref="writeRef"
      :form-schema="allSchemas.formSchema"
-      :current-row="tableObject.currentRow"
+      :current-row="currentRow"
    />

    <Detail
      v-if="actionType === 'detail'"
      :detail-schema="allSchemas.detailSchema"
-      :current-row="tableObject.currentRow"
+      :current-row="currentRow"
    />

    <template #footer>
-      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="loading" @click="save">
+      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
        {{ t('exampleDemo.save') }}
      </ElButton>
      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
--- a/src/views/Example/Dialog/components/Detail.vue
+++ b/src/views/Example/Dialog/components/Detail.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import type { TableData } from '@/api/table/types'
-import { Descriptions } from '@/components/Descriptions'
+import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElTag } from 'element-plus'
-import { DescriptionsSchema } from '@/types/descriptions'

 const { t } = useI18n()

--- a/src/views/Example/Dialog/components/Write.vue
+++ b/src/views/Example/Dialog/components/Write.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { Form } from '@/components/Form'
+import { Form, FormSchema } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
 import { PropType, reactive, watch } from 'vue'
 import { TableData } from '@/api/table/types'
 import { useValidator } from '@/hooks/web/useValidator'
-import { FormSchema } from '@/types/form'

 const { required } = useValidator()

@@ -28,15 +27,24 @@ const rules = reactive({
  content: [required()]
 })

-const { register, methods, elFormRef } = useForm({
-  schema: props.formSchema
-})
+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
-    const { setValues } = methods
    setValues(currentRow)
  },
  {
@@ -46,11 +54,10 @@ watch(
 )

 defineExpose({
-  elFormRef,
-  getFormData: methods.getFormData
+  submit
 })
 </script>

 <template>
-  <Form :rules="rules" @register="register" />
+  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
 </template>
--- a/src/views/Example/Page/ExampleAdd.vue
+++ b/src/views/Example/Page/ExampleAdd.vue
@@ -6,12 +6,11 @@ import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter } from 'vue-router'
 import { saveTableApi } from '@/api/table'
-import { TableData } from '@/api/table/types'
 import { useEmitt } from '@/hooks/web/useEmitt'

 const { emitter } = useEmitt()

-const { push } = useRouter()
+const { push, go } = useRouter()

 const { t } = useI18n()

@@ -21,21 +20,19 @@ const loading = ref(false)

 const save = async () => {
  const write = unref(writeRef)
-  await write?.elFormRef?.validate(async (isValid) => {
-    if (isValid) {
-      loading.value = true
-      const data = (await write?.getFormData()) as TableData
-      const res = await saveTableApi(data)
-        .catch(() => {})
-        .finally(() => {
-          loading.value = false
-        })
-      if (res) {
-        emitter.emit('getList', 'add')
-        push('/example/example-page')
-      }
+  const formData = await write?.submit()
+  if (formData) {
+    loading.value = true
+    const res = await saveTableApi(formData)
+      .catch(() => {})
+      .finally(() => {
+        loading.value = false
+      })
+    if (res) {
+      emitter.emit('getList', 'add')
+      push('/example/example-page')
    }
-  })
+  }
 }
 </script>

@@ -43,7 +40,10 @@ const save = async () => {
  <ContentDetailWrap :title="t('exampleDemo.add')" @back="push('/example/example-page')">
    <Write ref="writeRef" />

-    <template #right>
+    <template #header>
+      <ElButton @click="go(-1)">
+        {{ t('common.back') }}
+      </ElButton>
      <ElButton type="primary" :loading="loading" @click="save">
        {{ t('exampleDemo.save') }}
      </ElButton>
--- a/src/views/Example/Page/ExampleDetail.vue
+++ b/src/views/Example/Page/ExampleDetail.vue
@@ -6,8 +6,9 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter, useRoute } from 'vue-router'
 import { getTableDetApi } from '@/api/table'
 import { TableData } from '@/api/table/types'
+import { ElButton } from 'element-plus'

-const { push } = useRouter()
+const { push, go } = useRouter()

 const { query } = useRoute()

@@ -27,6 +28,11 @@ getTableDet()

 <template>
  <ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')">
+    <template #header>
+      <ElButton @click="go(-1)">
+        {{ t('common.back') }}
+      </ElButton>
+    </template>
    <Detail :current-row="currentRow" />
  </ContentDetailWrap>
 </template>
--- a/src/views/Example/Page/ExampleEdit.vue
+++ b/src/views/Example/Page/ExampleEdit.vue
@@ -11,7 +11,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'

 const { emitter } = useEmitt()

-const { push } = useRouter()
+const { push, go } = useRouter()

 const { query } = useRoute()

@@ -34,17 +34,16 @@ const loading = ref(false)

 const save = async () => {
  const write = unref(writeRef)
-  const validate = await write?.elFormRef?.validate()?.catch(() => {})
-  if (validate) {
+  const formData = await write?.submit()
+  if (formData) {
    loading.value = true
-    const data = (await write?.getFormData()) as TableData
-    const res = await saveTableApi(data)
+    const res = await saveTableApi(formData)
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })
    if (res) {
-      emitter.emit('getList', 'edit')
+      emitter.emit('getList', 'editor')
      push('/example/example-page')
    }
  }
@@ -55,7 +54,10 @@ const save = async () => {
  <ContentDetailWrap :title="t('exampleDemo.edit')" @back="push('/example/example-page')">
    <Write ref="writeRef" :current-row="currentRow" />

-    <template #right>
+    <template #header>
+      <ElButton @click="go(-1)">
+        {{ t('common.back') }}
+      </ElButton>
      <ElButton type="primary" :loading="loading" @click="save">
        {{ t('exampleDemo.save') }}
      </ElButton>
--- a/src/views/Example/Page/ExamplePage.vue
+++ b/src/views/Example/Page/ExamplePage.vue
@@ -1,17 +1,16 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { ContentWrap } from '@/components/ContentWrap'
 import { Search } from '@/components/Search'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElButton, ElTag } from 'element-plus'
-import { Table } from '@/components/Table'
+import { Table, TableColumn } from '@/components/Table'
 import { getTableListApi, delTableListApi } from '@/api/table'
 import { useTable } from '@/hooks/web/useTable'
 import { TableData } from '@/api/table/types'
-import { h, reactive, ref } from 'vue'
+import { h, reactive, ref, unref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
-import { TableColumn } from '@/types/table'

 defineOptions({
  name: 'ExamplePage'
@@ -19,16 +18,34 @@ defineOptions({

 const { push } = useRouter()

-const { register, tableObject, methods } = useTable<TableData>({
-  getListApi: getTableListApi,
-  delListApi: delTableListApi,
-  response: {
-    list: 'list',
-    total: 'total'
+const ids = ref<string[]>([])
+
+const searchParams = ref({})
+const setSearchParams = (params: any) => {
+  searchParams.value = params
+  getList()
+}
+
+const { tableRegister, tableState, tableMethods } = useTable({
+  fetchDataApi: async () => {
+    const { currentPage, pageSize } = tableState
+    const res = await getTableListApi({
+      pageIndex: unref(currentPage),
+      pageSize: unref(pageSize),
+      ...unref(searchParams)
+    })
+    return {
+      list: res.data.list,
+      total: res.data.total
+    }
+  },
+  fetchDelApi: async () => {
+    const res = await delTableListApi(unref(ids))
+    return !!res
  }
 })
-
-const { getList, setSearchParams } = methods
+const { loading, dataList, total, currentPage, pageSize } = tableState
+const { getList, getElTableExpose, delList } = tableMethods

 getList()

@@ -36,7 +53,7 @@ useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
-      tableObject.currentPage = 1
+      currentPage.value = 1
    }
    getList()
  }
@@ -45,16 +62,45 @@ useEmitt({
 const { t } = useI18n()

 const crudSchemas = reactive<CrudSchema[]>([
+  {
+    field: 'selection',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    },
+    table: {
+      type: 'selection'
+    }
+  },
  {
    field: 'index',
    label: t('tableDemo.index'),
-    type: 'index'
+    type: 'index',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
  },
  {
    field: 'title',
    label: t('tableDemo.title'),
    search: {
-      show: true
+      show: true,
+      component: 'Input'
+    },
+    form: {
+      show: true,
+      component: 'Input',
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
    }
  },
  {
@@ -63,7 +109,15 @@ const crudSchemas = reactive<CrudSchema[]>([
  },
  {
    field: 'display_time',
-    label: t('tableDemo.displayTime')
+    label: t('tableDemo.displayTime'),
+    form: {
+      show: true,
+      component: 'DatePicker',
+      componentProps: {
+        type: 'datetime',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
+    }
  },
  {
    field: 'importance',
@@ -81,26 +135,90 @@ const crudSchemas = reactive<CrudSchema[]>([
            ? t('tableDemo.good')
            : t('tableDemo.commonly')
      )
+    },
+    form: {
+      show: true,
+      component: 'Select',
+      componentProps: {
+        style: {
+          width: '100%'
+        },
+        options: [
+          {
+            label: '重要',
+            value: 3
+          },
+          {
+            label: '良好',
+            value: 2
+          },
+          {
+            label: '一般',
+            value: 1
+          }
+        ]
+      }
    }
  },
  {
    field: 'pageviews',
-    label: t('tableDemo.pageviews')
+    label: t('tableDemo.pageviews'),
+    form: {
+      show: true,
+      component: 'InputNumber',
+      value: 0
+    }
  },
  {
    field: 'content',
    label: t('exampleDemo.content'),
    table: {
      show: false
+    },
+    form: {
+      show: true,
+      component: 'Editor',
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
    }
  },
  {
    field: 'action',
    width: '260px',
-    label: t('tableDemo.action')
+    label: t('tableDemo.action'),
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    },
+    table: {
+      slots: {
+        default: (data: any) => {
+          return (
+            <>
+              <ElButton type="primary" onClick={() => action(data[0].row, 'edit')}>
+                {t('exampleDemo.edit')}
+              </ElButton>
+              <ElButton type="success" onClick={() => action(data[0].row, 'detail')}>
+                {t('exampleDemo.detail')}
+              </ElButton>
+              <ElButton type="danger" onClick={() => delData(data[0].row)}>
+                {t('exampleDemo.del')}
+              </ElButton>
+            </>
+          )
+        }
+      }
+    }
  }
 ])

+// @ts-ignore
 const { allSchemas } = useCrudSchemas(crudSchemas)

 const AddAction = () => {
@@ -109,15 +227,11 @@ const AddAction = () => {

 const delLoading = ref(false)

-const delData = async (row: TableData | null, multiple: boolean) => {
-  tableObject.currentRow = row
-  const { delList, getSelections } = methods
-  const selections = await getSelections()
+const delData = async (row: TableData | null) => {
+  const elTableExpose = await getElTableExpose()
+  ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v: TableData) => v.id) || []
  delLoading.value = true
-  await delList(
-    multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
-    multiple
-  ).finally(() => {
+  await delList(unref(ids).length).finally(() => {
    delLoading.value = false
  })
 }
@@ -133,33 +247,21 @@ const action = (row: TableData, type: string) => {

    <div class="mb-10px">
      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
-      <ElButton :loading="delLoading" type="danger" @click="delData(null, true)">
+      <ElButton :loading="delLoading" type="danger" @click="delData(null)">
        {{ t('exampleDemo.del') }}
      </ElButton>
    </div>

    <Table
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
+      v-model:pageSize="pageSize"
+      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
+      :data="dataList"
+      :loading="loading"
      :pagination="{
-        total: tableObject.total
+        total: total
      }"
-      @register="register"
-    >
-      <template #action="{ row }">
-        <ElButton type="primary" @click="action(row, 'edit')">
-          {{ t('exampleDemo.edit') }}
-        </ElButton>
-        <ElButton type="success" @click="action(row, 'detail')">
-          {{ t('exampleDemo.detail') }}
-        </ElButton>
-        <ElButton type="danger" @click="delData(row, false)">
-          {{ t('exampleDemo.del') }}
-        </ElButton>
-      </template>
-    </Table>
+      @register="tableRegister"
+    />
  </ContentWrap>
 </template>
--- a/src/views/Example/Page/components/Detail.vue
+++ b/src/views/Example/Page/components/Detail.vue
@@ -1,10 +1,9 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { PropType, reactive } from 'vue'
 import type { TableData } from '@/api/table/types'
-import { Descriptions } from '@/components/Descriptions'
+import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElTag } from 'element-plus'
-import { DescriptionsSchema } from '@/types/descriptions'

 const { t } = useI18n()

@@ -31,7 +30,22 @@ const schema = reactive<DescriptionsSchema[]>([
  },
  {
    field: 'importance',
-    label: t('exampleDemo.importance')
+    label: t('exampleDemo.importance'),
+    slots: {
+      default: (data: any) => {
+        return (
+          <ElTag
+            type={data.importance === 1 ? 'success' : data.importance === 2 ? 'warning' : 'danger'}
+          >
+            {data.importance === 1
+              ? t('tableDemo.important')
+              : data.importance === 2
+              ? t('tableDemo.good')
+              : t('tableDemo.commonly')}
+          </ElTag>
+        )
+      }
+    }
  },
  {
    field: 'pageviews',
@@ -40,7 +54,12 @@ const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'content',
    label: t('exampleDemo.content'),
-    span: 24
+    span: 24,
+    slots: {
+      default: (data: any) => {
+        return <div innerHTML={data.content}></div>
+      }
+    }
  }
 ])
 </script>
--- a/src/views/Example/Page/components/Write.vue
+++ b/src/views/Example/Page/components/Write.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { Form } from '@/components/Form'
+import { Form, FormSchema } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
 import { PropType, reactive, watch } from 'vue'
 import { TableData } from '@/api/table/types'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useValidator } from '@/hooks/web/useValidator'
 import { IDomEditor } from '@wangeditor/editor'
-import { FormSchema } from '@/types/form'

 const { required } = useValidator()

@@ -19,6 +18,9 @@ const props = defineProps({

 const { t } = useI18n()

+const { formRegister, formMethods } = useForm()
+const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
+
 const schema = reactive<FormSchema[]>([
  {
    field: 'title',
@@ -92,8 +94,8 @@ const schema = reactive<FormSchema[]>([
    },
    componentProps: {
      defaultHtml: '',
+      // @ts-ignore
      onChange: (edit: IDomEditor) => {
-        const { setValues } = methods
        setValues({
          content: edit.getHtml()
        })
@@ -112,15 +114,21 @@ const rules = reactive({
  content: [required()]
 })

-const { register, methods, elFormRef } = useForm({
-  schema
-})
+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
-    const { setValues, setSchema } = methods
    setValues(currentRow)
    setSchema([
      {
@@ -137,11 +145,10 @@ watch(
 )

 defineExpose({
-  elFormRef,
-  getFormData: methods.getFormData
+  submit
 })
 </script>

 <template>
-  <Form :rules="rules" @register="register" />
+  <Form :rules="rules" @register="formRegister" :schema="schema" />
 </template>