| <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="timeapp"> |
| <el-form :inline="true" ref="timeform" :model="timeform" 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="timeform.timename" id="timename"></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="addTime">添加时间段</button> |
| </div> |
| </div> |
| </el-form> |
| |
| <template> |
| <el-table |
| ref="singletable" |
| :data="tableData" |
| highlight-current-row |
| @current-change="currRowChange" |
| stripe |
| max-height="2000" |
| border |
| style="width: 100%"> |
| <el-table-column |
| prop="timename" |
| label="时间段名称" |
| sortable |
| width="190"> |
| </el-table-column> |
| <el-table-column |
| prop="btime" |
| label="开始时间" |
| width="200"> |
| </el-table-column> |
| <el-table-column |
| prop="etime" |
| label="结束时间" |
| width="200"> |
| </el-table-column> |
| <el-table-column |
| prop="updtime" |
| label="更新时间" |
| :formatter="updform"> |
| </el-table-column> |
| <el-table-column |
| label="操作" |
| width="130"> |
| <template scope="scope"> |
| <button type="button" class="btn btn-info btn-xs" title="编辑设备" @click="editTime(scope.row.timeid)">编辑</button> |
| <button type="button" class="btn btn-danger btn-xs" title="删除设备" @click="delTime(scope.row.timeid)">删除</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="timetitile" :visible.sync="dialogFormVisible" size="tiny" > |
| <el-form ref="timeDiaForm" :model="timeDiaForm" :rules="rules" label-width="36%" > |
| <el-form-item label="时间段名称:" prop="timename"> |
| <div class="el-col el-col-15"> |
| <div class="el-input" style="width: 187px;"> |
| <el-input v-model="timeDiaForm.timename"> |
| |
| </el-input> |
| </div> |
| </div> |
| </el-form-item> |
| <el-form-item label="开始时间:" prop="btime"> |
| <el-col :span="15"> |
| <el-time-picker placeholder="选择时间" @change="pickbTime" v-model="timeDiaForm.btime" style="width: 187px"></el-time-picker> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="结束时间:" prop="etime"> |
| <el-col :span="15"> |
| <el-time-picker placeholder="选择时间" @change="pickeTime" v-model="timeDiaForm.etime" style="width: 187px"></el-time-picker> |
| </el-col> |
| </el-form-item> |
| </el-form> |
| <div slot="footer" class="dialog-footer"> |
| <el-button @click="resetForm('timeDiaForm') ">取 消</el-button> |
| <el-button type="primary" @click="saveTime('timeDiaForm')">确 定</el-button> |
| </div> |
| </el-dialog> |
| </div> |
| |
| </div> |
| </div> |
| |
| <script> |
| var vue = new Vue({ |
| el:'#timeapp', |
| data:{ |
| tableData:[], |
| currPage: 1, |
| pageSize:10, |
| totSize:0, |
| currentRow: null, |
| timeform:{ |
| timename:'' |
| }, |
| dialogFormVisible: false, |
| dlgAllotDevVisible:false, |
| timeDiaForm:{ |
| timeid:'', |
| timename:'', |
| btime:new Date(), |
| etime:new Date() |
| }, |
| rules:{ |
| timename:[ |
| {required:true,message:'请输入时间段名称',trigger:'blur'}, |
| ] |
| }, |
| timetitile:'添加时间段', |
| btime:'', |
| etime:'' |
| }, |
| methods:{ |
| handleSizeChange:function(val) { |
| this.pageSize=val; |
| commonQuery(this,this.timeform.timename,this.currPage,val); |
| //console.log('每页条'+val); |
| }, |
| currPageChange:function(val) { |
| this.currPage=val; |
| commonQuery(this,this.timeform.timename,this.currPage,this.pageSize); |
| //console.log('当前页:'+val); |
| }, |
| currRowChange:function(val) { |
| this.currentRow = val; |
| }, |
| pickbTime:function(val){ |
| vue.btime = val; |
| }, |
| pickeTime:function(val){ |
| vue.etime = val; |
| }, |
| query:function(){ |
| this.pagesize=10; |
| this.currPage=1; |
| commonQuery(this,this.timeform.timename,this.currPage,this.pageSize); |
| }, |
| delTime:function(timeid){ |
| deletedata(timeid); |
| }, |
| addTime:function () { |
| getFillData(this,"-1"); |
| this.dialogFormVisible = true; |
| this.timetitile="添加时间段" |
| }, |
| resetForm:function(formName) { |
| this.$refs[formName].resetFields(); |
| this.dialogFormVisible = false |
| }, |
| editTime:function(timeid){ |
| getFillData(this,timeid); |
| this.dialogFormVisible = true; |
| this.timetitile="修改时间段" |
| }, |
| saveTime:function (formName) { |
| var _that=this; |
| var vali = false; |
| this.$refs[formName].validate( |
| function(valid){ |
| if (valid){ |
| vali = true; |
| }else{ |
| vali=false; |
| } |
| }); |
| if (vali==true){ |
| var btime = this.timeDiaForm.btime; |
| var etime = this.timeDiaForm.etime; |
| console.log(btime) |
| console.log(etime) |
| if (btime>etime){ |
| layer.msg("开始时间不能大于结束时间！", {icon: 2,time:1000}); |
| return; |
| } |
| var time = this.timeDiaForm; |
| var btimesp = this.btime.split(":"); |
| time.btime = btimesp[0]+":"+btimesp[1]; |
| var etimesp = this.etime.split(":"); |
| time.etime = etimesp[0]+":"+etimesp[1]; |
| saveData(_that,time,formName); |
| } |
| }, |
| falgform:function (row,column,cellValue) { |
| if(row.syncfalg=='S'){ |
| return '已同步'; |
| }else { |
| return '未同步'; |
| } |
| }, |
| syncform:function (row,column,cellValue) { |
| if(row.synctime != null) { |
| return timeformatter(row.synctime); |
| } |
| }, |
| updform:function(row,column,cellValue){ |
| if(row.updtime != null) { |
| return timeformatter(row.updtime); |
| } |
| } |
| }, |
| created:function(){ |
| var _self=this; |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadTimeList?timename=}]]"), |
| success:function(ret){ |
| //console.log(ret); |
| _self.totSize=ret.PageResult.totalCount; |
| _self.tableData=ret.PageResult.list; |
| } |
| }) |
| } |
| }); |
| function timeformatter(time){ |
| |
| return time.substr(0,4)+'-'+time.substr(4,2)+'-'+time.substr(6,2)+' ' |
| +time.substr(8,2)+':'+time.substr(10,2)+':'+time.substr(12,2); |
| // console.log([year,month,date].join('-')+' '+[hour,moment,second].join(':')); |
| // return [year,month,date].join('-')+' '+[hour,moment,second].join(':'); |
| |
| } |
| function refreshThisTable(){ |
| commonQuery(vue,vue.timeform.timename,vue.currPage,vue.pageSize); |
| }; |
| function commonQuery(_self,timename,pageNo,pageSize){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadTimeList?timename=}]]"+timename+"&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(timeid){ |
| layer.confirm('是否删除该时间段', {icon: 3, title:'请确认',offset:'30%'},function(index){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/ncmgr/deleteNcTime?timeid=}]]"+timeid, |
| 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{ |
| if(ret.flag == 0){ |
| layer.msg('删除成功', {icon: 1,time:1000}); |
| refreshThisTable(); |
| }else { |
| layer.msg(ret.message, {icon:2,time:3000}); |
| refreshThisTable(); |
| } |
| } |
| } |
| }) |
| }) |
| } |
| function getFillData(_self,id){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadNcTimeForUpdate?timeid=}]]"+id), |
| success:function(ret){ |
| if (ret.time!=null){ |
| //console.log(ret.oper); |
| _self.timeDiaForm.timeid = ret.time.timeid; |
| _self.timeDiaForm.timename=ret.time.timename; |
| var btime = ret.time.btime.split(":"); |
| var etime = ret.time.etime.split(":"); |
| var date = new Date(); |
| year = date.getYear(); |
| mon = date.getMonth(); |
| day = date.getDate(); |
| _self.timeDiaForm.btime = new Date(year,mon,day,btime[0],btime[1]); |
| _self.timeDiaForm.etime = new Date(year,mon,day,etime[0],etime[1]); |
| } |
| } |
| }) |
| } |
| function saveData(_that,formdata,formName){ |
| var url = null; |
| if(vue.timetitile == "添加时间段"){ |
| url = encodeURI("[[@{/ncmgr/addNcTime}]]"); |
| } |
| if(vue.timetitile == "修改时间段"){ |
| url = encodeURI("[[@{/ncmgr/updateNcTime}]]") |
| } |
| 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; |
| } |
| } |
| }); |
| } |
| |
| </script> |