jili2/application/admin/view/supervise/add.html

{extend name="common/common2" /}
{block name="main"}
<style>
    .supervise-content{
        width: 60%;
        height: auto;
        margin-bottom: 20px;
        border: 1px solid #c3c3c3;
        box-shadow:4px 4px 15px #f1f1f1;
        padding: 10px;
        margin-left: 7%;
    }

    .question-form{
        height: 34px;
        line-height: 34px;
        margin: 5px 0;
        overflow: hidden;
    }


    .question-form-option{
        width: auto;
        height: auto;
        margin: 5px 0;
        overflow: hidden;
    }
    .question-form-title{
        display: inline-block;
        width: 70px;
        height: 100%;
    }
    .question-form-input{
        display: inline-block;
        width: 65%;
        height: 100%;
    }

    .question-form-input1{
        display: inline-block;
        width: 80%;
        height: 100%;
    }

    .question-form-option{
        height: auto;
        margin: 5px 0;
        overflow: hidden;
    }
    .question-form-title{
        display: inline-block;
        width: 70px;
        height: 100%;
    }
    .question-options{
        /*width: 640px;*/
        width: 90%;
        height: 32px;
        color: #606266!important;
        font-size: 13px!important;
        padding: 5px 15px!important;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(229, 230, 231);
    }
    .xz:focus,.form-select:focus,.question-options:focus{
        border-color: #6eb7ff !important;
        outline:0;
    }
    ul, ol {
        margin: 0;
    }
    .standard-table{
        overflow: hidden;
    }

    .standard-input{
        width: 100%;
        height: 100%;
        color: #606266!important;
        font-size: 13px!important;
        padding: 5px 15px!important;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(229, 230, 231);
    }
    .list-group-item{
        width: 74%;
        margin-bottom: 20px;
        border: 2px solid var(--themeColor) !important;
        position: relative;
        z-index: 20;
    }
    .a_add{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }
    .sub_standard{
        border: 1px solid #0a6aa1;
        margin-bottom: 10px;
        padding: 8px;
        position: relative;
        z-index: 20;
    }
    .text-danger{
        position: absolute;
        z-index: 19;
        top: 10px;
        right: 10px;
        /*float: right;*/
    }

</style>

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>{$meta_title}</h5>
                <div class="ibox-tools">
                    <a class="toback" href="{:url('index')}">
                        返回上一页
                    </a>
                </div>
            </div>
            <div class="ibox-content" id="vueapp">
                <form method="post" action="{:url('add')}" class="form-horizontal">
                    <input type="hidden" name="id" value="{$info['id']|default='0'}">
                    <input type="hidden" name="content" value="" id="content">
                    <div class="question-form">
                        <div class="question-form-title">名称</div>
                        <div class="question-form-input">
                            <input type="text" v-model="title" name="title" class="form-control">
                        </div>
                    </div>

                    <div class="question-form">
                        <div class="question-form-title">备注</div>
                        <div class="question-form-input">
                            <input type="text" v-model="remark" name="remark" class="form-control">
                        </div>
                    </div>

                    <div class="question-form">
                        <a href="javascript:;" style="margin-left:34.5%" @click="addStandard()">添加标准</a>
                    </div>

                    <div class="question-form-option">
                        <ul class="list-group">
                            <li  class="list-group-item"  v-for="(item,index) in content" :key="index">
                                <a href="javascript:void(0)" class="text-danger" @click="delStandard(index)">删除</a>
                                <div class="question-form">
                                    <div class="question-form-title">标准名称</div>
                                    <div class="question-form-input1">
                                        <input type="text" v-model="item.title"   class="question-options">
                                    </div>
                                </div>
                                <div class="a_add">
                                    <a href="javascript:;" @click="addSubStandard(index)">添加子标准</a>
                                </div>


                                <div class="sub_standard"  v-for="(item1,index1) in item.sub" :key="index1">
                                    <a href="javascript:void(0)" class="text-danger" @click="delSubStandard(index,index1)">删除</a>
                                    <div class="question-form">
                                        <div class="question-form-title">子标准名称</div>
                                        <div class="question-form-input1">
                                            <input type="text" v-model="item1.title"   class="question-options">
                                        </div>
                                    </div>

