MrDoc/template/app_doc/create_doc.html

349 lines
15 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 style="padding-bottom:10px;">
<label class="layui-form-label" style="padding-left:0px;padding-right:0px;"><i class="fa fa-header"></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>
<div class="layui-row">
<div class="layui-col-md4 layui-col-sm6 " style="padding-bottom:10px;">
<label class="doc-form-label">所属文集</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 %}
{% 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 %}
</select>
</div>
</div>
<div class="layui-col-md3 layui-col-sm6" style="padding-bottom:10px;">
<label class="doc-form-label">所属上级</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-md5 layui-col-sm12 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" 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-normal layui-btn-sm" id="sel-local" onclick="selectLocalFile()" title="插入本地文本文件内容">
<i class="fa fa-clipboard"></i> 文本
</button>
</label>
<label class="doc-form-label">
<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveDoc()" title="保存当前内容为草稿文档">
<i class="fa fa-save"></i> 保存
</button>
</label>
<label class="doc-form-label">
<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createDoc()" id="create_doc" title="发布当前内容">
<i class="fa fa-save"></i> 发布
</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>',
content: $('#create-project-div'),
btn:['确定','取消'], //添加按钮
btnAlign:'c', //按钮居中
yes:function (index,layero) {
data = {
'pname':$("#pname").val(),
'desc':$("#desc").val(),
'role':$("#project-role").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("获取下级文档失败!")
}
});
}
});
//带pid参数自动选择文集
var sel_pro_list = $('dl.layui-anim dd');
for(var i = 0;i < sel_pro_list.length; i++){
if(sel_pro_list[i].getAttribute('lay-value') == {{pid}}){
var sel_pro = 'dd[lay-value=' + sel_pro_list[i].getAttribute('lay-value') + ']';
$('#project').siblings("div.layui-form-select").find('dl').find(sel_pro).click();
}
}
//发布文档
createDoc = function(){
var data = {
'project':$("#project").val(),
'parent_doc':$("#parent-doc").val(),
'doc_name':$("#doc-name").val(),
'content':editor.getHTML(),//获取editor解析的HTML
//'content':editor.getPreviewedHTML(),//获取预览的HTML
'pre_content':editor.getMarkdown(),
'sort':$("#sort").val(),
}
console.log(data)
if(data.doc_name == ""){
layer.msg('请输入文档标题!');
}
else if(data.project == ""){
layer.msg('请选择文集!');
}
else{
//发布按钮设为禁用
$("#create_doc").attr({"disabled":"disabled"});
$.post("{% url 'create_doc' %}",data,function(r){
if(r.status){
//创建成功
layer.msg('发布文档成功,即将跳转到文档页面',function(){
md_changed = false;
//跳转到首页
//window.location.href = "{% url 'pro_list' %}";
//跳转到发布的文档
window.location.href = "/project-" + r.data.pro + "/doc-" + r.data.doc
});
}else{
//创建失败
layer.msg('发布文档失败:'+r.data);
//恢复按钮状态
$("#create_doc").removeAttr("disabled");
}
});
}
};
//保存草稿
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块 -->
<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>
<!-- 结束插入文档模板div块 -->
<!-- 新建文集div块 -->
<div style="padding: 20px;display:none;" id="create-project-div">
<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 class="layui-form-item" style="margin-top:10px;">
<label class="layui-form-label" style="text-align:left;padding:9px 0px;">文集权限</label>
<div class="layui-input-block">
<select name="project-role" lay-verify="" class="layui-select" id="project-role">
<!--<option value="">选择文集权限</option>-->
<option value="0">公开</option>
<option value="1">私密</option>
</select>
</div>
</div>
<div style="color:red;font-size:12px;">*在可后台对文集权限进行进一步控制</div>
</div>
<!-- 结束新建文集div块 -->
{% endblock %}