|
@@ -31,9 +31,10 @@
|
|
|
|
|
|
<view class="form-label-input">
|
|
|
<view class="phone-form-label"><text class="form-label-require">*</text>籍贯</view>
|
|
|
- <picker mode="multiSelector" :range="pickerData" :range-key="'label'" @change="onPickerChange">
|
|
|
+ <picker mode="multiSelector" :range="multiArray" :range-key="'label'" :value="multiIndex"
|
|
|
+ @columnchange="bindMultiPickerColumnChange" @change="onPickerConfirm">
|
|
|
<view class="picker">
|
|
|
- 当前选择:{{ selectedProvince }} - {{ selectedCity }}
|
|
|
+ {{ multiArray[0][multiIndex[0]].label }} - {{ multiArray[1][multiIndex[1]].label }}
|
|
|
</view>
|
|
|
</picker>
|
|
|
</view>
|
|
@@ -159,9 +160,12 @@
|
|
|
xingzuoList: [],
|
|
|
minzuList: [],
|
|
|
// areaTree: [],
|
|
|
- pickerData: [],
|
|
|
- selectedProvince: '',
|
|
|
- selectedCity: ''
|
|
|
+ multiArray: [
|
|
|
+ [],
|
|
|
+ []
|
|
|
+ ], // 初始化两列数据
|
|
|
+ multiIndex: [0, 0], // 初始化选中索引
|
|
|
+ allData: [], // 存储后端返回的完整数据
|
|
|
|
|
|
}
|
|
|
},
|
|
@@ -175,33 +179,91 @@
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
- formatData(data) {
|
|
|
- const provinces = data.map(province => {
|
|
|
- return {
|
|
|
+ getJiguan() {
|
|
|
+ getJiazhengJiguan({}).then(res => {
|
|
|
+ // this.areaTree = res.data
|
|
|
+ // this.pickerData = this.formatData(res.data);
|
|
|
+ this.allData = res.data;
|
|
|
+ const provinces = this.allData.map(province => ({
|
|
|
label: province.lable,
|
|
|
value: province.id,
|
|
|
- children: province.children.map(city => {
|
|
|
- return {
|
|
|
- label: city.lable,
|
|
|
- value: city.id
|
|
|
- };
|
|
|
- })
|
|
|
- };
|
|
|
+ children: province.children,
|
|
|
+ }));
|
|
|
+
|
|
|
+ const cities = this.allData[0].children.map(city => ({
|
|
|
+ label: city.lable,
|
|
|
+ value: city.id,
|
|
|
+ }));
|
|
|
+ // 回显已选中的城市(假设已选中的城市 id 是 1301)
|
|
|
+ //this.setSelectedCity(1301);
|
|
|
+
|
|
|
+ this.multiArray = [provinces, cities];
|
|
|
+ //console.log('this.pickerData', this.pickerData);
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('获取技能类型失败:', error);
|
|
|
});
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ bindMultiPickerColumnChange(e) {
|
|
|
+ const {
|
|
|
+ column,
|
|
|
+ value
|
|
|
+ } = e.detail;
|
|
|
+
|
|
|
+ // 更新 multiIndex
|
|
|
+ this.multiIndex[column] = value;
|
|
|
+
|
|
|
+ // 如果是第一列(省份)发生变化,更新第二列(城市)
|
|
|
+ if (column === 0) {
|
|
|
+ const selectedProvince = this.multiArray[0][value];
|
|
|
+ const cities = selectedProvince.children.map(city => ({
|
|
|
+ label: city.lable,
|
|
|
+ value: city.id,
|
|
|
+ }));
|
|
|
|
|
|
- return provinces;
|
|
|
+ // 更新 multiArray 和 multiIndex
|
|
|
+ this.multiArray[1] = cities;
|
|
|
+ this.multiIndex[1] = 0; // 重置城市列为第一个选项
|
|
|
+ }
|
|
|
+
|
|
|
+ // 强制更新视图
|
|
|
+ this.$forceUpdate();
|
|
|
},
|
|
|
- onPickerChange(e) {
|
|
|
- const [provinceIndex, cityIndex] = e.detail.value;
|
|
|
- const selectedProvince = this.pickerData[provinceIndex];
|
|
|
- const selectedCity = selectedProvince.children[cityIndex];
|
|
|
+ // 确认选择时获取完整数据
|
|
|
+ onPickerConfirm() {
|
|
|
+ const [provinceIndex, cityIndex] = this.multiIndex;
|
|
|
|
|
|
- this.selectedProvince = selectedProvince.label;
|
|
|
- this.selectedCity = selectedCity.label;
|
|
|
+ const selectedProvince = this.multiArray[0][provinceIndex];
|
|
|
+ const selectedCity = this.multiArray[1][cityIndex];
|
|
|
+
|
|
|
+ console.log("选中的省份完整数据:", selectedProvince);
|
|
|
+ console.log("选中的城市完整数据:", selectedCity);
|
|
|
},
|
|
|
+ setSelectedCity(cityId) {
|
|
|
+ for (let i = 0; i < this.allData.length; i++) {
|
|
|
+ const province = this.allData[i];
|
|
|
+ for (let j = 0; j < province.children.length; j++) {
|
|
|
+ const city = province.children[j];
|
|
|
+ if (city.id === cityId) {
|
|
|
+ // 设置选中的省份和城市索引
|
|
|
+ this.multiIndex = [i, j];
|
|
|
|
|
|
+ // 更新 multiArray 的第二列(城市)
|
|
|
+ const cities = province.children.map(city => ({
|
|
|
+ label: city.lable,
|
|
|
+ value: city.id,
|
|
|
+ }));
|
|
|
+ this.multiArray[1] = cities;
|
|
|
|
|
|
+ // 强制更新视图
|
|
|
+ this.$forceUpdate();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
checkAllFields() {
|
|
|
const requiredFields = [{
|
|
@@ -284,16 +346,7 @@
|
|
|
duration: 2000
|
|
|
})
|
|
|
},
|
|
|
- getJiguan() {
|
|
|
- getJiazhengJiguan({}).then(res => {
|
|
|
- // this.areaTree = res.data
|
|
|
- this.pickerData = this.formatData(res.data);
|
|
|
-
|
|
|
- console.log('this.pickerData',this.pickerData);
|
|
|
- }).catch(error => {
|
|
|
- console.error('获取技能类型失败:', error);
|
|
|
- });
|
|
|
- },
|
|
|
+
|
|
|
getXueli() {
|
|
|
getJiazhengXueli({}).then(res => {
|
|
|
this.xueliList = res.data
|