vuejs+freemark 解决单一页面维护调查问卷

龙影 发布于 2017/01/04 11:56
阅读 1K+
收藏 0
<#include "../../_inc/_layout.html"/>
<#macro css>
    .red{color:red;}
    .input{
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        margin-right:5px;
        margin-left:5px;
    }
    .text{
        width: 400px;
    }
    .score{
        width: 50px;
    }
    .question .title{
        background-color: #bad8f5;
        padding:5px;
    }
    .question{
        border: 1px solid #ccc;
        margin-top:5px;
        margin-bottom:5px;
    }
    .item{
        border-top: 1px solid #ccc;
        margin-top:5px;
        margin-bottom:5px;
        padding:5px;
    }
    .itemItem{
        margin-top:5px;
        margin-bottom:5px;
        padding:5px;
    }
    /*单选、多选、开关*/
    .aui-radio,
    .aui-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ffffff;
    border: solid 1px #dddddd;
    -webkit-border-radius: 0.6rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background-color ease 0.1s;
    transition: background-color ease 0.1s;
    }

    .aui-checkbox {
    border-radius: 0.1rem;
    }

    .aui-radio:checked,
    .aui-radio.aui-checked,
    .aui-checkbox:checked,
    .aui-checkbox.aui-checked {
    background-color: #03a9f4;
    border: solid 1px #03a9f4;
    text-align: center;
    background-clip: padding-box;
    }

    .aui-radio:checked:before,
    .aui-radio.aui-checked:before,
    .aui-checkbox:checked:before,
    .aui-checkbox.aui-checked:before,
    .aui-radio:checked:after,
    .aui-radio.aui-checked:after,
    .aui-checkbox:checked:after,
    .aui-checkbox.aui-checked:after {
    content: '';
    width: 0.5rem;
    height: 0.3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.25rem;
    margin-top: -0.25rem;
    background: transparent;
    border: 1px solid #ffffff;
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }

    .aui-radio:disabled,
    .aui-radio.aui-disabled,
    .aui-checkbox:disabled,
    .aui-checkbox.aui-disabled {
    background-color: #dddddd;
    border: solid 1px #dddddd;
    }

    .aui-radio:disabled:before,
    .aui-radio.aui-disabled:before,
    .aui-radio:disabled:after,
    .aui-radio.aui-disabled:after,
    .aui-checkbox:disabled:before,
    .aui-checkbox.aui-disabled:before,
    .aui-checkbox:disabled:after,
    .aui-checkbox.aui-disabled:after {
    content: '';
    width: 0.5rem;
    height: 0.3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.25rem;
    margin-top: -0.25rem;
    background: transparent;
    border: 1px solid #ffffff;
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }
</#macro>
<#macro css_import>
</#macro>
<#macro script_import>
    <script src="/static/laydate/laydate.js"></script>
    <script src="/static/vue.min.js"></script>
