<template> <div class="app-container"> <el-card class="box-card"> <div slot="header" class="clearfix"> <p>帮助文档</p> </div> <el-row class="content-menu"> <el-col :span="4" class="menu" v-loading="idDocListLoading"> <el-table :data="menuList" row-key="addTimeNumber" :tree-props="{children: 'typeList'}" :show-header="false" @row-click="clickRow" > <el-table-column label="名称" prop="name" /> </el-table> </el-col> <transition name="fade"> <el-col :span="20" class="content-text" v-loading="loading"> <el-row :span="24" type="flex" align="middle" justify="space-bewteen" class="pre-title"> <el-col :span="12"> <h3>{{ docTitle }}</h3> </el-col> <el-col :span="12"> <p style="float:right;"> <span>{{ docTime }}</span> <el-divider direction="vertical"></el-divider> <span>{{ docMan }}</span> </p> </el-col> </el-row> <div class="ql-container ql-show"> <div class="ql-editor"> <div v-html="content"></div> </div> </div> </el-col> </transition> </el-row> </el-card> </div> </template> <script> import axios from 'axios' import { getDocList,getDoc } from '@/api/module/operation' export default { name: "Document", data() { return { show: true, allList: [], menuList: [], loading: false, idDocListLoading: false, editorOption: {}, queryParams: { pageNum: 10, pageSize: 1 }, docTime : " ", docTitle : '暂无数据', docMan: '', content: '', contentStr: '<p style="color: #666;line-height: 40px;">暂无数据</p>', openMenuList: [], BaseUrl: '' } }, mounted() { let docType = 1 // let docTypeObj = { // id: id, // docType: 1 // }; // 获取帮助文档列表 this.content = this.contentStr; this.BaseUrl = process.env.VUE_APP_BASE_SYS_API; //this.idDocListLoading = true; axios.get(this.BaseUrl + ":6601/api/v1/document/externalTypeListALL?docType=" + docType).then(res=> { debugger if(res.data.code === 1) { this.allList = res.data.data; if(this.allList && this.allList.length > 0) { this.allList.forEach((item,index) => { if(item.name === '云仓') { this.menuList = item.typeList } }) } } this.idDocListLoading = false; }); // 获取文档内容 // axios.get().then("http://192.168.111.253:6601/api/v1/document/externalShow"); //menuList // if(this.allList.length > 0) { // this.menuList.forEach((item,index) => { // let indexStr = (index + 1).toString(); // this.openMenuList.push(indexStr); // // }); // //console.log(121,this.openMenuList); // } }, methods: { // clickRow(row, column, event) { if(row.type === 2) { this.loading = true; this.content = this.contentStr; this.docTime = " "; this.docTitle = '暂无数据'; this.docMan = ""; axios.get(this.BaseUrl + ":6601/api/v1/document/externalShow?id=" + row.id + "&docType=" + row.docType).then(res=> { if(res.data.code === 1) { this.content = res.data.data.value; this.docTitle = res.data.data.title; this.docTime = res.data.data.modifyTime; this.docMan = "运营团队"; } this.loading = false; }) } }, showText(val) { //this.show = false; // if(val['content']) { // this.content = val['content']; // //this.show = true; // } // console.log(142,val); } } } </script> <style lang="scss" type="text/stylus" scoped> ::v-deep .el-card__header p { font-size: 18px; } ::v-deep .el-card__body { padding: 10px 0 10px 0; height: calc(100% - 45px); overflow :hidden; } .content-menu { height: 100%; overflow: hidden; } .menu { height :100%; overflow-x : scroll; overflow-y : scroll; padding: 0 0 0 10px; border-right: 1px solid #DCDFE6; .el-menu { border: none; } } .pre-title { padding-right:50px; border-bottom: 1px solid #DCDFE6; } .content-text { height: 100%; padding: 0 20px; } .ql-container { height : calc(100% - 59px); overflow: hidden; .ql-editor { height :100%; padding: 0 20px; } .ql-editor > div:nth-child(0){ height :100%; .main-text { height: 100%; overflow-x: hidden; overflow-y: scroll; } } } /*样式重置*/ ::v-deep .el-submenu__title { //padding: 0 30px!important; } ::v-deep .el-submenu__title > span { font-size: 16px; } ::v-deep .el-table td { border: none; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style>