feat: 新增 useCrudSchemas demo

mock/role/index.ts

@@ -345,15 +345,15 @@ const adminList = [
         meta: {
           title: 'useValidator'
         }
+      },
+      {
+        path: 'useCrudSchemas',
+        component: 'views/hooks/useCrudSchemas',
+        name: 'UseCrudSchemas',
+        meta: {
+          title: 'useCrudSchemas'
+        }
       }
-      // {
-      //   path: 'useCrudSchemas',
-      //   component: 'views/hooks/useCrudSchemas',
-      //   name: 'UseCrudSchemas',
-      //   meta: {
-      //     title: 'useCrudSchemas'
-      //   }
-      // }
     ]
   },
   {
@@ -616,7 +616,7 @@ const testList: string[] = [
   '/hooks/useWatermark',
   '/hooks/useTagsView',
   '/hooks/useValidator',
-  // '/hooks/useCrudSchemas',
+  '/hooks/useCrudSchemas',
   '/level',
   '/level/menu1',
   '/level/menu1/menu1-1',

src/components/JsonEditor/src/JsonEditor.vue

@@ -17,7 +17,7 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
-  deep: propTypes.number.def(1),
+  deep: propTypes.number.def(5),
   showLength: propTypes.bool.def(true),
   showLineNumbers: propTypes.bool.def(true),
   showLineNumber: propTypes.bool.def(true),

src/router/index.ts

@@ -387,15 +387,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: 'useValidator'
         }
+      },
+      {
+        path: 'useCrudSchemas',
+        component: () => import('@/views/hooks/useCrudSchemas.vue'),
+        name: 'UseCrudSchemas',
+        meta: {
+          title: 'useCrudSchemas'
+        }
       }
-      // {
-      //   path: 'useCrudSchemas',
-      //   component: () => import('@/views/hooks/useCrudSchemas.vue'),
-      //   name: 'UseCrudSchemas',
-      //   meta: {
-      //     title: 'useCrudSchemas'
-      //   }
-      // }
     ]
   },
   {

src/views/hooks/useCrudSchemas.vue

@@ -1,223 +1,186 @@
 <script setup lang="ts">
-// 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 { getTableListApi, delTableListApi } from '@/api/table'
-// import { useTable } from '@/hooks/web/useTable'
-// import { TableData } from '@/api/table/types'
-// import { h, ref, reactive } from 'vue'
-// import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
-// import { useDictStore } from '@/store/modules/dict'
-// import { getDictOneApi } from '@/api/common'
-// import { TableColumn } from '@/types/table'
+import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { useI18n } from '@/hooks/web/useI18n'
+import { reactive } from 'vue'
+import { JsonEditor } from '@/components/JsonEditor'
+import { ContentWrap } from '@/components/ContentWrap'
+import { ElRow, ElCol } from 'element-plus'
 
-// const dictStore = useDictStore()
+const { t } = useI18n()
 
-// const { register, tableObject, methods } = useTable<TableData>({
-//   getListApi: getTableListApi,
-//   delListApi: delTableListApi,
-//   response: {
-//     list: 'list',
-//     total: 'total'
-//   }
-// })
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    field: 'selection',
+    search: {
+      hidden: true
+    },
+    form: {
+      hidden: true
+    },
+    detail: {
+      hidden: true
+    },
+    table: {
+      type: 'selection'
+    }
+  },
+  {
+    field: 'index',
+    label: t('tableDemo.index'),
+    type: 'index',
+    search: {
+      hidden: true
+    },
+    form: {
+      hidden: true
+    },
+    detail: {
+      hidden: true
+    }
+  },
+  {
+    field: 'title',
+    label: t('tableDemo.title'),
+    search: {
+      component: 'Input'
+    },
+    form: {
+      component: 'Input',
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
+    }
+  },
+  {
+    field: 'author',
+    label: t('tableDemo.author'),
+    search: {
+      hidden: true
+    }
+  },
+  {
+    field: 'display_time',
+    label: t('tableDemo.displayTime'),
+    search: {
+      hidden: true
+    },
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'datetime',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
+    }
+  },
+  {
+    field: 'importance',
+    label: t('tableDemo.importance'),
+    search: {
+      hidden: true
+    },
+    form: {
+      component: 'Select',
+      componentProps: {
+        style: {
+          width: '100%'
+        },
+        options: [
+          {
+            label: '重要',
+            value: 3
+          },
+          {
+            label: '良好',
+            value: 2
+          },
+          {
+            label: '一般',
+            value: 1
+          }
+        ]
+      }
+    }
+  },
+  {
+    field: 'pageviews',
+    label: t('tableDemo.pageviews'),
+    search: {
+      hidden: true
+    },
+    form: {
+      component: 'InputNumber',
+      value: 0
+    }
+  },
+  {
+    field: 'content',
+    label: t('exampleDemo.content'),
+    search: {
+      hidden: true
+    },
+    table: {
+      show: false
+    },
+    form: {
+      component: 'Editor',
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
+    }
+  },
+  {
+    field: 'action',
+    width: '260px',
+    label: t('tableDemo.action'),
+    search: {
+      hidden: true
+    },
+    form: {
+      hidden: true
+    },
+    detail: {
+      hidden: true
+    }
+  }
+])
 
