hotline-web/src/views/auxiliary/notice/detail.vue

<template>
	<div class="auxiliary-notice-detail-container layout-pd">
		<el-card shadow="never" v-loading="loading">
			<el-form :model="state.ruleForm" label-width="110px" ref="ruleFormRef" class="show-info-form">
				<template v-if="['通知详情'].includes(noticeType)">
					<el-row :gutter="0">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="通知类型">
								{{ state.ruleForm.circularTypeName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="通知标题">
								{{ state.ruleForm.title }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="必须阅读">
								{{ state.ruleForm.isMustRead ? '是' : '否' }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="失效时间：">
								{{ formatDate(state.ruleForm.lostEfficacyTime, 'YYYY-mm-dd HH:MM:SS') }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="通知对象：">
								{{ state.ruleForm.circularTypeText }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="已阅读数量：">
								<el-popover :width="450" trigger="click" popper-class="notice-container">
									<template #reference>
										<el-button placement="right" link type="primary">{{ state.ruleForm?.readedNum + '/' + state.ruleForm?.needReadNum }}</el-button>
									</template>
									<div class="notice-container-box">
										<div class="notice-container-box-inner">
											已读：{{ state.ruleForm?.readedNum }}
											<el-scrollbar class="mt5" v-if="state.ruleForm?.circularReadGroups?.length">
												<el-tag v-for="item in state.ruleForm?.circularReadGroups.filter((i) => i.isRead)"
													>{{ state.ruleForm.circularType === 1 ? item.userName : item.orgName }}
													<span v-if="item.isTimeOut" class="color-danger">(超时阅读)</span>
												</el-tag>
											</el-scrollbar>
										</div>
										<div class="notice-container-box-inner">
											未读：{{ state.ruleForm?.needReadNum - state.ruleForm?.readedNum }}
											<el-scrollbar class="mt5 mb10" v-if="state.ruleForm.circularReadGroups?.length">
												<el-tag v-for="item in state.ruleForm.circularReadGroups.filter((i) => !i.isRead)">{{
													state.ruleForm.circularType === 1 ? item.userName : item.orgName
												}}</el-tag>
											</el-scrollbar>
										</div>
									</div>
								</el-popover>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="文档内容：">
								<div v-html="state.ruleForm.content"></div>
							</el-form-item>
						</el-col>
					</el-row>
				</template>
				<template v-if="['公告详情'].includes(noticeType)">
					<el-row :gutter="10">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="公告类型：">
								{{ state.ruleForm.bulletinTypeName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="公告标题：">
								{{ state.ruleForm.title }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="失效时间：">
								{{ formatDate(state.ruleForm.loseEfficacyTime, 'YYYY-mm-dd HH:MM:SS') }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="来源单位：">
								{{ state.ruleForm.sourceOrgName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="公告范围：">
								{{ state.ruleForm.pushRangesText }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="editor-content-view">
							<el-form-item label="文档内容：">
								<div v-html="state.ruleForm.content"></div>
							</el-form-item>
						</el-col>
					</el-row>
				</template>
			</el-form>
			<el-button type="primary" @click="onAudit" title="通知审批" v-if="state.ruleForm?.circularState == 1" v-auth="'auxiliary:notice:audit'">
				审批
			</el-button>
			<el-button type="primary" @click="onAudit" title="公告审批" v-if="state.ruleForm?.bulletinState == 1" v-auth="'auxiliary:bulletin:audit'">
				审批
			</el-button>
		</el-card>
		<el-dialog v-model="state.dialogVisible" width="500px" draggable :title="noticeType" @close="close">
			<el-form :model="state.examineForm" label-width="110px" ref="examineFormRef">
				<el-form-item label="审核理由" prop="reason" :rules="[{ required: true, message: '请填写审核理由', trigger: 'blur' }]">
					<el-input v-model="state.examineForm.reason" placeholder="请填写审核理由" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onReject(examineFormRef)" :loading="loading">审核驳回</el-button>
					<el-button type="primary" @click="onPass(examineFormRef)" :loading="loading">审核通过</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 流程审批 -->
		<process-audit ref="processAuditRef" @orderProcessSuccess="closePage" />
	</div>
</template>
<script setup lang="ts" name="auxiliaryNoticeDetail">
import { reactive, onMounted, ref, defineAsyncComponent, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { formatDate } from '@/utils/formatTime';
import { bulletinAudit, bulletinDetail, circularAudit, circularDetail, circularRead } from '@/api/auxiliary/notice';
import mittBus from '@/utils/mitt';
import { ElInput, ElMessage, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudit/index.vue')); // 流程审批
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: <EmptyObjectType>{},
	examineForm: <EmptyObjectType>{},
});
const noticeType = ref<any>('通知详情');
const loading = ref<boolean>(false);
const isRead = ref<string | string[]>('0');
const getDetail = async (id: string | string[]) => {
	loading.value = true;
	try {
		switch (noticeType.value) {
			case '通知详情':
				if (isRead.value === '1') {
					// 阅读
					const readCircularRes = await circularRead(id);
					state.ruleForm = readCircularRes.result;
				} else {
					// 查看详情
					const circularRes = await circularDetail(id);
					state.ruleForm = circularRes.result;
				}
				break;
			case '公告详情':
				const bulletinRes = await bulletinDetail(id);
				state.ruleForm = bulletinRes.result;
				break;
			default:
				break;
		}
		loading.value = false;
	} catch (error) {
		loading.value = false;
		console.log(error);
	}
};
const route = useRoute();
const onAudit = () => {
	state.dialogVisible = true;
};
// 关闭当前页
const router = useRouter();
const closePage = () => {
	state.dialogVisible = false;
	// 关闭当前 tagsView
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	mittBus.emit('clearCache', 'auxiliaryNotice');
	if (noticeType.value === '通知详情') {
		router.push({
			path: '/auxiliary/notice',
		});
	} else if (noticeType.value === '公告详情') {
		router.push({
			name: 'auxiliaryNotice',
			state: {
				index: '1',
			},
		});
	}
};
const examineFormRef = ref<RefType>();
// 审核通过
const onPass = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		loading.value = true;
		const request = {
			reason: state.examineForm.reason,
			id: route.params.id,
			isPass: true,
		};
		switch (noticeType.value) {
			case '通知详情':
				circularAudit(request)
					.then(() => {
						closePage();
					})
					.catch(() => {
						state.dialogVisible = false;
						loading.value = false;
					});
				break;
			case '公告详情':
				bulletinAudit(request)
					.then(() => {
						closePage();
					})
					.catch(() => {
						state.dialogVisible = false;
						loading.value = false;
					});
				break;
			default:
				state.dialogVisible = false;
				loading.value = false;
				break;
		}
	});
}, 300);
// 审核驳回
const onReject = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		loading.value = true;
		const request = {
			reason: state.examineForm.reason,
			id: route.params.id,
			isPass: false,
		};
		switch (noticeType.value) {
			case '通知详情':
				circularAudit(request)
					.then(() => {
						closePage();
					})
					.catch(() => {
						state.dialogVisible = false;
						loading.value = false;
					});
				break;
			case '公告详情':
				bulletinAudit(request)
					.then(() => {
						closePage();
					})
					.catch(() => {
						state.dialogVisible = false;
						loading.value = false;
					});
				break;
			default:
				state.dialogVisible = false;
				loading.value = false;
				break;
		}
	});
}, 300);
const close = () => {
	examineFormRef.value?.resetFields();
	examineFormRef.value?.clearValidate();
};
onMounted(() => {
	noticeType.value = route.params?.tagsViewName ?? '通知详情';
	isRead.value = route.params?.isRead ?? '0';
	getDetail(route.params.id);
});
</script>