xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改代码格式

Browse Source
This commit is contained in:
浅念
2025-07-23 14:40:02 +08:00
parent 4a39387865
commit 7979a31e36
4 changed files with 1022 additions and 957 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/crmpc/customer/Add.vue
+41 -30
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="customer-form-page"> <div class="customer-form-page">
<div class="form-header"> <div class="form-header">
<el-link :underline="false" @click="goBack"> <el-link underline="never" @click="goBack">
<i class="iconfont-sys icon-reverse">&#xe772;</i> 返回 <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
</el-link> </el-link>
<span class="border"></span><span class="form-title">新增客户资料</span> <span class="border"></span><span class="form-title">新增客户资料</span>
@@ -18,19 +18,29 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label="客户渠道" prop="channel_id"> <el-form-item label="客户渠道" prop="channel_id">
<el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道"> <el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
<el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" /> <el-option
v-for="item in channelOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="客户商机" prop="magnitude"> <el-form-item label="客户商机" prop="magnitude">
<el-select v-model="form.magnitude" placeholder="请选择客户商机"> <el-select v-model="form.magnitude" placeholder="请选择客户商机">
<el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" /> <el-option
v-for="item in opportunityOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="客户名称" prop="contacts"> <el-form-item label="客户名称" prop="contacts">
<el-input v-model="form.contacts" placeholder="请输入客户名称" /> <el-input v-model="form.contacts" placeholder="请输入客户名称" />
</el-form-item> </el-form-item>
<el-form-item label="客户性别" prop="sex"> <el-form-item label="客户性别" prop="sex">
<el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;"> <el-radio-group v-model="form.sex" style="justify-content: flex-end; width: 100%">
<el-radio label="0">未知</el-radio> <el-radio label="0">未知</el-radio>
<el-radio label="1">男</el-radio> <el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio> <el-radio label="2">女</el-radio>
@@ -52,16 +62,31 @@
</el-form-item> --> </el-form-item> -->
<el-form-item label="客户分级" prop="grade"> <el-form-item label="客户分级" prop="grade">
<el-select v-model="form.grade" placeholder="请选择客户分级"> <el-select v-model="form.grade" placeholder="请选择客户分级">
<el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" /> <el-option
v-for="item in levelOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="国家" prop="country_id"> <el-form-item label="国家" prop="country_id">
<el-select v-model="form.country_id" filterable placeholder="请选择国家"> <el-select v-model="form.country_id" filterable placeholder="请选择国家">
<el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" /> <el-option
v-for="item in countryOptions"
:key="item.id"
:label="item.cn_addr"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="公司" prop="company"> <el-form-item label="公司" prop="company">
<el-input v-model="form.company" placeholder="请输入公司" @click="showMapDialog = true" readonly /> <el-input
v-model="form.company"
placeholder="请输入公司"
@click="showMapDialog = true"
readonly
/>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="describe"> <el-form-item label="备注" prop="describe">
<el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" /> <el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
@@ -75,9 +100,9 @@
</div> </div>
<!-- 谷歌地图选点弹窗 --> <!-- 谷歌地图选点弹窗 -->
<el-dialog v-model="showMapDialog" title="选择公司地址" width="800px"> <el-dialog v-model="showMapDialog" title="选择公司地址" width="800px">
<div style="height:400px;position:relative;"> <div style="height: 400px; position: relative">
<!-- <input id="map-search" type="text" placeholder="搜索地点" style="position:absolute;z-index:2;top:10px;left:10px;width:300px;" /> --> <!-- <input id="map-search" type="text" placeholder="搜索地点" style="position:absolute;z-index:2;top:10px;left:10px;width:300px;" /> -->
<div id="google-map" style="width:100%;height:100%;"></div> <div id="google-map" style="width: 100%; height: 100%"></div>
</div> </div>
<template #footer> <template #footer>
<el-button @click="showMapDialog = false">取消</el-button> <el-button @click="showMapDialog = false">取消</el-button>
@@ -110,13 +135,12 @@ const form = ref({
const rules = { const rules = {
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }], channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }], name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
// car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }] // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
} }
const channelOptions = ref<any>() const channelOptions = ref<any>()
const opportunityOptions = ref<any>() const opportunityOptions = ref<any>()
const intentionOptions = ref<any>()
const levelOptions = ref<any>() const levelOptions = ref<any>()
const countryOptions = ref<any>() const countryOptions = ref<any>()
onMounted(() => { onMounted(() => {
@@ -127,35 +151,23 @@ onMounted(() => {
}) })
//渠道 //渠道
const getgetChannel = async () => { const getgetChannel = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getChannel() const res = await CrmService.getChannel()
channelOptions.value = res || [] channelOptions.value = res || []
} catch (error) { channelOptions.value = [] }
} }
//商机 //商机
const getMagnitude = async () => { const getMagnitude = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getMagnitude() const res = await CrmService.getMagnitude()
opportunityOptions.value = res || [] opportunityOptions.value = res || []
} catch (error) { opportunityOptions.value = [] }
} }
//客户等级 //客户等级
const getGrade = async () => { const getGrade = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getGrade() const res = await CrmService.getGrade()
levelOptions.value = res || [] levelOptions.value = res || []
} catch (error) { levelOptions.value = [] }
} }
//国家 //国家
const getarea = async () => { const getarea = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getCountry() const res = await CrmService.getCountry()
countryOptions.value = res || [] countryOptions.value = res || []
} catch (error) { countryOptions.value = [] }
} }
function goBack() { function goBack() {
router.back() router.back()
@@ -188,11 +200,11 @@ function confirmMapSelect() {
let map: any, marker: any, autocomplete: any let map: any, marker: any, autocomplete: any
function initMap() { function initMap() {
const google = (window as any).google; const google = (window as any).google
const input = document.getElementById('map-search') as HTMLInputElement; const input = document.getElementById('map-search') as HTMLInputElement
if (!input) { if (!input) {
setTimeout(initMap, 100); setTimeout(initMap, 100)
return; return
} }
map = new google.maps.Map(document.getElementById('google-map'), { map = new google.maps.Map(document.getElementById('google-map'), {
center: { lat: 39.9042, lng: 116.4074 }, // 默认北京 center: { lat: 39.9042, lng: 116.4074 }, // 默认北京
@@ -225,7 +237,7 @@ function initMap() {
} }
function getAddressByLatLng(latlng: any) { function getAddressByLatLng(latlng: any) {
const google = (window as any).google; const google = (window as any).google
const geocoder = new google.maps.Geocoder() const geocoder = new google.maps.Geocoder()
geocoder.geocode({ location: latlng }, (results: any, status: any) => { geocoder.geocode({ location: latlng }, (results: any, status: any) => {
if (status === 'OK' && results[0]) { if (status === 'OK' && results[0]) {
@@ -242,7 +254,7 @@ watch(showMapDialog, (val) => {
if (val) { if (val) {
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
const google = (window as any).google; const google = (window as any).google
if (!google || !google.maps) { if (!google || !google.maps) {
const script = document.createElement('script') const script = document.createElement('script')
script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I&libraries=places` script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I&libraries=places`
@@ -260,7 +272,6 @@ watch(showMapDialog, (val) => {
<style scoped> <style scoped>
.border { .border {
margin: 0px 10px 0px 40px; margin: 0px 10px 0px 40px;
} }
.submit-row .el-form-item__content { .submit-row .el-form-item__content {
src/views/crmpc/customer/Edit.vue
+1 -1
View File
@@ -107,7 +107,7 @@
const rules = { const rules = {
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }], channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }], name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
// car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }] // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
} }
src/views/crmpc/customer/Followadd.vue
+75 -46
View File
@@ -1,15 +1,17 @@
<template> <template>
<div class="follow-add-page"> <div class="follow-add-page">
<div class="boxshadow pad20"> <div class="boxshadow pad20">
<el-link :underline="false" @click="goBack"> <el-link underline="never" @click="goBack">
<i class="iconfont-sys icon-reverse">&#xe772;</i> 返回 <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
</el-link> </el-link>
<span class="border"></span><span class="edit-title" style="margin-left: 12px;">添加跟进</span> <span class="border"></span><span class="edit-title" style="margin-left: 12px">添加跟进</span>
</div> </div>
<div class="edit-header boxshadow" style="position:relative;"> <div class="edit-header boxshadow" style="position: relative">
<!-- 右上角三角形角标 --> <!-- 右上角三角形角标 -->
<div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div> <div class="corner-tag"
<el-row :gutter="20" style="flex: 1;"> ><span class="corner-text">{{ customerInfo.follow_txt }}</span></div
>
<el-row :gutter="20" style="flex: 1">
<el-col :sm="24" :md="6" :lg="4"> <el-col :sm="24" :md="6" :lg="4">
<span>客户名称：{{ customerInfo.contacts }}</span> <span>客户名称：{{ customerInfo.contacts }}</span>
</el-col> </el-col>
@@ -27,15 +29,25 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-row"> <div class="info-row">
<span class="edit-title">客户分级</span> <span class="edit-title">客户分级</span>
<el-select v-model="customerInfo.grade" placeholder="请选择客户分级" style="width: 120px; margin-left: 16px;" @change="handleGradeChange"> <el-select
<el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" /> v-model="customerInfo.grade"
placeholder="请选择客户分级"
style="width: 120px; margin-left: 16px"
@change="handleGradeChange"
>
<el-option
v-for="item in levelOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</div> </div>
</el-card> </el-card>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-row"> <div class="info-row">
<span class="edit-title">跟进方式</span> <span class="edit-title">跟进方式</span>
<el-radio-group v-model="form.type"> <el-radio-group v-model="form.type">
@@ -44,13 +56,18 @@
</el-radio-group> </el-radio-group>
</div> </div>
</el-card> </el-card>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-row"> <div class="info-row">
<span class="edit-title">跟进时间</span> <span class="edit-title">跟进时间</span>
<el-date-picker v-model="form.firstFollowtime" type="datetime" :value-format="'YYYY-MM-DD HH:mm:ss'" style="width: 200px;" /> <el-date-picker
v-model="form.firstFollowtime"
type="datetime"
:value-format="'YYYY-MM-DD HH:mm:ss'"
style="width: 200px"
/>
</div> </div>
</el-card> </el-card>
<el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;"> <el-card v-if="form.type == '1'" class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-top"> <div class="info-top">
<span class="edit-title">上传跟进截图/聊天截图</span> <span class="edit-title">上传跟进截图/聊天截图</span>
<el-upload <el-upload
@@ -64,20 +81,26 @@
</el-upload> </el-upload>
</div> </div>
</el-card> </el-card>
<el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;"> <el-card v-if="form.type == '1'" class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-top"> <div class="info-top">
<span class="edit-title">跟进描述</span> <span class="edit-title">跟进描述</span>
<el-input v-model="form.audio_text" type="textarea" placeholder="请输入跟进描述" /> <el-input v-model="form.audio_text" type="textarea" placeholder="请输入跟进描述" />
</div> </div>
</el-card> </el-card>
<el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;"> <el-card v-if="form.type == '0'" class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-row"> <div class="info-row">
<span class="edit-title">当前位置</span> <span class="edit-title">当前位置</span>
<el-input v-model="followDesc" type="input" placeholder="请输入当前位置" style="width: 200px;" disabled> <el-input
v-model="followDesc"
type="input"
placeholder="请输入当前位置"
style="width: 200px"
disabled
>
</el-input> </el-input>
</div> </div>
</el-card> </el-card>
<el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;"> <el-card v-if="form.type == '0'" class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-top"> <div class="info-top">
<span class="edit-title">当前位置拍照上传</span> <span class="edit-title">当前位置拍照上传</span>
<el-upload <el-upload
@@ -91,21 +114,22 @@
</el-upload> </el-upload>
</div> </div>
</el-card> </el-card>
<el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;"> <el-card v-if="form.type == '0'" class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-top"> <div class="info-top">
<span class="edit-title">拜访内容</span> <span class="edit-title">拜访内容</span>
<el-input v-model="form.audio_text" type="textarea" placeholder="请输入拜访内容" /> <el-input v-model="form.audio_text" type="textarea" placeholder="请输入拜访内容" />
</div> </div>
</el-card> </el-card>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-top"> <div class="info-top">
<span class="edit-title">备注</span> <span class="edit-title">备注</span>
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
</div> </div>
</el-card> </el-card>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div> <div>
<span class="border" style="margin: 0px 10px 0px 0px;"></span><span class="edit-title">跟进记录</span> <span class="border" style="margin: 0px 10px 0px 0px"></span
><span class="edit-title">跟进记录</span>
</div> </div>
<div class="follow-list"> <div class="follow-list">
<ElScrollbar> <ElScrollbar>
@@ -121,10 +145,21 @@
<div class="timeline-item"> <div class="timeline-item">
<div class="timeline-content-row"> <div class="timeline-content-row">
<div class="timeline-content"> <div class="timeline-content">
<p class="timeline-text">{{item.type_txt}} <span class="timeline-mom">{{ item.created_at }}</span></p> <p class="timeline-text"
<p class="timeline-mom"><span v-if="item.type==1">跟进描述</span><span v-else>拜访内容</span> {{ item.audio_text }}</p> >{{ item.type_txt }}
<span class="timeline-mom">{{ item.created_at }}</span></p
>
<p class="timeline-mom"
><span v-if="item.type == 1">跟进描述</span><span v-else>拜访内容</span>
{{ item.audio_text }}</p
>
</div> </div>
<img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" /> <img
v-if="item.picture_full"
:src="item.picture_full"
class="timeline-img"
alt="图片"
/>
</div> </div>
</div> </div>
</ElTimelineItem> </ElTimelineItem>
@@ -158,7 +193,7 @@
<div class="remind-title">下次跟进提醒设置</div> <div class="remind-title">下次跟进提醒设置</div>
<div class="remind-options"> <div class="remind-options">
<div <div
v-for="(item, idx) in remindOptions.filter(opt => opt.value !== 'custom')" v-for="item in remindOptions.filter((opt) => opt.value !== 'custom')"
:key="item.value" :key="item.value"
:class="['remind-btn', { active: remindValue === item.value }]" :class="['remind-btn', { active: remindValue === item.value }]"
@click="remindValue = item.value" @click="remindValue = item.value"
@@ -170,7 +205,7 @@
v-model="customDate" v-model="customDate"
type="datetime" type="datetime"
placeholder="自定义" placeholder="自定义"
style="width:100%;" style="width: 100%"
CircleClose CircleClose
:disabled-date="disabledPastDate" :disabled-date="disabledPastDate"
/> />
@@ -197,7 +232,7 @@ const route = useRoute()
const customerId = route.query.id const customerId = route.query.id
const levelOptions = ref<any>() const levelOptions = ref<any>()
const followDesc = ref('') const followDesc = ref('')
const activecolor = "#3471FF" const activecolor = '#3471FF'
const successDialogVisible = ref(false) // 控制弹窗显示 const successDialogVisible = ref(false) // 控制弹窗显示
const remindValue = ref('1') const remindValue = ref('1')
@@ -206,7 +241,7 @@ const imageUrl = ref(imageUrl1)
const imageUrls = ref(imageUrl1) const imageUrls = ref(imageUrl1)
function getNowStr() { function getNowStr() {
const d = new Date() const d = new Date()
const pad = (n: any) => n < 10 ? '0' + n : n const pad = (n: any) => (n < 10 ? '0' + n : n)
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}` return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
} }
const form = ref({ const form = ref({
@@ -231,20 +266,13 @@ const customerInfo = ref<CustomerInfo>({})
const followList = ref<CustomerInfo>({}) const followList = ref<CustomerInfo>({})
//获取详情 //获取详情
const getdetilfn = async () => { const getdetilfn = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getcustomerdetail({ id: customerId }) const res = await CrmService.getcustomerdetail({ id: customerId })
customerInfo.value = res customerInfo.value = res
console.log(res)
} catch (error) { }
} }
//客户等级 //客户等级
const getGrade = async () => { const getGrade = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getGrade() const res = await CrmService.getGrade()
levelOptions.value = res || [] levelOptions.value = res || []
} catch (error) { levelOptions.value = [] }
} }
onMounted(async () => { onMounted(async () => {
await getGrade() await getGrade()
@@ -255,22 +283,20 @@ onMounted(async () => {
//修改等级 //修改等级
function handleGradeChange(newGrade: number) { function handleGradeChange(newGrade: number) {
if (!customerId) return if (!customerId) return
CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => { CrmService.customergrade({ id: customerId, grade: newGrade })
.then((res) => {
ElMessage.success(res?.message || '修改成功') ElMessage.success(res?.message || '修改成功')
}).catch(() => { })
.catch(() => {
ElMessage.error('修改失败') ElMessage.error('修改失败')
}) })
} }
//跟进记录getfollowlist //跟进记录getfollowlist
const getfollowlist = async () => { const getfollowlist = async () => {
try {
const res = await CrmService.getfollowlist({ customer_id: route.query.id }) const res = await CrmService.getfollowlist({ customer_id: route.query.id })
followList.value = res || [] followList.value = res || []
} catch (error) { followList.value = [] }
} }
const remindOptions = [ const remindOptions = [
{ label: '1天后', value: '1' }, { label: '1天后', value: '1' },
{ label: '3天后', value: '3' }, { label: '3天后', value: '3' },
@@ -298,7 +324,7 @@ const handleSuccessConfirm = async () =>{
successDialogVisible.value = false successDialogVisible.value = false
setTimeout(() => { setTimeout(() => {
router.push('/crmpc/customer') router.push('/crmpc/customer')
}, 1000); }, 1000)
} }
function goBack() { function goBack() {
router.back() router.back()
@@ -332,10 +358,12 @@ function getCurrentLocation() {
followDesc.value = `纬度: ${latitude}, 经度: ${longitude}` followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
} }
} catch (e) { } catch (e) {
console.error('获取地址失败:', e)
followDesc.value = `纬度: ${latitude}, 经度: ${longitude}` followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
} }
}, },
(error) => { (error) => {
console.log('定位失败:', error)
followDesc.value = '无法获取当前位置' followDesc.value = '无法获取当前位置'
} }
) )
@@ -363,7 +391,8 @@ function handleUploadSuccess1(response: any) {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.avatar,.timeline-img{ .avatar,
.timeline-img {
width: 80px; width: 80px;
} }
.border { .border {
@@ -426,7 +455,7 @@ function handleUploadSuccess1(response: any) {
right: -9px; right: -9px;
width: 90px; width: 90px;
height: 75px; height: 75px;
background: #3471FF; background: #3471ff;
clip-path: polygon(100% 0, 0 0, 100% 100%); clip-path: polygon(100% 0, 0 0, 100% 100%);
border-top-right-radius: 12px; border-top-right-radius: 12px;
} }
@@ -489,7 +518,7 @@ function handleUploadSuccess1(response: any) {
} }
.remind-btn { .remind-btn {
background: #f4f7fe; background: #f4f7fe;
color: #3471FF; color: #3471ff;
border-radius: 8px; border-radius: 8px;
padding: 6px 18px; padding: 6px 18px;
cursor: pointer; cursor: pointer;
@@ -501,9 +530,9 @@ function handleUploadSuccess1(response: any) {
flex: 1; flex: 1;
} }
.remind-btn.active { .remind-btn.active {
background: #3471FF; background: #3471ff;
color: #fff; color: #fff;
border: 1px solid #3471FF; border: 1px solid #3471ff;
} }
.confirm-btn { .confirm-btn {
width: 100%; width: 100%;
src/views/crmpc/customer/Show.vue
+63 -38
View File
@@ -1,16 +1,18 @@
<template> <template>
<div class="customer-edit-page"> <div class="customer-edit-page">
<div class="boxshadow pad20"> <div class="boxshadow pad20">
<el-link :underline="false" @click="goBack"> <el-link underline="never" @click="goBack">
<i class="iconfont-sys icon-reverse">&#xe772;</i> 返回 <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
</el-link> </el-link>
</div> </div>
<div class="edit-header boxshadow pad20" style="position:relative;"> <div class="edit-header boxshadow pad20" style="position: relative">
<span class="border"></span><span class="edit-title">客户资料</span> <span class="border"></span><span class="edit-title">客户资料</span>
<!-- 右上角三角形角标 --> <!-- 右上角三角形角标 -->
<div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div> <div class="corner-tag"
><span class="corner-text">{{ customerInfo.follow_txt }}</span></div
>
<div class="info-row-bar"> <div class="info-row-bar">
<el-row :gutter="20" style="flex: 1;"> <el-row :gutter="20" style="flex: 1">
<el-col :sm="24" :md="6" :lg="4"> <el-col :sm="24" :md="6" :lg="4">
<span>客户名称：{{ customerInfo.contacts }}</span> <span>客户名称：{{ customerInfo.contacts }}</span>
</el-col> </el-col>
@@ -27,33 +29,51 @@
<span>客户商机：{{ customerInfo.magnitude_txt }}</span> <span>客户商机：{{ customerInfo.magnitude_txt }}</span>
</el-col> </el-col>
</el-row> </el-row>
<el-button @click="goEdit" type="primary" class="edit-btn" size="small"><i class="iconfont-sys"> &#xe6bf;</i> 编辑资料</el-button> <el-button @click="goEdit" type="primary" class="edit-btn" size="small"
><i class="iconfont-sys"> &#xe6bf;</i> 编辑资料</el-button
>
</div> </div>
</div> </div>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div class=""> <div class="">
<span class="border"></span><span class="edit-title">客户画像</span> <span class="border"></span><span class="edit-title">客户画像</span>
<el-button @click="addtag" type="primary" size="small" style="float: right;">添加标签</el-button> <el-button @click="addtag" type="primary" size="small" style="float: right"
>添加标签</el-button
>
</div> </div>
<div class="tag-list"> <div class="tag-list">
<el-tag type="primary" v-for="(item, index) in customerInfo.tags" :key="index">{{item.name}}</el-tag> <el-tag type="primary" v-for="(item, index) in customerInfo.tags" :key="index">{{
item.name
}}</el-tag>
</div> </div>
</el-card> </el-card>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-row"> <div class="info-row">
<span class="edit-title">客户分级</span> <span class="edit-title">客户分级</span>
<el-select v-model="customerInfo.grade" placeholder="请选择客户分级" style="width: 120px; margin-left: 16px;" @change="handleGradeChange"> <el-select
<el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" /> v-model="customerInfo.grade"
placeholder="请选择客户分级"
style="width: 120px; margin-left: 16px"
@change="handleGradeChange"
>
<el-option
v-for="item in levelOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</div> </div>
</el-card> </el-card>
<el-card class="info-card" shadow="never" style="margin-top: 16px;"> <el-card class="info-card" shadow="never" style="margin-top: 16px">
<div class="info-row"> <div class="info-row">
<span class="edit-title">跟进记录</span> <span class="edit-title">跟进记录</span>
<el-button type="primary" size="small" style="float: right;" @click="goAddFollow">+ 添加跟进</el-button> <el-button type="primary" size="small" style="float: right" @click="goAddFollow"
>+ 添加跟进</el-button
>
</div> </div>
<div class="follow-list"> <div class="follow-list">
<ElScrollbar> <ElScrollbar>
@@ -69,10 +89,21 @@
<div class="timeline-item"> <div class="timeline-item">
<div class="timeline-content-row"> <div class="timeline-content-row">
<div class="timeline-content"> <div class="timeline-content">
<p class="timeline-text">{{item.type_txt}} <span class="timeline-mom">{{ item.created_at }}</span></p> <p class="timeline-text"
<p class="timeline-mom"><span v-if="item.type==1">跟进描述</span><span v-else>拜访内容</span> {{ item.audio_text }}</p> >{{ item.type_txt }}
<span class="timeline-mom">{{ item.created_at }}</span></p
>
<p class="timeline-mom"
><span v-if="item.type == 1">跟进描述</span><span v-else>拜访内容</span>
{{ item.audio_text }}</p
>
</div> </div>
<img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" /> <img
v-if="item.picture_full"
:src="item.picture_full"
class="timeline-img"
alt="图片"
/>
</div> </div>
</div> </div>
</ElTimelineItem> </ElTimelineItem>
@@ -97,12 +128,12 @@
:show-close="false" :show-close="false"
> >
<div class="tag-dialog-scroll"> <div class="tag-dialog-scroll">
<div v-for="group in tagGroups" :key="group.name" style="margin-bottom: 12px;"> <div v-for="group in tagGroups" :key="group.name" style="margin-bottom: 12px">
<div style="font-weight: bold; margin-bottom: 6px;">{{ group.name }}</div> <div style="font-weight: bold; margin-bottom: 6px">{{ group.name }}</div>
<div style="display: flex; flex-wrap: wrap; gap: 8px;"> <div style="display: flex; flex-wrap: wrap; gap: 8px">
<div <div
class="col4 tagitem" class="col4 tagitem"
style="cursor: pointer;" style="cursor: pointer"
v-for="(item1, index1) in group.tags" v-for="(item1, index1) in group.tags"
:class="{ 'tagactive': activeMap[group.id] === item1.id }" :class="{ 'tagactive': activeMap[group.id] === item1.id }"
@click="tagSelect(item1)" @click="tagSelect(item1)"
@@ -132,10 +163,8 @@ import { ElMessage } from 'element-plus'
const TIMELINE_PLACEMENT = 'top' const TIMELINE_PLACEMENT = 'top'
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const customerLevel = ref('A') const activecolor = '#3471ff'
const activecolor = "#3471FF"
const tagDialogVisible = ref(false) const tagDialogVisible = ref(false)
const selectedTags = ref<string[]>([])
const customerId = route.query.id const customerId = route.query.id
const levelOptions = ref<any>() const levelOptions = ref<any>()
const tagGroups = ref<any[]>([]) const tagGroups = ref<any[]>([])
@@ -149,28 +178,19 @@ interface CustomerInfo {
const customerInfo = ref<CustomerInfo>({}) const customerInfo = ref<CustomerInfo>({})
//获取详情 //获取详情
const getdetilfn = async () => { const getdetilfn = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getcustomerdetail({ id: customerId }) const res = await CrmService.getcustomerdetail({ id: customerId })
customerInfo.value = res customerInfo.value = res
console.log(res)
} catch (error) { }
} }
//客户等级 //客户等级
const getGrade = async () => { const getGrade = async () => {
try {
// 这里调用获取品牌列表的接口
const res = await CrmService.getGrade() const res = await CrmService.getGrade()
levelOptions.value = res || [] levelOptions.value = res || []
} catch (error) { levelOptions.value = [] }
} }
//跟进记录getfollowlist //跟进记录getfollowlist
const followList = ref<CustomerInfo>({}) const followList = ref<CustomerInfo>({})
const getfollowlist = async () => { const getfollowlist = async () => {
try {
const res = await CrmService.getfollowlist({ customer_id: route.query.id }) const res = await CrmService.getfollowlist({ customer_id: route.query.id })
followList.value = res || [] followList.value = res || []
} catch (error) { followList.value = [] }
} }
onMounted(async () => { onMounted(async () => {
await getGrade() await getGrade()
@@ -184,12 +204,11 @@ function addtag(){
tagGrouplistfn() tagGrouplistfn()
} }
const tagGrouplistfn = async () => { const tagGrouplistfn = async () => {
try {
const res = await CrmService.tagGrouplist({}) const res = await CrmService.tagGrouplist({})
tagGroups.value = res || [] tagGroups.value = res || []
// 回显选中 // 回显选中
if (customerInfo.value && Array.isArray(customerInfo.value.tags)) { if (customerInfo.value && Array.isArray(customerInfo.value.tags)) {
tagGroups.value.forEach(group => { tagGroups.value.forEach((group) => {
if (group.tags && Array.isArray(group.tags)) { if (group.tags && Array.isArray(group.tags)) {
const matched = group.tags.find((item: any) => const matched = group.tags.find((item: any) =>
customerInfo.value.tags.some((t: any) => t.id === item.id) customerInfo.value.tags.some((t: any) => t.id === item.id)
@@ -200,7 +219,6 @@ const tagGrouplistfn = async () => {
} }
}) })
} }
} catch (error) { }
} }
// 4. 点击标签 // 4. 点击标签
@@ -217,11 +235,16 @@ async function tagSelect(item: { group_id: string | number; id: number }) {
tag_id = String(item.id) tag_id = String(item.id)
} }
try { try {
const res = await CrmService.tagGroupupdatePivot({ customer_id: customerId, group_id: key, tag_id }) const res = await CrmService.tagGroupupdatePivot({
customer_id: customerId,
group_id: key,
tag_id
})
ElMessage.success(res?.message || '操作成功') ElMessage.success(res?.message || '操作成功')
await getdetilfn() await getdetilfn()
await tagGrouplistfn() await tagGrouplistfn()
} catch (e) { } catch (e) {
console.error(e)
ElMessage.error('操作失败') ElMessage.error('操作失败')
} }
} }
@@ -264,9 +287,11 @@ function goBack() {
//修改等级 //修改等级
function handleGradeChange(newGrade: number) { function handleGradeChange(newGrade: number) {
if (!customerId) return if (!customerId) return
CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => { CrmService.customergrade({ id: customerId, grade: newGrade })
.then((res) => {
ElMessage.success(res?.message || '修改成功') ElMessage.success(res?.message || '修改成功')
}).catch(() => { })
.catch(() => {
ElMessage.error('修改失败') ElMessage.error('修改失败')
}) })
} }