mkm/OfficeApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增地区选择组件

Browse Source
This commit is contained in:
weipengfei 2023-07-28 16:02:37 +08:00
parent 1833482d80
commit 631fbdd246
4 changed files with 289 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
components/districtSelector/districtSelector.vue Normal file
View File

@ -0,0 +1,241 @@
<template>
<view>
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
<u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
<u--input :value="formDataText.city" disabled disabledColor="#fff" placeholder="请选择市"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
<u--input :value="formDataText.area" disabled disabledColor="#fff" placeholder="请选择区县"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="乡镇" required 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 label="村社" required prop="village" @click="changeCity('village')" borderBottom>
<u--input :value="formDataText.village" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="小队" required 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>
</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 { Toast } from "../../libs/uniApi"
export default {
name:"districtSelector",
data() {
return {
showProvince: false,
formData: {
province: '',
city: '',
area: '',
street: '',
village: '',
brigade: '',
},
formDataText: {
province: '',
city: '',
area: '',
street: '',
village: '',
brigade: '',
},
rules:{
province: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
city: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
area: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
street: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
village: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
brigade: {
type: 'any',
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
},
provinceList: [],
cityList: [],
areaList: [],
streetList: [],
villageList: [],
brigadeList: [],
changeType: '', //当前选择的城市类型
};
},
mounted() {
this.initProvinceAndCity();
},
methods:{
validate(){
return new Promise((resolve, reject)=>{
this.$refs.uForm.validate().then(res=>{
if(res)resolve(true);
else reject(false);
})
})
},
// 初始化
async initProvinceAndCity() {
let res = await commonProvince();
this.provinceList = res.data;
this.provinceList.forEach(item => {
if (item.province_name.indexOf('四川') !== -1) {
this.formData.province = item.province_code;
this.formDataText.province = item.province_name;
commonCity({
city: item.province_code
}).then(cityRes => {
this.cityList = cityRes.data;
this.cityList.forEach(item => {
if (item.city_name.indexOf('泸州') !== -1) {
this.formData.city = item.city_code;
this.formDataText.city = item.city_name;
commonArea({
area: item.city_code
}).then(areaRes => {
this.areaList = areaRes.data;
})
}
})
})
}
})
},
// 选择城市
changeCity(type) {
if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
this.changeType = type;
this.showProvince = true;
},
// 选择列表
changeList() {
return this[this.changeType + 'List'];
},
// 选中城市
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;
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 'province':
this.loadCity(this.formData['province']);
break;
case 'city':
this.loadArea(this.formData['city']);
break;
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 = ''
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;
},
loadCity(code) {
commonCity({
city: code
}).then(res => {
this.cityList = res.data;
})
},
loadArea(code) {
commonArea({
area: code
}).then(res => {
this.areaList = res.data;
})
},
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 => {
this.brigadeList = res.data;
})
},
}
}
</script>
<style>
</style>

18
pages.json
View File

