feat: add useCrudSchemas hook

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,