566 lines
13 KiB
Vue
566 lines
13 KiB
Vue
<template>
|
|
<view class="new_fllow">
|
|
<view class="top_required">
|
|
只展示<span style="color:#f00">必填</span>字段<switch :checked="isRequired" color="#008EFF" @change="changeRequired" />
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>关联客户</view>
|
|
<view class="form_right" @click="changeCustomer">
|
|
<view :class="customerObj.id ? 'valueActive' : '' ">{{customerObj.id ? customerObj.name: '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>消费日期</view>
|
|
<picker mode="date" @change="changeTime">
|
|
<view class="form_right">
|
|
<view :class="consume_time ? 'valueActive' : '' ">{{consume_time ? consume_time : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>消费方式</view>
|
|
<picker :value="index" @change="changeType" :range="typeList">
|
|
<view class="form_right">
|
|
<view :class="consume_type ? 'valueActive' : '' ">{{consume_type ? consume_type : '点击选择'}}</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-style="font-size:30rpx;color: #999;" placeholder="请输入消费金额" class="">
|
|
</view>
|
|
</view>
|
|
<view class="fllow_area" v-if="!isRequired">
|
|
<view class="area_head">备注</view>
|
|
<textarea v-model="remark" :class="remark ? 'valueActive' : '' " placeholder="请输入备注"
|
|
placeholder-style="color:#999" />
|
|
</view>
|
|
<view class="fllow_form" v-if="!isRequired">
|
|
<view style="padding-left: 23rpx;">上传附件</view>
|
|
<view class="form_right" @click="uploadClick">
|
|
<view>选择附件</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<view class="imglist" v-if="imgList.length != 0">
|
|
<view class="imgbox" v-for="(item,imgindex) in imgList" :key="imgindex">
|
|
<image :src="BASE_IMG_URL+'close.png'" class="delimg" @click="delImg(imgindex)" mode="scaleToFill"></image>
|
|
<image :src="item.url" class="selfimg" @click="openCommonImg(imgList,imgindex)" mode="scaleToFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_file_li" v-if="fileList.length != 0">
|
|
<view class="fil_li" v-for="(item,fileindex) in fileList" :key="fileindex">
|
|
<image :src="BASE_IMG_URL+'fujian.png'" class="fileimg" mode="scaleToFill"></image>
|
|
<view class="filename" @click="openCommonFile(item)">{{item.name}}</view>
|
|
<image :src="BASE_IMG_URL+'close.png'" class="closeimg" @click="delFile(fileindex)" mode="scaleToFill">
|
|
</image>
|
|
</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 id="btn" class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(saveFollow)">
|
|
保存
|
|
</view>
|
|
|
|
<u-action-sheet :list="uploadActions" v-model="uploadShow" @click="uploadType"></u-action-sheet>
|
|
<!-- 选择客户 -->
|
|
<select-customer ref="customerChild" @getCustomerinfo="getCustomerinfo"></select-customer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
netSelect,
|
|
netAddCost,
|
|
netPrevCustomer
|
|
} from '@/api/kehu.js'
|
|
import {
|
|
netStaffDefaultReviewer,
|
|
uploadUrl,
|
|
netApprovalProcess
|
|
} from '@/api/index.js'
|
|
import {
|
|
BASE_IMG_URL
|
|
} from '@/util/api.js'
|
|
import {
|
|
commonF
|
|
} from '@/common/common'
|
|
import fixedApproval from '@/components/fixedApproval.vue'
|
|
import selectCustomer from '@/components/selectCustomer.vue'
|
|
export default {
|
|
mixins: [commonF],
|
|
components:{
|
|
fixedApproval,
|
|
selectCustomer
|
|
},
|
|
data() {
|
|
return {
|
|
noClick: true, //防止 重复点击
|
|
customer_id: '', //客户id
|
|
consume_time: '', //消费日期
|
|
consume_type: '', //消费方式
|
|
money: '', //消费金额
|
|
remark: '', //备注
|
|
file_ids: '', //附件id
|
|
BASE_IMG_URL: BASE_IMG_URL,
|
|
typeList: [], //消费方式 列表
|
|
index: null,
|
|
DefaultRemind: [],
|
|
remindPeople: [], //提醒谁看
|
|
remindType: 'consume',
|
|
imgList: [],
|
|
fileList: [],
|
|
uploadShow: false,
|
|
uploadActions: [{
|
|
id: 1,
|
|
text: '拍照',
|
|
color: '#008EFF'
|
|
},
|
|
{
|
|
id: 2,
|
|
text: '从相册中选择',
|
|
color: '#008EFF'
|
|
},
|
|
],
|
|
//客户列表
|
|
customerList:[],
|
|
customerIndex:null,
|
|
customerObj:{},
|
|
approvalPro:{}, //审批流程
|
|
isRequired:false, //是否只展示必填字段
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if(options.kehuid){
|
|
this.customer_id = options.kehuid
|
|
this.getKehu()
|
|
}
|
|
//获取消费方式
|
|
this.getType()
|
|
//获取 审批流程
|
|
this.getProcess()
|
|
},
|
|
methods: {
|
|
//切换是否只展示必填字段
|
|
changeRequired(e) {
|
|
this.isRequired = e.detail.value
|
|
},
|
|
//审批流程
|
|
getProcess() {
|
|
netApprovalProcess({type:'consume'}).then(res=>{
|
|
this.approvalPro = res.data
|
|
})
|
|
},
|
|
//客户列表
|
|
getKehu() {
|
|
netPrevCustomer().then(res=>{
|
|
this.customerList = res.data
|
|
if(this.customer_id){
|
|
this.customerList.forEach((ele,index)=>{
|
|
if(ele.id == this.customer_id){
|
|
this.customerObj = ele
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//选择关联客户
|
|
changeCustomer(e) {
|
|
this.$refs.customerChild.init()
|
|
},
|
|
getCustomerinfo(obj) {
|
|
this.customerObj = obj
|
|
},
|
|
//消费方式
|
|
getType() {
|
|
netSelect().then(res => {
|
|
this.typeList = res.data['消费方式']
|
|
})
|
|
},
|
|
// 消费日期
|
|
changeTime(e) {
|
|
this.consume_time = e.detail.value
|
|
},
|
|
//改变 消费方式
|
|
changeType(e) {
|
|
this.consume_type = this.typeList[e.detail.value]
|
|
},
|
|
// 上传附件
|
|
uploadClick() {
|
|
this.uploadShow = true
|
|
},
|
|
onCancel() {
|
|
this.uploadShow = false
|
|
},
|
|
uploadType(index) {
|
|
if (index == 0) {
|
|
//拍照
|
|
uni.chooseImage({
|
|
sourceType: ['camera'],
|
|
sizeType: ['compressed'],
|
|
success: (res) => {
|
|
let file = res.tempFilePaths
|
|
file.forEach(ele => {
|
|
this.uploadFile(ele, 1)
|
|
})
|
|
}
|
|
})
|
|
} else if (index == 1) {
|
|
//相册 选择
|
|
uni.chooseImage({
|
|
sourceType: ['album'],
|
|
sizeType: ['compressed'],
|
|
success: (res) => {
|
|
let file = res.tempFilePaths
|
|
file.forEach(ele => {
|
|
this.uploadFile(ele, 1)
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
//选择文件
|
|
wx.chooseMessageFile({
|
|
count: 1,
|
|
type: 'file',
|
|
success: (res) => {
|
|
let file = res.tempFiles[0]
|
|
this.uploadFile(file, 2)
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
//type 上传图片1 或 文件2
|
|
uploadFile(file, type) {
|
|
uni.uploadFile({
|
|
url: uploadUrl,
|
|
name: 'file',
|
|
header: {
|
|
'token': uni.getStorageSync('token')
|
|
},
|
|
// #ifdef MP-ALIPAY
|
|
fileType: 'image',
|
|
// #endif
|
|
filePath: type == 1 ? file : file.path,
|
|
success: (res) => {
|
|
let data = JSON.parse(res.data)
|
|
this.uploadShow = false
|
|
if (data.code == 1) {
|
|
if (type == 1) {
|
|
this.imgList.push(data.data)
|
|
} else {
|
|
file = Object.assign({}, file, data.data)
|
|
this.fileList.push(file)
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '上传失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
//删除 图片
|
|
delImg(index) {
|
|
this.imgList.splice(index, 1)
|
|
},
|
|
//删除 文件
|
|
delFile(index) {
|
|
this.fileList.splice(index, 1)
|
|
},
|
|
// 选择成员
|
|
moreClick() {
|
|
uni.navigateTo({
|
|
url: '/pagesA/crm/selectMember/selectMember'
|
|
})
|
|
},
|
|
//保存
|
|
saveFollow() {
|
|
let {
|
|
consume_time, //消费日期
|
|
consume_type, //消费方式
|
|
money, //消费金额
|
|
remark, //备注
|
|
imgList,
|
|
fileList,
|
|
remindPeople, //提醒谁看
|
|
} = this
|
|
if(!this.customerObj.id){
|
|
uni.showToast({
|
|
title: '请选择关联客户',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!consume_time) {
|
|
uni.showToast({
|
|
title: '请选择消费日期',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!consume_type) {
|
|
uni.showToast({
|
|
title: '请选择消费方式',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!money) {
|
|
uni.showToast({
|
|
title: '请填写消费金额',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if ((!remindPeople || remindPeople.length == 0) && this.approvalPro.status == 0) {
|
|
uni.showToast({
|
|
title: '请选择流程审批人',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
let arr = []
|
|
imgList.forEach(ele => {
|
|
arr.push(ele.id)
|
|
})
|
|
let file_ids = arr.join(',')
|
|
//流程审批人
|
|
let remarr = []
|
|
remindPeople.forEach(ele => {
|
|
remarr.push(ele.id)
|
|
})
|
|
let params = {
|
|
customer_id:this.customerObj.id?this.customerObj.id:'', //客户id
|
|
consume_time, //消费日期
|
|
consume_type, //消费方式
|
|
money, //消费金额
|
|
remark, //备注
|
|
file_ids,
|
|
flow_staff_ids:this.approvalPro.status == 0 ? remarr.join(',') : ''
|
|
}
|
|
netAddCost(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 {
|
|
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 30rpx;
|
|
color: #999;
|
|
font-size: 32rpx;
|
|
|
|
.form_right {
|
|
display: flex;
|
|
color: #999;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 28rpx 5rpx 0 0;
|
|
}
|
|
}
|
|
|
|
text {
|
|
color: #f00;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.form_input {
|
|
input {
|
|
height: 100%;
|
|
// height: 100rpx;
|
|
// line-height: 100rpx;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.fllow_button {
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
|
|
.fllow_file_li {
|
|
padding: 24rpx 34rpx;
|
|
background: #fff;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
|
|
.fil_li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 14rpx;
|
|
|
|
.fileimg {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.filename {
|
|
width:450rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.closeimg {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 70rpx;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
color: #999;
|
|
|
|
.area_head {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-size: 32rpx;
|
|
padding: 0 30rpx;
|
|
|
|
text {
|
|
color: #f00;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
width: 80%;
|
|
height: 300rpx;
|
|
padding: 30rpx;
|
|
background: #f8f8f8;
|
|
border-radius: 15rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.follow_task {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
#btn {
|
|
width: 500rpx;
|
|
height: 88rpx;
|
|
background: $uni-text-color;
|
|
border-radius: 29rpx;
|
|
font-size: 34rpx;
|
|
color: #fff;
|
|
line-height: 88rpx;
|
|
}
|
|
</style>
|