hls_crm/pagesB/contract/addContractPayment.vue

526 lines
12 KiB
Vue

<template>
<view class="new_fllow">
<view class="fllow_form">
<view><text>*</text>合同编号</view>
<picker :range="contractList" :value="contractIndex" @change="changeContractnum" :range-key="'num'">
<view class="form_right">
<view :class="contractNum ? 'valueActive' : '' ">{{contractNum ? contractNum : '点击选择'}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</picker>
</view>
<view class="fllow_form">
<view><text>*</text>回款编号</view>
<view class="form_input" >
<input type="text" :class="number ? 'valueActive' : '' " v-model="number" placeholder="请输入回款编号" placeholder-style="font-size:30rpx;color: #999;" >
</view>
</view>
<view class="fllow_form">
<view><text>*</text>客户名称</view>
<view class="form_right">
<view :class="customerObj ? 'valueActive' : '' ">{{customerObj?customerObj.name:''}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</view>
<view class="fllow_form">
<view style="padding-left: 23rpx;">回款期数</view>
<picker :range="numList" :value="numIndex" @change="changeNum" :range-key="'num'">
<view class="form_right">
<view :class="plannum ? 'valueActive' : '' ">{{plannum ? plannum : '点击选择'}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</picker>
</view>
<view class="fllow_form">
<view ><text>*</text>回款日期</view>
<picker mode="date" @change="changeTime">
<view class="form_right">
<view :class="return_time ? 'valueActive' : '' ">{{return_time ? return_time : '点击选择'}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</picker>
</view>
<view class="fllow_form">
<view><text>*</text>回款金额</view>
<view class="form_input" >
<input type="text" :class="money ? 'valueActive' : '' " v-model="money" placeholder="请输入计划回款金额" placeholder-style="font-size:30rpx;color: #999;">
</view>
</view>
<view class="fllow_form">
<view><text>*</text>计划回款方式</view>
<picker :value="typeIndex" @change="changeType" :range="type">
<view class="form_right">
<view :class="return_type ? 'valueActive' : '' ">{{return_type ? return_type : '点击选择'}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</picker>
</view>
<!-- 附加信息 -->
<view class="info_head">附加信息</view>
<form-item v-for="(item,index) in otherForm" :key="index" :objInfo="item" @changeData="changeOtherData"></form-item>
<!-- 审核信息 -->
<view class="affiliation">
<view class="aff_head"><text style="color: #f00;">*</text>回款审批流程</view>
<view class="aff_con">
<view class="aff_item affbox" v-for="(item,index) in remindPeople" :key="index">
<image :src="BASE_IMG_URL+'close.png'" class="delremind" v-if="item.isDel" @click="delRemind(index)" mode="scaleToFill"></image>
<image class="peopleimg" :src="item.img ? item.img :BASE_IMG_URL+'headImg.png'" mode="scaleToFill"></image>
<view>{{item.name}}</view>
</view>
<view class="aff_last" @click="moreClick">
<image :src="BASE_IMG_URL+'morebtn.png'" mode="scaleToFill"></image>
</view>
</view>
</view>
<view id="btn" class="btn_g bg-blue button-hover round" @click="saveFollow">
保存
</view>
</view>
</template>
<script>
import {
netContractList,
netSelect,
netContractDetail,
netPaymentNum,
netKehuDetail,
netPaymentNumber,
netAddPayment } from '@/api/kehu.js'
import {
netSetForm,
netStaffDefaultReviewer } from '@/api/index.js'
import formItem from '@/components/form/formitem.vue'
import { BASE_IMG_URL } from '@/util/api.js'
export default {
components:{
formItem
},
data() {
return {
type:[], //回款方式
typeIndex:null,
numList:[], //回款 期数
numIndex:null,
info:null, //合同信息
customerObj:null, //客户信息
BASE_IMG_URL:BASE_IMG_URL,
contractList:[], //合同列表
contractIndex:null,
contractNum:'', //合同编号
id:'', //合同id
kehuid:'', //客户id
plannum:'',
plan_id:'', //回款 期数id
number:'', //回款 编号
money:'', //回款 金额
return_time:'', // 回款 日期
return_type:'', //回款 方式
remarks:'', //备注
flow_staff_id:'', //流程 审批人id
remindPeople:[], //提醒谁看
DefaultRemind:[],
otherForm:[]
}
},
onLoad(options) {
this.kehuid = options.kehuid
this.getNumber()
//获取客户信息
this.getKehuInfo()
//获取 form
this.otherForm = []
this.getForm()
//获取 客户 合同 列表
this.getInfo()
//获取 回款方式
this.getType()
},
onShow() {
// this.remindPeople = uni.getStorageSync('remindlist')
//获取 默认需要提醒的人
this.getDefaultRemind()
},
//监听 页面 卸载
onUnload() {
uni.removeStorageSync('remindlist')
},
methods: {
//获取 客户 信息
getKehuInfo() {
netKehuDetail({id:this.kehuid}).then(res=>{
this.customerObj = res.data
})
},
//获取 需要默认提醒的人
getDefaultRemind() {
netStaffDefaultReviewer({type:'contract'}).then(res=>{
res = res.data
res.forEach((ele,index) => {
ele.isDel = false
})
this.DefaultRemind = res
this.remindPeople = this.$deWeight([...res,...uni.getStorageSync('remindlist')])
})
},
getForm() {
netSetForm({type:'examine'}).then(res=>{
res = res.data.data
res.forEach(ele=>{
ele.value = ele.value?ele.value:''
if(ele.id.indexOf('other') != -1) {
this.otherForm.push(ele)
}
})
})
},
changeOtherData(name,value,obj) {
let arr = this.otherForm
arr.forEach((ele,index) => {
if(ele.id == obj.id){
ele.value = value
this.$set(this.otherForm,index,ele)
}
})
},
getType() {
netSelect().then(res=>{
this.type = res.data['回款方式']
})
},
//删除 提醒人
delRemind(index) {
this.remindPeople.splice(index, 1)
uni.setStorageSync('remindlist', this.remindPeople)
},
//获取合同 列表
getInfo() {
netContractList({customer_id:this.kehuid}).then(res=>{
this.contractList = res.data
})
},
// 改变 合同、
changeContractnum(e) {
this.contractNum = this.contractList[e.detail.value].num
this.id = this.contractList[e.detail.value].id
//根据合同id 查询 客户名称
this.getContractinfo()
//获取 回款 期数
this.getNum()
},
getContractinfo() {
netContractDetail({id:this.id}).then(res=>{
this.info = res.data
})
},
//获取 回款 期数
getNum() {
netPaymentNum({contract_id:this.id}).then(res=>{
this.numList = res.data
})
},
//改变 回款 期数
changeNum(e) {
this.plan_id = this.numList[e.detail.value].id
this.plannum = this.numList[e.detail.value].num
},
//改变 回款 方式
changeType(e) {
this.return_type = this.type[e.detail.value]
},
//计划 回款 日期
changeTime(e) {
this.return_time = e.detail.value
},
//获取 回款 编号
getNumber() {
netPaymentNumber().then(res=>{
this.number = res.data.number
})
},
//更多
moreClick() {
uni.navigateTo({
url: '/pagesA/crm/selectMember/selectMember'
})
},
saveFollow() {
let {
number, //回款 编号
money, // 回款 金额
return_time, // 回款 日期
return_type, // 回款 方式
remarks, //备注
info,
plan_id, //回款 期数id
remindPeople
} = this
if(!this.contractNum){
uni.showToast({
title:'请选择合同编号',
icon:'none'
})
return
}
if(!number) {
uni.showToast({
title:'请输入回款编号',
icon:'none'
})
return
}
if(!money) {
uni.showToast({
title:'请输入回款金额',
icon:'none'
})
return
}
if(!return_time) {
uni.showToast({
title:'请选择回款日期',
icon:'none'
})
return
}
if(!return_type) {
uni.showToast({
title:'请选择回款方式',
icon:'none'
})
return
}
if(!remindPeople || remindPeople.length == 0) {
uni.showToast({
title:'请选择回款审批人',
icon:'none'
})
return
}
let arr = []
remindPeople.forEach(ele=>{
arr.push(ele.id)
})
let flow_staff_id = arr.join(',')
let params = {
customer_id: info.customer.id,
contract_id: info.id,
number, //回款 编号
money, // 回款 金额
return_time, // 回款 日期
return_type, // 回款 方式
plan_id, //回款 期数id
remarks,
flow_staff_ids:flow_staff_id
}
let arrlist = []
this.otherForm.forEach(ele=>{
arrlist.push({
name:ele.id,
required: ele.config.required,
msg: ele.config.placeholder,
value:ele.value
})
})
for(let i = 0; i < arrlist.length ; i++) {
if(arrlist[i].required && !arrlist[i].value){
uni.showToast({
title: arrlist[i].msg,
icon:'none'
})
return
}
params[arrlist[i].name] = arrlist[i].value
}
netAddPayment(params).then(res=>{
uni.showToast({
title: res.msg,
icon:'none'
})
setTimeout(()=>{
uni.navigateBack({
delta:1
})
},2000)
})
}
}
}
</script>
<style lang="scss">
.valueActive{
color:#333;
}
.new_fllow {
margin-top: 40rpx;
font-size: 28rpx;
.fllow_form {
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
line-height: 100rpx;
background-color: #fff;
border-bottom: 1rpx solid #EAEAEA;
// padding: 0 24rpx;
padding-left: 47rpx;
color: #999;
font-size: 32rpx;
.form_right {
display: flex;
color: #999;
padding-right: 40rpx;
image {
width: 40rpx;
height: 40rpx;
margin: 28rpx 5rpx 0 0;
}
}
text {
color: #f00;
margin-left: 10rpx;
}
.form_input {
input {
text-align: right;
margin-right: 40rpx;
}
}
.fllow_button {
margin-top: 15rpx;
}
}
.imglist{
padding:24rpx 34rpx;
background:#fff;
border-bottom:1rpx solid #EAEAEA;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
.imgbox{
width:160rpx;
height:160rpx;
margin-right:14rpx;
position: relative;
margin-bottom:24rpx;
border:1rpx solid #EAEAEA;
.delimg{
width:32rpx;
height:32rpx;
border-radius:50%;
position: absolute;
right:-16rpx;
top:-16rpx;
background:rgba(0,0,0,0.5);
z-index: 2;
}
.selfimg{
width:160rpx;
height:160rpx;
}
}
}
.fllow_area {
background-color: #fff;
padding: 0 30rpx;
margin-bottom: 30rpx;
.area_head {
height: 100rpx;
line-height: 100rpx;
text {
color: #f00;
}
}
textarea {
width: 100%;
height: 300rpx;
background: #f8f8f8;
}
}
.info_head{
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
color: #999;
padding-left: 70rpx;
}
.affiliation {
background-color: #fff;
margin-bottom: 20rpx;
padding-bottom: 40rpx;
.aff_head {
height: 100rpx;
line-height: 100rpx;
padding-left: 47rpx;
font-size: 32rpx;
color: #999;
}
.aff_con {
display: flex;
text-align: center;
padding:0 40rpx;
flex-wrap: wrap;
.aff_item {
width: 100rpx;
margin-bottom:15rpx;
margin-right:15rpx;
image {
margin-bottom: 15rpx;
width: 50rpx;
height: 50rpx;
}
.peopleimg{
border-radius: 50%;
}
}
.affbox {
position: relative;
.delremind {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
position: absolute;
right: -16rpx;
top: -16rpx;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
}
}
.aff_last {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
image {
width: 48rpx;
height: 48rpx;
}
}
}
}
.follow_task {
height: 80rpx;
line-height: 80rpx;
}
#btn {
font-size: 26rpx;
color: #fff;
text-align: center;
line-height: 88rpx;
width: 500rpx;
height: 88rpx;
background: $uni-text-color;
border-radius: 29rpx;
margin: 30rpx auto;
}
}
</style>