<!--
@Title: 国内车辆号牌号码输入组件
@Description: 国内车辆号牌号码输入组件，具体使用方法如下：
<its-hphmInput v-model="form.hphm" :glbm="'京A'" :parentmessage.sync="hphm" @onChange="provinceAbbreviationChange"></its-hphmInput>
params:
[
glbm: 省份地方设置
parentmessage.sync: 初始车牌号码
onChange: 固定的事件名称，用于监听子组件回传参数，名称可自定义，其中'provinceAbbreviationChange'为父组件的响应式方法。使用方法，如下：
provinceAbbreviationChange(result){
console.log('父组件接收到的回传：' + result);
}
]
@Author: **
@Create Date: ******
-->
<!-- 使用less编写样式，生效在组件作用域内 -->
<style lang="less" scoped>
@import url("./index");
</style>
<template>
<!-- 唯一根节点 -->
<div class="hphm_box">
<div class="hphm-wite" @click.stop>
<a-auto-complete :disabled="disabled" :dataSource="dataSource" maxlength="8" v-model.tirm="hphm" @select="onSelect" @search="handleSearch" @change="changeAutoComplete" />
<div class="its-province-selBtn" :class="{icon: !glbmTitle}" @click="open">
<template v-if="glbmTitle">
{{glbmTitle}}
</template>
<template v-else>
<i class="itsIcons"></i>
</template>
</div>
<div class="content" v-show="show">
<!--车牌第一页-->
<div class="first-word-wrap" v-show="showFirst">
<div class="first-word">
<div class="provinceHistoryDiv">
<div class="provinceHistory" v-for="(item, index) in provinceData.provinceHistory" @click="selectProvince(item)" :key="'0' + index">
<span>{{item}}</span>
</div>
</div>
<div class="province" v-for="(item, index) in provinceData.province" @click="selectProvince(item)" :key="'1' + index">
<span>{{item}}</span>
</div>
<div class="province" v-for="(item, index) in provinceData.provinceGAT" :key="'2' + index" @click="selectProvinceGAT(item)">
<span>{{item}}</span>
</div>
<div class="provinceArmy" v-for="(item, index) in provinceData.provinceArmy" :key="'3' + index" @click="selectProvinceArmy(item)">
<span>{{item}}</span>
</div>
<div class="provinceSpecial" v-for="(item, index) in provinceData.provinceSpecial" :key="'4' + index" @click="selectProvinceSpecial(item)">
<span>{{item}}</span>
</div>
<div class="numTab" @click="changeTab">AB123…</div>
</div>
</div>
<!--车牌第二页-->
<div class="first-word-wrap" v-show="!showFirst">
<div class="first-word">
<div class="provinceNum">
<div class="province" v-for="(item, index) in provinceData.provinceNum" @click="selectNum(item)" :key="'5' + index">
<span>{{item}}</span>
</div>
</div>
<div class="provinceNull"></div>
<div class="provinceAlphabet">
<div class="province" v-for="(item, index) in provinceData.provinceAlphabet" :key="'6' + index" @click="selectNum(item)">
<span>{{item}}</span>
</div>
</div>
<div class="btn">
<div class="numTabSecond" @click="changeTab">
<template v-if="glbmTitle">
{{glbmTitle}}
</template>
<template v-else>
<i class="itsIcons"></i>
</template>
</div>
</div>
</div>
</div>
</div>
<a-icon class="clearTitle" @click="clearHphm" v-if="glbmTitle.length > 0 || hphm.length > 0" type="close-circle" />
</div>
</div>
</template>
<script>
export default {
// 页面类型组件必须定义一个唯一组件名称，模块[-目录]-页面连字符格式，否则该组件无法使用keepAlive
name: "hphmWite",
props: {
glbm: { // 省份地方设置
type: String,
default: '京A',
},
disabled: {
// 禁用
type: Boolean,
default: false
},
parentmessage: {
type: String,
default: '',
}
},
data() {
return {
// 省份 数字 字母 数据
provinceData: {
provinceHistory: [],
province: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'],
provinceGAT: ['港', '澳', '台'],
provinceArmy: ['军', '空', '武', '总', '炮', '海'],
provinceSpecial: ['警', '学', '挂', '使', '领'],
provinceNum: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
provinceAlphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
},
// 省份拼音表
provinceList: {
'京': 'jing',
'津': 'jin',
'冀': 'ji',
'晋': 'jin',
'蒙': 'meng',
'辽': 'liao',
'吉': 'ji',
'黑': 'hei',
'沪': 'hu',
'苏': 'su',
'浙': 'zhe',
'皖': 'wan',
'闽': 'min',
'赣': 'gan',
'鲁': 'lu',
'豫': 'yu',
'鄂': 'e',
'湘': 'xiang',
'粤': 'yue',
'桂': 'gui',
'琼': 'qiong',
'渝': 'yu',
'川': 'chuan',
'贵': 'gui',
'云': 'yun',
'藏': 'zang',
'陕': 'shan',
'甘': 'gan',
'青': 'qing',
'宁': 'ning',
'新': 'xin',
'港': 'gang',
'澳': 'ao',
'台': 'tai',
'军': 'jun',
'空': 'kong',
'武': 'wu',
'总': 'zong',
'炮': 'pao',
'海': 'hai',
'警': 'jing',
'学': 'xue',
'挂': 'gua',
'使': 'shi',
'领': 'ling'
},
show: false,
showFirst: true,
// 车牌号码
hphm: '',
// 自动完成的数据源
dataSource: [],
glbmTitle: ''
};
},
watch: {
hphm: {
handler(val, oldVal) {
if (val.length === 0) {
this.showFirst = true;
}
if (val.length === 1) {
this.showFirst = false;
}
if (val.length === 8) {
this.showFirst = true;
}
},
deep: true,
immediate: true
},
parentmessage: {
handler(val, oldVal) {
if(!val) {
this.glbmTitle = ''
return
}
if(val.length < oldVal.length && val.length <=5) {
this.hphm = val
}else if(val.length > oldVal.length && val.length > 6) {
this.glbmTitle = val.substring(0,2)
this.hphm = val.substring(2,val.length)
}
},
deep: true,
immediate: true
},
},
methods: {
clearHphm() {
this.hphm = ''
this.glbmTitle = ''
},
changeTab() {
this.showFirst = !this.showFirst;
},
open() {
if (this.disabled) return false
this.show = !this.show;
},
selectProvince(item) {
this.glbmTitle = item
this.showFirst = false;
// this.hphm = item;
// 获取选择的值，回传数据给父组件
// this.$emit("onChange", this.hphm);
if (this.provinceData.provinceHistory.includes(item)) {
return false;
}
if (this.provinceData.provinceHistory.length > 7) {
this.provinceData.provinceHistory.shift();
this.provinceData.provinceHistory.push(item);
return false;
} else {
this.provinceData.provinceHistory.push(item);
}
localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
},
selectProvinceGAT(item) {
if (this.hphm.length > 7) {
return false;
}
this.hphm = this.hphm + item;
// 获取选择的值，回传数据给父组件
this.$emit("onChange", this.hphm);
if (this.provinceData.provinceHistory.includes(item)) {
return false;
}
if (this.provinceData.provinceHistory.length > 7) {
this.provinceData.provinceHistory.shift();
this.provinceData.provinceHistory.push(item);
return false;
} else {
this.provinceData.provinceHistory.push(item);
}
localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
},
selectProvinceArmy(item) {
if (this.hphm.length > 7) {
return false;
}
this.hphm = this.hphm + item;
// 获取选择的值，回传数据给父组件
this.$emit("onChange", this.hphm);
if (this.provinceData.provinceHistory.includes(item)) {
return false;
}
if (this.provinceData.provinceHistory.length > 7) {
this.provinceData.provinceHistory.shift();
this.provinceData.provinceHistory.push(item);
return false;
} else {
this.provinceData.provinceHistory.push(item);
}
localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
},
selectProvinceSpecial(item) {
if (this.hphm.length > 7) {
return false;
}
this.hphm = this.hphm + item;
// 获取选择的值，回传数据给父组件
this.$emit("onChange", this.hphm);
if (this.provinceData.provinceHistory.includes(item)) {
return false;
}
if (this.provinceData.provinceHistory.length > 7) {
this.provinceData.provinceHistory.shift();
this.provinceData.provinceHistory.push(item);
return false;
} else {
this.provinceData.provinceHistory.push(item);
}
localStorage.setItem('provinceHistory', JSON.stringify(this.provinceData.provinceHistory))
},
selectNum(item) {
// debugger
if(this.glbmTitle.length < 2) {
this.glbmTitle += item
}else {
if (this.hphm && this.hphm.length > 5) {
return false;
}
this.hphm = this.hphm + item;
// 获取选择的值，回传数据给父组件
this.$emit("onChange", this.glbmTitle + this.hphm);
}
},
handleSearch(value) {
// console.log("TCL: handleSearch -> value", value)
if (!value) {
this.dataSource = [];
return false;
}
let data = [];
let valueNew = value.toLowerCase();
for (let key in this.provinceList) {
if (this.provinceList[key].startsWith(valueNew)) {
data.push(key);
}
}
this.dataSource = data;
},
onSelect(value) {
},
changeAutoComplete(value) {
// 车牌长度大于8 处理
if (value.length > 7) {
let data = value.substring(0, 8);
value = data;
this.hphm = data;
this.$emit("onChange", this.hphm.toUpperCase());
return false;
}
this.hphm = value;
this.$emit("onChange", this.glbmTitle + this.hphm.toUpperCase());
},
},
mounted() {
this.glbmTitle = this.glbm
// 获取 省份选择历史
let data = localStorage.getItem('provinceHistory');
if (data) {
let provinceHistory = JSON.parse(data);
this.$set(this.provinceData, 'provinceHistory', provinceHistory);
} else {
this.$set(this.provinceData, 'provinceHistory', []);
}
document.body.addEventListener('click', () => {
this.show = false;
}, false);
}
};
</script>
