OfficeApp/subpkg/updateArchives/updateArchives.vue
2023-08-05 15:16:05 +08:00

297 lines
11 KiB
Vue

<template>
<view class="">
<view class="card">
<u--form labelPosition="left" :model="formData" ref="archives">
<!-- <view class="item" style="margin-top: 30rpx;">
<view class="title">基本信息</view>
<u-form-item labelWidth="auto" label="户主姓名" required prop="name" borderBottom>
<u--input readonly v-model="formData.name" placeholder="请输入姓名"></u--input>
</u-form-item>
<u-form-item label="性别" required prop="sex" borderBottom>
<u-radio-group v-model="formData.sex" disabled 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 readonly v-model="formData.age" placeholder="请输入年龄"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
<u--input readonly v-model="formData.id_card" placeholder="请输入身份证号" type="idcard"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="联系方式" required prop="phone" borderBottom>
<u--input readonly v-model="formData.phone" placeholder="请输入手机号" type="number"></u--input>
</u-form-item>
</view> -->
<u-empty v-if="showDemandList.length==0" text="暂无更新内容,点击下方按钮添加" icon="/static/img/empty/list.png"></u-empty>
<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(index)">删除以上信息</button>
</block>
<button class="plus demand" style="margin-bottom: 150rpx;" @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> -->
<mybtn text="完成更新" @click="addArchives"></mybtn>
</view>
</view>
</template>
<script>
import { Toast } from "../../libs/uniApi"
import { informationDetails, informationOpportunityUpdate } from "@/api/information.js"
import { debounce, 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: [], //更多需求展示列表
updateFlag: true,
formData: {
id_card: '',
sex: '',
name: '',
phone: '', //电话
highway: '', //汽车是否能到家
smart_phone: '', //是否使用智能手机
wechat: '', //微信号
address: '', //家庭地址
age: '', //年龄
category_id: '1',
category_child: '2',
data_type: '1',
},
}
},
onLoad(options) {
this.initInformationDetails({ id: options.id })
this.initCategoryBusinessList();
},
onShow() {},
methods: {
async initInformationDetails(id) {
let res = await informationDetails(id);
this.formData = res.data;
},
// 更新档案
addArchives: throttle(async function() {
if(this.showDemandList.length==0)return Toast('请先添加需求!');
let refsDatas = await this.loadRefsDatas();
if (!this.updateFlag) return;
uni.showLoading({
title: '正在更新...'
});
let res = await informationOpportunityUpdate({
id: this.formData.id,
datas: [...refsDatas]
});
uni.hideLoading();
uni.showToast({
icon: 'none',
title: '更新成功',
success() {
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
}, 1000),
// 获取组件数据
async loadRefsDatas() {
this.updateFlag = true;
let datas = [];
let map = new Map(); // 使用map存储当前ref是第几位
for (let demand of this.showDemandList) {
if (map.get(demand.id) >= 0) map.set(demand.id, map.get(demand.id) + 1);
else map.set(demand.id, 0);
let now = map.get(demand.id);
try {
let res = await this.$refs['demandRef' + demand.id][now].validate();
if (!!res) datas.push({
card_id: demand.id,
datas: { ...this.$refs['demandRef' + demand.id][now]['formData'] }
})
} catch (e) {
console.log('err', e);
this.updateFlag = false;
Toast('请完整填写以上数据!')
}
}
return datas;
},
// 初始化商机分类
async initCategoryBusinessList() {
let res = await categoryBusinessList();
// this.demandList = res.data;
this.demandList = res.data.filter(item => item.id == 6);
this.demandList[0].children = this.demandList[0].children.filter(item => item.id == 7 || item.id == 8 || item
.id == 32);
this.demandListChild = this.demandList[0].children;
// console.log(this.demandList);
},
// 选择更多需求
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: #3175f9;
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 auto;
// margin-bottom: 40rpx;
width: 694rpx;
height: 64rpx;
line-height: 64rpx;
background: #f56c6c;
border-radius: 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
}
.plus {
margin: 22rpx auto;
// margin-bottom: 40rpx;
width: 694rpx;
height: 64rpx;
line-height: 64rpx;
background: $theme-oa-color;
border-radius: 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
}
.demand {
margin-top: 40rpx;
margin-bottom: 50rpx;
}
</style>