aizuda-web-vue3/src/views/message/list/my.vue

<template>
	<div class="pageWrap flex-column-page-wrap">
		<div class="flex-column-page-wrap">
			<!-- 公用搜索组件 -->
			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>

			<!--  LeTable 组件使用  -->
			<LeTable
				ref="tableRef"
				v-model:searchParams="tableOpts.searchParams"
				v-bind="tableOpts"
				v-model:curRow="tableOpts.curRow"
				v-model:checked-options="checkedColumns"
				:columns="activeColumns"
			>
				<template #toolLeft>
					<el-button type="primary">全部标记已读</el-button>
					<el-button type="danger" :disabled="curSelectionRows.length === 0" @click="batch_del">
						<el-icon class="btn-icon">
							<Delete />
						</el-icon>
					</el-button>
				</template>

				<template #categorySlot="scope">
					<el-tag v-if="scope.row.category === 0" size="small" effect="plain">通知公告</el-tag>
					<el-tag v-if="scope.row.category === 1" size="small" type="info" effect="plain">系统消息</el-tag>
					<el-tag v-if="scope.row.category === 2" size="small" type="warning" effect="plain">待办通知</el-tag>
				</template>

				<template #actionSlot="scope">
					<el-tooltip content="查看" placement="bottom" effect="light">
						<el-icon class="ibt0" @click="openDetail(scope.row)">
							<View />
						</el-icon>
					</el-tooltip>
					<el-divider direction="vertical"></el-divider>
					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
						<template #reference>
							<el-icon class="ibt0">
								<Delete />
							</el-icon>
						</template>
					</el-popconfirm>
				</template>
			</LeTable>
		</div>

		<message-detail v-if="visibleDetail" v-model="visibleDetail" :message-id="currentId" @closed="visibleDetail = false"> </message-detail>
	</div>
</template>
<script lang="tsx" setup>
import message from '@/api/system/message'
import {nextTick, ref, watch} from 'vue'
import {useTablePage} from '@/hooks/useTablePage'
import MessageDetail from './detail.vue'
import {useRoute} from 'vue-router'
import {Delete} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const route = useRoute()
const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
const currentId = ref(null)

// 表格搜索条件
const forms = ref([
	{
		prop: 'title',
		label: '标题：',
		itemType: 'input',
		placeholder: '请输入标题'
	},
	{
		prop: 'createBy',
		label: '发布人：',
		itemType: 'input',
		placeholder: '请输入发布人'
	}
])

// table列表数据请求
const queryList = async () => {
	const {options, searchParams} = tableOpts
	options.loading = true
	try {
		const {records: list, total} = await message.getMessageInfo(searchParams)
		tableOpts.total = total
		tableOpts.list = list
	} catch {
		console.log('获取列表数据失败')
		tableOpts.total = 0
		tableOpts.list = []
		options.loading = false // 更改加载中的 loading值
	} finally {
		options.loading = false
	}
}

// table 参数
const columns = [
	{
		prop: 'title',
		label: '标题',
		minWidth: 80
	},
	{
		prop: 'category',
		label: '消息类型',
		minWidth: 100,
		slots: {
			default: 'categorySlot'
		}
	},
	{
		prop: 'createBy',
		label: '发布人',
		minWidth: 100
	},
	{
		prop: 'createTime',
		label: '发布时间',
		minWidth: 150
	},
	{
		prop: 'action',
		label: '操作',
		width: 100,
		fixed: 'right',
		slots: {
			default: 'actionSlot'
		}
	}
]

const {searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams} = useTablePage(
	{
		options: {
			showIndex: false
		},
		// 需要展示的列
		columns,
		// 控制列配置
		columnsConfig: {
			columns
		}
	},
	{
		queryList,
		fetchImmediate: false
	}
)

// 删除
const deleteItem = async ids => {
	try {
		await message.messageDeleteApi(ids)
		updateParams()
	} catch (e) {
		console.log('删除失败')
		ElMessage.error(`删除失败~`)
	}
}

// 单个删除
const table_del = row => {
	deleteItem([row.id])
}

//批量删除
const batch_del = () => {
	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
	deleteItem(ids)
}

const openDetail = (row: any) => {
	currentId.value = row.id
	visibleDetail.value = true
}

nextTick(() => {
	queryList()
})

watch(
	() => route.query,
	(newPath, oldPath) => {
		if (JSON.stringify(newPath) !== '{}') {
			nextTick(() => {
				openDetail(newPath)
			})
		}
	},
	{immediate: true}
)
</script>
<style scoped lang="scss">
.pageWrap {
	flex: 1;
	display: flex;
	height: 100%;
	min-height: 0;
	//background-color: #fafafa;
	background-color: var(--el-fill-color-lighter);
	//background: #fff;
}

.content-warp {
	flex: 1;
	width: calc(100% - 210px);
}

// 应用的树结构样式
:deep(.menu-tree) {
	.el-tree-node__content {
		height: 36px;
	}

	.el-tree-node__content .el-tree-node__label .icon {
		margin-right: 5px;
	}
}

.nopadding {
	padding: 0px;
}
</style>