src/main/resources/templates/ncmgr/nc_devweek.html

<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">设备时间周管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#">门控中心</a>
          <a><cite>设备时间周管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div id="devweek">
            <el-form :inline="true" ref="devweekform" :model="devweekform" data-parsley-validate class="form-horizontal form-label-left">
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;">设备名称:</span>
                        </label>
                        <div class="col-md-8 col-sm-12 col-xs-12">
                            <el-input v-model="devweekform.devname" id="devname"></el-input>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-5 col-sm-12 col-xs-12" style="font-size: 14px;">时间周名称:</span>
                        </label>
                        <div class="col-md-7 col-sm-12 col-xs-12">
                            <el-select v-model="devweekform.weekid" filterable clearable placeholder="请选择">
                                <el-option
                                        v-for="week in weeklist"
                                        :key="week.value"
                                        :label="week.label"
                                        :value="week.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <button type="button" class="btn btn-info" @click="query" id="qrybtn">查 询</button>
                        <button class="btn btn-primary" type="button" @click="addDevWeek">添加设备时间周</button>
                    </div>
                </div>
            </el-form>

            <template>
                <el-table
                        ref="singletable"
                        :data="tableData"
                        highlight-current-row
                        @current-change="currRowChange"
                        stripe
                        border
                        max-height="2000"
                        style="width: 100%;">

                    <el-table-column
                            prop="devname"
                            label="设备名称"
                            sortable
                            width="480">
                    </el-table-column>
                    <el-table-column
                            prop="weekname"
                            label="时间周名称"
                            sortable>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="150">
                        <template scope="scope">
                            <button type="button" class="btn btn-danger btn-xs" title="删除设备" @click="delDevWeek(scope.row.id.devid,scope.row.id.weekid)">删除</button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="clearfix"></div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="currPageChange"
                        :current-page="currPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="prev, pager, next,sizes, jumper,total"
                        :total="totSize">
                </el-pagination>
            </template>

            <el-dialog :title="devweekTitle" :visible.sync="dialogFormVisible" size=large top="30px" style="width: 900px;height:700px;left: 220px;top:0px" >
                <el-form ref="devweekDiaform" :model="devweekDiaform" :rules="rules" label-width="100px" >
                    <el-form-item label="选择时间周:" prop="weekid">
                        <el-col  :span="24">
                            <el-select v-model="devweekDiaform.weekid" filterable placeholder="请选择" @change="getReWeekId">
                                <el-option
                                        v-for="week in weeklist"
                                        :key="week.value"
                                        :label="week.label"
                                        :value="week.value"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="选择设备:" prop="devids">
                        <el-col  style="width: 100%">
                            <template>
                                <el-transfer
                                        v-model="chosenDevs"
                                        :data="devs"
                                        :target-keys="selectDevList"
                                        :list-style="listStyle"
                                        :panelWidth="panelWidth"
                                        :operations="['移除','选择']"
                                        :button-texts="['移除', '选择']"
                                        :titles="['待选设备','已选设备']"
                                        filterable
                                        @on-change="devChange">
                                </el-transfer>
                            </template>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('devweekDiaform') ">取 消</el-button>
                    <el-button type="primary" @click="saveDevWeek">确 定</el-button>
                </div>
            </el-dialog>


        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        el:'#devweek',
        data:{
            tableData:[],
            currPage: 1,
            pageSize:10,
            totSize:0,
            currentRow: null,
            devweekform:{
                weekid:'',
                devname:''
            },
            weeklist:[],
            devs:[],
            dialogFormVisible: false,
            dlgAllotDevVisible:false,
            devweekDiaform:{
                weekid:'',
                devids:[]
            },
            addDev:[],
            selectDevList:[],
            listStyle: {
                width: '500px',
                height: '600px'
            },
            panelWidth:300,
            reWeekId:0,
            chosenDevs:[],
            rules:{
                weekid:[
                    {type:'number',required:true,message:'请选择时间周',trigger:'blur'}
                ],
                devs:[
                    {type:'array',required:true,message:'请至少选择一个设备',trigger:'blur'}
                ]
            },
            devweekTitle:'添加设备'
        },
        methods:{
            handleSizeChange:function(val) {
                this.pageSize=val;
                commonQuery(this,this.devweekform.weekid,this.devweekform.devname,this.currPage,val);
                //console.log('每页条'+val);
            },
            currPageChange:function(val) {
                this.currPage=val;
                commonQuery(this,this.devweekform.weekid,this.devweekform.devname,this.currPage,this.pageSize);
                //console.log('当前页:'+val);
            },
            currRowChange:function(val) {
                this.currentRow = val;
            },
            query:function(){
                this.pagesize=10;
                this.currPage=1;
                commonQuery(this,this.devweekform.weekid,this.devweekform.devname,this.currPage,this.pageSize);
            },
            devChange:function (newTargetKeys) {
                //console.log(newTargetKeys);
                this.selectDevList=newTargetKeys;
            },
            delDevWeek:function(devid,weekid){
                deletedata(devid,weekid);
            },
            addDevWeek:function () {
                getFillData(this,"-1");
                this.dialogFormVisible = true;
                this.timetitile="添加时间段"
            },
            resetForm:function(formName) {
                this.$refs[formName].resetFields();
                this.chosenDevs=[];
                this.devs=[];
                this.dialogFormVisible = false
            },
            saveDevWeek:function () {
                var _that=this;
                var vali = false;
                /*this.$refs[formName].validate(
                    function(valid){
                        if (valid){
                            vali = true;
                            //console.log(JSON.stringify(_that.operOperform));
                        }else{
                            vali=false;
                        }
                    });
                if (vali==true){

                    saveData(_that,_that.devweekDiaform,formName);
                }*/
                saveData(_that,_that.devweekDiaform,_that.chosenDevs);

                //_that.chosenDevs=[];
                //_that.devs=[];
                _that.dialogFormVisible = false;
            },
            handleSelectionChange:function(val) {
                this.multipleSelection = val;
            },
            getReWeekId:function(val){
                var _self=this;
                getChosenDev(_self,val);

            },

        },
        created:function(){
            var _self=this;
            $.ajax({
                type:"get",
                dataType:"json",
                url:encodeURI("[[@{/ncmgr/loaddevweekList?weekid=0&devname=}]]"),
                success:function(ret){
                    //console.log(ret);
                    _self.totSize=ret.PageResult.totalCount;
                    _self.tableData=ret.PageResult.list;
                    var weeks = [];
                    var weektimes=ret.weektime;
                    for (var i = 0; i < weektimes.length; i++) {
                        weeks.push({
                            value: weektimes[i]["weekid"],
                            label: weektimes[i]["weekname"]

                        });
                    }
                    _self.weeklist=weeks;
                }
            })
        }
    });
    function refreshThisTable(){
        $("#qrybtn").click();
    };
    function commonQuery(_self,weekid,devname,pageNo,pageSize){
        var id=weekid;
        if(!weekid){
            id=0;
        }
        $.ajax({
            type:"get",
            dataType:"json",
            url:encodeURI("[[@{/ncmgr/loaddevweekList?weekid="+id+"&devname=}]]"+devname+"&pageNo="+pageNo+"&pageSize="+pageSize),
            success:function(ret){
                _self.totSize=ret.PageResult.totalCount;
                _self.tableData=ret.PageResult.list;
                if(_self.totSize == 0 ){
                    layer.msg("暂无数据", {icon: 2, time: 1000});
                }
            }
        })
    }
    function deletedata(devid,weekid){
        layer.confirm('是否删除该设备时间周?', {icon: 3, title:'请确认',offset:'30%'},function(index){
            $.ajax({
                type:"get",
                dataType:"json",
                url:"[[@{/ncmgr/deleteNcdevweek?devid=}]]"+devid+"&weekid="+weekid,
                success:function(ret){
                    if(ret.message == undefined){
                        layer.msg('用户认证已过期，请重新登录', {icon:2,time:1000});
                        window.location="login";
                        return;
                    }
                    if (ret.message != "") {
                        layer.msg(ret.message, {icon:2,time:1000});
                    }else{
                        layer.msg('删除成功', {icon: 1,time:1000});
                        refreshThisTable();
                    }
                }
            })
        })
    }
    function getFillData(_self,id){
        $.ajax({
            type:"get",
            dataType:"json",
            url:encodeURI("[[@{/ncmgr/loadforadddevweek}]]"),
            success:function(ret){
                var weeks = [];
                var weektimes=ret.weektime;
                for (var i = 0; i < weektimes.length; i++) {
                    weeks.push({
                        value: weektimes[i]["weekid"],
                        label: weektimes[i]["weekname"]

                    });
                }
                var devlist = [];
                var dev = ret.device;
                for (var i = 0; i < dev.length; i++) {
                    devlist.push({
                        label: dev[i].devname+"-"+dev[i]["devtype"],
                        key: dev[i].deviceid
                    });
                }
                _self.weeklist=weeks;
                _self.devs=devlist;

            }
        })
    }
    function saveData(_that,formdata,formName){

        var weekid = formdata.weekid;
        var devs = formName;

        var devids = "";
        for(var j = 0; j < devs.length; j ++){
            if(devids == ""){
                devids = devs[j];
            }else{
                devids += ","+devs[j];
            }
        }
        var dataStr = '{"weekid":"' + weekid+ '","devids":"' + devids+ '"}';
        var token=$("meta[name='_csrf_token']").attr("value");
        $.ajax({
            type: "POST",
            url: encodeURI("[[@{/ncmgr/addNcdevweek?weekid=}]]"+weekid+"&devids="+devids),
            dataType: "json",
            contentType: "application/json",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN':token,
            },
            data:JSON.stringify(_that.chosenDevs),
            success: function (data) {
                /*if(data.errStr == undefined){
                    layer.msg('用户认证已过期，请重新登录', {icon: 2,time:1000});
                    window.location="login";
                    return ;
                }*/
                if (data.errStr != "") {
                    layer.msg(data.errStr, {icon: 2,time:1000});
                } else {
                    layer.msg('保存信息成功!', {icon: 1,time:1000});
                    _that.selectDevList=[];
                    refreshThisTable();

                }
            }
        });
    }

    function getChosenDev(_self,reData){

        var reWeekId=reData;
        $.ajax({
            type:"get",
            url: encodeURI("[[@{/ncmgr/getChosenDev?reWeekId=}]]"+reWeekId),
            dataType:"json",
            success:function(info){
                var chosenDevList=[];
                var chosenDev=info.chosenDev;

                for (var i=0;i<chosenDev.length;i++){
                    chosenDevList.push(
                        chosenDev[i].id.devid

                    );
                }
                _self.chosenDevs=chosenDevList;
            }
        });
    }

</script>

<style>
    .el-checkbox-group.el-transfer-panel__list{
        height:250px;
    }
    .el-transfer-panel{
        width:260px;
    }
    .el-transfer-panel__body{
        height:330px;
        width:250px;
    }
</style>