From c4949229f60d0737c81a03e4130ec6b779cf7514 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Tue, 15 Apr 2025 19:25:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor(market):=20=E9=87=8D=E6=9E=84=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E8=B7=9F=E8=BF=9B=E4=BB=BB=E5=8A=A1=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改 API调用方式：将 createTask 方法的 HTTP 请求方式从 GET改为 POST
- 优化表单结构：重新设计了跟进任务表单，增加了跟进类型、跟进人员等字段
- 增加数据验证：在提交表单前增加了数据验证逻辑
-改进用户体验：优化了选择器组件的使用，增加了更多的用户提示
---
 api/market.js                  |   2 +-
 pages/market/clue/new_task.vue | 491 +++++++++++++++++++++++----------
 2 files changed, 352 insertions(+), 141 deletions(-)

diff --git a/api/market.js b/api/market.js
index 0cec771..8478c3d 100644
--- a/api/market.js
+++ b/api/market.js
@@ -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;
         })
     },
diff --git a/pages/market/clue/new_task.vue b/pages/market/clue/new_task.vue
index c60e935..4ea2c82 100644
--- a/pages/market/clue/new_task.vue
+++ b/pages/market/clue/new_task.vue
@@ -3,60 +3,102 @@
 		<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 }}
-					</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>
-				<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 }}
-					</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 }}
-					</view>
-				</fui-form-item>
+        <!--基础表单-->
+        <!--下拉-->
+        <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>
+          </view>
+        </fui-form-item>
+
+        <!--下拉-->
+        <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
+            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="备注"
+            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>
 		</view>
 		<view class="fui-btn__box">
 			<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">保存</fui-button>
 		</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('校验通过！')
-					} else {
-						console.log('向上滑动页面查看错误提示！')
-					}
-				}).catch(err => {
-					console.log(err)
-				})
-			},
-			//选择弹窗
-			selectCon(type) {
-				if (type == 1) {
-					//选择跟进时间
-					this.show_date = true
-				} else if (type == 2) {
-					//选择跟进客户
-					this.options_type = 2
-					this.options = this.options_kehu
-					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.show = true
-					this.linkage = true
-				}
-			},
-			//选择跟进时间
-			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) {
-				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
-				}
-			},
-			//关闭选择框
-			cancel() {
-				this.show = false
-			}
+
+      //初始化
+      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{
+          //全部
+          this.options_staff_id = arr
+          console.log('全部',arr)
+        }
+      },
+
+      //表单验证
+      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) {
+        this.options_type = type
+        switch (type) {
+            //跟进类型
+          case 'entry_type':
+            this.options = this.options_entry_type
+            this.show = true
+            this.linkage = true
+            //清空跟进任务->跟进人员
+            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;
+        }
+      },
+      //监听-下拉选择框
+      changeOptions(e) {
+        console.log('选择器选中',e)
+        this.show = false
+        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>