设备地区

This commit is contained in:
hh
2020-11-19 13:41:59 +08:00
parent 1750b25e3b
commit 91c8de961b
3 changed files with 109 additions and 47 deletions

View File

@ -2,7 +2,7 @@
<section class="app-container">
<el-row>
<el-col :span="4">
<region @selectdRegionCode="selectdRegionCode"></region>
<region @selectdRegionCode="selectdRegionCode" :currentNodeKey.sync="queryParams.provinceCode"></region>
</el-col>
<el-col :span="20">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
@ -47,11 +47,11 @@
</el-table-column>
<el-table-column prop="deviceModel" align="center" label="装置模型">
</el-table-column>
<el-table-column prop="provinceCode" align="center" label="省份">
<el-table-column prop="proName" align="center" label="省份">
</el-table-column>
<el-table-column prop="cityCode" align="center" label="市">
<el-table-column prop="cityName" align="center" label="市">
</el-table-column>
<el-table-column prop="areaCode" align="center" label="区">
<el-table-column prop="disName" align="center" label="区">
</el-table-column>
<el-table-column prop="status" align="center" label="在线状态">
</el-table-column>
@ -70,7 +70,7 @@
</el-row>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="设备ID" prop="deviceId">
<el-input v-model="form.deviceId" placeholder="请输入设备ID" />
</el-form-item>
@ -104,14 +104,23 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="国家行政区 省" prop="provinceCode">
<el-input v-model="form.provinceCode" />
<el-form-item label="国家行政区 省" prop="proCode">
<el-select v-model="form.proCode" clearable placeholder="请选择" @change="provinceCodeChange">
<el-option v-for="item in provinceSelectList" :key="item.code" :label="item.cityName" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="国家行政区 市" prop="cityCode">
<el-input v-model="form.cityCode" />
<el-select v-model="form.cityCode" clearable placeholder="请选择" @change="cityCodeChange">
<el-option v-for="item in citySelectList" :key="item.code" :label="item.cityName" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="国家行政区 区" prop="areaCode">
<el-input v-model="form.areaCode" />
<el-form-item label="国家行政区 区" prop="disCode">
<el-select v-model="form.disCode" clearable placeholder="请选择">
<el-option v-for="item in districtSelectList" :key="item.code" :label="item.cityName" :value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -134,17 +143,29 @@ import {
import { select as productSelect } from "@/api/hardware/product";
import { select as projectSelect } from "@/api/hardware/project";
import { userSelect } from "@/api/system/user";
import { list as provinceList, getProvinceByParent } from "@/api/hardware/province";
export default {
name: "DeviceList",
components: {
Region,
},
// watch: {
// 'form.proCode': function(code) {
// this.provinceCodeChange(code)
// },
// 'form.cityCode': function(code) {
// this.cityCodeChange(code)
// },
// },
data () {
return {
// 产品下拉列表
productSelectList: [],
userSelectList: [],
projectSelectList: [],
provinceSelectList: [],
citySelectList: [],
districtSelectList: [],
// 选中数组
ids: [],
// 非单个禁用
@ -187,6 +208,15 @@ export default {
projectId: [
{ required: true, message: "项目不能为空", trigger: "blur" },
],
proCode: [
{ required: true, message: "省不能为空", trigger: "blur" },
],
cityCode: [
{ required: true, message: "市不能为空", trigger: "blur" },
],
disCode: [
{ required: true, message: "区不能为空", trigger: "blur" },
],
},
};
},
@ -206,10 +236,17 @@ export default {
this.$message.error(msg);
}
})
provinceList().then(({ code, msg, rows }) => {
if (code == 200) {
this.provinceSelectList = rows;
} else {
this.$message.error(msg);
}
})
this.getList();
},
methods: {
selectdRegionCode({ code }) {
selectdRegionCode ({ code }) {
this.queryParams.provinceCode = code;
this.handleQuery();
},
@ -225,6 +262,29 @@ export default {
}
})
},
getProvinceByParent(id) {
return new Promise((resolve, reject) => {
getProvinceByParent(id).then(({ code, msg, data }) => {
if (code == 200) {
resolve(data);
} else {
this.$message.error(msg);
reject({msg, code})
}
}).catch(error => {
reject(error)
})
})
},
async provinceCodeChange (id) {
delete this.form.cityCode;
delete this.form.disCode;
this.citySelectList = await this.getProvinceByParent(id);
},
async cityCodeChange (id) {
delete this.form.disCode;
this.districtSelectList = await this.getProvinceByParent(id);
},
/** 搜索按钮操作 */
handleQuery () {
this.queryParams.pageNum = 1;
@ -278,17 +338,17 @@ export default {
/** 修改按钮操作 */
handleUpdate (row) {
this.reset();
info(row.id).then(({ code, info, msg }) => {
if ( 200 == code ) {
info(row.id).then( ({ code, info, msg }) => {
if (200 == code) {
this.provinceCodeChange(info.proCode);
this.cityCodeChange(info.cityCode);
this.form = info;
this.open = true;
this.title = "修改设备";
} else {
this.msgError(msg);
}
})
return
this.form = row;
this.open = true;
this.title = "修改设备";
},
/** 提交按钮 */
submitForm: function () {