<template>
|
<div class="params-dialog white-bg">
|
<el-form ref="ruleForm" size="mini" label-position="top" :model="params" :rules="rules">
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="地图字段" prop="dataName">
|
<el-select v-model="params.dataName" placeholder="请选择地图" @change="mapChange" :filterable="true">
|
<el-option v-for="item in mapList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="form-footer">
|
<three-btn @click="submitFrom">确定</three-btn>
|
</div>
|
</el-form>
|
<!-- 省 -->
|
<el-dialog v-cloak top="0" class="dialog-center" title='请选择省' :visible.sync="province.dialogVisible"
|
width="280px" append-to-body>
|
<el-form size="small">
|
<el-form-item label="省">
|
<el-select v-model="province.value" placeholder="请选择省" :filterable="true">
|
<el-option v-for="province in province.list" :key="province.name" :label="province.name"
|
:value="province.name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div style="text-align: right;">
|
<el-button type="primary" size="mini" @click="provinceOk">确定</el-button>
|
<el-button size="mini" @click="province.dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
<!-- 市 -->
|
<el-dialog v-cloak top="0" class="dialog-center" title='请选择市' :visible.sync="city.dialogVisible" width="280px"
|
append-to-body>
|
<el-form size="small">
|
<el-form-item label="市">
|
<el-select v-model="city.value" placeholder="请选择市" :filterable="true">
|
<el-option v-for="city in city.list" :key="city.name" :label="city.name" :value="city.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div style="text-align: right;">
|
<el-button type="primary" size="mini" @click="cityOk">确定</el-button>
|
<el-button size="mini" @click="city.dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
<!-- 区县 -->
|
<el-dialog top="0" class="dialog-center" title='请选择区县' :visible.sync="county.dialogVisible" width="280px"
|
append-to-body>
|
<el-form size="small">
|
<el-form-item label="区">
|
<el-select v-model="county.value" placeholder="请选择市" :filterable="true">
|
<el-option v-for="county in county.list" :key="county.name" :label="county.name"
|
:value="county.name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div style="text-align: right;">
|
<el-button type="primary" size="mini" @click="countyOk">确定</el-button>
|
<el-button size="mini" @click="county.dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
LinkagePlus
|
} from '../../assets/js/tools'
|
import mapJson from '../../../public/mapJson/js'
|
import {
|
searchProvince,
|
searchCity,
|
searchCounty,
|
addMapOutlineAction
|
} from '../../assets/js/api.js'
|
import {
|
const_province_city_county
|
} from '../../assets/js/const'
|
|
export default {
|
props: {
|
list: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {
|
layout: {
|
span: 24,
|
gutter: 16,
|
},
|
params: {
|
StationName1: '', // 省*
|
StationName2: '', // 市*
|
StationName5: '', // 区县*
|
dataName: '', // 数据名称
|
},
|
linkage: {
|
province: '',
|
provinces: [],
|
city: '',
|
cities: [],
|
county: '',
|
counties: [],
|
},
|
rules: {
|
dataName: [{
|
required: true,
|
message: '不能为空',
|
trigger: 'blur'
|
}]
|
},
|
linkagePlus: new LinkagePlus(),
|
province: {
|
dialogVisible: false,
|
value: '',
|
list: [],
|
},
|
city: {
|
dialogVisible: false,
|
value: '',
|
list: [],
|
},
|
county: {
|
dialogVisible: false,
|
value: '',
|
list: [],
|
},
|
}
|
},
|
methods: {
|
// 提交表单设置参数
|
submitFrom() {
|
this.$refs.ruleForm.validate((valid) => {
|
// 校验通过
|
if (valid) {
|
var tmp = {};
|
tmp.province = this.params.StationName1;
|
tmp.city = this.params.StationName2;
|
tmp.distinct = this.params.StationName5;
|
tmp.name = this.params.dataName;
|
// 添加地图
|
this.addMap(tmp);
|
} else {
|
this.$layer.msg('存在校验未通过的数据！');
|
return false;
|
}
|
});
|
},
|
addMap(tmp) {
|
let loading = this.$layer.loading(1);
|
addMapOutlineAction(tmp).then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$message({
|
type: 'success',
|
message: '添加地图成功！'
|
});
|
// 触发事件
|
this.$emit('success');
|
} else {
|
this.$message({
|
type: 'error',
|
message: '添加地图失败！'
|
});
|
}
|
// 关闭加载框
|
this.$layer.close(loading);
|
}).catch((err) => {
|
console.log(err);
|
// 关闭加载框
|
this.$layer.close(loading);
|
});
|
},
|
searchProvince() { // 省
|
// 查询后台
|
searchProvince().then((res) => {
|
var rs = JSON.parse(res.data.result);
|
var data = [];
|
if (rs.code == 1) {
|
var data = rs.data;
|
}
|
|
// 设置省
|
this.linkage.provinces = data;
|
|
});
|
},
|
searchCity() {
|
// 构造查询条件
|
var searchParams = {
|
StationName1: this.linkage.province
|
};
|
// 查询后台
|
searchCity(searchParams).then((res) => {
|
var rs = JSON.parse(res.data.result);
|
var data = [];
|
if (rs.code == 1) {
|
data = rs.data;
|
}
|
// 设置市
|
this.linkage.cities = data;
|
// 查询区县
|
this.searchCounty();
|
});
|
},
|
searchCounty() {
|
// 构造查询条件
|
var searchParams = {
|
StationName1: this.linkage.province,
|
StationName2: this.linkage.city
|
};
|
// 查询后台
|
searchCounty(searchParams).then((res) => {
|
var rs = JSON.parse(res.data.result);
|
var data = [];
|
if (rs.code == 1) {
|
data = rs.data;
|
}
|
// 设置区县
|
this.linkage.counties = data;
|
});
|
},
|
provinceChange(value) {
|
// 初始化市
|
this.params.StationName2 = '';
|
this.linkage.city = '';
|
this.linkage.cities = [];
|
|
// 初始化区县
|
this.params.StationName5 = '';
|
this.linkage.county = '';
|
this.linkage.counties = [];
|
// 点击其他
|
if (value == '其他') {
|
var provinces = this.linkagePlus.getProvince();
|
this.province.dialogVisible = true;
|
this.province.value = provinces[0].name;
|
this.province.list = provinces;
|
// 恢复上一次选择的内容
|
this.params.StationName1 = this.linkage.province;
|
} else {
|
this.linkage.province = value;
|
}
|
|
// 查询市
|
this.searchCity();
|
},
|
provinceOk() {
|
var value = this.province.value;
|
// 获取选择的值
|
this.params.StationName1 = value;
|
// 记录选择的内容
|
this.linkage.province = value;
|
if (this.linkage.provinces.indexOf(value) == -1) {
|
this.linkage.provinces.push(value);
|
}
|
// 修改面板显示状态为关闭
|
this.province.dialogVisible = false;
|
|
// 查询市
|
this.searchCity();
|
},
|
cityChange(value) {
|
// 初始化区县
|
this.params.StationName5 = '';
|
this.linkage.county = '';
|
this.linkage.counties = [];
|
// 获取省
|
var StationName1 = this.params.StationName1;
|
// 点击其他
|
if (value == '其他') {
|
// 恢复上一次选择的内容
|
this.params.StationName2 = this.linkage.city;
|
// 未选择省
|
if (StationName1 == '') {
|
// 提出告警
|
this.$message({
|
type: 'warning',
|
message: '请先选择省',
|
});
|
return;
|
}
|
var result = this.linkagePlus.getCity(StationName1);
|
if (result.code == 1) {
|
var cities = result.data;
|
this.city.dialogVisible = true;
|
this.city.value = cities[0].name;
|
this.city.list = cities;
|
} else {
|
// 提出告警
|
this.$message({
|
type: 'warning',
|
message: result.msg,
|
});
|
}
|
} else {
|
this.linkage.city = value;
|
}
|
// 查询区县
|
this.searchCounty();
|
},
|
cityOk() {
|
var value = this.city.value;
|
// 获取选择的值
|
this.params.StationName2 = value;
|
// 记录选择的内容
|
this.linkage.city = value;
|
if (this.linkage.cities.indexOf(value) == -1) {
|
this.linkage.cities.push(value);
|
}
|
// 修改面板显示状态为关闭
|
this.city.dialogVisible = false;
|
|
// 查询区县
|
this.searchCounty();
|
},
|
countyChange(value) {
|
// 获取省
|
var StationName1 = this.params.StationName1;
|
// 获取市
|
var StationName2 = this.params.StationName2;
|
// 点击其他
|
if (value == '其他') {
|
// 恢复上一次选择的内容
|
this.params.StationName5 = this.linkage.county;
|
// 未选择省
|
if (StationName1 == '') {
|
// 提出告警
|
this.$message({
|
type: 'warning',
|
message: '请先选择省',
|
});
|
return;
|
}
|
|
// 未选择市
|
if (StationName2 == '') {
|
// 提出告警
|
this.$message({
|
type: 'warning',
|
message: '请先选择市',
|
});
|
return;
|
}
|
var result = this.linkagePlus.getCounty(StationName1, StationName2);
|
if (result.code == 1) {
|
var counties = result.data;
|
this.county.dialogVisible = true;
|
this.county.value = counties[0].name;
|
this.county.list = counties;
|
} else {
|
// 提出告警
|
this.$message({
|
type: 'warning',
|
message: result.msg,
|
});
|
}
|
} else {
|
this.linkage.county = value;
|
}
|
},
|
countyOk() {
|
var value = this.county.value;
|
// 获取选择的值
|
this.params.StationName5 = value;
|
// 记录选择的内容
|
this.linkage.county = value;
|
if (this.linkage.counties.indexOf(value) == -1) {
|
this.linkage.counties.push(value);
|
}
|
// 修改面板显示状态为关闭
|
this.county.dialogVisible = false;
|
},
|
mapChange(value) {
|
let mapInfo = mapJson.getItemByValue(value, this.mapList);
|
this.params.StationName1 = mapInfo.StationName1;
|
this.params.StationName2 = mapInfo.StationName2;
|
this.params.StationName5 = mapInfo.StationName5;
|
}
|
},
|
computed: {
|
mapList() {
|
let mapList = mapJson.mapList();
|
let list = this.list;
|
return mapList.filter(item=>{
|
let isIn = false;
|
for(let i=0; i<list.length; i++) {
|
if(list[i].name == item.value) {
|
isIn = true;
|
break;
|
}
|
}
|
return !isIn;
|
});
|
},
|
},
|
mounted() {
|
// 设置省市区县的数据
|
this.linkagePlus.setData(const_province_city_county);
|
// 查询省-市-区县
|
this.searchProvince();
|
},
|
}
|
</script>
|
|
<style scoped>
|
.params-dialog {
|
padding: 15px;
|
}
|
.white-bg {
|
background-color: #FFFFFF;
|
}
|
</style>
|
