| <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="buildingApp"> |
| <el-form :inline="true" ref="buildingform" :model="buildingform" data-parsley-validate class="form-horizontal form-label-left"> |
| <div class="col-md-3" > |
| <div class="form-group"> |
| <label class="control-label col-md-5 col-sm-12 col-xs-12" style="font-size: 14px;">区域:</label> |
| <div class="col-md-7 col-sm-12 col-xs-12"> |
| <el-select style="width:193px" |
| v-model="buildingform.regionid" placeholder="请选择" |
| > <el-option v-for="item in regionlist" |
| :key="item.value" :label="item.label" :value="item.value"> |
| </el-option> </el-select> |
| </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-input v-model="buildingform.buildingname" id="buildingname"></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="addBuilding">添加楼栋</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="buildingid" |
| label="楼栋编号" |
| sortable |
| width="120"> |
| </el-table-column> |
| <el-table-column |
| prop="buildingname" |
| label="楼栋名称" |
| width="180"> |
| </el-table-column> |
| <el-table-column |
| prop="buildingdesc" |
| label="楼栋描述" |
| width="150"> |
| </el-table-column> |
| <el-table-column |
| prop="updtime" |
| label="更新时间" |
| min-width="180" |
| :formatter="updform"> |
| </el-table-column> |
| <el-table-column |
| prop="regionid" |
| label="区域编号" |
| width="100"> |
| </el-table-column> |
| <el-table-column |
| fixed="right" |
| label="操作" |
| width="213"> |
| <template scope="scope"> |
| <button type="button" class="btn btn-info btn-xs" title="编辑" |
| @click="editBuilding(scope.row.buildingid)">编辑 |
| </button> |
| <button type="button" class="btn btn-danger btn-xs" title="删除" |
| @click="delBuilding(scope.row.buildingid)">删除 |
| </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="buildingtitle" :visible.sync="dialogFormVisible" size="tiny"> |
| <el-form ref="buildingDiaForm" :model="buildingDiaForm" :rules="rules" label-width="120px"> |
| <el-form-item label="楼栋编号:" prop="buildingid"> |
| <el-col :span="22"> |
| <el-input v-model="buildingDiaForm.buildingid" ></el-input> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="楼栋名称:" prop="buildingname"> |
| <el-col :span="22"> |
| <el-input v-model="buildingDiaForm.buildingname" ></el-input> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="信息描述:" prop="buildingdesc"> |
| <el-col :span="22"> |
| <el-input v-model="buildingDiaForm.buildingdesc"></el-input> |
| </el-col> |
| </el-form-item> |
| <el-form-item label="所在区域:" prop="regionid"> |
| <el-col :span="22"> |
| <el-col :span="18"> |
| <el-select v-model="buildingDiaForm.regionid" style="width: 187px;" |
| filterable |
| placeholder="请选择"> |
| <el-option |
| v-for="regionid in regions" |
| :key="regionid.value" |
| :label="regionid.label" |
| :value="regionid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-col> |
| </el-form-item> |
| |
| |
| </el-form> |
| <div slot="footer" class="dialog-footer"> |
| <el-button @click="resetForm('buildingDiaForm') ">取 消</el-button> |
| <el-button type="primary" @click="saveBuilding('buildingDiaForm')">确 定</el-button> |
| </div> |
| </el-dialog> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| var vue = new Vue({ |
| el: '#buildingApp', |
| data:{ |
| tableData: [], |
| currPage: 1, |
| pageSize:10, |
| totSize:0, |
| currentRow: null, |
| regionlist:[], |
| regions:[], |
| dialogFormVisible: false, |
| buildingtitle:'', |
| buildingDiaForm:{ |
| buildingid:'', |
| buildingname:'', |
| buildingdesc:'', |
| regionid:'', |
| }, |
| buildingform:{ |
| regionid:'', |
| buildingname:'', |
| }, |
| |
| rules: { |
| buildingid: [ |
| { required: true, message: '楼栋编号不能为空', trigger: 'blur' }, |
| ], |
| buildingname:[ |
| { required: true, message: '楼栋名称不能为空', trigger: 'blur' }, |
| ], |
| regionid:[ |
| { required: true, message: '所在区域不能为空', trigger: 'blur' }, |
| ] |
| }, |
| |
| }, |
| methods: { |
| handleSizeChange:function(val) { |
| this.pageSize=val; |
| commonQuery(this,this.buildingform.regionid,this.buildingform.buildingname,this.currPage,val); |
| }, |
| currPageChange:function(val) { |
| this.currPage=val; |
| commonQuery(this,this.buildingform.regionid,this.buildingform.buildingname,this.currPage,this.pageSize); |
| }, |
| currRowChange:function(val) { |
| this.currentRow = val; |
| }, |
| query:function () { |
| this.pagesize=10; |
| this.currPage=1; |
| commonQuery(this,this.buildingform.regionid,this.buildingform.buildingname,this.currPage,this.pageSize); |
| }, |
| addBuilding:function () { |
| getFillData(this,"-1"); |
| this.dialogFormVisible = true; |
| this.buildingtitile="添加楼栋"; |
| }, |
| resetForm:function() { |
| this.$refs[formName].resetFields(); |
| this.dialogFormVisible = false; |
| }, |
| saveBuilding: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.buildingDiaForm,formName); |
| } |
| }, |
| delBuilding:function(buildingid){ |
| deletedata(buildingid); |
| }, |
| |
| editBuilding:function (buildingid) { |
| getFillData(this,buildingid); |
| this.dialogFormVisible = true; |
| this.buildingtitile="修改楼栋" |
| }, |
| updform: function (row, column, cellValue) { |
| if (row.updtime != null) { |
| return timeformatter(row.updtime); |
| } |
| } |
| }, |
| created:function(){ |
| var _self=this; |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/system/loadBuildingList}]]", |
| success:function(ret){ |
| _self.totSize=ret.pageResult.totalCount; |
| _self.tableData=ret.pageResult.list; |
| |
| if (ret.regionList!=null) { |
| var rlist = ret.regionList; |
| var rows = []; |
| for (var i=0;i<rlist.length;i++){ |
| rows.push({ |
| value: rlist[i].regionid, |
| label: rlist[i].regionname |
| }); |
| } |
| vue.regionlist = rows; |
| } |
| } |
| }) |
| } |
| }) |
| |
| function commonQuery(_self,regionid,buildingname,pageno,pagesize) { |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/system/loadBuildingList?regionid=}]]" |
| +regionid+"&buildingname="+buildingname |
| +"&pageNo="+pageno+"&pageSize="+pagesize), |
| success:function(ret){ |
| _self.totSize=ret.pageResult.totalCount; |
| _self.tableData=ret.pageResult.list; |
| } |
| }) |
| } |
| |
| function getFillData(_self, id) { |
| $.ajax({ |
| type: "get", |
| dataType: "json", |
| url: encodeURI("[[@{/system/loadBuildingForUpdate?buildingid=}]]" + id), |
| success: function (ret) { |
| var regionslist = []; |
| var rl = ret.regionslist; |
| for (var j = 0; j < rl.length; j++) { |
| regionslist.push({ |
| value: rl[j]["regionid"], |
| label: rl[j]["regionname"] |
| }); |
| } |
| |
| if (ret.building != null) { |
| _self.buildingDiaForm.buildingid = ret.building.buildingid; |
| _self.buildingDiaForm.buildingname = ret.building.buildingname; |
| _self.buildingDiaForm.buildingdesc = ret.building.buildingdesc; |
| _self.buildingDiaForm.regionid = ret.region.regionid; |
| } |
| |
| _self.regions = regionslist; |
| } |
| }) |
| } |
| |
| function saveData(_that,formdata,formName) { |
| var url = null; |
| if(vue.buildingtitile == "添加楼栋"){ |
| url = encodeURI("[[@{/system/addBuilding}]]"); |
| } |
| if(vue.buildingtitile == "修改楼栋"){ |
| url = encodeURI("[[@{/system/updateBuilding}]]") |
| } |
| 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 != "") { |
| layer.msg(data.errStr, {icon: 2,time:1000}); |
| } else { |
| layer.msg('保存信息成功!', {icon: 1,time:1000}); |
| refreshThisTable(); |
| _that.$refs[formName].resetFields(); |
| _that.dialogFormVisible = false; |
| } |
| } |
| }); |
| } |
| |
| function deletedata(buildingid){ |
| layer.confirm('是否删除该楼栋', {icon: 3, title:'请确认',offset:'30%'},function(index){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/system/deleteBuilding?buildingid=}]]"+buildingid, |
| 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 refreshThisTable(){ |
| commonQuery(vue,vue.buildingform.regionid,vue.buildingform.buildingname,vue.currPage,vue.pageSize); |
| }; |
| |
| 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); |
| |
| } |
| |
| </script> |