| <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="weektimeapp"> |
| <el-form :inline="true" ref="weektimeform" :model="weektimeform" 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="weektimeform.weektimename" id="weektimename"></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="addWeektime">添加时间周</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="weekid" |
| label="ID" |
| sortable |
| width="80"> |
| </el-table-column> |
| <el-table-column |
| prop="weekname" |
| label="时间周名称" |
| sortable |
| width="180"> |
| </el-table-column> |
| <el-table-column |
| prop="day1grpid" |
| label="周一" |
| width="130" |
| :formatter="day1for"> |
| </el-table-column> |
| <el-table-column |
| prop="day2grpid" |
| label="周二" |
| width="130" |
| :formatter="day2for"> |
| </el-table-column> |
| <el-table-column |
| prop="day3grpid" |
| label="周三" |
| width="130" |
| :formatter="day3for"> |
| </el-table-column> |
| <el-table-column |
| prop="day4grpid" |
| label="周四" |
| width="130" |
| :formatter="day4for"> |
| </el-table-column> |
| <el-table-column |
| prop="day5grpid" |
| label="周五" |
| width="130" |
| :formatter="day5for"> |
| </el-table-column> |
| <el-table-column |
| prop="day6grpid" |
| label="周六" |
| width="130" |
| :formatter="day6for"> |
| </el-table-column> |
| <el-table-column |
| prop="day7grpid" |
| label="周日" |
| min-width="130" |
| :formatter="day7for"> |
| </el-table-column> |
| <el-table-column |
| fixed="right" |
| label="操作" |
| width="150"> |
| <template scope="scope"> |
| <button type="button" class="btn btn-info btn-xs" title="编辑时间周" @click="editWeektime(scope.row.weekid)">编辑</button> |
| <button type="button" class="btn btn-danger btn-xs" title="删除时间周" @click="delWeektime(scope.row.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="weektimetitle" :visible.sync="dialogFormVisible" top="50px" size="tiny"> |
| <el-form ref="weektimeDiaForm" class="el-form-item el-form-item--mini" :model="weektimeDiaForm" size="mini" :rules="rules" label-width="36%"> |
| <el-form-item label="时间周名称:" prop="weekname"> |
| <el-col :span="18"> |
| <el-input v-model="weektimeDiaForm.weekname" style="width: 187px;"> |
| </el-input> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="周一:" prop="day1grpid"> |
| <el-col :span="18"> |
| <el-select v-model="weektimeDiaForm.day1grpid" style="width: 187px;" clearable filterable placeholder="请选择"> |
| <el-option |
| v-for="timegrpid in timegrplist" |
| :key="timegrpid.value" |
| :label="timegrpid.label" |
| :value="timegrpid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="周二:" prop="day2grpid"> |
| <el-col :span="18"> |
| <el-select v-model="weektimeDiaForm.day2grpid" style="width: 187px;" clearable filterable placeholder="请选择"> |
| <el-option |
| v-for="timegrpid in timegrplist" |
| :key="timegrpid.value" |
| :label="timegrpid.label" |
| :value="timegrpid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="周三:" prop="day3grpid"> |
| <el-col :span="18"> |
| <el-select v-model="weektimeDiaForm.day3grpid" style="width: 187px;" clearable filterable placeholder="请选择"> |
| <el-option |
| v-for="timegrp in timegrplist" |
| :key="timegrp.value" |
| :label="timegrp.label" |
| :value="timegrp.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="周四:" prop="day4grpid"> |
| <el-col :span="18"> |
| <el-select v-model="weektimeDiaForm.day4grpid" style="width: 187px;" clearable filterable placeholder="请选择"> |
| <el-option |
| v-for="timegrp in timegrplist" |
| :key="timegrp.value" |
| :label="timegrp.label" |
| :value="timegrp.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="周五:" prop="day5grpid"> |
| <el-col :span="18"> |
| <el-select v-model="weektimeDiaForm.day5grpid" style="width: 187px;" clearable filterable placeholder="请选择"> |
| <el-option |
| v-for="timegrp in timegrplist" |
| :key="timegrp.value" |
| :label="timegrp.label" |
| :value="timegrp.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="周六:" prop="day6grpid"> |
| <el-col :span="18"> |
| <el-select v-model="weektimeDiaForm.day6grpid" style="width: 187px;" clearable filterable placeholder="请选择"> |
| <el-option |
| v-for="timegrp in timegrplist" |
| :key="timegrp.value" |
| :label="timegrp.label" |
| :value="timegrp.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="周日:" prop="day7grpid"> |
| <el-col :span="18"> |
| <el-select v-model="weektimeDiaForm.day7grpid" style="width: 187px;" clearable filterable placeholder="请选择"> |
| <el-option |
| v-for="timegrp in timegrplist" |
| :key="timegrp.value" |
| :label="timegrp.label" |
| :value="timegrp.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| </el-form> |
| <div slot="footer" class="dialog-footer"> |
| <el-button @click="resetForm('weektimeDiaForm') ">取 消</el-button> |
| <el-button type="primary" @click="saveWeektime('weektimeDiaForm')">确 定</el-button> |
| </div> |
| </el-dialog> |
| </div> |
| |
| |
| </div> |
| </div> |
| |
| <script> |
| var vue = new Vue({ |
| el: '#weektimeapp', |
| data:{ |
| tableData: [], |
| currPage: 1, |
| pageSize:10, |
| totSize:0, |
| currentRow: null, |
| weektimeform:{ |
| weektimename:'', |
| }, |
| timegrplist:[], |
| dialogFormVisible: false, |
| dlgAllotDevVisible:false, |
| weektimetitle:'添加时间周', |
| weektimeDiaForm:{ |
| weekid:'', |
| weekname:'', |
| day1grpid:'', |
| day2grpid:'', |
| day3grpid:'', |
| day4grpid:'', |
| day5grpid:'', |
| day6grpid:'', |
| day7grpid:'' |
| }, |
| rules: { |
| weekname: [ |
| { required: true, message: '请输入时间周名', trigger: 'blur' } |
| ] |
| } |
| }, |
| methods: { |
| handleSizeChange:function(val) { |
| this.pageSize=val; |
| commonQuery(this,this.weektimeform.weektimename,this.currPage,val); |
| }, |
| currPageChange:function(val) { |
| this.currPage=val; |
| commonQuery(this,this.weektimeform.weektimename,this.currPage,this.pageSize); |
| }, |
| currRowChange:function(val) { |
| this.currentRow = val; |
| }, |
| delWeektime:function (row) { |
| deletedata(row); |
| }, |
| query:function () { |
| this.pagesize=10; |
| this.currPage=1; |
| commonQuery(this,this.weektimeform.weektimename,this.currPage,this.pageSize); |
| }, |
| addWeektime:function (formName) { |
| getFillData(this,"-1"); |
| this.dialogFormVisible = true; |
| this.weektimetitle="添加时间周"; |
| }, |
| resetForm:function(formName) { |
| this.$refs[formName].resetFields(); |
| this.dialogFormVisible = false |
| }, |
| saveWeektime: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.weektimeDiaForm,formName); |
| |
| } |
| |
| }, |
| editWeektime:function (id) { |
| getFillData(this,id); |
| this.dialogFormVisible = true; |
| this.weektimetitle="修改时间周" |
| }, |
| day1for:function (row) { |
| return grpname(row.day1grpid); |
| }, |
| day2for:function (row) { |
| return grpname(row.day2grpid); |
| }, |
| day3for:function (row) { |
| return grpname(row.day3grpid); |
| }, |
| day4for:function (row) { |
| return grpname(row.day4grpid); |
| }, |
| day5for:function (row) { |
| return grpname(row.day5grpid); |
| }, |
| day6for:function (row) { |
| return grpname(row.day6grpid); |
| }, |
| day7for:function (row) { |
| return grpname(row.day7grpid); |
| }, |
| |
| }, |
| created:function(){ |
| var _self=this; |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/ncmgr/loadweektimeList?weektimename=}]]", |
| success:function(ret){ |
| //console.log(ret); |
| _self.totSize=ret.PageResult.totalCount; |
| _self.tableData=ret.PageResult.list; |
| var timelist = []; |
| var times=ret.timegrp; |
| for (var i = 0; i < times.length; i++) { |
| timelist.push({ |
| value: times[i].timegrpid, |
| label: times[i].timegrpname |
| }); |
| } |
| _self.timegrplist=timelist; |
| } |
| }) |
| } |
| |
| }) |
| |
| function grpname(grpid){ |
| // console.log(typeof timeid) |
| if(grpid!=null){ |
| var list = vue.timegrplist; |
| for(var i=0;i<list.length;i++){ |
| if(list[i].value == grpid){ |
| return list[i].label; |
| } |
| } |
| } |
| } |
| |
| function commonQuery(_self,weektimename,pageno,pagesize) { |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadweektimeList?weektimename=}]]"+weektimename+"&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 getFillData(_self,id){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/ncmgr/loadNcweektimeForUpdate?weektimeid=}]]"+id), |
| success:function(ret){ |
| var timelist = []; |
| var times=ret.timegrp; |
| for (var i = 0; i < times.length; i++) { |
| timelist.push({ |
| value: times[i].timegrpid, |
| label: times[i].timegrpname |
| }); |
| } |
| console.log(timelist); |
| if (ret.weektime!=null){ |
| //console.log(ret.oper); |
| _self.weektimeDiaForm = ret.weektime; |
| |
| } |
| _self.timegrplist=timelist; |
| } |
| }) |
| } |
| |
| function saveData(_that,formdata,formName) { |
| var url; |
| if(vue.weektimetitle == "添加时间周"){ |
| url = encodeURI("[[@{/ncmgr/addNcweektime}]]"); |
| } |
| if(vue.weektimetitle == "修改时间周"){ |
| url = encodeURI("[[@{/ncmgr/updateNcweektime}]]"); |
| } |
| var timeid1=formdata.day1grpid; |
| var timeid2=formdata.day2grpid; |
| var timeid3=formdata.day3grpid; |
| var timeid4=formdata.day4grpid; |
| var timeid5=formdata.day5grpid; |
| var timeid6=formdata.day6grpid; |
| var timeid7=formdata.day7grpid; |
| if(timeid1==''&&timeid2==''&&timeid3==''&&timeid4==''&&timeid5==''&&timeid6==''){ |
| 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(){ |
| $("#qrybtn").click(); |
| }; |
| |
| function deletedata(id){ |
| layer.confirm('你确定要删除选择的时间周吗?', {icon: 3, title:'请确认',offset:'30%'}, function(index){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/ncmgr/deleteNcweektime?weektimeid=}]]"+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}); |
| } |
| } |
| } |
| }) |
| }); |
| }; |
| |
| |
| |
| </script> |