使用tinymce富文本

zhouwenxuan

2023-12-08 b7143b51f3a50b6fac9c139d291c1fad017daee6

 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 = getName(state.content.business)
    }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>
@@ -58,13 +230,99 @@
  flex-direction: column;
  align-items: center;
  margin-top: 170px;

  .header{
    width: 1200px;
    height: 60px;
    margin: 20px 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 - 330px);
    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>