crm 接口对接
This commit is contained in:
浅念
+57
@@ -59,3 +59,60 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.boxshadow {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
|
||||
background: var(--art-main-bg-color);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.border{
|
||||
width: 6px;
|
||||
height: 22px;
|
||||
border-radius: 3px;
|
||||
background: #3471FF;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.el-dialog {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-dialog::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background: linear-gradient(180deg, #E4ECFF 0%, #FFFFFF 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.el-dialog__header,
|
||||
.el-dialog__body,
|
||||
.el-dialog__footer {
|
||||
background: transparent !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.el-dialog__header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.el-dialog__title{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn{
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
import request from '@/utils/http'
|
||||
|
||||
export class CrmService {
|
||||
// 客户管理
|
||||
//客户列表
|
||||
static getcustomerList(params: Api.Common.PaginatingParams) {
|
||||
return request.get<Api.Crm.CrmListData>({
|
||||
url: '/crm/customer/list',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取客户列表详情
|
||||
static getcustomerdetail(params: any) {
|
||||
return request.get<Api.Crm.CrmListData>({
|
||||
url: '/crm/customer/detail',
|
||||
params
|
||||
})
|
||||
}
|
||||
//添加客户
|
||||
static customerAdd(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/customer/add',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
//删除客户
|
||||
static getcustomerdelete(params: any) {
|
||||
return request.get<Api.Crm.CrmListData>({
|
||||
url: '/crm/customer/delete',
|
||||
params
|
||||
})
|
||||
}
|
||||
//切换等级crm/customer/grade
|
||||
static customergrade(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/customer/grade',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
|
||||
//渠道下拉
|
||||
static getChannel() {
|
||||
return request.get<Api.Brand.BrandInfo>({
|
||||
url: '/crm/customer/getChannel'
|
||||
})
|
||||
}
|
||||
//国家下拉
|
||||
static getCountry() {
|
||||
return request.get<Api.Brand.BrandInfo>({
|
||||
url: '/crm/customer/getCountry'
|
||||
})
|
||||
}
|
||||
//商机
|
||||
static getMagnitude() {
|
||||
return request.get<Api.Brand.BrandInfo>({
|
||||
url: '/crm/customer/getMagnitude'
|
||||
})
|
||||
}
|
||||
//等级
|
||||
static getGrade() {
|
||||
return request.get<Api.Brand.BrandInfo>({
|
||||
url: '/crm/customer/getGrade'
|
||||
})
|
||||
}
|
||||
//标签列表/crm/tagGroup/list
|
||||
static tagGrouplist() {
|
||||
return request.get<any>({
|
||||
url: '/crm/tagGroup/list'
|
||||
})
|
||||
}
|
||||
//更新客户标签 /crm/tagGroup/updatePivot
|
||||
static tagGroupupdatePivot(params: any) {
|
||||
return request.get<Api.Work.AddResponse>({
|
||||
url: '/crm/tagGroup/updatePivot',
|
||||
params
|
||||
})
|
||||
}
|
||||
//跟进列表crm/follow/list
|
||||
static getfollowlist(params: any) {
|
||||
return request.get<any>({
|
||||
url: '/crm/follow/list',
|
||||
params
|
||||
})
|
||||
}
|
||||
//添加跟进 /crm/follow/add
|
||||
static followAdd(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/follow/add',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
//待跟进 /crm/customer/waitFollow
|
||||
static waitFollow(params: any) {
|
||||
return request.get<any>({
|
||||
url: '/crm/customer/waitFollow',
|
||||
params
|
||||
})
|
||||
}
|
||||
//设置下次跟进时间 followNext crm/customer/followNext
|
||||
static followNext(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/customer/followNext',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
|
||||
//crm 个人信息修改
|
||||
static crmuseredit(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/user/edit',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
//领取公海crm/customer/claim
|
||||
static customerclaim(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/customer/claim',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
//客户回收 恢复 /crm/customer/restore
|
||||
static customerrestore(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/customer/restore',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
//crm 获取用户信息 common/user/get
|
||||
static userget() {
|
||||
return request.get<any>({
|
||||
url: '/common/user/get'
|
||||
})
|
||||
}
|
||||
//修改密码 crm/user/savePassword
|
||||
static savePassword(params: any) {
|
||||
return request.post<Api.Work.AddResponse>({
|
||||
url: '/crm/user/savePassword',
|
||||
params
|
||||
// showErrorMessage: false // 不显示错误消息
|
||||
})
|
||||
}
|
||||
//首页统计
|
||||
static homestatistics(params: any) {
|
||||
return request.get<any>({
|
||||
url: '/crm/customer/statistics',
|
||||
params
|
||||
})
|
||||
}
|
||||
}
|
||||
+25
-2
@@ -5,7 +5,28 @@ import { useUserStore } from '@/store/modules/user'
|
||||
interface MenuResponse {
|
||||
menuList: AppRouteRecord[]
|
||||
}
|
||||
|
||||
// 合并方法
|
||||
function mergeRoutes(dynamicRoutes: AppRouteRecord[] = [], staticRoutes: AppRouteRecord[] = []): AppRouteRecord[] {
|
||||
// 深度合并逻辑
|
||||
const merged = [...staticRoutes]
|
||||
|
||||
dynamicRoutes.forEach(dynamicRoute => {
|
||||
const existingIndex = merged.findIndex(r => r.path === dynamicRoute.path)
|
||||
if (existingIndex >= 0) {
|
||||
// 合并children（如果存在）
|
||||
if (dynamicRoute.children) {
|
||||
merged[existingIndex].children = [
|
||||
...(merged[existingIndex].children || []),
|
||||
...dynamicRoute.children
|
||||
]
|
||||
}
|
||||
} else {
|
||||
merged.push(dynamicRoute)
|
||||
}
|
||||
})
|
||||
|
||||
return merged
|
||||
}
|
||||
// 菜单接口
|
||||
export const menuService = {
|
||||
async getMenuList(delay = 300): Promise<MenuResponse> {
|
||||
@@ -17,6 +38,8 @@ export const menuService = {
|
||||
}
|
||||
// 模拟接口返回的菜单数据
|
||||
const menuData = userStore.info.menu
|
||||
// 2. 合并静态菜单
|
||||
const finalRoutes = mergeRoutes(menuData, asyncRoutes)
|
||||
// 验证菜单数据
|
||||
if (!menuData || !Array.isArray(menuData) || menuData.length === 0) {
|
||||
ElMessage.error('暂无系统菜单权限')
|
||||
@@ -24,7 +47,7 @@ export const menuService = {
|
||||
}
|
||||
|
||||
// 处理菜单数据
|
||||
const menuList = menuData.map((route: any) => menuDataToRouter(route))
|
||||
const menuList = finalRoutes.map((route: any) => menuDataToRouter(route))
|
||||
|
||||
// 验证处理后的菜单列表
|
||||
if (!menuList || menuList.length === 0) {
|
||||
|
||||
@@ -156,6 +156,14 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<ul class="user-menu">
|
||||
<li @click="goPage('/system/user-center')">
|
||||
<i class="menu-icon iconfont-sys"></i>
|
||||
<span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>
|
||||
</li>
|
||||
<li @click="goPage('/crmpc/recycle')">
|
||||
<i class="menu-icon iconfont-sys"></i>
|
||||
<span class="menu-txt">回收站</span>
|
||||
</li>
|
||||
<!-- <li @click="goPage('/system/user-center')">
|
||||
<i class="menu-icon iconfont-sys"></i>
|
||||
<span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>
|
||||
|
||||
@@ -0,0 +1,363 @@
|
||||
import { RoutesAlias } from '../routesAlias'
|
||||
import { AppRouteRecord } from '@/types/router'
|
||||
import { WEB_LINKS } from '@/utils/constants'
|
||||
|
||||
/**
|
||||
* 菜单列表、异步路由
|
||||
*
|
||||
* 支持两种模式:
|
||||
* 1. 前端静态配置 - 直接使用本文件中定义的路由配置
|
||||
* 2. 后端动态配置 - 后端返回菜单数据，前端解析生成路由
|
||||
*
|
||||
* 菜单标题（title）:
|
||||
* 可以是 i18n 的 key，也可以是字符串，比如：'用户列表'
|
||||
*/
|
||||
export const asyncRoutes: AppRouteRecord[] = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
path: '/dashboard',
|
||||
component: RoutesAlias.Home,
|
||||
meta: {
|
||||
title: 'menus.dashboard.title',
|
||||
icon: ''
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'console',
|
||||
name: 'Console',
|
||||
component: RoutesAlias.Dashboard,
|
||||
meta: {
|
||||
title: 'menus.dashboard.console',
|
||||
keepAlive: false,
|
||||
fixedTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'analysis',
|
||||
name: 'Analysis',
|
||||
component: RoutesAlias.Analysis,
|
||||
meta: {
|
||||
title: 'menus.dashboard.analysis',
|
||||
keepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'ecommerce',
|
||||
name: 'Ecommerce',
|
||||
component: RoutesAlias.Ecommerce,
|
||||
meta: {
|
||||
title: 'menus.dashboard.ecommerce',
|
||||
keepAlive: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/work',
|
||||
name: 'Work',
|
||||
component: RoutesAlias.Home,
|
||||
// component:'/work',
|
||||
meta: {
|
||||
title: 'menus.work.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'order',
|
||||
name: '工单列表',
|
||||
component: RoutesAlias.Order,
|
||||
meta: {
|
||||
title: 'menus.work.order',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'type',
|
||||
name: 'Type',
|
||||
component: RoutesAlias.OrderType,
|
||||
meta: {
|
||||
title: 'menus.work.type',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
name: 'System',
|
||||
component: RoutesAlias.Home,
|
||||
meta: {
|
||||
title: 'menus.system.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'user',
|
||||
name: 'User',
|
||||
component: RoutesAlias.User,
|
||||
meta: {
|
||||
title: 'menus.system.user',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
name: 'Role',
|
||||
component: RoutesAlias.Role,
|
||||
meta: {
|
||||
title: 'menus.system.role',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'user-center',
|
||||
name: 'UserCenter',
|
||||
component: RoutesAlias.UserCenter,
|
||||
meta: {
|
||||
title: 'menus.system.userCenter',
|
||||
isHide: true,
|
||||
keepAlive: true,
|
||||
isHideTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'menu',
|
||||
name: 'Menus',
|
||||
component: RoutesAlias.Menu,
|
||||
meta: {
|
||||
title: 'menus.system.menu',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER'],
|
||||
authList: [
|
||||
{
|
||||
title: '新增',
|
||||
auth_mark: 'add'
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
auth_mark: 'edit'
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
auth_mark: 'delete'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'nested',
|
||||
name: 'Nested',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.nested',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1',
|
||||
name: 'NestedMenu1',
|
||||
component: RoutesAlias.NestedMenu1,
|
||||
meta: {
|
||||
title: 'menus.system.menu1',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'menu2',
|
||||
name: 'NestedMenu2',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.menu2',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu2-1',
|
||||
name: 'NestedMenu2-1',
|
||||
component: RoutesAlias.NestedMenu21,
|
||||
meta: {
|
||||
title: 'menus.system.menu21',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu3',
|
||||
name: 'NestedMenu3',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.menu3',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu3-1',
|
||||
name: 'NestedMenu3-1',
|
||||
component: RoutesAlias.NestedMenu31,
|
||||
meta: {
|
||||
title: 'menus.system.menu31',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'menu3-2',
|
||||
name: 'NestedMenu3-2',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.menu32',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu3-2-1',
|
||||
name: 'NestedMenu3-2-1',
|
||||
component: RoutesAlias.NestedMenu321,
|
||||
meta: {
|
||||
title: 'menus.system.menu321',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/car',
|
||||
name: 'Car',
|
||||
component: RoutesAlias.Home,
|
||||
meta: {
|
||||
title: 'menus.car.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'usedcar',
|
||||
name: 'Usedcar',
|
||||
component: RoutesAlias.Usedcar,
|
||||
meta: {
|
||||
title: 'menus.car.used',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'newcar',
|
||||
name: 'Newcar',
|
||||
component: RoutesAlias.Newcar,
|
||||
meta: {
|
||||
title: 'menus.car.newcar',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/article',
|
||||
name: 'Article',
|
||||
component: RoutesAlias.Home,
|
||||
meta: {
|
||||
title: 'menus.article.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'article-list',
|
||||
name: 'ArticleList',
|
||||
component: RoutesAlias.ArticleList,
|
||||
meta: {
|
||||
title: 'menus.article.articleList',
|
||||
keepAlive: true,
|
||||
authList: [
|
||||
{
|
||||
title: '新增',
|
||||
auth_mark: 'add'
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
auth_mark: 'edit'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
path: 'detail',
|
||||
name: 'ArticleDetail',
|
||||
component: RoutesAlias.ArticleDetail,
|
||||
meta: {
|
||||
title: 'menus.article.articleDetail',
|
||||
isHide: true,
|
||||
keepAlive: true,
|
||||
activePath: '/article/article-list' // 激活菜单路径
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'comment',
|
||||
name: 'ArticleComment',
|
||||
component: RoutesAlias.Comment,
|
||||
meta: {
|
||||
title: 'menus.article.comment',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'publish',
|
||||
name: 'ArticlePublish',
|
||||
component: RoutesAlias.ArticlePublish,
|
||||
meta: {
|
||||
title: 'menus.article.articlePublish',
|
||||
keepAlive: true,
|
||||
authList: [
|
||||
{
|
||||
title: '发布',
|
||||
auth_mark: 'article/article-publish/add'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/safeguard',
|
||||
name: 'Safeguard',
|
||||
component: RoutesAlias.Home,
|
||||
meta: {
|
||||
title: 'menus.safeguard.title',
|
||||
icon: '',
|
||||
keepAlive: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'server',
|
||||
name: 'SafeguardServer',
|
||||
component: RoutesAlias.Server,
|
||||
meta: {
|
||||
title: 'menus.safeguard.server',
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -14,350 +14,52 @@ import { WEB_LINKS } from '@/utils/constants'
|
||||
*/
|
||||
export const asyncRoutes: AppRouteRecord[] = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
path: '/dashboard',
|
||||
component: RoutesAlias.Home,
|
||||
path: '/crmpc/customer/add',
|
||||
name: 'CrmpcustomerAdd',
|
||||
component: RoutesAlias.CrmpcustomerAdd,
|
||||
meta: {
|
||||
title: 'menus.dashboard.title',
|
||||
icon: ''
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'console',
|
||||
name: 'Console',
|
||||
component: RoutesAlias.Dashboard,
|
||||
meta: {
|
||||
title: 'menus.dashboard.console',
|
||||
keepAlive: false,
|
||||
fixedTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'analysis',
|
||||
name: 'Analysis',
|
||||
component: RoutesAlias.Analysis,
|
||||
meta: {
|
||||
title: 'menus.dashboard.analysis',
|
||||
keepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'ecommerce',
|
||||
name: 'Ecommerce',
|
||||
component: RoutesAlias.Ecommerce,
|
||||
meta: {
|
||||
title: 'menus.dashboard.ecommerce',
|
||||
keepAlive: false
|
||||
}
|
||||
}
|
||||
]
|
||||
title: '新增客户资料',
|
||||
isHide: true,
|
||||
// isHideTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/work',
|
||||
name: 'Work',
|
||||
component: RoutesAlias.Home,
|
||||
// component:'/work',
|
||||
path: '/crmpc/customer/show',
|
||||
name: 'CrmpcustomerShow',
|
||||
component: RoutesAlias.CrmpcustomerShow,
|
||||
meta: {
|
||||
title: 'menus.work.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'order',
|
||||
name: '工单列表',
|
||||
component: RoutesAlias.Order,
|
||||
meta: {
|
||||
title: 'menus.work.order',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'type',
|
||||
name: 'Type',
|
||||
component: RoutesAlias.OrderType,
|
||||
meta: {
|
||||
title: 'menus.work.type',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
}
|
||||
]
|
||||
title: '客户资料',
|
||||
isHide: true,
|
||||
// isHideTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
name: 'System',
|
||||
component: RoutesAlias.Home,
|
||||
path: '/crmpc/customer/edit',
|
||||
name: 'CrmpcustomerEdit',
|
||||
component: RoutesAlias.CrmpcustomerEdit,
|
||||
meta: {
|
||||
title: 'menus.system.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'user',
|
||||
name: 'User',
|
||||
component: RoutesAlias.User,
|
||||
meta: {
|
||||
title: 'menus.system.user',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
name: 'Role',
|
||||
component: RoutesAlias.Role,
|
||||
meta: {
|
||||
title: 'menus.system.role',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'user-center',
|
||||
name: 'UserCenter',
|
||||
component: RoutesAlias.UserCenter,
|
||||
meta: {
|
||||
title: 'menus.system.userCenter',
|
||||
isHide: true,
|
||||
keepAlive: true,
|
||||
isHideTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'menu',
|
||||
name: 'Menus',
|
||||
component: RoutesAlias.Menu,
|
||||
meta: {
|
||||
title: 'menus.system.menu',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER'],
|
||||
authList: [
|
||||
{
|
||||
title: '新增',
|
||||
auth_mark: 'add'
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
auth_mark: 'edit'
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
auth_mark: 'delete'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'nested',
|
||||
name: 'Nested',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.nested',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1',
|
||||
name: 'NestedMenu1',
|
||||
component: RoutesAlias.NestedMenu1,
|
||||
meta: {
|
||||
title: 'menus.system.menu1',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'menu2',
|
||||
name: 'NestedMenu2',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.menu2',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu2-1',
|
||||
name: 'NestedMenu2-1',
|
||||
component: RoutesAlias.NestedMenu21,
|
||||
meta: {
|
||||
title: 'menus.system.menu21',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu3',
|
||||
name: 'NestedMenu3',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.menu3',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu3-1',
|
||||
name: 'NestedMenu3-1',
|
||||
component: RoutesAlias.NestedMenu31,
|
||||
meta: {
|
||||
title: 'menus.system.menu31',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'menu3-2',
|
||||
name: 'NestedMenu3-2',
|
||||
component: '',
|
||||
meta: {
|
||||
title: 'menus.system.menu32',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu3-2-1',
|
||||
name: 'NestedMenu3-2-1',
|
||||
component: RoutesAlias.NestedMenu321,
|
||||
meta: {
|
||||
title: 'menus.system.menu321',
|
||||
icon: '',
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
title: '编辑客户资料',
|
||||
isHide: true,
|
||||
// isHideTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/car',
|
||||
name: 'Car',
|
||||
component: RoutesAlias.Home,
|
||||
path: '/crmpc/customer/followadd',
|
||||
name: 'CustomerFollowAdd',
|
||||
component: RoutesAlias.CrmpcustomerFollowadd,
|
||||
meta: {
|
||||
title: 'menus.car.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'usedcar',
|
||||
name: 'Usedcar',
|
||||
component: RoutesAlias.Usedcar,
|
||||
meta: {
|
||||
title: 'menus.car.used',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'newcar',
|
||||
name: 'Newcar',
|
||||
component: RoutesAlias.Newcar,
|
||||
meta: {
|
||||
title: 'menus.car.newcar',
|
||||
keepAlive: true,
|
||||
roles: ['R_SUPER']
|
||||
}
|
||||
}
|
||||
]
|
||||
title: '添加跟进',
|
||||
isHide: true,
|
||||
// isHideTab: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/article',
|
||||
name: 'Article',
|
||||
component: RoutesAlias.Home,
|
||||
path: '/crmpc/recycle',
|
||||
name: 'Recycle',
|
||||
component: RoutesAlias.recycle,
|
||||
meta: {
|
||||
title: 'menus.article.title',
|
||||
icon: '',
|
||||
roles: ['R_SUPER', 'R_ADMIN']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'article-list',
|
||||
name: 'ArticleList',
|
||||
component: RoutesAlias.ArticleList,
|
||||
meta: {
|
||||
title: 'menus.article.articleList',
|
||||
keepAlive: true,
|
||||
authList: [
|
||||
{
|
||||
title: '新增',
|
||||
auth_mark: 'add'
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
auth_mark: 'edit'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
path: 'detail',
|
||||
name: 'ArticleDetail',
|
||||
component: RoutesAlias.ArticleDetail,
|
||||
meta: {
|
||||
title: 'menus.article.articleDetail',
|
||||
isHide: true,
|
||||
keepAlive: true,
|
||||
activePath: '/article/article-list' // 激活菜单路径
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'comment',
|
||||
name: 'ArticleComment',
|
||||
component: RoutesAlias.Comment,
|
||||
meta: {
|
||||
title: 'menus.article.comment',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'publish',
|
||||
name: 'ArticlePublish',
|
||||
component: RoutesAlias.ArticlePublish,
|
||||
meta: {
|
||||
title: 'menus.article.articlePublish',
|
||||
keepAlive: true,
|
||||
authList: [
|
||||
{
|
||||
title: '发布',
|
||||
auth_mark: 'article/article-publish/add'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
title: '回收站',
|
||||
isHide: true
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
path: '/safeguard',
|
||||
name: 'Safeguard',
|
||||
component: RoutesAlias.Home,
|
||||
meta: {
|
||||
title: 'menus.safeguard.title',
|
||||
icon: '',
|
||||
keepAlive: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'server',
|
||||
name: 'SafeguardServer',
|
||||
component: RoutesAlias.Server,
|
||||
meta: {
|
||||
title: 'menus.safeguard.server',
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -42,7 +42,6 @@ export enum RoutesAlias {
|
||||
Role = '/system/role', // 角色
|
||||
Usedcar = '/car/usedcar', // 角色
|
||||
Newcar = '/car/newcar', // 角色
|
||||
UserCenter = '/system/user-center', // 用户中心
|
||||
Menu = '/system/menu', // 菜单
|
||||
NestedMenu1 = '/system/nested/menu1', // 嵌套菜单1
|
||||
NestedMenu21 = '/system/nested/menu2', // 嵌套菜单2-1
|
||||
@@ -51,7 +50,16 @@ export enum RoutesAlias {
|
||||
Server = '/safeguard/server', // 服务器
|
||||
ChangeLog = '/change/log', // 更新日志
|
||||
Order = '/work/order', // 工单
|
||||
OrderType = '/work/type' // 工单
|
||||
OrderType = '/work/type', // 工单
|
||||
Crmpchome = '/crmpc/home', // crm首页
|
||||
Crmphighseas = '/crmpc/highseas', // crm公海
|
||||
Crmpcustomer = '/crmpc/customer', // crm客户
|
||||
CrmpcustomerAdd = '/crmpc/customer/Add',//客户添加
|
||||
CrmpcustomerEdit = '/crmpc/customer/Edit',//客户编辑
|
||||
CrmpcustomerShow = '/crmpc/customer/Show',//客户详情
|
||||
CrmpcustomerFollowadd = '/crmpc/customer/Followadd',//添加跟进
|
||||
recycle = '/crmpc/recycle',//回收站
|
||||
UserCenter = '/system/user-center', // 用户中心
|
||||
}
|
||||
|
||||
// 主页路由
|
||||
|
||||
Vendored
+14
@@ -157,4 +157,18 @@ declare namespace Api {
|
||||
total: number
|
||||
}
|
||||
}
|
||||
namespace Crm {
|
||||
/** 信息 */
|
||||
interface CrmInfo {
|
||||
data: never[]
|
||||
}
|
||||
|
||||
/** 列表数据 */
|
||||
interface CrmListData {
|
||||
data: CrmInfo[]
|
||||
current: number
|
||||
size: number
|
||||
total: number
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="customer-form-page">
|
||||
<div class="form-header">
|
||||
<el-link :underline="false" @click="goBack">
|
||||
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||
</el-link>
|
||||
<span class="border"></span><span class="form-title">新增客户资料</span>
|
||||
</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
class="customer-form"
|
||||
label-position="right"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="客户渠道" prop="channel_id">
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户商机" prop="magnitude">
|
||||
<el-select v-model="form.magnitude" placeholder="请选择客户商机">
|
||||
<el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名称" prop="contacts">
|
||||
<el-input v-model="form.contacts" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户性别" prop="sex" >
|
||||
<el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;">
|
||||
<el-radio label="0">未知</el-radio>
|
||||
<el-radio label="1">男</el-radio>
|
||||
<el-radio label="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Email" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入Email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="WhatsApp" prop="WhatsApp">
|
||||
<el-input v-model="form.WhatsApp" placeholder="请输入WhatsApp" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="客户偏好" prop="car_type_id">
|
||||
<el-select v-model="form.car_type_id" placeholder="请选择客户偏好">
|
||||
<el-option v-for="item in intentionOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="客户分级" prop="grade">
|
||||
<el-select v-model="form.grade" placeholder="请选择客户分级">
|
||||
<el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="国家" prop="country_id">
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司" prop="company">
|
||||
<el-input v-model="form.company" placeholder="请输入公司" @click="showMapDialog = true" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="describe">
|
||||
<el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item class="submit-row">
|
||||
<el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 谷歌地图选点弹窗 -->
|
||||
<el-dialog v-model="showMapDialog" title="选择公司地址" width="800px">
|
||||
<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;" /> -->
|
||||
<div id="google-map" style="width:100%;height:100%;"></div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="showMapDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmMapSelect">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
|
||||
const router = useRouter()
|
||||
const formRef = ref()
|
||||
const form = ref({
|
||||
channel_id: '',
|
||||
magnitude: '',
|
||||
contacts: '',
|
||||
sex: '0',
|
||||
phone: '',
|
||||
email: '',
|
||||
WhatsApp: '',
|
||||
grade: '',
|
||||
country_id: '',
|
||||
company: '',
|
||||
describe: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
// car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const channelOptions = ref<any>()
|
||||
const opportunityOptions = ref<any>()
|
||||
const intentionOptions = ref<any>()
|
||||
const levelOptions = ref<any>()
|
||||
const countryOptions = ref<any>()
|
||||
onMounted(() => {
|
||||
getgetChannel()
|
||||
getMagnitude()
|
||||
getGrade()
|
||||
getarea()
|
||||
})
|
||||
//渠道
|
||||
const getgetChannel = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getChannel()
|
||||
channelOptions.value = res||[]
|
||||
} catch (error) { channelOptions.value = [] }
|
||||
}
|
||||
//商机
|
||||
const getMagnitude = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getMagnitude()
|
||||
opportunityOptions.value = res||[]
|
||||
} catch (error) { opportunityOptions.value = [] }
|
||||
}
|
||||
//客户等级
|
||||
const getGrade = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getGrade()
|
||||
levelOptions.value = res||[]
|
||||
} catch (error) { levelOptions.value = [] }
|
||||
}
|
||||
//国家
|
||||
const getarea = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getCountry()
|
||||
countryOptions.value = res||[]
|
||||
} catch (error) { countryOptions.value = [] }
|
||||
}
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const res = await CrmService.customerAdd(form.value)
|
||||
ElMessage.success(res?.message || '提交成功！')
|
||||
router.push('/crmpc/customer')
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.message || '提交失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const showMapDialog = ref(false)
|
||||
const selectedAddress = ref('')
|
||||
const selectedLatLng = ref({ lat: null, lng: null })
|
||||
|
||||
function confirmMapSelect() {
|
||||
form.value.company = selectedAddress.value
|
||||
// 你也可以保存 selectedLatLng.value 到 form
|
||||
showMapDialog.value = false
|
||||
}
|
||||
|
||||
let map: any, marker: any, autocomplete: any
|
||||
|
||||
function initMap() {
|
||||
const google = (window as any).google;
|
||||
const input = document.getElementById('map-search') as HTMLInputElement;
|
||||
if (!input) {
|
||||
setTimeout(initMap, 100);
|
||||
return;
|
||||
}
|
||||
map = new google.maps.Map(document.getElementById('google-map'), {
|
||||
center: { lat: 39.9042, lng: 116.4074 }, // 默认北京
|
||||
zoom: 12
|
||||
})
|
||||
|
||||
marker = new google.maps.Marker({
|
||||
map,
|
||||
draggable: true
|
||||
})
|
||||
|
||||
map.addListener('click', (e: any) => {
|
||||
marker.setPosition(e.latLng)
|
||||
getAddressByLatLng(e.latLng)
|
||||
})
|
||||
|
||||
marker.addListener('dragend', (e: any) => {
|
||||
getAddressByLatLng(e.latLng)
|
||||
})
|
||||
|
||||
autocomplete = new google.maps.places.Autocomplete(input)
|
||||
autocomplete.bindTo('bounds', map)
|
||||
autocomplete.addListener('place_changed', () => {
|
||||
const place = autocomplete.getPlace()
|
||||
if (!place.geometry) return
|
||||
map.panTo(place.geometry.location)
|
||||
marker.setPosition(place.geometry.location)
|
||||
getAddressByLatLng(place.geometry.location)
|
||||
})
|
||||
}
|
||||
|
||||
function getAddressByLatLng(latlng: any) {
|
||||
const google = (window as any).google;
|
||||
const geocoder = new google.maps.Geocoder()
|
||||
geocoder.geocode({ location: latlng }, (results: any, status: any) => {
|
||||
if (status === 'OK' && results[0]) {
|
||||
selectedAddress.value = results[0].formatted_address
|
||||
selectedLatLng.value = {
|
||||
lat: latlng.lat(),
|
||||
lng: latlng.lng()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(showMapDialog, (val) => {
|
||||
if (val) {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
const google = (window as any).google;
|
||||
if (!google || !google.maps) {
|
||||
const script = document.createElement('script')
|
||||
script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I&libraries=places`
|
||||
script.async = true
|
||||
script.onload = initMap
|
||||
document.head.appendChild(script)
|
||||
} else {
|
||||
initMap()
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.border{
|
||||
|
||||
margin: 0px 10px 0px 40px;
|
||||
}
|
||||
.submit-row .el-form-item__content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon-reverse {
|
||||
display: inline-block;
|
||||
transform: rotate(270deg); /* 旋转180度 */
|
||||
}
|
||||
.customer-form-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.form-header {
|
||||
width: 98%;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
justify-content: flex-start; /* 新增，左对齐 */
|
||||
}
|
||||
.form-title{
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.customer-form {
|
||||
width: 600px;
|
||||
background: #fff;
|
||||
padding: 10px 24px 16px 24px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="customer-form-page">
|
||||
<div class="form-header">
|
||||
<el-link :underline="false" @click="goBack">
|
||||
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||
</el-link>
|
||||
<span class="border"></span><span class="form-title">编辑客户资料</span>
|
||||
</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
class="customer-form"
|
||||
label-position="right"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="客户渠道" prop="channel_id">
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户商机" prop="magnitude">
|
||||
<el-select v-model="form.magnitude" placeholder="请选择客户商机">
|
||||
<el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名称" prop="contacts">
|
||||
<el-input v-model="form.contacts" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户性别" prop="sex" >
|
||||
<el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;">
|
||||
<el-radio :label="0">未知</el-radio>
|
||||
<el-radio :label="1">男</el-radio>
|
||||
<el-radio :label="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Email" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入Email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="WhatsApp" prop="WhatsApp">
|
||||
<el-input v-model="form.WhatsApp" placeholder="请输入WhatsApp" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="客户偏好" prop="car_type_id">
|
||||
<el-select v-model="form.car_type_id" placeholder="请选择客户偏好">
|
||||
<el-option v-for="item in intentionOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="客户分级" prop="grade">
|
||||
<el-select v-model="form.grade" placeholder="请选择客户分级">
|
||||
<el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="国家" prop="country_id">
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司" prop="company">
|
||||
<el-input v-model="form.company" placeholder="请输入公司" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="describe">
|
||||
<el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item class="submit-row">
|
||||
<el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
const route = useRoute()
|
||||
const customerId = route.query.id
|
||||
const router = useRouter()
|
||||
const formRef = ref()
|
||||
|
||||
|
||||
const rules = {
|
||||
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
// car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const channelOptions = ref<any>()
|
||||
const opportunityOptions = ref<any>()
|
||||
const intentionOptions = ref<any>()
|
||||
const levelOptions = ref<any>()
|
||||
const countryOptions = ref<any>()
|
||||
onMounted(async () => {
|
||||
await getgetChannel()
|
||||
await getMagnitude()
|
||||
await getGrade()
|
||||
await getarea()
|
||||
await getdetilfn()
|
||||
})
|
||||
// 定义客户详情类型
|
||||
interface CustomerInfo {
|
||||
contacts?: string
|
||||
// 可根据实际接口补充更多字段
|
||||
[key: string]: any
|
||||
}
|
||||
const form = ref<CustomerInfo>({})
|
||||
const customerInfo = ref<CustomerInfo>({})
|
||||
//获取详情
|
||||
const getdetilfn = async() => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getcustomerdetail({id:customerId})
|
||||
customerInfo.value = res
|
||||
form.value = res
|
||||
} catch (error) { }
|
||||
}
|
||||
//渠道
|
||||
const getgetChannel = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getChannel()
|
||||
channelOptions.value = res||[]
|
||||
} catch (error) { channelOptions.value = [] }
|
||||
}
|
||||
//商机
|
||||
const getMagnitude = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getMagnitude()
|
||||
opportunityOptions.value = res||[]
|
||||
} catch (error) { opportunityOptions.value = [] }
|
||||
}
|
||||
//客户等级
|
||||
const getGrade = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getGrade()
|
||||
levelOptions.value = res||[]
|
||||
} catch (error) { levelOptions.value = [] }
|
||||
}
|
||||
//国家
|
||||
const getarea = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getCountry()
|
||||
countryOptions.value = res||[]
|
||||
} catch (error) { countryOptions.value = [] }
|
||||
}
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const res = await CrmService.customerAdd(form.value)
|
||||
ElMessage.success(res?.message || '提交成功！')
|
||||
router.push('/crmpc/customer')
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.message || '提交失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.border{
|
||||
|
||||
margin: 0px 10px 0px 40px;
|
||||
}
|
||||
.submit-row .el-form-item__content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon-reverse {
|
||||
display: inline-block;
|
||||
transform: rotate(270deg); /* 旋转180度 */
|
||||
}
|
||||
.customer-form-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.form-header {
|
||||
width: 98%;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
justify-content: flex-start; /* 新增，左对齐 */
|
||||
}
|
||||
.form-title{
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.customer-form {
|
||||
width: 600px;
|
||||
background: #fff;
|
||||
padding: 10px 24px 16px 24px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<div class="follow-add-page">
|
||||
<div class="boxshadow pad20">
|
||||
<el-link :underline="false" @click="goBack">
|
||||
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||
</el-link>
|
||||
<span class="border"></span><span class="edit-title" style="margin-left: 12px;">添加跟进</span>
|
||||
</div>
|
||||
<div class="edit-header boxshadow" style="position:relative;">
|
||||
<!-- 右上角三角形角标 -->
|
||||
<div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div>
|
||||
<el-row :gutter="20" style="flex: 1;">
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>客户名称：{{ customerInfo.contacts }}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>渠道：{{customerInfo.channel_name}}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="5">
|
||||
<span>联系方式：{{customerInfo.phone}}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>客户偏好：{{customerInfo.car_type_name}}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>客户商机：{{customerInfo.magnitude_txt}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-row">
|
||||
<span class="edit-title">客户分级</span>
|
||||
<el-select 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>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-row">
|
||||
<span class="edit-title">跟进方式</span>
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio label="1">在线跟进</el-radio>
|
||||
<el-radio label="0">拜访</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-row">
|
||||
<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;" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-top">
|
||||
<span class="edit-title">上传跟进截图/聊天截图</span>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="actionImageUplode"
|
||||
:headers="uploadHeaders"
|
||||
:on-success="handleUploadSuccess"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<img :src="imageUrl" class="avatar" />
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-top">
|
||||
<span class="edit-title">跟进描述</span>
|
||||
<el-input v-model="form.audio_text" type="textarea" placeholder="请输入跟进描述" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-row">
|
||||
<span class="edit-title">当前位置</span>
|
||||
<el-input v-model="followDesc" type="input" placeholder="请输入当前位置" style="width: 200px;" disabled>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-top">
|
||||
<span class="edit-title">当前位置拍照上传</span>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="actionImageUplode"
|
||||
:headers="uploadHeaders"
|
||||
:on-success="handleUploadSuccess1"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<img :src="imageUrls" class="avatar" />
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-top">
|
||||
<span class="edit-title">拜访内容</span>
|
||||
<el-input v-model="form.audio_text" type="textarea" placeholder="请输入拜访内容" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-top">
|
||||
<span class="edit-title">备注</span>
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div>
|
||||
<span class="border" style="margin: 0px 10px 0px 0px;"></span><span class="edit-title">跟进记录</span>
|
||||
</div>
|
||||
<div class="follow-list">
|
||||
<ElScrollbar >
|
||||
<template v-if="followList.length > 0">
|
||||
<ElTimeline>
|
||||
<ElTimelineItem
|
||||
v-for="item in followList"
|
||||
:key="item.time"
|
||||
:placement="TIMELINE_PLACEMENT"
|
||||
:color="activecolor"
|
||||
:center="true"
|
||||
>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content-row">
|
||||
<div class="timeline-content">
|
||||
<p class="timeline-text">{{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>
|
||||
<img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
|
||||
</div>
|
||||
</div>
|
||||
</ElTimelineItem>
|
||||
</ElTimeline>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 使用 Element Plus 的空状态组件 -->
|
||||
<el-empty :image="emptyimg" description="暂无跟进记录" />
|
||||
<!-- <el-empty /> -->
|
||||
<!-- 或者自定义图片 -->
|
||||
<!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
|
||||
</template>
|
||||
</ElScrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-button type="primary" class="submit-btn" @click="handleSubmit">提交</el-button>
|
||||
</div>
|
||||
<!-- 提交成功弹出层 -->
|
||||
<el-dialog
|
||||
v-model="successDialogVisible"
|
||||
width="400px"
|
||||
align-center
|
||||
:show-close="true"
|
||||
class="success-dialog"
|
||||
>
|
||||
<div class="success-dialog-content">
|
||||
<img src="@/assets/img/crm/succes.png" alt="成功" class="success-img" />
|
||||
<div class="conts">
|
||||
<div class="success-title">提交成功</div>
|
||||
<div class="remind-title">下次跟进提醒设置</div>
|
||||
<div class="remind-options">
|
||||
<div
|
||||
v-for="(item, idx) in remindOptions.filter(opt => opt.value !== 'custom')"
|
||||
:key="item.value"
|
||||
:class="['remind-btn', { active: remindValue === item.value }]"
|
||||
@click="remindValue = item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="customDate"
|
||||
type="datetime"
|
||||
placeholder="自定义"
|
||||
style="width:100%;"
|
||||
CircleClose
|
||||
:disabled-date="disabledPastDate"
|
||||
/>
|
||||
<el-button type="primary" class="confirm-btn" @click="handleSuccessConfirm">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import emptyimg from '@/assets/img/crm/empty.png'
|
||||
import imageUrl1 from '@/assets/img/crm/upimg.png'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElTimeline, ElTimelineItem, ElScrollbar } from 'element-plus'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
||||
const { uploadHeaders } = useUploadHeaders()
|
||||
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
||||
const TIMELINE_PLACEMENT = 'top'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const customerId = route.query.id
|
||||
const levelOptions = ref<any>()
|
||||
const followDesc = ref('')
|
||||
const activecolor = "#3471FF"
|
||||
|
||||
const successDialogVisible = ref(false) // 控制弹窗显示
|
||||
const remindValue = ref('1')
|
||||
const customDate = ref('')
|
||||
const imageUrl = ref(imageUrl1)
|
||||
const imageUrls = ref(imageUrl1)
|
||||
function getNowStr() {
|
||||
const d = new Date()
|
||||
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())}`
|
||||
}
|
||||
const form=ref({
|
||||
customer_id:route.query.id,
|
||||
type: '1',
|
||||
address: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
firstFollowtime: getNowStr(),
|
||||
audio_text:'',
|
||||
remark:'',
|
||||
picture:''
|
||||
})
|
||||
|
||||
// 定义客户详情类型
|
||||
interface CustomerInfo {
|
||||
contacts?: string
|
||||
// 可根据实际接口补充更多字段
|
||||
[key: string]: any
|
||||
}
|
||||
const customerInfo = ref<CustomerInfo>({})
|
||||
const followList = ref<CustomerInfo>({})
|
||||
//获取详情
|
||||
const getdetilfn = async() => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getcustomerdetail({id:customerId})
|
||||
customerInfo.value = res
|
||||
console.log(res)
|
||||
} catch (error) { }
|
||||
}
|
||||
//客户等级
|
||||
const getGrade = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getGrade()
|
||||
levelOptions.value = res||[]
|
||||
} catch (error) { levelOptions.value = [] }
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getGrade()
|
||||
await getdetilfn()
|
||||
getCurrentLocation()
|
||||
getfollowlist()
|
||||
})
|
||||
//修改等级
|
||||
function handleGradeChange(newGrade: number) {
|
||||
if (!customerId) return
|
||||
CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => {
|
||||
ElMessage.success(res?.message || '修改成功')
|
||||
}).catch(() => {
|
||||
ElMessage.error('修改失败')
|
||||
})
|
||||
}
|
||||
//跟进记录getfollowlist
|
||||
const getfollowlist = async () => {
|
||||
try {
|
||||
const res = await CrmService.getfollowlist({customer_id:route.query.id})
|
||||
followList.value = res||[]
|
||||
} catch (error) { followList.value = [] }
|
||||
}
|
||||
|
||||
|
||||
|
||||
const remindOptions = [
|
||||
{ label: '1天后', value: '1' },
|
||||
{ label: '3天后', value: '3' },
|
||||
{ label: '7天后', value: '7' }
|
||||
]
|
||||
|
||||
function disabledPastDate(time: Date) {
|
||||
return time.getTime() < Date.now() - 86400000
|
||||
}
|
||||
const handleSuccessConfirm = async () =>{
|
||||
let remindTimestamp = null
|
||||
if (remindValue.value === 'custom') {
|
||||
if (!customDate.value) {
|
||||
return ElMessage.warning('请选择自定义日期时间')
|
||||
}
|
||||
// 自定义日期转时间戳
|
||||
remindTimestamp = Math.floor(new Date(customDate.value).getTime() / 1000)
|
||||
} else {
|
||||
// 固定天数，当前时间加天数
|
||||
const days = Number(remindValue.value)
|
||||
remindTimestamp = Math.floor((Date.now() + days * 24 * 60 * 60 * 1000) / 1000)
|
||||
}
|
||||
const res = await CrmService.followNext({id:customerId,follow_next:remindTimestamp})
|
||||
ElMessage.success(res?.message || '提交成功！')
|
||||
successDialogVisible.value = false
|
||||
setTimeout(() => {
|
||||
router.push('/crmpc/customer')
|
||||
}, 1000);
|
||||
}
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
form.value.address=followDesc.value
|
||||
const res = await CrmService.followAdd(form.value)
|
||||
ElMessage.success(res?.message || '提交成功！')
|
||||
successDialogVisible.value=true
|
||||
// router.push('/crmpc/customer')
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.message || '提交失败')
|
||||
}
|
||||
}
|
||||
// 在 <script setup> 里添加获取地理位置方法
|
||||
function getCurrentLocation() {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
async (position) => {
|
||||
const { latitude, longitude } = position.coords
|
||||
// 可选：调用第三方逆地理编码API获取详细地址
|
||||
const googleKey = 'AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I'
|
||||
const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${googleKey}`
|
||||
try {
|
||||
const res = await fetch(url)
|
||||
const data = await res.json()
|
||||
if (data.status === 'OK' && data.plus_code) {
|
||||
followDesc.value = data.plus_code.compound_code
|
||||
} else {
|
||||
followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
|
||||
}
|
||||
} catch (e) {
|
||||
followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
followDesc.value = '无法获取当前位置'
|
||||
}
|
||||
)
|
||||
} else {
|
||||
followDesc.value = '浏览器不支持定位功能'
|
||||
}
|
||||
}
|
||||
function handleUploadSuccess(response: any) {
|
||||
// 假设返回图片地址字段为 response.url 或 response.data.url
|
||||
imageUrl.value = response.url || (response.data && response.data.file_url) || ''
|
||||
// 如需同步到 form.picture
|
||||
form.value.picture = response.url || (response.data && response.data.file_name) || ''
|
||||
}
|
||||
function handleUploadSuccess1(response: any) {
|
||||
// 假设返回图片地址字段为 response.url 或 response.data.url
|
||||
imageUrls.value = response.url || (response.data && response.data.file_url) || ''
|
||||
// 如需同步到 form.picture
|
||||
form.value.picture = response.url || (response.data && response.data.file_name) || ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.timeline-content-row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.avatar,.timeline-img{
|
||||
width: 80px;
|
||||
}
|
||||
.border{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* 两端对齐 */
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
.edit-header{
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.follow-add-page {
|
||||
background: #f7f9fa;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
.boxshadow {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
|
||||
}
|
||||
.pad20 {
|
||||
padding: 20px;
|
||||
}
|
||||
.edit-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.info-card {
|
||||
margin-bottom: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: block;
|
||||
width: 240px;
|
||||
margin: 32px auto 0 auto;
|
||||
font-size: 18px;
|
||||
height: 48px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.corner-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.corner-tag::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: -9px;
|
||||
width: 90px;
|
||||
height: 75px;
|
||||
background: #3471FF;
|
||||
clip-path: polygon(100% 0, 0 0, 100% 100%);
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
.corner-tag {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 55px;
|
||||
height: 40px;
|
||||
z-index: 3;
|
||||
padding-top: 6px;
|
||||
padding-right: 0px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.corner-text {
|
||||
display: inline-block;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.info-top span{
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* 成功弹出层 */
|
||||
.success-dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0 0 0;
|
||||
}
|
||||
.success-img {
|
||||
width:55%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.conts{
|
||||
margin-top: -55px;
|
||||
}
|
||||
.success-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 40px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.remind-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.remind-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.remind-btn {
|
||||
background: #f4f7fe;
|
||||
color: #3471FF;
|
||||
border-radius: 8px;
|
||||
padding: 6px 18px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s;
|
||||
min-width: 64px;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
.remind-btn.active {
|
||||
background: #3471FF;
|
||||
color: #fff;
|
||||
border: 1px solid #3471FF;
|
||||
}
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,500 @@
|
||||
<template>
|
||||
<div class="customer-edit-page">
|
||||
<div class="boxshadow pad20">
|
||||
<el-link :underline="false" @click="goBack">
|
||||
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||
</el-link>
|
||||
</div>
|
||||
<div class="edit-header boxshadow pad20" style="position:relative;">
|
||||
<span class="border"></span><span class="edit-title">客户资料</span>
|
||||
<!-- 右上角三角形角标 -->
|
||||
<div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div>
|
||||
<div class="info-row-bar">
|
||||
<el-row :gutter="20" style="flex: 1;">
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>客户名称：{{ customerInfo.contacts }}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>渠道：{{customerInfo.channel_name}}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="5">
|
||||
<span>联系方式：{{customerInfo.phone}}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>客户偏好：{{customerInfo.car_type_name}}</span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="6" :lg="4">
|
||||
<span>客户商机：{{customerInfo.magnitude_txt}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-button @click="goEdit" type="primary" class="edit-btn" size="small"><i class="iconfont-sys"> </i> 编辑资料</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="">
|
||||
<span class="border"></span><span class="edit-title">客户画像</span>
|
||||
<el-button @click="addtag" type="primary" size="small" style="float: right;">添加标签</el-button>
|
||||
</div>
|
||||
<div class="tag-list">
|
||||
<el-tag type="primary" v-for="(item, index) in customerInfo.tags" :key="index">{{item.name}}</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-row">
|
||||
<span class="edit-title">客户分级</span>
|
||||
<el-select 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>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||
<div class="info-row">
|
||||
<span class="edit-title">跟进记录</span>
|
||||
<el-button type="primary" size="small" style="float: right;" @click="goAddFollow">+ 添加跟进</el-button>
|
||||
</div>
|
||||
<div class="follow-list">
|
||||
<ElScrollbar >
|
||||
<template v-if="followList.length > 0">
|
||||
<ElTimeline>
|
||||
<ElTimelineItem
|
||||
v-for="item in followList"
|
||||
:key="item.time"
|
||||
:placement="TIMELINE_PLACEMENT"
|
||||
:color="activecolor"
|
||||
:center="true"
|
||||
>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content-row">
|
||||
<div class="timeline-content">
|
||||
<p class="timeline-text">{{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>
|
||||
<img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
|
||||
</div>
|
||||
</div>
|
||||
</ElTimelineItem>
|
||||
</ElTimeline>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 使用 Element Plus 的空状态组件 -->
|
||||
<el-empty :image="emptyimg" description="暂无跟进记录" />
|
||||
<!-- <el-empty /> -->
|
||||
<!-- 或者自定义图片 -->
|
||||
<!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
|
||||
</template>
|
||||
</ElScrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="tagDialogVisible"
|
||||
title="添加标签"
|
||||
width="420px"
|
||||
align-center
|
||||
:show-close="false"
|
||||
>
|
||||
<div class="tag-dialog-scroll">
|
||||
<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="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<div
|
||||
class="col4 tagitem"
|
||||
style="cursor: pointer;"
|
||||
v-for="(item1, index1) in group.tags"
|
||||
:class="{ 'tagactive': activeMap[group.id] === item1.id }"
|
||||
@click="tagSelect(item1)"
|
||||
:key="index1"
|
||||
>
|
||||
{{ item1.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer-center">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref,reactive } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import emptyimg from '@/assets/img/crm/empty.png'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
import { ElMessage } from 'element-plus'
|
||||
// 常量配置
|
||||
const TIMELINE_PLACEMENT = 'top'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const customerLevel = ref('A')
|
||||
const activecolor = "#3471FF"
|
||||
const tagDialogVisible = ref(false)
|
||||
const selectedTags = ref<string[]>([])
|
||||
const customerId = route.query.id
|
||||
const levelOptions = ref<any>()
|
||||
const tagGroups = ref<any[]>([])
|
||||
const activeMap = reactive<{ [groupId: string]: number }>({})
|
||||
// 定义客户详情类型
|
||||
interface CustomerInfo {
|
||||
contacts?: string
|
||||
// 可根据实际接口补充更多字段
|
||||
[key: string]: any
|
||||
}
|
||||
const customerInfo = ref<CustomerInfo>({})
|
||||
//获取详情
|
||||
const getdetilfn = async() => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getcustomerdetail({id:customerId})
|
||||
customerInfo.value = res
|
||||
console.log(res)
|
||||
} catch (error) { }
|
||||
}
|
||||
//客户等级
|
||||
const getGrade = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getGrade()
|
||||
levelOptions.value = res||[]
|
||||
} catch (error) { levelOptions.value = [] }
|
||||
}
|
||||
//跟进记录getfollowlist
|
||||
const followList = ref<CustomerInfo>({})
|
||||
const getfollowlist = async () => {
|
||||
try {
|
||||
const res = await CrmService.getfollowlist({customer_id:route.query.id})
|
||||
followList.value = res||[]
|
||||
} catch (error) { followList.value = [] }
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getGrade()
|
||||
await getdetilfn()
|
||||
// 在 getdetilfn 之后调用 tagGrouplistfn，确保 customerInfo 有数据
|
||||
await tagGrouplistfn()
|
||||
getfollowlist()
|
||||
})
|
||||
function addtag(){
|
||||
tagDialogVisible.value = true
|
||||
tagGrouplistfn()
|
||||
}
|
||||
const tagGrouplistfn = async () => {
|
||||
try {
|
||||
const res = await CrmService.tagGrouplist()
|
||||
tagGroups.value = res || []
|
||||
// 回显选中
|
||||
if (customerInfo.value && Array.isArray(customerInfo.value.tags)) {
|
||||
tagGroups.value.forEach(group => {
|
||||
if (group.tags && Array.isArray(group.tags)) {
|
||||
const matched = group.tags.find((item: any) =>
|
||||
customerInfo.value.tags.some((t: any) => t.id === item.id)
|
||||
)
|
||||
if (matched) {
|
||||
activeMap[group.id] = matched.id
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
// 4. 点击标签
|
||||
async function tagSelect(item: { group_id: string | number; id: number }) {
|
||||
const key = String(item.group_id)
|
||||
let tag_id = ''
|
||||
if (activeMap[key] === item.id) {
|
||||
// 取消选中
|
||||
delete activeMap[key]
|
||||
tag_id = ''
|
||||
} else {
|
||||
// 选中
|
||||
activeMap[key] = item.id
|
||||
tag_id = String(item.id)
|
||||
}
|
||||
try {
|
||||
const res = await CrmService.tagGroupupdatePivot({ customer_id: customerId, group_id: key, tag_id })
|
||||
ElMessage.success(res?.message || '操作成功')
|
||||
await getdetilfn()
|
||||
await tagGrouplistfn()
|
||||
} catch (e) {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 获取所有已选中的标签
|
||||
// function getSelectedTags() {
|
||||
// const selected: any[] = []
|
||||
// for (const group of tagGroups) {
|
||||
// const key = String(group.id)
|
||||
// const tagId = activeMap[key]
|
||||
// if (tagId) {
|
||||
// const tag = group.tags.find(t => t.id === tagId)
|
||||
// if (tag) selected.push(tag)
|
||||
// }
|
||||
// }
|
||||
// return selected
|
||||
// }
|
||||
|
||||
// 6. 示例：确定按钮
|
||||
function handleConfirm() {
|
||||
// const selectedTags = getSelectedTags()
|
||||
// console.log('选中的标签：', selectedTags)
|
||||
// 处理选中的标签
|
||||
tagDialogVisible.value = false
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
tagDialogVisible.value = false
|
||||
}
|
||||
//编辑
|
||||
function goEdit() {
|
||||
router.push({
|
||||
path: '/crmpc/customer/edit',
|
||||
query: { id: customerId }
|
||||
})
|
||||
}
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
//修改等级
|
||||
function handleGradeChange(newGrade: number) {
|
||||
if (!customerId) return
|
||||
CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => {
|
||||
ElMessage.success(res?.message || '修改成功')
|
||||
}).catch(() => {
|
||||
ElMessage.error('修改失败')
|
||||
})
|
||||
}
|
||||
//添加跟进
|
||||
function goAddFollow() {
|
||||
router.push({
|
||||
path: '/crmpc/customer/followadd',
|
||||
query: { id: customerId }
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.timeline-content-row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.timeline-img{
|
||||
width: 80px;
|
||||
}
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px; /* 标签间距 */
|
||||
margin-top: 20px;
|
||||
}
|
||||
.border{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.pad20{
|
||||
padding: 20px;
|
||||
}
|
||||
.icon-reverse {
|
||||
display: inline-block;
|
||||
transform: rotate(270deg); /* 旋转180度 */
|
||||
}
|
||||
.customer-edit-page {
|
||||
background: #f7f9fa;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
.edit-header {
|
||||
/* display: flex; */
|
||||
/* align-items: center; */
|
||||
/* gap: 12px; */
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.edit-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.edit-status {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.edit-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
.info-card {
|
||||
margin-bottom: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* 两端对齐 */
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
.follow-list {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.follow-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
background: #f7f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
.follow-main {
|
||||
flex: 1;
|
||||
}
|
||||
.follow-title {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
.follow-type {
|
||||
color: #3471FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
.follow-time {
|
||||
color: #888;
|
||||
}
|
||||
.follow-content {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
.follow-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.info-row-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0px;
|
||||
}
|
||||
.corner-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.corner-tag::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
width: 90px;
|
||||
height: 80px;
|
||||
background: #3471FF;
|
||||
clip-path: polygon(100% 0, 0 0, 100% 100%);
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
.corner-tag {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 55px;
|
||||
height: 40px;
|
||||
z-index: 3;
|
||||
padding-top: 6px;
|
||||
padding-right: 0px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.corner-text {
|
||||
display: inline-block;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.timeline-content-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.timeline-text{
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.timeline-mom{
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.timeline-img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.tagitem{
|
||||
background: #DCE7FF;
|
||||
border-radius: 8px;
|
||||
color: #3471FF;
|
||||
text-align: center;
|
||||
padding: 5px 13px;
|
||||
}
|
||||
.col4{
|
||||
display: inline-block;
|
||||
margin: 4px 3px;
|
||||
}
|
||||
.tagactive{
|
||||
background: #3471FF !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.tag-dialog-scroll {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.tag-dialog-scroll {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
/* 让内容不被滚动条遮挡 */
|
||||
}
|
||||
|
||||
/* 优化滚动条样式（Webkit内核浏览器） */
|
||||
.tag-dialog-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
.tag-dialog-scroll::-webkit-scrollbar-thumb {
|
||||
background: #d4e0f7;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.tag-dialog-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #b3c8e6;
|
||||
}
|
||||
.tag-dialog-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Firefox 滚动条优化 */
|
||||
.tag-dialog-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #d4e0f7 transparent;
|
||||
}
|
||||
.dialog-footer-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="customer-page">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="customer-toolbar boxshadow">
|
||||
<el-button type="primary" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
|
||||
<div class="customer-search-group">
|
||||
<el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
|
||||
<el-select v-model="selectValue">
|
||||
<el-option
|
||||
v-for="v in selectOptions"
|
||||
:key="v.value"
|
||||
:label="v.label"
|
||||
:value="v.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选标签 -->
|
||||
<div class="customer-tags boxshadow">
|
||||
<div class="filter-row">
|
||||
<span class="filter-label">价值标签</span>
|
||||
<div class="filter-tags">
|
||||
<span v-for="item in valueTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['value'] === item.label }]" @click="handleTagClick('value', item.label)">
|
||||
{{ item.label }}({{ item.count }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<span class="filter-label">生命周期标签</span>
|
||||
<div class="filter-tags">
|
||||
<span v-for="item in lifeTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['life'] === item.label }]" @click="handleTagClick('life', item.label)">
|
||||
{{ item.label }}({{ item.count }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<span class="filter-label">行为标签</span>
|
||||
<div class="filter-tags">
|
||||
<span v-for="item in actionTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['action'] === item.label }]" @click="handleTagClick('action', item.label)">
|
||||
{{ item.label }}({{ item.count }})
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="filter-row">
|
||||
<span class="filter-label">更多标签</span>
|
||||
<div class="filter-tags">
|
||||
<span v-for="item in moreTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['more'] === item.label }]" @click="handleTagClick('more', item.label)">
|
||||
{{ item.label }}({{ item.count }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="filter-more-btn">
|
||||
<el-link :underline="false" @click="showMore = !showMore">
|
||||
{{ showMore ? '收起' : '更多' }}
|
||||
<i v-if="showMore" class="iconfont-sys"> </i>
|
||||
<i v-else class="iconfont-sys"></i>
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxshadow">
|
||||
<!-- Tab切换 -->
|
||||
<el-tabs v-model="activeTab" class="customer-tabs">
|
||||
<el-tab-pane label="全部" name=""></el-tab-pane>
|
||||
<el-tab-pane label="跟进中" name="0"></el-tab-pane>
|
||||
<el-tab-pane label="已成交" name="1"></el-tab-pane>
|
||||
<el-tab-pane label="已丢失" name="2"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 表格 -->
|
||||
<ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
|
||||
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" lass="customer-table">
|
||||
<template #default>
|
||||
<el-table-column prop="contacts" label="客户名称" align="center" />
|
||||
<el-table-column prop="magnitude_txt" label="客户商机" align="center" />
|
||||
<el-table-column prop="channel_name" label="渠道" align="center" />
|
||||
<el-table-column prop="phone" label="电话" align="center" />
|
||||
<el-table-column prop="grade_txt" label="等级" align="center" />
|
||||
<el-table-column prop="follow" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<span :class="statusClass(scope.row.follow)">
|
||||
{{ scope.row.follow_txt }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="200px" align="center">
|
||||
<template #default="scope">
|
||||
<el-link type="primary" :underline="false" style="margin-right: 8px;" @click="goEdit(scope.row)"> <i class="iconfont-sys"> </i>查看</el-link>
|
||||
<el-link type="primary" :underline="false" @click="goAddFollow(scope.row)"> <i class="iconfont-sys"> </i> 添加跟进</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
const searchValue = ref('')
|
||||
const selectValue = ref('')
|
||||
const activeTab = ref('')
|
||||
const showMore = ref(false)
|
||||
const loading = ref(false)
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
const selectOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '当天', value: '0' },
|
||||
{ label: '近三天', value: '1' },
|
||||
{ label: '近七天', value: '2' }
|
||||
]
|
||||
|
||||
const valueTags = [
|
||||
{ label: '高价值', count: 10 },
|
||||
{ label: '中价值', count: 10 },
|
||||
{ label: '低价值', count: 10 },
|
||||
{ label: '潜在高价值', count: 10 }
|
||||
]
|
||||
const lifeTags = [
|
||||
{ label: '新客户', count: 10 },
|
||||
{ label: '活跃', count: 10 },
|
||||
{ label: '深度', count: 10 },
|
||||
{ label: '流失', count: 10 }
|
||||
]
|
||||
const actionTags = [
|
||||
{ label: '高频购买', count: 10 },
|
||||
{ label: '大单', count: 10 },
|
||||
{ label: '促销敏感', count: 10 }
|
||||
]
|
||||
const moreTags = [
|
||||
{ label: '标签A', count: 5 },
|
||||
{ label: '标签B', count: 3 }
|
||||
]
|
||||
//获取标签
|
||||
const tagGroups = ref<any[]>([])
|
||||
const tagGrouplistfn = async () => {
|
||||
try {
|
||||
const res = await CrmService.tagGrouplist()
|
||||
tagGroups.value = res || []
|
||||
} catch (error) { }
|
||||
}
|
||||
// 表格数据
|
||||
const tableData = ref<any[]>([])
|
||||
onMounted(() => {
|
||||
gettableList()
|
||||
})
|
||||
// tabs 切换联动
|
||||
watch([activeTab, searchValue, selectValue], () => {
|
||||
pagination.currentPage = 1
|
||||
gettableList()
|
||||
})
|
||||
// 获取列表数据
|
||||
const gettableList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const { currentPage, pageSize } = pagination
|
||||
const params: any = {
|
||||
current: currentPage,
|
||||
size: pageSize
|
||||
}
|
||||
if (searchValue.value) params.keyword = searchValue.value
|
||||
if (selectValue.value) params.follow_last = selectValue.value
|
||||
if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
|
||||
// 标签参数
|
||||
if (tagActiveMap.value) params.value_tag = tagActiveMap.value
|
||||
if (tagActiveMap.life) params.life_tag = tagActiveMap.life
|
||||
if (tagActiveMap.action) params.action_tag = tagActiveMap.action
|
||||
if (tagActiveMap.more) params.more_tag = tagActiveMap.more
|
||||
const { data, current, size, total } = await CrmService.getcustomerList(params)
|
||||
tableData.value = data.map((item: any, index: number) => ({
|
||||
...item
|
||||
}))
|
||||
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// 处理表格分页变化
|
||||
const handleSizeChange = (newPageSize: number) => {
|
||||
pagination.pageSize = newPageSize
|
||||
// getWorkList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (newCurrentPage: number) => {
|
||||
pagination.currentPage = newCurrentPage
|
||||
// getWorkList()
|
||||
}
|
||||
function statusClass(status: any) {
|
||||
if (status === 0) return 'status-following'
|
||||
if (status === 1) return 'status-dealed'
|
||||
if (status === 2) return 'status-lost'
|
||||
return ''
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
function goAdd() {
|
||||
router.push('/crmpc/customer/add')
|
||||
}
|
||||
function goEdit(row: any) {
|
||||
router.push({
|
||||
path: '/crmpc/customer/show',
|
||||
query: { id: row.id }
|
||||
})
|
||||
}
|
||||
function goAddFollow(row: any) {
|
||||
router.push({
|
||||
path: '/crmpc/customer/followadd',
|
||||
query: { id: row.id } // 可带客户名等参数
|
||||
})
|
||||
}
|
||||
|
||||
// 标签选中状态，key为组名，值为选中的标签label
|
||||
const tagActiveMap = reactive<{ [group: string]: string }>({})
|
||||
|
||||
function handleTagClick(group: string, label: string) {
|
||||
if (tagActiveMap[group] === label) {
|
||||
tagActiveMap[group] = '' // 取消选中
|
||||
} else {
|
||||
tagActiveMap[group] = label // 选中
|
||||
}
|
||||
pagination.currentPage = 1
|
||||
gettableList()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-table__header th) {
|
||||
background: #f7f9fa !important;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
:deep(.el-table__body tr.custom-table-row td) {
|
||||
border-bottom: 1px solid #F7F9FA !important;
|
||||
border-right: 1px solid #F7F9FA !important;
|
||||
}
|
||||
:deep(.el-table__body tr td:last-child) {
|
||||
border-right: none !important;
|
||||
}
|
||||
:deep(.el-table__body tr:last-child td) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
:deep(.el-table__header-wrapper th) {
|
||||
border-bottom: 1px solid #F7F9FA !important;
|
||||
border-right: 1px solid #F7F9FA !important;
|
||||
}
|
||||
:deep(.el-table__header-wrapper th:last-child) {
|
||||
border-right: none !important;
|
||||
}
|
||||
:deep(.el-table) {
|
||||
border: 1px solid #F7F9FA !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.customer-page {
|
||||
background: var(--art-main-bg-color);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.customer-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 20px 10px;
|
||||
background: var(--art-main-bg-color);
|
||||
}
|
||||
.customer-search-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.customer-tags {
|
||||
background: var(--art-main-bg-color);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.filter-label {
|
||||
width: 120px;
|
||||
color: #666;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.filter-tags {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
span{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.customer-tabs {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-following {
|
||||
color: #00A43F;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-dealed {
|
||||
color: #3471FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-lost {
|
||||
color: #FF0000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.customer-table {
|
||||
background: var(--art-main-bg-color);
|
||||
border-radius: 8px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.filter-more-btn {
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.tag-item { cursor: pointer; border-radius: 4px; padding: 2px 10px; margin-right: 8px; transition: background 0.2s; }
|
||||
.tag-active { background: #3471FF; color: #fff; }
|
||||
</style>
|
||||
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="boxshadow">
|
||||
<div class="heard">
|
||||
<div class="heard-title">公海</div>
|
||||
<el-select
|
||||
v-model="remindRange"
|
||||
placeholder="请选择"
|
||||
class="heard-select"
|
||||
style="min-width: 120px"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="当天" value="0" />
|
||||
<el-option label="近三天" value="1" />
|
||||
<el-option label="近七天" value="2" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="table">
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:currentPage="pagination.currentPage"
|
||||
:pageSize="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:marginTop="10"
|
||||
@selection-change="handleSelectionChange"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<el-table-column prop="contacts" label="客户名称" min-width="120"></el-table-column>
|
||||
<el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
|
||||
<el-table-column prop="magnitude" label="客户商机" min-width="140"></el-table-column>
|
||||
<el-table-column label="状态" min-width="140">
|
||||
<template #default="scope">
|
||||
<span :class="getCountdownClass(scope.row.deleted_at)">
|
||||
|
||||
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||
{{ getCountdown(scope.row.deleted_at) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="160px">
|
||||
<template #default="scope">
|
||||
<div class="follow-detli" @click="onDetail(scope.row)">
|
||||
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||
详情
|
||||
</div>
|
||||
<div class="follow-action" @click="onFollow(scope.row)">
|
||||
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||
领单
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="detailDialogVisible" title="详情" width="400px">
|
||||
<div v-if="detailRow" v-html="detailRow.desc_collect" >
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
const loading = ref(false)
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
const remindRange = ref('')
|
||||
const tableData = ref<any[]>([])
|
||||
watch([remindRange], () => {
|
||||
pagination.currentPage = 1
|
||||
gettableList()
|
||||
})
|
||||
// 获取列表数据
|
||||
const gettableList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const { currentPage, pageSize } = pagination
|
||||
const params: any = {
|
||||
current: currentPage,
|
||||
size: pageSize,
|
||||
seas:'seas'
|
||||
}
|
||||
if (remindRange.value) params.follow_last = remindRange.value
|
||||
const { data, current, size, total } = await CrmService.getcustomerList(params)
|
||||
tableData.value = data.map((item: any, index: number) => ({
|
||||
...item
|
||||
}))
|
||||
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// 选中的行数据
|
||||
const selectedRows = ref<any[]>([])
|
||||
// 处理表格行选择变化
|
||||
const handleSelectionChange = (selection: any[]) => {
|
||||
selectedRows.value = selection
|
||||
}
|
||||
// 处理表格分页变化
|
||||
const handleSizeChange = (newPageSize: number) => {
|
||||
pagination.pageSize = newPageSize
|
||||
gettableList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (newCurrentPage: number) => {
|
||||
pagination.currentPage = newCurrentPage
|
||||
gettableList()
|
||||
}
|
||||
const timer = ref(0)
|
||||
const refreshKey = ref(0)
|
||||
const detailDialogVisible = ref(false)
|
||||
const detailRow = ref<any>(null)
|
||||
|
||||
onMounted(() => {
|
||||
gettableList()
|
||||
timer.value = window.setInterval(() => {
|
||||
refreshKey.value++
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
}
|
||||
})
|
||||
|
||||
function getCountdown(targetDate: string) {
|
||||
// 让 refreshKey 成为依赖，确保每秒刷新
|
||||
refreshKey.value
|
||||
const now = dayjs()
|
||||
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||
if (!target.isValid()) return '时间格式错误'
|
||||
const diff = target.diff(now)
|
||||
if (diff <= 0) return '已超时'
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
|
||||
const minutes = Math.floor((diff / (1000 * 60)) % 60)
|
||||
const seconds = Math.floor((diff / 1000) % 60)
|
||||
return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
|
||||
}
|
||||
|
||||
function getCountdownClass(targetDate: string) {
|
||||
const now = dayjs()
|
||||
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||
if (!target.isValid() || target.diff(now) <= 0) {
|
||||
return 'countdown-danger'
|
||||
}
|
||||
return 'countdown-success'
|
||||
}
|
||||
const onFollow = async (row: any) => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要领取此客户吗？',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(async () => {
|
||||
const res = await CrmService.customerclaim({customer_id:row.id})
|
||||
ElMessage.success(res?.message || '提交成功！')
|
||||
gettableList()
|
||||
// 你可以在这里调用接口或做后续处理
|
||||
}).catch(() => {
|
||||
// 用户点击了取消
|
||||
})
|
||||
}
|
||||
|
||||
function onDetail(row: any) {
|
||||
detailRow.value = row
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.boxshadow {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
|
||||
background:var(--el-card-bg-color);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.heard {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.heard-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
border-left: 4px solid #3471FF;
|
||||
padding-left: 12px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heard-date-picker {
|
||||
width: 120px;
|
||||
}
|
||||
.heard-select {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.card-list {
|
||||
.art-custom-card {
|
||||
.iconfont-sys {
|
||||
background-color: #232323 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
:deep(.el-table__header th) {
|
||||
background: #f7f9fa !important;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
:deep(.el-table__body tr.custom-table-row td) {
|
||||
border-bottom: 1px solid #F7F9FA !important;
|
||||
border-right: 1px solid #F7F9FA !important;
|
||||
}
|
||||
:deep(.el-table__body tr td:last-child) {
|
||||
border-right: none !important;
|
||||
}
|
||||
:deep(.el-table__body tr:last-child td) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
:deep(.el-table__header-wrapper th) {
|
||||
border-bottom: 1px solid #F7F9FA !important;
|
||||
border-right: 1px solid #F7F9FA !important;
|
||||
}
|
||||
:deep(.el-table__header-wrapper th:last-child) {
|
||||
border-right: none !important;
|
||||
}
|
||||
:deep(.el-table) {
|
||||
border: 1px solid #F7F9FA !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
:deep(.el-table th),
|
||||
:deep(.el-table td) {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
.countdown-danger {
|
||||
color: #FF0000 !important;
|
||||
}
|
||||
.countdown-success {
|
||||
color: #00A43F !important;
|
||||
}
|
||||
.follow-detli{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #00A43F;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
.follow-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="console">
|
||||
<CardList></CardList>
|
||||
|
||||
<!-- <AboutProject /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CardList from './widget/CardList.vue'
|
||||
import { useCommon } from '@/composables/useCommon'
|
||||
|
||||
defineOptions({ name: 'Console' })
|
||||
|
||||
useCommon().scrollToTop()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use './style';
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
@use '@styles/variables.scss' as *;
|
||||
|
||||
.console {
|
||||
--card-spacing: 20px;
|
||||
|
||||
// 卡片头部
|
||||
:deep(.card-header) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 25px 5px 0;
|
||||
|
||||
.title {
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--art-gray-900) !important;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 3px;
|
||||
font-size: 13px;
|
||||
color: var(--art-gray-600) !important;
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设置卡片背景色、圆角、间隙
|
||||
:deep(.card-list .card),
|
||||
.card {
|
||||
margin-bottom: var(--card-spacing);
|
||||
background: var(--art-main-bg-color);
|
||||
border-radius: calc(var(--custom-radius) + 4px) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $device-phone) {
|
||||
--card-spacing: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<div class="homeheard">
|
||||
您已陪伴领客 CRM <span class="daynum"><span class="day">{{homestatistics.day}}</span>天</span>
|
||||
</div>
|
||||
<div class="boxshadow">
|
||||
<div class="heard">
|
||||
<div class="heard-title">数据简报</div>
|
||||
<el-date-picker
|
||||
v-model="selectedDate"
|
||||
type="month"
|
||||
format="YYYY-MM"
|
||||
value-format="YYYY-MM"
|
||||
placeholder="选择年月"
|
||||
class="heard-date-picker"
|
||||
/>
|
||||
</div>
|
||||
<el-row :gutter="20" class="card-list">
|
||||
<el-col :sm="12" :md="6" :lg="4" >
|
||||
<div class="card art-custom-card" :style="{ backgroundImage: `url(${adduser})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
||||
<CountTo
|
||||
class="number box-title"
|
||||
:endVal="homestatistics.customer"
|
||||
:duration="1000"
|
||||
separator=""
|
||||
></CountTo>
|
||||
<div class="change-box">
|
||||
<span class="change-text">新增客户</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="12" :md="6" :lg="4" >
|
||||
<div class="card art-custom-card" :style="{ backgroundImage: `url(${addbf})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
||||
<CountTo
|
||||
class="number box-title"
|
||||
:endVal="homestatistics.visit"
|
||||
:duration="1000"
|
||||
separator=""
|
||||
></CountTo>
|
||||
<div class="change-box">
|
||||
<span class="change-text">新增拜访</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="12" :md="6" :lg="4" >
|
||||
<div class="card art-custom-card" :style="{ backgroundImage: `url(${addgj})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
||||
<CountTo
|
||||
class="number box-title"
|
||||
:endVal="homestatistics.follow"
|
||||
:duration="1000"
|
||||
separator=""
|
||||
></CountTo>
|
||||
<div class="change-box">
|
||||
<span class="change-text">新增跟进</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="12" :md="6" :lg="4" >
|
||||
<div class="card art-custom-card" :style="{ backgroundImage: `url(${deal})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
||||
<CountTo
|
||||
class="number box-title"
|
||||
:endVal="homestatistics.customer_init"
|
||||
:duration="1000"
|
||||
separator=""
|
||||
></CountTo>
|
||||
<div class="change-box">
|
||||
<span class="change-text">跟进中</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="12" :md="6" :lg="4" >
|
||||
<div class="card art-custom-card" :style="{ backgroundImage: `url(${gjing})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
||||
<CountTo
|
||||
class="number box-title"
|
||||
:endVal="homestatistics.customero_fllow"
|
||||
:duration="1000"
|
||||
separator=""
|
||||
></CountTo>
|
||||
<div class="change-box">
|
||||
<span class="change-text">已成交</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="12" :md="6" :lg="4" >
|
||||
<div class="card art-custom-card" :style="{ backgroundImage: `url(${loss})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
||||
<CountTo
|
||||
class="number box-title"
|
||||
:endVal="homestatistics.customer_deal"
|
||||
:duration="1000"
|
||||
separator=""
|
||||
></CountTo>
|
||||
<div class="change-box">
|
||||
<span class="change-text">已丢失</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="boxshadow">
|
||||
<div class="heard">
|
||||
<div class="heard-title">跟进提醒</div>
|
||||
<el-select
|
||||
v-model="remindRange"
|
||||
placeholder="请选择"
|
||||
class="heard-select"
|
||||
style="min-width: 120px"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="当天" value="0" />
|
||||
<el-option label="近三天" value="1" />
|
||||
<el-option label="近七天" value="2" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="table">
|
||||
<ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
|
||||
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" lass="customer-table">
|
||||
<template #default>
|
||||
<el-table-column prop="contacts" label="客户名称" min-width="120"></el-table-column>
|
||||
<el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
|
||||
<el-table-column prop="follow_next" label="下次跟进时间" min-width="140"></el-table-column>
|
||||
<el-table-column label="状态" min-width="140">
|
||||
<template #default="scope">
|
||||
<span :class="getCountdownClass(scope.row.follow_next)">
|
||||
|
||||
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||
{{ getCountdown(scope.row.follow_next) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="100">
|
||||
<template #default="scope">
|
||||
<div class="follow-action" @click="goAddFollow(scope.row)">
|
||||
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||
跟进
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { CountTo } from 'vue3-count-to'
|
||||
import adduser from '@/assets/img/crm/adduser.png'
|
||||
import addbf from '@/assets/img/crm/addbf.png'
|
||||
import addgj from '@/assets/img/crm/addgj.png'
|
||||
import deal from '@/assets/img/crm/deal.png'
|
||||
import gjing from '@/assets/img/crm/gjing.png'
|
||||
import loss from '@/assets/img/crm/loss.png'
|
||||
import dayjs from 'dayjs'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
const router = useRouter()
|
||||
|
||||
function getCurrentMonth() {
|
||||
const d = new Date()
|
||||
const month = d.getMonth() + 1
|
||||
return `${d.getFullYear()}-${month < 10 ? '0' + month : month}`
|
||||
}
|
||||
|
||||
const selectedDate = ref(getCurrentMonth())
|
||||
const remindRange = ref('')
|
||||
const loading = ref(false)
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
watch([remindRange], () => {
|
||||
pagination.currentPage = 1
|
||||
gettableList()
|
||||
})
|
||||
watch(selectedDate, (val) => {
|
||||
console.log('用户选择的时间:', val)
|
||||
gethomestatistics(val)
|
||||
})
|
||||
//获取统计数据 homestatistics
|
||||
interface CustomerInfo {
|
||||
[key: string]: any
|
||||
}
|
||||
const homestatistics = ref<CustomerInfo>({})
|
||||
const gethomestatistics = async (val:any) => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await CrmService.homestatistics({created:val?val:getCurrentMonth()})
|
||||
homestatistics.value = data
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// 获取列表数据
|
||||
const gettableList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const { currentPage, pageSize } = pagination
|
||||
const params: any = {
|
||||
current: currentPage,
|
||||
size: pageSize
|
||||
}
|
||||
|
||||
if (remindRange.value) params.filter = remindRange.value
|
||||
const { data, current, size, total } = await CrmService.waitFollow(params)
|
||||
tableData.value = data.map((item: any, index: number) => ({
|
||||
...item
|
||||
}))
|
||||
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// 处理表格分页变化
|
||||
const handleSizeChange = (newPageSize: number) => {
|
||||
pagination.pageSize = newPageSize
|
||||
// getWorkList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (newCurrentPage: number) => {
|
||||
pagination.currentPage = newCurrentPage
|
||||
// getWorkList()
|
||||
}
|
||||
const timer = ref(0)
|
||||
const refreshKey = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
gethomestatistics()
|
||||
gettableList()
|
||||
timer.value = window.setInterval(() => {
|
||||
refreshKey.value++
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
}
|
||||
})
|
||||
|
||||
function getCountdown(targetDate: string) {
|
||||
// 让 refreshKey 成为依赖，确保每秒刷新
|
||||
refreshKey.value
|
||||
const now = dayjs()
|
||||
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||
if (!target.isValid()) return '时间格式错误'
|
||||
const diff = target.diff(now)
|
||||
if (diff <= 0) return '已超时'
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
|
||||
const minutes = Math.floor((diff / (1000 * 60)) % 60)
|
||||
const seconds = Math.floor((diff / 1000) % 60)
|
||||
return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
|
||||
}
|
||||
|
||||
function getCountdownClass(targetDate: string) {
|
||||
const now = dayjs()
|
||||
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||
if (!target.isValid() || target.diff(now) <= 0) {
|
||||
return 'countdown-danger'
|
||||
}
|
||||
return 'countdown-success'
|
||||
}
|
||||
|
||||
function goAddFollow(row: any) {
|
||||
router.push({
|
||||
path: '/crmpc/customer/followadd',
|
||||
query: { id: row.id } // 可带客户名等参数
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.homeheard{
|
||||
background:
|
||||
url('@/assets/img/crm/hometop.png') no-repeat center/cover,
|
||||
linear-gradient(90deg, #EDF2FF 0%, #CBE5FC 72.55%);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
color: #333333;
|
||||
|
||||
}
|
||||
.daynum{
|
||||
margin-left: 20px;
|
||||
color: #3471FF;
|
||||
}
|
||||
.day{
|
||||
font-size: 70px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card-list {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--el-card-bg-color) !important;
|
||||
|
||||
.art-custom-card {
|
||||
border: none !important;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
align-items: end;
|
||||
padding: 0 18px;
|
||||
list-style: none;
|
||||
transition: all 0.3s ease;
|
||||
$icon-size: 52px;
|
||||
|
||||
.iconfont-sys {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
font-size: 22px;
|
||||
line-height: $icon-size;
|
||||
color: var(--el-color-primary) !important;
|
||||
text-align: center;
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.des {
|
||||
display: block;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.number {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.change-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.change-text {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
// color: var(--art-text-gray-600);
|
||||
}
|
||||
|
||||
.change {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
|
||||
&.text-success {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
&.text-danger {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heard {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.heard-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
border-left: 4px solid #3471FF;
|
||||
padding-left: 12px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.heard-select {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.card-list {
|
||||
.art-custom-card {
|
||||
.iconfont-sys {
|
||||
background-color: #232323 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
::v-deep .custom-table-header {
|
||||
background: #F7F9FA !important;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
::v-deep .el-table__body tr.custom-table-row td {
|
||||
border-bottom: 1px solid #F7F9FA !important;
|
||||
border-right: 1px solid #F7F9FA !important;
|
||||
}
|
||||
::v-deep .el-table__body tr td:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
::v-deep .el-table__body tr:last-child td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
::v-deep .el-table__header-wrapper th {
|
||||
border-bottom: 1px solid #F7F9FA !important;
|
||||
border-right: 1px solid #F7F9FA !important;
|
||||
}
|
||||
::v-deep .el-table__header-wrapper th:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
::v-deep .el-table {
|
||||
border: 1px solid #F7F9FA !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.countdown-danger {
|
||||
color: #FF0000 !important;
|
||||
}
|
||||
.countdown-success {
|
||||
color: #00A43F !important;
|
||||
}
|
||||
.follow-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="recycle-page">
|
||||
<el-card class="recycle-card">
|
||||
<div class="recycle-title">
|
||||
<span class="title-dot"></span>回收站
|
||||
</div>
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:currentPage="pagination.currentPage"
|
||||
:pageSize="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:marginTop="10"
|
||||
@selection-change="handleSelectionChange"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<el-table-column prop="contacts" label="姓名" min-width="120"></el-table-column>
|
||||
<el-table-column prop="phone" label="联系方式" min-width="120"></el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="160px">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" @click="onDetail(scope.row)" size="small">恢复客户</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
const loading = ref(false)
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref<any[]>([])
|
||||
// 获取列表数据
|
||||
const gettableList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const { currentPage, pageSize } = pagination
|
||||
const params: any = {
|
||||
current: currentPage,
|
||||
size: pageSize,
|
||||
recycle:'recycle'
|
||||
}
|
||||
const { data, current, size, total } = await CrmService.getcustomerList(params)
|
||||
tableData.value = data.map((item: any, index: number) => ({
|
||||
...item
|
||||
}))
|
||||
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// 选中的行数据
|
||||
const selectedRows = ref<any[]>([])
|
||||
// 处理表格行选择变化
|
||||
const handleSelectionChange = (selection: any[]) => {
|
||||
selectedRows.value = selection
|
||||
}
|
||||
// 处理表格分页变化
|
||||
const handleSizeChange = (newPageSize: number) => {
|
||||
pagination.pageSize = newPageSize
|
||||
gettableList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (newCurrentPage: number) => {
|
||||
pagination.currentPage = newCurrentPage
|
||||
gettableList()
|
||||
}
|
||||
onMounted(() => {
|
||||
gettableList()
|
||||
})
|
||||
const onDetail = async (row: any) => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要恢复此客户吗？',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(async () => {
|
||||
const res = await CrmService.customerrestore({id:row.id})
|
||||
ElMessage.success(res?.message || '提交成功！')
|
||||
gettableList()
|
||||
// 你可以在这里调用接口或做后续处理
|
||||
}).catch(() => {
|
||||
// 用户点击了取消
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.recycle-page {
|
||||
background: #fafbfc;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
.recycle-card {
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
.recycle-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 16px;
|
||||
background: #3471FF;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.el-table .hide-header th {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -3,64 +3,57 @@
|
||||
<div class="content">
|
||||
<div class="left-wrap">
|
||||
<div class="user-wrap box-style">
|
||||
<img class="bg" src="@imgs/user/bg.webp" />
|
||||
<img class="avatar" src="@imgs/user/avatar.webp" />
|
||||
<h2 class="name">{{ userInfo.userName }}</h2>
|
||||
<p class="des">Art Design Pro 是一款漂亮的后台管理系统模版.</p>
|
||||
|
||||
<!-- <img class="bg" src="@imgs/user/bg.webp" /> -->
|
||||
<img class="avatar" :src="userInfo.avatar_full" />
|
||||
<h2 class="name">{{userInfo.name}}</h2>
|
||||
<p class="des">ID:{{userInfo.id}}</p>
|
||||
<div class="outer-info">
|
||||
<div>
|
||||
<i class="iconfont-sys"></i>
|
||||
<span>jdkjjfnndf@mall.com</span>
|
||||
<div class="info-row">
|
||||
<span class="info-label">电 话：</span>
|
||||
<span class="info-value">{{userInfo.phone}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="iconfont-sys"></i>
|
||||
<span>交互专家</span>
|
||||
<div class="info-row">
|
||||
<span class="info-label">职 位：</span>
|
||||
<span class="info-value">{{userInfo.position}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="iconfont-sys"></i>
|
||||
<span>广东省深圳市</span>
|
||||
<div class="info-row">
|
||||
<span class="info-label">公 司：</span>
|
||||
<span class="info-value">{{userInfo.corp_name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="iconfont-sys"></i>
|
||||
<span>字节跳动－某某平台部－UED</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lables">
|
||||
<h3>标签</h3>
|
||||
<div>
|
||||
<div v-for="item in lableList" :key="item">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">国 家：</span>
|
||||
<span class="info-value">{{userInfo.country_txt}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-carousel class="gallery" height="160px"
|
||||
:interval="5000"
|
||||
indicator-position="none"
|
||||
>
|
||||
<el-carousel-item class="item" v-for="item in galleryList" :key="item">
|
||||
<img :src="item"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel> -->
|
||||
</div>
|
||||
<div class="right-wrap">
|
||||
<div class="info box-style">
|
||||
<h1 class="title">基本设置</h1>
|
||||
<h1 class="title"><span class="border" style="margin-right: 5px;"></span>基本信息</h1>
|
||||
|
||||
<ElForm
|
||||
:model="form"
|
||||
class="form"
|
||||
ref="ruleFormRef"
|
||||
:rules="rules"
|
||||
label-width="86px"
|
||||
label-position="top"
|
||||
label-position="left"
|
||||
>
|
||||
<ElFormItem label="头像" prop="avatar">
|
||||
<el-upload
|
||||
class="qrcode-upload"
|
||||
:action="actionImageUplode"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
:on-success="handleUploadavatar"
|
||||
>
|
||||
<div class="qrcode-upload-box">
|
||||
<img class="avatar" :src="imageUrlavatar"/>
|
||||
</div>
|
||||
</el-upload>
|
||||
</ElFormItem>
|
||||
<ElRow>
|
||||
<ElFormItem label="姓名" prop="realName">
|
||||
<el-input v-model="form.realName" :disabled="!isEdit" />
|
||||
<ElFormItem label="昵称" prop="name">
|
||||
<el-input v-model="form.name" :disabled="!isEdit" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="性别" prop="sex" class="right-input">
|
||||
<ElSelect v-model="form.sex" placeholder="Select" :disabled="!isEdit">
|
||||
@@ -75,29 +68,56 @@
|
||||
</ElRow>
|
||||
|
||||
<ElRow>
|
||||
<ElFormItem label="昵称" prop="nikeName">
|
||||
<ElInput v-model="form.nikeName" :disabled="!isEdit" />
|
||||
<ElFormItem label="联系方式" prop="phone">
|
||||
<ElInput v-model="form.phone" :disabled="!isEdit" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="邮箱" prop="email" class="right-input">
|
||||
<ElInput v-model="form.email" :disabled="!isEdit" />
|
||||
<ElFormItem label="职务" prop="position" class="right-input">
|
||||
<ElInput v-model="form.position" :disabled="!isEdit" />
|
||||
</ElFormItem>
|
||||
</ElRow>
|
||||
|
||||
<ElRow>
|
||||
<ElFormItem label="手机" prop="mobile">
|
||||
<ElInput v-model="form.mobile" :disabled="!isEdit" />
|
||||
<ElFormItem label="公司" prop="company">
|
||||
<ElInput v-model="form.corp_name" disabled/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="地址" prop="address" class="right-input">
|
||||
<ElInput v-model="form.address" :disabled="!isEdit" />
|
||||
<ElFormItem label="国家" prop="address" class="right-input">
|
||||
<el-select v-model="form.country_id" filterable placeholder="请选择国家" :disabled="!isEdit" >
|
||||
<el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
</ElRow>
|
||||
|
||||
<ElFormItem label="个人介绍" prop="des" :style="{ height: '130px' }">
|
||||
<ElInput type="textarea" :rows="4" v-model="form.des" :disabled="!isEdit" />
|
||||
</ElFormItem>
|
||||
|
||||
<ElRow>
|
||||
<ElFormItem label="二维码" prop="socialize" :class="isEdit?'qrcode-radio-group':''">
|
||||
<el-radio-group v-model="form.socialize" v-if="isEdit">
|
||||
<el-radio label="微信">微信</el-radio>
|
||||
<el-radio label="WhatsApp">WhatsApp</el-radio>
|
||||
</el-radio-group>
|
||||
<template v-else>
|
||||
<img v-if="form.socialize_pic_full" :src="form.socialize_pic_full" class="qrcode-img" />
|
||||
<span v-else class="qrcode-upload-text">暂无二维码</span>
|
||||
</template>
|
||||
</ElFormItem>
|
||||
<ElFormItem v-if="isEdit" label="上传二维码" prop="address" class="right-input">
|
||||
<el-upload
|
||||
class="qrcode-upload"
|
||||
:action="actionImageUplode"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
:on-success="handleUploadavatarqrcode"
|
||||
>
|
||||
<div class="qrcode-upload-box">
|
||||
<img v-if="form.socialize_pic_full" :src="socialize_pic_full" class="qrcode-img" />
|
||||
<span v-else class="qrcode-upload-text">
|
||||
<img :src="imageUrl" class="qrcode-img" />
|
||||
</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
</ElFormItem>
|
||||
</ElRow>
|
||||
|
||||
<div class="el-form-item-right">
|
||||
<ElButton type="primary" style="width: 90px" v-ripple @click="edit">
|
||||
<i v-if="!isEdit" class="iconfont-sys"> </i>
|
||||
{{ isEdit ? '保存' : '编辑' }}
|
||||
</ElButton>
|
||||
</div>
|
||||
@@ -107,7 +127,7 @@
|
||||
<div class="info box-style" style="margin-top: 20px">
|
||||
<h1 class="title">更改密码</h1>
|
||||
|
||||
<ElForm :model="pwdForm" class="form" label-width="86px" label-position="top">
|
||||
<ElForm :model="pwdForm" class="form" label-width="86px" label-position="left">
|
||||
<ElFormItem label="当前密码" prop="password">
|
||||
<ElInput
|
||||
v-model="pwdForm.password"
|
||||
@@ -117,9 +137,9 @@
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="新密码" prop="newPassword">
|
||||
<ElFormItem label="新密码" prop="password_new">
|
||||
<ElInput
|
||||
v-model="pwdForm.newPassword"
|
||||
v-model="pwdForm.password_new"
|
||||
type="password"
|
||||
:disabled="!isEditPwd"
|
||||
show-password
|
||||
@@ -137,6 +157,7 @@
|
||||
|
||||
<div class="el-form-item-right">
|
||||
<ElButton type="primary" style="width: 90px" v-ripple @click="editPwd">
|
||||
<i v-if="!isEditPwd" class="iconfont-sys"> </i>
|
||||
{{ isEditPwd ? '保存' : '编辑' }}
|
||||
</ElButton>
|
||||
</div>
|
||||
@@ -150,94 +171,116 @@
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { ElForm, FormInstance, FormRules } from 'element-plus'
|
||||
|
||||
import imageUrl from '@/assets/img/crm/upimg.png'
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
||||
const { uploadHeaders } = useUploadHeaders()
|
||||
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
||||
defineOptions({ name: 'UserCenter' })
|
||||
|
||||
const userStore = useUserStore()
|
||||
const userInfo = computed(() => userStore.getUserInfo)
|
||||
|
||||
const isEdit = ref(false)
|
||||
const isEditPwd = ref(false)
|
||||
const date = ref('')
|
||||
const form = reactive({
|
||||
realName: 'John Snow',
|
||||
nikeName: '皮卡丘',
|
||||
email: '59301283@mall.com',
|
||||
mobile: '18888888888',
|
||||
address: '广东省深圳市宝安区西乡街道101栋201',
|
||||
sex: '2',
|
||||
des: 'Art Design Pro 是一款漂亮的后台管理系统模版.'
|
||||
})
|
||||
|
||||
const pwdForm = reactive({
|
||||
password: '123456',
|
||||
newPassword: '123456',
|
||||
confirmPassword: '123456'
|
||||
})
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
realName: [
|
||||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
],
|
||||
nikeName: [
|
||||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
|
||||
mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
||||
sex: [{ type: 'array', required: true, message: '请选择性别', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '男'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '女'
|
||||
// 定义客户详情类型
|
||||
interface CustomerInfo {
|
||||
[key: string]: any
|
||||
}
|
||||
const imageUrlavatar=ref('')
|
||||
const socialize_pic_full=ref('')
|
||||
const countryOptions = ref<any>()
|
||||
const form= ref<CustomerInfo>({})
|
||||
//获取公司 getCompanyList
|
||||
const companyList = ref<any>()
|
||||
//国家
|
||||
const getarea = async () => {
|
||||
try {
|
||||
// 这里调用获取品牌列表的接口
|
||||
const res = await CrmService.getCountry()
|
||||
countryOptions.value = res||[]
|
||||
} catch (error) { countryOptions.value = [] }
|
||||
}
|
||||
const userInfo = ref<CustomerInfo>({})
|
||||
const getuserInfo = async () => {
|
||||
const data = await CrmService.userget()
|
||||
userInfo.value = data
|
||||
form.value = data
|
||||
imageUrlavatar.value = data.avatar_full
|
||||
socialize_pic_full.value = data.socialize_pic_full
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
const isEdit = ref(false)
|
||||
const isEditPwd = ref(false)
|
||||
const pwdForm = reactive({
|
||||
password: '',
|
||||
password_new: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const lableList: Array<string> = ['专注设计', '很有想法', '辣~', '大长腿', '川妹子', '海纳百川']
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
||||
onMounted(() => {
|
||||
getDate()
|
||||
})
|
||||
// const rules = reactive<FormRules>({
|
||||
// realName: [
|
||||
// { required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
// { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
// ],
|
||||
// nikeName: [
|
||||
// { required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
// { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
// ],
|
||||
// email: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
|
||||
// mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
|
||||
// address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
||||
// sex: [{ type: 'array', required: true, message: '请选择性别', trigger: 'blur' }]
|
||||
// })
|
||||
|
||||
const getDate = () => {
|
||||
const d = new Date()
|
||||
const h = d.getHours()
|
||||
let text = ''
|
||||
|
||||
if (h >= 6 && h < 9) {
|
||||
text = '早上好'
|
||||
} else if (h >= 9 && h < 11) {
|
||||
text = '上午好'
|
||||
} else if (h >= 11 && h < 13) {
|
||||
text = '中午好'
|
||||
} else if (h >= 13 && h < 18) {
|
||||
text = '下午好'
|
||||
} else if (h >= 18 && h < 24) {
|
||||
text = '晚上好'
|
||||
} else if (h >= 0 && h < 6) {
|
||||
text = '很晚了，早点睡'
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '男'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '女'
|
||||
}
|
||||
]
|
||||
onMounted(async () => {
|
||||
await getarea()
|
||||
await getuserInfo()
|
||||
})
|
||||
const edit = async() => {
|
||||
if(isEdit.value){
|
||||
const res = await CrmService.crmuseredit(form.value)
|
||||
ElMessage.success(res?.message || '操作成功')
|
||||
getuserInfo()
|
||||
}
|
||||
isEdit.value = !isEdit.value
|
||||
|
||||
}
|
||||
|
||||
date.value = text
|
||||
}
|
||||
|
||||
const edit = () => {
|
||||
isEdit.value = !isEdit.value
|
||||
}
|
||||
|
||||
const editPwd = () => {
|
||||
isEditPwd.value = !isEditPwd.value
|
||||
}
|
||||
const editPwd = async() => {
|
||||
if(isEditPwd.value){
|
||||
// 判断新密码和确认密码是否一致
|
||||
if (pwdForm.password_new !== pwdForm.confirmPassword) {
|
||||
ElMessage.error('新密码和确认密码不一致')
|
||||
return
|
||||
}
|
||||
const res = await CrmService.savePassword(pwdForm)
|
||||
ElMessage.success(res?.message || '操作成功')
|
||||
}
|
||||
isEditPwd.value = !isEditPwd.value
|
||||
}
|
||||
//头像上传
|
||||
function handleUploadavatar(response: any) {
|
||||
// 假设返回图片地址字段为 response.url 或 response.data.url
|
||||
imageUrlavatar.value = response.url || (response.data && response.data.file_url) || ''
|
||||
// 如需同步到 form.picture
|
||||
form.value.avatar = response.url || (response.data && response.data.file_name) || ''
|
||||
}
|
||||
//二维码上传
|
||||
function handleUploadavatarqrcode(response: any) {
|
||||
// 假设返回图片地址字段为 response.url 或 response.data.url
|
||||
socialize_pic_full.value = response.url || (response.data && response.data.file_url) || ''
|
||||
// 如需同步到 form.picture
|
||||
form.value.socialize_pic = response.url || (response.data && response.data.file_name) || ''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -253,6 +296,19 @@
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.qrcode-radio-group .el-form-item__content){
|
||||
height: 40px;
|
||||
}
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.qrcode-img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.page-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -274,33 +330,25 @@
|
||||
margin-top: 10px;
|
||||
|
||||
.left-wrap {
|
||||
width: 450px;
|
||||
width: 350px;
|
||||
margin-right: 25px;
|
||||
|
||||
.user-wrap {
|
||||
position: relative;
|
||||
height: 600px;
|
||||
height: 400px;
|
||||
padding: 35px 40px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background: var(--art-main-bg-color);
|
||||
// background: var(--art-main-bg-color);
|
||||
background: linear-gradient(180deg, #E9F0FF 0%, #FFFFFF 67.9%);
|
||||
|
||||
border-radius: $box-radius;
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-top: 120px;
|
||||
// margin-top: 120px;
|
||||
object-fit: cover;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
@@ -318,19 +366,28 @@
|
||||
}
|
||||
|
||||
.outer-info {
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
text-align: left;
|
||||
|
||||
> div {
|
||||
margin-top: 10px;
|
||||
|
||||
span {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.info-label {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
color: #222;
|
||||
text-align: right;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.info-value {
|
||||
color: #333;
|
||||
margin-left: 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lables {
|
||||
@@ -387,7 +444,7 @@
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--art-text-gray-800);
|
||||
border-bottom: 1px solid var(--art-border-color);
|
||||
// border-bottom: 1px solid var(--art-border-color);
|
||||
}
|
||||
|
||||
.form {
|
||||
|
||||
Reference in New Issue
Block a user