修改小队

This commit is contained in:
weipengfei 2023-08-09 15:22:40 +08:00
parent dfbb94c029
commit e50e2f51f0
5 changed files with 179 additions and 63 deletions

View File

@ -17,7 +17,7 @@
</view>
<view class="bottom">
<view class="left">
<uni-icons type="location" color="#666666" size="13"></uni-icons>
<uni-icons type="location" color="#666666" size="14"></uni-icons>
<view class="location">区域:</view>
</view>
<view style="flex: 1;">{{company.address}}</view>

View File

@ -1,14 +1,30 @@
<template>
<view class="component">
<view class="title">地区信息</view>
<u--form labelPosition="left" :model="formData" :rules="rules" ref="districtForm">
<u-form-item v-if="datas && datas.street" label="村社" :required="!readonly" prop="village" @click="changeCity()" borderBottom>
<u-form-item label="地址" :required="!readonly" prop="street" @click="changeCity('street')" borderBottom>
<u--textarea :value="nowAddress" autoHeight readonly></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 label="小队" :required="!readonly" prop="brigade" @click="changeCity('brigade')" borderBottom>
<u--input :value="formDataText.brigade" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<u-form-item v-if="!formDataRead.brigade" label="小队" :required="!readonly" prop="brigade" borderBottom>
<u-checkbox-group
placement="row"
@change="changeBrigade"
>
<view class="box">
<view class="box_item" v-for="item in brigadeList" :key="item.id">
<u-checkbox style="checkbox" :customStyle="{marginBottom: '12px',marginRight: '12px'}" activeColor="#3175f9" :label="item.brigade_name" :name="item.id"></u-checkbox>
</view>
</view>
</u-checkbox-group>
</u-form-item>
</u--form>
<u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
@ -20,13 +36,13 @@
import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
import { Toast } from "../../libs/uniApi"
export default {
name:"districtSelector",
props:{
name: "districtSelector",
props: {
readonly: {
type: Boolean,
default: false
},
datas:{
datas: {
type: Object,
default: null
}
@ -35,78 +51,150 @@
return {
showProvince: false,
formData: {
province: '',
city: '',
area: '',
street: '',
village: '',
brigade: '',
},
formDataText: {
province: '',
city: '',
area: '',
street: '',
village: '',
brigade: '',
},
rules:{
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: {
validator: (rule, value, callback )=>{
value?callback():callback('不能为空')
validator: (rule, value, callback) => {
value ? callback() : callback('不能为空')
},
trigger: ['change', 'blur']
},
},
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) {
if (!this.$props.readonly) {
this.initProvinceAndCity();
}else{
} else {
this.rules = {};
}
},
methods:{
async validate(){
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() {
if(this.$store.state.app.userInfo.village)this.loadBrigade(this.$store.state.app.userInfo.village);
else if(this.$store.state.app.userInfo?.street)this.loadVillage(this.$store.state.app.userInfo.street);
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) {
if(this.$props.readonly)return ;
if (type&&this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
if (this.$props.readonly) return;
if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
this.changeType = type;
this.showProvince = true;
},
//
changeBrigade(e){
this.formData.brigade = e;
},
//
changeList() {
return this[this.changeType + 'List'];
},
//
confirm(e) {
let flag = false;//
if(this.formData[this.changeType] != e.value[0][this.changeType + '_code'])flag = true;
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;
return ;
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 'province':
this.formData.city = '';
this.formDataText.city = ''
case 'city':
this.formData.area = '';
this.formDataText.area = ''
if (flag) switch (this.changeType) {
case 'area':
this.formData.street = '';
this.formDataText.street = ''
@ -119,6 +207,13 @@
}
this.showProvince = false;
},
loadStreet(code) {
commonStreet({
street: code
}).then(res => {
this.streetList = res.data;
})
},
loadVillage(code) {
commonVillage({
village: code
@ -138,20 +233,30 @@
</script>
<style lang="scss">
.component{
.title {
font-weight: 500;
font-size: 34rpx;
&::before {
width: 8rpx;
height: 26rpx;
border-radius: 4rpx;
background-color: #3175f9;
content: "";
display: inline-block;
margin-right: 8rpx;
.component {
.title {
font-weight: 500;
font-size: 34rpx;
&::before {
width: 8rpx;
height: 26rpx;
border-radius: 4rpx;
background-color: #3175f9;
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>

View File

@ -46,7 +46,10 @@
分管片区:
</text>
<view class="item">
<view class="location">{{ item.city_name+item.area_name+item.street_name }}</view>
<view class="location">
<text>{{ item.street_name+item.village_name }}</text>
<text v-for="brigade in item.brigade_name">{{ brigade.brigade_name }}</text>
</view>
</view>
</view>
<view class="company">
@ -337,17 +340,18 @@
text {
margin-right: 30rpx;
flex-shrink: 0;
}
.itm {
width: 320rpx;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
/* 将超出文本隐藏 */
text-overflow: ellipsis;
/* 使用省略号表示被隐藏的文本 */
color: #000;
// white-space: nowrap;
// /* */
// overflow: hidden;
// /* */
// text-overflow: ellipsis;
// /* 使 */
// color: #000;
}
}
}

View File

@ -229,7 +229,14 @@
computed:{
nowAddress(){
let address = this.$store.state.app.userInfo;
return address.province_name+address.city_name+address.area_name+address.street_name+address.village_name+address.brigade_name;
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;
address.brigade_name?str+=address.brigade_name:null;
return str;
}
},
methods: {

View File

@ -103,23 +103,23 @@
data() {
return {
formData: {
account: '', //
account: '17685151643', //
password: '123456', //
password_confirm: '', //
// channel: 6, //[1- 2- 3-H5 4-PC 5-APP 6-APP]
id_card: '',
id_card: '522636199812121212',
is_captain: '',//
sex: '',
avatar: '',
nickname: '',
avatar: 'sdgdgxgxfxxxfg',
nickname: 'dddd',
address: '测试地址',
qualification: {
id_card: "",
id_card_b: "",
car_card: "",
car_card_b: "",
bank_account: "",
bank_account_b: ""
id_card: "sdgsdgds",
id_card_b: "sdgdsgdsg",
car_card: "sdgsd",
car_card_b: "gsdgds",
bank_account: "sdgdsgsd",
bank_account_b: "sdgsdgdg"
},
},
rules: {
@ -228,7 +228,7 @@
title: "添加成功",
success: () => {
setTimeout(() => {
uni.navigateBack()
// uni.navigateBack()
}, 1000)
}
})