224 lines
5.3 KiB
Vue
224 lines
5.3 KiB
Vue
<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'
|
|
|
|
// 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>
|