| <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="regionapp"> |
| <el-form :inline="true" ref="regionform" :model="regionform" 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="regionform.regionname" id="regionname"></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="addRegion">添加区域</button> |
| <!--<button class="btn btn-info" type="button" @click="lookTree">查看区域树形图</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="regionid" |
| label="区域编号" |
| width="140"> |
| </el-table-column> |
| <el-table-column |
| prop="regionname" |
| label="区域名称" |
| width="180"> |
| </el-table-column> |
| <el-table-column |
| prop="level" |
| label="区域级别" |
| sortable |
| :formatter="levelform" |
| width="120"> |
| </el-table-column> |
| <el-table-column |
| prop="parentname" |
| label="父区域" |
| width="180"> |
| </el-table-column> |
| <el-table-column |
| prop="address" |
| label="详细地址" |
| width="200"> |
| </el-table-column> |
| <el-table-column |
| prop="remarks" |
| label="备注" |
| width="180"> |
| </el-table-column> |
| <el-table-column |
| label="操作" |
| width="130"> |
| <template scope="scope"> |
| <button type="button" class="btn btn-info btn-xs" title="编辑" @click="editRegion(scope.row.regionid)">编辑</button> |
| <button type="button" class="btn btn-danger btn-xs" title="删除" @click="delRegion(scope.row.regionid)">删除</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="regiontitile" :visible.sync="dialogFormVisible" > |
| <el-form ref="regionDiaForm" :model="regionDiaForm" :rules="rules" label-width="36%" > |
| <el-form-item label="区域编号:" prop="regionid"> |
| <div class="el-col el-col-15"> |
| <div class="el-input" style="width: 187px;"> |
| <el-input v-model="regionDiaForm.regionid"> |
| <i class="el-icon-edit el-input__icon" slot="icon" ></i> |
| </el-input> |
| </div> |
| </div> |
| </el-form-item> |
| |
| <el-form-item label="区域名称:" prop="regionname"> |
| <div class="el-col el-col-18"> |
| <div class="el-input" style="width: 187px;"> |
| <el-input v-model="regionDiaForm.regionname"> |
| <i class="el-icon-edit el-input__icon" slot="icon" ></i> |
| </el-input> |
| </div> |
| </div> |
| </el-form-item> |
| |
| <el-form-item label="区域级别:" prop="level"> |
| <el-col :span="18"> |
| <el-select v-model="regionDiaForm.level" style="width: 187px;" |
| filterable |
| @Change="levelChange" |
| placeholder="请选择"> |
| <el-option |
| v-for="level in levels" |
| :key="level.value" |
| :label="level.label" |
| :value="level.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| |
| <el-form-item label="父区域:" prop="parentid"> |
| <el-col :span="18"> |
| <el-select v-model="regionDiaForm.parentid" |
| style="width: 187px;" clearable |
| filterable |
| :disabled="parentRegionDis" |
| placeholder="请选择"> |
| <el-option |
| v-for="parentid in parentRegions" |
| :key="parentid.value" |
| :label="parentid.label" |
| :value="parentid.value"> |
| </el-option> |
| </el-select> |
| </el-col> |
| </el-form-item> |
| |
| <el-form-item label="详细地址:" prop="address"> |
| <el-col :span="18"> |
| <el-input v-model.number="regionDiaForm.address" style="width: 187px;"> |
| <i class="el-icon-edit el-input__icon" slot="icon" ></i> |
| </el-input> |
| </el-col> |
| </el-form-item> |
| |
| <el-form-item label="备注:" prop="remarks"> |
| <el-col :span="18"> |
| <el-input v-model.number="regionDiaForm.remarks" style="width: 187px;"> |
| <i class="el-icon-edit el-input__icon" slot="icon" ></i> |
| </el-input> |
| </el-col> |
| </el-form-item> |
| |
| </el-form> |
| <div slot="footer" class="dialog-footer"> |
| <el-button @click="resetForm('regionDiaForm') ">取 消</el-button> |
| <el-button type="primary" @click="saveRegion('regionDiaForm')">确 定</el-button> |
| </div> |
| </el-dialog> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| var vue = new Vue({ |
| el:'#regionapp', |
| data:{ |
| tableData:[], |
| currPage: 1, |
| pageSize:10, |
| totSize:0, |
| currentRow: null, |
| parentRegionDis:false, |
| regionform:{ |
| regionname:'' |
| }, |
| dialogFormVisible: false, |
| dlgAllotDevVisible:false, |
| parentRegions:[], |
| levels:[], |
| regionDiaForm:{ |
| regionid:'', |
| regionname:'', |
| level:'', |
| parentid:'', |
| address:'', |
| remarks:'' |
| }, |
| rules:{ |
| regionid:[ |
| {required:true,message:'请输入区域编号',trigger:'blur'}, |
| ], |
| regionname:[ |
| {required:true,message:'请输入区域名称',trigger:'blur'}, |
| ], |
| level: [ |
| {required: true, message: '请选择区域级别', trigger: 'blur'} |
| ], |
| parentid: [ |
| {required: true, message: '请选择父区域', trigger: 'blur'} |
| ], |
| address: [ |
| {required: true, message: '请输入详细地址', trigger: 'blur'} |
| ] |
| }, |
| regiontitile:'添加区域', |
| }, |
| methods:{ |
| handleSizeChange:function(val) { |
| this.pageSize=val; |
| commonQuery(this,this.regionform.regionname,this.currPage,val); |
| //console.log('每页条'+val); |
| }, |
| currPageChange:function(val) { |
| this.currPage=val; |
| commonQuery(this,this.regionform.regionname,this.currPage,this.pageSize); |
| //console.log('当前页:'+val); |
| }, |
| currRowChange:function(val) { |
| this.currentRow = val; |
| }, |
| query:function(){ |
| this.pagesize=10; |
| this.currPage=1; |
| commonQuery(this,this.regionform.regionname,this.currPage,this.pageSize); |
| }, |
| addRegion:function () { |
| getFillData(this,"-1"); |
| this.dialogFormVisible = true; |
| this.regiontitle="添加区域" |
| }, |
| delRegion:function(regionid){ |
| deletedata(regionid); |
| }, |
| editRegion:function(regionid){ |
| this.parentRegionDis=false; |
| getFillData(this,regionid); |
| this.dialogFormVisible = true; |
| this.regiontitile="修改区域" |
| }, |
| resetForm: function (formName) { |
| this.$refs[formName].resetFields(); |
| this.dialogFormVisible = false; |
| }, |
| saveRegion: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.regionDiaForm,formName); |
| } |
| }, |
| levelChange: function (value) { |
| if (value == 0) { |
| this.parentRegionDis = true; |
| } else { |
| this.parentRegionDis = false; |
| getFregion(this,value); |
| } |
| }, |
| levelform: function (row, column, cellValue) { |
| return row.level+"级"; |
| } |
| }, |
| created:function(){ |
| var _self=this; |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:encodeURI("[[@{/system/loadRegionList?regionname=}]]"), |
| success:function(ret){ |
| //console.log(ret); |
| _self.totSize=ret.PageResult.totalCount; |
| _self.tableData=ret.PageResult.list; |
| } |
| }) |
| } |
| }) |
| |
| function refreshThisTable(){ |
| commonQuery(vue,vue.regionform.regionname,vue.currPage,vue.pageSize); |
| }; |
| |
| function commonQuery(_self,regionname,pageno,pagesize){ |
| $.ajax({ |
| type: "get", |
| dataType: "json", |
| url: encodeURI("[[@{/system/loadRegionList?regionname=}]]" + regionname + "&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(regionid){ |
| layer.confirm('是否删除该区域', {icon: 3, title:'请确认',offset:'30%'},function(index){ |
| $.ajax({ |
| type:"get", |
| dataType:"json", |
| url:"[[@{/system/deleteRegion?regionid=}]]"+regionid, |
| 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("[[@{/system/loadRegionForUpdate?regionid=}]]" + id), |
| success: function (ret) { |
| var dictlist = []; |
| var parentlist = []; |
| var dict = ret.dicts; |
| for (var i = 0; i < dict.length; i++) { |
| dictlist.push({ |
| value: dict[i]["dictval"], |
| label: dict[i]["dictcaption"] |
| |
| }); |
| } |
| _self.levels = dictlist; |
| |
| if (ret.region != null) { |
| _self.regionDiaForm.regionid = ret.region.regionid; |
| _self.regionDiaForm.regionname = ret.region.regionname; |
| _self.regionDiaForm.level = ret.region.level; |
| _self.regionDiaForm.parentid = ret.region.parentid; |
| _self.regionDiaForm.address = ret.region.address; |
| if (ret.region.level == 0) { |
| _self.parentRegionDis = true; |
| } |
| _self.regionDiaForm.remarks = ret.region.remarks; |
| |
| } |
| |
| |
| var fRegion = ret.fRegion; |
| for (var j=0;j<fRegion.length;j++){ |
| parentlist.push({ |
| value:fRegion[j]["regionid"], |
| label:fRegion[j]["regionname"] |
| }); |
| } |
| |
| _self.parentRegions = parentlist; |
| } |
| }) |
| } |
| |
| /* function lookTree(){ |
| alert(tree); |
| }*/ |
| |
| |
| function saveData(_that,formdata,formName){ |
| var url = null; |
| if(vue.regiontitile == "添加区域"){ |
| url = encodeURI("[[@{/system/addRegion}]]"); |
| } |
| if(vue.regiontitile == "修改区域"){ |
| url = encodeURI("[[@{/system/updateRegion}]]") |
| } |
| 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 getFregion(_self,value){ |
| $.ajax({ |
| type: "get", |
| dataType: "json", |
| url: encodeURI("[[@{/system/getFregion?level=}]]" + value), |
| success: function (ret) { |
| var fList = []; |
| var parentRegion = ret.parentRegion; |
| for (var j=0;j<parentRegion.length;j++){ |
| fList.push({ |
| value:parentRegion[j]["regionid"], |
| label:parentRegion[j]["regionname"] |
| }); |
| } |
| |
| _self.parentRegions = fList; |
| } |
| }) |
| } |
| |
| </script> |