Skip to content

Commit 4a1a1ab

Browse files
xingyuvxingyuv
committed
refactor: table-v2
1 parent 2ec6978 commit 4a1a1ab

File tree

5 files changed

+362
-142
lines changed

5 files changed

+362
-142
lines changed

‎src/types/auto-components.d.ts

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
2121
DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
2222
Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
2323
Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
24+
ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
2425
ElBadge: typeof import('element-plus/es')['ElBadge']
2526
ElButton: typeof import('element-plus/es')['ElButton']
2627
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@@ -51,14 +52,10 @@ declare module '@vue/runtime-core' {
5152
ElIcon: typeof import('element-plus/es')['ElIcon']
5253
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
5354
ElInput: typeof import('element-plus/es')['ElInput']
54-
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
5555
ElLink: typeof import('element-plus/es')['ElLink']
5656
ElOption: typeof import('element-plus/es')['ElOption']
5757
ElPagination: typeof import('element-plus/es')['ElPagination']
5858
ElPopover: typeof import('element-plus/es')['ElPopover']
59-
ElRadio: typeof import('element-plus/es')['ElRadio']
60-
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
61-
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
6259
ElRow: typeof import('element-plus/es')['ElRow']
6360
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
6461
ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -69,11 +66,7 @@ declare module '@vue/runtime-core' {
6966
ElTableV2: typeof import('element-plus/es')['ElTableV2']
7067
ElTabPane: typeof import('element-plus/es')['ElTabPane']
7168
ElTabs: typeof import('element-plus/es')['ElTabs']
72-
ElTag: typeof import('element-plus/es')['ElTag']
7369
ElTooltip: typeof import('element-plus/es')['ElTooltip']
74-
ElTransfer: typeof import('element-plus/es')['ElTransfer']
75-
ElTree: typeof import('element-plus/es')['ElTree']
76-
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
7770
ElUpload: typeof import('element-plus/es')['ElUpload']
7871
Error: typeof import('./../components/Error/src/Error.vue')['default']
7972
FlowCondition: typeof import('./../components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue')['default']

‎src/types/auto-imports.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export {}
33
declare global {
44
const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
55
const EffectScope: typeof import('vue')['EffectScope']
6+
const ElButton: typeof import('element-plus/es')['ElButton']
67
const computed: typeof import('vue')['computed']
78
const createApp: typeof import('vue')['createApp']
89
const customRef: typeof import('vue')['customRef']

‎src/views/system/notice/index.vue

Lines changed: 109 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,123 @@
11
<template>
22
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<!-- 操作：新增 -->
6-
<template #toolbar_buttons>
7-
<XButton
8-
type="primary"
9-
preIcon="ep:zoom-in"
10-
:title="t('action.add')"
11-
v-hasPermi="['system:notice:create']"
12-
@click="handleCreate()"
13-
/>
14-
</template>
15-
<template #actionbtns_default="{ row }">
16-
<!-- 操作：修改 -->
17-
<XTextButton
18-
preIcon="ep:edit"
19-
:title="t('action.edit')"
20-
v-hasPermi="['system:notice:update']"
21-
@click="handleUpdate(row.id)"
22-
/>
23-
<!-- 操作：详情 -->
24-
<XTextButton
25-
preIcon="ep:view"
26-
:title="t('action.detail')"
27-
v-hasPermi="['system:notice:query']"
28-
@click="handleDetail(row.id)"
29-
/>
30-
<!-- 操作：删除 -->
31-
<XTextButton
32-
preIcon="ep:delete"
33-
:title="t('action.del')"
34-
v-hasPermi="['system:notice:delete']"
35-
@click="deleteData(row.id)"
36-
/>
37-
</template>
38-
</XTable>
39-
</ContentWrap>
40-
<!-- 弹窗 -->
41-
<XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
42-
<!-- 对话框(添加 / 修改) -->
43-
<Form
44-
ref="formRef"
45-
v-if="['create', 'update'].includes(actionType)"
46-
:schema="allSchemas.formSchema"
47-
:rules="rules"
48-
/>
49-
<!-- 对话框(详情) -->
50-
<Descriptions
51-
v-if="actionType === 'detail'"
52-
:schema="allSchemas.detailSchema"
53-
:data="detailData"
54-
>
55-
<template #content="{ row }">
56-
<Editor :model-value="row.content" :readonly="true" />
57-
</template>
58-
</Descriptions>
59-
<template #footer>
60-
<!-- 按钮：保存 -->
61-
<XButton
62-
v-if="['create', 'update'].includes(actionType)"
63-
type="primary"
64-
:title="t('action.save')"
65-
:loading="actionLoading"
66-
@click="submitForm()"
3+
<el-form ref="searchForm" :model="queryParms" :inline="true">
4+
<el-form-item label="公告标题">
5+
<el-input v-model="queryParms.title" />
6+
</el-form-item>
7+
<el-form-item label="状态">
8+
<el-select v-model="queryParms.status">
9+
<el-option label="全部" value="" />
10+
<el-option label="开启" :value="1" />
11+
<el-option label="关闭" :value="0" />
12+
</el-select>
13+
</el-form-item>
14+
<el-form-item>
15+
<el-button type="primary" @click="getList">Query</el-button>
16+
</el-form-item>
17+
</el-form>
18+
<div style="width: 100%; height: 500px">
19+
<el-auto-resizer>
20+
<template #default="{ height, width }">
21+
<el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />
22+
</template>
23+
</el-auto-resizer>
24+
<el-pagination
25+
:current-page="queryParms.pageNo"
26+
:page-size="queryParms.pageSize"
27+
layout="total, prev, pager, next"
28+
:total="tableTotal"
29+
@size-change="getList"
30+
@current-change="getList"
6731
/>
68-
<!-- 按钮：关闭 -->
69-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
70-
</template>
71-
</XModal>
32+
</div>
33+
</ContentWrap>
7234
</template>
73-
<script setup lang="ts" name="Notice">
74-
import type { FormExpose } from '@/components/Form'
75-
// 业务相关的 import
35+
<script setup lang="tsx">
36+
import dayjs from 'dayjs'
37+
import { Column, ElPagination, ElTableV2, TableV2FixedDir } from 'element-plus'
7638
import * as NoticeApi from '@/api/system/notice'
77-
import { rules, allSchemas } from './notice.data'
78-
39+
import { XTextButton } from '@/components/XButton'
7940
const { t } = useI18n() // 国际化
80-
const message = useMessage() // 消息弹窗
81-
// 列表相关的变量
82-
const [registerTable, { reload, deleteData }] = useXTable({
83-
allSchemas: allSchemas,
84-
getListApi: NoticeApi.getNoticePageApi,
85-
deleteApi: NoticeApi.deleteNoticeApi
86-
})
87-
// 弹窗相关的变量
88-
const dialogVisible = ref(false) // 是否显示弹出层
89-
const dialogTitle = ref('edit') // 弹出层标题
90-
const actionType = ref('') // 操作按钮的类型
91-
const actionLoading = ref(false) // 按钮 Loading
92-
const formRef = ref<FormExpose>() // 表单 Ref
93-
const detailData = ref() // 详情 Ref
9441
95-
// 设置标题
96-
const setDialogTile = (type: string) => {
97-
dialogTitle.value = t('action.' + type)
98-
actionType.value = type
99-
dialogVisible.value = true
100-
}
42+
const columns: Column<any>[] = [
43+
{
44+
key: 'id',
45+
dataKey: 'id', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
46+
title: 'id', //显示在单元格表头的文本
47+
width: 80, //当前列的宽度，必须设置
48+
fixed: true //是否固定列
49+
},
50+
{
51+
key: 'title',
52+
dataKey: 'title',
53+
title: '公告标题',
54+
width: 180
55+
},
56+
{
57+
key: 'type',
58+
dataKey: 'type',
59+
title: '公告类型',
60+
width: 180
61+
},
62+
{
63+
key: 'status',
64+
dataKey: 'status',
65+
title: t('common.status'),
66+
width: 180
67+
},
68+
{
69+
key: 'content',
70+
dataKey: 'content',
71+
title: '公告内容',
72+
width: 400,
73+
cellRenderer: ({ cellData: content }) => <span v-html={content}></span>
74+
},
75+
{
76+
key: 'createTime',
77+
dataKey: 'createTime',
78+
title: t('common.createTime'),
79+
width: 180,
80+
cellRenderer: ({ cellData: createTime }) => (
81+
<>{dayjs(createTime).format('YYYY-MM-DD HH:mm:ss')}</>
82+
)
83+
},
84+
{
85+
key: 'actionbtns',
86+
dataKey: 'actionbtns', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
87+
title: '操作', //显示在单元格表头的文本
88+
width: 80, //当前列的宽度，必须设置
89+
fixed: TableV2FixedDir.RIGHT, //是否固定列
90+
align: 'center',
91+
cellRenderer: ({ cellData: id }) => (
92+
<XTextButton
93+
preIcon="ep:delete"
94+
title={t('action.del')}
95+
onClick={handleDelete.bind(this, id)}
96+
></XTextButton>
97+
)
98+
}
99+
]
101100
102-
// 新增操作
103-
const handleCreate = () => {
104-
setDialogTile('create')
105-
}
101+
const tableData = ref([])
106102
107-
// 修改操作
108-
const handleUpdate = async (rowId: number) => {
109-
setDialogTile('update')
110-
// 设置数据
111-
const res = await NoticeApi.getNoticeApi(rowId)
112-
unref(formRef)?.setValues(res)
113-
}
103+
const tableTotal = ref(0)
114104
115-
// 详情操作
116-
const handleDetail = async (rowId: number) => {
117-
setDialogTile('detail')
118-
// 设置数据
119-
const res = await NoticeApi.getNoticeApi(rowId)
120-
detailData.value = res
105+
const queryParms = reactive({
106+
title: '',
107+
status: undefined,
108+
pageNo: 1,
109+
pageSize: 10
110+
})
111+
112+
const getList = async () => {
113+
const res = await NoticeApi.getNoticePageApi(queryParms)
114+
tableData.value = res.list
115+
tableTotal.value = res.total
121116
}
122117
123-
// 提交新增/修改的表单
124-
const submitForm = async () => {
125-
const elForm = unref(formRef)?.getElFormRef()
126-
if (!elForm) return
127-
elForm.validate(async (valid) => {
128-
if (valid) {
129-
actionLoading.value = true
130-
// 提交请求
131-
try {
132-
const data = unref(formRef)?.formModel as NoticeApi.NoticeVO
133-
if (actionType.value === 'create') {
134-
await NoticeApi.createNoticeApi(data)
135-
message.success(t('common.createSuccess'))
136-
} else {
137-
await NoticeApi.updateNoticeApi(data)
138-
message.success(t('common.updateSuccess'))
139-
}
140-
dialogVisible.value = false
141-
} finally {
142-
actionLoading.value = false
143-
await reload()
144-
}
145-
}
146-
})
118+
const handleDelete = (id) => {
119+
console.info(id)
147120
}
121+
122+
getList()
148123
</script>

0 commit comments

Comments
 (0)