VberAdminPlusV3/UI/VAP_V3.VUE/src/views/my/notice.vue

<script setup lang="ts" name="Notice">
import apis from "@/api"
import appStore from "@s"

const tableRef = ref()
const modalRef = ref()
const opts = reactive({
	columns: [
		{ field: "noticeId", name: "公告公告ID", width: 100, isSort: true, visible: false },
		{ field: "noticeTitle", name: "公告通知", visible: true },
		{ field: "noticeType", name: "公告通知类型", visible: true, width: 130 },
		{ field: "readStatus", name: "是否阅读", visible: true, width: 100 },
		{ field: "createTime", name: "公告通知时间", visible: true, width: 190 },
		{ field: "actions", name: `操作`, width: 80 }
	] as any,
	queryParams: {
		noticeTitle: "",
		noticeType: undefined,
		status: undefined
	},
	searchFormItems: [
		{
			field: "noticeTitle",
			label: "通知公告标题",
			class: "w-100",
			required: false,
			placeholder: "请输入通知公告标题",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			}
		}
		// {
		// 	field: "noticeType",
		// 	label: "公告类型",
		// 	class: "w-100",
		// 	required: false,
		// 	component: "Dict",
		// 	props: {
		// 		placeholder: "请选择公告类型",
		// 		dictType: "sys_notice_type"
		// 	}
		// },
		// {
		// 	field: "status",
		// 	label: "通知状态",
		// 	class: "w-100",
		// 	required: false,
		// 	component: "Dict",
		// 	props: {
		// 		placeholder: "请选择公告状态",
		// 		dictType: "sys_notice_status"
		// 	}
		// }
	] as any,
	permission: "",
	handleFuns: {
		handleRemoveAll
	},
	customBtns: [
		{
			key: "handleRemoveAll",
			name: "删除全部已读",
			icon: "bi bi-dash-square",
			btnClass: "btn btn-light-danger",
			disabledFun: () => false
		}
	],
	tableListFun: apis.system.noticeApi.listMyNotice
})
const { queryParams } = toRefs(opts)
/** 搜索按钮操作 */
function handleQuery(query?: any) {
	query = query || tableRef.value?.getQueryParams() || queryParams.value
	tableRef.value?.query(query)
}
/** 重置按钮操作 */
function resetQuery() {
	//
}
const detailData = ref()
function handleRead(row: any) {
	if (row.noticeType == "1") {
		appStore.noticeStore.readNotice(row)
	} else {
		detailData.value = row
		if (row.readStatus == "1") {
			modalRef.value.show()
			return
		}
		apis.system.noticeApi.read(row.noticeId, row.noticeType).then(() => {
			modalRef.value.show()
			handleQuery()
		})
	}
}
function handleRemove(row: any) {
	apis.system.noticeApi.removeRead(row.noticeId).then(() => {
		message.msgSuccess("删除成功")
		handleQuery()
	})
}

function handleRemoveAll() {
	apis.system.noticeApi.removeReadAll().then(() => {
		message.msgSuccess("全部已读删除成功")
		handleQuery()
	})
}

function init() {}

onMounted(init)
</script>
<template>
	<div class="app-container">
		<VbTable
			ref="tableRef"
			:handle-perm="opts.permission"
			:handle-funs="opts.handleFuns"
			:search-form-items="opts.searchFormItems"
			:columns="opts.columns"
			:custom-btns="opts.customBtns"
			:remote-fun="opts.tableListFun"
			:modal="modalRef"
			v-model:query-params="queryParams"
			:url="apis.system.noticeApi.tableUrl"
			:check-multiple="true"
			:init-search="true"
			:reset-search-form-fun="resetQuery"
			:custom-search-fun="handleQuery">
			<template #noticeTitle="{ row }">
				<span v-if="row.noticeType == '1'" class="w-100 text-primary" @click="handleRead(row)">
					{{ row.noticeTitle }}
				</span>
				<span v-else>{{ row.noticeTitle }}</span>
			</template>
			<template #noticeType="{ row }">
				<DictTag type="sys_notice_type" :value="row.noticeType"></DictTag>
			</template>
			<template #status="{ row }">
				<DictTag type="sys_notice_status" :value="row.status"></DictTag>
			</template>
			<template #readStatus="{ row }">
				<DictTag type="sys_notice_read_status" :value="row.readStatus"></DictTag>
			</template>
			<template #actions="{ row }">
				<vb-tooltip content="阅读" placement="top">
					<el-button link type="primary" @click="handleRead(row)">
						<template #icon>
							<VbIcon icon-name="book" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip v-if="row.readStatus == '1'" content="删除" placement="top">
					<el-button link type="danger" @click="handleRemove(row)">
						<template #icon>
							<VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
			</template>
		</VbTable>
		<VbModal
			v-model:modal="modalRef"
			title="公告详情"
			:confirm-btn="false"
			:close-btn-class="'btn btn-danger'"
			append-to-body>
			<template #body>
				<div v-if="detailData" class="d-flex flex-column">
					<div class="fw-bold text-center my-3">{{ detailData.noticeTitle }}</div>
					<div v-html="detailData.noticeContent"></div>
				</div>
			</template>
		</VbModal>
	</div>
</template>