cxc/rn-bms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

设备地区

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/hardware/province.js Normal file
View File

@ -0,0 +1,15 @@
import request from '@/utils/request'
export function list() {
return request({
url: '/system/province/list',
method: 'get',
})
}
export function getProvinceByParent(id) {
return request({
url: '/system/province/getProvinceByParent?parent=' + id,
method: 'get',
})
}

47
src/components/Region/index.vue
View File

@ -1,6 +1,6 @@
<template>
<section>
<el-tree @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy
<el-tree :current-node-key="currentNodeKey" @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy highlight-current
:expand-on-click-node="false" ref="tree" />
</section>
</template>
@ -10,6 +10,22 @@
import { areaSelect, getProvinceByArea, getProvinceByParent } from "@/api/hardware/area";
export default {
name: 'Region',
props: {
'currentNodeKey': {
type: String,
default: ''
},
},
watch: {
currentNodeKey(id) {
// Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。可以用 $refs 获取 Tree 实例
if (id.toString()) {
this.$refs["tree"].setCurrentKey(id);
} else {
this.$refs["tree"].setCurrentKey(null);
}
}
},
data () {
return {
defaultProps: {
@ -17,36 +33,7 @@ export default {
label: 'name',
isLeaf: 'leaf'
},
list: [
{
"id": 4, "areaName": "中原地区", "areaCode": "17", "ordinal": null, "provinceIds": null, children: [
{ "id": 1, "areaName": "安徽省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
{ "id": 1, "areaName": "河南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
]
},
{ "id": 1, "areaName": "华北地区", "areaCode": "001", "ordinal": 1, "provinceIds": null },
{
"id": 2, "areaName": "华南地区", "areaCode": "002", "ordinal": 2, "provinceIds": null, children: [
{ "id": 1, "areaName": "江苏省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
{ "id": 1, "areaName": "浙江省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
{ "id": 1, "areaName": "湖南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
]
}
]
// list: [
// {
// label: '一级 1',
// children: [{
// label: '二级 1-1',
// children: [{
// label: '三级 1-1-1'
// }]
// }]
// }
// ]
}
},
created () {
},

94
src/views/hardware/deviceList/index.vue
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 () {