Mrdoc/template/app_doc/create_doc.html

296 lines
12 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.html' %}
{% load staticfiles %}
{% block title %}新建文档{% endblock %}
{% block subtitle %}新建文档{% endblock %}
{% block content %}
<div class="create-doc-form">
<div class="layui-form" style="">
<!-- 标题 -->
<div>
<label class="layui-form-label" style="padding-left:0px;padding-right:0px;"><i class="layui-icon layui-icon-edit"></i> 文档标题</label>
<div class="layui-input-block" style="margin-left:95px;">
<input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" autocomplete="off" class="layui-input">
</div>
</div><br>
<div class="layui-row">
<div class="layui-col-md4 layui-col-sm6 " style="padding-bottom:10px;">
<label class="doc-form-label"><i class="fa fa-file-text"></i> 所属文集</label>
<div class="layui-input-inline">
<select name="pro_id" lay-verify="required" lay-filter="project" id="project">
<option value=""></option>
<option value="-1">新建文集</option>
{% for p in project_list %}
<option value="{{ p.id }}">《{{ p.name }}》</option>
{% endfor %}
</select>
</div>
</div>
<div class="layui-col-md4 layui-col-sm6" style="padding-bottom:10px;">
<label class="doc-form-label"><i class="fa fa-chevron-circle-up"></i> 所属上级</label>
<div class="layui-input-inline">
<select name="parent_id" lay-verify="required" id="parent-doc">
<option value=""></option>
</select>
</div>
</div>
<div class="layui-col-md4 layui-col-sm6 layui-col-xs12" style="padding-bottom:10px;">
<label class="doc-form-label"><i class="fa fa-list-ol"></i> 文档排序</label>
<div class="layui-input-inline">
<input class="layui-input" placeholder="99" style="width:50px;" name="sort" id="sort"/>
</div>
<label class="doc-form-label" style="margin-right:0px;">
<button class="layui-btn layui-btn-normal layui-btn-sm" id="sel-doctemp">插入模板</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-normal layui-btn-sm" id="sel-local" onclick="selectLocalFile()">插入本地文本</button>
</label>
</div>
<div class="layui-row">
<label class="doc-form-label">
<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveDoc()">保存草稿</button>
</label>
<label class="doc-form-label">
<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createDoc()">发布文档</button>
</label>
</div>
</div>
</div>
</div>
<div id="editor-md" class="layui-col-xs12">
<textarea style="display:none;"></textarea>
<textarea class="editormd-html-textarea" name="$id-html-code"></textarea>
</div>
{% endblock %}
{% block custom_script %}
<script>
//选择文集
form.on('select(project)', function(data){
console.log(data.value); //得到被选中的值
if(data.value == -1){ //新建文集
layer.open({
type:1,
title:'新建文集',
area:'300px;',
id:'createPro',//配置ID
content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介不超过100个字超出将被截断" maxlength="100" class="layui-textarea"></textarea></div>',
btn:['确定','取消'], //添加按钮
btnAlign:'c', //按钮居中
yes:function (index,layero) {
data = {
'pname':$("#pname").val(),
'desc':$("#desc").val(),
}
$.post("{% url 'create_project' %}",data,function(r){
if(r.status){
//创建成功更新文集select
$("#project").append("<option value="+r.data.id+">《"+r.data.name+"》</option>");
form.render();
//window.location.reload();
layer.close(index)
}else{
//创建失败,提示
console.log(r)
}
})
},
});
}else{//获取文集的下级文档
$.post('{% url 'get_pro_doc' %}',{'pro_id':data.value},function(r){
if(r.status){
//解析文集的下级文档
//console.log(r.data)
$("#parent-doc").empty(); // 清空select选项
$("#parent-doc").append("<option value=''></option>")
for(let i in r.data) {
$("#parent-doc").append("<option value='"+r.data[i][0]+"'>"+r.data[i][3]+r.data[i][1]+"</option>")
};
form.render();
}else{
layer.msg("获取下级文档失败!")
}
});
}
});
//保存文档
createDoc = function(){
var data = {
'project':$("#project").val(),
'parent_doc':$("#parent-doc").val(),
'doc_name':$("#doc-name").val(),
'content':editor.getHTML(),
'pre_content':editor.getMarkdown(),
'sort':$("#sort").val(),
}
console.log(data)
if(data.doc_name == ""){
layer.msg('请输入文档标题!');
}
else if(data.project == ""){
layer.msg('请选择文集!');
}
else{
$.post("{% url 'create_doc' %}",data,function(r){
if(r.status){
//创建成功
layer.msg('发布成功',function(){
window.location.href = "{% url 'pro_list' %}";
});
}else{
//创建失败
layer.msg('保存失败:'+r.data);
}
});
}
};
//保存文档草稿
saveDoc = function(){
var data = {
'project':$("#project").val(),
'parent_doc':$("#parent-doc").val(),
'doc_name':$("#doc-name").val(),
'content':editor.getHTML(),
'pre_content':editor.getMarkdown(),
'sort':$("#sort").val(),
'status':0
}
console.log(data)
if(data.doc_name == ""){
layer.msg('请输入文档标题!');
}
else if(data.project == ""){
layer.msg('请选择文集!');
}
else{
$.post("{% url 'create_doc' %}",data,function(r){
if(r.status){
//创建成功
layer.msg('保存成功',function(){
window.location.href = "/modify_doc/"+r.data+"/";
});
}else{
//创建失败
layer.msg('保存失败:'+r.data);
}
});
}
};
//选择文档模板
$("#sel-doctemp").click(function(){
layer.open({
type: 1,
id:'temp-div',
content: $('#doctemp-list'),
//area:['530px','300px'],
area:['50%','50%'],
});
});
//插入模板
insertTemp = function(doctemp_id){
$.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
if(r.status){
editor.insertValue(r.data);
layer.closeAll()
}else{
layer.msg(r.data)
}
});
};
//删除模板
delTemp = function(doctemp_id){
layer.open({
title:'删除模板',
content:'确认删除此模板?',
btn:['确定','取消'],
yes:function(index,layero){
},
});
};
//插入本地文本文件
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");
};
</script>
{% endblock %}
{% block custom_div %}
<div class="doctemp-list " id="doctemp-list" style="display: none;padding:5px;">
<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;width:90%;">
<colgroup>
<col width="">
<col width="">
<col>
</colgroup>
<thead>
<tr>
<th>模板名称</th>
<th class="layui-hide-xs">创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for temp in doctemp_list %}
<tr>
<td>{{ temp.name }}</td>
<td class="layui-hide-xs">{{ temp.create_time }}</td>
<td>
<a class="layui-btn layui-btn-normal layui-btn-sm" href="javascript:void(0);" onclick="insertTemp('{{temp.id}}');">选择模板</a>
{# <a href="javascript:void(0);" onclick="modifyTemp();">修改</a>#}
{# <a href="javascript:void(0);" onclick="delTemp();">删除</a>#}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}