php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(market): 重构创建跟进任务功能 

- 修改 API调用方式：将 createTask 方法的 HTTP 请求方式从 GET改为 POST
- 优化表单结构：重新设计了跟进任务表单，增加了跟进类型、跟进人员等字段
- 增加数据验证：在提交表单前增加了数据验证逻辑
-改进用户体验：优化了选择器组件的使用，增加了更多的用户提示
master
liutong 12 months ago
parent
f31492fa8c
commit
c4949229f6
2 changed files with 352 additions and 141 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      api/market.js
  2. 435
      pages/market/clue/new_task.vue

2
api/market.js
View File

@ -29,7 +29,7 @@ export default {
//转移跟进任务
createTask(data = {}) {
let url = '/member/create_task'
return http.get(url, data).then(res => {
return http.post(url, data).then(res => {
return res;
})
},

435
pages/market/clue/new_task.vue
View File

@ -3,42 +3,80 @@
<view class="title">跟进任务</view>
<view class="form-style">
<fui-form class="input-style" ref="form" top="0" :model="formData" :show="false">
<fui-form-item label="跟进客户" labelSize='26' prop="name" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" v-if="result_name == ''"
@click="selectCon(2)">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" v-else @click="selectCon(2)">{{ result_name }}
<!--基础表单-->
<!--下拉-->
<fui-form-item
asterisk
label="跟进类型"
asteriskPosition="right"
labelSize='26'
prop=""
background='#434544'
labelColor='#fff'
:bottomBorder='false'
>
<view class="input-title" style="margin-right:14rpx;">
<view v-if="!formData.entry_type" class="input-title" style="margin-right:14rpx;" @click="selectCon(`entry_type`)">点击选择
</view>
<view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`entry_type`)">
{{ str_entry_type }}
</view>
</fui-form-item>
<fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)"
v-if="result_date == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>{{ result_date }}
</view>
</fui-form-item>
<fui-form-item label="跟进内容" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
</fui-form-item>
<fui-form-item label="跟进人员" labelSize='26' asterisk asteriskPosition="right" prop="mobile"
background='#434544' labelColor='#fff' :bottomBorder='false'>
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
<!--下拉-->
<fui-form-item
asterisk
label="跟进人员"
asteriskPosition="right"
labelSize='26'
prop=""
background='#434544'
labelColor='#fff'
:bottomBorder='false'
>
<view class="input-title" style="margin-right:14rpx;">
<view v-if="!formData.follow_staff_id" class="input-title" style="margin-right:14rpx;" @click="selectCon(`follow_staff_id`)">点击选择
</view>
<view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`follow_staff_id`)">
{{ str_follow_staff_id }}
</view>
</view>
</fui-form-item>
<fui-form-item label="任务提醒" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)"
v-if="result_renwu == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)" v-else>{{ result_renwu }}
<!--下拉-->
<fui-form-item
asterisk
label="跟进时间"
asteriskPosition="right"
labelSize='26'
prop=""
background='#434544'
labelColor='#fff'
:bottomBorder='false'
>
<view class="input-title" style="margin-right:14rpx;">
<view v-if="!formData.reminder_time" class="input-title" style="margin-right:14rpx;" @click="selectCon(`reminder_time`)">点击选择
</view>
<view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`reminder_time`)">
{{ formData.reminder_time }}
</view>
</view>
</fui-form-item>
<fui-form-item label="提醒方式" labelSize='26' prop="mobile" background='#434544' labelColor='#fff'
:bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)"
v-if="result_fangshi == ''">点击选择</view>
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" v-else>{{ result_fangshi }}
<!--手写-->
<fui-form-item
label="备注"
asteriskPosition="right"
labelSize='26'
prop=""
background='#434544'
labelColor='#fff'
:bottomBorder='false'
>
<view class="input-title" style="margin-right:14rpx;">
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.follow_content"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
</view>
</fui-form-item>
</fui-form>
@ -48,15 +86,19 @@
</view>
<!-- 年月日-选择时间 -->
<fui-date-picker :show="show_date" type="3" @change="change_date" @cancel="cancel_date"></fui-date-picker>
<fui-date-picker :show="show_date" type="5" @change="change_date" @cancel="cancel_date"></fui-date-picker>
<!-- 选择器 -->
<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="change" @cancel="cancel"></fui-picker>
<!-- 下拉选择器 -->
<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="changeOptions"
@cancel="cancel"></fui-picker>
</view>
</template>
<script>
import marketApi from '@/api/market.js';
import memberApi from '@/api/member.js';
const rules = [{
name: "mobile",
rule: ["required", "isMobile"],
@ -66,107 +108,276 @@
data() {
return {
rules,
formData: {},
show_date: false,
result_date: '',
result_name: '',
result_renwu: '',
result_fangshi: '',
show: false,
options: [],
linkage: true,
options_type : undefined,
options_kehu: [{
'value': 1,
'text': '张三'
}, {
'value': 2,
'text': '李四'
}, {
'value': 3,
'text': '王五'
}],
options_renwu: [{
'value': 1,
'text': '是'
}, {
'value': 2,
'text': '否'
}],
options_fangshi: [{
'value': 1,
'text': '短信'
}, {
'value': 2,
'text': '微信'
}]
is_submit: true,//是否提交(防止重复提交)|true=可提交,false=不可提交
//表单数据
formData:{
//##### 基础表单 #####
entry_type:'',//跟进类型(1=市场人员录入的,2=销售人员录入)
follow_staff_id:'',//跟进人员
reminder_time:'',//跟进时间
follow_content:'',//备注
},
//下拉选择器组件
options_type: undefined,//选择器标识
show: false,//是否显示下拉选择器
linkage: true,//是否联动选择
options: [
// {
// 'value': 1,
// 'text': '类型1'
// }
],//下拉选择器可选值列表
//时间选择器相关
show_date: false,//是否显示时间选择器|true=是,false=否
//跟进类型-相关
//字典-跟进类型
options_entry_type:[
{
value: 1,
text: '市场人员'
},
{
value: 2,
text: '销售人员'
},
],
//文本展示-跟进类型
str_entry_type:'',
//跟进人员-相关
//字典-跟进人员
options_follow_staff_id_sc:[],//(市场-跟进人员)
options_follow_staff_id_xs:[],//(销售-跟进人员)
//文本展示-跟进人员
str_follow_staff_id:'',
}
},
onShow() {
this.init()
},
methods: {
submit() {
console.log(this.formData)
this.$refs.form.validator(null, null, true).then(res => {
console.log(res)
if (res.isPassed) {
console.log('校验通过！')
//初始化
async init() {
this.getUserInfo()
//获取字典-跟进人员(市场)
this.getDic_staff_id('5')
//获取字典-跟进人员(销售)
this.getDic_staff_id('6')
},
//获取当前登陆用户信息
async getUserInfo(){
let res = await marketApi.member({})
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
console.log(111,res.data)
this.formData.staff_id = res.data.staff_id//基础表单->跟进人员
this.str_staff_id = res.data.name//基础表单->跟进人员名字
},
//获取字典-跟进人员(全部)
//获取人员列表 role_id|5=市场,6=销售
async getDic_staff_id(role_id){
let res = await memberApi.staffList({
type: 2,
role_id:role_id
})
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
let arr = []
res.data.forEach((v,k)=>{
arr.push({
text: v.name,
value: v.id,
})
})
if(role_id == 5){
this.options_follow_staff_id_sc = arr
console.log('市场',arr)
}else if(role_id == 6){
this.options_follow_staff_id_xs = arr
console.log('销售',arr)
}else{
console.log('向上滑动页面查看错误提示！')
//全部
this.options_staff_id = arr
console.log('全部',arr)
}
}).catch(err => {
console.log(err)
},
//表单验证
async validatorForm(data) {
//跟进类型
if(!data.entry_type){
uni.showToast({
title: '跟进类型必填',
icon: 'none'
})
return false
}
//跟进人员
if(!data.follow_staff_id){
uni.showToast({
title: '跟进人员必填',
icon: 'none'
})
return false
}
//跟进时间
if(!data.reminder_time){
uni.showToast({
title: '跟进时间必填',
icon: 'none'
})
return false
}
return true
},
//提交
async submit() {
console.log('提交',this.formData)
let data = {...this.formData}
//表单验证
let validatorForm = await this.validatorForm(data)
console.log('验证结果',validatorForm)
if(!validatorForm){
return
}
//防止重复提交
if (!this.is_submit) {
return
}
this.is_submit = false
let res = await marketApi.createTask(data)//转移跟进任务
this.is_submit = true
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
uni.showToast({
title: res.msg,
icon: 'success'
})
//延迟1s执行
setTimeout(() => {
//跳转页面-线索列表
uni.navigateTo({
url: `/pages/market/clue/index`
})
}, 1000)
},
//选择弹窗
selectCon(type) {
if (type == 1) {
//选择跟进时间
this.show_date = true
} else if (type == 2) {
//选择跟进客户
this.options_type = 2
this.options = this.options_kehu
this.options_type = type
switch (type) {
//跟进类型
case 'entry_type':
this.options = this.options_entry_type
this.show = true
this.linkage = true
} else if (type == 3) {
//选择任务提醒
this.options_type = 3
this.options = this.options_renwu
this.show = true
this.linkage = true
} else if (type == 4) {
//选择提醒方式
this.options_type = 4
this.options = this.options_fangshi
//清空跟进任务->跟进人员
this.formData.follow_staff_id = ''
break;
//跟进任务->跟进人员
case 'follow_staff_id':
if(!this.formData.entry_type){
uni.showToast({
title: '请先选择跟进类型',
icon: 'none'
})
return
}
if(this.formData.entry_type == 1){
//市场人员列表
this.options = this.options_follow_staff_id_sc
}else{
//销售人员列表
this.options = this.options_follow_staff_id_xs
}
this.show = true
this.linkage = true
break;
//跟进时间
case 'reminder_time':
this.show_date = true
break;
}
},
//选择跟进时间
change_date(e) {
this.show_date = false
this.result_date = e.result ?? ''
console.log(this.result_date, '选择')
},
//关闭选择跟进时间
cancel_date() {
this.show_date = false
},
//选择框
change(e) {
//监听-下拉选择框
changeOptions(e) {
console.log('选择器选中',e)
this.show = false
console.log(e)
if(this.options_type == 2){
this.result_name = e.result
}else if(this.options_type == 3){
this.result_renwu = e.result
}else if(this.options_type == 4){
this.result_fangshi = e.result
let type = this.options_type
switch (type) {
//跟进类型
case 'entry_type':
this.str_entry_type = e.text//选中的text值
this.formData.entry_type = e.value//选中value值
break;
//跟进人员
case 'follow_staff_id':
this.str_follow_staff_id = e.text//选中的text值
this.formData.follow_staff_id = e.value//选中value值
break;
}
},
//关闭选择框
cancel() {
this.show = false
},
//监听-时间选择器
change_date(e) {
this.show_date = false
//跟进时间
let type = this.options_type
console.log('时间选择器',type,e)
let val = (e.result ?? '')
if(val){
val = val + ':00'
}
switch (type) {
//跟进任务->跟进时间
case 'reminder_time':
this.formData.reminder_time = val
break;
}
},
//关闭时间选择器
cancel_date() {
this.show_date = false
},
}
}
</script>

Write Preview
Loading…
Cancel
Save