diff --git a/src/views/dashboard/message/columns.ts b/src/views/dashboard/message/columns.ts index a34e6b1..0f6912f 100644 --- a/src/views/dashboard/message/columns.ts +++ b/src/views/dashboard/message/columns.ts @@ -8,14 +8,18 @@ export const columns = [ { label: 'ID', prop: 'id', + fixed: 'left', + width: 50, }, { label: '消息标题', prop: 'title', + width: 250, }, { label: '消息状态', prop: 'status', + width: 100, render(record) { return h('span', record.row.status === 1 ? '已读' : '未读'); }, @@ -23,9 +27,11 @@ export const columns = [ { label: '创建人', prop: 'createUser', + width: 100, }, { label: '创建时间', prop: 'createTime', + width: 180, }, ]; diff --git a/src/views/dashboard/message/edit.vue b/src/views/dashboard/message/edit.vue index 241dc06..831726c 100644 --- a/src/views/dashboard/message/edit.vue +++ b/src/views/dashboard/message/edit.vue @@ -31,6 +31,10 @@ import { onMounted, reactive } from 'vue'; const emit = defineEmits(['success', 'update:visible']); + + /** + * 定义表单参数 + */ const formData = reactive({ id: '', title: '', @@ -40,6 +44,9 @@ content: '', }); + /** + * 定义接收的参数 + */ const props = defineProps({ visible: { type: Boolean, @@ -53,10 +60,16 @@ }, }); + /** + * 关闭弹窗 + */ const dialogClose = () => { emit('update:visible', false); }; + /** + * 设置表单参数 + */ const setFormData = async () => { const data = await getMessageDetail(props.messageId); for (const key in formData) { @@ -66,6 +79,11 @@ } } }; + + /** + * 获取类型文本描述 + * @param type 类型 + */ const getTyepText = (type) => { let typeText = ''; switch (type) { @@ -84,6 +102,9 @@ return typeText; }; + /** + * 钩子函数 + */ onMounted(() => { if (props.messageId) { setFormData(); diff --git a/src/views/dashboard/message/index.vue b/src/views/dashboard/message/index.vue index bc4c1f8..2406e00 100644 --- a/src/views/dashboard/message/index.vue +++ b/src/views/dashboard/message/index.vue @@ -2,18 +2,14 @@ - - + + import('./edit.vue')); const messageId = ref(0); const docHeight = ref(500); const activeName = ref(1); + const editVisible = ref(false); + const selectionData = ref([]); + const tableRef = ref(); + + /** + * 定义查询参数 + */ + const formParams = reactive({ + type: 1, + }); + + /** + * 定义数据源 + */ const messageTypeList = ref([ { name: '系统通知', @@ -75,14 +89,12 @@ value: 3, }, ]); - const editVisible = ref(false); - const selectionData = ref([]); - const tableRef = ref(); - const formParams = reactive({ - type: 1, - }); + + /** + * 定义操作栏 + */ const actionColumn = reactive({ - width: 250, + width: 280, label: '操作', prop: 'action', fixed: 'right', @@ -92,6 +104,7 @@ actions: [ { label: '确认', + icon: 'Check', type: 'warning', onClick: handleSetRead.bind(null, record), }, @@ -99,7 +112,7 @@ label: '详情', icon: 'View', type: 'warning', - onClick: handleInfo.bind(null, record), + onClick: handleDetail.bind(null, record), }, { label: '删除', @@ -112,6 +125,10 @@ }, }); + /** + * 加载数据列表 + * @param res 参数 + */ const loadDataTable = async (res: any) => { const result = await getMessageProfile({ ...formParams, ...res }); let item = messageTypeList.value.find((item, index) => item.value == activeName.value); @@ -119,21 +136,38 @@ return result; }; + /** + * 刷新数据列表 + * @param noRefresh 参数 + */ function reloadTable(noRefresh = '') { tableRef.value.reload(noRefresh ? {} : { pageNo: 1 }); } + + /** + * 执行点击事件 + * @param e 参数 + */ const handleClick = (e) => { - activeName.value = e + activeName.value = e; formParams.type = activeName.value; reloadTable(); }; - const handleInfo = async (record: Recordable) => { + /** + * 执行查看详情 + * @param record 参数 + */ + const handleDetail = async (record: Recordable) => { messageId.value = record.row.id; await nextTick(); editVisible.value = true; }; + /** + * 执行删除 + * @param record 参数 + */ async function handleDelete(record: Recordable) { let ids = []; if (!record) { @@ -144,6 +178,11 @@ message('删除成功'); reloadTable(); } + + /** + * 执行已读 + * @param record 参数 + */ async function handleSetRead(record: Recordable) { let ids = []; if (!record) { @@ -154,16 +193,25 @@ message('标记成功'); reloadTable(); } + + /** + * 数据行选中事件 + * @param value 参数 + */ function onSelectionChange(value) { selectionData.value = value; } + + /** + * 钩子函数 + */ onMounted(() => { docHeight.value = document.body.clientHeight - 145; });