From cc4749faaa9a2bd9660e7b827e46f30a74043028 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 14 十二月 2023 13:10:40 +0800
Subject: [PATCH] 修改样式
---
src/views/components/details.vue | 286 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 272 insertions(+), 14 deletions(-)
diff --git a/src/views/components/details.vue b/src/views/components/details.vue
index b2eb8c9..f38d641 100644
--- a/src/views/components/details.vue
+++ b/src/views/components/details.vue
@@ -6,34 +6,107 @@
<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>
- <el-breadcrumb :separator-icon="ArrowRight">
- <el-breadcrumb-item>{{ state.firstClass }}</el-breadcrumb-item>
- <el-breadcrumb-item>{{state.firstClass}}</el-breadcrumb-item>
- </el-breadcrumb>
+ <div>
+ <el-button plain @click="back">返回上级</el-button>
+ </div>
</div>
- <div class="main">
-
+ <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} from "vue"
+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: '第一级菜单'
+ firstClass: '',
+ content: {},
+ busList: []
})
-
-
-
+const emit = defineEmits(['backJump'])
onMounted(()=>{
-
+ // getBusiness()
})
onUnmounted(()=>{
@@ -44,9 +117,108 @@
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)
+ }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.download
+ }
+ 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>
@@ -57,14 +229,100 @@
display: flex;
flex-direction: column;
align-items: center;
- margin-top: 170px;
+ margin-top: 160px;
+
.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 - 310px);
+ 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>
--
Gitblit v1.9.2