refactor: table-v2

This commit is contained in:
xingyuv 2023-02-14 15:48:23 +08:00
parent 2ec6978400
commit 4a1a1ab297
5 changed files with 363 additions and 143 deletions

View File

@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@ -51,14 +52,10 @@ declare module '@vue/runtime-core' {
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
@ -69,11 +66,7 @@ declare module '@vue/runtime-core' {
ElTableV2: typeof import('element-plus/es')['ElTableV2']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTransfer: typeof import('element-plus/es')['ElTransfer']
ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
ElUpload: typeof import('element-plus/es')['ElUpload']
Error: typeof import('./../components/Error/src/Error.vue')['default']
FlowCondition: typeof import('./../components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue')['default']

View File

@ -3,6 +3,7 @@ export {}
declare global {
const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
const EffectScope: typeof import('vue')['EffectScope']
const ElButton: typeof import('element-plus/es')['ElButton']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']

View File

@ -1,148 +1,123 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 操作新增 -->
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:notice:create']"
@click="handleCreate()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['system:notice:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['system:notice:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['system:notice:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
ref="formRef"
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #content="{ row }">
<Editor :model-value="row.content" :readonly="true" />
</template>
</Descriptions>
<template #footer>
<!-- 按钮保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm()"
<el-form ref="searchForm" :model="queryParms" :inline="true">
<el-form-item label="公告标题">
<el-input v-model="queryParms.title" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParms.status">
<el-option label="全部" value="" />
<el-option label="开启" :value="1" />
<el-option label="关闭" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList">Query</el-button>
</el-form-item>
</el-form>
<div style="width: 100%; height: 500px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />
</template>
</el-auto-resizer>
<el-pagination
:current-page="queryParms.pageNo"
:page-size="queryParms.pageSize"
layout="total, prev, pager, next"
:total="tableTotal"
@size-change="getList"
@current-change="getList"
/>
<!-- 按钮关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</div>
</ContentWrap>
</template>
<script setup lang="ts" name="Notice">
import type { FormExpose } from '@/components/Form'
// import
<script setup lang="tsx">
import dayjs from 'dayjs'
import { Column, ElPagination, ElTableV2, TableV2FixedDir } from 'element-plus'
import * as NoticeApi from '@/api/system/notice'
import { rules, allSchemas } from './notice.data'
import { XTextButton } from '@/components/XButton'
const { t } = useI18n() //
const message = useMessage() //
//
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: NoticeApi.getNoticePageApi,
deleteApi: NoticeApi.deleteNoticeApi
const columns: Column<any>[] = [
{
key: 'id',
dataKey: 'id', //{id:9527,name:'Mike'}id
title: 'id', //
width: 80, //
fixed: true //
},
{
key: 'title',
dataKey: 'title',
title: '公告标题',
width: 180
},
{
key: 'type',
dataKey: 'type',
title: '公告类型',
width: 180
},
{
key: 'status',
dataKey: 'status',
title: t('common.status'),
width: 180
},
{
key: 'content',
dataKey: 'content',
title: '公告内容',
width: 400,
cellRenderer: ({ cellData: content }) => <span v-html={content}></span>
},
{
key: 'createTime',
dataKey: 'createTime',
title: t('common.createTime'),
width: 180,
cellRenderer: ({ cellData: createTime }) => (
<>{dayjs(createTime).format('YYYY-MM-DD HH:mm:ss')}</>
)
},
{
key: 'actionbtns',
dataKey: 'actionbtns', //{id:9527,name:'Mike'}id
title: '操作', //
width: 80, //
fixed: TableV2FixedDir.RIGHT, //
align: 'center',
cellRenderer: ({ cellData: id }) => (
<XTextButton
preIcon="ep:delete"
title={t('action.del')}
onClick={handleDelete.bind(this, id)}
></XTextButton>
)
}
]
const tableData = ref([])
const tableTotal = ref(0)
const queryParms = reactive({
title: '',
status: undefined,
pageNo: 1,
pageSize: 10
})
//
const dialogVisible = ref(false) //
const dialogTitle = ref('edit') //
const actionType = ref('') //
const actionLoading = ref(false) // Loading
const formRef = ref<FormExpose>() // Ref
const detailData = ref() // Ref
//
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
const getList = async () => {
const res = await NoticeApi.getNoticePageApi(queryParms)
tableData.value = res.list
tableTotal.value = res.total
}
//
const handleCreate = () => {
setDialogTile('create')
const handleDelete = (id) => {
console.info(id)
}
//
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
//
const res = await NoticeApi.getNoticeApi(rowId)
unref(formRef)?.setValues(res)
}
//
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
//
const res = await NoticeApi.getNoticeApi(rowId)
detailData.value = res
}
// /
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
//
try {
const data = unref(formRef)?.formModel as NoticeApi.NoticeVO
if (actionType.value === 'create') {
await NoticeApi.createNoticeApi(data)
message.success(t('common.createSuccess'))
} else {
await NoticeApi.updateNoticeApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
await reload()
}
}
})
}
getList()
</script>

