fix: 客户人员-多选表单、日期表单问题修复

This commit is contained in:
wangzhuo
2025-09-01 13:46:13 +08:00
parent c10a0be121
commit ca7572c542
5 changed files with 198 additions and 75 deletions

View File

@@ -43,7 +43,7 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref, defineExpose} from "vue";
const props = defineProps({ const props = defineProps({
// 是否显示全部清空按钮 // 是否显示全部清空按钮
@@ -175,6 +175,17 @@ const handleChange = (index, item) => {
// 触发回调函数 // 触发回调函数
emit("change", changevalue, realValue); emit("change", changevalue, realValue);
}; };
// 失去焦点时关闭选项列表
const handleBlur = () => {
active.value = false;
};
// 定义组件实例暴露的方法
defineExpose({
handleBlur
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -168,7 +168,7 @@
<uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top"> <uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top">
<!-- 索引hobbyIndex 范围hobbyList 响应handleHobbyChange--> <!-- 索引hobbyIndex 范围hobbyList 响应handleHobbyChange-->
<uni-easyinput v-model="formData.hobby" placeholder="请输入爱好" :disabled="!editable"/> <uni-easyinput v-model="formData.hobby" placeholder="请输入爱好" :disabled="!editable"/>
<multipleSelect :multiple="true" :value="hobbyIndex" downInner :options="hobbyList" <multipleSelect ref="hobbySelectRef" :multiple="true" downInner :value="hobbyIds" :options="hobbyList"
@change="handleHobbyChange" :slabel="'name'" @change="handleHobbyChange" :slabel="'name'"
></multipleSelect><!--placeholder="请选择爱好标签"--> ></multipleSelect><!--placeholder="请选择爱好标签"-->
@@ -467,20 +467,29 @@ let handleThinkLevelChange = (e) => {
// 系统推荐等级 // 系统推荐等级
let recommendLevel = ref(""); let recommendLevel = ref("");
let getRecommendLevel = async () => { let getRecommendLevel = async () => {
if (formData.value.cusEstate && formData.value.functionalRequirements) { if (formData.value.cusEstate) {
let {cusEstate, functionalRequirements} = formData.value; let {cusEstate, functionalRequirements} = formData.value;
let param = {cusEstate, functionalRequirements}; let param = {cusEstate, functionalRequirements};
if (formData.value.salesmanThinkLevel) { if (formData.value.salesmanThinkLevel) {
param.personnelLevel = formData.value.salesmanThinkLevel; param.personnelLevel = formData.value.salesmanThinkLevel;
} }
let res = await getCustomerLevel(param).catch(err => { let res = await getCustomerLevel(param)
/*.catch(err => {
console.error(err, "客户的系统推荐等级获取失败") console.error(err, "客户的系统推荐等级获取失败")
}) })*/
if (!res.systemRecommendationLevel) { try{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐" if(res.data.systemRecommendationLevel){
console.log(formData.value.systemThinkLevel + "???") formData.value.systemThinkLevel = res.data.systemRecommendationLevel;
}else{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐";
} }
}catch(e){
if (res.systemRecommendationLevel) {
formData.value.systemThinkLevel = res.systemRecommendationLevel; formData.value.systemThinkLevel = res.systemRecommendationLevel;
}else{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐"
}
}
} else { } else {
recommendLevel.value = "无公司等级信息,无法推荐等级"; recommendLevel.value = "无公司等级信息,无法推荐等级";
} }
@@ -509,8 +518,7 @@ let handleUserTypeChange = (e) => {
// 选择日期 // 选择日期
function handleTenureTimeChange(e) { function handleTenureTimeChange(e) {
let {value} = e.detail; formData.value.tenureTime = e;
formData.value.tenureTime = value;
} }
// 需求层次索引 // 需求层次索引
@@ -533,16 +541,16 @@ let handleDevelopChange = e => {
// 选择生日 // 选择生日
function handleBirthdayChange(e) { function handleBirthdayChange(e) {
let{value} = e.detail formData.value.birthday = e;
formData.value.birthday = value;
} }
// 爱好标签索引 // 爱好标签索引
let hobbyIndex = reactive([]); let hobbyIds = ref([]);
let hobbies = ref([]);
// 选择爱好标签 // 选择爱好标签
const handleHobbyChange = (item, value) => { const handleHobbyChange = (items, ids) => {
// console.log("爱好", item, value); hobbyIds.value = [];
hobbyIndex = value; hobbies.value = items;
}; };
// 选择 // 选择
const handleNativeChange = (e) => { const handleNativeChange = (e) => {

View File

@@ -1,3 +1,8 @@
<!--
* @author wangzhuo
* @date 2025年9月1日
* @description 编辑客户人员信息
-->
<template> <template>
<view class="con-body"> <view class="con-body">
<view class="con-bg"> <view class="con-bg">
@@ -168,7 +173,7 @@
<uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top"> <uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top">
<!-- 索引hobbyIndex 范围hobbyList 响应handleHobbyChange--> <!-- 索引hobbyIndex 范围hobbyList 响应handleHobbyChange-->
<uni-easyinput v-model="formData.hobby" placeholder="请输入爱好"/> <uni-easyinput v-model="formData.hobby" placeholder="请输入爱好"/>
<multipleSelect :multiple="true" :value="hobbyIndex" downInner :options="hobbyList" <multipleSelect ref="hobbySelectRef" :multiple="true" downInner :value="hobbyIds" :options="hobbyList"
@change="handleHobbyChange" :slabel="'name'" @change="handleHobbyChange" :slabel="'name'"
></multipleSelect><!--placeholder="请选择爱好标签"--> ></multipleSelect><!--placeholder="请选择爱好标签"-->
@@ -468,20 +473,29 @@ let handleThinkLevelChange = (e) => {
// 系统推荐等级 // 系统推荐等级
let recommendLevel = ref(""); let recommendLevel = ref("");
let getRecommendLevel = async () => { let getRecommendLevel = async () => {
if (formData.value.cusEstate && formData.value.functionalRequirements) { if (formData.value.cusEstate) {
let {cusEstate, functionalRequirements} = formData.value; let {cusEstate, functionalRequirements} = formData.value;
let param = {cusEstate, functionalRequirements}; let param = {cusEstate, functionalRequirements};
if (formData.value.salesmanThinkLevel) { if (formData.value.salesmanThinkLevel) {
param.personnelLevel = formData.value.salesmanThinkLevel; param.personnelLevel = formData.value.salesmanThinkLevel;
} }
let res = await getCustomerLevel(param).catch(err => { let res = await getCustomerLevel(param)
/*.catch(err => {
console.error(err, "客户的系统推荐等级获取失败") console.error(err, "客户的系统推荐等级获取失败")
}) })*/
if (!res.systemRecommendationLevel) { try{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐" if(res.data.systemRecommendationLevel){
console.log(formData.value.systemThinkLevel + "???") formData.value.systemThinkLevel = res.data.systemRecommendationLevel;
}else{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐";
} }
}catch(e){
if (res.systemRecommendationLevel) {
formData.value.systemThinkLevel = res.systemRecommendationLevel; formData.value.systemThinkLevel = res.systemRecommendationLevel;
}else{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐"
}
}
} else { } else {
recommendLevel.value = "无公司等级信息,无法推荐等级"; recommendLevel.value = "无公司等级信息,无法推荐等级";
} }
@@ -510,8 +524,7 @@ let handleUserTypeChange = (e) => {
// 选择日期 // 选择日期
function handleTenureTimeChange(e) { function handleTenureTimeChange(e) {
let {value} = e.detail; formData.value.tenureTime = e;
formData.value.tenureTime = value;
} }
// 需求层次索引 // 需求层次索引
@@ -534,17 +547,19 @@ let handleDevelopChange = e => {
// 选择生日 // 选择生日
function handleBirthdayChange(e) { function handleBirthdayChange(e) {
let{value} = e.detail formData.value.birthday = e;
formData.value.birthday = value;
} }
// 爱好标签索引 // 爱好标签索引
let hobbyIndex = reactive([]); let hobbyIds = ref([]);
let hobbies = ref([]);
// 选择爱好标签 // 选择爱好标签
const handleHobbyChange = (item, value) => { const handleHobbyChange = (items, ids) => {
// console.log("爱好", item, value); console.log('选择爱好', items, ids);
hobbyIndex = value; hobbyIds.value = [];
hobbies.value = items;
}; };
// 选择 // 选择
const handleNativeChange = (e) => { const handleNativeChange = (e) => {
formData.value.nativec = (e.detail.value.map(item => { formData.value.nativec = (e.detail.value.map(item => {
@@ -568,16 +583,16 @@ let handleWorkingStatusChange = e => {
} }
let submitForm = async () => { let submitForm = async () => {
let hobbyTags = hobbyIndex.map(it => { let hobbyTags = hobbies.value.map(it => {
let {name} = hobbyList[it]; let {name} = it;
return name; return name;
}) })
formData.value.iphone = formData.value.mobilePhone; // 特殊处理
const hobbyTagString = hobbyTags.join(''); const hobbyTagString = hobbyTags.join('');
console.log(hobbyTagString); console.log(hobbyTagString);
if (hobbyTagString || formData.value.hobby) { if (hobbyTagString || formData.value.hobby) {
formData.value.hobby = formData.value.hobby ? formData.value.hobby + '' + hobbyTagString : hobbyTagString; formData.value.hobby = hobbyTagString ? (formData.value.hobby ? formData.value.hobby + '' : '') + hobbyTagString : formData.value.hobby;
} }
formData.value.iphone = formData.value.mobilePhone; // 特殊处理
// console.log(formData.value, "校验表单数据") // console.log(formData.value, "校验表单数据")
// console.log(recommendLevel); // console.log(recommendLevel);
formData.value.cusName = customerUser.value.cusName; formData.value.cusName = customerUser.value.cusName;

View File

@@ -21,7 +21,7 @@
<!-- 正文内容 --> <!-- 正文内容 -->
<view class="white-bg"> <view class="white-bg">
<view class="form-con"> <view class="form-con" @click="handleBlur">
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="40%"> <uni-forms ref="formRef" :model="formData" :rules="rules" label-width="40%">
<!-- 选择客户 --> <!-- 选择客户 -->
<uni-forms-item label="客户名称" name="cusName" required class="f-c-right"> <uni-forms-item label="客户名称" name="cusName" required class="f-c-right">
@@ -178,7 +178,7 @@
<uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top"> <uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top">
<!-- 索引hobbyIndex 范围hobbyList 响应handleHobbyChange--> <!-- 索引hobbyIndex 范围hobbyList 响应handleHobbyChange-->
<uni-easyinput v-model="formData.hobby" placeholder="请输入爱好"/> <uni-easyinput v-model="formData.hobby" placeholder="请输入爱好"/>
<multipleSelect :multiple="true" :value="hobbyIndex" downInner :options="hobbyList" <multipleSelect ref="hobbySelectRef" :multiple="true" downInner :value="hobbyIds" :options="hobbyList"
@change="handleHobbyChange" :slabel="'name'" @change="handleHobbyChange" :slabel="'name'"
></multipleSelect><!--placeholder="请选择爱好标签"--> ></multipleSelect><!--placeholder="请选择爱好标签"-->
@@ -271,7 +271,7 @@
</template> </template>
<script setup> <script setup>
import {ref, onMounted, computed, reactive} from 'vue' import {ref, reactive} from 'vue'
import customHeader from '@/components/customHeader.vue' import customHeader from '@/components/customHeader.vue'
import multipleSelect from '@/components/multipleSelect.vue' import multipleSelect from '@/components/multipleSelect.vue'
import { import {
@@ -284,7 +284,8 @@ import {
} from "./dataMap"; } from "./dataMap";
import city from "@/utils/area"; import city from "@/utils/area";
import {getCustomerLevel, saveappCrmCusUserNew} from "@/api/crm/customer/getCustomer"; import {getCustomerLevel, saveappCrmCusUserNew} from "@/api/crm/customer/getCustomer";
// 对 multipleSelect 组件的引用
const hobbySelectRef = ref(null);
// 表单引用 // 表单引用
const formRef = ref({}); const formRef = ref({});
// 表单数据 // 表单数据
@@ -448,20 +449,29 @@ let handleThinkLevelChange = (e) => {
// 系统推荐等级 // 系统推荐等级
let recommendLevel = ref(""); let recommendLevel = ref("");
let getRecommendLevel = async () => { let getRecommendLevel = async () => {
if (formData.value.cusEstate && formData.value.functionalRequirements) { if (formData.value.cusEstate) {
let {cusEstate, functionalRequirements} = formData.value; let {cusEstate, functionalRequirements} = formData.value;
let param = {cusEstate, functionalRequirements}; let param = {cusEstate, functionalRequirements};
if (formData.value.salesmanThinkLevel) { if (formData.value.salesmanThinkLevel) {
param.personnelLevel = formData.value.salesmanThinkLevel; param.personnelLevel = formData.value.salesmanThinkLevel;
} }
let res = await getCustomerLevel(param).catch(err => { let res = await getCustomerLevel(param)
/*.catch(err => {
console.error(err, "客户的系统推荐等级获取失败") console.error(err, "客户的系统推荐等级获取失败")
}) })*/
if (!res.systemRecommendationLevel) { try{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐" if(res.data.systemRecommendationLevel){
console.log(formData.value.systemThinkLevel + "???") formData.value.systemThinkLevel = res.data.systemRecommendationLevel;
}else{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐";
} }
}catch(e){
if (res.systemRecommendationLevel) {
formData.value.systemThinkLevel = res.systemRecommendationLevel; formData.value.systemThinkLevel = res.systemRecommendationLevel;
}else{
recommendLevel.value = "客户无等级信息,暂无法进行等级推荐"
}
}
} else { } else {
recommendLevel.value = "无公司等级信息,无法推荐等级"; recommendLevel.value = "无公司等级信息,无法推荐等级";
} }
@@ -489,9 +499,9 @@ let handleUserTypeChange = (e) => {
} }
// 选择日期 // 选择日期
function handleTenureTimeChange(e) { function handleTenureTimeChange(val) {
let {value} = e.detail; console.log(val)
formData.value.tenureTime = value; formData.value.tenureTime = val;
} }
// 需求层次索引 // 需求层次索引
@@ -513,18 +523,20 @@ let handleDevelopChange = e => {
} }
// 选择生日 // 选择生日
function handleBirthdayChange(e) { function handleBirthdayChange(val) {
let{value} = e.detail formData.value.birthday = val;
formData.value.birthday = value;
} }
// 爱好标签索引 // 爱好标签索引
let hobbyIndex = reactive([]); let hobbyIds = ref([]);
let hobbies = ref([]);
// 选择爱好标签 // 选择爱好标签
const handleHobbyChange = (item, value) => { const handleHobbyChange = (items, ids) => {
// console.log("爱好", item, value); console.log('选择爱好', items, ids);
hobbyIndex = value; hobbyIds.value = [];
hobbies.value = items;
}; };
// 选择 // 选择
const handleNativeChange = (e) => { const handleNativeChange = (e) => {
formData.value.nativec = (e.detail.value.map(item => { formData.value.nativec = (e.detail.value.map(item => {
@@ -546,16 +558,93 @@ let handleWorkingStatusChange = e => {
workingStatusIndex.value = 0; workingStatusIndex.value = 0;
formData.value.workingStatus = workingStatusList[value].name; formData.value.workingStatus = workingStatusList[value].name;
} }
// 多选组件失去焦点关闭
let submitForm = async () => { let handleBlur = () => {
let hobbyTags = hobbyIndex.map(it => { if (hobbySelectRef.value) hobbySelectRef.value.handleBlur();
let {name} = hobbyList[it]; }
// 提取爱好标签处理逻辑
const processHobbyTags = () => {
let hobbyTags = hobbies.value.map(it => {
let {name} = it;
return name; return name;
}) })
const hobbyTagString = hobbyTags.join(''); const hobbyTagString = hobbyTags.join('');
console.log(hobbyTagString); console.log(hobbyTagString);
if (hobbyTagString || formData.value.hobby) { if (hobbyTagString || formData.value.hobby) {
formData.value.hobby = formData.value.hobby ? formData.value.hobby + '' + hobbyTagString : hobbyTagString; formData.value.hobby = hobbyTagString ? (formData.value.hobby ? formData.value.hobby + '' : '') + hobbyTagString : formData.value.hobby;
}
};
// 提取表单验证逻辑
const validateForm = async () => {
formData.value.cusName = customerUser.value.cusName;
await formRef.value.validate();
console.log(formData.value, "提交表单数据");
};
// 提取API调用逻辑
const saveCustomerUser = async () => {
uni.showLoading();
try {
const res = await saveappCrmCusUserNew(formData.value);
if(res.code === 200){
uni.showToast({
title: "保存成功"
});
} else {
uni.showToast({
title: "操作失败",
icon: "error"
});
}
setTimeout(() => uni.navigateBack(), 1500);
} catch(err) {
uni.showToast({
icon: 'none',
title: "保存失败"
});
}
finally{
uni.hideLoading()
}
};
// 简化后的 submitForm 方法
let submitForm = async () => {
console.log(formData.value);
try {
if(formData.value.iphone){
formData.value.mobilePhone = formData.value.iphone;
}
// 处理爱好标签
processHobbyTags();
// 表单验证
await validateForm();
// 保存客户人员信息
await saveCustomerUser();
} catch (err) {
uni.showToast({
icon: 'none',
title: '请检查并完善信息'
});
console.warn(err);
}
};
/*let submitForm = async () => {
let hobbyTags = hobbies.value.map(it => {
let {name} = it;
return name;
})
const hobbyTagString = hobbyTags.join('');
console.log(hobbyTagString);
if (hobbyTagString || formData.value.hobby) {
formData.value.hobby = hobbyTagString ? (formData.value.hobby ? formData.value.hobby + '' : '') + hobbyTagString : formData.value.hobby;
}
if(formData.value.iphone){
formData.value.mobilePhone = formData.value.iphone;
} }
// console.log(formData.value, "校验表单数据") // console.log(formData.value, "校验表单数据")
// console.log(recommendLevel); // console.log(recommendLevel);
@@ -565,19 +654,19 @@ let submitForm = async () => {
console.log(formData.value, "提交表单数据") console.log(formData.value, "提交表单数据")
// 请求保存 // 请求保存
uni.showLoading() uni.showLoading()
saveappCrmCusUserNew(formData.value).then(res=>{ saveappCrmCusUserNew(formData.value).then(res => {
uni.hideLoading(); uni.hideLoading();
if(res.code === 200){ if (res.code === 200) {
uni.showToast({ uni.showToast({
title: "保存成功" title: "保存成功"
}) })
}else{ } else {
uni.showToast({ uni.showToast({
title: "操作失败" title: "操作失败"
}) })
} }
setTimeout(()=>uni.navigateBack(), 1500); setTimeout(() => uni.navigateBack(), 1500);
}).catch(err=>{ }).catch(() => {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: "保存失败" title: "保存失败"
@@ -593,7 +682,7 @@ let submitForm = async () => {
}) })
console.warn(err); console.warn(err);
} }
} }*/
</script> </script>

View File

@@ -134,7 +134,7 @@ const upOption = ref({
noMoreSize: 5, noMoreSize: 5,
empty: { empty: {
tip: '~ 空空如也 ~', tip: '~ 空空如也 ~',
icon: "../../../../static/images/mescroll-empty.png" icon: "../../static/images/mescroll-empty.png"
}, },
textLoading: '加载中...', textLoading: '加载中...',
textNoMore: '已经到底了' textNoMore: '已经到底了'