|
@@ -0,0 +1,162 @@
|
|
|
+<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-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts" name="auxiliaryNoticeRead">
|
|
|
+import { reactive, onMounted, ref} from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { formatDate } from '/@/utils/formatTime';
|
|
|
+import { bulletinDetail,circularRead } from '/@/api/auxiliary/notice';
|
|
|
+
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive<any>({
|
|
|
+ dialogVisible: false,
|
|
|
+ ruleForm: <EmptyObjectType>{},
|
|
|
+ examineForm: <EmptyObjectType>{},
|
|
|
+});
|
|
|
+const noticeType = ref<any>('通知详情');
|
|
|
+const loading = ref<boolean>(false);
|
|
|
+const getDetail = async (id: string | string[]) => {
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ switch (noticeType.value) {
|
|
|
+ case '通知详情':
|
|
|
+ // 阅读
|
|
|
+ const readCircularRes = await circularRead(id);
|
|
|
+ state.ruleForm = readCircularRes.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();
|
|
|
+onMounted(() => {
|
|
|
+ noticeType.value = route.params?.tagsViewName ?? '通知详情';
|
|
|
+ getDetail(route.params.id);
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.notice-container {
|
|
|
+ &-box{
|
|
|
+ display: flex;
|
|
|
+ padding: 10px;
|
|
|
+ max-height: 300px;
|
|
|
+ &-inner{
|
|
|
+ flex:1;
|
|
|
+ padding: 10px 0 10px 10px;
|
|
|
+ &:last-child{
|
|
|
+ border-left: var(--el-border);
|
|
|
+ }
|
|
|
+ .el-tag{
|
|
|
+ margin:0 5px 5px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|