projectmanager/app/knowledge/view/index/doc_detail.html

{extend name="../../base/view/common/base" /}
{block name="style"}
<link rel="stylesheet" href="{__METE__}/third_party/prism/prism.css?v=1"/>
<link rel="stylesheet" href="{__STATIC__}/viewer/viewer.min.css?v=1"/>
<link rel="stylesheet" href="{__STATIC__}/ztree/css/metroStyle/metroStyle.css" >
<style>
.content-chapter{width:300px; position:fixed; top:50px; left:60px; bottom:0; overflow: hidden; border-right:1px solid #e5ecf0; background-color:#F5F8FA;}
.content-text{margin-left:300px; padding:16px 32px; /*max-width:900px;*/}
.menu-title span{font-size:12px; font-weight:400}
.tree-menu{height:calc(100% - 145px); overflow-y: scroll; overflow-x: hidden;}

.editormd-preview2{font-size:16px; line-height:1.72; background-color:#fff;}
.editormd-html-preview code, .editormd-preview-container code {padding:2px; border-radius:2px; font-size:14px; font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.editormd-html-preview, .editormd-preview-container .code-toolbar{font-size:14px;}
.editormd-preview2 li {list-style: initial;}
.editormd-html-preview pre, .editormd-preview-container pre{border: 1px solid #f6f6f6; font-size:14px;}
</style>
{/block}
{block name="breadcrumb"}
<span class="layui-breadcrumb">
  <a href="http://www.meteteme.com/" target="_blank">江苏美天科技</a>
  <a href="/knowledge/index/index">知识库</a>
  <a><cite>知识详情</cite></a>
</span>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="main-content">
	{empty name="$info"}
	<div style="padding:200px 0 0; width:100%; min-height:500px; text-align:center; font-size:30px; color:#999">暂无文档内容</div>
	{else/}
	<div class="content-chapter">
		<div class="p-4">
			<h4>{$detail['title']}</h4>
			<p class="font-gray py-4">创建人：{$detail['user']}</p>
			<h5 class="menu-title">目录<span class="font-gray">（{$detail['count']}）</span></h5>
		</div>
		<div class="tree-menu px-4">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
	<div class="content-text">		
		<!-- <div class="pb-4"><h2 id="infoTilte">{$info.title}</h2></div> -->
		<div class="editormd-preview2">
			<div class="markdown-body" id="infoContent">
			{$info.content|raw}
			</div>
		</div>
		<div class="end-tip">
			--  内容展示完毕 --
		</div>
	</div>
	{/empty}
</div>
{/block}
<!-- /主体 -->
{block name="footer"}{/block}
<!-- 脚本 -->
{block name="script"}
<script src="{__STATIC__}/ztree/js/jquery.ztree.all.min.js?v=1"></script>
<script src="{__STATIC__}/viewer/viewer.min.js?v=1"></script>
<script src="{__METE__}/third_party/prism/prism.js?v=1"></script>
<script>
var kid='{$kid}';
var did='{$id}';
var treeObj = null;
var zNodes =[
	{ id:1, pId:0, name:"文档", open:true}
];

const moduleInit = ['tool'];
function gouguInit() {
	var layer = layui.layer;
	var tool = layui.tool;
	
	var viewer = new Viewer(document.getElementById('infoContent'));
	var $codepre = $("code[class]");
	if($codepre.length>0){
		for(var i = 0;i<$codepre.length;i++){
			var item = $codepre.eq(i).parent();
			item.addClass("line-numbers");
		}
	}
	
	var setting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: zTreeOnClick
		}
	};
	function zTreeOnClick(event, treeId, treeNode) {
		let type=treeNode.type;
		let id=treeNode.id;
		if(type==1){
			detail(id);
		}
		if(type == 2){
			treeObj.expandNode(treeNode, !treeNode.open, false, true);
		}
		if(type == 3){
			window.open(treeNode.link);
		}
	};
	
	let treeback = function(e){
		if (e.code == 0) {
			zNodes = e.data;
			treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
			treeObj.expandAll(true);
			if(did>0){
				var node = treeObj.getNodeByParam("id", did, null);
				treeObj.selectNode(node);
			}
		} else {
			layer.msg(e.msg);
		}
	}
	tool.get("/api/index/get_doc_list",{kid:kid,tree:2},treeback);

	function detail(id){
		viewer.destroy();
		let detailback = function(e){
			if (e.code == 0) {
				history.pushState({},e.data.title,window.location.protocol+'//'+window.location.host+'/knowledge/index/doc_detail/kid/'+kid+'/id/'+id+'.html');
				$('#infoTilte').html(e.data.title);
				$('#infoContent').html(e.data.content);				
				document.body.scrollTop=document.documentElement.scrollTop=0
				var $codepre = $('#infoContent').find("code[class]");
				if($codepre.length>0){
					for(var i = 0;i<$codepre.length;i++){
						var item = $codepre.eq(i).parent();
						item.addClass("line-numbers").addClass('lang-javascript');
					}
					Prism.highlightAll();
				}
				viewer = new Viewer(document.getElementById('infoContent'));
			} else {
				layer.msg(e.msg);
			}
		}
		tool.get("/knowledge/index/doc_detail",{id:id},detailback);
	}
}
</script>
{/block}
<!-- /脚本 -->