<template>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
append-to-body
|
:title="title"
|
:close-on-click-modal="false"
|
width="600px"
|
>
|
<el-form ref="dataForm" :rules="dataFormRules" :model="dataForm" label-position="right" label-width="140px" width="600px">
|
<el-form-item label="省:" prop="name">
|
<el-select v-model="dataForm.province" clearable filterable @change="changeArea('province')">
|
<el-option
|
v-for="item in provinceList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="市:">
|
<el-select v-model="dataForm.city" clearable filterable @change="changeArea('city')">
|
<el-option
|
v-for="item in cityList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item type="textarea" label="区:" prop="memo">
|
<el-select v-model="dataForm.district" clearable filterable>
|
<el-option
|
v-for="item in districtList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div align="right">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitApproach()">确认</el-button>
|
</div>
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import {getCityListData, getProvinceListData} from "../../../../api/area";
|
|
export default {
|
name: "lookStoreHouse",
|
data(){
|
return{
|
title:'',
|
dialogVisible:false,
|
dataForm:{
|
province:'',
|
city:'',
|
district:'',
|
},
|
provinceList:[],
|
cityList:[],
|
districtList:[],
|
dataFormRules:{
|
|
},
|
}
|
},
|
created(){
|
this.getProvince()
|
},
|
methods:{
|
selectApproach(){
|
this.dataForm = {
|
province:'',
|
city:'',
|
district:'',
|
}
|
this.dialogVisible = true
|
},
|
async getProvince(){
|
let res = await getProvinceListData()
|
if(res.data.code === "200"){
|
this.provinceList = res.data.result.provinceList
|
}
|
},
|
async changeArea(value){
|
if(value === 'province'){
|
this.dataForm.city = ''
|
this.dataForm.district = ''
|
this.areaListQuery = {
|
type: 2,
|
parenttype: 1,
|
parentname: this.dataForm.province,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.cityList = res.data.result
|
}
|
}else if(value === 'city'){
|
this.dataForm.district = ''
|
this.areaListQuery = {
|
type: 3,
|
parenttype: 2,
|
parentname: this.dataForm.city,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.districtList = res.data.result
|
}
|
}
|
},
|
submitApproach(){
|
this.$emit('giveApproach',this.dataForm)
|
this.dialogVisible = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/ .el-input__inner {
|
width:300px;
|
}
|
</style>
|
