Skip to content

Commit ca4bdb4

Browse files
w385454831w385454831
committed
重构VUE3【站内信消息记录】：1、表格增加自适应高度（简单实现）2、我的站内信每条记录分为查阅（未读状态）和详情（已读状态）
1 parent 202031d commit ca4bdb4

File tree

6 files changed

+539
-246
lines changed

6 files changed

+539
-246
lines changed

‎src/views/system/notify/message/detail.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
3+
<el-descriptions border :column="1">
4+
<el-descriptions-item label="编号" min-width="120">
5+
{{ detailData.id }}
6+
</el-descriptions-item>
7+
<el-descriptions-item label="用户类型">
8+
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
9+
</el-descriptions-item>
10+
<el-descriptions-item label="用户编号">
11+
{{ detailData.userId }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="模版编号">
14+
{{ detailData.templateId }}
15+
</el-descriptions-item>
16+
<el-descriptions-item label="模板编码">
17+
{{ detailData.templateCode }}
18+
</el-descriptions-item>
19+
<el-descriptions-item label="发送人名称">
20+
{{ detailData.templateNickname }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="模版内容">
23+
{{ detailData.templateContent }}
24+
</el-descriptions-item>
25+
<el-descriptions-item label="模版参数">
26+
{{ detailData.templateParams }}
27+
</el-descriptions-item>
28+
<el-descriptions-item label="模版类型">
29+
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
30+
</el-descriptions-item>
31+
<el-descriptions-item label="是否已读">
32+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
33+
</el-descriptions-item>
34+
<el-descriptions-item label="阅读时间">
35+
{{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }}
36+
</el-descriptions-item>
37+
<el-descriptions-item label="创建时间">
38+
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
39+
</el-descriptions-item>
40+
</el-descriptions>
41+
</Dialog>
42+
</template>
43+
<script setup lang="ts">
44+
import { DICT_TYPE } from '@/utils/dict'
45+
import { formatDate } from '@/utils/formatTime'
46+
import * as NotifyMessageApi from '@/api/system/notify/message'
47+
48+
const modelVisible = ref(false) // 弹窗的是否展示
49+
const detailLoading = ref(false) // 表单的加载中
50+
const detailData = ref() // 详情数据
51+
52+
/** 打开弹窗 */
53+
const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
54+
modelVisible.value = true
55+
// 设置数据
56+
detailLoading.value = true
57+
try {
58+
detailData.value = data
59+
} finally {
60+
detailLoading.value = false
61+
}
62+
}
63+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
64+
</script>

‎src/views/system/notify/message/index.vue

Lines changed: 203 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,217 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #actionbtns_default="{ row }">
6-
<!-- 操作：详情 -->
7-
<XTextButton
8-
preIcon="ep:view"
9-
:title="t('action.detail')"
10-
v-hasPermi="['system:notify-message:query']"
11-
@click="handleDetail(row.id)"
2+
<content-wrap>
3+
<!-- 搜索工作栏 -->
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
11+
<el-form-item label="用户编号" prop="userId">
12+
<el-input
13+
v-model="queryParams.userId"
14+
placeholder="请输入用户编号"
15+
clearable
16+
@keyup.enter="handleQuery"
17+
class="!w-240px"
1218
/>
13-
</template>
14-
</XTable>
15-
</ContentWrap>
16-
<!-- 弹窗 -->
17-
<XModal id="messageModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
18-
<!-- 表单：详情 -->
19-
<Descriptions
20-
v-if="actionType === 'detail'"
21-
:schema="allSchemas.detailSchema"
22-
:data="detailData"
19+
</el-form-item>
20+
<el-form-item label="用户类型" prop="userType">
21+
<el-select
22+
v-model="queryParams.userType"
23+
placeholder="请选择用户类型"
24+
clearable
25+
class="!w-240px"
26+
>
27+
<el-option
28+
v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)"
29+
:key="parseInt(dict.value)"
30+
:label="dict.label"
31+
:value="parseInt(dict.value)"
32+
/>
33+
</el-select>
34+
</el-form-item>
35+
<el-form-item label="模板编码" prop="templateCode">
36+
<el-input
37+
v-model="queryParams.templateCode"
38+
placeholder="请输入模板编码"
39+
clearable
40+
@keyup.enter="handleQuery"
41+
class="!w-240px"
42+
/>
43+
</el-form-item>
44+
<el-form-item label="模版类型" prop="templateType">
45+
<el-select
46+
v-model="queryParams.templateType"
47+
placeholder="请选择模版类型"
48+
clearable
49+
class="!w-240px"
50+
>
51+
<el-option
52+
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
53+
:key="parseInt(dict.value)"
54+
:label="dict.label"
55+
:value="parseInt(dict.value)"
56+
/>
57+
</el-select>
58+
</el-form-item>
59+
<el-form-item label="创建时间" prop="createTime">
60+
<el-date-picker
61+
v-model="queryParams.createTime"
62+
value-format="YYYY-MM-DD HH:mm:ss"
63+
type="daterange"
64+
start-placeholder="开始日期"
65+
end-placeholder="结束日期"
66+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
67+
class="!w-240px"
68+
/>
69+
</el-form-item>
70+
<el-form-item>
71+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
72+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
73+
</el-form-item>
74+
</el-form>
75+
</content-wrap>
76+
77+
<!-- 列表 -->
78+
<content-wrap>
79+
<el-table ref="tableRef" v-loading="loading" :data="list" :height="tableHeight">
80+
<el-table-column label="编号" align="center" prop="id" />
81+
<el-table-column label="用户类型" align="center" prop="userType">
82+
<template #default="scope">
83+
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
84+
</template>
85+
</el-table-column>
86+
<el-table-column label="用户编号" align="center" prop="userId" width="80" />
87+
<el-table-column label="模版编号" align="center" prop="templateId" width="80" />
88+
<el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
89+
<el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
90+
<el-table-column
91+
label="模版内容"
92+
align="center"
93+
prop="templateContent"
94+
width="200"
95+
show-overflow-tooltip
96+
/>
97+
<el-table-column
98+
label="模版参数"
99+
align="center"
100+
prop="templateParams"
101+
width="180"
102+
show-overflow-tooltip
103+
>
104+
<template #default="scope"> {{ scope.row.templateParams }}</template>
105+
</el-table-column>
106+
<el-table-column label="模版类型" align="center" prop="templateType" width="120">
107+
<template #default="scope">
108+
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
109+
</template>
110+
</el-table-column>
111+
<el-table-column label="是否已读" align="center" prop="readStatus" width="100">
112+
<template #default="scope">
113+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
114+
</template>
115+
</el-table-column>
116+
<el-table-column
117+
label="阅读时间"
118+
align="center"
119+
prop="readTime"
120+
width="180"
121+
:formatter="dateFormatter"
122+
/>
123+
<el-table-column
124+
label="创建时间"
125+
align="center"
126+
prop="createTime"
127+
width="180"
128+
:formatter="dateFormatter"
129+
/>
130+
<el-table-column label="操作" align="center">
131+
<template #default="scope">
132+
<el-button
133+
link
134+
type="primary"
135+
@click="openModal(scope.row)"
136+
v-hasPermi="['system:notify-message:query']"
137+
>
138+
详情
139+
</el-button>
140+
</template>
141+
</el-table-column>
142+
</el-table>
143+
<!-- 分页 -->
144+
<Pagination
145+
:total="total"
146+
v-model:page="queryParams.pageNo"
147+
v-model:limit="queryParams.pageSize"
148+
@pagination="getList"
23149
/>
24-
<template #footer>
25-
<!-- 按钮：关闭 -->
26-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
27-
</template>
28-
</XModal>
150+
</content-wrap>
151+
152+
<!-- 表单弹窗：详情 -->
153+
<notify-message-detail ref="modalRef" />
29154
</template>
30155
<script setup lang="ts" name="NotifyMessage">
31-
// 业务相关的 import
32-
import { allSchemas } from './message.data'
156+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
157+
import { dateFormatter } from '@/utils/formatTime'
33158
import * as NotifyMessageApi from '@/api/system/notify/message'
159+
import NotifyMessageDetail from './detail.vue'
34160
35-
const { t } = useI18n() // 国际化
36-
37-
// 列表相关的变量
38-
const [registerTable] = useXTable({
39-
allSchemas: allSchemas,
40-
topActionSlots: false,
41-
getListApi: NotifyMessageApi.getNotifyMessagePageApi
161+
const loading = ref(true) // 列表的加载中
162+
const total = ref(0) // 列表的总页数
163+
const list = ref([]) // 列表的数据
164+
const queryParams = reactive({
165+
pageNo: 1,
166+
pageSize: 10,
167+
userType: undefined,
168+
userId: undefined,
169+
templateCode: undefined,
170+
templateType: undefined,
171+
createTime: []
42172
})
173+
const queryFormRef = ref() // 搜索的表单
174+
const tableRef = ref()
175+
const tableHeight = ref() // table高度
43176
44-
// 弹窗相关的变量
45-
const modelVisible = ref(false) // 是否显示弹出层
46-
const modelTitle = ref('edit') // 弹出层标题
47-
const modelLoading = ref(false) // 弹出层loading
48-
const actionType = ref('') // 操作按钮的类型
49-
const actionLoading = ref(false) // 按钮 Loading
50-
const detailData = ref() // 详情 Ref
177+
/** 查询参数列表 */
178+
const getList = async () => {
179+
loading.value = true
180+
try {
181+
const data = await NotifyMessageApi.getNotifyMessagePageApi(queryParams)
182+
list.value = data.list
183+
total.value = data.total
184+
} finally {
185+
loading.value = false
186+
}
187+
}
188+
189+
/** 搜索按钮操作 */
190+
const handleQuery = () => {
191+
queryParams.pageNo = 1
192+
getList()
193+
}
51194
52-
// 设置标题
53-
const setDialogTile = (type: string) => {
54-
modelLoading.value = true
55-
modelTitle.value = t('action.' + type)
56-
actionType.value = type
57-
modelVisible.value = true
195+
/** 重置按钮操作 */
196+
const resetQuery = () => {
197+
queryFormRef.value.resetFields()
198+
handleQuery()
58199
}
59200
60-
// 详情操作
61-
const handleDetail = async (rowId: number) => {
62-
setDialogTile('detail')
63-
const res = await NotifyMessageApi.getNotifyMessageApi(rowId)
64-
detailData.value = res
65-
modelLoading.value = false
201+
/** 详情操作 */
202+
const modalRef = ref()
203+
const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
204+
modalRef.value.openModal(data)
66205
}
206+
207+
/** 初始化 **/
208+
onMounted(() => {
209+
getList()
210+
// TODO 感觉表格自适应高度体验很好的，目前简单实现 需要进一步优化,如根据筛选条件展开或收缩改变盒子高度时
211+
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
212+
// 监听浏览器高度变化
213+
window.onresize = () => {
214+
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
215+
}
216+
})
67217
</script>

0 commit comments

Comments
 (0)