</#macro>
<#macro script>
    var jsonData={questionList:[{itemList:[{}],show:true,type:0}],title:"",anonymous:0,gradClass:[{text:'',classList:[{text:''}]}],partment:[{text:''}]};
    function doSubmit(){
        jsonData.gradClassJson=JSON.stringify(jsonData.gradClass);
        jsonData.partmentJson=JSON.stringify(jsonData.partment);
        console.log(JSON.stringify(jsonData));
        $("#form").ajaxSubmit({
            type : "post",
            dataType : "json",
            data:{json:JSON.stringify(jsonData)},
            success : function(data) {
                if(data.errorCode == 0){
                    location.href="/admin/vote/paper";
                }else{
                    toastr.error(data.message);
                }
            },
            error : function() {
                toastr.error("信息提交错误");
            }
        });
    }
    $.ajax({url:'/admin/vote/paper/json/${id!}',dataType:'json',type:'GET',success:function(ret){
        jsonData=ret.data;
        if(ret.data.gradClassJson!=null&&ret.data.gradClassJson!=''){
            jsonData.gradClass=JSON.parse(ret.data.gradClassJson);
        }
        if(jsonData.gradClass==undefined){
            jsonData.gradClass=[{text:'',classList:[{text:''}]}];
        }
        if(ret.data.partmentJson!=null&&ret.data.partmentJson!=''){
            jsonData.partment=JSON.parse(ret.data.partmentJson);
        }
        if(jsonData.partment==undefined){
            jsonData.partment=[{text:''}];
        }
        if(jsonData.questionList==undefined){
            jsonData.questinoList.push({itemList:[{}],show:true,type:0});
        }else{
            for(var i=0;i< jsonData.questionList.length;i++){
                jsonData.questionList[i].show=true;
                if(jsonData.questionList[i].itemList==undefined){
                    jsonData.questinoList.itemList=[{}];
                }else if(jsonData.questionList[i].itemList.length==0){
                    jsonData.questionList[i].itemList.push({});
                }
            }
        }
        if(jsonData.logo==undefined||jsonData.logo==''){
            jsonData.logo='/static/logo_yg.png';
        }
        var vm=new Vue({
            el:"#vm",
            data:jsonData,
            methods:{
                delQuestion:function(questionList,$index){
                    $.ajax({url:'/admin/vote/paper/delQuestion/'+questionList[$index].id,dataType:'json',success:function(ret){
                        if(ret.errorCode==0){
                                questionList.splice($index,1);
                        }else{
                            toastr.error(data.message);
                        }
                    }});
                },
                delItem:function(itemList,$index){
                    $.ajax({url:'/admin/vote/paper/delItem/'+itemList[$index].id,dataType:'json',success:function(ret){
                        if(ret.errorCode==0){
                            itemList.splice($index,1);
                        }else{
                            toastr.error(data.message);
                        }
                    }});
                }
            }
        });
    }});

