665 lines
16 KiB
Vue
665 lines
16 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>
|
|
<picker @change="changeFollow" :value="followIndex" :range="followList">
|
|
<view class="form_right">
|
|
<view :class="follow_type ? 'valueActive' : '' ">{{follow_type ? follow_type : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view style="width: 50%;"><text>*</text>下次跟进时间</view>
|
|
<!-- #ifdef MP-WEIXIN || H5 || APP-PLUS-->
|
|
<picker style="width: 50%;" @change="changeTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime">
|
|
<view class="form_right">
|
|
<view :class="next_time ? 'valueActive' : '' ">{{next_time ? next_time : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<picker @change="changeAlipayTime" mode="date">
|
|
<view class="form_right">
|
|
<view :class="next_time ? 'valueActive' : '' ">{{next_time ? next_time : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="fllow_form" v-if="!isRequired">
|
|
<view style="padding-left: 27rpx;">上传附件</view>
|
|
<view class="form_right" @click="uploadClick">
|
|
<view>选择附件</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<u-action-sheet
|
|
:list="uploadActions"
|
|
v-model="uploadShow"
|
|
@click="uploadType"
|
|
></u-action-sheet>
|
|
|
|
<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.file_path" 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>
|
|
<view class="fllow_area">
|
|
<view class="area_head"><text>*</text>跟进内容</view>
|
|
<textarea :value="content" :class="content ? 'valueActive' : '' " @input="changeContent" placeholder="勤跟进,多签单" placeholder-style="color:#999" />
|
|
</view>
|
|
<view class="fllow_form" v-if="relation_type == 1 && !isRequired">
|
|
<view style="padding-left: 20rpx;">客户名称</view>
|
|
<view class="form_right" @click="changeKehu">
|
|
<view :class="relationName ? 'valueActive' : '' ">{{relationName ? relationName : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form" v-if="relation_type == 1">
|
|
<view><text>*</text>客户状态</view>
|
|
<picker @change="changeStatus" :value="statusIndex" :range="statusList">
|
|
<view class="form_right">
|
|
<view :class="follow ? 'valueActive' : '' ">{{follow ? follow : '点击选择'}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<examine-template :flag="false" :remindPeople="remindPeople" title="提醒谁看" @delExamine="delRemind"></examine-template>
|
|
<view id="btn" class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(saveFollow)">
|
|
保存
|
|
</view>
|
|
<view class="botsec"></view>
|
|
|
|
<!-- 选择客户 -->
|
|
<select-customer ref="customerChild" @getCustomerinfo="sureSelect"></select-customer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
pageJumps
|
|
} from "./newFllow_page_jumps.js";
|
|
import { uploadUrl } from '@/api/index.js'
|
|
import {
|
|
netSelect,
|
|
netPrevCustomer,
|
|
netLianxiren,
|
|
netAddFollowRecords
|
|
} from '@/api/kehu.js'
|
|
import {
|
|
BASE_IMG_URL
|
|
} from '@/util/api.js'
|
|
import {
|
|
dateTimePicker,
|
|
getMonthDay
|
|
} from '@/util/dateTimePicker.js'
|
|
import { netStaffDefaultReviewer } from '@/api/index.js'
|
|
import { commonF } from '@/common/common'
|
|
import selectCustomer from '@/components/selectCustomer.vue'
|
|
export default {
|
|
mixins: [pageJumps,commonF],
|
|
components:{
|
|
selectCustomer
|
|
},
|
|
data() {
|
|
return {
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
noClick:true, //防止 重复点击
|
|
checked: true,
|
|
uploadShow: false,
|
|
// #ifdef MP-WEIXIN
|
|
uploadActions: [
|
|
{
|
|
id: 1,
|
|
text: '拍照',
|
|
color: '#008EFF'
|
|
},
|
|
{
|
|
id: 2,
|
|
text: '从相册中选择',
|
|
color: '#008EFF'
|
|
},
|
|
{
|
|
id: 3,
|
|
text: '上传文件',
|
|
color: '#008EFF'
|
|
}
|
|
],
|
|
// #endif
|
|
// #ifdef H5 || APP-PLUS
|
|
uploadActions: [
|
|
{
|
|
id: 1,
|
|
text: '拍照',
|
|
color: '#008EFF'
|
|
},
|
|
{
|
|
id: 2,
|
|
text: '从相册中选择',
|
|
color: '#008EFF'
|
|
}
|
|
],
|
|
// #endif
|
|
followList: [123,465], //跟进类型
|
|
followIndex: null,
|
|
kehuList: [], //客户名称
|
|
kehu: [],
|
|
kehuIndex: null,
|
|
contactList: [], //联系人
|
|
concatIndex: null,
|
|
statusList: [], //客户状态
|
|
statusIndex: null,
|
|
//任务提醒
|
|
remindList: ['准时提醒', '5分钟前', '15分钟前', '30分钟前', '一个小时前', '两个小时前', '一天前', '两天前', '一周前'], //提醒
|
|
remindIndex: null,
|
|
|
|
//上传附件
|
|
imgList: [],
|
|
fileList: [],
|
|
follow_type: '', //跟进类型
|
|
dateTime: null,
|
|
dateTimeArray: null,
|
|
dateArr: null,
|
|
|
|
follow_time: '', //跟进时间
|
|
next_time: '', //下次跟进时间
|
|
content: '', //跟进内容
|
|
relation_id: '', //客户名称
|
|
relationName: '',
|
|
relation_type: '', //1客户 2联系人 3合同 4线索 5商机
|
|
follow: '', //客户状态
|
|
DefaultRemind:[], //默认需要提醒的人
|
|
remindPeople: [], //提醒谁看
|
|
remindType:'record',
|
|
is_event: false, //是否创建 跟进任务
|
|
start_time: '', //跟进时间
|
|
title: '', //跟进内容
|
|
isRequired:false, //是否只展示必填字段
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.relation_id = options.id
|
|
this.relation_type = options.type
|
|
//客户名称
|
|
this.getKehulist()
|
|
this.initTime()
|
|
//选择 列表
|
|
this.getSelectList()
|
|
},
|
|
methods: {
|
|
//切换是否只展示必填字段
|
|
changeRequired(e) {
|
|
this.isRequired = e.detail.value
|
|
},
|
|
//选中客户
|
|
sureSelect(obj) {
|
|
this.relation_id = obj.id
|
|
this.relationName = obj.name
|
|
},
|
|
getSelectList() {
|
|
netSelect().then(res => {
|
|
this.followList = res.data['跟进类型']
|
|
this.statusList = res.data['客户状态']
|
|
})
|
|
},
|
|
initTime() {
|
|
// 获取完整的年月日 时分秒，以及默认显示的数组
|
|
let obj = dateTimePicker()
|
|
// 精确到分的处理，将数组的秒去掉
|
|
let lastArray = obj.dateTimeArray.pop();
|
|
let lastTime = obj.dateTime.pop();
|
|
let lastDate = obj.dateArray.pop()
|
|
|
|
this.dateTimeArray = obj.dateTimeArray
|
|
this.dateTime = obj.dateTime
|
|
this.dateArr = obj.dateArray
|
|
},
|
|
//客户
|
|
getKehulist() {
|
|
netPrevCustomer().then(res => {
|
|
this.kehu = res.data
|
|
this.handleKehu(res.data)
|
|
})
|
|
},
|
|
handleKehu(data) {
|
|
let arr = []
|
|
data.forEach(ele => {
|
|
arr.push(ele.name)
|
|
})
|
|
this.kehuList = arr
|
|
this.setDefaultKehu()
|
|
},
|
|
setDefaultKehu() {
|
|
let id = this.relation_id
|
|
this.kehu.forEach((ele, index) => {
|
|
if (ele.id == id) {
|
|
this.relationName = ele.name
|
|
this.kehuIndex = index
|
|
}
|
|
})
|
|
},
|
|
//跟进类型
|
|
changeFollow(e) {
|
|
this.followIndex = e.detail.value
|
|
this.follow_type = this.followList[e.detail.value]
|
|
},
|
|
//跟进时间
|
|
changeTime(e) {
|
|
let arr = e.detail.value
|
|
let str = this.handleTime(arr)
|
|
this.next_time = str
|
|
},
|
|
changeAlipayTime(e) {
|
|
this.next_time = e.detail.value
|
|
},
|
|
handleTime(arr) {
|
|
let year = this.dateArr[0][arr[0]]
|
|
let month = this.dateArr[1][arr[1]]
|
|
let day = this.dateArr[2][arr[2]]
|
|
let hour = this.dateArr[3][arr[3]]
|
|
let minu = this.dateArr[4][arr[4]]
|
|
let str = year + '-' + month + '-' + day +' '+hour+':'+minu
|
|
return str
|
|
},
|
|
change() {
|
|
this.checked = !this.checked;
|
|
},
|
|
// 上传附件
|
|
uploadClick() {
|
|
this.uploadShow = true
|
|
},
|
|
onCancel() {
|
|
this.uploadShow = false
|
|
},
|
|
//跟进内容
|
|
changeContent(e) {
|
|
this.content = e.detail.value
|
|
},
|
|
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) {
|
|
console.log(file,'和王菲那英')
|
|
uni.uploadFile({
|
|
url: uploadUrl,
|
|
name: 'file',
|
|
header: {
|
|
'token': uni.getStorageSync('token')
|
|
},
|
|
// #ifdef MP-ALIPAY
|
|
fileType:'image',
|
|
// #endif
|
|
filePath: type == 1 ? file : file.path,
|
|
formData:{name:type == 2 ? file.name : ''},
|
|
success: (res) => {
|
|
let data = JSON.parse(res.data)
|
|
this.uploadShow = false
|
|
if(data.code == 1) {
|
|
if (type == 1) {
|
|
let obj = {
|
|
id:data.data.id,
|
|
file_path:data.data.url
|
|
}
|
|
this.imgList.push(obj)
|
|
} else {
|
|
let fileobj = {
|
|
id:data.data.id,
|
|
file_path:data.data.url
|
|
}
|
|
file = Object.assign({}, file, fileobj)
|
|
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)
|
|
},
|
|
//选择客户 名称
|
|
changeKehu() {
|
|
this.$refs.customerChild.init()
|
|
},
|
|
//客户状态
|
|
changeStatus(e) {
|
|
this.statusIndex = e.detail.value
|
|
this.follow = this.statusList[e.detail.value]
|
|
},
|
|
//是否 创建 跟进任务
|
|
changeEvent() {
|
|
this.is_event = !this.is_event
|
|
},
|
|
//跟进时间
|
|
changeFollowTime(e) {
|
|
this.start_time = e.detail.value[0] + '/' + e.detail.value[1] + '/' + e.detail.value[2]
|
|
},
|
|
saveFollow() {
|
|
console.log('保存')
|
|
let {
|
|
imgList,
|
|
fileList,
|
|
follow_type, //跟进类型
|
|
next_time, //跟进时间
|
|
content, //跟进内容
|
|
relation_id, //客户名称
|
|
relationName,
|
|
relation_type,
|
|
follow, //客户状态
|
|
remindPeople, //提醒谁看
|
|
} = this
|
|
|
|
if (!follow_type) {
|
|
uni.showToast({
|
|
title: '请选择跟进类型',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
if (!next_time) {
|
|
uni.showToast({
|
|
title: '请选择跟进时间',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
if (!content) {
|
|
uni.showToast({
|
|
title: '请填写跟进内容',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
if (!relation_id) {
|
|
uni.showToast({
|
|
title: '请选择客户名称',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
if (relation_type == 1 && !follow) {
|
|
uni.showToast({
|
|
title: '请选择客户状态',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
|
|
let files = '' //上传附件
|
|
let arr = []
|
|
imgList.forEach(ele => {
|
|
arr.push(ele.id)
|
|
})
|
|
fileList.forEach(ele => {
|
|
arr.push(ele.id)
|
|
})
|
|
console.log(imgList, fileList, '文件')
|
|
files = arr.join(',')
|
|
let remindsid = '' //提醒谁看
|
|
let remarr = []
|
|
remindPeople.forEach(ele => {
|
|
remarr.push(ele.id)
|
|
})
|
|
remindsid = remarr.join(',')
|
|
let params = {}
|
|
console.log(relation_type, '类型')
|
|
if (relation_type == 1 || relation_type == 3) {
|
|
//客户 合同
|
|
params = {
|
|
files,
|
|
follow_type,
|
|
next_time,
|
|
content,
|
|
relation_id,
|
|
relation_type,
|
|
follow,
|
|
reminds_id: remindsid,
|
|
}
|
|
} else {
|
|
//联系人
|
|
params = {
|
|
files,
|
|
follow_type,
|
|
next_time,
|
|
content,
|
|
relation_id,
|
|
relation_type,
|
|
reminds_id: remindsid,
|
|
}
|
|
}
|
|
netAddFollowRecords(params).then(res => {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
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;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
padding: 30rpx 40rpx 30rpx 47rpx;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
.form_right {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999;
|
|
:first-child{
|
|
width:350rpx;
|
|
text-align: right;
|
|
}
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 28rpx 5rpx 0 0;
|
|
}
|
|
}
|
|
|
|
text {
|
|
color: #f00;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.form_input {
|
|
input {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: right;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.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 55rpx;
|
|
margin-bottom: 30rpx;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
padding-bottom: 30rpx;
|
|
.area_head {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
|
|
text {
|
|
color: #f00;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
height: 300rpx;
|
|
padding: 30rpx;
|
|
background: #f8f8f8;
|
|
border-radius: 15rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.follow_task {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
#btn{
|
|
width: 500rpx;
|
|
height: 88rpx;
|
|
background: $uni-text-color;
|
|
border-radius: 29rpx;
|
|
font-size: 34rpx;
|
|
color: #fff;
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
</style>
|