<template>
|
<div class="container">
|
<div class="header">
|
<div>
|
<el-icon :size="20">
|
<Location />
|
</el-icon>
|
<span>我的位置：</span>
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item><a href="#" @click="back">{{ state.firstClass }}</a></el-breadcrumb-item>
|
<el-breadcrumb-item>查看详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div>
|
<el-button plain @click="back">返回上级</el-button>
|
</div>
|
</div>
|
<div class="main" v-if="state.firstClass == '通知公告'">
|
<div class="title">{{state.content.title}}</div>
|
<el-divider border-style="dashed"/>
|
<div class="time">更新时间：{{state.content.updateTime?state.content.updateTime:state.content.createTime}}</div>
|
<div class="ql-container ql-snow" style="border: none" >
|
<div class="ql-editor">
|
<div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>
|
</div>
|
</div>
|
<!-- <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>-->
|
</div>
|
<div class="main" v-if="state.firstClass == '法律法规'">
|
<div class="title">{{state.content.title}}</div>
|
<div class="sub-title">{{state.content.subTitle}}</div>
|
<div class="info"><span>法律法规类别：{{state.content.lawType}}</span><span>颁布机构：{{state.content.pubAgency}}</span><span>颁布日期：{{state.content.pubDate}}</span></div>
|
<el-divider border-style="dashed"/>
|
<div class="time">更新时间：{{state.content.updateTime?state.content.updateTime:state.content.createTime}}</div>
|
<div class="ql-container ql-snow" style="border: none" >
|
<div class="ql-editor">
|
<div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>
|
</div>
|
</div>
|
<!-- <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>-->
|
</div>
|
<div class="main" v-if="state.firstClass == '机构公示'">
|
<div class="title">{{state.content.name}}</div>
|
<el-divider border-style="dashed"/>
|
<div class="time">更新时间：{{state.content.updateTime?state.content.updateTime:state.content.createTime}}</div>
|
<el-row>
|
<el-col :span="4">所在地区：</el-col>
|
<el-col :span="8">{{state.content.province}}<span v-if="state.content.province&&state.content.city">/</span>{{state.content.city}}<span v-if="state.content.city&&state.content.district">/</span>{{state.content.district}}</el-col>
|
<el-col :span="4">详细地址：</el-col>
|
<el-col :span="8">{{state.content.address}}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">社会信用代码：</el-col>
|
<el-col :span="8">{{state.content.creditCode}}</el-col>
|
<el-col :span="4">资质证书编号：</el-col>
|
<el-col :span="8">{{state.content.certNumber}}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">发证日期：</el-col>
|
<el-col :span="8">{{state.content.issueDate}}</el-col>
|
<el-col :span="4">有效日期：</el-col>
|
<el-col :span="8">{{state.content.validDate}}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">办公场所面积：</el-col>
|
<el-col :span="8">{{state.content.workArea}}㎡</el-col>
|
<el-col :span="4">档案室面积：</el-col>
|
<el-col :span="8">{{state.content.archiveArea}}㎡</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">法定代表人：</el-col>
|
<el-col :span="8">{{state.content.legalPerson}}</el-col>
|
<el-col :span="4">法人电话：</el-col>
|
<el-col :span="8">{{state.content.legalPhone}}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">机构负责人：</el-col>
|
<el-col :span="8">{{state.content.manager}}</el-col>
|
<el-col :span="4">负责人电话：</el-col>
|
<el-col :span="8">{{state.content.managerPhone}}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">业务范围：</el-col>
|
<el-col :span="20">{{state.content.business}}</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import {onMounted, ref, reactive, watch, onUnmounted, defineExpose, defineEmits} from "vue"
|
import { ArrowRight } from '@element-plus/icons-vue'
|
import {ElMessage} from "element-plus";
|
import {getLawsDetails, getNoticeDetails, getPublishDetails} from "../../api/home/homePage";
|
import { getDict } from "@/api/login"
|
import axios from "axios";
|
import {getToken} from "@/utils/auth";
|
|
const route = useRoute()
|
const router = useRouter()
|
const redirect = ref(undefined);
|
const state = reactive({
|
firstClass: '',
|
content: {},
|
busList: []
|
})
|
const emit = defineEmits(['backJump'])
|
onMounted(()=>{
|
// getBusiness()
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
watch(route, (newRoute) => {
|
redirect.value = newRoute.query && newRoute.query.redirect;
|
}, { immediate: true });
|
|
const openDetail = async (type,id)=>{
|
state.content = {}
|
state.firstClass = type
|
if(type == '通知公告'){
|
const res = await getNoticeDetails({noticeId: id})
|
if(res.code == 200){
|
state.content = res.data
|
if(state.content.updateTime){state.content.updateTime.substring(0.,16)}
|
state.content.createTime = state.content.createTime.substring(0.,16)
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
if(type == '法律法规'){
|
const res = await getLawsDetails({lawId: id})
|
if(res.code == 200){
|
state.content = res.data
|
if(state.content.updateTime){state.content.updateTime.substring(0.,16)}
|
state.content.createTime = state.content.createTime.substring(0.,16)
|
state.content.pubDate = state.content.pubDate.substring(0,10)
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
if(type == '机构公示'){
|
const res = await getPublishDetails({agencyId: id})
|
if(res.code == 200){
|
state.content = res.data
|
if(state.content.updateTime){state.content.updateTime.substring(0.,16)}
|
state.content.createTime = state.content.createTime.substring(0.,16)
|
state.content.issueDate = state.content.issueDate.substring(0,10)
|
state.content.validDate = state.content.validDate.substring(0,10)
|
state.content.business = state.content.businessNames.join()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
|
const showFile = (e) => {
|
if(e.target.nodeName === 'A'){
|
console.log("e",e)
|
e.preventDefault();
|
const file = {
|
fileUrl: e.target.href,
|
fileName: e.target.innerHTML
|
}
|
axios.get( file.fileUrl,{
|
headers:
|
{
|
'Content-Type': 'application/json',
|
'Authorization':getToken(),
|
},
|
responseType: 'blob'
|
}
|
).then(res=>{
|
if (res) {
|
const link = document.createElement('a')
|
let blob = new Blob([res.data],{type: res.data.type})
|
link.style.display = "none";
|
link.href = URL.createObjectURL(blob); // 创建URL
|
link.setAttribute("download", file.fileName);
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
} else {
|
this.$message.error('获取文件失败')
|
}
|
})
|
}
|
}
|
|
const back = ()=>{
|
if(state.firstClass == '通知公告'){
|
emit('backJump',2)
|
}
|
if(state.firstClass == '法律法规'){
|
emit('backJump',3)
|
}
|
if(state.firstClass == '机构公示'){
|
emit('backJump',4)
|
}
|
}
|
|
const getBusiness = async ()=>{
|
const res = await getDict({dictType: 'sys_business_scope'})
|
if(res.code == 200){
|
state.busList = res.data
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const getName = (str)=>{
|
const arr = str.split(',')
|
const newArr = arr.map((item)=>{
|
return state.busList.find(i=>i.id == Number(item))?.label
|
})
|
return newArr.join(',')
|
}
|
|
defineExpose({
|
openDetail
|
})
|
|
</script>
|
|
<style lang='scss' scoped>
|
.container {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 150px;
|
|
.header{
|
width: 1200px;
|
height: 60px;
|
margin: 15px 0 0;
|
padding: 0 15px;
|
border-radius: 4px;
|
background: #f5f5f5;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
&>div{
|
display: flex;
|
align-items: center;
|
}
|
}
|
.main{
|
width: 1200px;
|
border-radius: 4px;
|
box-shadow: 1px 1px 3px rgba(0,0,0,.04);
|
padding: 20px 15px 40px;
|
background: #fff;
|
max-height: calc(100vh - 280px);
|
overflow-y: auto;
|
|
.title{
|
font-size: 1.8rem;
|
color: #333;
|
font-weight: bolder;
|
text-align: center;
|
}
|
.sub-title{
|
font-size: 1.6rem;
|
color: #333;
|
text-align: center;
|
margin: 10px 0;
|
}
|
.info{
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
text-align: center;
|
font-size: 15px;
|
color: #666;
|
}
|
.time{
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
text-align: center;
|
font-size: 15px;
|
color: #666;
|
margin-bottom: 15px;
|
}
|
|
.el-row{
|
border: 1px solid #e6e6e6;
|
border-bottom: none;
|
font-size: 18px;
|
color: #333;
|
font-weight: 600;
|
font-family: "PingFang SC";
|
|
&:last-of-type{
|
border-bottom: 1px solid #e6e6e6;
|
}
|
.el-col{
|
padding: 15px;
|
border-right: 1px solid #e6e6e6;
|
|
&:last-of-type{
|
border-right: none;
|
}
|
}
|
.el-col-4{
|
color: #666;
|
font-weight: normal;
|
}
|
}
|
}
|
.reviewTable {
|
:deep(table){
|
border: 1px solid #ccc;
|
text-align: center;
|
}
|
:deep(table td){
|
border: 1px solid #ccc;
|
text-align: center;
|
padding: 0 5px;
|
}
|
:deep(table th){
|
border: 1px solid #ccc;
|
}
|
}
|
}
|
</style>
|