</#macro>
<@layout active_id=p child_active_id=c>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>调查问卷</h1>
</section>
<!-- Main content -->
<section class="content" id="vm">
    <form action="${CPATH}/admin/vote/paper/save" method="post" id="form">
        <div class="row">
            <div class="col-xs-12">
                <a onclick="doSubmit()" class="btn btn-primary"><i class="fa fa-save"></i>保存更改</a>
                <a href="/admin/vote/paper?c=${c!}&p=${p!}" class="btn btn-default"><i class="fa fa-reply"></i>返回</a>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="row">
                <ul class="list-unstyled">
                    <li class="jp-set-pad">
                        标题
                                <input class="input input-md text" style="width:100%;" type="text" v-model="title"
                                       maxlength="50" placeholder="填写标题">
                    </li>
                    <li class="jp-set-pad">
                        <label><input v-model="anonymous" class="aui-checkbox" name="anonymous" type="checkbox"
                                      v-bind:true-value="1"
                                      v-bind:false-value="0">匿名</label>
                        <label><input v-model="stuInfo" class="aui-checkbox" name="stuInfo" type="checkbox"
                                      v-bind:true-value="1"
                                      v-bind:false-value="0">填写学生信息</label>
                        <label><input v-model="employee" class="aui-checkbox" name="employee" type="checkbox"
                                      v-bind:true-value="1"
                                      v-bind:false-value="0">填写员工信息</label>
                        <label><input v-model="saScore" class="aui-checkbox" name="saScore" type="checkbox"
                                      v-bind:true-value="1"
                                      v-bind:false-value="0">统计分数</label>
                    </li>
                    <li class="jp-set-pad" v-if="stuInfo==1">
                        班级设置
                        <div v-for="grad in gradClass">
                            <p>
                                年级<input type="text" v-model="grad.text">
                                <a href="javascript:void(0);" class="btn btn-default btn-sm" v-on:click="grad.classList.push({text:''})"><i class="fa fa-plus"></i>添加班级</a>
                                <a href="javascript:void(0);" class="btn btn-default btn-sm" v-on:click="gradClass.splice($index,1)"><i class="fa fa-trash red"></i>删除年级</a>
                            </p>
                            <p v-for="class in grad.classList">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            班级<input type="text" v-model="class.text"><a href="javascript:void(0);" class="btn btn-default btn-sm" v-on:click="grad.classList.splice($index,1)"><i class="fa fa-trash red"></i>删除班级</a>
                            </p>
                        </div>
                        <a href="javascript:void(0);" class="btn btn-default" v-on:click="gradClass.push({text:'',classList:[{text:''}]})"><i class="fa fa-plus"></i>添加年级</a>
                    </li>
                    <li class="jp-set-pad" v-if="employee==1">
                        部门设置
                        <div v-for="grad in partment">
                            <p>
                                部门<input type="text" v-model="grad.text">
                            </p>
                        </div>
                        <a href="javascript:void(0);" class="btn btn-default" v-on:click="partment.push({text:''})"><i class="fa fa-plus"></i>添加部门</a>
                    </li>
                    <li class="jp-set-pad">
                        图片
                        <input class="input input-md text" style="width:100%;" type="text" v-model="logo" placeholder="设置问卷顶部图片地址"
                               maxlength="200">
                    </li>
                    <!--
                    <li class="jp-set-pad">
                        背景色
                        <input class="input input-md text" style="width:100%;" type="text" v-model="bgColor"
                               maxlength="50">
                    </li>

                    <li class="jp-set-pad">
                        背景图片
                        <input class="input input-md text" style="width:100%;" type="text" v-model="bgImg"
                               maxlength="50">
                    </li>
                    -->
                    <li class="jp-set-pad">
                        <p>问卷描述内容</p>
                        <textarea class="text" rows="5" style="width:100%;" v-model="content" placeholder="问卷描述内容">
                        </textarea>
                    </li>
                </ul>
            </div>
            <div class="row" v-for="question in questionList">
                <div class="question">
                    <div class="title">
                        问题{{$index+1}}
                        <input type="text" class="input text" v-model="question.question">
                        <a class="btn btn-default" href="javascript:void(0);" v-on:click="question.show=(question.show==true)?false:true"><span v-show="question.show!=true">编辑</span><span v-show="question.show==true">收起</span></a>
                        <a class="btn btn-danger" v-if="questionList.length>1" href="javascript:void(0);" v-on:click="delQuestion(questionList,$index)"><i class="fa fa-trash"></i></a>
                    </div>
                    <!--v-on:click="questionList.splice($index,1)"-->
                    <div class="item" v-show="question.show">
                        <div>
                            <label><input type="radio" class="aui-radio" v-model="question.type" value="0">单选</label>
                            <label><input type="radio" class="aui-radio" v-model="question.type" value="1">多选</label>
                            <label><input type="radio" class="aui-radio" v-model="question.type" value="2">填写</label>
                        </div>
                        <div class="itemOption" v-if="question.type!=2" v-for="item in question.itemList">
                            选项{{$index+1}}:<input type="text" class="input text" v-model="item.item"><span v-if="saScore==1">分值<input type="number" class="input score" v-model="item.score" placeholder="分值"></span>
                            <label v-if="$index==(question.itemList.length-1)"><input type="checkbox" class="aui-checkbox" v-bind:true-value="1" v-bind:false-value="0" v-model="item.cfill">可填写</label>
                            <i class="fa fa-trash red" v -if="question.itemList.length>1" v-on:click="delItem(question.itemList,$index)"></i>
                            <!--v-on:click="question.itemList.splice($index,1)"-->
                        </div>
                        <input v-if="question.type==2" type="hidden" v-model="item.item">
                        <div v-if="question.type!=2"> <a class="btn btn-default" v-on:click="question.itemList.push({item:''})"><i class="fa fa-plus"></i>添加选项</a></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <a class="btn btn-danger" v-on:click="questionList.push({itemList:[{}],show:true,type:0})"><i class="fa fa-plus"></i>添加问题</a>
                </div>
            </div>
        </div>
    </form>
</section>
<!-- /.content -->
</@layout>






加载中
返回顶部
顶部