You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
8.9 KiB
Vue
336 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import {
|
|
processKnowledgeFlow,
|
|
queryKnowledgeDetail
|
|
} from "@/api/knowledgeCentre";
|
|
import { reactive } from "vue";
|
|
import Approved from "../approval/compontents/Approved.vue";
|
|
import RejectApproval from "../approval/compontents/RejectApproval.vue";
|
|
import { message } from "@/utils/message";
|
|
defineOptions({
|
|
name: "SubmissionDetails"
|
|
});
|
|
|
|
const dialogVisible = ref(false);
|
|
const isApproval = ref(false);
|
|
const ApprovedRef = ref();
|
|
const RejectApprovalRef = ref();
|
|
const formData = reactive({
|
|
knowledge: {
|
|
publishDeptId: "",
|
|
knowledgeFrom: undefined,
|
|
title: ""
|
|
},
|
|
baseName: "",
|
|
submittedDeptName: "",
|
|
knowledgeInfo: {
|
|
territory: "",
|
|
publishDate: "",
|
|
timeliness: undefined,
|
|
execTimeBegin: "",
|
|
execTimeEnd: "",
|
|
knowledgeTag: "",
|
|
policyType: "",
|
|
publishScope: undefined
|
|
},
|
|
knowledgeContext: {
|
|
context: ""
|
|
},
|
|
fileInfoList: []
|
|
});
|
|
const knowledgeId = ref("");
|
|
const todoId = ref("");
|
|
defineExpose({
|
|
open(val) {
|
|
dialogVisible.value = true;
|
|
isApproval.value = false;
|
|
getDeatils(val);
|
|
},
|
|
openApproval(row) {
|
|
dialogVisible.value = true;
|
|
isApproval.value = true;
|
|
getDeatils(row.knowledgeId);
|
|
knowledgeId.value = row.knowledgeId;
|
|
todoId.value = row.todoId;
|
|
}
|
|
});
|
|
const getDeatils = async id => {
|
|
const res: any = await queryKnowledgeDetail({
|
|
knowledgeId: id
|
|
});
|
|
for (const key in res.data) {
|
|
// eslint-disable-next-line no-prototype-builtins
|
|
if (formData.hasOwnProperty(key)) {
|
|
formData[key] = res.data[key];
|
|
}
|
|
}
|
|
};
|
|
|
|
const closeDialog = () => {
|
|
dialogVisible.value = false;
|
|
};
|
|
const downloadFile = (url, fileName) => {
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = fileName;
|
|
link.click();
|
|
};
|
|
const approvalOk = async () => {
|
|
const res: any = await processKnowledgeFlow({
|
|
operate: 1,
|
|
knowledgeId: knowledgeId.value,
|
|
todoId: todoId.value
|
|
});
|
|
if (res.code === 200) {
|
|
message("审批成功!", { type: "success" });
|
|
dialogVisible.value = false;
|
|
emit("getData");
|
|
}
|
|
};
|
|
const RejectApprovalOk = async () => {
|
|
const res: any = await processKnowledgeFlow({
|
|
operate: 2,
|
|
knowledgeId: knowledgeId.value,
|
|
todoId: todoId.value
|
|
});
|
|
if (res.code === 200) {
|
|
message("驳回成功!", { type: "success" });
|
|
dialogVisible.value = false;
|
|
emit("getData");
|
|
}
|
|
};
|
|
const emit = defineEmits(["getData"]);
|
|
const openApproval = () => {
|
|
ApprovedRef.value.open(knowledgeId.value, todoId.value);
|
|
};
|
|
const openRejectApproval = () => {
|
|
RejectApprovalRef.value.open(knowledgeId.value, todoId.value);
|
|
};
|
|
const downLoadFile = item => {
|
|
downloadFile(`/know-sub/file/downloadFile?fileId=${item.id}`, item.fileName);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-drawer
|
|
:size="1200"
|
|
append-to-body
|
|
v-model="dialogVisible"
|
|
:show-close="false"
|
|
:with-header="false"
|
|
:before-close="closeDialog"
|
|
custom-class="submission-details"
|
|
>
|
|
<div class="submission-details">
|
|
<div class="header-title">
|
|
<div class="tip" />
|
|
<span>知识详情</span>
|
|
</div>
|
|
<div class="line" />
|
|
<div class="main">
|
|
<div class="basicInfo">
|
|
<div class="basicInfo_title">基本信息</div>
|
|
<div class="basicInfo_item">
|
|
<span>{{ `发文部门：${formData.submittedDeptName}` }}</span>
|
|
</div>
|
|
<div class="basicInfo_item">
|
|
<span v-if="formData.knowledge.knowledgeFrom === 1">{{
|
|
`显示来源：人工添加`
|
|
}}</span>
|
|
<span v-else>{{ `显示来源：暂无` }}</span>
|
|
</div>
|
|
<div class="basicInfo_item">
|
|
<span>{{ `所属地区：${formData.knowledgeInfo.territory}` }}</span>
|
|
</div>
|
|
<div class="basicInfo_item">
|
|
<span>{{
|
|
`发布日期：${formData.knowledgeInfo.publishDate}`
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
v-if="formData.knowledgeInfo.timeliness"
|
|
class="basicInfo_item"
|
|
>
|
|
<span v-if="formData.knowledgeInfo.timeliness === 1">{{
|
|
`时效性：长期有效`
|
|
}}</span>
|
|
<span v-if="formData.knowledgeInfo.timeliness === 2">{{
|
|
`时效性：临时有效`
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
v-if="formData.knowledgeInfo.timeliness === 2"
|
|
class="basicInfo_item"
|
|
>
|
|
<span>{{
|
|
`执行期限：${formData.knowledgeInfo.execTimeBegin} ~ ${formData.knowledgeInfo.execTimeEnd}`
|
|
}}</span>
|
|
</div>
|
|
<div class="basicInfo_item">
|
|
<span>{{
|
|
`知识标签：${formData.knowledgeInfo.knowledgeTag}`
|
|
}}</span>
|
|
</div>
|
|
<div class="basicInfo_item">
|
|
<span>{{ `应用子库：${formData.baseName}` }}</span>
|
|
</div>
|
|
<div class="basicInfo_item">
|
|
<span>{{
|
|
`政策类型：${formData.knowledgeInfo.policyType}`
|
|
}}</span>
|
|
</div>
|
|
<div class="basicInfo_item">
|
|
<span v-if="formData.knowledgeInfo.publishScope === 1">{{
|
|
`公开范围：公开`
|
|
}}</span>
|
|
<span v-else>{{ `公开范围：不公开` }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="main-content">
|
|
<div class="content-title">{{ formData.knowledge.title }}</div>
|
|
<div class="text" v-html="formData.knowledgeContext.context" />
|
|
<div class="annex">
|
|
<div
|
|
class="annex_item"
|
|
@click="downLoadFile(item)"
|
|
v-for="(item, index) in formData.fileInfoList"
|
|
:key="index"
|
|
>
|
|
<span>{{ `附件${index + 1}: ` }}</span>
|
|
<span class="link">{{ item.fileName }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="isApproval" class="btn_list">
|
|
<div class="main_btn" @click="openApproval">审批通过</div>
|
|
<div class="btn" @click="openRejectApproval">审批驳回</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Approved @approvalOk="approvalOk" ref="ApprovedRef" />
|
|
<RejectApproval
|
|
@RejectApprovalOk="RejectApprovalOk"
|
|
ref="RejectApprovalRef"
|
|
/>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.submission-details {
|
|
padding-left: 16px;
|
|
|
|
.header-title {
|
|
display: flex;
|
|
align-items: center;
|
|
// border-left: 6px solid #4287ff;
|
|
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #2b3f54;
|
|
|
|
.tip {
|
|
width: 6px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
line-height: 20px;
|
|
background: #4287ff;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
position: relative;
|
|
left: -20px;
|
|
width: 1160px;
|
|
height: 1px;
|
|
margin-top: 24px;
|
|
background: rgb(91 139 255 / 30%);
|
|
}
|
|
.main {
|
|
display: flex;
|
|
// height: 100%;
|
|
.basicInfo {
|
|
width: 350px;
|
|
padding: 24px 16px;
|
|
border-right: 1px solid rgba(91, 139, 255, 0.3);
|
|
height: 100%;
|
|
.basicInfo_title {
|
|
font-size: 20px;
|
|
color: #333333;
|
|
margin-bottom: 24px;
|
|
}
|
|
.basicInfo_item {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 32px 50px;
|
|
.content-title {
|
|
font-size: 36px;
|
|
color: #000000;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.text {
|
|
font-size: 16px;
|
|
color: #666666;
|
|
margin-top: 32px;
|
|
height: calc(100vh - 360px);
|
|
overflow: auto;
|
|
}
|
|
.annex {
|
|
margin-top: 75px;
|
|
.annex_item {
|
|
display: flex;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
cursor: pointer;
|
|
.link {
|
|
color: #0052d9;
|
|
}
|
|
}
|
|
}
|
|
.btn_list {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
margin-top: 40px;
|
|
.main_btn {
|
|
width: 188px;
|
|
height: 40px;
|
|
background: #0052d9;
|
|
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
|
|
border-radius: 6px 6px 6px 6px;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.btn {
|
|
width: 188px;
|
|
height: 40px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
|
|
border-radius: 6px 6px 6px 6px;
|
|
border: 1px solid #0052d9;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #0052d9;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-right: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|