|
|
@@ -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>
|
kailong321200875