perf: add useCrudSchemas demo
kailong321200875
3 years ago
parent
43e3dcce8a
commit
ca3ce54630
@ -0,0 +1,222 @@
|
||||
<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'
|
||||
|
||||
const dictStore = useDictStore()
|
||||
|
||||
const { register, tableObject, methods } = useTable<TableData>({
|
||||
getListApi: getTableListApi,
|
||||
delListApi: delTableListApi,
|
||||
response: {
|
||||
list: 'list',
|
||||
total: 'total'
|
||||
}
|
||||
})
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
</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>
|
||||
</template>
|
||||
Loading…
Reference in New Issue