| <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="timegrpapp"> |
| <el-form :inline="true" ref="timegrpform" :model="timegrpform" data-parsley-validate class="form-horizontal form-label-left"> |
| |
| <div class="col-md-4"> |
| <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="timegrpform.timegrpname" id="timegrpname"></el-input> |
| </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="addTimegrp">添加时间组</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="timegrpname" |
| label="时间组名称" |
| sortable |
| width="150"> |
| </el-table-column> |
| <el-table-column |
| prop="timeid1" |
| label="时间段一" |
| width="150" |
| :formatter="time1for"> |
| </el-table-column> |
| <el-table-column |
| prop="timeid2" |
| label="时间段二" |
| width="150" |
| :formatter="time2for"> |
| </el-table-column> |
| <el-table-column |
| prop="timeid3" |
| label="时间段三" |
| width="150" |
| :formatter="time3for"> |
| </el-table-column> |
| <el-table-column |
| prop="timeid4" |
| label="时间段四" |
| width="150" |
| :formatter="time4for"> |
| </el-table-column> |
| <el-table-column |
| prop="timeid5" |
| label="时间段五" |
| width="150" |
| :formatter="time5for"> |
| </el-table-column> |
| <el-table-column |
| prop="timeid6" |
| label="时间段六" |
| width="150" |
| :formatter="time6for"> |
| </el-table-column> |
| |
| <el-table-column |
| fixed="right" |
| label="操作"> |
| <template scope="scope"> |
| <button type="button" class="btn btn-info btn-xs" title="编辑时间组" @click="editTimegrp(scope.row.timegrpid)">编辑</button> |
| <button type="button" class="btn btn-danger btn-xs" title="删除时间组" @click="delTimegrp(scope.row.timegrpid)">删除</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="timegrptitle" top="50px" :visible.sync="dialogFormVisible" size="tiny"> |
| <el-form ref="timegrpDiaForm" class="el-form-item el-form-item--mini" :model="timegrpDiaForm" :rules="rules" label-width="36%"> |
| <el-form-item label="时间组名称:" prop="timegrpname" > |
| <el-col :span="18"> |
| <el-input v-model="timegrpDiaForm.timegrpname" style="width: 187px;"> |
| |
| </el-input> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="时间段一:" prop="timeid1" > |
| <el-col :span="18"> |
| <el-select v-model="timegrpDiaForm.timeid1" style="width: 187px;" filterable clearable placeholder="请选择"> |
| <el-option |
| v-for="timeid in timeList" |
| :key="timeid.value" |
| :label="timeid.label" |
| :value="timeid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="时间段二:" prop="timeid2"> |
| <el-col :span="18"> |
| <el-select v-model="timegrpDiaForm.timeid2" style="width: 187px;" filterable clearable placeholder="请选择"> |
| <el-option |
| v-for="timeid in timeList" |
| :key="timeid.value" |
| :label="timeid.label" |
| :value="timeid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="时间段三:" prop="timeid3"> |
| <el-col :span="18"> |
| <el-select v-model="timegrpDiaForm.timeid3" style="width: 187px;" filterable clearable placeholder="请选择"> |
| <el-option |
| v-for="timeid in timeList" |
| :key="timeid.value" |
| :label="timeid.label" |
| :value="timeid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="时间段四:" prop="timeid4"> |
| <el-col :span="18"> |
| <el-select v-model="timegrpDiaForm.timeid4" style="width: 187px;" filterable clearable placeholder="请选择"> |
| <el-option |
| v-for="timeid in timeList" |
| :key="timeid.value" |
| :label="timeid.label" |
| :value="timeid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="时间段五:" prop="timeid5"> |
| <el-col :span="18"> |
| <el-select v-model="timegrpDiaForm.timeid5" style="width: 187px;" filterable clearable placeholder="请选择"> |
| <el-option |
| v-for="timeid in timeList" |
| :key="timeid.value" |
| :label="timeid.label" |
| :value="timeid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="时间段六:" prop="timeid6"> |
| <el-col :span="18"> |
| <el-select v-model="timegrpDiaForm.timeid6" style="width: 187px;" filterable clearable placeholder="请选择"> |
| <el-option |
| v-for="timeid in timeList" |
| :key="timeid.value" |
| :label="timeid.label" |
| :value="timeid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| |
| </el-form> |
| <div slot="footer" class="dialog-footer"> |
| <el-button @click="resetForm('timegrpDiaForm') ">取 消</el-button> |
| <el-button type="primary" @click="saveTimegrp('timegrpDiaForm')">确 定</el-button> |
| </div> |
| </el-dialog> |
| </div> |
| |
| </div> |
| </div> |
| |
| |
| <script> |
| var vue = new Vue({ |
| el: '#timegrpapp', |
| data:{ |
| tableData: [], |
| currPage: 1, |
| pageSize:10, |
| totSize:0, |
| currentRow: null, |
| timegrpform:{ |
| timegrpname:'', |
| }, |
| timeList:[], |
| dialogFormVisible: false, |
| dlgAllotDevVisible:false, |
| timegrptitle:'添加时间组', |
| timegrpDiaForm:{ |
| timegrpid:'', |
| timegrpname:'', |
| timeid1:'', |
| timeid2:'', |
| timeid3:'', |
| timeid4:'', |
| timeid5:'', |
| timeid6:'', |
| timeid7:'', |
| timeid8:'' |
| }, |
| rules: { |
| timegrpname: [ |
| { required: true, message: '请输入时间组名', trigger: 'blur' } |
| ] |
| }, |
| }, |
| methods: { |
| handleSizeChange:function(val) { |
| this.pageSize=val; |
| commonQuery(this,this.timegrpform.timegrpname,this.currPage,val); |
| }, |
| currPageChange:function(val) { |
| this.currPage=val; |
| commonQuery(this,this.timegrpform.timegrpname,this.currPage,this.pageSize); |
| }, |
| currRowChange:function(val) { |
| this.currentRow = val; |
| }, |
| delTimegrp:function (row) { |
| deletedata(row); |
| }, |
| query:function () { |
| this.pagesize=10; |
| this.currPage=1; |
| commonQuery(this,this.timegrpform.timegrpname,this.currPage,this.pageSize); |
| }, |
| addTimegrp:function (formName) { |
| getFillData(this,"-1"); |
| this.dialogFormVisible = true; |
| this.timegrptitle="添加时间组" |
| }, |
| resetForm:function(formName) { |
| this.$refs[formName].resetFields(); |
| this.dialogFormVisible = false |
| }, |
| saveTimegrp:function (formName) { |
| var _that=this; |
| var vali = false; |
| this.$refs[formName].validate( |
| function(valid){ |
| if (valid){ |
| vali = true; |
| }else{ |
| vali=false; |
| } |
| }); |
| if (vali==true){ |
| saveData(_that,_that.timegrpDiaForm,formName); |
| |
| } |
| |
| }, |
| editTimegrp:function (deviceid) { |
| getFillData(this,deviceid); |
| this.dialogFormVisible = true; |
| this.timegrptitle="修改时间组" |
| }, |
| time1for:function(row){ |
| return timename(row.timeid1); |
| }, |
| time2for:function(row){ |
| return timename(row.timeid2); |
| }, |
| time3for:function(row){ |
| return timename(row.timeid3); |
| }, |
| time4for:function(row){ |
| return timename(row.timeid4); |
| }, |
| time5for:function(row){ |
| return timename(row.timeid5); |
| }, |
| time6for:function(row){ |
| return timename(row.timeid6); |
| }, |
| time7for:function(row){ |
| return timename(row.timeid7); |
| }, |
| time8for:function(row){ |
| return timename(row.timeid8); |
| }, |
| }, |
| created:function(){ |
| var _self=this; |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/ncmgr/loadTimegrpList?timegrpname=}]]", |
| success:function(ret){ |
| //console.log(ret); |
| _self.totSize=ret.PageResult.totalCount; |
| _self.tableData=ret.PageResult.list; |
| var timelist = []; |
| var times=ret.timelist; |
| for (var i = 0; i < times.length; i++) { |
| timelist.push({ |
| value: times[i].timeid, |
| label: times[i].timename |
| }); |
| } |
| _self.timeList=timelist; |
| } |
| }) |
| } |
| |
| }) |
| |
| function timename(timeid){ |
| // console.log(typeof timeid) |
| if(timeid!=null){ |
| var list = vue.timeList; |
| for(var i=0;i<list.length;i++){ |
| if(list[i].value == timeid){ |
| return list[i].label; |
| } |
| } |
| } |
| } |
| |
| function commonQuery(_self,timegrpname,pageno,pagesize) { |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadTimegrpList?timegrpname=}]]"+timegrpname+"&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}); |
| } |
| var timelist = []; |
| var times=ret.timelist; |
| for (var i = 0; i < times.length; i++) { |
| timelist.push({ |
| value: times[i].timeid, |
| label: times[i].timename |
| }); |
| } |
| _self.timeList=timelist; |
| } |
| }) |
| } |
| |
| function getFillData(_self,id){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadNcTimeGrpForUpdate?timegrpid=}]]"+id), |
| success:function(ret){ |
| var timelist = []; |
| var times=ret.timelist; |
| for (var i = 0; i < times.length; i++) { |
| timelist.push({ |
| value: times[i].timeid, |
| label: times[i].timename |
| }); |
| } |
| console.log(timelist); |
| if (ret.timegrp!=null){ |
| //console.log(ret.oper); |
| _self.timegrpDiaForm = ret.timegrp; |
| |
| } |
| _self.timeList=timelist; |
| } |
| }) |
| } |
| |
| function saveData(_that,formdata,formName) { |
| var url; |
| if(vue.timegrptitle == "添加时间组"){ |
| url = encodeURI("[[@{/ncmgr/addNcTimegrp}]]"); |
| } |
| if(vue.timegrptitle == "修改时间组"){ |
| url = encodeURI("[[@{/ncmgr/updateNcTimegrp}]]"); |
| } |
| var timeid1=formdata.timeid1; |
| var timeid2=formdata.timeid2; |
| var timeid3=formdata.timeid3; |
| var timeid4=formdata.timeid4; |
| var timeid5=formdata.timeid5; |
| var timeid6=formdata.timeid6; |
| var timeid7=formdata.timeid7; |
| var timeid8=formdata.timeid8; |
| if(timeid1==''&&timeid2==''&&timeid3==''&&timeid4==''&&timeid5==''&&timeid6==''&&timeid7==''&&timeid8==''){ |
| layer.msg('至少选择一个时间段！', {icon: 2,time:1000}); |
| return ''; |
| }else { |
| var token=$("meta[name='_csrf_token']").attr("value"); |
| $.ajax({ |
| type: "POST", |
| url: url, |
| dataType: "json", |
| contentType: "application/json", |
| headers: { |
| 'Accept': 'application/json', |
| 'Content-Type': 'application/json', |
| 'X-CSRF-TOKEN':token, |
| }, |
| data: JSON.stringify(formdata), |
| 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}); |
| refreshThisTable(); |
| _that.$refs[formName].resetFields(); |
| _that.dialogFormVisible = false; |
| } |
| } |
| }); |
| } |
| } |
| |
| function refreshThisTable(){ |
| commonQuery(vue,vue.timegrpform.timegrpname,vue.currPage,vue.pageSize); |
| }; |
| |
| function deletedata(id){ |
| layer.confirm('你确定要删除选择的时间组吗?', {icon: 3, title:'请确认',offset:'30%'}, function(index){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/ncmgr/deleteNcTimegrp?timegrpid=}]]"+id, |
| success:function(ret){ |
| //console.log(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{ |
| if(ret.flag==0){ |
| layer.msg('删除成功', {icon: 1,time:1000}); |
| refreshThisTable(); |
| }else { |
| layer.msg(ret.message, {icon:2,time:3000}); |
| refreshThisTable(); |
| } |
| } |
| } |
| }) |
| }); |
| }; |
| </script> |