287 lines
7.8 KiB
Vue
287 lines
7.8 KiB
Vue
<template>
|
|
<view class="component">
|
|
<!-- <view class="title">地区信息</view> -->
|
|
|
|
<u--form labelPosition="left" :model="formData" :rules="rules" ref="districtForm">
|
|
<u-form-item label="地址" :required="!readonly" prop="street" @click="changeCity('street', true)" borderBottom>
|
|
<u--textarea :value="nowAddress" autoHeight readonly disabled></u--textarea>
|
|
</u-form-item>
|
|
<u-form-item v-if="!formDataRead.street" label="乡镇" :required="!readonly" prop="street"
|
|
@click="changeCity('street')" borderBottom>
|
|
<u--input :value="formDataText.street" disabled disabledColor="#fff" placeholder="请选择镇"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item v-if="!formDataRead.village" label="村社" :required="!readonly" prop="village"
|
|
@click="changeCity('village')" borderBottom>
|
|
<u--input :value="formDataText.village" type="text" disabled disabledColor="#fff"
|
|
placeholder="请选择村"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item v-if="$store.state.app.userInfo.company.company_type==18" label="小队" :required="!readonly" prop="brigade" @click="changeCity('brigade')" borderBottom>
|
|
<u--input :value="formDataText.brigade" style="pointer-events: none;" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
</u--form>
|
|
<u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
|
|
@cancel="showProvince = false" @close="showProvince = false"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
commonProvince,
|
|
commonCity,
|
|
commonArea,
|
|
commonStreet,
|
|
commonVillage,
|
|
commonBrigade
|
|
} from "@/api/oaPbulic.js"
|
|
import {
|
|
userCompanyBrigade
|
|
} from "@/api/oaUser.js"
|
|
import {
|
|
Toast
|
|
} from "../../libs/uniApi"
|
|
export default {
|
|
name: "districtSelector",
|
|
props: {
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
datas: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showProvince: false,
|
|
formData: {
|
|
province: '',
|
|
city: '',
|
|
area: '',
|
|
street: '',
|
|
village: '',
|
|
brigade: '',
|
|
},
|
|
formDataText: {
|
|
province: '',
|
|
city: '',
|
|
area: '',
|
|
street: '',
|
|
village: '',
|
|
brigade: ''
|
|
},
|
|
formDataRead: {
|
|
province: false,
|
|
city: false,
|
|
area: false,
|
|
street: false,
|
|
village: false,
|
|
brigade: false,
|
|
},
|
|
rules: {
|
|
street: {
|
|
required: true,
|
|
message: '不能为空',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
village: {
|
|
required: true,
|
|
message: '不能为空',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
brigade: {
|
|
required: true,
|
|
message: '不能为空',
|
|
// validator: (rule, value, callback) => {
|
|
// value ? callback() : callback('不能为空')
|
|
// },
|
|
},
|
|
},
|
|
streetList: [],
|
|
villageList: [],
|
|
brigadeList: [],
|
|
changeType: '', //当前选择的城市类型
|
|
};
|
|
},
|
|
watch: {
|
|
datas(newValue, oldValue) {
|
|
if (this.$props.readonly && newValue) {
|
|
this.formDataText.street = this.$props.datas.street_name;
|
|
this.formDataText.village = this.$props.datas.village_name;
|
|
this.formDataText.brigade = this.$props.datas.brigade_name;
|
|
|
|
this.formData.street = this.$props.datas.street_id;
|
|
this.formData.village = this.$props.datas.village_id;
|
|
this.formData.brigade = this.$props.datas.brigade_id;
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
if (!this.$props.readonly) {
|
|
this.initProvinceAndCity();
|
|
} else {
|
|
this.rules = {};
|
|
}
|
|
},
|
|
computed: {
|
|
nowAddress() {
|
|
let address = this.$store.state.app.userInfo;
|
|
let str = '';
|
|
address.province_name ? str += address.province_name : null;
|
|
address.city_name ? str += address.city_name : null;
|
|
address.area_name ? str += address.area_name : null;
|
|
address.street_name ? str += address.street_name : null;
|
|
address.village_name ? str += address.village_name : null;
|
|
return str;
|
|
}
|
|
},
|
|
methods: {
|
|
async validate() {
|
|
return await this.$refs.districtForm.validate();
|
|
},
|
|
// 初始化
|
|
async initProvinceAndCity() {
|
|
let user = this.$store.state.app.userInfo;
|
|
Object.keys(this.formData).forEach(key => {
|
|
this.formData[key] = user[key];
|
|
this.formDataText[key] = user[key + '_name'];
|
|
if (user[key] && key != 'brigade') {
|
|
this.formDataRead[key] = true;
|
|
// 获取选择的列表
|
|
switch (key) {
|
|
case 'street':
|
|
this.loadVillage(this.formData['street']);
|
|
break;
|
|
case 'village':
|
|
this.loadBrigade(this.formData['village']);
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 选择城市
|
|
changeCity(type, toast=false) {
|
|
if(toast) return Toast('不可修改该区域')
|
|
if (this.$props.readonly) return ;
|
|
if (this[type + 'List'].length == 0) {
|
|
if(type=='brigade') return Toast('小队已经建立完毕');
|
|
return Toast('请先选择上一级地区');
|
|
}
|
|
this.changeType = type;
|
|
this.showProvince = true;
|
|
},
|
|
// 选择列表
|
|
changeList() {
|
|
return this[this.changeType + 'List'];
|
|
},
|
|
// 选中城市
|
|
async confirm(e) {
|
|
let flag = false; //清空所选标记
|
|
if (this.formData[this.changeType] != e.value[0][this.changeType + '_code']) flag = true;
|
|
if (this.changeType == 'brigade') {
|
|
this.formData.brigade = e.value[0].id;
|
|
this.formDataText.brigade = e.value[0].brigade_name;
|
|
this.showProvince = false;
|
|
await this.$nextTick();
|
|
this.$refs.districtForm.validate();
|
|
return;
|
|
}
|
|
this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
|
|
this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
|
|
// 加载下一级城市信息
|
|
switch (this.changeType) {
|
|
case 'area':
|
|
this.loadStreet(this.formData['area']);
|
|
break;
|
|
case 'street':
|
|
this.loadVillage(this.formData['street']);
|
|
break;
|
|
case 'village':
|
|
this.loadBrigade(this.formData['village']);
|
|
break;
|
|
}
|
|
// 清空之前所选信息
|
|
if (flag) switch (this.changeType) {
|
|
case 'area':
|
|
this.formData.street = '';
|
|
this.formDataText.street = ''
|
|
case 'street':
|
|
this.formData.village = '';
|
|
this.formDataText.village = ''
|
|
case 'village':
|
|
this.formData.brigade = '';
|
|
this.formDataText.brigade = ''
|
|
}
|
|
this.showProvince = false;
|
|
},
|
|
loadStreet(code) {
|
|
commonStreet({
|
|
street: code
|
|
}).then(res => {
|
|
this.streetList = res.data;
|
|
})
|
|
},
|
|
loadVillage(code) {
|
|
commonVillage({
|
|
village: code
|
|
}).then(res => {
|
|
this.villageList = res.data;
|
|
})
|
|
},
|
|
loadBrigade(code) {
|
|
commonBrigade({
|
|
brigade: code
|
|
}).then(res => {
|
|
// 过滤掉不能选择的小队,只能选择本公司负责的小队
|
|
let f_arr = this.$store.state.app.userInfo.company?.responsible_area?.split(',')||[];
|
|
this.brigadeList = res.data.filter(item=>{
|
|
return f_arr.find(t=>item.id==t);
|
|
});
|
|
// 过滤掉公司已经创建的小队
|
|
userCompanyBrigade().then((e)=>{
|
|
this.brigadeList = this.brigadeList.filter(item=>{
|
|
return !e.data.find(t=>t==item.id);
|
|
})
|
|
this.formData.brigade = '';
|
|
this.formDataRead.brigade = '';
|
|
this.formDataText.brigade = '';
|
|
})
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.component {
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
|
|
&::before {
|
|
width: 8rpx;
|
|
height: 26rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #0122c7;
|
|
content: "";
|
|
display: inline-block;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
// .checkbox{
|
|
// margin: 28rpx;
|
|
// }
|
|
.box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.u-checkbox-group--row[data-v-2ef8bac9] {
|
|
flex: 1;
|
|
}
|
|
</style> |