-// const { getList, setSearchParams } = methods
-
-// getList()
-
-// const { t } = useI18n()
-
-// const crudSchemas = reactive<CrudSchema[]>([
-//   {
-//     field: 'index',
-//     label: t('tableDemo.index'),
-//     type: 'index',
-//     form: {
-//       show: false
-//     },
-//     detail: {
-//       show: false
-//     }
-//   },
-//   {
-//     field: 'title',
-//     label: t('tableDemo.title'),
-//     search: {
-//       show: true
-//     },
-//     form: {
-//       colProps: {
-//         span: 24
-//       }
-//     },
-//     detail: {
-//       span: 24
-//     }
-//   },
-//   {
-//     field: 'author',
-//     label: t('tableDemo.author')
-//   },
-//   {
-//     field: 'display_time',
-//     label: t('tableDemo.displayTime'),
-//     form: {
-//       component: 'DatePicker',
-//       componentProps: {
-//         type: 'datetime',
-//         valueFormat: 'YYYY-MM-DD HH:mm:ss'
-//       }
-//     }
-//   },
-//   {
-//     field: 'importance',
-//     label: t('tableDemo.importance'),
-//     formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
-//       return h(
-//         ElTag,
-//         {
-//           type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
-//         },
-//         () =>
-//           cellValue === 1
-//             ? t('tableDemo.important')
-//             : cellValue === 2
-//             ? t('tableDemo.good')
-//             : t('tableDemo.commonly')
-//       )
-//     },
-//     search: {
-//       show: true,
-//       component: 'Select',
-//       componentProps: {
-//         options: dictStore.getDictObj.importance
-//       }
-//     },
-//     form: {
-//       component: 'Select',
-//       componentProps: {
-//         options: [
-//           {
-//             label: '重要',
-//             value: 3
-//           },
-//           {
-//             label: '良好',
-//             value: 2
-//           },
-//           {
-//             label: '一般',
-//             value: 1
-//           }
-//         ]
-//       }
-//     }
-//   },
-//   {
-//     field: 'importance2',
-//     label: `${t('tableDemo.importance')}2`,
-//     search: {
-//       show: true,
-//       component: 'Select',
-//       dictName: 'importance'
-//     }
-//   },
-//   {
-//     field: 'importance3',
-//     label: `${t('tableDemo.importance')}3`,
-//     search: {
-//       show: true,
-//       component: 'Select',
-//       api: async () => {
-//         const res = await getDictOneApi()
-//         return res.data
-//       }
-//     }
-//   },
-//   {
-//     field: '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'),
-//     form: {
-//       show: false
-//     },
-//     detail: {
-//       show: false
-//     }
-//   }
-// ])
-
-// const { allSchemas } = useCrudSchemas(crudSchemas)
-
-// const delLoading = ref(false)
-
-// const delData = async (row: TableData | null, multiple: boolean) => {
-//   tableObject.currentRow = row
-//   const { delList, getSelections } = methods
-//   const selections = await getSelections()
-//   delLoading.value = true
-//   await delList(
-//     multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
-//     multiple
-//   ).finally(() => {
-//     delLoading.value = false
-//   })
-// }
+const { allSchemas } = useCrudSchemas(crudSchemas)
 </script>
 
 <template>
-  <ContentWrap>
-    <!-- <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-
-    <div class="mb-10px">
-      <ElButton :loading="delLoading" type="danger" @click="delData(null, true)">
-        {{ t('exampleDemo.del') }}
-      </ElButton>
-    </div>
-
-    <Table
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      :columns="allSchemas.tableColumns"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      @register="register"
-    >
-      <template #action="{ row }">
-        <ElButton type="danger" @click="delData(row, false)">
-          {{ t('exampleDemo.del') }}
-        </ElButton>
-      </template>
-    </Table> -->
+  <ContentWrap title="useCrudSchemas">
+    <ElRow :gutter="20">
+      <ElCol :span="24">
+        <ContentWrap title="原始数据数据" class="mt-20px">
+          <JsonEditor v-model="crudSchemas" />
+        </ContentWrap>
+      </ElCol>
+      <ElCol :span="24">
+        <ContentWrap title="查询组件数据结构" class="mt-20px">
+          <JsonEditor v-model="allSchemas.searchSchema" />
+        </ContentWrap>
+      </ElCol>
+      <ElCol :span="24">
+        <ContentWrap title="表单组件数据结构" class="mt-20px">
+          <JsonEditor v-model="allSchemas.formSchema" />
+        </ContentWrap>
+      </ElCol>
+      <ElCol :span="24">
+        <ContentWrap title="表格组件数据结构" class="mt-20px">
+          <JsonEditor v-model="allSchemas.tableColumns" />
+        </ContentWrap>
+      </ElCol>
+      <ElCol :span="24">
+        <ContentWrap title="表格组件数据结构" class="mt-20px">
+          <JsonEditor v-model="allSchemas.detailSchema" />
+        </ContentWrap>
+      </ElCol>
+    </ElRow>
   </ContentWrap>
 </template>