diff --git a/src/api/hardware/province.js b/src/api/hardware/province.js new file mode 100644 index 0000000..0b3db67 --- /dev/null +++ b/src/api/hardware/province.js @@ -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', + }) +} diff --git a/src/components/Region/index.vue b/src/components/Region/index.vue index bb2655c..a37f4d9 100644 --- a/src/components/Region/index.vue +++ b/src/components/Region/index.vue @@ -1,6 +1,6 @@ @@ -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 () { }, diff --git a/src/views/hardware/deviceList/index.vue b/src/views/hardware/deviceList/index.vue index 6f49fde..0b267ae 100644 --- a/src/views/hardware/deviceList/index.vue +++ b/src/views/hardware/deviceList/index.vue @@ -2,7 +2,7 @@
- + @@ -47,11 +47,11 @@ - + - + - + @@ -70,7 +70,7 @@ - + @@ -104,14 +104,23 @@ - - + + + + + - + + + + - - + + + + +
@@ -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 () {