MrDoc/template/app_doc/modify_doc.html

592 lines
25 KiB
HTML
Raw Normal View History

{% extends 'app_doc/create_base_2.html' %}
2020-10-18 08:05:41 +08:00
{% load static %}
{% block title %}修改文档{% endblock %}
{% block editor_type %}修改文档{% endblock %}
{% block custom_style %}
<style>
ul li{
list-style:disc;
}
ul > li > ul > li{
list-style-type: circle;
}
ol li{
list-style-type: decimal;
}
</style>
{% endblock %}
{% block head_toolbar %}
<a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
<i class="fa fa-plus-square"></i> <span class="layui-hide-xs">新建文档</span>
</a>
<a class="btn pull-left" aria-label="" href="{% url 'manage_doc' %}?pid={{project.id}}" target="_blank">
<i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文档</span>
</a>
<a class="btn pull-left" aria-label="" href="{% url 'manage_project' %}" target="_blank">
<i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文集</span>
</a>
{% endblock %}
2020-02-17 23:02:53 +08:00
{% block left_opera %}
<div class="layui-form" style="padding:0 10px 10px 10px;">
<div class="layui-row">
<div class="doc-form-label" style="margin-bottom: 10px;">
{% if doc.status == 0 %}
<strong>*当前文档状态:草稿</strong>
{% elif doc.status == 1 %}
<strong>*当前文档状态:已发布 </strong>
2020-08-30 13:51:26 +08:00
<a class="layui-btn layui-btn-xs layui-btn-normal" target="_blank" href="{% url 'doc' doc.top_doc doc.id %}" style="background-color: #2176ff;">
<i class="fa fa-book"></i> 查看
</a>
<button class="layui-btn layui-btn-xs layui-btn-normal" id="doc-history">
<i class="fa fa-history"></i> 历史
</button>
{% endif %}
</div>
2020-02-17 23:02:53 +08:00
<div class="layui-col-md12" style="margin-bottom: 10px;">
<label class="doc-form-label" style="margin-right:0px;">
2020-07-20 21:38:29 +08:00
<button class="layui-btn layui-btn-primary layui-btn-sm mrdoc-btn-default" id="sel-doctemp" title="插入文档模板">
<i class="fa fa-clipboard"></i> 选择模板
</button>
2019-07-21 22:08:04 +08:00
</label>
<label class="doc-form-label" style="margin-right:0px;">
<input type="file" id="insert-local-file" onchange="insertLocalFile(this)" style="display:none;">
2020-07-20 21:38:29 +08:00
<button class="layui-btn layui-btn-primary layui-btn-sm mrdoc-btn-default" id="sel-local" onclick="selectLocalFile()" title="插入本地文本文件内容">
<i class="fa fa-upload"></i> 导入文本
</button>
</label>
</div>
2020-02-17 23:02:53 +08:00
<div class="layui-col-md12" style="margin-bottom: 10px;">
<div class="layui-input-inblock">
<select name="pro_id" lay-verify="required" lay-filter="project" id="project">
<option value="{{ project.id }}">{{ project.name }}</option>
</select>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12" style="margin-bottom: 10px;">
<span>点击文档树选择上级(可选)或</span>
2020-07-20 21:38:29 +08:00
<button class="layui-btn layui-btn-xs layui-btn-normal" id="clearParentDoc">取消上级</button>
<input type="text" id="parent-doc" hidden>
</div>
<div class="layui-col-md12">
<input type="number" class="layui-input" placeholder="输入文档排序值默认99" id="sort" value="{{doc.sort}}">
</div>
</div>
2020-07-20 21:38:29 +08:00
<div class="layui-collapse" style="margin-top: 10px;margin-bottom: 10px;">
<div class="layui-colla-item">
<h2 class="layui-colla-title">文档结构树</h2>
<div class="layui-colla-content layui-show" style="max-height: 400px;overflow: hidden;overflow-y: scroll;overflow-x: scroll;">
<div id="doc-tree"></div>
</div>
</div>
</div>
<hr>
2020-08-30 13:51:26 +08:00
<!-- 标签输入框 -->
<div class="layui-collapse" style="margin-top: 10px;margin-bottom: 10px;">
<div class="layui-colla-item">
<h2 class="layui-colla-title">标签</h2>
<div class="layui-colla-content layui-show">
<div class="layui-row layui-col-space5" style="padding: 5px;background-color: #fff;">
<input name="tagsinput" id="tagsinputval" class="tagsinput" data-role="tagsinput" value="{{doc_tags}}" placeholder="输入标签名">
</div>
</div>
</div>
2020-07-20 21:38:29 +08:00
</div>
2020-08-30 13:51:26 +08:00
<!-- 发布按钮 -->
<div class="layui-collapse" style="margin-top: 10px;margin-bottom: 10px;">
<div class="layui-colla-item">
<h2 class="layui-colla-title">发布</h2>
<div class="layui-colla-content layui-show">
<div class="layui-row layui-col-space5" style="padding: 5px;background-color: #fff;">
<div class="layui-row" style="margin-top: 5px;">
<button class="layui-btn layui-btn-primary layui-btn-fluid mrdoc-btn-default" onclick="saveDoc()" title="保存当前内容为草稿文档">
<i class="fa fa-save"></i> 保存为草稿
</button>
</div>
<div class="layui-row" style="margin-top: 5px;">
<button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="createDoc()" id="create_doc" title="发布当前内容">
<i class="fa fa-save"></i> 发布文档
</button>
</div>
<div class="layui-row" style="margin-top: 5px;">
<button class="layui-btn layui-btn-warm layui-btn-fluid" onclick="moveDoc()" title="复制或移动此文档到其他文集"><i class="fa fa-copy"></i> 复制/移动文档</button>
</div>
<div class="layui-row" style="margin-top: 5px;">
<button class="layui-btn layui-btn-danger layui-btn-fluid" onclick="delDoc()" title="删除此文档"><i class="fa fa-trash"></i> 删除文档</button>
</div>
</div>
</div>
</div>
2020-07-20 21:38:29 +08:00
</div>
</div>
2020-07-20 21:38:29 +08:00
</div>
{% endblock %}
{% block content %}
<div class="create-doc-form">
<div class="layui-form">
<!-- 标题 -->
<div class="layui-input-block" style="margin-left:0;">
<input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" value="{{ doc.name }}" class="layui-input">
</div>
<br>
2019-07-21 22:08:04 +08:00
</div>
</div>
<div id="editor-md">
<textarea style="display:none;">{{ doc.pre_content }}</textarea>
<textarea class="editormd-html-textarea" name="$id-html-code"></textarea>
</div>
{% endblock %}
2019-07-21 22:08:04 +08:00
{% block custom_script %}
<script>
//获取文档数和上级文档信息
2019-07-22 17:09:13 +08:00
$(function(){
layer.load(1);
2020-07-20 21:38:29 +08:00
var doc_parent_id = '{{ doc.parent_doc }}';
$.post("{% url 'get_pro_doc_tree' %}",{'pro_id':$("#project").val()},function(r){
2019-07-22 17:09:13 +08:00
if(r.status){
layer.closeAll("loading");
var doc_tree = tree.render({
elem:"#doc-tree",
id:'docTree',
onlyIconControl:true,
data:r.data,
click: function(obj){
if(obj.data.level != 3){
console.log(obj.data.id,doc_parent_id)
2020-07-20 21:38:29 +08:00
if(obj.data.id != '{{ doc.id }}' ){
$('#parent-doc').val(obj.data.id);// 设置上级文档
$("div.layui-tree-set").each(function(i){
var $me = $(this)
if($me.data('id') == obj.data.id){
// console.log('点击了')
2020-07-20 21:38:29 +08:00
layer.msg("你选择了上级文档:"+obj.data.title)
$me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
}else{
$me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
}
});
}else{
layer.msg("不可选择自己作为上级")
};
}else{
layer.msg("第三级文档不能作为上级文档")
};
}
});
$('#parent-doc').val(doc_parent_id);// 设置上级文档
$("div.layui-tree-set").each(function(i){
var $me = $(this)
if($me.data('id') == doc_parent_id){
$me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
2019-07-22 17:09:13 +08:00
}else{
$me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
2019-07-22 17:09:13 +08:00
}
});
2019-07-22 17:09:13 +08:00
}else{
layer.msg("获取下级文档失败!")
}
});
});
//发布文档
2019-07-21 22:08:04 +08:00
createDoc = function(){
$('button.layui-btn').attr("disabled",true);
$('button.layui-btn').addClass('layui-btn-disabled');
layer.load(1);
2019-07-21 22:08:04 +08:00
var data = {
2020-07-20 21:38:29 +08:00
'doc_id':'{{ doc.id }}',
2019-07-21 22:08:04 +08:00
'project':$("#project").val(),
'parent_doc':$("#parent-doc").val(),
2020-08-30 13:51:26 +08:00
'doc_tag':$("#tagsinputval").val(),
2019-07-21 22:08:04 +08:00
'doc_name':$("#doc-name").val(),
'content':editor.getHTML(),
//'content':editor.getPreviewedHTML(),
2019-07-21 22:08:04 +08:00
'pre_content':editor.getMarkdown(),
'sort':$("#sort").val(),
};
2019-07-21 22:08:04 +08:00
$.post("{% url 'modify_doc' doc_id=doc.id %}",data,function(r){
layer.closeAll("loading");
2019-07-21 22:08:04 +08:00
if(r.status){
//修改成功
layer.msg('发布成功,即将跳转',function(){
2020-02-24 21:05:08 +08:00
md_changed = false;
2019-07-21 22:08:04 +08:00
window.location.href = "{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}";
});
}else{
//修改失败
layer.msg('保存失败');
$('button.layui-btn').attr("disabled",false);
$('button.layui-btn').removeClass('layui-btn-disabled');
}
});
};
//保存草稿
saveDoc = function(){
$('button.layui-btn').attr("disabled",true);
$('button.layui-btn').addClass('layui-btn-disabled');
layer.load(1);
var data = {
2020-07-20 21:38:29 +08:00
'doc_id':'{{ doc.id }}',
'project':$("#project").val(),
2020-08-30 13:51:26 +08:00
'doc_tag':$("#tagsinputval").val(),
'parent_doc':$("#parent-doc").val(),
'doc_name':$("#doc-name").val(),
'content':editor.getHTML(),
'pre_content':editor.getMarkdown(),
'sort':$("#sort").val(),
'status':0
}
$.post("{% url 'modify_doc' doc_id=doc.id %}",data,function(r){
layer.closeAll("loading");
if(r.status){
//修改成功
layer.msg('保存成功',function(){
md_changed = false;
window.location.href = "{% url 'modify_doc' doc.id %}";
});
2019-07-21 22:08:04 +08:00
}else{
//修改失败
2019-07-21 22:08:04 +08:00
layer.msg('保存失败');
$('button.layui-btn').attr("disabled",false);
$('button.layui-btn').removeClass('layui-btn-disabled');
2019-07-21 22:08:04 +08:00
}
});
};
//选择文档模板
$("#sel-doctemp").click(function(){
layer.open({
type: 1,
id:'temp-div',
2020-07-20 21:38:29 +08:00
content: $('#doctemp-list'),
area:['530px','400px'],
});
});
//插入模板
insertTemp = function(doctemp_id){
layer.load();
$.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
if(r.status){
editor.insertValue(r.data);
layer.closeAll()
}else{
layer.closeAll("loading");
layer.msg(r.data)
}
});
};
//插入本地文本文件
function insertLocalFile(input) {
var file = input.files[0];
//filename = file.name.split(".")[0]; // 文件名
//支持chrome IE10
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
editor.insertValue(this.result);
}
reader.readAsText(file);
}
//支持IE 7 8 9 10
else if (typeof window.ActiveXObject != 'undefined'){
var xmlDoc;
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(input.value);
console.log(xmlDoc.xml);
editor.insertValue(xmlDoc.xml);
}
//支持FF
else if (document.implementation && document.implementation.createDocument) {
var xmlDoc;
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(input.value);
console.log(xmlDoc.xml);
editor.insertValue(xmlDoc.xml);
} else {
alert('error');
}
};
//选择本地文本文件
function selectLocalFile(){
$("#insert-local-file").trigger("click");
};
// 查看历史记录
$("#doc-history").click(function(){
layer.open({
type: 1,
2020-07-20 21:38:29 +08:00
title:'查看当前文档的历史版本',
id:'history-div',
content: $('#history-list'),
area:['530px','300px'],
});
});
//清除所选上级文档
$("#clearParentDoc").click(function(){
$('#parent-doc').val("");
$("span.layui-tree-txt").each(function(i){
var $me = $(this)
$me.removeClass('selected-parent-doc')
});
});
// 插入历史版本
insertHistory = function(doc_id,history_id){
layer.load(1);
var url = "{% url 'diff_doc' 0 1 %}";
url = url.replace(0,doc_id).replace(1,history_id)
$.post(url,function(r){
layer.closeAll("loading");
if(r.status){
editor.setMarkdown(r.data);
}else{
layer.msg(r.data)
}
});
};
// 删除文档
delDoc = function(doc_id){
layer.open({
type:1,
title:'删除文档',
area:'300px;',
id:'delPro',//配置ID
content:'<div style="margin-left:10px;">警告:此操作将删除此文档!</div>',
btn:['确定','取消'], //添加按钮
btnAlign:'c', //按钮居中
yes:function (index,layero) {
layer.load(1);
data = {
2020-07-20 21:38:29 +08:00
'doc_id':'{{ doc.id }}',
};
$.post("{% url 'del_doc' %}",data,function(r){
layer.closeAll('loading')
if(r.status){
//修改成功
layer.msg("文档已删除,即将跳转至文集")
// window.location.reload();
window.location.href = "{% url 'pro_index' doc.top_doc %}"
//layer.close(index)
}else{
//修改失败,提示
// console.log(r)
layer.msg(r.data)
}
})
},
});
};
// 移动文档
moveDoc = function(doc_id){
layer.open({
type:1,
title:'复制或移动此文档到指定文集',
id:'moveDoc',
area:'450px;',
content:$('#move-project'),
success:function(layero,index){
form.render(null, 'move-projects'); // 重新渲染弹出框的表单
// 移动文集 - 侦听选择文集 - 获取文集的文档
form.on('select(moveProject)', function(data){
// console.log(data.value); //得到被选中的值
$('#move-parent-id').val(0);
//获取文集的下级文档
$.post("{% url 'get_pro_doc_tree' %}",{'pro_id':data.value},function(r){
if(r.status){
var doc_tree = tree.render({
elem:"#move-doc-tree",
id:'moveDocTree',
onlyIconControl:true,
data:r.data,
text: {
defaultNodeName: '未命名' //节点默认名称
,none: '文集暂无文档' //数据为空时的提示文本
},
click: function(obj){
if(obj.data.level != 3){
$('#move-parent-id').val(obj.data.id);// 设置上级文档
$("div.layui-tree-set").each(function(i){
var $me = $(this)
if($me.data('id') == obj.data.id){
// console.log('点击了')
layer.msg("选择了上级文档:"+obj.data.title)
$me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
}else{
$me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
}
});
}else{
layer.msg("第三级文档不能作为上级文档")
}
}
});
}else{
layer.msg("获取下级文档失败!")
}
});
});
},
})
};
// 提交移动文档
submitMoveDoc = function(){
var data = {
move_type:$("input:radio[name='move-type']:checked").val(),
pro_id:$("#moveProject").val(),
parent_id:$("#move-parent-id").val(),
doc_id:'{{doc.id}}'
};
if(data.pro_id === ''){
layer.msg("必须选择一个文集")
return
}
console.log(data)
layer.load(1)
$.post("{% url 'move_doc' %}",data,function(r){
layer.closeAll('loading')
if(r.status){
window.location.href = '/project-'+r.data.pro_id + '/doc-' + r.data.doc_id + '/'
}else{
layer.msg(r.data)
}
});
};
2019-07-21 22:08:04 +08:00
</script>
{% endblock %}
{% block custom_div %}
<!-- 模板div块 -->
<div class="doctemp-list" id="doctemp-list" style="display: none;width: 500px;">
<div style="margin: 10px 0 0 10px;">
2020-07-20 21:38:29 +08:00
<a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'create_doctemp' %}" target="_blank">创建新模板</a>
<a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_doctemp' %}" target="_blank">管理文档模板</a>
</div>
<table class="layui-table" style="margin: 10px;">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>模板名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for temp in doctemp_list %}
<tr>
<td>{{ temp.name }}</td>
<td>{{ temp.create_time }}</td>
<td>
<a href="javascript:void(0);" class="layui-btn layui-btn-normal layui-btn-sm" onclick="insertTemp('{{temp.id}}');">选择模板</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- 文档历史div块 -->
<div class="history-list" id="history-list" style="display: none;width: 500px;">
<table class="layui-table" style="margin: 10px;" lay-size='sm'>
<thead>
<tr>
<th>创建时间</th>
<th>用户</th>
<th>对比</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for history in history_list %}
<tr>
<td>{{ history.create_time }}</td>
<td>{{ history.create_user }}</td>
<td>
2020-07-20 21:38:29 +08:00
<a href="{% url 'diff_doc' history.doc.id history.id %}" class="layui-btn layui-btn-primary layui-btn-sm" target="_blank">查看版本差异</a>
</td>
<td>
<a href="javascript:void(0);" class="layui-btn layui-btn-normal layui-btn-sm" onclick="insertHistory('{{history.doc.id}}','{{history.id}}');">恢复此版本</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- 移动文档div块 -->
<div class="layui-form" id="move-project" style="display: none;width: 400px;height: 500px;" lay-filter='move-projects'>
<div class="layui-col-md12" style="margin: 10px;">
<div class="layui-form-item">
<!-- <label class="layui-form-label">操作类型</label> -->
<div class="layui-input-block" style="margin-left: 0px;">
<input type="radio" name="move-type" value="0" title="复制" checked>
<input type="radio" name="move-type" value="1" title="移动">
<input type="radio" name="move-type" value="2" title="移动(含下级文档)">
</div>
</div>
<input id="move-parent-id" hidden value="0" />
<div class="layui-input-inblock">
<select name="move_pro_id" lay-filter="moveProject" id="moveProject">
<option value="">请选择一个文集(必选)</option>
<!-- 自己的文集 -->
<optgroup label="自有文集" id="self-project">
{% for p in project_list %}
{% if p.role == 1 %}
<option value="{{ p.id }}">[私密]《{{ p.name }}》</option>
{% elif p.role == 2 %}
<option value="{{ p.id }}" >[指定用户]《{{ p.name }}》</option>
{% elif p.role == 3 %}
<option value="{{ p.id }}" >[访问码]《{{ p.name }}》</option>
{% else %}
<option value="{{ p.id }}" >[公开]《{{ p.name }}》</option>
{% endif %}
{% endfor %}
</optgroup>
<!-- 协作的文集 -->
{% if colla_project_list.count > 0 %}
<optgroup label="协作文集">
{% for p in colla_project_list %}
<option value="{{ p.project.id }}">[协作]《{{ p.project.name }}》</option>
{% endfor %}
</optgroup>
{% endif %}
</select>
</div>
</div>
2020-07-31 20:23:23 +08:00
<div class="layui-col-md12" style="max-height: 380px;overflow: hidden;overflow-y: scroll;overflow-x: scroll;">
<div id="move-doc-tree"></div>
</div>
<div class="layui-col-md12" style="margin: 10px;">
<button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="submitMoveDoc()">确认操作</button>
</div>
<div class="layui-col-md12" style="margin: 10px;">
<span style="font-size: 12px;color:mediumvioletred;">警告MrDoc仅支持3级目录显示若移动的下级文档层级在目标文集中超过3层将不会显示在文集目录中</span>
</div>
</div>
{% endblock %}