feat: add useCrudSchemas hook

src/views/Example/Dialog/ExampleDialog.vue

@@ -8,9 +8,10 @@ import { Table } from '@/components/Table'
 import { getTableListApi, saveTableApi, delTableListApi } from '@/api/table'
 import { useTable } from '@/hooks/web/useTable'
 import { TableData } from '@/api/table/types'
-import { h, reactive, ref, unref } from 'vue'
+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'
 
 const { register, tableObject, methods } = useTable<
   {
@@ -33,24 +34,32 @@ getList()
 
 const { t } = useI18n()
 
-const searchData: FormSchema[] = [
-  {
-    label: t('exampleDemo.title'),
-    value: '',
-    component: 'Input',
-    field: 'title'
-  }
-]
-
-const columns = reactive<TableColumn[]>([
+const crudSchemas = reactive<CrudSchema[]>([
   {
     field: 'index',
     label: t('tableDemo.index'),
-    type: 'index'
+    type: 'index',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
   },
   {
     field: 'title',
-    label: t('tableDemo.title')
+    label: t('tableDemo.title'),
+    search: {
+      show: true
+    },
+    form: {
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
+    }
   },
   {
     field: 'author',
@@ -58,7 +67,14 @@ const columns = reactive<TableColumn[]>([
   },
   {
     field: 'display_time',
-    label: t('tableDemo.displayTime')
+    label: t('tableDemo.displayTime'),
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'datetime',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
+    }
   },
   {
     field: 'importance',
@@ -76,19 +92,66 @@ const columns = reactive<TableColumn[]>([
             ? t('tableDemo.good')
             : t('tableDemo.commonly')
       )
+    },
+    form: {
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '重要',
+            value: 3
+          },
+          {
+            label: '良好',
+            value: 2
+          },
+          {
+            label: '一般',
+            value: 1
+          }
+        ]
+      }
     }
   },
   {
     field: 'pageviews',
-    label: t('tableDemo.pageviews')
+    label: t('tableDemo.pageviews'),
+    form: {
+      component: 'InputNumber',
+      value: 0
+    }
+  },
+  {
+    field: 'content',
+    label: t('exampleDemo.content'),
+    table: {
+      show: false
+    },
+    form: {
+      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
+    }
   }
 ])
 
+const { allSchemas } = useCrudSchemas(crudSchemas)
+
 const dialogVisible = ref(false)
 
 const dialogTitle = ref('')
@@ -152,7 +215,7 @@ const save = async () => {
 
 <template>
   <ContentWrap>
-    <Search :schema="searchData" @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>
@@ -164,7 +227,7 @@ const save = async () => {
     <Table
       v-model:pageSize="tableObject.pageSize"
       v-model:currentPage="tableObject.currentPage"
-      :columns="columns"
+      :columns="allSchemas.tableColumns"
       :data="tableObject.tableList"
       :loading="tableObject.loading"
       :pagination="{
@@ -187,9 +250,18 @@ const save = async () => {
   </ContentWrap>
 
   <Dialog v-model="dialogVisible" :title="dialogTitle">
-    <Write v-if="actionType !== 'detail'" ref="writeRef" :current-row="tableObject.currentRow" />
+    <Write
+      v-if="actionType !== 'detail'"
+      ref="writeRef"
+      :form-schema="allSchemas.formSchema"
+      :current-row="tableObject.currentRow"
+    />
 
-    <Detail v-if="actionType === 'detail'" :current-row="tableObject.currentRow" />
+    <Detail
+      v-if="actionType === 'detail'"
+      :detail-schema="allSchemas.detailSchema"
+      :current-row="tableObject.currentRow"
+    />
 
     <template #footer>
       <ElButton v-if="actionType !== 'detail'" type="primary" :loading="loading" @click="save">

src/views/Example/Dialog/components/Detail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PropType, reactive } from 'vue'
+import { PropType } from 'vue'
 import type { TableData } from '@/api/table/types'
 import { Descriptions } from '@/components/Descriptions'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -11,41 +11,16 @@ defineProps({
   currentRow: {
     type: Object as PropType<Nullable<TableData>>,
     default: () => null
+  },
+  detailSchema: {
+    type: Array as PropType<DescriptionsSchema[]>,
+    default: () => []
   }
 })
-
-const schema = reactive<DescriptionsSchema[]>([
-  {
-    field: 'title',
-    label: t('exampleDemo.title'),
-    span: 24
-  },
-  {
-    field: 'author',
-    label: t('exampleDemo.author')
-  },
-  {
-    field: 'display_time',
-    label: t('exampleDemo.displayTime')
-  },
-  {
-    field: 'importance',
-    label: t('exampleDemo.importance')
-  },
-  {
-    field: 'pageviews',
-    label: t('exampleDemo.pageviews')
-  },
-  {
-    field: 'content',
-    label: t('exampleDemo.content'),
-    span: 24
-  }
-])
 </script>
 
 <template>
-  <Descriptions :schema="schema" :data="currentRow || {}">
+  <Descriptions :schema="detailSchema" :data="currentRow || {}">
     <template #importance="{ row }: { row: TableData }">
       <ElTag :type="row.importance === 1 ? 'success' : row.importance === 2 ? 'warning' : 'danger'">
         {{

src/views/Example/Dialog/components/Write.vue

@@ -3,103 +3,19 @@ import { Form } 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 { required } from '@/utils/formRules'
-import { IDomEditor } from '@wangeditor/editor'
 
 const props = defineProps({
   currentRow: {
     type: Object as PropType<Nullable<TableData>>,
     default: () => null
+  },
+  formSchema: {
+    type: Array as PropType<FormSchema[]>,
+    default: () => []
   }
 })
 
-const { t } = useI18n()
-
-const schema = reactive<FormSchema[]>([
-  {
-    field: 'title',
-    label: t('exampleDemo.title'),
-    component: 'Input',
-    formItemProps: {
-      rules: [required]
-    },
-    colProps: {
-      span: 24
-    }
-  },
-  {
-    field: 'author',
-    label: t('exampleDemo.author'),
-    component: 'Input',
-    formItemProps: {
-      rules: [required]
-    }
-  },
-  {
-    field: 'display_time',
-    label: t('exampleDemo.displayTime'),
-    component: 'DatePicker',
-    componentProps: {
-      type: 'datetime',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss'
-    },
-    formItemProps: {
-      rules: [required]
-    }
-  },
-  {
-    field: 'importance',
-    label: t('exampleDemo.importance'),
-    component: 'Select',
-    formItemProps: {
-      rules: [required]
-    },
-    componentProps: {
-      options: [
-        {
-          label: '重要',
-          value: 3
-        },
-        {
-          label: '良好',
-          value: 2
-        },
-        {
-          label: '一般',
-          value: 1
-        }
-      ]
-    }
-  },
-  {
-    field: 'pageviews',
-    label: t('exampleDemo.pageviews'),
-    component: 'InputNumber',
-    value: 0,
-    formItemProps: {
-      rules: [required]
-    }
-  },
-  {
-    field: 'content',
-    component: 'Editor',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      defaultHtml: '',
-      onChange: (edit: IDomEditor) => {
-        const { setValues } = methods
-        setValues({
-          content: edit.getHtml()
-        })
-      }
-    },
-    label: t('exampleDemo.content')
-  }
-])
-
 const rules = reactive({
   title: [required],
   author: [required],
@@ -110,22 +26,15 @@ const rules = reactive({
 })
 
 const { register, methods, elFormRef } = useForm({
-  schema
+  schema: props.formSchema
 })
 
 watch(
   () => props.currentRow,
   (currentRow) => {
     if (!currentRow) return
-    const { setValues, setSchema } = methods
+    const { setValues } = methods
     setValues(currentRow)
-    setSchema([
-      {
-        field: 'content',
-        path: 'componentProps.defaultHtml',
-        value: currentRow.content
-      }
-    ])
   },
   {
     deep: true,