admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 客户人员编辑表单组件

Browse Source 
style: 对page.json代码缩进对齐
This commit is contained in:
wangzhuo
2025-08-18 21:43:28 +08:00
parent f9474ac01d
commit df29941de5
3 changed files with 1196 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

683
src/pages/business/CRM/customer/components/customerUserEdit.vue Normal file
View File

@@ -0,0 +1,683 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="isAdd?'客户人员新增':'客户人员归属详情'" :leftFlag="true" :rightFlag="true">
<template #right>
<view class="head-right" @click="submitForm">
<uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
color="#B7D2FF"></uni-icons>
保存
</view>
</template>
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<view class="white-bg">
<view class="form-con">
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="40%">
<!-- 选择客户 -->
<uni-forms-item label="客户名称" name="cusName" required class="f-c-right">
<view class="customer-name" @click="handleCustomerClick">
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
<text> {{ customerUser.cusName || '查询客户名称' }}</text> <!---->
</view>
</uni-forms-item>
<!-- 系统推荐等级 -->
<uni-forms-item label="系统公司等级" name="cusEstate" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.cusEstate"
:placeholder="customerUser.sysThinkLevel?customerUser.sysThinkLevel:'默认显示公司等级'"
disabled/>
</uni-forms-item>
<!-- 输入人员名称 -->
<uni-forms-item label="人员姓名" name="userName" required
class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.userName" placeholder="请输入姓名"/>
</uni-forms-item>
<!-- 输入人员手机号 -->
<uni-forms-item v-if="formData.iphone" label="人员手机号" name="iphone" required class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.iphone" placeholder="请输入手机号"/>
</uni-forms-item>
<uni-forms-item v-if="!formData.iphone && formData.mobilePhone" label="人员手机号" name="mobilePhone" required class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.mobilePhone" placeholder="请输入手机号"/>
</uni-forms-item>
<!-- 输入人员部门 -->
<uni-forms-item label="部门" name="userDept" required class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.userDept" placeholder="请输入所属部门"/>
</uni-forms-item>
<!-- 选择职能 -->
<uni-forms-item label="职能" name="functionalRequirements" required
class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleFunctionChange" :range="functionalRequirementList"
:range-key="'name'"> <!--选择职能 索引： :value="functionIndex" index1 响应：handlePlace1 -->
<view class="flex">
{{ formData.functionalRequirements ? formData.functionalRequirements : '请选择' }}
<!-- 职能：functionalRequirements -->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 业务员选择人员等级 -->
<uni-forms-item label="业务人员填写等级" name="salesmanThinkLevel" required
class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleThinkLevelChange" :range="salesmanThinkLevelList"
:range-key="'name'"> <!--选择推荐等级 索引:value="thinkLevelIndex" index8 响应：handlePlace9 -->
<view class="flex">
{{ formData.salesmanThinkLevel ? formData.salesmanThinkLevel : '请选择' }}
<!-- 思考人员等级：salesmanThinkLevel-->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 系统推荐等级 -->
<uni-forms-item label="系统推荐等级" name="systemThinkLevel" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.systemThinkLevel" :placeholder="recommendLevel || '默认显示系统推荐等级'"
disabled/>
</uni-forms-item>
<!-- 输入人员职务 -->
<uni-forms-item label="职务" name="job" required class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.job" placeholder="请输入职务"/>
</uni-forms-item>
<!-- 输入办公场地 -->
<uni-forms-item label="办公场地" name="officeSite" required class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.officeSite" placeholder="请输入办公场地"/>
</uni-forms-item>
<!-- 输入性别 -->
<uni-forms-item label="性别" name="sex" required
class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleGenderChange" :value="genderIndex" :range="genderList"
:range-key="'name'"> <!--选择性别 索引：index2 ，范围：palceArray2，响应：handlePlace2-->
<view class="flex">
{{ formData.sex ? formData.sex : '请选择' }} <!-- 性别：sex -->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 输入人员工作电话 -->
<uni-forms-item label="工作电话" name="jobTelphone" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.jobTelphone" placeholder="请输入工作电话"/>
</uni-forms-item>
<!-- 选择人员等级 -->
<uni-forms-item label="人员等级(K)" name="userType"
class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleUserTypeChange" :value="userTypeIndex" :range="userTypeList"
:range-key="'name'"> <!--选择等级 索引：index5 ，范围：palceArray3，响应：handlePlace6-->
<view class="flex">
{{ formData.userType ? formData.userType : '请选择' }} <!-- 等级：userType -->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 输入专业产品 majorProduct-->
<uni-forms-item label="专业产品" name="majorProduct" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.majorProduct" placeholder="请输入专业产品"/>
</uni-forms-item>
<!-- 输入产品需求 product-->
<uni-forms-item label="产品需求" name="product" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.product" placeholder="请输入产品需求"/>
</uni-forms-item>
<!-- 选择任职时间 tenureTime-->
<uni-forms-item label="任职日期" name="tenureTime" class="uni-forms-item is-direction-top is-top">
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.tenureTime"
@change="handleTenureTimeChange"/> <!-- 响应：orderDateChange-->
</uni-forms-item>
<!-- 输入需求层次 hierarchyNeeds-->
<uni-forms-item label="需求层次" name="hierarchyNeeds"
class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleHierarchyNeedsChange" :value="hierarchyNeedsIndex" :range="hierarchyNeedsList"
:range-key="'name'"> <!--选择层次 索引：index4 ，范围：palceArray5，响应：handlePlace5-->
<view class="flex">
{{ formData.hierarchyNeeds ? formData.hierarchyNeeds : '请选择' }} <!-- 层次：hierarchyNeeds -->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 输入职务变化 jobChange-->
<uni-forms-item label="职务变化" name="jobChange" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.jobChange" placeholder="请输入职务变化"/>
</uni-forms-item>
<!-- 选择发展潜能 develop-->
<uni-forms-item label="发展潜能" name="develop"
class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleDevelopChange" :value="developIndex" :range="developList"
:range-key="'name'"> <!--选择潜力 索引：index3 ，范围：handlePlace4，响应：handlePlace5-->
<view class="flex">
{{ formData.develop ? formData.develop : '请选择' }} <!-- 潜能：develop -->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 输入生日 -->
<uni-forms-item label="生日" name="birthday" class="uni-forms-item is-direction-top is-top">
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.birthday"
@change="handleBirthdayChange"/> <!-- 响应：birthdayChange-->
</uni-forms-item>
<!-- 输入爱好 -->
<uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top">
<!-- 索引：hobbyIndex 范围：hobbyList 响应：handleHobbyChange-->
<uni-easyinput v-model="formData.hobby" placeholder="请输入爱好"/>
<multipleSelect :multiple="true" :value="hobbyIndex" downInner :options="hobbyList"
@change="handleHobbyChange" :slabel="'name'"
></multipleSelect><!--placeholder="请选择爱好标签"-->
</uni-forms-item>
<!-- <uni-forms-item label="爱好" name="hobby" class="uni-forms-item is-direction-top is-top">-->
<!-- <uni-easyinput v-model="formData.hobby" placeholder="请输入爱好" @click="chooseHobby"/>-->
<!-- chooseHobby选择标签 -->
<!-- </uni-forms-item>-->
<!-- 输入禁忌 taboo-->
<uni-forms-item label="禁忌" name="taboo" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.taboo" placeholder="请输入禁忌"/>
</uni-forms-item>
<!-- 输入籍贯 nativec-->
<uni-forms-item label="籍贯" name="nativec" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.nativec" placeholder="请输入或选择籍贯"/>
<uni-data-picker placeholder="请选择" :localdata="city"
:clear-icon="false"
:map="{text:'label',value:'value'}"
@change="handleNativeChange">
</uni-data-picker>
<!-- {{formData.nativec? formData.nativec:'请选择'}}--><!-- 响应：address-->
</uni-forms-item>
<!-- 输入家庭住址 homeAddress-->
<uni-forms-item label="家庭住址" name="homeAddress" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.homeAddress" placeholder="请输入家庭住址"/>
</uni-forms-item>
<!-- 输入家庭情况 familyStatus-->
<uni-forms-item label="家庭情况" name="familyStatus" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.familyStatus" placeholder="请输入家庭情况"/>
</uni-forms-item>
<!-- 输入婚姻状况 maritalStatus-->
<uni-forms-item label="婚姻状况" name="maritalStatus" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.maritalStatus" placeholder="请输入婚姻状况"/>
</uni-forms-item>
<!-- 输入车型及牌号 motorcycleType-->
<uni-forms-item label="车型及牌号" name="motorcycleType" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.motorcycleType" placeholder="请输入车型及牌号"/>
</uni-forms-item>
<!-- 输入毕业院校 graduateIns-->
<uni-forms-item label="毕业院校" name="graduateIns" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.graduateIns" placeholder="请输入毕业院校"/>
</uni-forms-item>
<!-- 输入人脉关系 interpersonal-->
<uni-forms-item label="人脉关系" name="interpersonal" class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.interpersonal" placeholder="请输入人脉关系"/>
</uni-forms-item>
<!-- 输入支持程度 support-->
<uni-forms-item label="支持程度" name="support" class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleSupportChange" :value="supportIndex" :range="supportLevelList"
:range-key="'name'"> <!--选择支持程度 索引：index6 ，范围：palceArray6，响应：handlePlace7-->
<view class="flex">
{{ formData.support ? formData.support : '请选择' }} <!-- 支持：support -->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 选择工作状态 workingStatus-->
<uni-forms-item label="工作状态" name="workingStatus" class="uni-forms-item is-direction-top is-top">
<view class="form-picker">
<picker @change="handleWorkingStatusChange" :value="workingStatusIndex" :range="workingStatusList"
:range-key="'name'"> <!--选择支持程度 索引：index7 ，范围：palceArray7，响应：handlePlace8-->
<view class="flex">
{{ formData.workingStatus ? formData.workingStatus : '请选择' }} <!-- 工作：workingStatus -->
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<!-- 输入备注 -->
<uni-forms-item label="备注" name="remark" class="uni-forms-item is-direction-top is-top">
<uni-easyinput type="textarea" autoHeight v-model="formData.remark" placeholder="请输入备注"
class="form-texarea"/>
</uni-forms-item>
<view style="padding-bottom: 30rpx; font-size: 12px; color: gray; text-align: center;">*★,°*:.☆(￣▽￣)/$:*.°★*
。<p v-if="isAdd">恭喜你完成了信息填写，赶快提交吧！</p>
</view>
<view v-if="isAdd" style="padding-bottom: 80rpx;">
<button type="primary" @click="submitForm">保存</button>
</view>
</uni-forms>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {ref, onMounted, computed, reactive, getCurrentInstance} from 'vue'
import customHeader from '@/components/customHeader.vue'
import multipleSelect from '@/components/multipleSelect.vue'
import {
developList,
functionalRequirementList,
genderList,
hierarchyNeedsList, hobbyList,
salesmanThinkLevelList, supportLevelList,
userTypeList, workingStatusList
} from "../dataMap";
import city from "@/utils/area";
import {getCustomerLevel, getCusUserApprovalListDetail} from "@/api/crm/customer/getCustomer";
import {upadateappCrmCusUserNew} from "@/api/crm/customer/updateCustomer";
import {onLoad} from "@dcloudio/uni-app";
// 表单引用
const formRef = ref({});
// 表单数据
const formData = ref({
//部门
userDept: null,
//客户ID
cusId: null,
//客户人员名称
customerUserName: null,
userName: null,
//等级（K）
userType: null,
//手机号
iphone: null,
mobilePhone: null,
//客户姓名
cusName: null,
//系统中公司等级
cusEstate: null,
//工作手机号
jobTelphone: null,
//职能
functionalRequirements: '',
//职务
job: null,
//专业产品
majorProduct: null,
//产品需求
product: null,
//办公场地
officeSite: null,
//性别
sex: '男',
//任职时间
tenureTime: null,
//需求层次
hierarchyNeeds: null,
//职务变化
jobChange: null,
//发展潜能
develop: null,
//生日
birthday: null,
//爱好
hobby: null,
//禁忌
taboo: null,
//籍贯
nativec: null,
//家庭情况
familyStatus: null,
//婚姻状况
maritalStatus: null,
//车辆及牌号
motorcycleType: null,
//毕业院校
graduateIns: null,
//家庭住址
homeAddress: null,
//人脉关系
interpersonal: null,
//支持程度
support: null,
//工作状态
workingStatus: null,
//备注
remark: null,
//业务员认为的等级
salesmanThinkLevel: null,
//系统认为的等级
systemThinkLevel: null,
//职能
function: null,
});
// 客户人员信息
const customerUser = ref({
cusName: null,
sysThinkLevel: null
});
// 表单校验规则
let rules;
// 初始化校验规则
(function bindRules() {
rules = reactive({
cusName: {rules: [{required: true, errorMessage: '客户名称不能为空', trigger: 'blur'}]},
customerUserName: {rules: [{required: true, errorMessage: '人员名称不能为空', trigger: 'blur'}]},
iphone: {
rules: [{
required: true,
errorMessage: '请填写手机号码',
}, {
validateFunction: function (rule, value, data, callback) {
let iphoneReg = (
/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
); //手机号码
if (!iphoneReg.test(value)) {
callback('手机号码格式不正确，请重新填写')
}
}
}]
},
userDept: {rules: [{required: true, errorMessage: '所属部门不能为空', trigger: 'blur'}]},
functionalRequirements: {rules: [{required: true, errorMessage: '职能不能为空', trigger: 'blur'}]},
salesmanThinkLevel: {rules: [{required: true, errorMessage: '手填等级不能为空', trigger: 'blur'}]},
job: {rules: [{required: true, errorMessage: '职务不能为空', trigger: 'blur'}]},
officeSite: {rules: [{required: true, errorMessage: '办公场地不能为空', trigger: 'blur'}]},
sex: {rules: [{required: true, errorMessage: '性别不能为空', trigger: 'blur'}]},
});
console.log(rules, "校验规则");
})();
const isAdd = ref(true);
// getCurrentInstance().proxy
let instance = null;
onLoad((options)=>{
instance = getCurrentInstance().proxy;
const eventChannel = instance.getOpenerEventChannel();
eventChannel.on('editCusData', async (data) => {
isAdd.value = data.isAdd;
if(!data.isAdd){ // 查看模式
let {userId} = data.param;
console.log(data.param, "客户人员所属详情编辑页面读取到参数");
let res = await getCusUserApprovalListDetail({userId}).catch(err=>{
console.warn(err,'客户人员所属编辑信息获取失败');
})
const {rows} = res;
let source = rows[0];
const filteredData = Object.keys(source)
.filter(key => source[key] !== null && source[key] !== "null")
.reduce((obj, key) => {
obj[key] = source[key];
return obj;
}, {});
const {cusName} = source;
customerUser.value.cusName = cusName;
console.log(filteredData, "过滤空值属性")
if(rows.length) Object.assign(formData.value, filteredData); // 对表单赋值
formData.value.functionalRequirements = source.function; // 特殊处理
}
})
})
// 选择客户人员
let handleCustomerClick = () => {
// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
url: '/pages/business/CRM/customer/selectCustomer',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
cuSelected(data) {
console.log(data, "获取到返回的数据")
let {
cusName, // 公司名称
cusEstate, // 等级
cusId,
} = data;
customerUser.value.cusName = cusName;
if (!cusEstate) customerUser.value.sysThinkLevel = "该客户暂无等级信息，无法进行系统推荐"
formData.value.cusEstate = cusEstate;
formData.value.cusName = cusName;
formData.value.cusId = cusId;
getRecommendLevel();
}
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('requestCusList', {data: {cusName: customerUser.value.cusName}})
}
})
}
// 选择职能
let handleFunctionChange = (e) => {
console.log(e.detail.value, '职能索引');
const {name} = functionalRequirementList[e.detail.value];
formData.value.functionalRequirements = name;
getRecommendLevel();
}
// 选择等级
let handleThinkLevelChange = (e) => {
console.log(e.detail.value, '人员等级');
const {name} = salesmanThinkLevelList[e.detail.value];
formData.value.salesmanThinkLevel = name;
}
// 系统推荐等级
let recommendLevel = ref("");
let getRecommendLevel = async () => {
if (formData.value.cusEstate && formData.value.functionalRequirements) {
let {cusEstate, functionalRequirements} = formData.value;
let param = {cusEstate, functionalRequirements};
if (formData.value.salesmanThinkLevel) {
param.personnelLevel = formData.value.salesmanThinkLevel;
}
let res = await getCustomerLevel(param).catch(err => {
console.error(err, "客户的系统推荐等级获取失败")
})
if (!res.systemRecommendationLevel) {
recommendLevel.value = "客户无等级信息，暂无法进行等级推荐"
console.log(formData.value.systemThinkLevel + "???")
}
formData.value.systemThinkLevel = res.systemRecommendationLevel;
} else {
recommendLevel.value = "无公司等级信息，无法推荐等级";
}
};
// 性别索引
let genderIndex = ref(0);
// 选择性别
let handleGenderChange = (e) => {
const {value} = e.detail;
console.log(e.detail.value);
const {name} = genderList[value];
genderIndex.value = value;
formData.value.sex = name;
}
// 人员等级索引
let userTypeIndex = ref(0);
// 选择人员等级
let handleUserTypeChange = (e) => {
let {value} = e.detail;
userTypeIndex.value = value;
const {name} = userTypeList[value];
formData.value.userType = name;
}
// 选择日期
function handleTenureTimeChange(e) {
let {value} = e.detail;
formData.value.tenureTime = value;
}
// 需求层次索引
let hierarchyNeedsIndex = ref(0);
// 选择需求层次
let handleHierarchyNeedsChange = e => {
let {value} = e.detail;
const {name} = hierarchyNeedsList[value];
hierarchyNeedsIndex.value = value;
formData.value.hierarchyNeeds = name;
}
// 发展潜能索引
let developIndex = ref(0);
// 选择发展潜能
let handleDevelopChange = e => {
let {value} = e.detail;
developIndex.value = value;
formData.value.develop = developList[value].name;
}
// 选择生日
function handleBirthdayChange(e) {
let{value} = e.detail
formData.value.birthday = value;
}
// 爱好标签索引
let hobbyIndex = reactive([]);
// 选择爱好标签
const handleHobbyChange = (item, value) => {
// console.log("爱好", item, value);
hobbyIndex = value;
};
// 选择
const handleNativeChange = (e) => {
formData.value.nativec = (e.detail.value.map(item => {
return item.text;
}).join("-"))
}
// 支持程度索引
let supportIndex = ref(0);
// 选择支持程度
let handleSupportChange = e => {
let {value} = e.detail;
supportIndex.value = value;
formData.value.support = supportLevelList[value].name;
}
// 工作状态索引
let workingStatusIndex = ref(0);
let handleWorkingStatusChange = e => {
let {value} = e.detail;
workingStatusIndex.value = 0;
formData.value.workingStatus = workingStatusList[value].name;
}
let submitForm = async () => {
let hobbyTags = hobbyIndex.map(it => {
let {name} = hobbyList[it];
return name;
})
const hobbyTagString = hobbyTags.join('，');
console.log(hobbyTagString);
if (hobbyTagString || formData.value.hobby) {
formData.value.hobby = formData.value.hobby ? formData.value.hobby + '，' + hobbyTagString : hobbyTagString;
}
// console.log(formData.value, "校验表单数据")
// console.log(recommendLevel);
formData.value.cusName = customerUser.value.cusName;
try {
await formRef.value.validate()
console.log(formData.value, "提交表单数据")
// 请求保存
uni.showLoading()
upadateappCrmCusUserNew(formData.value).then(res=>{
uni.hideLoading();
uni.showToast({
title: "更新成功"
})
setTimeout(()=>uni.navigateBack(), 1500);
}).catch(err=>{
uni.showToast({
icon: 'none',
title: "更新失败"
})
})
// 重置表单
// 清除校验
} catch (err) {
uni.showToast({
icon: 'none',
title: '请检查并完善信息'
})
console.warn(err);
}
}
</script>
<style lang="scss" scoped>
:deep(.uni-easyinput__content.is-input-border) {
overflow: hidden;
}
:deep(.uni-easyinput__content.is-input-border.is-disabled) {
border: none;
}
:deep(.uni-easyinput__content.is-input-border.is-disabled .uni-easyinput__content-input) {
background-color: #f0f0f0 !important;
}
:deep(.is-disabled .uni-easyinput__placeholder-class) {
color: #999;
}
:deep(.uni-select-dc-select .uni-select-multiple) {
overflow: auto;
}
.form-picker {
padding: 15rpx;
font-size: 12px;
}
:deep(.uni-date-x .uni-date__x-input) {
font-size: 12px;
}
.white-bg {
width: 750rpx;
padding: 30rpx 0 0;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
.customer-name {
height: 100%;
display: flex;
align-items: center;
flex-direction: row-reverse
}
:deep(.uni-date-x) {
display: block;
}
:deep(.uni-date-x .icon-calendar) {
float: right;
margin-top: 15rpx;
margin-right: 20rpx;
background: url('../../../../../static/images/business/icon-date.png') no-repeat;
background-size: 32rpx 35rpx;
width: 32rpx;
height: 35rpx;
}
:deep(.uni-date-x .icon-calendar::before) {
display: none;
}
:deep(.uni-date-x .uni-date__x-input) {
padding-left: 20rpx;
color: #919191;
}
</style>

27
src/pages/business/CRM/customer/customerUserBelong.vue
View File

@@ -145,10 +145,12 @@ const mescrollInit = (mescroll) => {
const downCallback = async (mescroll) => {
try {
setTimeout(async () => {
const res = await getList(1, upOption.value.page.size);
// 重置页码为第一页
const res = await getList(1, mescroll.size || upOption.page.size);
cssFlag.value = false;
list.value = res.list;
mescroll.endSuccess(res.list.length, res.total >= upOption.value.page.size);
// 正确传递 total 参数
mescroll.endSuccess(res.list.length, res.total > (mescroll.size || upOption.page.size));
}, 500);
} catch (error) {
console.log(error)
@@ -159,13 +161,15 @@ const downCallback = async (mescroll) => {
const upCallback = async (mescroll) => {
try {
setTimeout(async () => {
// 使用 mescroll 提供的页码和大小参数
const res = await getList(mescroll.num, mescroll.size);
if (mescroll.num === 1) {
list.value = res.list;
} else {
list.value.push(...res.list);
}
mescroll.endSuccess(res.list.length, res.total >= mescroll.size);
// 正确判断是否还有更多数据
mescroll.endSuccess(res.list.length, res.total > mescroll.num * mescroll.size);
}, 500);
} catch (error) {
console.log(error)
@@ -188,7 +192,6 @@ const getList = (pageIndex, pageSize) => {
total: res.total
});
});
}
// 跳转到详情
@@ -298,20 +301,28 @@ let handleDelete = async (item)=>{
.white-bg {
padding-bottom: 10rpx;
.w-b-title{
align-items: flex-start;
}
}
.btn-edit{
white-space: nowrap;
&.wancheng-deal {
background: #00aa7f;
border:solid 1rpx #00aa7f;
background-color: #00aa7f;
}
&.daishenhe-un-deal {
background: #ffaa7f;
border:solid 1rpx #ffaa7f;
background-color: #ffaa7f;
}
&.chaoqi-deal {
background: #ff0000;
border:1rpx solid #ff0000;
background-color: #ff0000;
}
&.tijiao-deal {
background: #00aaff;
border:1rpx solid #00aaff;
background-color: #00aaff;
}
}
</style>