View File

@ -0,0 +1,148 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 操作新增 -->
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:notice:create']"
@click="handleCreate()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['system:notice:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['system:notice:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['system:notice:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
ref="formRef"
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #content="{ row }">
<Editor :model-value="row.content" :readonly="true" />
</template>
</Descriptions>
<template #footer>
<!-- 按钮保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm()"
/>
<!-- 按钮关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="Notice">
import type { FormExpose } from '@/components/Form'
// import
import * as NoticeApi from '@/api/system/notice'
import { rules, allSchemas } from './notice.data'
const { t } = useI18n() //
const message = useMessage() //
//
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: NoticeApi.getNoticePageApi,
deleteApi: NoticeApi.deleteNoticeApi
})
//
const dialogVisible = ref(false) //
const dialogTitle = ref('edit') //
const actionType = ref('') //
const actionLoading = ref(false) // Loading
const formRef = ref<FormExpose>() // Ref
const detailData = ref() // Ref
//
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
//
const handleCreate = () => {
setDialogTile('create')
}
//
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
//
const res = await NoticeApi.getNoticeApi(rowId)
unref(formRef)?.setValues(res)
}
//
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
//
const res = await NoticeApi.getNoticeApi(rowId)
detailData.value = res
}
// /
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
//
try {
const data = unref(formRef)?.formModel as NoticeApi.NoticeVO
if (actionType.value === 'create') {
await NoticeApi.createNoticeApi(data)
message.success(t('common.createSuccess'))
} else {
await NoticeApi.updateNoticeApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
await reload()
}
}
})
}
</script>

View File

@ -0,0 +1,103 @@
<template>
<ContentWrap>
<div style="width: 100%; height: 500px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />
</template>
</el-auto-resizer>
<el-pagination
:current-page="queryParms.pageNo"
:page-size="queryParms.pageSize"
layout="total, prev, pager, next"
:total="tableTotal"
@size-change="getList"
@current-change="getList"
/>
</div>
</ContentWrap>
</template>
<script setup lang="ts">
import { Column, TableV2FixedDir } from 'element-plus'
import * as NoticeApi from '@/api/system/notice'
import { XTextButton } from '@/components/XButton'
const { t } = useI18n() //
const columns: Column<any>[] = [
{
key: 'id',
dataKey: 'id', //{id:9527,name:'Mike'}id
title: 'id', //
width: 80, //
fixed: true //
},
{
key: 'title',
dataKey: 'title',
title: '公告标题',
width: 180
},
{
key: 'type',
dataKey: 'type',
title: '公告类型',
width: 180
},
{
key: 'status',
dataKey: 'status',
title: t('common.status'),
width: 180
},
{
key: 'content',
dataKey: 'content',
title: '公告内容',
width: 180
},
{
key: 'createTime',
dataKey: 'createTime',
title: t('common.createTime'),
width: 180
},
{
key: 'actionbtns',
dataKey: 'actionbtns', //{id:9527,name:'Mike'}id
title: '操作', //
width: 80, //
fixed: TableV2FixedDir.RIGHT, //
align: 'center',
cellRenderer: (date) =>
h(XTextButton, {
onClick: () => handleDelete(date.rowData),
type: 'danger',
preIcon: 'ep:delete',
title: t('action.del')
})
}
]
const tableData = ref([])
const tableTotal = ref(0)
const queryParms = reactive({
title: '',
status: undefined,
pageNo: 1,
pageSize: 10
})
const getList = async () => {
const res = await NoticeApi.getNoticePageApi(queryParms)
tableData.value = res.list
tableTotal.value = res.total
}
const handleDelete = (row) => {
console.info(row.id)
}
getList()
</script>