xiaoben-as2-php/protected/views/importstudent/template.php

<link type="text/css"  rel="stylesheet" href="/css/needDetail.css" />
<script type="text/javascript" src="/js/vue.min.js"></script>
<div class="main-content-inner">
	<ul class="clearfix main-content-inner-ul">
		<?php if(Yii::app()->session['coachInfo']['leader']==1){?>
		<li class="pull-left">
			<button onclick='location.href="<?php echo $this->createUrl("semester/index");?>"' class="button button_normal button_group button_arrow" data-button="red">学期管理</button>
			<img src="/images/line.jpg" style="height:45px;" />
		</li>
		<?php }?>
		<li class="pull-left">
			<button onclick='location.href="<?php echo $this->createUrl("teacher/index");?>"' class="button button_normal button_group button_arrow" data-button="red">教师管理</button>
			<img src="/images/line.jpg" style="height:45px;" />
		</li>
		<li class="pull-left">
			<button onclick='location.href="<?php echo $this->createUrl("classes/index");?>"' class="button button_normal button_group button_arrow" data-button="red">班级管理</button>
			<img src="/images/line.jpg" style="height:45px;" />
		</li>

		<li class="pull-left">
			<button onclick='location.href="<?php echo $this->createUrl("studentinfo/index");?>"' class="button button_normal button_group button_arrow button_active" data-button="red">学生管理</button>
			<img src="/images/line.jpg" style="height:45px;" />
		</li>	

		<li class="pull-left">
			<button onclick='location.href="<?php echo $this->createUrl("classes/export");?>"' class="button button_normal button_group button_arrow " data-button="red">导出学生</button>
			<img src="/images/line.jpg" style="height:45px;" />
		</li>
	</ul>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            padding: 0 20px;
        }

        .body {
            display: flex;
            /* align-items: center; */
            margin-top: 20px;
            padding: 0 10px;
            max-width: 100%;
            overflow: auto;
        }

        th, td {
            padding: 5px 15px;
            min-height: 30px;
            border: 1px solid #cccccc;
        }

        td > div {
            min-height: 20px;
            white-space: nowrap;
        }


        td.reducer {
            padding: 10px 10px 0;
        }

        td.reducer div {
            border: 2px solid #619aff;
            text-align: center;
            font-size: 30px
        }

        tfoot td {
            border: none;
        }

        div.add {
            display: flex;
            margin-left: 10px;
            width: 50px;
            min-width: 50px;
            justify-content: center;
            align-items: center;
            border: 2px solid #619aff;
            font-size: 30px;
        }
        div.table-wrap {
            display: inline-block;
            overflow: auto;
        }

        div.head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            padding: 0 10px 5px;
            border-bottom: 1px solid #cccccc;
            color: #585858;
        }

        div.head a {
            color: green;
            text-decoration: none;
        }
    </style>
    <div class="layout-gap" id="app">
        <section class="anc-top flex status_1 <?php if(isset($is_last) && $is_last==1) echo 'hide'?>">
            <div class="flex-one  flex">
                <p class="anc-title">自定义设置导入模板</p>
            </div>
            <div class="anc-opt-btn green-font pointer reback" ><a href="<?php echo $this->createUrl('importstudent/index');?>">返回</a></div>

        </section>
        <div class="body">

            <div class="table-wrap">
                <table border="0" cellspacing="0">
                    <thead>
                    <tr>
                        <th v-for="(td,index) in theadData">{{chars[index]}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(tr,trIndex) in tbodyData">
                        <td v-for="(td,tdIndex) in tr">
                            <template v-if="trIndex==0">
                                <template v-if="tdIndex>=5">
                                    <div>
                                        <select v-model="tr[tdIndex]" @change="selectChange(tdIndex)">
                                            <option value="-1">请选择要导入的信息</option>
                                            <option v-for="(val) in selectors[tdIndex]" :value="val">{{orginalSelectOptionMap[val]}}</option>
                                        </select>
                                    </div>
                                </template>
                                <div v-else>{{td}}</div>
                            </template>
                            <div v-else>{{td}}</div>
                        </td>
                    </tr>
                    </tbody>

                    <tfoot>
                    <tr>
                        <td colspan="5">
                            <div></div>
                        </td>
                        <td class="reducer" v-for="(td,index) in tfootData">
                            <div class="btnReducer" @click="removeColumn(index)">-</div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>

            <div class="add" id="btnAdd" @click="addColumn" v-if="tbodyData[0].length<selectOptionVals.length+5">
                <span>+</span>
            </div>

        </div>
        <section class="anc-finish-opt gray-border-top" >
            <div class="anc-finish-btn i_fl save_result "  @click="save" >保存模板</div>
        </section>
    </div>
</div>
<script>

    (function f() {
        var orginalSelectOptionMap = {
            <?php
            if($fileName){
                foreach ($fileName as $key => $val){
                    echo "$key:'{$val}',";
                }
            }
            ?>

        };
        var aa =[
            <?php
            if(isset($tpl_data)){
                foreach ($tpl_data as $val){
                    echo "'{$val}',";
                };

            }else{
                echo "-1";
            }
            ?>
           ];
        var tbodyData = [
            [1, '班级', '姓名', '性别(男/女)', '系统准考证号'],
            [2, '', '', '', ''],
            [3, '', '', '', ''],
            [4, '', '', '', ''],
            [5, '', '', '', ''],
            [6, '', '', '', ''],
        ]

        tbodyData =  tbodyData.map(function (tItem,index){
            if(index===0){
                tItem= tItem.concat(aa)
            }else{
                tItem=tItem.concat(aa.map(function () {
                    return ''
                }))
            }
            return tItem
        })




        var selectOptionVals = Object.keys(orginalSelectOptionMap);
        var selectors = ['', '', '', '', '']
        // selectOptionVals.forEach(function (item, index) {
        //     var index = tbodyData[0].indexOf(item)
        //     var arr = selectors[index]||[]
        //     if(index>-1 && selectors){
        //
        //     }
        // })
        var selectOptionValsCopy=selectOptionVals.slice();
        aa.forEach(function (aItem) {
            var index = selectOptionValsCopy.indexOf(aItem)
            if(index>-1){
                selectOptionValsCopy.splice(index,1)
            }
        });
        selectors= selectors.concat(aa.map(function () {
            return selectOptionValsCopy.slice()
        }));

        selectors.forEach(function (item, index) {
            if(index>=5){
                item.push(aa[index-5])
            }
        })

        // selectOptionValsCopy.forEach(function (sovItem) {
        //     var index= aa.indexOf(sovItem)
        //     if(index>-1){
        //         selectors[index+4].push(sovItem)
        //     }
        // })


        // selectors.forEach(function (sItem,sIndex) {
        //     if(sIndex>=4){
        //         sItem.push(aa[sIndex-4])
        //     }
        // })

        // tbodyData[0].slice(4).forEach(function (item,index) {
        //     var selectOptionValsCopy=selectOptionVals.slice()
        //     selectors.push(selectOptionValsCopy)
        //     selectOptionValsCopy.forEach(function (sovcItem) {
        //         sovcItem
        //     })
        //     var index = selectOptionValsCopy.indexOf(item)
        //     if(index>-1){
        //         selectOptionValsCopy.splice(index,1)
        //     }
        //     selectors.push(selectOptionValsCopy)
        // })
        // aa.forEach(function (item,aIndex) {
        //     var sov = selectOptionVals.slice()
        //     var index = sov.indexOf(item)
        //     if(index>-1){
        //
        //         selectors.forEach(function (sItem,selectorIndex,arr) {
        //             if(selectorIndex>=4){
        //                 let sItemIndex = sItem.indexOf(item);
        //                 if(sItemIndex>-1){
        //                     sItem.splice(sItemIndex,1)
        //                 }
        //             }
        //         })
        //         selectors.push(sov)
        //     }else{
        //         selectors.push(selectOptionVals.slice())
        //     }
        //
        // })



        var chars = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

        var theadData =  ['', 'A', 'B', 'C','D']
        theadData = theadData.concat(aa.map(function (item,index) {
            return chars[theadData.length+index]
        }))
        var tfootData = [].concat(aa.map(function () {
            return ''
        }))

        window.__vm = new Vue({
            el: '#app',
            data: {
                chars: chars,
                orginalSelectOptionMap: orginalSelectOptionMap,
                selectOptionVals: selectOptionVals,
                theadData: theadData,
                tbodyData: tbodyData,
                tfootData: tfootData,
                selectors: selectors
            },
            methods: {
                addColumn: function () {
                    this.theadData.push(this.chars[this.theadData.length]);
                    this.tfootData.push('');
                    this.tbodyData.forEach(function (item, index) {
                        item.push(index === 0 ? '-1' : '')
                    });

                    var selectedVals = this.tbodyData[0].slice(5, this.tbodyData[0].length - 1);
                    var selectOptionVals = JSON.parse(JSON.stringify(this.selectOptionVals));
                    selectedVals.forEach(function (item) {
                        var index = selectOptionVals.indexOf(item);
                        if (index > -1) {
                            selectOptionVals.splice(index, 1)
                        }
                    });
                    this.selectors.push(selectOptionVals)

                },
                removeColumn: function (index) {
                    this.theadData.splice(index + 5, 1);
                    this.tfootData.splice(index, 1);
                    this.selectors.splice(index + 5, 1);
                    this.tbodyData.forEach(function(trData) {
                        trData.splice(index + 5, 1)
                    });
                    this.rebuildSelectors()
                },
                selectChange: function (index) {
                    var val = this.tbodyData[0][index];
                    this.rebuildSelectors(val)
                },
                rebuildSelectors:function(val) { 
                    var selectedVals = this.tbodyData[0].filter(function (item) {
                        return item!=='-1'
                    });

                    val && selectedVals.push(val);
                    var _this = this
                    this.selectors.forEach(function(s, i)  {
                        if (i >= 5) {
                            var sval = _this.tbodyData[0][i];
                            var selectOptionVals = JSON.parse(JSON.stringify(_this.selectOptionVals));
                            selectedVals.forEach(function (item) {
                                var index = selectOptionVals.indexOf(item);
                                if (index > -1) {
                                    selectOptionVals.splice(index, 1)
                                }
                            });
                            selectOptionVals.push(sval);
                            _this.selectors[i] = selectOptionVals
                        }
                    });
                },
                save: function () {

                    var post_data=this.tbodyData;
                    $.ajax({
                        url:'<?php echo $this->createUrl('importstudent/save_template')?>',
                        type:'POST',
                        dataType:'json',
                        data:{"data":post_data},
                        success:function(res){
                            console.log(res.status)
                            if(res.status==1){
                                layer.msg('保存成功');
                            }else{
                                layer.msg('保存失败');
                            }
                        }
                    });
                }
            }
        })
    })()
</script>