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

<template>
	<div class="pageWrap bgc 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="{ row }">
					<div class="flex flex-align-pack-center">
						<LeIcon class="text-lg text-icon-color" icon-class="icon-processInfo-icons--view-light" @click="openDetail(row)" />

						<LeIcon class="text-lg ml-2 text-rose-700" icon-class="icon-processInfo-iconoir--trash" @click="table_del(row)" />
					</div>
				</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, ElMessageBox } 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,
		align: 'center',
		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()
	ElMessage.success(`删除成功~`)
	// } catch (e) {
	// 	console.log('删除失败')
	// 	ElMessage.error(`删除失败~`)
	// }
}

// 单个删除
const table_del = (row: any) => {
	ElMessageBox.confirm(`确认删除「${row.title}」这条数据？`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'error'
	}).then(async () => {
		deleteItem([row.id])
	})
}

//批量删除
const batch_del = () => {
	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
	ElMessageBox.confirm('是否删除选中数据？', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'error',
		buttonSize: 'default'
	}).then(() => {
		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"></style>