@ -301,6 +301,24 @@
"navigationBarTextStyle": "white"
}
}, {
"path": "archives/archives",
"style": {
"navigationBarTitleText": "档案管理",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#3175f9",
"navigationBarTextStyle": "white"
}
}, {
"path": "newArchives/newArchives",
"style": {
"navigationBarTitleText": "新增档案",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#3175f9",
"navigationBarTextStyle": "white"
}
}]
}],
"globalStyle": {

16
static/server/server.js
View File

@ -217,21 +217,21 @@ export const oaHomeData = [
url: '/subpkg/companyAdmin/companyAdmin'
},
{
text: '片区经理',
icon: prefix + 'oa/yzsq@2x.png',
url: '/pages/oaManager/oaManager'
text: '档案管理',
icon: prefix + 'oa/bxsq@2x.png',
url: '/subpkg/archives/archives'
},
// {
// text: '片区经理',
// icon: prefix + 'oa/yzsq@2x.png',
// url: '/pages/oaManager/oaManager'
// },
{
text: '财务管理',
icon: prefix + 'oa/gengduo@2x.png',
url: '/subpkg/finance/finance'
},
// {
// text: 'gong',
// icon: prefix + 'oa/qjsq@2x.png',
// url: '/pages/views/leave_request'
// },
// {
// text: '出差申请',
// icon: prefix + 'oa/ccsq@2x.png'
// },

245
subpkg/newPersonnel/newPersonnel.vue
View File

@ -33,30 +33,7 @@
<u--input v-model="formData.password_confirm" placeholder="不输入密码则默认为手机号" password></u--input>
</u-form-item> -->
<view class="title">地区信息</view>
<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
<u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
<u--input :value="formDataText.city" disabled disabledColor="#fff" placeholder="请选择市"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
<u--input :value="formDataText.area" disabled disabledColor="#fff" placeholder="请选择区县"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="乡镇" required 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 label="村社" required prop="village" @click="changeCity('village')" borderBottom>
<u--input :value="formDataText.village" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="小队" required 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>
<districtSelector ref="districtSelectorRef"></districtSelector>
<view class="title">资质信息</view>
<u-form-item label="身份证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card"
borderBottom>
@ -101,8 +78,6 @@
</u-upload>
</u-form-item>
</u--form>
<u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
@cancel="showProvince = false" @close="showProvince = false"></u-picker>
<button @click="addAcountNum" type="primary" class="btn">创建</button>
</view>
</view>
@ -110,13 +85,12 @@
<script>
import { upLoadImage } from "@/api/file.js"
import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
import { loginAdd } from "@/api/oaUser.js"
import { Toast } from "../../libs/uniApi"
import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
export default {
components: { districtSelector },
data() {
return {
showProvince: false,
formData: {
account: '', //账号
password: '123456', //密码
@ -126,12 +100,6 @@
sex: '',
avatar: '',
nickname: '',
province: '',
city: '',
area: '',
street: '',
village: '',
brigade: '',
address: '测试地址',
qualification: {
id_card: "",
@ -142,14 +110,6 @@
bank_account_b: ""
},
},
formDataText: {
province: '',
city: '',
area: '',
street: '',
village: '',
brigade: '',
},
rules: {
account: {
required: true,
@ -182,37 +142,6 @@
message: '姓名不能为空',
trigger: ['change', 'blur']
},
province: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
city: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
area: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
street: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
village: {
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
brigade: {
type: 'any',
required: true,
message: '不能为空',
trigger: ['change', 'blur']
},
'qualification.id_card': {
type: 'string',
required: true,
@ -250,146 +179,15 @@
trigger: ['change', 'blur']
},
},
provinceList: [],
cityList: [],
areaList: [],
streetList: [],
villageList: [],
brigadeList: [],
changeType: '', //当前选择的城市类型
}
},
onLoad() {
this.initProvinceAndCity()
},
onLoad() {},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
onShow() {},
methods: {
async initProvinceAndCity() {
let res = await commonProvince();
this.provinceList = res.data;
this.provinceList.forEach(item => {
if (item.province_name.indexOf('四川') !== -1) {
this.formData.province = item.province_code;
this.formDataText.province = item.province_name;
commonCity({
city: item.province_code
}).then(cityRes => {
this.cityList = cityRes.data;
this.cityList.forEach(item => {
if (item.city_name.indexOf('泸州') !== -1) {
this.formData.city = item.city_code;
this.formDataText.city = item.city_name;
commonArea({
area: item.city_code
}).then(areaRes => {
this.areaList = areaRes.data;
})
}
})
})
}
})
},
// 选择城市
changeCity(type) {
if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
this.changeType = type;
this.showProvince = true;
},
// 选择列表
changeList() {
return this[this.changeType + 'List'];
},
// 选中城市
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;
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 'province':
this.loadCity(this.formData['province']);
break;
case 'city':
this.loadArea(this.formData['city']);
break;
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 = ''
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;
},
loadCity(code) {
commonCity({
city: code
}).then(res => {
this.cityList = res.data;
})
},
loadArea(code) {
commonArea({
area: code
}).then(res => {
this.areaList = res.data;
})
},
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 => {
this.brigadeList = res.data;
})
},
// 上传头像
async afterReadAvatar(event) {
upLoadImage({
@ -414,23 +212,24 @@
},
// 创建账号
addAcountNum() {
this.$refs.uForm.validate().then(async (e) => {
if(e){
uni.showLoading()
let res = await loginAdd(this.formData);
uni.hideLoading()
uni.showToast({
icon:"none",
title:"添加成功",
success: () => {
setTimeout(()=>{
uni.navigateBack()
},1000)
}
})
}
this.$refs.uForm.validate().then((e) => {
if (e) this.$refs.districtSelectorRef.validate().then(async (e) => {
if (e) {
uni.showLoading()
let res = await loginAdd({...this.formData, ...this.$refs.districtSelectorRef.formData});
uni.hideLoading()
uni.showToast({
icon: "none",
title: "添加成功",
success: () => {
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
}
})
})
},
// // 获取机型,[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
// initTerminal() {
@ -490,7 +289,7 @@
}
}
.btn{
.btn {
margin-top: 32rpx;
// margin-bottom: 40rpx;
width: 100%;