js
复制代码
<tr>
//格式
// required自定义指令
<e-td :required="!read" label>
<span>地区：</span>
</e-td>
<td>
//v-if="!read && this.data.nationCode == 148"显示逻辑
<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)"
>
//change事件单独使用不生效需要watch监听一下
<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>
js
复制代码
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
//ress data里记得定义一下用来获取选择的地址的长度在输入的时候做校验用
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
},
// 当在不可编辑的范围内输入时结合输入文字开始位置this.startVal和输入结束
// e.target.selectionEnd位置，通过字符串截取并接还原原来的字符。
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
: ''
},
}
