469 lines
17 KiB
Vue
469 lines
17 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="card" style="padding-bottom: 150rpx;">
|
|
<u--form labelPosition="left" :model="formData" :rules="rules" ref="archives">
|
|
<view class="item">
|
|
<view class="title">基本信息</view>
|
|
<u-form-item labelWidth="auto" label="姓名" required prop="name" borderBottom>
|
|
<u--input v-model="formData.name" placeholder="请输入姓名(6字以内)" maxlength="6"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="性别" required prop="sex" borderBottom>
|
|
<u-radio-group v-model="formData.sex" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'男'},{value:2,label:'女'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item label="年龄" required prop="age" borderBottom>
|
|
<u--input v-model="formData.age" type="number" placeholder="请输入年龄" maxlength="3"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
|
|
<u--input v-model="formData.id_card" placeholder="请输入身份证号" @input="c_idcard" type="idcard" maxlength="18"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="联系方式" required prop="phone" borderBottom>
|
|
<u--input v-model="formData.phone" placeholder="请输入手机号" type="number"></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">地区信息</view>
|
|
<!-- <districtSelector ref="districtSelectorRef"></districtSelector> -->
|
|
<u-form-item labelWidth="auto" label="地址" borderBottom>
|
|
<u--textarea :value="nowAddress" autoHeight readonly></u--textarea>
|
|
</u-form-item>
|
|
<!-- <u-form-item labelWidth="auto" label="小队" required prop="brigade" borderBottom>
|
|
<u-radio-group v-model="formData.brigade" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(brigade_name, index) in brigadeList" :key="index" :label="brigade_name.brigade_name"
|
|
:name="brigade_name.id" :checked="brigadeList.length==1">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item> -->
|
|
<u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom>
|
|
<u--input v-model="formData.address" placeholder="请输入详细地址"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="汽车是否能到家" required prop="highway" borderBottom>
|
|
<u-radio-group v-model="formData.highway" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<block value="智能手机">
|
|
<u-form-item labelWidth="auto" label="是否使用智能手机" required prop="smart_phone" borderBottom>
|
|
<u-radio-group v-model="formData.smart_phone" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<block v-if="formData.smart_phone>0">
|
|
<u-form-item labelWidth="auto" label="微信号" required borderBottom>
|
|
<u--input v-model="formData.wechat" placeholder="请输入微信号"></u--input>
|
|
</u-form-item>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
<residents ref="residentsRef"></residents>
|
|
<!-- <breeding ref="breedingRef"></breeding>
|
|
<plant ref="plantRef"></plant> -->
|
|
|
|
<!-- 更多内容 -->
|
|
<!-- <block v-for="(item, index) in showDemandList" :key="'demand'+index">
|
|
<block>
|
|
<breeding v-if="item.id==32" ref="demandRef32"></breeding>
|
|
<plant v-if="item.id==7" ref="demandRef7"></plant>
|
|
<store v-if="item.id==8" ref="demandRef8"></store>
|
|
<deepProcessing v-if="item.id==9" ref="demandRef9"></deepProcessing>
|
|
<thickProcessing v-if="item.id==10" ref="demandRef10"></thickProcessing>
|
|
</block>
|
|
<block>
|
|
<houseRepair v-if="item.id==12" ref="demandRef12"></houseRepair>
|
|
<houseDecoration v-if="item.id==13" ref="demandRef13"></houseDecoration>
|
|
<houseRenovate v-if="item.id==14" ref="demandRef14"></houseRenovate>
|
|
<houseTransaction v-if="item.id==15" ref="demandRef15"></houseTransaction>
|
|
</block>
|
|
<block>
|
|
<banquetMarry v-if="item.id==17" ref="demandRef17"></banquetMarry>
|
|
<banquetBirthday v-if="item.id==18" ref="demandRef18"></banquetBirthday>
|
|
<banquetFullMoon v-if="item.id==19" ref="demandRef19"></banquetFullMoon>
|
|
<banquetOther v-if="item.id==20" ref="demandRef20"></banquetOther>
|
|
<banquetFuneral v-if="item.id==21" ref="demandRef21"></banquetFuneral>
|
|
</block>
|
|
<button class="delete" @click="removeShowDemand">-</button>
|
|
</block>
|
|
<button class="plus demand" @click="demandShow=true">点击添加更多需求</button>
|
|
<u-picker :show="demandShow" ref="demandRef" :loading="demandLoading" :columns="[demandList, demandListChild]" keyName="name"
|
|
@change="changeHandler" @cancel="demandShow = false" @confirm="changeDemand"></u-picker> -->
|
|
|
|
</u--form>
|
|
<!-- <button @click="addArchives" class="btn">完成登记</button> -->
|
|
</view>
|
|
<mybtn text="完成登记" @click="addArchives"></mybtn>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { Toast } from "../../libs/uniApi"
|
|
import { informationAdd } from "@/api/information.js"
|
|
import { debounce, forEach, throttle } from "lodash"
|
|
import { categoryBusinessList } from "@/api/oaPbulic.js"
|
|
import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
|
|
import residents from "@/components/newArchives/residents.vue" // 常住人口
|
|
import breeding from "@/components/newArchives/breeding.vue" // 养殖
|
|
import plant from "@/components/newArchives/plant.vue" // 种殖
|
|
import store from "@/components/newArchives/store.vue" // 开设店铺
|
|
import deepProcessing from "@/components/newArchives/deepProcessing.vue" // 深加工
|
|
import thickProcessing from "@/components/newArchives/thickProcessing.vue" // 粗加工
|
|
import houseRepair from "@/components/newArchives/houseRepair.vue" // 修房
|
|
import houseDecoration from "@/components/newArchives/houseDecoration.vue" // 装房
|
|
import houseRenovate from "@/components/newArchives/houseRenovate.vue" // 翻新
|
|
import houseTransaction from "@/components/newArchives/houseTransaction.vue" // 买卖房子
|
|
import banquetMarry from "@/components/newArchives/banquetMarry.vue" // 婚宴
|
|
import banquetBirthday from "@/components/newArchives/banquetBirthday.vue" // 寿宴
|
|
import banquetFullMoon from "@/components/newArchives/banquetFullMoon.vue" // 满月酒
|
|
import banquetOther from "@/components/newArchives/banquetOther.vue" // 其他庆祝宴
|
|
import banquetFuneral from "@/components/newArchives/banquetFuneral.vue" // 白事
|
|
export default {
|
|
components: {
|
|
districtSelector,
|
|
residents,
|
|
breeding,
|
|
plant,
|
|
store,
|
|
deepProcessing,
|
|
thickProcessing,
|
|
houseRepair,
|
|
houseDecoration,
|
|
houseRenovate,
|
|
houseTransaction,
|
|
banquetMarry,
|
|
banquetBirthday,
|
|
banquetFullMoon,
|
|
banquetOther,
|
|
banquetFuneral
|
|
},
|
|
data() {
|
|
return {
|
|
demandShow: false,
|
|
demandLoading: false,
|
|
demandList: [], //更多需求
|
|
demandListChild: [], //更多二级需求
|
|
showDemandList: [], //更多需求展示列表
|
|
brigadeList: [],
|
|
formData: {
|
|
id_card: '',
|
|
sex: '',
|
|
name: '',
|
|
phone: '', //电话
|
|
highway: '', //汽车是否能到家
|
|
smart_phone: '', //是否使用智能手机
|
|
wechat: '', //微信号
|
|
brigade: '', //小队
|
|
address: '', //家庭地址
|
|
age: '', //年龄
|
|
category_id: '1',
|
|
category_child: '2',
|
|
data_type: '1',
|
|
// id_card: '324234234353454343',
|
|
// sex: 2,
|
|
// name: '测试的',
|
|
// phone: 14332323444, //电话
|
|
// highway: 1, //汽车是否能到家
|
|
// smart_phone: 1, //是否使用智能手机
|
|
// wechat: 21313132, //微信号
|
|
// address: '张家村', //家庭地址
|
|
// age: 33, //年龄
|
|
// category_id: '1',
|
|
// category_child: '2',
|
|
// data_type: '1',
|
|
},
|
|
rules: {
|
|
phone: {
|
|
required: true,
|
|
pattern: /^(1[3456789]\d{9})$/,
|
|
message: '请输入正确的手机号码',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
id_card: {
|
|
required: true,
|
|
pattern: /^\d{17}[\dX]$/,
|
|
message: '请输入正确的身份证号',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
sex: {
|
|
validator: (rule, value, callback) => {
|
|
typeof value === 'number' ? callback() : callback('请选择男或女')
|
|
},
|
|
trigger: ['change', 'blur']
|
|
},
|
|
age: {
|
|
required: true,
|
|
// message: '请输入年龄',
|
|
validator: (rule, value, callback) => {
|
|
value > 0 && value < 200 ? callback() : callback('请输入正确年龄')
|
|
},
|
|
trigger: ['blur', 'change']
|
|
},
|
|
name: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '姓名不能为空',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
brigade: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '小队不能为空',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
address: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '地址不能为空',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
highway: {
|
|
validator: (rule, value, callback) => {
|
|
typeof value === 'number' ? callback() : callback('不能为空')
|
|
},
|
|
trigger: ['change', 'blur']
|
|
},
|
|
smart_phone: {
|
|
validator: (rule, value, callback) => {
|
|
typeof value === 'number' ? callback() : callback('不能为空')
|
|
},
|
|
trigger: ['change', 'blur']
|
|
},
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initCategoryBusinessList();
|
|
this.initBrigadeList()
|
|
},
|
|
onShow() {},
|
|
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;
|
|
address.brigade_name ? str += address.brigade_name : null;
|
|
return str;
|
|
}
|
|
},
|
|
methods: {
|
|
c_idcard(e){
|
|
this.$nextTick(()=>{
|
|
this.formData.id_card = e.replace(/[^0-9X]/g, '')
|
|
})
|
|
},
|
|
// 新增档案
|
|
async addArchives() {
|
|
try {
|
|
// Toast('开发中')
|
|
// let refsDatas = this.loadRefsDatas();
|
|
// let flag1 = await this.$refs.districtSelectorRef.validate();
|
|
await this.$refs.residentsRef.validate();
|
|
// let flag3 = await this.$refs.breedingRef.validate();
|
|
// let flag4 = await this.$refs.plantRef.validate();
|
|
// return console.log(flag1);
|
|
await this.$refs.archives.validate();
|
|
uni.showLoading({
|
|
title: '登记中',
|
|
mask: true
|
|
})
|
|
// let districtForm = {
|
|
// area_id: this.$refs.districtSelectorRef.formData.area,
|
|
// street_id: this.$refs.districtSelectorRef.formData.street,
|
|
// village_id: this.$refs.districtSelectorRef.formData.village,
|
|
// brigade_id: this.$refs.districtSelectorRef.formData.brigade,
|
|
// }
|
|
let res = await informationAdd({
|
|
...this.formData,
|
|
// ...districtForm,
|
|
...this.$refs.residentsRef.residents,
|
|
// datas: [{
|
|
// card_id: 32,
|
|
// datas: {
|
|
// ...this.$refs.breedingRef.formData
|
|
// }
|
|
// },
|
|
// {
|
|
// card_id: 7,
|
|
// datas: {
|
|
// ...this.$refs.plantRef.formData
|
|
// }
|
|
// },
|
|
// ...refsDatas
|
|
// ]
|
|
});
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "添加成功",
|
|
success: () => {
|
|
setTimeout(() => {
|
|
uni.$emit('loadArchives');
|
|
uni.navigateBack();
|
|
}, 1000)
|
|
}
|
|
})
|
|
} catch (e) {
|
|
console.log(e);
|
|
Toast('请填写完整信息')
|
|
}
|
|
|
|
},
|
|
// 获取组件数据
|
|
loadRefsDatas() {
|
|
let datas = [];
|
|
this.showDemandList.forEach(item => {
|
|
// console.log(this.$refs['demandRef'+item.category_id+''+item.category_child][0]);
|
|
this.$refs['demandRef' + item.id][0].validate();
|
|
datas.push({
|
|
card_id: item.id,
|
|
datas: { ...this.$refs['demandRef' + item.id][0]['formData'] }
|
|
})
|
|
})
|
|
// console.log(datas);
|
|
return datas;
|
|
},
|
|
// 初始化商机分类
|
|
async initCategoryBusinessList() {
|
|
try {
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask: true
|
|
})
|
|
let res = await categoryBusinessList();
|
|
this.demandList = res.data;
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
initBrigadeList() {
|
|
try {
|
|
let arr = this.$store.state.app.userInfo.brigade.split(',');
|
|
for (let i = 0; i < arr.length; i++) {
|
|
this.brigadeList.push({
|
|
id: arr[i],
|
|
brigade_name: this.$store.state.app.userInfo.brigade_name[i].brigade_name
|
|
})
|
|
}
|
|
} catch (e) {
|
|
Toast('未负责小队');
|
|
}
|
|
},
|
|
// 选择更多需求
|
|
changeHandler(e) {
|
|
if (e.columnIndex == 0) { //滑动左侧时才加载,右侧不加载
|
|
this.demandListChild = this.demandList[e.indexs[0]].children || [];
|
|
}
|
|
},
|
|
// 确认添加需求
|
|
changeDemand: throttle(function(e) {
|
|
this.demandShow = false;
|
|
if (e.value[1]) {
|
|
this.showDemandList.push(e.value[1]);
|
|
} else {
|
|
this.showDemandList.push(e.value[0]);
|
|
}
|
|
}, 3000),
|
|
// 删除需求
|
|
removeShowDemand(index) {
|
|
uni.showModal({
|
|
title: '确定删除这一部分内容吗',
|
|
success: (res) => {
|
|
if (res.confirm) this.showDemandList.splice(index, 1);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.card {
|
|
padding-top: 30rpx;
|
|
|
|
.item {
|
|
background-color: #fff;
|
|
margin: 28rpx;
|
|
padding: 28rpx;
|
|
border-radius: 14rpx;
|
|
|
|
&:nth-child(1) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin: 32rpx auto;
|
|
// margin-bottom: 40rpx;
|
|
width: 694rpx;
|
|
height: 84rpx;
|
|
background: $theme-oa-color;
|
|
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
|
color: #fff;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.delete {
|
|
margin: 22rpx 0;
|
|
// margin-bottom: 40rpx;
|
|
width: 100%;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: #f56c6c;
|
|
border-radius: 14rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.plus {
|
|
margin: 22rpx 0;
|
|
// margin-bottom: 40rpx;
|
|
width: 100%;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: $theme-oa-color;
|
|
border-radius: 14rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.demand {
|
|
margin-top: 40rpx;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
</style> |