MrDoc/template/app_doc/create_doc.html

{% 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 + "/" + 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 %}