<tr>
<e-td :required="!read" label>
<span>地区：</span>
</e-td>
<td>
<div
class="table-cell-flex"
style="width:450px"
v-if="!read && this.data.nationCode == 148"
>
<el-form-item prop="nationCode" class="address">
<el-select
placeholder="国家"
v-model="data.nationCode"
@change="getprovince(data.nationCode, 1)"
>
<el-option
v-for="item in nationList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="proviceCode" class="address">
<el-select
placeholder="省级地区"
v-model="data.proviceCode"
@change="getCityList(data.proviceCode, 1)"
>
<el-option
v-for="item in proviceList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item class="el-form-item" prop="cityCode">
<el-select
placeholder="市级地区"
v-model="data.cityCode"
@change="getCountyList(data.cityCode, 1)"
>
<el-option
v-for="item in cityList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item class="el-form-item" prop="countyCode">
<el-select
@change="getCountyName(data.countyCode, 1)"
v-model="data.countyCode"
placeholder="区级地区"
>
<el-option
v-for="item in countyList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
</div>
<div
class="table-cell-flex"
style="width:450px"
v-else-if="!read && this.data.nationCode != 148"
>
<el-form-item prop="nationCode" class="address">
<el-select
placeholder="国家"
v-model="data.nationCode"
@change="getprovince(data.nationCode, 1)"
>
<el-option
v-for="item in nationList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
<div class="el-form-item">
<el-form-item class="address">
<el-select
placeholder="省级地区"
v-model="data.proviceCode"
@change="getCityList(data.proviceCode, 1)"
>
<el-option
v-for="item in proviceList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
</div>
<div class="el-form-item">
<el-form-item class="el-form-item">
<el-select
placeholder="市级地区"
v-model="data.cityCode"
@change="getCountyList(data.cityCode, 1)"
>
<el-option
v-for="item in cityList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
</div>
<div class="el-form-item">
<el-form-item class="el-form-item">
<el-select
@change="getCountyName(data.countyCode, 1)"
v-model="data.countyCode"
placeholder="区级地区"
>
<el-option
v-for="item in countyList"
:key="item.code"
:label="item.codeName"
:value="item.codeCode"
>
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<span v-else>
<template v-if="data.nationProviceCityName">
<span
:style="
equal(
'nationProviceCityName',
data.nationProviceCityName
)
"
>
{
{
data.nationProviceCityName }}
</span>
</template>
<template v-else-if="data.regProvinceAndCityAndCountyName">
<span
:style="
equal(
'regProvinceAndCityAndCountyName',
data.regProvinceAndCityAndCountyName
)
"
>{
{
data.regProvinceAndCityAndCountyName }}</span
>
</template>
<template v-else>
<span :style="equal('proviceName', data.proviceName)">{
{
data.proviceName
}}</span>
<span :style="equal('cityName', data.cityName)">{
{
data.cityName
}}</span>
<span :style="equal('countyName', data.countyName)">{
{
data.countyName
}}</span>
</template>
</span>
</td>
<e-td :required="!read" label>
<span>详细地址：</span>
</e-td>
<td>
<div class="table-cell-flex">
<el-form-item v-if="!read" prop="compAddress">
<el-input
v-model="data.compAddress"
@keydown.delete.native="onDeleteKeyDown"
@keydown.native="onKeyDown"
@compositionstart.native="onCompositionStart"
@compositionend.native="compositionend"
placeholder="请输入详细地址"
></el-input>
</el-form-item>
<span
v-else
:style="equal('compAddress', data.compAddress)"
>{
{
data.compAddress }}</span
>
</div>
</td>
</tr>
watch: {
'data.nationCode': {
handler: function(newval, oldval) {
console.log(newval, 'new')
console.log(oldval, 'old')
if (newval) {
this.getprovince(newval)
}
},
immediate: true
},
'data.proviceCode': {
handler: function(newval, oldval) {
console.log(newval, 'new')
console.log(oldval, 'old')
if (newval) {
this.getCityList(newval)
}
},
immediate: true
},
'data.cityCode': {
handler: function(newval, oldval) {
console.log(newval, 'new')
console.log(oldval, 'old')
if (newval) {
this.getCountyList(newval)
}
},
immediate: true
},
'data.countyCode': {
handler: function(newval) {
if (newval) {
this.getCountyName(newval)
}
},
immediate: true
},
},
methods: {
async getnationList() {
let params = {
classCode: 'countryRegionsAndProvinces',
higherCode: 0
}
let data = await this.$api.common.getDictionary(params)
if (data) {
this.nationList = data
}
},
async getprovince(val, isempty) {
let params = {
classCode: 'countryRegionsAndProvinces',
higherCode: val
}
let data = await this.$api.common.getDictionary(params)
if (data) {
this.proviceList = data
if (isempty == 1) {
this.proviceName = ''
this.cityName = ''
this.countyName = ''
this.data.compAddress = ''
this.data.proviceCode = ''
this.data.cityCode = ''
this.data.countyCode = ''
this.cityList = []
this.countyList = []
}
},
async getCityList(code, isempty) {
let params = {
classCode: 'countryRegionsAndProvinces',
higherCode: code
}
let data = await this.$api.common.getDictionary(params)
if (data) {
this.cityList = data
if (isempty == 1) {
this.cityName = ''
this.countyName = ''
this.data.cityCode = ''
this.data.countyCode = ''
this.countyList = []
this.proviceName = this.getRessName(
this.data.proviceCode,
this.proviceList
)
this.data.compAddress =
this.proviceName + this.cityName + this.countyName
this.ress = this.proviceName + this.cityName + this.countyName
}
}
},
async getCountyList(code, isempty) {
let params = {
classCode: 'countryRegionsAndProvinces',
higherCode: code
}
let data = await this.$api.common.getDictionary(params)
if (data) {
this.countyList = data
if (isempty == 1) {
this.cityName = ''
this.data.countyCode = ''
this.countyName = ''
this.proviceName = this.getRessName(
this.data.proviceCode,
this.proviceList
)
this.cityName = this.getRessName(this.data.cityCode, this.cityList)
this.data.compAddress =
this.proviceName + this.cityName + this.countyName
this.ress = this.proviceName + this.cityName + this.countyName
}
}
},
getCountyName(val, isempty) {
if (isempty == 1) {
this.countyName = ''
this.proviceName = this.getRessName(
this.data.proviceCode,
this.proviceList
)
this.cityName = this.getRessName(this.data.cityCode, this.cityList)
this.countyName = this.getRessName(
this.data.countyCode,
this.countyList
)
this.data.compAddress =
this.proviceName + this.cityName + this.countyName
this.ress = this.proviceName + this.cityName + this.countyName
}
},
onDeleteKeyDown(e) {
let {
selectionStart, selectionEnd } = e.target
if (!(selectionStart > this.ress.length || selectionEnd < 0)) {
e.preventDefault()
}
},
onKeyDown(e) {
if (
!(
e.target.selectionStart > this.ress.length - 1 ||
e.target.selectionEnd < 0
)
) {
e.preventDefault()
}
},
onCompositionStart(e) {
this.checkText = e.data
this.startVal = e.target.selectionStart
},
compositionend(e) {
if (this.startVal !== null) {
this.$nextTick(() => {
if (this.startVal < this.ress.length) {
let targetVal = e.target.value
let startTarget = targetVal.substring(0, this.startVal)
let endTarget = targetVal.substring(e.target.selectionEnd)
e.target.value = startTarget + this.checkText + endTarget
}
})
}
},
getRessName(codeCode, arr) {
return arr.find(o => o.id == Number(codeCode))
? arr.find(o => o.id == Number(codeCode)).codeName
: ''
},
}
