686 lines
16 KiB
Vue
686 lines
16 KiB
Vue
<template>
|
||
<view class="new_linkman">
|
||
<view class="fllow_form">
|
||
<view><text>*</text>客户名称</view>
|
||
<picker @change="changeCus" disabled :value="cusIndex" :range="cuslist">
|
||
<view class="form_right">
|
||
<view :class="customerName ? 'valueActive' : '' ">{{customerName ? customerName : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="fllow_form">
|
||
<view style="margin-left:15rpx">关联商机</view>
|
||
<view class="form_right" @click="changeBusiness">
|
||
<view :class="businessObj.id ? 'valueActive' : '' ">{{businessObj.id ? businessObj.name : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</view>
|
||
<view class="fllow_form">
|
||
<view><text>*</text>客户签约人</view>
|
||
<picker @change="changeContact" mode="selector" :range="contactList" :value="contactIndex" :range-key="'name'">
|
||
<view class="form_right">
|
||
<view :class="contactname ? 'valueActive' : '' ">{{contactname ? contactname : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="fllow_form">
|
||
<view><text>*</text>公司签约人</view>
|
||
<picker @change="changeStaff" :range-key="'name'" :range="staffList" :value="staffIndex">
|
||
<view class="form_right">
|
||
<view :class="staffname ? 'valueActive' : '' ">{{staffname ? staffname : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<form-item v-for="(item,index) in listForm" :key="index" :objInfo="item" @changeData="changeOtherData"></form-item>
|
||
<!-- 添加产品 -->
|
||
<view class="fllow_form">
|
||
<view style="padding-left:15rpx;">购买产品</view>
|
||
<view class="add_in" @click="addPart">
|
||
+添加产品
|
||
</view>
|
||
</view>
|
||
<view class="pro_warp" v-if="productList.length != 0">
|
||
<view class="li_warp" v-for="(item,index) in productList" :key="index">
|
||
<view class="cell_con">
|
||
<view class="cell_con_top">
|
||
<view class="contitle">{{item.name}}</view>
|
||
<image :src="BASE_IMG_URL+'delete1.png'" @click="delProduct(index)" class="deleimg" mode=""></image>
|
||
</view>
|
||
<view class="pro_con_box">
|
||
<view class="boxleft">
|
||
<view class="context">编号：{{item.num}}</view>
|
||
<view class="context">单位：{{item.unit}}</view>
|
||
<view class="context">
|
||
零售价：￥<input type="digit" v-model="item.price" class="productPrice" @blur="changeProductPrice" placeholder="零售价">
|
||
</view>
|
||
<view class="context">
|
||
批发价：￥<input type="digit" v-model="item.wholesale" class="productPrice" placeholder="批发价">
|
||
</view>
|
||
</view>
|
||
<view class="conbot">
|
||
<view class="conright">
|
||
<uni-number-box :min="1" :max="20000" v-model="item.number" @change="(e)=>{changeNumber(e,index)}"></uni-number-box>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 固定审批 -->
|
||
<fixed-approval v-if="approvalPro.status == 1" :list="approvalPro.stepList"></fixed-approval>
|
||
<!-- 审核信息 -->
|
||
<examine-template v-if="approvalPro.status == 0" :remindPeople="remindPeople" @delExamine="delRemind"></examine-template>
|
||
<view class="btn_g bg-blue button-hover round" @click="toSave">
|
||
保存
|
||
</view>
|
||
|
||
<!-- 添加产品 -->
|
||
<popup-list ref="productChild" @selectList="selectList"></popup-list>
|
||
<!-- 添加产品配置 -->
|
||
<popup-product-config ref="productConfig" @selectList="configList"></popup-product-config>
|
||
<!-- 选择商机 -->
|
||
<select-business ref="businessChild" @sureBusiness="sureBusiness"></select-business>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { netPrevCustomer, netLianxiren, netStaffList, netContractDetail, netEditContract } from '@/api/kehu.js'
|
||
import { netSetForm, netApprovalProcess } from '@/api/index.js'
|
||
import formItem from '@/components/form/formitem.vue'
|
||
import { BASE_IMG_URL } from '@/util/api.js'
|
||
import { commonF } from '@/common/common'
|
||
import popupList from '@/components/selectProduct/index'
|
||
import popupProductConfig from '@/components/selectProductConfig/index'
|
||
import fixedApproval from '@/components/fixedApproval.vue'
|
||
import selectBusiness from '@/components/selectBusiness.vue'
|
||
|
||
export default {
|
||
mixins:[commonF],
|
||
components:{
|
||
formItem,
|
||
popupList,
|
||
popupProductConfig,
|
||
fixedApproval,
|
||
selectBusiness
|
||
},
|
||
data() {
|
||
return {
|
||
id:'', //合同id
|
||
BASE_IMG_URL:BASE_IMG_URL,
|
||
order_staff_id:'', //公司签约人
|
||
staffname:'',
|
||
staffList:[],
|
||
staffIndex:null,
|
||
|
||
customer_id:'', //客户id
|
||
contacts_id:'', //客户签约人
|
||
contactname:'',
|
||
contactList:[],
|
||
contactName:'',
|
||
contactIndex:null,
|
||
|
||
customerlist:[],
|
||
customerName:'', //客户名称
|
||
cuslist:[],
|
||
cusIndex:null,
|
||
|
||
dateTime: null,
|
||
dateTimeArray: null,
|
||
startYear: 2000,
|
||
remindPeople:[], //提醒谁看
|
||
remindType:'contract',
|
||
info:{},
|
||
listForm:[],
|
||
//产品列表
|
||
productList:[],
|
||
total_price:0,
|
||
//产品配置
|
||
configIndex:null,
|
||
approvalPro:{}, //审批流程
|
||
businessObj:{}, //关联商机
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.customer_id = options.kehuid
|
||
this.id = options.id
|
||
//获取客户 列表
|
||
this.getCustomerList()
|
||
//获取 员工列表 公司签约人
|
||
this.getStaffList()
|
||
//获取 合同详情
|
||
this.getContractDetail()
|
||
//审批流程
|
||
this.getProcess()
|
||
},
|
||
methods: {
|
||
//选择关联的商机
|
||
changeBusiness() {
|
||
if(this.customer_id){
|
||
this.$refs.businessChild.init(this.customer_id)
|
||
}else{
|
||
uni.showToast({
|
||
title:'请先选择客户',
|
||
icon:'none'
|
||
})
|
||
}
|
||
},
|
||
sureBusiness(obj) {
|
||
this.businessObj = obj
|
||
},
|
||
//审批流程
|
||
getProcess() {
|
||
netApprovalProcess({type:'contract'}).then(res=>{
|
||
this.approvalPro = res.data
|
||
})
|
||
},
|
||
//合同详情
|
||
getContractDetail() {
|
||
netContractDetail({id:this.id}).then(res=>{
|
||
res = res.data
|
||
this.info = res
|
||
if(res.contacts){
|
||
this.contacts_id = res.contacts.id
|
||
this.contactname = res.contacts.name
|
||
}
|
||
if(res.owner_staff){
|
||
this.order_staff_id = res.owner_staff.id
|
||
this.staffname = res.owner_staff.name
|
||
}
|
||
this.businessObj = res.business
|
||
this.productList = res.product
|
||
this.handleTotalMoney()
|
||
//获取 合同 form
|
||
this.getForm()
|
||
})
|
||
},
|
||
getForm() {
|
||
netSetForm({type:'contract'}).then(res=>{
|
||
res = res.data.data
|
||
res.forEach(ele=>{
|
||
ele.value = this.info[ele.id]?this.info[ele.id]:''
|
||
})
|
||
this.listForm = res
|
||
})
|
||
},
|
||
changeOtherData(name,value,obj) {
|
||
let arr = this.listForm
|
||
arr.forEach((ele,index) => {
|
||
if(ele.id == obj.id){
|
||
ele.value = value
|
||
this.$set(this.listForm,index,ele)
|
||
}
|
||
})
|
||
},
|
||
//员工列表
|
||
getStaffList() {
|
||
netStaffList().then(res=>{
|
||
this.staffList = res.data
|
||
})
|
||
},
|
||
getCustomerList () {
|
||
netPrevCustomer().then(res=>{
|
||
this.customerlist = res.data
|
||
this.handleCus(res.data)
|
||
})
|
||
},
|
||
handleCus(data) {
|
||
let arr = []
|
||
data.forEach(ele=>{
|
||
arr.push(ele.name)
|
||
})
|
||
this.cuslist = arr
|
||
this.setDefaultKehu()
|
||
},
|
||
setDefaultKehu() {
|
||
let id = this.customer_id
|
||
this.customerlist.forEach((ele,index)=>{
|
||
if(ele.id == id){
|
||
this.customerName = ele.name
|
||
this.cusIndex = index
|
||
}
|
||
})
|
||
this.getLianxiren()
|
||
},
|
||
changeCus(e) {
|
||
this.cusIndex = e.detail.value
|
||
this.customerName = this.customerlist[e.detail.value].name
|
||
this.customer_id = this.customerlist[e.detail.value].id
|
||
this.getLianxiren()
|
||
},
|
||
getLianxiren() {
|
||
let params = {
|
||
customer_id: this.customer_id
|
||
}
|
||
netLianxiren(params).then(res=>{
|
||
this.contactList = res.data
|
||
})
|
||
},
|
||
//客户签约人
|
||
changeContact(e) {
|
||
this.contactIndex = e.detail.value
|
||
this.contacts_id = this.contactList[e.detail.value].id
|
||
this.contactname = this.contactList[e.detail.value].name
|
||
},
|
||
//公司签约人
|
||
changeStaff(e) {
|
||
this.staffIndex = e.detail.value
|
||
this.order_staff_id = this.staffList[e.detail.value].id
|
||
this.staffname = this.staffList[e.detail.value].name
|
||
},
|
||
moreClick() {
|
||
uni.navigateTo({
|
||
url: '/pagesA/crm/selectMember/selectMember'
|
||
})
|
||
},
|
||
//选择购买的产品
|
||
//添加产品
|
||
addPart() {
|
||
this.$refs.productChild.init()
|
||
},
|
||
closePop() {
|
||
this.showProduct = false
|
||
},
|
||
selectList(arr) {
|
||
this.showProduct = false
|
||
arr.forEach(ele=>{
|
||
ele.minprice = ele.price
|
||
ele.parts = []
|
||
})
|
||
this.productList = this.deWeight(arr.concat(this.productList))
|
||
//计算产品总金额
|
||
this.handleTotalMoney()
|
||
},
|
||
deWeight(arr) {
|
||
for (var i = 0; i < arr.length - 1; i++) {
|
||
for (var j = i + 1; j < arr.length; j++) {
|
||
if (arr[i].id == arr[j].id) {
|
||
arr.splice(j, 1);
|
||
j--;
|
||
}
|
||
}
|
||
}
|
||
return arr;
|
||
},
|
||
//修改产品 金额
|
||
changeProductPrice() {
|
||
//计算产品总金额
|
||
this.handleTotalMoney()
|
||
},
|
||
//修改产品数量
|
||
changeNumber(e,index){
|
||
let obj = this.productList[index]
|
||
obj.number = e
|
||
this.$set(this.productList,index,obj)
|
||
//计算产品总金额
|
||
this.handleTotalMoney()
|
||
},
|
||
delProduct(index) {
|
||
this.productList.splice(index,1)
|
||
//计算产品总金额
|
||
this.handleTotalMoney()
|
||
},
|
||
handleTotalMoney() {
|
||
let money = 0
|
||
this.productList.forEach(ele=>{
|
||
money += Number(ele.price) * ele.number
|
||
})
|
||
this.total_price = money
|
||
//比较 产品总金额 和 手动输入的 合同金额的大小
|
||
let contractMoney = 0
|
||
this.listForm.forEach(ele=>{
|
||
if((ele.id == 'money') && (ele.value < money)){
|
||
ele.lessthan = true
|
||
}else{
|
||
ele.lessthan = false
|
||
}
|
||
})
|
||
},
|
||
//选择产品 配置
|
||
toSelectConfig(item,index) {
|
||
this.configIndex = index
|
||
this.$refs.productConfig.init(item.id)
|
||
},
|
||
configList(arr) {
|
||
let obj = this.productList[this.configIndex]
|
||
obj.parts = this.deWeight(obj.parts.concat(arr))
|
||
this.$set(this.productList,this.configIndex,obj)
|
||
},
|
||
//修改配置数量
|
||
changeConfigNumber(e,conindex,index) {
|
||
let obj = this.productList[index]
|
||
obj.parts[conindex].number = e
|
||
this.$set(this.productList,index,obj)
|
||
},
|
||
//删除产品配置
|
||
delPeizhi(index,conindex) {
|
||
let obj = this.productList[index]
|
||
obj.parts.splice(conindex,1)
|
||
this.$set(this.productList,index,obj)
|
||
},
|
||
//保存
|
||
toSave() {
|
||
let {
|
||
id,
|
||
order_staff_id, //公司签约人
|
||
customer_id, //客户id
|
||
contacts_id, //客户签约人
|
||
remindPeople, //提醒谁看
|
||
} = this
|
||
let arrlist = []
|
||
let params = this.checkCommonForm(this.listForm)
|
||
if(!params){
|
||
return
|
||
}
|
||
if ((!remindPeople || remindPeople.length == 0) && this.approvalPro.status == 0) {
|
||
uni.showToast({
|
||
title: '请选择审核人',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
//产品列表
|
||
let product = []
|
||
if(this.productList.length > 0){
|
||
this.productList.forEach(ele=>{
|
||
product.push({
|
||
product_id:ele.product_id,
|
||
price: ele.price,
|
||
number: ele.number,
|
||
parts: ele.parts,
|
||
cost_price: ele.cost_price,
|
||
wholesale: ele.wholesale
|
||
})
|
||
})
|
||
}
|
||
let arr = []
|
||
remindPeople.forEach(ele=>{
|
||
arr.push(ele.id)
|
||
})
|
||
params = Object.assign({},params,{
|
||
id,
|
||
order_staff_id,
|
||
customer_id,
|
||
contacts_id,
|
||
product,
|
||
business_id:this.businessObj?this.businessObj.id:'',
|
||
flow_staff_ids:this.approvalPro.status == 0 ? arr.join(',') : ''
|
||
})
|
||
netEditContract(params).then(res=>{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon:'none',
|
||
duration: 2000
|
||
})
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
},2000)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add_in{
|
||
background-color: $uni-text-color;
|
||
color:#fff;
|
||
height:60rpx;
|
||
padding:0 10rpx;
|
||
line-height: 60rpx;
|
||
font-size: 24rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
.del{
|
||
width:40rpx;
|
||
height:40rpx;
|
||
border-radius: 50%;
|
||
border:1rpx solid #ff7800;
|
||
font-size:28rpx;
|
||
color:#ff7800;
|
||
flex-shrink: 0;
|
||
margin-right:24rpx;
|
||
text-align: center;
|
||
line-height: 38rpx;
|
||
}
|
||
.pro_warp{
|
||
padding:30rpx 24rpx 0 24rpx;
|
||
background:#fff;
|
||
border-bottom:1rpx solid #f5f5f5;
|
||
.li_warp{
|
||
padding-bottom:24rpx;
|
||
margin-bottom:24rpx;
|
||
border-bottom:2rpx solid #f5f5f5;
|
||
&:last-child{
|
||
border-bottom:0;
|
||
}
|
||
.cell_con{
|
||
padding:0 40rpx;
|
||
.cell_con_top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.contitle{
|
||
font-size:28rpx;
|
||
color:#333;
|
||
}
|
||
.deleimg{
|
||
width:44rpx;
|
||
height:44rpx;
|
||
}
|
||
}
|
||
.pro_con_box{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.context{
|
||
font-size:26rpx;
|
||
color:#666;
|
||
margin-top:10rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.productPrice{
|
||
width:150rpx;
|
||
background:#f5f5f5;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.conbot{
|
||
margin-top:10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.conmoney{
|
||
font-size:26rpx;
|
||
color:#333;
|
||
}
|
||
}
|
||
}
|
||
.config_set{
|
||
margin-top:24rpx;
|
||
.config_title{
|
||
font-size:24rpx;
|
||
color:#333;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.addConimg{
|
||
width:100rpx;
|
||
height:40rpx;
|
||
margin-left:10rpx;
|
||
}
|
||
}
|
||
.config_list{
|
||
margin-top:24rpx;
|
||
.config_li{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top:24rpx;
|
||
border-bottom:1rpx solid #f5f5f5;
|
||
padding-bottom:24rpx;
|
||
.conimg{
|
||
width:100rpx;
|
||
height:100rpx;
|
||
border-radius: 10rpx;
|
||
margin-right:20rpx;
|
||
}
|
||
.config_name{
|
||
width:290rpx;
|
||
font-size:24rpx;
|
||
color:#333;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.config_step{
|
||
|
||
margin-left:24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right_del_btn{
|
||
width:90rpx;
|
||
height:240rpx;
|
||
background:#F00;
|
||
color:#fff;
|
||
text-align: center;
|
||
line-height: 224rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
.new_linkman {
|
||
font-size: 28rpx;
|
||
.mar_top {
|
||
margin-top: 30rpx;
|
||
}
|
||
.info_head {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
padding-left: 24rpx;
|
||
}
|
||
.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;
|
||
font-size:32rpx;
|
||
color:#999;
|
||
input {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
}
|
||
.form_right {
|
||
display: flex;
|
||
color: #999;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin: 28rpx 5rpx 0 0;
|
||
}
|
||
}
|
||
.theme {
|
||
color: #5ca9fe;
|
||
}
|
||
text {
|
||
color: #f00;
|
||
margin-left: 10rpx;
|
||
}
|
||
.form_input {
|
||
input {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: right;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.affiliation {
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 40rpx;
|
||
.aff_head {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
padding-left: 30rpx;
|
||
text {
|
||
color: #f00;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.aff_con {
|
||
display: flex;
|
||
text-align: center;
|
||
flex-wrap: wrap;
|
||
|
||
.aff_item {
|
||
width: 100rpx;
|
||
margin-right: 15rpx;
|
||
|
||
image {
|
||
margin-bottom: 15rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
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 {
|
||
image {
|
||
margin-bottom: 15rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|