<!--                                    <div class="question-form">-->
<!--                                        <div class="question-form-title">评分</div>-->
<!--                                        <div class="question-form-input">-->
<!--                                            <input type="number"   v-model="item1.score"   class="question-options">-->
<!--                                        </div>-->
<!--                                    </div>-->

                                    <div class="question-form">
                                        <div class="question-form-title">评分标准</div>
                                        <div class="question-form-input1">
                                            <input type="text" v-model="item1.standard" class="question-options">
                                        </div>
                                    </div>


                                    <a href="javascript:;" @click="addkhbz(index,index1)">添加考核标准</a>

                                    <div class="standard-table" >
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th style="width: 60%;">考核标准内容</th>
                                                <th>分值</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(item2,index2) in item1.sub" :key="index2">
                                                <td style="width: 60%;"><input type="text" v-model="item2.title" class="standard-input"></td>
                                                <td><input type="number" onkeyup="clearNoNum1(this)"  v-model="item2.score" class="standard-input"></td>
                                                                                            <td><a href="javascript:;" @click="delkhbz(index,index1,index2)" style="color:#ed5565">删除</a></td>
                                            </tr>

                                            </tbody>
                                        </table>

                                    </div>


                                </div>


                            </li>

                        </ul>

                    </div>


                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-2">
                            <button class="btn btn-primary ajax-post" target-form="form-horizontal" type="submit">确 定</button>
                            <a href="{:url('index')}" class="btn btn-default">取 消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="/static/vuejs/require.js"></script>
<script>
    $(document).ready(function(){
        // formSetValue("cate", {$info.cate|default=0});
    });


    var vm = new Vue({
        el: '#vueapp',
        data: {
            title:'名称',
            remark:'',
            content:[
                {
                    title:'工作标准名称',
                    score:0,
                    sub:[{
                        title:'子标准名称',
                        score:0,
                        standard:'评分标准',
                        sub:[{
                            title:'考核标准内容',
                            score:0,
                        }]
                    }]
                }
            ],
            maxid:0,
            maxsubid:0,
        },
        computed: {
            resoptions: function () {
                return JSON.parse(JSON.stringify(this.content));
            }
        },
        watch: {
            resoptions: function (newval, oldval) {
                const str = JSON.stringify(newval)
                $('#content').val(str);

            },
        },
        created: function () {

        },
        methods: {
            addStandard(){
                const sub =  {
                    title:'工作标准名称',
                    score:0,
                    sub:[{
                        title:'子标准名称',
                        score:0,
                        standard:'评分标准',
                        sub:[{
                            title:'考核标准内容',
                            score:0,
                        }]
                    }]
                }
                this.content.push(sub);

            },



            addSubStandard(index){
                for(let i in this.content){
                    if(i == Number(index)){
                       const info = this.content[i];
                       const sub = {
                           title:'子标准名称',
                           score:0,
                           standard:'评分标准',
                           sub:[{
                               title:'考核标准内容',
                               score:0,
                           }]
                       }
                       info.sub.push(sub);
                    }
                }
            },


            addkhbz(index,index1){
                for(let i in this.content){
                    if(i == Number(index)){
                        const info = this.content[i].sub;

                        for (let o in info){
                            const info2 = info[o];
                            if(o == Number(index1)){
                               const sub  = {
                                   title:'考核标准内容',
                                   score:0,
                               }
                                info2.sub.push(sub);
                            }
                        }

                    }
                }
            },

            delStandard(index){
                const newsArr = []
                for (let i in this.content){
                    if(i != Number(index)){
                        newsArr.push(this.content[i])
                    }

                }
                this.content = newsArr;
            },

            delSubStandard(index,index1){
                for (let i in this.content){
                    if(i == Number(index)){
                        const sub = this.content[i].sub;
                        const newsub = [];
                        for (let o in sub){
                            if(o != Number(index1)){
                                newsub.push(sub[i]);
                            }
                        }
                        this.content[i].sub = newsub;
                    }
                }
            },



            delkhbz(index,index1,index2){
                for (let i in this.content){
                    if(i == Number(index)){
                        const sub = this.content[i].sub;
                        for (let o in sub){
                            if(o == Number(index1)){
                                const subsub = sub[o].sub;
                                const newsub = [];
                                for (let t in subsub){
                                    if(t != Number(index2)){
                                        newsub.push(subsub[t]);
                                    }
                                }
                                this.content[i].sub[o].sub = newsub;
                            }
                        }

                    }
                }
            },


        }
    })
</script>
{/block}