MrDoc/template/app_doc/modify_doc_vditor.html
2020-10-18 08:05:41 +08:00

591 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends 'app_doc/create_base_vditor.html' %}
{% 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 %}
{% 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>
<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>
<div class="layui-col-md12" style="margin-bottom: 10px;">
<!-- <label class="doc-form-label" style="margin-right:0px;">
<button class="layui-btn layui-btn-primary layui-btn-sm mrdoc-btn-default" id="sel-doctemp" title="插入文档模板">
<i class="fa fa-clipboard"></i> 选择模板
</button>
</label>
<label class="doc-form-label" style="margin-right:0px;">
<input type="file" id="insert-local-file" onchange="insertLocalFile(this)" style="display:none;">
<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>
<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>
<button class="layui-btn layui-btn-xs layui-btn-primary" 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>
<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>
<!-- 标签输入框 -->
<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>
</div>
<!-- 发布按钮 -->
<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>
</div>
</div>
</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>
</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 %}
{% block custom_script %}
<script>
//获取文档数和上级文档信息
$(function(){
layer.load(1);
var doc_parent_id = '{{ doc.parent_doc }}';
$.post("{% url 'get_pro_doc_tree' %}",{'pro_id':$("#project").val()},function(r){
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)
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('点击了')
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')
}else{
$me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
}
});
}else{
layer.msg("获取下级文档失败!")
}
});
});
//发布文档
createDoc = function(){
$('button.layui-btn').attr("disabled",true);
$('button.layui-btn').addClass('layui-btn-disabled');
layer.load(1);
var data = {
'doc_id':'{{ doc.id }}',
'project':$("#project").val(),
'parent_doc':$("#parent-doc").val(),
'doc_tag':$("#tagsinputval").val(),
'doc_name':$("#doc-name").val(),
'content':editor.getHTML(),
'pre_content':editor.getValue(),
'sort':$("#sort").val(),
};
$.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 '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 = {
'doc_id':'{{ doc.id }}',
'project':$("#project").val(),
'doc_tag':$("#tagsinputval").val(),
'parent_doc':$("#parent-doc").val(),
'doc_name':$("#doc-name").val(),
'content':editor.getHTML(),
'pre_content':editor.getValue(),
'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 %}";
});
}else{
//修改失败
layer.msg('保存失败');
$('button.layui-btn').attr("disabled",false);
$('button.layui-btn').removeClass('layui-btn-disabled');
}
});
};
//选择文档模板
$("#sel-doctemp").click(function(){
layer.open({
type: 1,
id:'temp-div',
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,
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 = {
'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)
}
});
};
</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;">
<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>
<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>
<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 %}