From b7143b51f3a50b6fac9c139d291c1fad017daee6 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期五, 08 十二月 2023 15:50:50 +0800
Subject: [PATCH] 使用tinymce富文本
---
src/views/components/details.vue | 64 ++++++++++++++++++++++++++++++-
1 files changed, 61 insertions(+), 3 deletions(-)
diff --git a/src/views/components/details.vue b/src/views/components/details.vue
index 985fbe8..f2352ba 100644
--- a/src/views/components/details.vue
+++ b/src/views/components/details.vue
@@ -19,7 +19,12 @@
<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 v-html="state.content.content"></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>
@@ -27,7 +32,12 @@
<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 v-html="state.content.content"></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>
@@ -83,6 +93,8 @@
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()
@@ -94,7 +106,7 @@
})
const emit = defineEmits(['backJump'])
onMounted(()=>{
- getBusiness()
+ // getBusiness()
})
onUnmounted(()=>{
@@ -143,6 +155,38 @@
}
}
+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 == '通知公告'){
@@ -266,5 +310,19 @@
}
}
}
+ .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