Merge branch 'master' of https://gitee.com/dhb52/yudao-ui-admin-vue3 into feature/im
# Conflicts: # package.jsonfeature/im
YunaiV
commit
b7d2521fff
8
.env.dev
8
.env.dev
|
|
@ -1,20 +1,16 @@
|
|||
# 开发环境：本地只启动前端项目，依赖开发环境（后端、APP）
|
||||
NODE_ENV=development
|
||||
NODE_ENV=production
|
||||
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn'
|
||||
# VITE_BASE_URL='http://dofast.demo.huizhizao.vip:20001'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
|
||||
VITE_UPLOAD_TYPE=server
|
||||
# 上传路径
|
||||
VITE_UPLOAD_URL='http://api-dashboard.yudao.iocoder.cn/admin-api/infra/file/upload'
|
||||
|
||||
# 接口前缀
|
||||
VITE_API_BASEPATH=/dev-api
|
||||
|
||||
# 接口地址
|
||||
VITE_API_URL=/admin-api
|
||||
|
||||
|
|
@ -37,4 +33,4 @@ VITE_OUT_DIR=dist
|
|||
VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
|
||||
|
||||
# 验证码的开关
|
||||
VITE_APP_CAPTCHA_ENABLE=false
|
||||
VITE_APP_CAPTCHA_ENABLE=true
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@ VITE_UPLOAD_TYPE=server
|
|||
# 上传路径
|
||||
VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload'
|
||||
|
||||
# 接口前缀
|
||||
VITE_API_BASEPATH=/dev-api
|
||||
|
||||
# 接口地址
|
||||
VITE_API_URL=/admin-api
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@ VITE_UPLOAD_TYPE=server
|
|||
# 上传路径
|
||||
VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload'
|
||||
|
||||
# 接口前缀
|
||||
VITE_API_BASEPATH=
|
||||
|
||||
# 接口地址
|
||||
VITE_API_URL=/admin-api
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@ VITE_UPLOAD_TYPE=server
|
|||
# 上传路径
|
||||
VITE_UPLOAD_URL='http://api-dashboard.yudao.iocoder.cn/admin-api/infra/file/upload'
|
||||
|
||||
# 接口前缀
|
||||
VITE_API_BASEPATH=
|
||||
|
||||
# 接口地址
|
||||
VITE_API_URL=/admin-api
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@ VITE_UPLOAD_TYPE=server
|
|||
# 上传路径
|
||||
VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload'
|
||||
|
||||
# 接口前缀
|
||||
VITE_API_BASEPATH=
|
||||
|
||||
# 接口地址
|
||||
VITE_API_URL=/admin-api
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ dist
|
|||
dist-ssr
|
||||
*.local
|
||||
/dist*
|
||||
*-lock.*
|
||||
pnpm-debug
|
||||
auto-*.d.ts
|
||||
.idea
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"christian-kohler.path-intellisense",
|
||||
"vscode-icons-team.vscode-icons",
|
||||
"davidanson.vscode-markdownlint",
|
||||
"stylelint.vscode-stylelint",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"mrmlnc.vscode-less",
|
||||
|
|
|
|||
40
README.md
40
README.md
|
|
@ -146,27 +146,25 @@ ps：核心功能已经实现，正在对接微信小程序中...
|
|||
|
||||
### 基础设施
|
||||
|
||||
| | 功能 | 描述 |
|
||||
|-----|----------|----------------------------------------------|
|
||||
| 🚀 | 代码生成 | 前后端代码的生成（Java、Vue、SQL、单元测试），支持 CRUD 下载 |
|
||||
| 🚀 | 系统接口 | 基于 Swagger 自动生成相关的 RESTful API 接口文档 |
|
||||
| 🚀 | 数据库文档 | 基于 Screw 自动生成数据库文档，支持导出 Word、HTML、MD 格式 |
|
||||
| | 表单构建 | 拖动表单元素生成相应的 HTML 代码，支持导出 JSON、Vue 文件 |
|
||||
| 🚀 | 配置管理 | 对系统动态配置常用参数，支持 SpringBoot 加载 |
|
||||
| ⭐️ | 定时任务 | 在线（添加、修改、删除)任务调度包含执行结果日志 |
|
||||
| 🚀 | 文件服务 | 支持将文件存储到 S3（MinIO、阿里云、腾讯云、七牛云）、本地、FTP、数据库等 |
|
||||
| 🚀 | API 日志 | 包括 RESTful API 访问日志、异常日志两部分，方便排查 API 相关的问题 |
|
||||
| | MySQL 监控 | 监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈 |
|
||||
| | Redis 监控 | 监控 Redis 数据库的使用情况，使用的 Redis Key 管理 |
|
||||
| 🚀 | 消息队列 | 基于 Redis 实现消息队列，Stream 提供集群消费，Pub/Sub 提供广播消费 |
|
||||
| 🚀 | Java 监控 | 基于 Spring Boot Admin 实现 Java 应用的监控 |
|
||||
| 🚀 | 链路追踪 | 接入 SkyWalking 组件，实现链路追踪 |
|
||||
| 🚀 | 日志中心 | 接入 SkyWalking 组件，实现日志中心 |
|
||||
| 🚀 | 分布式锁 | 基于 Redis 实现分布式锁，满足并发场景 |
|
||||
| 🚀 | 幂等组件 | 基于 Redis 实现幂等组件，解决重复请求问题 |
|
||||
| 🚀 | 服务保障 | 基于 Resilience4j 实现服务的稳定性，包括限流、熔断等功能 |
|
||||
| 🚀 | 日志服务 | 轻量级日志中心，查看远程服务器的日志 |
|
||||
| 🚀 | 单元测试 | 基于 JUnit + Mockito 实现单元测试，保证功能的正确性、代码的质量等 |
|
||||
| | 功能 | 描述 |
|
||||
|----|----------|----------------------------------------------|
|
||||
| 🚀 | 代码生成 | 前后端代码的生成（Java、Vue、SQL、单元测试），支持 CRUD 下载 |
|
||||
| 🚀 | 系统接口 | 基于 Swagger 自动生成相关的 RESTful API 接口文档 |
|
||||
| 🚀 | 数据库文档 | 基于 Screw 自动生成数据库文档，支持导出 Word、HTML、MD 格式 |
|
||||
| | 表单构建 | 拖动表单元素生成相应的 HTML 代码，支持导出 JSON、Vue 文件 |
|
||||
| 🚀 | 配置管理 | 对系统动态配置常用参数，支持 SpringBoot 加载 |
|
||||
| ⭐️ | 定时任务 | 在线（添加、修改、删除)任务调度包含执行结果日志 |
|
||||
| 🚀 | 文件服务 | 支持将文件存储到 S3（MinIO、阿里云、腾讯云、七牛云）、本地、FTP、数据库等 |
|
||||
| 🚀 | API 日志 | 包括 RESTful API 访问日志、异常日志两部分，方便排查 API 相关的问题 |
|
||||
| | MySQL 监控 | 监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈 |
|
||||
| | Redis 监控 | 监控 Redis 数据库的使用情况，使用的 Redis Key 管理 |
|
||||
| 🚀 | 消息队列 | 基于 Redis 实现消息队列，Stream 提供集群消费，Pub/Sub 提供广播消费 |
|
||||
| 🚀 | Java 监控 | 基于 Spring Boot Admin 实现 Java 应用的监控 |
|
||||
| 🚀 | 链路追踪 | 接入 SkyWalking 组件，实现链路追踪 |
|
||||
| 🚀 | 日志中心 | 接入 SkyWalking 组件，实现日志中心 |
|
||||
| 🚀 | 服务保障 | 基于 Redis 实现分布式锁、幂等、限流功能，满足高并发场景 |
|
||||
| 🚀 | 日志服务 | 轻量级日志中心，查看远程服务器的日志 |
|
||||
| 🚀 | 单元测试 | 基于 JUnit + Mockito 实现单元测试，保证功能的正确性、代码的质量等 |
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
23
package.json
23
package.json
|
|
@ -1,15 +1,15 @@
|
|||
{
|
||||
"name": "yudao-ui-admin-vue3",
|
||||
"version": "2.0.1-snapshot",
|
||||
"version": "2.1.0-snapshot",
|
||||
"description": "基于vue3、vite4、element-plus、typesScript",
|
||||
"author": "xingyu",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"i": "pnpm install",
|
||||
"dev": "vite --mode local-dev",
|
||||
"dev": "vite",
|
||||
"dev-server": "vite --mode dev",
|
||||
"ts:check": "vue-tsc --noEmit",
|
||||
"build:local-dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode local-dev",
|
||||
"build:local": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build",
|
||||
"build:dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode local-dev",
|
||||
"build:test": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode test",
|
||||
"build:stage": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode stage",
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
"@wangeditor/editor-for-vue": "^5.1.10",
|
||||
"@zxcvbn-ts/core": "^3.0.4",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.6.7",
|
||||
"axios": "^1.6.8",
|
||||
"benz-amr-recorder": "^1.1.5",
|
||||
"bpmn-js-token-simulation": "^0.10.0",
|
||||
"camunda-bpmn-moddle": "^7.0.1",
|
||||
|
|
@ -46,26 +46,25 @@
|
|||
"driver.js": "^1.3.1",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts-wordcloud": "^2.1.0",
|
||||
"element-plus": "2.5.3",
|
||||
"element-plus": "2.6.1",
|
||||
"fast-xml-parser": "^4.3.2",
|
||||
"highlight.js": "^11.9.0",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"min-dash": "^4.1.1",
|
||||
"mitt": "^3.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.0",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"qs": "^6.12.0",
|
||||
"steady-xml": "^0.1.0",
|
||||
"url": "^0.11.3",
|
||||
"video.js": "^7.21.5",
|
||||
"vue": "3.4.20",
|
||||
"vue": "3.4.21",
|
||||
"vue-at": "3.0.0-alpha.2",
|
||||
"vue-dompurify-html": "^4.1.4",
|
||||
"vue-i18n": "9.9.1",
|
||||
"vue-i18n": "9.10.2",
|
||||
"vue-router": "^4.3.0",
|
||||
"vue-types": "^5.1.1",
|
||||
"vuedraggable": "^4.1.0",
|
||||
|
|
@ -85,8 +84,8 @@
|
|||
"@types/qs": "^6.9.12",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@unocss/eslint-config": "^0.57.4",
|
||||
"@unocss/transformer-variant-group": "^0.58.5",
|
||||
"@unocss/eslint-config": "^0.57.4",
|
||||
"@vitejs/plugin-legacy": "^5.3.1",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
|
|
@ -104,6 +103,7 @@
|
|||
"postcss-html": "^1.6.0",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-eslint": "^16.3.0",
|
||||
"rimraf": "^5.0.5",
|
||||
"rollup": "^4.12.0",
|
||||
"sass": "^1.69.5",
|
||||
|
|
@ -138,7 +138,6 @@
|
|||
"url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues"
|
||||
},
|
||||
"homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3",
|
||||
"packageManager": "pnpm@8.6.0",
|
||||
"engines": {
|
||||
"node": ">= 16.0.0",
|
||||
"pnpm": ">=8.6.0"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -15,9 +15,9 @@ export interface PermissionVO {
|
|||
}
|
||||
|
||||
export interface TransferReqVO {
|
||||
bizId: number // 模块编号
|
||||
id: number // 模块编号
|
||||
newOwnerUserId: number // 新负责人的用户编号
|
||||
oldOwnerPermissionLevel: number // 老负责人加入团队后的权限级别
|
||||
oldOwnerPermissionLevel?: number // 老负责人加入团队后的权限级别
|
||||
toBizTypes?: number[] // 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,21 +14,21 @@ export interface CrmStatisticsCustomerSummaryByUserRespVO {
|
|||
receivablePrice: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsFollowupSummaryByDateRespVO {
|
||||
export interface CrmStatisticsFollowUpSummaryByDateRespVO {
|
||||
time: string
|
||||
followupRecordCount: number
|
||||
followupCustomerCount: number
|
||||
followUpRecordCount: number
|
||||
followUpCustomerCount: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsFollowupSummaryByUserRespVO {
|
||||
export interface CrmStatisticsFollowUpSummaryByUserRespVO {
|
||||
ownerUserName: string
|
||||
followupRecordCount: number
|
||||
followupCustomerCount: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsFollowupSummaryByTypeRespVO {
|
||||
followupType: string
|
||||
followupRecordCount: number
|
||||
export interface CrmStatisticsFollowUpSummaryByTypeRespVO {
|
||||
followUpType: string
|
||||
followUpRecordCount: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsCustomerContractSummaryRespVO {
|
||||
|
|
@ -44,6 +44,18 @@ export interface CrmStatisticsCustomerContractSummaryRespVO {
|
|||
orderDate: Date
|
||||
}
|
||||
|
||||
export interface CrmStatisticsPoolSummaryByDateRespVO {
|
||||
time: string
|
||||
customerPutCount: number
|
||||
customerTakeCount: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsPoolSummaryByUserRespVO {
|
||||
ownerUserName: string
|
||||
customerPutCount: number
|
||||
customerTakeCount: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsCustomerDealCycleByDateRespVO {
|
||||
time: string
|
||||
customerDealCycle: number
|
||||
|
|
@ -55,6 +67,18 @@ export interface CrmStatisticsCustomerDealCycleByUserRespVO {
|
|||
customerDealCount: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsCustomerDealCycleByAreaRespVO {
|
||||
areaName: string
|
||||
customerDealCycle: number
|
||||
customerDealCount: number
|
||||
}
|
||||
|
||||
export interface CrmStatisticsCustomerDealCycleByProductRespVO {
|
||||
productName: string
|
||||
customerDealCycle: number
|
||||
customerDealCount: number
|
||||
}
|
||||
|
||||
// 客户分析 API
|
||||
export const StatisticsCustomerApi = {
|
||||
// 1.1 客户总量分析(按日期)
|
||||
|
|
@ -72,23 +96,23 @@ export const StatisticsCustomerApi = {
|
|||
})
|
||||
},
|
||||
// 2.1 客户跟进次数分析(按日期)
|
||||
getFollowupSummaryByDate: (params: any) => {
|
||||
getFollowUpSummaryByDate: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-followup-summary-by-date',
|
||||
url: '/crm/statistics-customer/get-follow-up-summary-by-date',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 2.2 客户跟进次数分析(按用户)
|
||||
getFollowupSummaryByUser: (params: any) => {
|
||||
getFollowUpSummaryByUser: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-followup-summary-by-user',
|
||||
url: '/crm/statistics-customer/get-follow-up-summary-by-user',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 3.1 获取客户跟进方式统计数
|
||||
getFollowupSummaryByType: (params: any) => {
|
||||
getFollowUpSummaryByType: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-followup-summary-by-type',
|
||||
url: '/crm/statistics-customer/get-follow-up-summary-by-type',
|
||||
params
|
||||
})
|
||||
},
|
||||
|
|
@ -99,18 +123,46 @@ export const StatisticsCustomerApi = {
|
|||
params
|
||||
})
|
||||
},
|
||||
// 5.1 获取客户成交周期(按日期)
|
||||
// 5.1 获取客户公海分析(按日期)
|
||||
getPoolSummaryByDate: (param: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-pool-summary-by-date',
|
||||
params: param
|
||||
})
|
||||
},
|
||||
// 5.2 获取客户公海分析(按用户)
|
||||
getPoolSummaryByUser: (param: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-pool-summary-by-user',
|
||||
params: param
|
||||
})
|
||||
},
|
||||
// 6.1 获取客户成交周期(按日期)
|
||||
getCustomerDealCycleByDate: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-customer-deal-cycle-by-date',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 5.2 获取客户成交周期(按用户)
|
||||
// 6.2 获取客户成交周期(按用户)
|
||||
getCustomerDealCycleByUser: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-customer-deal-cycle-by-user',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 6.2 获取客户成交周期(按用户)
|
||||
getCustomerDealCycleByArea: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-customer-deal-cycle-by-area',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 6.2 获取客户成交周期(按用户)
|
||||
getCustomerDealCycleByProduct: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-customer/get-customer-deal-cycle-by-product',
|
||||
params
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
export interface CrmStatisticFunnelRespVO {
|
||||
customerCount: number // 客户数
|
||||
businessCount: number // 商机数
|
||||
businessWinCount: number // 赢单数
|
||||
}
|
||||
|
||||
export interface CrmStatisticsBusinessSummaryByDateRespVO {
|
||||
time: string // 时间
|
||||
businessCreateCount: number // 商机数
|
||||
totalPrice: number | string // 商机金额
|
||||
}
|
||||
|
||||
export interface CrmStatisticsBusinessInversionRateSummaryByDateRespVO {
|
||||
time: string // 时间
|
||||
businessCount: number // 商机数量
|
||||
businessWinCount: number // 赢单商机数
|
||||
}
|
||||
|
||||
// 客户分析 API
|
||||
export const StatisticFunnelApi = {
|
||||
// 1. 获取销售漏斗统计数据
|
||||
getFunnelSummary: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-funnel/get-funnel-summary',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 2. 获取商机结束状态统计
|
||||
getBusinessSummaryByEndStatus: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-funnel/get-business-summary-by-end-status',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 3. 获取新增商机分析(按日期)
|
||||
getBusinessSummaryByDate: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-funnel/get-business-summary-by-date',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 4. 获取商机转化率分析(按日期)
|
||||
getBusinessInversionRateSummaryByDate: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-funnel/get-business-inversion-rate-summary-by-date',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 5. 获取商机列表(按日期)
|
||||
getBusinessPageByDate: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-funnel/get-business-page-by-date',
|
||||
params
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
export interface StatisticsPerformanceRespVO {
|
||||
time: string
|
||||
currentMonthCount: number
|
||||
lastMonthCount: number
|
||||
lastYearCount: number
|
||||
}
|
||||
|
||||
// 排行 API
|
||||
export const StatisticsPerformanceApi = {
|
||||
// 员工获得合同金额统计
|
||||
getContractPricePerformance: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-performance/get-contract-price-performance',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 员工获得回款统计
|
||||
getReceivablePricePerformance: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-performance/get-receivable-price-performance',
|
||||
params
|
||||
})
|
||||
},
|
||||
//员工获得签约合同数量统计
|
||||
getContractCountPerformance: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-performance/get-contract-count-performance',
|
||||
params
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
export interface CrmStatisticCustomerBaseRespVO {
|
||||
customerCount: number
|
||||
dealCount: number
|
||||
dealPortion: string | number
|
||||
}
|
||||
|
||||
export interface CrmStatisticCustomerIndustryRespVO extends CrmStatisticCustomerBaseRespVO {
|
||||
industryId: number
|
||||
industryPortion: string | number
|
||||
}
|
||||
|
||||
export interface CrmStatisticCustomerSourceRespVO extends CrmStatisticCustomerBaseRespVO {
|
||||
source: number
|
||||
sourcePortion: string | number
|
||||
}
|
||||
|
||||
export interface CrmStatisticCustomerLevelRespVO extends CrmStatisticCustomerBaseRespVO {
|
||||
level: number
|
||||
levelPortion: string | number
|
||||
}
|
||||
|
||||
export interface CrmStatisticCustomerAreaRespVO extends CrmStatisticCustomerBaseRespVO {
|
||||
areaId: number
|
||||
areaName: string
|
||||
areaPortion: string | number
|
||||
}
|
||||
|
||||
// 客户分析 API
|
||||
export const StatisticsPortraitApi = {
|
||||
// 1. 获取客户行业统计数据
|
||||
getCustomerIndustry: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-portrait/get-customer-industry-summary',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 2. 获取客户来源统计数据
|
||||
getCustomerSource: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-portrait/get-customer-source-summary',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 3. 获取客户级别统计数据
|
||||
getCustomerLevel: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-portrait/get-customer-level-summary',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 4. 获取客户地区统计数据
|
||||
getCustomerArea: (params: any) => {
|
||||
return request.get({
|
||||
url: '/crm/statistics-portrait/get-customer-area-summary',
|
||||
params
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -8,11 +8,15 @@ export interface ApiAccessLogVO {
|
|||
applicationName: string
|
||||
requestMethod: string
|
||||
requestParams: string
|
||||
responseBody: string
|
||||
requestUrl: string
|
||||
userIp: string
|
||||
userAgent: string
|
||||
operateModule: string
|
||||
operateName: string
|
||||
operateType: number
|
||||
beginTime: Date
|
||||
endTIme: Date
|
||||
endTime: Date
|
||||
duration: number
|
||||
resultCode: number
|
||||
resultMsg: string
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ export type CodegenColumnVO = {
|
|||
columnComment: string
|
||||
nullable: number
|
||||
primaryKey: number
|
||||
autoIncrement: boolean
|
||||
ordinalPosition: number
|
||||
javaType: string
|
||||
javaField: string
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
// 导出Html
|
||||
export const exportHtml = () => {
|
||||
return request.download({ url: '/infra/db-doc/export-html' })
|
||||
}
|
||||
|
||||
// 导出Word
|
||||
export const exportWord = () => {
|
||||
return request.download({ url: '/infra/db-doc/export-word' })
|
||||
}
|
||||
|
||||
// 导出Markdown
|
||||
export const exportMarkdown = () => {
|
||||
return request.download({ url: '/infra/db-doc/export-markdown' })
|
||||
}
|
||||
|
|
@ -1,49 +1,53 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
// 秒杀时段 VO
|
||||
export interface SeckillConfigVO {
|
||||
id: number
|
||||
name: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
sliderPicUrls: string[]
|
||||
status: number
|
||||
id: number // 编号
|
||||
name: string // 秒杀时段名称
|
||||
startTime: string // 开始时间点
|
||||
endTime: string // 结束时间点
|
||||
sliderPicUrls: string[] // 秒杀轮播图
|
||||
status: number // 活动状态
|
||||
}
|
||||
|
||||
// 查询秒杀时段配置列表
|
||||
export const getSeckillConfigPage = async (params) => {
|
||||
return await request.get({ url: '/promotion/seckill-config/page', params })
|
||||
}
|
||||
// 秒杀时段 API
|
||||
export const SeckillConfigApi = {
|
||||
// 查询秒杀时段分页
|
||||
getSeckillConfigPage: async (params: any) => {
|
||||
return await request.get({ url: `/promotion/seckill-config/page`, params })
|
||||
},
|
||||
|
||||
// 查询秒杀时段配置详情
|
||||
export const getSeckillConfig = async (id: number) => {
|
||||
return await request.get({ url: '/promotion/seckill-config/get?id=' + id })
|
||||
}
|
||||
// 查询秒杀时段列表
|
||||
getSimpleSeckillConfigList: async () => {
|
||||
return await request.get({ url: `/promotion/seckill-config/simple-list` })
|
||||
},
|
||||
|
||||
// 获得所有开启状态的秒杀时段精简列表
|
||||
export const getSimpleSeckillConfigList = async () => {
|
||||
return await request.get({ url: '/promotion/seckill-config/list-all-simple' })
|
||||
}
|
||||
// 查询秒杀时段详情
|
||||
getSeckillConfig: async (id: number) => {
|
||||
return await request.get({ url: `/promotion/seckill-config/get?id=` + id })
|
||||
},
|
||||
|
||||
// 新增秒杀时段配置
|
||||
export const createSeckillConfig = async (data: SeckillConfigVO) => {
|
||||
return await request.post({ url: '/promotion/seckill-config/create', data })
|
||||
}
|
||||
// 新增秒杀时段
|
||||
createSeckillConfig: async (data: SeckillConfigVO) => {
|
||||
return await request.post({ url: `/promotion/seckill-config/create`, data })
|
||||
},
|
||||
|
||||
// 修改秒杀时段配置
|
||||
export const updateSeckillConfig = async (data: SeckillConfigVO) => {
|
||||
return await request.put({ url: '/promotion/seckill-config/update', data })
|
||||
}
|
||||
// 修改秒杀时段
|
||||
updateSeckillConfig: async (data: SeckillConfigVO) => {
|
||||
return await request.put({ url: `/promotion/seckill-config/update`, data })
|
||||
},
|
||||
|
||||
// 修改时段配置状态
|
||||
export const updateSeckillConfigStatus = (id: number, status: number) => {
|
||||
const data = {
|
||||
id,
|
||||
status
|
||||
// 删除秒杀时段
|
||||
deleteSeckillConfig: async (id: number) => {
|
||||
return await request.delete({ url: `/promotion/seckill-config/delete?id=` + id })
|
||||
},
|
||||
|
||||
// 修改时段配置状态
|
||||
updateSeckillConfigStatus: async (id: number, status: number) => {
|
||||
const data = {
|
||||
id,
|
||||
status
|
||||
}
|
||||
return request.put({ url: '/promotion/seckill-config/update-status', data: data })
|
||||
}
|
||||
return request.put({ url: '/promotion/seckill-config/update-status', data: data })
|
||||
}
|
||||
|
||||
// 删除秒杀时段配置
|
||||
export const deleteSeckillConfig = async (id: number) => {
|
||||
return await request.delete({ url: '/promotion/seckill-config/delete?id=' + id })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { formatDate } from '@/utils/formatTime'
|
|||
|
||||
/** 会员分析 Request VO */
|
||||
export interface MemberAnalyseReqVO {
|
||||
times: [dayjs.ConfigType, dayjs.ConfigType]
|
||||
times: dayjs.ConfigType[]
|
||||
}
|
||||
|
||||
/** 会员分析 Response VO */
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
export interface ErrorCodeVO {
|
||||
id: number | undefined
|
||||
type: number
|
||||
applicationName: string
|
||||
code: number | undefined
|
||||
message: string
|
||||
memo: string
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
// 查询错误码列表
|
||||
export const getErrorCodePage = (params: PageParam) => {
|
||||
return request.get({ url: '/system/error-code/page', params })
|
||||
}
|
||||
|
||||
// 查询错误码详情
|
||||
export const getErrorCode = (id: number) => {
|
||||
return request.get({ url: '/system/error-code/get?id=' + id })
|
||||
}
|
||||
|
||||
// 新增错误码
|
||||
export const createErrorCode = (data: ErrorCodeVO) => {
|
||||
return request.post({ url: '/system/error-code/create', data })
|
||||
}
|
||||
|
||||
// 修改错误码
|
||||
export const updateErrorCode = (data: ErrorCodeVO) => {
|
||||
return request.put({ url: '/system/error-code/update', data })
|
||||
}
|
||||
|
||||
// 删除错误码
|
||||
export const deleteErrorCode = (id: number) => {
|
||||
return request.delete({ url: '/system/error-code/delete?id=' + id })
|
||||
}
|
||||
// 导出错误码
|
||||
export const excelErrorCode = (params) => {
|
||||
return request.download({ url: '/system/error-code/export-excel', params })
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ export interface MailAccountVO {
|
|||
host: string
|
||||
port: number
|
||||
sslEnable: boolean
|
||||
starttlsEnable: boolean
|
||||
}
|
||||
|
||||
// 查询邮箱账号列表
|
||||
|
|
|
|||
|
|
@ -2,30 +2,6 @@ import request from '@/config/axios'
|
|||
|
||||
export type OperateLogVO = {
|
||||
id: number
|
||||
userNickname: string
|
||||
traceId: string
|
||||
userId: number
|
||||
module: string
|
||||
name: string
|
||||
type: number
|
||||
content: string
|
||||
exts: Map<String, Object>
|
||||
requestMethod: string
|
||||
requestUrl: string
|
||||
userIp: string
|
||||
userAgent: string
|
||||
javaMethod: string
|
||||
javaMethodArgs: string
|
||||
startTime: Date
|
||||
duration: number
|
||||
resultCode: number
|
||||
resultMsg: string
|
||||
resultData: string
|
||||
}
|
||||
|
||||
export type OperateLogV2VO = {
|
||||
id: number
|
||||
userNickname: string
|
||||
traceId: string
|
||||
userType: number
|
||||
userId: number
|
||||
|
|
@ -42,11 +18,6 @@ export type OperateLogV2VO = {
|
|||
creator: string
|
||||
creatorName: string
|
||||
createTime: Date
|
||||
// 数据扩展，渲染时使用
|
||||
title: string // 操作标题（如果为空则取 name 值）
|
||||
colSize: number // 变更记录行数
|
||||
contentStrList: string[]
|
||||
tagsContentList: string[]
|
||||
}
|
||||
|
||||
// 查询操作日志列表
|
||||
|
|
@ -54,6 +25,6 @@ export const getOperateLogPage = (params: PageParam) => {
|
|||
return request.get({ url: '/system/operate-log/page', params })
|
||||
}
|
||||
// 导出操作日志
|
||||
export const exportOperateLog = (params) => {
|
||||
export const exportOperateLog = (params: any) => {
|
||||
return request.download({ url: '/system/operate-log/export', params })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
import request from '@/config/axios'
|
||||
import qs from 'qs'
|
||||
|
||||
export interface SensitiveWordVO {
|
||||
id: number
|
||||
name: string
|
||||
status: number
|
||||
description: string
|
||||
tags: string[]
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
export interface SensitiveWordTestReqVO {
|
||||
text: string
|
||||
tag: string[]
|
||||
}
|
||||
|
||||
// 查询敏感词列表
|
||||
export const getSensitiveWordPage = (params: PageParam) => {
|
||||
return request.get({ url: '/system/sensitive-word/page', params })
|
||||
}
|
||||
|
||||
// 查询敏感词详情
|
||||
export const getSensitiveWord = (id: number) => {
|
||||
return request.get({ url: '/system/sensitive-word/get?id=' + id })
|
||||
}
|
||||
|
||||
// 新增敏感词
|
||||
export const createSensitiveWord = (data: SensitiveWordVO) => {
|
||||
return request.post({ url: '/system/sensitive-word/create', data })
|
||||
}
|
||||
|
||||
// 修改敏感词
|
||||
export const updateSensitiveWord = (data: SensitiveWordVO) => {
|
||||
return request.put({ url: '/system/sensitive-word/update', data })
|
||||
}
|
||||
|
||||
// 删除敏感词
|
||||
export const deleteSensitiveWord = (id: number) => {
|
||||
return request.delete({ url: '/system/sensitive-word/delete?id=' + id })
|
||||
}
|
||||
|
||||
// 导出敏感词
|
||||
export const exportSensitiveWord = (params) => {
|
||||
return request.download({ url: '/system/sensitive-word/export-excel', params })
|
||||
}
|
||||
|
||||
// 获取所有敏感词的标签数组
|
||||
export const getSensitiveWordTagList = () => {
|
||||
return request.get({ url: '/system/sensitive-word/get-tags' })
|
||||
}
|
||||
|
||||
// 获得文本所包含的不合法的敏感词数组
|
||||
export const validateText = (query: SensitiveWordTestReqVO) => {
|
||||
return request.get({
|
||||
url: '/system/sensitive-word/validate-text?' + qs.stringify(query, { arrayFormat: 'repeat' })
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -503,9 +503,13 @@ const submit = () => {
|
|||
emit('update:modelValue', defaultValue.value)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const inputChange = () => {
|
||||
emit('update:modelValue', defaultValue.value)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<el-input v-model="defaultValue" class="input-with-select" v-bind="$attrs">
|
||||
<el-input v-model="defaultValue" class="input-with-select" v-bind="$attrs" @input="inputChange">
|
||||
<template #append>
|
||||
<el-select v-model="select" placeholder="生成器" style="width: 115px">
|
||||
<el-option label="每分钟" value="0 * * * * ?" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import DictSelect from './src/DictSelect.vue'
|
||||
|
||||
export { DictSelect }
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!-- 数据字典 Select 选择器 -->
|
||||
<template>
|
||||
<el-select class="w-1/1" v-bind="attrs">
|
||||
<template v-if="valueType === 'int'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getIntDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'str'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getStrDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'bool'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getBoolDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
||||
|
||||
// 接受父组件参数
|
||||
interface Props {
|
||||
dictType: string // 字典类型
|
||||
valueType: string // 字典值类型
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
dictType: '',
|
||||
valueType: 'str'
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
defineOptions({ name: 'DictSelect' })
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="h-40px flex items-center justify-center">
|
||||
<MagicCubeEditor
|
||||
v-model="cellList"
|
||||
class="m-b-16px"
|
||||
:rows="1"
|
||||
:cols="cellCount"
|
||||
:cube-size="38"
|
||||
@hot-area-selected="handleHotAreaSelected"
|
||||
/>
|
||||
<img src="@/assets/imgs/diy/app-nav-bar-mp.png" alt="" class="h-30px w-76px" v-if="isMp" />
|
||||
</div>
|
||||
<template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
|
||||
<template v-if="selectedHotAreaIndex === cellIndex">
|
||||
<el-form-item label="类型" :prop="`cell[${cellIndex}].type`">
|
||||
<el-radio-group v-model="cell.type">
|
||||
<el-radio label="text">文字</el-radio>
|
||||
<el-radio label="image">图片</el-radio>
|
||||
<el-radio label="search">搜索框</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- 1. 文字 -->
|
||||
<template v-if="cell.type === 'text'">
|
||||
<el-form-item label="内容" :prop="`cell[${cellIndex}].text`">
|
||||
<el-input v-model="cell!.text" maxlength="10" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色" :prop="`cell[${cellIndex}].text`">
|
||||
<ColorInput v-model="cell!.textColor" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- 2. 图片 -->
|
||||
<template v-else-if="cell.type === 'image'">
|
||||
<el-form-item label="图片" :prop="`cell[${cellIndex}].imgUrl`">
|
||||
<UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
|
||||
<template #tip>建议尺寸 56*56</template>
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接" :prop="`cell[${cellIndex}].url`">
|
||||
<AppLinkInput v-model="cell.url" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- 3. 搜索框 -->
|
||||
<template v-else>
|
||||
<el-form-item label="提示文字" :prop="`cell[${cellIndex}].placeholder`">
|
||||
<el-input v-model="cell.placeholder" maxlength="10" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角" :prop="`cell[${cellIndex}].borderRadius`">
|
||||
<el-slider
|
||||
v-model="cell.borderRadius"
|
||||
:max="100"
|
||||
:min="0"
|
||||
show-input
|
||||
input-size="small"
|
||||
:show-input-controls="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NavigationBarCellProperty } from '../config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
// 导航栏属性面板
|
||||
defineOptions({ name: 'NavigationBarCellProperty' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: NavigationBarCellProperty[]
|
||||
isMp: boolean
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData: cellList } = usePropertyForm(props.modelValue, emit)
|
||||
if (!cellList.value) cellList.value = []
|
||||
|
||||
// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
|
||||
const cellCount = computed(() => (props.isMp ? 6 : 8))
|
||||
|
||||
// 选中的热区
|
||||
const selectedHotAreaIndex = ref(0)
|
||||
const handleHotAreaSelected = (cellValue: NavigationBarCellProperty, index: number) => {
|
||||
selectedHotAreaIndex.value = index
|
||||
if (!cellValue.type) {
|
||||
cellValue.type = 'text'
|
||||
cellValue.textColor = '#111111'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -2,22 +2,53 @@ import { DiyComponent } from '@/components/DiyEditor/util'
|
|||
|
||||
/** 顶部导航栏属性 */
|
||||
export interface NavigationBarProperty {
|
||||
// 页面标题
|
||||
title: string
|
||||
// 页面描述
|
||||
description: string
|
||||
// 顶部导航高度
|
||||
navBarHeight: number
|
||||
// 页面背景颜色
|
||||
backgroundColor: string
|
||||
// 页面背景图片
|
||||
backgroundImage: string
|
||||
// 背景类型
|
||||
bgType: 'color' | 'img'
|
||||
// 背景颜色
|
||||
bgColor: string
|
||||
// 图片链接
|
||||
bgImg: string
|
||||
// 样式类型：默认 | 沉浸式
|
||||
styleType: 'default' | 'immersion'
|
||||
styleType: 'normal' | 'inner'
|
||||
// 常驻显示
|
||||
alwaysShow: boolean
|
||||
// 是否显示返回按钮
|
||||
showGoBack: boolean
|
||||
// 小程序单元格列表
|
||||
mpCells: NavigationBarCellProperty[]
|
||||
// 其它平台单元格列表
|
||||
otherCells: NavigationBarCellProperty[]
|
||||
// 本地变量
|
||||
_local: {
|
||||
// 预览顶部导航（小程序）
|
||||
previewMp: boolean
|
||||
// 预览顶部导航（非小程序）
|
||||
previewOther: boolean
|
||||
}
|
||||
}
|
||||
|
||||
/** 顶部导航栏 - 单元格 属性 */
|
||||
export interface NavigationBarCellProperty {
|
||||
// 类型：文字 | 图片 | 搜索框
|
||||
type: 'text' | 'image' | 'search'
|
||||
// 宽度
|
||||
width: number
|
||||
// 高度
|
||||
height: number
|
||||
// 顶部位置
|
||||
top: number
|
||||
// 左侧位置
|
||||
left: number
|
||||
// 文字内容
|
||||
text: string
|
||||
// 文字颜色
|
||||
textColor: string
|
||||
// 图片地址
|
||||
imgUrl: string
|
||||
// 图片链接
|
||||
url: string
|
||||
// 搜索框：提示文字
|
||||
placeholder: string
|
||||
// 搜索框：边框圆角半径
|
||||
borderRadius: number
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
|
|
@ -26,13 +57,26 @@ export const component = {
|
|||
name: '顶部导航栏',
|
||||
icon: 'tabler:layout-navbar',
|
||||
property: {
|
||||
title: '页面标题',
|
||||
description: '',
|
||||
navBarHeight: 35,
|
||||
backgroundColor: '#fff',
|
||||
backgroundImage: '',
|
||||
styleType: 'default',
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
bgImg: '',
|
||||
styleType: 'normal',
|
||||
alwaysShow: true,
|
||||
showGoBack: true
|
||||
mpCells: [
|
||||
{
|
||||
type: 'text',
|
||||
textColor: '#111111'
|
||||
}
|
||||
],
|
||||
otherCells: [
|
||||
{
|
||||
type: 'text',
|
||||
textColor: '#111111'
|
||||
}
|
||||
],
|
||||
_local: {
|
||||
previewMp: true,
|
||||
previewOther: false
|
||||
}
|
||||
}
|
||||
} as DiyComponent<NavigationBarProperty>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,73 @@
|
|||
<template>
|
||||
<div
|
||||
class="navigation-bar"
|
||||
:style="{
|
||||
height: `${property.navBarHeight}px`,
|
||||
backgroundColor: property.backgroundColor,
|
||||
backgroundImage: `url(${property.backgroundImage})`
|
||||
}"
|
||||
>
|
||||
<!-- 左侧 -->
|
||||
<div class="left">
|
||||
<Icon icon="ep:arrow-left" v-show="property.showGoBack" />
|
||||
<div class="navigation-bar" :style="bgStyle">
|
||||
<div class="h-full w-full flex items-center">
|
||||
<div v-for="(cell, cellIndex) in cellList" :key="cellIndex" :style="getCellStyle(cell)">
|
||||
<span v-if="cell.type === 'text'">{{ cell.text }}</span>
|
||||
<img v-else-if="cell.type === 'image'" :src="cell.imgUrl" alt="" class="h-full w-full" />
|
||||
<SearchBar v-else :property="getSearchProp" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div
|
||||
class="center"
|
||||
:style="{
|
||||
height: `${property.navBarHeight}px`,
|
||||
lineHeight: `${property.navBarHeight}px`
|
||||
}"
|
||||
>
|
||||
{{ property.title }}
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right"></div>
|
||||
<img
|
||||
v-if="property._local?.previewMp"
|
||||
src="@/assets/imgs/diy/app-nav-bar-mp.png"
|
||||
alt=""
|
||||
class="h-30px w-86px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { NavigationBarProperty } from './config'
|
||||
import { NavigationBarCellProperty, NavigationBarProperty } from './config'
|
||||
import SearchBar from '@/components/DiyEditor/components/mobile/SearchBar/index.vue'
|
||||
import { StyleValue } from 'vue'
|
||||
import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
|
||||
|
||||
/** 页面顶部导航栏 */
|
||||
defineOptions({ name: 'NavigationBar' })
|
||||
|
||||
defineProps<{ property: NavigationBarProperty }>()
|
||||
const props = defineProps<{ property: NavigationBarProperty }>()
|
||||
|
||||
// 背景
|
||||
const bgStyle = computed(() => {
|
||||
const background =
|
||||
props.property.bgType === 'img' && props.property.bgImg
|
||||
? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
|
||||
: props.property.bgColor
|
||||
return { background }
|
||||
})
|
||||
// 单元格列表
|
||||
const cellList = computed(() =>
|
||||
props.property._local?.previewMp ? props.property.mpCells : props.property.otherCells
|
||||
)
|
||||
// 单元格宽度
|
||||
const cellWidth = computed(() => {
|
||||
return props.property._local?.previewMp ? (375 - 80 - 86) / 6 : (375 - 90) / 8
|
||||
})
|
||||
// 获得单元格样式
|
||||
const getCellStyle = (cell: NavigationBarCellProperty) => {
|
||||
return {
|
||||
width: cell.width * cellWidth.value + (cell.width - 1) * 10 + 'px',
|
||||
left: cell.left * cellWidth.value + (cell.left + 1) * 10 + 'px',
|
||||
position: 'absolute'
|
||||
} as StyleValue
|
||||
}
|
||||
// 获得搜索框属性
|
||||
const getSearchProp = (cell: NavigationBarCellProperty) => {
|
||||
return {
|
||||
height: 30,
|
||||
showScan: false,
|
||||
placeholder: cell.placeholder,
|
||||
borderRadius: cell.borderRadius
|
||||
} as SearchProperty
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.navigation-bar {
|
||||
display: flex;
|
||||
height: 35px;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
|
||||
/* 左边 */
|
||||
.left {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,73 @@
|
|||
<template>
|
||||
<el-form label-width="80px" :model="formData" :rules="rules">
|
||||
<el-form-item label="页面标题" prop="title">
|
||||
<el-input v-model="formData!.title" placeholder="页面标题" maxlength="25" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="页面描述" prop="description">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData!.description"
|
||||
placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式" prop="styleType">
|
||||
<el-radio-group v-model="formData!.styleType">
|
||||
<el-radio label="default">默认</el-radio>
|
||||
<el-radio label="immersion">沉浸式</el-radio>
|
||||
<el-radio label="normal">标准</el-radio>
|
||||
<el-tooltip
|
||||
content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
|
||||
placement="top"
|
||||
>
|
||||
<el-radio label="inner">沉浸式</el-radio>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'immersion'">
|
||||
<el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'inner'">
|
||||
<el-radio-group v-model="formData!.alwaysShow">
|
||||
<el-radio :label="false">关闭</el-radio>
|
||||
<el-radio :label="true">开启</el-radio>
|
||||
<el-tooltip content="常驻显示关闭后,头部小组件将在页面滑动时淡入" placement="top">
|
||||
<el-radio :label="true">开启</el-radio>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="高度" prop="navBarHeight">
|
||||
<el-slider
|
||||
v-model="formData!.navBarHeight"
|
||||
:max="100"
|
||||
:min="35"
|
||||
show-input
|
||||
input-size="small"
|
||||
/>
|
||||
<el-form-item label="背景类型" prop="bgType">
|
||||
<el-radio-group v-model="formData.bgType">
|
||||
<el-radio label="color">纯色</el-radio>
|
||||
<el-radio label="img">图片</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="返回按钮" prop="showGoBack">
|
||||
<el-switch v-model="formData!.showGoBack" />
|
||||
<el-form-item label="背景颜色" prop="bgColor" v-if="formData.bgType === 'color'">
|
||||
<ColorInput v-model="formData.bgColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色" prop="backgroundColor">
|
||||
<ColorInput v-model="formData!.backgroundColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="背景图片" prop="backgroundImage">
|
||||
<UploadImg v-model="formData!.backgroundImage" :limit="1">
|
||||
<template #tip>建议宽度 750px</template>
|
||||
</UploadImg>
|
||||
<el-form-item label="背景图片" prop="bgImg" v-else>
|
||||
<UploadImg v-model="formData.bgImg" :limit="1" width="56px" height="56px" />
|
||||
</el-form-item>
|
||||
<el-card class="property-group" shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>内容（小程序）</span>
|
||||
<el-form-item prop="_local.previewMp" class="m-b-0!">
|
||||
<el-checkbox
|
||||
v-model="formData._local.previewMp"
|
||||
@change="formData._local.previewOther = !formData._local.previewMp"
|
||||
>预览</el-checkbox
|
||||
>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
<NavigationBarCellProperty v-model="formData.mpCells" is-mp />
|
||||
</el-card>
|
||||
<el-card class="property-group" shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>内容（非小程序）</span>
|
||||
<el-form-item prop="_local.previewOther" class="m-b-0!">
|
||||
<el-checkbox
|
||||
v-model="formData._local.previewOther"
|
||||
@change="formData._local.previewMp = !formData._local.previewOther"
|
||||
>预览</el-checkbox
|
||||
>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
<NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
|
||||
</el-card>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NavigationBarProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
import NavigationBarCellProperty from '@/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue'
|
||||
// 导航栏属性面板
|
||||
defineOptions({ name: 'NavigationBarProperty' })
|
||||
// 表单校验
|
||||
|
|
@ -58,6 +78,9 @@ const rules = {
|
|||
const props = defineProps<{ modelValue: NavigationBarProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
if (!formData.value._local) {
|
||||
formData.value._local = { previewMp: true, previewOther: false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import { useFormCreateDesigner } from './src/useFormCreateDesigner'
|
||||
|
||||
export { useFormCreateDesigner }
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { useUploadFileRule } from './useUploadFileRule'
|
||||
import { useUploadImgRule } from './useUploadImgRule'
|
||||
import { useUploadImgsRule } from './useUploadImgsRule'
|
||||
import { useDictSelectRule } from './useDictSelectRule'
|
||||
import { useUserSelectRule } from './useUserSelectRule'
|
||||
import { useEditorRule } from './useEditorRule'
|
||||
|
||||
export {
|
||||
useUploadFileRule,
|
||||
useUploadImgRule,
|
||||
useUploadImgsRule,
|
||||
useDictSelectRule,
|
||||
useUserSelectRule,
|
||||
useEditorRule
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
const selectRule = [
|
||||
{ type: 'switch', field: 'multiple', title: '是否多选' },
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'disabled',
|
||||
title: '是否禁用'
|
||||
},
|
||||
{ type: 'switch', field: 'clearable', title: '是否可以清空选项' },
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'collapseTags',
|
||||
title: '多选时是否将选中值按文字的形式展示'
|
||||
},
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'multipleLimit',
|
||||
title: '多选时用户最多可以选择的项目数，为 0 则不限制',
|
||||
props: { min: 0 }
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'autocomplete',
|
||||
title: 'autocomplete 属性'
|
||||
},
|
||||
{ type: 'input', field: 'placeholder', title: '占位符' },
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'filterable',
|
||||
title: '是否可搜索'
|
||||
},
|
||||
{ type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
|
||||
{
|
||||
type: 'input',
|
||||
field: 'noMatchText',
|
||||
title: '搜索条件无匹配时显示的文字'
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'remote',
|
||||
title: '其中的选项是否从服务器远程加载'
|
||||
},
|
||||
{
|
||||
type: 'Struct',
|
||||
field: 'remoteMethod',
|
||||
title: '自定义远程搜索方法'
|
||||
},
|
||||
{ type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'reserveKeyword',
|
||||
title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'defaultFirstOption',
|
||||
title: '在输入框按下回车，选择第一个匹配项'
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'popperAppendToBody',
|
||||
title: '是否将弹出框插入至 body 元素',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'automaticDropdown',
|
||||
title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
|
||||
}
|
||||
]
|
||||
|
||||
export default selectRule
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import { generateUUID } from '@/utils'
|
||||
import * as DictDataApi from '@/api/system/dict/dict.type'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
import selectRule from '@/components/FormCreate/src/config/selectRule'
|
||||
|
||||
export const useDictSelectRule = () => {
|
||||
const label = '字典选择器'
|
||||
const name = 'DictSelect'
|
||||
const dictOptions = ref<{ label: string; value: string }[]>([]) // 字典类型下拉数据
|
||||
onMounted(async () => {
|
||||
const data = await DictDataApi.getSimpleDictTypeList()
|
||||
if (!data || data.length === 0) {
|
||||
return
|
||||
}
|
||||
dictOptions.value =
|
||||
data?.map((item: DictDataApi.DictTypeVO) => ({
|
||||
label: item.name,
|
||||
value: item.type
|
||||
})) ?? []
|
||||
})
|
||||
return {
|
||||
icon: 'icon-select',
|
||||
label,
|
||||
name,
|
||||
rule() {
|
||||
return {
|
||||
type: name,
|
||||
field: generateUUID(),
|
||||
title: label,
|
||||
info: '',
|
||||
$required: false
|
||||
}
|
||||
},
|
||||
props(_, { t }) {
|
||||
return localeProps(t, name + '.props', [
|
||||
makeRequiredRule(),
|
||||
{
|
||||
type: 'select',
|
||||
field: 'dictType',
|
||||
title: '字典类型',
|
||||
value: '',
|
||||
options: dictOptions.value
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
field: 'valueType',
|
||||
title: '字典值类型',
|
||||
value: 'str',
|
||||
options: [
|
||||
{ label: '数字', value: 'int' },
|
||||
{ label: '字符串', value: 'str' },
|
||||
{ label: '布尔值', value: 'bool' }
|
||||
]
|
||||
},
|
||||
...selectRule
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
|
||||
export const useEditorRule = () => {
|
||||
const label = '富文本'
|
||||
const name = 'Editor'
|
||||
return {
|
||||
icon: 'icon-editor',
|
||||
label,
|
||||
name,
|
||||
rule() {
|
||||
return {
|
||||
type: name,
|
||||
field: generateUUID(),
|
||||
title: label,
|
||||
info: '',
|
||||
$required: false
|
||||
}
|
||||
},
|
||||
props(_, { t }) {
|
||||
return localeProps(t, name + '.props', [
|
||||
makeRequiredRule(),
|
||||
{
|
||||
type: 'input',
|
||||
field: 'height',
|
||||
title: '高度'
|
||||
},
|
||||
{ type: 'switch', field: 'readonly', title: '是否只读' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
|
||||
export const useUploadFileRule = () => {
|
||||
const label = '文件上传'
|
||||
const name = 'UploadFile'
|
||||
return {
|
||||
icon: 'icon-upload',
|
||||
label,
|
||||
name,
|
||||
rule() {
|
||||
return {
|
||||
type: name,
|
||||
field: generateUUID(),
|
||||
title: label,
|
||||
info: '',
|
||||
$required: false
|
||||
}
|
||||
},
|
||||
props(_, { t }) {
|
||||
return localeProps(t, name + '.props', [
|
||||
makeRequiredRule(),
|
||||
{
|
||||
type: 'select',
|
||||
field: 'fileType',
|
||||
title: '文件类型',
|
||||
value: ['doc', 'xls', 'ppt', 'txt', 'pdf'],
|
||||
options: [
|
||||
{ label: 'doc', value: 'doc' },
|
||||
{ label: 'xls', value: 'xls' },
|
||||
{ label: 'ppt', value: 'ppt' },
|
||||
{ label: 'txt', value: 'txt' },
|
||||
{ label: 'pdf', value: 'pdf' }
|
||||
],
|
||||
props: {
|
||||
multiple: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'autoUpload',
|
||||
title: '是否在选取文件后立即进行上传',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'drag',
|
||||
title: '拖拽上传',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'isShowTip',
|
||||
title: '是否显示提示',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'fileSize',
|
||||
title: '大小限制(MB)',
|
||||
value: 5,
|
||||
props: { min: 0 }
|
||||
},
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'limit',
|
||||
title: '数量限制',
|
||||
value: 5,
|
||||
props: { min: 0 }
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'disabled',
|
||||
title: '是否禁用',
|
||||
value: false
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
|
||||
export const useUploadImgRule = () => {
|
||||
const label = '单图上传'
|
||||
const name = 'UploadImg'
|
||||
return {
|
||||
icon: 'icon-upload',
|
||||
label,
|
||||
name,
|
||||
rule() {
|
||||
return {
|
||||
type: name,
|
||||
field: generateUUID(),
|
||||
title: label,
|
||||
info: '',
|
||||
$required: false
|
||||
}
|
||||
},
|
||||
props(_, { t }) {
|
||||
return localeProps(t, name + '.props', [
|
||||
makeRequiredRule(),
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'drag',
|
||||
title: '拖拽上传',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
field: 'fileType',
|
||||
title: '图片类型限制',
|
||||
value: ['image/jpeg', 'image/png', 'image/gif'],
|
||||
options: [
|
||||
{ label: 'image/apng', value: 'image/apng' },
|
||||
{ label: 'image/bmp', value: 'image/bmp' },
|
||||
{ label: 'image/gif', value: 'image/gif' },
|
||||
{ label: 'image/jpeg', value: 'image/jpeg' },
|
||||
{ label: 'image/pjpeg', value: 'image/pjpeg' },
|
||||
{ label: 'image/svg+xml', value: 'image/svg+xml' },
|
||||
{ label: 'image/tiff', value: 'image/tiff' },
|
||||
{ label: 'image/webp', value: 'image/webp' },
|
||||
{ label: 'image/x-icon', value: 'image/x-icon' }
|
||||
],
|
||||
props: {
|
||||
multiple: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'fileSize',
|
||||
title: '大小限制(MB)',
|
||||
value: 5,
|
||||
props: { min: 0 }
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'height',
|
||||
title: '组件高度',
|
||||
value: '150px'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'width',
|
||||
title: '组件宽度',
|
||||
value: '150px'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'borderradius',
|
||||
title: '组件边框圆角',
|
||||
value: '8px'
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'disabled',
|
||||
title: '是否显示删除按钮',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'showBtnText',
|
||||
title: '是否显示按钮文字',
|
||||
value: true
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
|
||||
export const useUploadImgsRule = () => {
|
||||
const label = '多图上传'
|
||||
const name = 'UploadImgs'
|
||||
return {
|
||||
icon: 'icon-upload',
|
||||
label,
|
||||
name,
|
||||
rule() {
|
||||
return {
|
||||
type: name,
|
||||
field: generateUUID(),
|
||||
title: label,
|
||||
info: '',
|
||||
$required: false
|
||||
}
|
||||
},
|
||||
props(_, { t }) {
|
||||
return localeProps(t, name + '.props', [
|
||||
makeRequiredRule(),
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'drag',
|
||||
title: '拖拽上传',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
field: 'fileType',
|
||||
title: '图片类型限制',
|
||||
value: ['image/jpeg', 'image/png', 'image/gif'],
|
||||
options: [
|
||||
{ label: 'image/apng', value: 'image/apng' },
|
||||
{ label: 'image/bmp', value: 'image/bmp' },
|
||||
{ label: 'image/gif', value: 'image/gif' },
|
||||
{ label: 'image/jpeg', value: 'image/jpeg' },
|
||||
{ label: 'image/pjpeg', value: 'image/pjpeg' },
|
||||
{ label: 'image/svg+xml', value: 'image/svg+xml' },
|
||||
{ label: 'image/tiff', value: 'image/tiff' },
|
||||
{ label: 'image/webp', value: 'image/webp' },
|
||||
{ label: 'image/x-icon', value: 'image/x-icon' }
|
||||
],
|
||||
props: {
|
||||
multiple: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'fileSize',
|
||||
title: '大小限制(MB)',
|
||||
value: 5,
|
||||
props: { min: 0 }
|
||||
},
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'limit',
|
||||
title: '数量限制',
|
||||
value: 5,
|
||||
props: { min: 0 }
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'height',
|
||||
title: '组件高度',
|
||||
value: '150px'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'width',
|
||||
title: '组件宽度',
|
||||
value: '150px'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'borderradius',
|
||||
title: '组件边框圆角',
|
||||
value: '8px'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
import selectRule from '@/components/FormCreate/src/config/selectRule'
|
||||
|
||||
export const useUserSelectRule = () => {
|
||||
const label = '用户选择器'
|
||||
const name = 'UserSelect'
|
||||
return {
|
||||
icon: 'icon-select',
|
||||
label,
|
||||
name,
|
||||
rule() {
|
||||
return {
|
||||
type: name,
|
||||
field: generateUUID(),
|
||||
title: label,
|
||||
info: '',
|
||||
$required: false
|
||||
}
|
||||
},
|
||||
props(_, { t }) {
|
||||
return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import {
|
||||
useDictSelectRule,
|
||||
useEditorRule,
|
||||
useUploadFileRule,
|
||||
useUploadImgRule,
|
||||
useUploadImgsRule,
|
||||
useUserSelectRule
|
||||
} from './config'
|
||||
import { Ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 表单设计器增强 hook
|
||||
* 新增
|
||||
* - 文件上传
|
||||
* - 单图上传
|
||||
* - 多图上传
|
||||
* - 字典选择器
|
||||
* - 系统用户选择器
|
||||
* - 富文本
|
||||
*/
|
||||
export const useFormCreateDesigner = (designer: Ref) => {
|
||||
const editorRule = useEditorRule()
|
||||
const uploadFileRule = useUploadFileRule()
|
||||
const uploadImgRule = useUploadImgRule()
|
||||
const uploadImgsRule = useUploadImgsRule()
|
||||
const dictSelectRule = useDictSelectRule()
|
||||
const userSelectRule = useUserSelectRule()
|
||||
|
||||
onMounted(() => {
|
||||
// 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
|
||||
designer.value?.removeMenuItem('upload')
|
||||
// 移除自带的富文本组件规则，使用 editorRule 替代
|
||||
designer.value?.removeMenuItem('fc-editor')
|
||||
const components = [
|
||||
editorRule,
|
||||
uploadFileRule,
|
||||
uploadImgRule,
|
||||
uploadImgsRule,
|
||||
dictSelectRule,
|
||||
userSelectRule
|
||||
]
|
||||
components.forEach((component) => {
|
||||
// 插入组件规则
|
||||
designer.value?.addComponent(component)
|
||||
// 插入拖拽按钮到 `main` 分类下
|
||||
designer.value?.appendMenuItem('main', {
|
||||
icon: component.icon,
|
||||
name: component.name,
|
||||
label: component.label
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
// TODO puhui999: 借鉴一下 form-create-designer utils 方法 🤣 (导入不了只能先 copy 过来用下)
|
||||
export function makeRequiredRule() {
|
||||
return {
|
||||
type: 'Required',
|
||||
field: 'formCreate$required',
|
||||
title: '是否必填'
|
||||
}
|
||||
}
|
||||
|
||||
export const localeProps = (t, prefix, rules) => {
|
||||
return rules.map((rule) => {
|
||||
if (rule.field === 'formCreate$required') {
|
||||
rule.title = t('props.required') || rule.title
|
||||
} else if (rule.field && rule.field !== '_optionType') {
|
||||
rule.title = t('components.' + prefix + '.' + rule.field) || rule.title
|
||||
}
|
||||
return rule
|
||||
})
|
||||
}
|
||||
|
||||
export function upper(str) {
|
||||
return str.replace(str[0], str[0].toLocaleUpperCase())
|
||||
}
|
||||
|
||||
export function makeOptionsRule(t, to, userOptions) {
|
||||
console.log(userOptions[0])
|
||||
const options = [
|
||||
{ label: t('props.optionsType.struct'), value: 0 },
|
||||
{ label: t('props.optionsType.json'), value: 1 },
|
||||
{ label: '用户数据', value: 2 }
|
||||
]
|
||||
|
||||
const control = [
|
||||
{
|
||||
value: 0,
|
||||
rule: [
|
||||
{
|
||||
type: 'TableOptions',
|
||||
field: 'formCreate' + upper(to).replace('.', '>'),
|
||||
props: { defaultValue: [] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
rule: [
|
||||
{
|
||||
type: 'Struct',
|
||||
field: 'formCreate' + upper(to).replace('.', '>'),
|
||||
props: { defaultValue: [] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
rule: [
|
||||
{
|
||||
type: 'TableOptions',
|
||||
field: 'formCreate' + upper(to).replace('.', '>'),
|
||||
props: { modelValue: [] }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
options.splice(0, 0)
|
||||
control.push()
|
||||
|
||||
return {
|
||||
type: 'radio',
|
||||
title: t('props.options'),
|
||||
field: '_optionType',
|
||||
value: 0,
|
||||
options,
|
||||
props: {
|
||||
type: 'button'
|
||||
},
|
||||
control
|
||||
}
|
||||
}
|
||||
|
|
@ -189,7 +189,7 @@ const emit = defineEmits(['update:modelValue', 'hotAreaSelected'])
|
|||
const emitUpdateModelValue = () => emit('update:modelValue', hotAreas)
|
||||
|
||||
// 热区选中
|
||||
const selectedHotAreaIndex = ref(-1)
|
||||
const selectedHotAreaIndex = ref(0)
|
||||
const handleHotAreaSelected = (hotArea: Rect, index: number) => {
|
||||
selectedHotAreaIndex.value = index
|
||||
emit('hotAreaSelected', hotArea, index)
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { OperateLogVO } from '@/api/system/operatelog'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
|
||||
import { ElTag } from 'element-plus'
|
||||
|
|
@ -31,7 +31,7 @@ import { ElTag } from 'element-plus'
|
|||
defineOptions({ name: 'OperateLogV2' })
|
||||
|
||||
interface Props {
|
||||
logList: OperateLogV2VO[] // 操作日志列表
|
||||
logList: OperateLogVO[] // 操作日志列表
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@
|
|||
:action="uploadUrl"
|
||||
:auto-upload="autoUpload"
|
||||
:before-upload="beforeUpload"
|
||||
:disabled="disabled"
|
||||
:drag="drag"
|
||||
:http-request="httpRequest"
|
||||
:limit="props.limit"
|
||||
:multiple="props.limit > 1"
|
||||
:on-error="excelUploadError"
|
||||
|
|
@ -15,15 +17,14 @@
|
|||
:on-remove="handleRemove"
|
||||
:on-success="handleFileSuccess"
|
||||
:show-file-list="true"
|
||||
:http-request="httpRequest"
|
||||
class="upload-file-uploader"
|
||||
name="file"
|
||||
>
|
||||
<el-button type="primary">
|
||||
<el-button v-if="!disabled" type="primary">
|
||||
<Icon icon="ep:upload-filled" />
|
||||
选取文件
|
||||
</el-button>
|
||||
<template v-if="isShowTip" #tip>
|
||||
<template v-if="isShowTip && !disabled" #tip>
|
||||
<div style="font-size: 8px">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</div>
|
||||
|
|
@ -31,6 +32,25 @@
|
|||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
|
||||
</div>
|
||||
</template>
|
||||
<template #file="row">
|
||||
<div class="flex items-center">
|
||||
<span>{{ row.file.name }}</span>
|
||||
<div class="ml-10px">
|
||||
<el-link
|
||||
:href="row.file.url"
|
||||
:underline="false"
|
||||
download
|
||||
target="_blank"
|
||||
type="primary"
|
||||
>
|
||||
下载
|
||||
</el-link>
|
||||
</div>
|
||||
<div class="ml-10px">
|
||||
<el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -48,13 +68,13 @@ const emit = defineEmits(['update:modelValue'])
|
|||
|
||||
const props = defineProps({
|
||||
modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
|
||||
title: propTypes.string.def('文件上传'),
|
||||
fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileSize: propTypes.number.def(5), // 大小限制(MB)
|
||||
limit: propTypes.number.def(5), // 数量限制
|
||||
autoUpload: propTypes.bool.def(true), // 自动上传
|
||||
drag: propTypes.bool.def(false), // 拖拽上传
|
||||
isShowTip: propTypes.bool.def(true) // 是否显示提示
|
||||
isShowTip: propTypes.bool.def(true), // 是否显示提示
|
||||
disabled: propTypes.bool.def(false) // 是否禁用上传组件 ==> 非必传（默认为 false）
|
||||
})
|
||||
|
||||
// ========== 上传相关 ==========
|
||||
|
|
|
|||
|
|
@ -6,17 +6,18 @@
|
|||
:action="uploadUrl"
|
||||
:before-upload="beforeUpload"
|
||||
:class="['upload', drag ? 'no-border' : '']"
|
||||
:disabled="disabled"
|
||||
:drag="drag"
|
||||
:http-request="httpRequest"
|
||||
:multiple="false"
|
||||
:on-error="uploadError"
|
||||
:on-success="uploadSuccess"
|
||||
:show-file-list="false"
|
||||
:http-request="httpRequest"
|
||||
>
|
||||
<template v-if="modelValue">
|
||||
<img :src="modelValue" class="upload-image" />
|
||||
<div class="upload-handle" @click.stop>
|
||||
<div class="handle-icon" @click="editImg" v-if="!disabled">
|
||||
<div v-if="!disabled" class="handle-icon" @click="editImg">
|
||||
<Icon icon="ep:edit" />
|
||||
<span v-if="showBtnText">{{ t('action.edit') }}</span>
|
||||
</div>
|
||||
|
|
@ -77,10 +78,8 @@ const props = defineProps({
|
|||
height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
|
||||
width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
|
||||
borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
|
||||
// 是否显示删除按钮
|
||||
showDelete: propTypes.bool.def(true),
|
||||
// 是否显示按钮文字
|
||||
showBtnText: propTypes.bool.def(true)
|
||||
showDelete: propTypes.bool.def(true), // 是否显示删除按钮
|
||||
showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
|
||||
})
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@
|
|||
:action="uploadUrl"
|
||||
:before-upload="beforeUpload"
|
||||
:class="['upload', drag ? 'no-border' : '']"
|
||||
:disabled="disabled"
|
||||
:drag="drag"
|
||||
:http-request="httpRequest"
|
||||
:limit="limit"
|
||||
:multiple="true"
|
||||
:on-error="uploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="uploadSuccess"
|
||||
:http-request="httpRequest"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<div class="upload-empty">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ export const useUpload = () => {
|
|||
// 1.2 获取文件预签名地址
|
||||
const presignedInfo = await FileApi.getFilePresignedUrl(fileName)
|
||||
// 1.3 上传文件（不能使用 ElUpload 的 ajaxUpload 方法的原因：其使用的是 FormData 上传，Minio 不支持）
|
||||
return axios.put(presignedInfo.uploadUrl, options.file).then(() => {
|
||||
return axios.put(presignedInfo.uploadUrl, options.file, {
|
||||
headers: {
|
||||
'Content-Type': options.file.type,
|
||||
}
|
||||
}).then(() => {
|
||||
// 1.4. 记录文件信息到后端（异步）
|
||||
createFile(presignedInfo, fileName, options.file)
|
||||
// 通知成功，数据格式保持与后端上传的返回结果一致
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ export default defineComponent({
|
|||
</div>
|
||||
<Menu
|
||||
class={[
|
||||
'!absolute top-0',
|
||||
'!absolute top-0 z-11',
|
||||
{
|
||||
'!left-[var(--tab-menu-min-width)]': unref(collapse),
|
||||
'!left-[var(--tab-menu-max-width)]': !unref(collapse),
|
||||
|
|
|
|||
|
|
@ -2,23 +2,24 @@ import * as echarts from 'echarts/core'
|
|||
|
||||
import {
|
||||
BarChart,
|
||||
FunnelChart,
|
||||
GaugeChart,
|
||||
LineChart,
|
||||
PieChart,
|
||||
MapChart,
|
||||
PictorialBarChart,
|
||||
RadarChart,
|
||||
GaugeChart
|
||||
PieChart,
|
||||
RadarChart
|
||||
} from 'echarts/charts'
|
||||
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
PolarComponent,
|
||||
AriaComponent,
|
||||
ParallelComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
ParallelComponent,
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
ToolboxComponent,
|
||||
TooltipComponent,
|
||||
VisualMapComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
|
|
@ -41,7 +42,8 @@ echarts.use([
|
|||
CanvasRenderer,
|
||||
PictorialBarChart,
|
||||
RadarChart,
|
||||
GaugeChart
|
||||
GaugeChart,
|
||||
FunnelChart
|
||||
])
|
||||
|
||||
export default echarts
|
||||
|
|
|
|||
|
|
@ -1,22 +1,27 @@
|
|||
import type { App } from 'vue'
|
||||
// 👇使用 form-create 需额外全局引入 element plus 组件
|
||||
import {
|
||||
ElAlert,
|
||||
ElAside,
|
||||
ElPopconfirm,
|
||||
ElHeader,
|
||||
ElMain,
|
||||
ElContainer,
|
||||
ElDivider,
|
||||
ElTransfer,
|
||||
ElAlert,
|
||||
ElTabs,
|
||||
ElHeader,
|
||||
ElMain,
|
||||
ElPopconfirm,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElTabPane
|
||||
ElTabPane,
|
||||
ElTabs,
|
||||
ElTransfer
|
||||
} from 'element-plus'
|
||||
|
||||
import FcDesigner from '@form-create/designer'
|
||||
import formCreate from '@form-create/element-ui'
|
||||
import install from '@form-create/element-ui/auto-import'
|
||||
//======================= 自定义组件 =======================
|
||||
import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
|
||||
import { DictSelect } from '@/components/DictSelect'
|
||||
import UserSelect from '@/views/system/user/components/UserSelect.vue'
|
||||
import { Editor } from '@/components/Editor'
|
||||
|
||||
const components = [
|
||||
ElAside,
|
||||
|
|
@ -30,7 +35,13 @@ const components = [
|
|||
ElTabs,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElTabPane
|
||||
ElTabPane,
|
||||
UploadImg,
|
||||
UploadImgs,
|
||||
UploadFile,
|
||||
DictSelect,
|
||||
UserSelect,
|
||||
Editor
|
||||
]
|
||||
|
||||
// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
|
||||
|
|
@ -40,4 +51,5 @@ export const setupFormCreate = (app: App<Element>) => {
|
|||
})
|
||||
formCreate.use(install)
|
||||
app.use(formCreate)
|
||||
app.use(FcDesigner)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,15 +248,15 @@ export const CouponTemplateTakeTypeEnum = {
|
|||
*/
|
||||
export const PromotionProductScopeEnum = {
|
||||
ALL: {
|
||||
scope: 10,
|
||||
scope: 1,
|
||||
name: '通用劵'
|
||||
},
|
||||
SPU: {
|
||||
scope: 20,
|
||||
scope: 2,
|
||||
name: '商品劵'
|
||||
},
|
||||
CATEGORY: {
|
||||
scope: 30,
|
||||
scope: 3,
|
||||
name: '品类劵'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* 数据字典工具类
|
||||
*/
|
||||
import { useDictStoreWithOut } from '@/store/modules/dict'
|
||||
import { ElementPlusInfoType } from '@/types/elementPlus'
|
||||
import {useDictStoreWithOut} from '@/store/modules/dict'
|
||||
import {ElementPlusInfoType} from '@/types/elementPlus'
|
||||
|
||||
const dictStore = useDictStoreWithOut()
|
||||
|
||||
|
|
@ -104,6 +104,7 @@ export enum DICT_TYPE {
|
|||
USER_TYPE = 'user_type',
|
||||
COMMON_STATUS = 'common_status',
|
||||
TERMINAL = 'terminal', // 终端
|
||||
DATE_INTERVAL = 'date_interval', // 数据间隔
|
||||
|
||||
// ========== SYSTEM 模块 ==========
|
||||
SYSTEM_USER_SEX = 'system_user_sex',
|
||||
|
|
@ -111,7 +112,6 @@ export enum DICT_TYPE {
|
|||
SYSTEM_ROLE_TYPE = 'system_role_type',
|
||||
SYSTEM_DATA_SCOPE = 'system_data_scope',
|
||||
SYSTEM_NOTICE_TYPE = 'system_notice_type',
|
||||
SYSTEM_OPERATE_TYPE = 'system_operate_type',
|
||||
SYSTEM_LOGIN_TYPE = 'system_login_type',
|
||||
SYSTEM_LOGIN_RESULT = 'system_login_result',
|
||||
SYSTEM_SMS_CHANNEL_CODE = 'system_sms_channel_code',
|
||||
|
|
@ -134,6 +134,7 @@ export enum DICT_TYPE {
|
|||
INFRA_CODEGEN_FRONT_TYPE = 'infra_codegen_front_type',
|
||||
INFRA_CODEGEN_SCENE = 'infra_codegen_scene',
|
||||
INFRA_FILE_STORAGE = 'infra_file_storage',
|
||||
INFRA_OPERATE_TYPE = 'infra_operate_type',
|
||||
|
||||
// ========== BPM 模块 ==========
|
||||
BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
|
||||
|
|
@ -196,14 +197,15 @@ export enum DICT_TYPE {
|
|||
// ========== CRM - 客户管理模块 ==========
|
||||
CRM_AUDIT_STATUS = 'crm_audit_status', // CRM 审批状态
|
||||
CRM_BIZ_TYPE = 'crm_biz_type', // CRM 业务类型
|
||||
CRM_BUSINESS_END_STATUS_TYPE = 'crm_business_end_status_type', // CRM 商机结束状态类型
|
||||
CRM_RECEIVABLE_RETURN_TYPE = 'crm_receivable_return_type', // CRM 回款的还款方式
|
||||
CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry',
|
||||
CRM_CUSTOMER_LEVEL = 'crm_customer_level',
|
||||
CRM_CUSTOMER_SOURCE = 'crm_customer_source',
|
||||
CRM_PRODUCT_STATUS = 'crm_product_status',
|
||||
CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry', // CRM 客户所属行业
|
||||
CRM_CUSTOMER_LEVEL = 'crm_customer_level', // CRM 客户级别
|
||||
CRM_CUSTOMER_SOURCE = 'crm_customer_source', // CRM 客户来源
|
||||
CRM_PRODUCT_STATUS = 'crm_product_status', // CRM 商品状态
|
||||
CRM_PERMISSION_LEVEL = 'crm_permission_level', // CRM 数据权限的级别
|
||||
CRM_PRODUCT_UNIT = 'crm_product_unit', // 产品单位
|
||||
CRM_FOLLOW_UP_TYPE = 'crm_follow_up_type', // 跟进方式
|
||||
CRM_PRODUCT_UNIT = 'crm_product_unit', // CRM 产品单位
|
||||
CRM_FOLLOW_UP_TYPE = 'crm_follow_up_type', // CRM 跟进方式
|
||||
|
||||
// ========== ERP - 企业资源计划模块 ==========
|
||||
ERP_AUDIT_STATUS = 'erp_audit_status', // ERP 审批状态
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
|
|||
export const setConfAndFields2 = (
|
||||
detailPreview: object,
|
||||
conf: string,
|
||||
fields: string,
|
||||
fields: string[],
|
||||
value?: object
|
||||
) => {
|
||||
if (isRef(detailPreview)) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { toNumber } from 'lodash-es'
|
||||
import {toNumber} from 'lodash-es'
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
@ -329,10 +329,11 @@ const ERP_PRICE_DIGIT = 2
|
|||
* 例如说：库存数量
|
||||
*
|
||||
* @param num 数量
|
||||
* @package digit 保留的小数位数
|
||||
* @return 格式化后的数量
|
||||
*/
|
||||
export const erpNumberFormatter = (num: number | string | undefined, digit: number) => {
|
||||
if (num === null) {
|
||||
if (num == null) {
|
||||
return ''
|
||||
}
|
||||
if (typeof num === 'string') {
|
||||
|
|
@ -404,3 +405,33 @@ export const erpPriceMultiply = (price: number, count: number) => {
|
|||
}
|
||||
return parseFloat((price * count).toFixed(ERP_PRICE_DIGIT))
|
||||
}
|
||||
|
||||
/**
|
||||
* 【ERP】百分比计算，四舍五入保留两位小数
|
||||
*
|
||||
* 如果 total 为 0，则返回 0
|
||||
*
|
||||
* @param value 当前值
|
||||
* @param total 总值
|
||||
*/
|
||||
export const erpCalculatePercentage = (value: number, total: number) => {
|
||||
if (total === 0) return 0
|
||||
return ((value / total) * 100).toFixed(2)
|
||||
}
|
||||
|
||||
/**
|
||||
* 适配 echarts map 的地名
|
||||
*
|
||||
* @param areaName 地区名称
|
||||
*/
|
||||
export const areaReplace = (areaName: string) => {
|
||||
if (!areaName) {
|
||||
return areaName
|
||||
}
|
||||
return areaName
|
||||
.replace('维吾尔自治区', '')
|
||||
.replace('壮族自治区', '')
|
||||
.replace('回族自治区', '')
|
||||
.replace('自治区', '')
|
||||
.replace('省', '')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import type { RouteLocationNormalized, Router, RouteRecordNormalized } from 'vue
|
|||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
||||
import { isUrl } from '@/utils/is'
|
||||
import { cloneDeep, omit } from 'lodash-es'
|
||||
import qs from 'qs'
|
||||
|
||||
const modules = import.meta.glob('../views/**/*.{vue,tsx}')
|
||||
/**
|
||||
|
|
@ -64,6 +65,7 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
|
|||
const res: AppRouteRecordRaw[] = []
|
||||
const modulesRoutesKeys = Object.keys(modules)
|
||||
for (const route of routes) {
|
||||
// 1. 生成 meta 菜单元数据
|
||||
const meta = {
|
||||
title: route.name,
|
||||
icon: route.icon,
|
||||
|
|
@ -73,10 +75,20 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
|
|||
route.children &&
|
||||
route.children.length === 1 &&
|
||||
(route.alwaysShow !== undefined ? route.alwaysShow : true)
|
||||
} as any
|
||||
// 特殊逻辑：如果后端配置的 MenuDO.component 包含 ?，则表示需要传递参数
|
||||
// 此时，我们需要解析参数，并且将参数放到 meta.query 中
|
||||
// 这样，后续在 Vue 文件中，可以通过 const { currentRoute } = useRouter() 中，通过 meta.query 获取到参数
|
||||
if (route.component && route.component.indexOf('?') > -1) {
|
||||
const query = route.component.split('?')[1]
|
||||
route.component = route.component.split('?')[0]
|
||||
meta.query = qs.parse(query)
|
||||
}
|
||||
|
||||
// 2. 生成 data（AppRouteRecordRaw）
|
||||
// 路由地址转首字母大写驼峰，作为路由名称，适配keepAlive
|
||||
let data: AppRouteRecordRaw = {
|
||||
path: route.path,
|
||||
path: route.path.indexOf('?') > -1 ? route.path.split('?')[0] : route.path,
|
||||
name:
|
||||
route.componentName && route.componentName.length > 0
|
||||
? route.componentName
|
||||
|
|
|
|||
|
|
@ -62,7 +62,14 @@
|
|||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<span>{{ t('workplace.project') }}</span>
|
||||
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="https://github.com/yudaocode"
|
||||
target="_blank"
|
||||
>
|
||||
{{ t('action.more') }}
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
|
|
@ -76,13 +83,13 @@
|
|||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<el-card shadow="hover">
|
||||
<el-card shadow="hover" class="mr-5px mt-5px">
|
||||
<div class="flex items-center">
|
||||
<Icon :icon="item.icon" :size="25" class="mr-8px" />
|
||||
<span class="text-16px">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="mt-16px text-14px text-gray-400">{{ t(item.message) }}</div>
|
||||
<div class="mt-16px flex justify-between text-12px text-gray-400">
|
||||
<div class="mt-12px text-9px text-gray-400">{{ t(item.message) }}</div>
|
||||
<div class="mt-12px flex justify-between text-12px text-gray-400">
|
||||
<span>{{ item.personal }}</span>
|
||||
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
|
||||
</div>
|
||||
|
|
@ -204,45 +211,45 @@ let projects = reactive<Project[]>([])
|
|||
const getProject = async () => {
|
||||
const data = [
|
||||
{
|
||||
name: 'Github',
|
||||
name: 'ruoyi-vue-pro',
|
||||
icon: 'akar-icons:github-fill',
|
||||
message: 'workplace.introduction',
|
||||
personal: 'Archer',
|
||||
message: 'https://github.com/YunaiV/ruoyi-vue-pro',
|
||||
personal: 'Spring Boot 单体架构',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'Vue',
|
||||
name: 'yudao-ui-admin-vue3',
|
||||
icon: 'logos:vue',
|
||||
message: 'workplace.introduction',
|
||||
personal: 'Archer',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
|
||||
personal: 'Vue3 + element-plus',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'Angular',
|
||||
icon: 'logos:angular-icon',
|
||||
message: 'workplace.introduction',
|
||||
personal: 'Archer',
|
||||
name: 'yudao-ui-admin-vben',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vben',
|
||||
personal: 'Vue3 + vben(antd)',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'React',
|
||||
icon: 'logos:react',
|
||||
message: 'workplace.introduction',
|
||||
personal: 'Archer',
|
||||
name: 'yudao-cloud',
|
||||
icon: 'akar-icons:github',
|
||||
message: 'https://github.com/YunaiV/yudao-cloud',
|
||||
personal: 'Spring Cloud 微服务架构',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'Webpack',
|
||||
icon: 'logos:webpack',
|
||||
message: 'workplace.introduction',
|
||||
personal: 'Archer',
|
||||
name: 'yudao-ui-mall-uniapp',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
|
||||
personal: 'Vue3 + uniapp',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'Vite',
|
||||
icon: 'vscode-icons:file-type-vite',
|
||||
message: 'workplace.introduction',
|
||||
personal: 'Archer',
|
||||
name: 'yudao-ui-admin-vue2',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
|
||||
personal: 'Vue2 + element-ui',
|
||||
time: new Date()
|
||||
}
|
||||
]
|
||||
|
|
@ -254,27 +261,27 @@ let notice = reactive<Notice[]>([])
|
|||
const getNotice = async () => {
|
||||
const data = [
|
||||
{
|
||||
title: '系统升级版本',
|
||||
title: '系统支持 JDK 8/17/21，Vue 2/3',
|
||||
type: '通知',
|
||||
keys: ['通知', '升级'],
|
||||
keys: ['通知', '8', '17', '21', '2', '3'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '系统凌晨维护',
|
||||
title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
|
||||
type: '公告',
|
||||
keys: ['公告', '维护'],
|
||||
keys: ['公告', 'Boot', 'Cloud'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '系统升级版本',
|
||||
title: '全部开源，个人与企业可 100% 直接使用，无需授权',
|
||||
type: '通知',
|
||||
keys: ['通知', '升级'],
|
||||
keys: ['通知', '无需授权'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '系统凌晨维护',
|
||||
title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
|
||||
type: '公告',
|
||||
keys: ['公告', '维护'],
|
||||
keys: ['公告', '最广泛'],
|
||||
date: new Date()
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ import * as FormApi from '@/api/bpm/form'
|
|||
import FcDesigner from '@form-create/designer'
|
||||
import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { useFormCreateDesigner } from '@/components/FormCreate'
|
||||
|
||||
defineOptions({ name: 'BpmFormEditor' })
|
||||
|
||||
|
|
@ -55,6 +56,7 @@ const { query } = useRoute() // 路由信息
|
|||
const { delView } = useTagsViewStore() // 视图操作
|
||||
|
||||
const designer = ref() // 表单设计器
|
||||
useFormCreateDesigner(designer) // 表单设计器增强
|
||||
const dialogVisible = ref(false) // 弹窗是否展示
|
||||
const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
|
||||
const formData = ref({
|
||||
|
|
|
|||
|
|
@ -24,15 +24,15 @@
|
|||
{{ processInstance?.startUser.nickname }}
|
||||
<el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-card class="mb-15px !-mt-10px" v-if="runningTasks[index].formId > 0">
|
||||
<el-card v-if="runningTasks[index].formId > 0" class="mb-15px !-mt-10px">
|
||||
<template #header>
|
||||
<span class="el-icon-picture-outline">
|
||||
填写表单【{{ runningTasks[index]?.formName }}】
|
||||
</span>
|
||||
</template>
|
||||
<form-create
|
||||
v-model:api="approveFormFApis[index]"
|
||||
v-model="approveForms[index].value"
|
||||
v-model:api="approveFormFApis[index]"
|
||||
:option="approveForms[index].option"
|
||||
:rule="approveForms[index].rule"
|
||||
/>
|
||||
|
|
@ -92,8 +92,8 @@
|
|||
<!-- 情况一：流程表单 -->
|
||||
<el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
|
||||
<form-create
|
||||
ref="fApi"
|
||||
v-model="detailForm.value"
|
||||
v-model:api="fApi"
|
||||
:option="detailForm.option"
|
||||
:rule="detailForm.rule"
|
||||
/>
|
||||
|
|
@ -280,9 +280,9 @@ const getProcessInstance = async () => {
|
|||
data.formVariables
|
||||
)
|
||||
nextTick().then(() => {
|
||||
fApi.value?.fapi?.btn.show(false)
|
||||
fApi.value?.fapi?.resetBtn.show(false)
|
||||
fApi.value?.fapi?.disabled(true)
|
||||
fApi.value?.btn.show(false)
|
||||
fApi.value?.resetBtn.show(false)
|
||||
fApi.value?.disabled(true)
|
||||
})
|
||||
} else {
|
||||
// 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ import BusinessDetailsHeader from './BusinessDetailsHeader.vue'
|
|||
import BusinessDetailsInfo from './BusinessDetailsInfo.vue'
|
||||
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
|
||||
import { BizTypeEnum } from '@/api/crm/permission'
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { OperateLogVO } from '@/api/system/operatelog'
|
||||
import { getOperateLogPage } from '@/api/crm/operateLog'
|
||||
import BusinessForm from '@/views/crm/business/BusinessForm.vue'
|
||||
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
|
||||
|
|
@ -113,7 +113,7 @@ const transfer = () => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async (contactId: number) => {
|
||||
if (!contactId) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -5,35 +5,43 @@
|
|||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="商机名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入商机名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入商机名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button type="primary" @click="openForm('create')" v-hasPermi="['crm:business:create']">
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-hasPermi="['crm:business:create']" type="primary" @click="openForm('create')">
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['crm:business:export']"
|
||||
:loading="exportLoading"
|
||||
plain
|
||||
type="success"
|
||||
@click="handleExport"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
<Icon class="mr-5px" icon="ep:download" />
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -46,8 +54,8 @@
|
|||
<el-tab-pane label="我参与的" name="2" />
|
||||
<el-tab-pane label="下属负责的" name="3" />
|
||||
</el-tabs>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column align="center" label="商机名称" fixed="left" prop="name" width="160">
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column align="center" fixed="left" label="商机名称" prop="name" width="160">
|
||||
<template #default="scope">
|
||||
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
|
||||
{{ scope.row.name }}
|
||||
|
|
@ -66,17 +74,17 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="商机金额（元）"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
align="center"
|
||||
label="商机金额（元）"
|
||||
prop="totalPrice"
|
||||
width="140"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="预计成交日期"
|
||||
align="center"
|
||||
prop="dealTime"
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="预计成交日期"
|
||||
prop="dealTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="备注" prop="remark" width="200" />
|
||||
|
|
@ -97,49 +105,49 @@
|
|||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
label="更新时间"
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="更新时间"
|
||||
prop="updateTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="创建人" prop="creatorName" width="100px" />
|
||||
<el-table-column
|
||||
label="商机状态组"
|
||||
align="center"
|
||||
prop="statusTypeName"
|
||||
fixed="right"
|
||||
label="商机状态组"
|
||||
prop="statusTypeName"
|
||||
width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
label="商机阶段"
|
||||
align="center"
|
||||
prop="statusName"
|
||||
fixed="right"
|
||||
label="商机阶段"
|
||||
prop="statusName"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="130px">
|
||||
<el-table-column align="center" fixed="right" label="操作" width="130px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['crm:business:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['crm:business:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['crm:business:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['crm:business:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
|
|
@ -148,9 +156,9 @@
|
|||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
|
@ -159,7 +167,7 @@
|
|||
<BusinessForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import * as BusinessApi from '@/api/crm/business'
|
||||
|
|
@ -216,7 +224,7 @@ const handleTabClick = (tab: TabsPaneContext) => {
|
|||
}
|
||||
|
||||
/** 打开客户详情 */
|
||||
const { currentRoute, push } = useRouter()
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'CrmBusinessDetail', params: { id } })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ import PermissionList from '@/views/crm/permission/components/PermissionList.vue
|
|||
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
|
||||
import FollowUpList from '@/views/crm/followup/index.vue'
|
||||
import { BizTypeEnum } from '@/api/crm/permission'
|
||||
import type { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import type { OperateLogVO } from '@/api/system/operatelog'
|
||||
import { getOperateLogPage } from '@/api/crm/operateLog'
|
||||
|
||||
defineOptions({ name: 'CrmClueDetail' })
|
||||
|
|
@ -103,7 +103,7 @@ const handleTransform = async () => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async () => {
|
||||
const data = await getOperateLogPage({
|
||||
bizType: BizTypeEnum.CRM_CLUE,
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ import ContactDetailsInfo from '@/views/crm/contact/detail/ContactDetailsInfo.vu
|
|||
import BusinessList from '@/views/crm/business/components/BusinessList.vue' // 商机列表
|
||||
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
|
||||
import { BizTypeEnum } from '@/api/crm/permission'
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { OperateLogVO } from '@/api/system/operatelog'
|
||||
import { getOperateLogPage } from '@/api/crm/operateLog'
|
||||
import ContactForm from '@/views/crm/contact/ContactForm.vue'
|
||||
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
|
||||
|
|
@ -88,7 +88,7 @@ const transfer = () => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async (contactId: number) => {
|
||||
if (!contactId) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { OperateLogVO } from '@/api/system/operatelog'
|
||||
import * as ContractApi from '@/api/crm/contract'
|
||||
import ContractDetailsInfo from './ContractDetailsInfo.vue'
|
||||
import ContractDetailsHeader from './ContractDetailsHeader.vue'
|
||||
|
|
@ -94,7 +94,7 @@ const getContractData = async () => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async (contractId: number) => {
|
||||
if (!contractId) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -1,16 +1,24 @@
|
|||
<!-- 客户导入窗口 -->
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" title="客户导入" width="400">
|
||||
<div class="flex items-center my-10px">
|
||||
<span class="mr-10px">负责人</span>
|
||||
<el-select v-model="ownerUserId" class="!w-240px" clearable>
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="item.id"
|
||||
:label="item.nickname"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
:disabled="formLoading"
|
||||
:headers="uploadHeaders"
|
||||
:limit="1"
|
||||
:on-error="submitFormError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="submitFormSuccess"
|
||||
accept=".xlsx, .xls"
|
||||
action="none"
|
||||
drag
|
||||
|
|
@ -43,9 +51,10 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as CustomerApi from '@/api/crm/customer'
|
||||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
||||
import download from '@/utils/download'
|
||||
import type { UploadUserFile } from 'element-plus'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
defineOptions({ name: 'SystemUserImportForm' })
|
||||
|
||||
|
|
@ -54,15 +63,18 @@ const message = useMessage() // 消息弹窗
|
|||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const uploadRef = ref()
|
||||
const uploadHeaders = ref() // 上传 Header 头
|
||||
const fileList = ref<UploadUserFile[]>([]) // 文件列表
|
||||
const updateSupport = ref(false) // 是否更新已经存在的客户数据
|
||||
const ownerUserId = ref<undefined | number>() // 负责人编号
|
||||
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = () => {
|
||||
const open = async () => {
|
||||
dialogVisible.value = true
|
||||
fileList.value = []
|
||||
resetForm()
|
||||
await resetForm()
|
||||
// 获得用户列表
|
||||
userOptions.value = await UserApi.getSimpleUserList()
|
||||
ownerUserId.value = useUserStore().getUser.id
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
|
|
@ -72,17 +84,20 @@ const submitForm = async () => {
|
|||
message.error('请上传文件')
|
||||
return
|
||||
}
|
||||
// 提交请求
|
||||
uploadHeaders.value = {
|
||||
Authorization: 'Bearer ' + getAccessToken(),
|
||||
'tenant-id': getTenantId()
|
||||
}
|
||||
|
||||
formLoading.value = true
|
||||
const formData = new FormData()
|
||||
formData.append('updateSupport', updateSupport.value)
|
||||
formData.append('file', fileList.value[0].raw)
|
||||
// TODO @芋艿：后面是不是可以采用这种形式，去掉 uploadHeaders
|
||||
await CustomerApi.handleImport(formData)
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('updateSupport', String(updateSupport.value))
|
||||
formData.append('file', fileList.value[0].raw as Blob)
|
||||
formData.append('ownerUserId', String(ownerUserId.value))
|
||||
const res = await CustomerApi.handleImport(formData)
|
||||
submitFormSuccess(res)
|
||||
} catch {
|
||||
submitFormError()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 文件上传成功 */
|
||||
|
|
@ -108,6 +123,8 @@ const submitFormSuccess = (response: any) => {
|
|||
text += '< ' + customerName + ': ' + data.failureCustomerNames[customerName] + ' >'
|
||||
}
|
||||
message.alert(text)
|
||||
formLoading.value = false
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emits('success')
|
||||
}
|
||||
|
|
@ -119,9 +136,12 @@ const submitFormError = (): void => {
|
|||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
const resetForm = async () => {
|
||||
// 重置上传状态和文件
|
||||
formLoading.value = false
|
||||
fileList.value = []
|
||||
updateSupport.value = false
|
||||
ownerUserId.value = undefined
|
||||
await nextTick()
|
||||
uploadRef.value?.clearFiles()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ import PermissionList from '@/views/crm/permission/components/PermissionList.vue
|
|||
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
|
||||
import FollowUpList from '@/views/crm/followup/index.vue'
|
||||
import { BizTypeEnum } from '@/api/crm/permission'
|
||||
import type { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import type { OperateLogVO } from '@/api/system/operatelog'
|
||||
import { getOperateLogPage } from '@/api/crm/operateLog'
|
||||
import CustomerDistributeForm from '@/views/crm/customer/pool/CustomerDistributeForm.vue'
|
||||
|
||||
|
|
@ -185,7 +185,7 @@ const handlePutPool = async () => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async () => {
|
||||
if (!customerId.value) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery(undefined)">
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
<el-tab-pane label="下属负责的" name="3" />
|
||||
</el-tabs>
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column align="center" label="客户名称" fixed="left" prop="name" width="160">
|
||||
<el-table-column align="center" fixed="left" label="客户名称" prop="name" width="160">
|
||||
<template #default="scope">
|
||||
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
|
||||
{{ scope.row.name }}
|
||||
|
|
@ -125,9 +125,9 @@
|
|||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手机" align="center" prop="mobile" width="120" />
|
||||
<el-table-column label="电话" align="center" prop="telephone" width="130" />
|
||||
<el-table-column label="邮箱" align="center" prop="email" width="180" />
|
||||
<el-table-column align="center" label="手机" prop="mobile" width="120" />
|
||||
<el-table-column align="center" label="电话" prop="telephone" width="130" />
|
||||
<el-table-column align="center" label="邮箱" prop="email" width="180" />
|
||||
<el-table-column align="center" label="客户级别" prop="level" width="135">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="最后跟进记录" prop="contactLastContent" width="200" />
|
||||
<el-table-column label="地址" align="center" prop="detailAddress" width="180" />
|
||||
<el-table-column align="center" label="地址" prop="detailAddress" width="180" />
|
||||
<el-table-column align="center" label="距离进入公海天数" prop="poolDay" width="140">
|
||||
<template #default="scope"> {{ scope.row.poolDay }} 天</template>
|
||||
</el-table-column>
|
||||
|
|
@ -254,7 +254,7 @@ const activeName = ref('1') // 列表 tab
|
|||
|
||||
/** tab 切换 */
|
||||
const handleTabClick = (tab: TabsPaneContext) => {
|
||||
queryParams.sceneType = tab.paneName
|
||||
queryParams.sceneType = tab.paneName as string
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="老负责人">
|
||||
<el-radio-group v-model="oldOwnerHandler" @change="formData.oldOwnerPermissionLevel">
|
||||
<el-radio-group v-model="oldOwnerHandler" @change="handleOwnerChange">
|
||||
<el-radio :label="false" size="large">移除</el-radio>
|
||||
<el-radio :label="true" size="large">加入团队</el-radio>
|
||||
</el-radio-group>
|
||||
|
|
@ -86,10 +86,16 @@ const open = async (bizId: number) => {
|
|||
dialogVisible.value = true
|
||||
dialogTitle.value = getDialogTitle()
|
||||
resetForm()
|
||||
formData.value.bizId = bizId
|
||||
formData.value.id = bizId
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
// 老负责人负责方式
|
||||
const handleOwnerChange = (val: boolean) => {
|
||||
if (!val) {
|
||||
// 移除的话提交不带 oldOwnerPermissionLevel 参数
|
||||
formData.value.oldOwnerPermissionLevel = undefined
|
||||
}
|
||||
}
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { OperateLogVO } from '@/api/system/operatelog'
|
||||
import * as ProductApi from '@/api/crm/product'
|
||||
import ProductDetailsHeader from '@/views/crm/product/detail/ProductDetailsHeader.vue'
|
||||
import ProductDetailsInfo from '@/views/crm/product/detail/ProductDetailsInfo.vue'
|
||||
|
|
@ -40,7 +40,7 @@ const getProductData = async (id: number) => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async (productId: number) => {
|
||||
if (!productId) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import ReceivableDetailsHeader from './ReceivableDetailsHeader.vue'
|
|||
import ReceivableDetailsInfo from './ReceivableDetailsInfo.vue'
|
||||
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
|
||||
import { BizTypeEnum } from '@/api/crm/permission'
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { OperateLogVO } from '@/api/system/operatelog'
|
||||
import { getOperateLogPage } from '@/api/crm/operateLog'
|
||||
import ReceivableForm from '@/views/crm/receivable/ReceivableForm.vue'
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ const openForm = (type: string, id?: number) => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async (receivableId: number) => {
|
||||
if (!receivableId) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import ReceivablePlanDetailsHeader from './ReceivablePlanDetailsHeader.vue'
|
|||
import ReceivablePlanDetailsInfo from './ReceivablePlanDetailsInfo.vue'
|
||||
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
|
||||
import { BizTypeEnum } from '@/api/crm/permission'
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { OperateLogVO } from '@/api/system/operatelog'
|
||||
import { getOperateLogPage } from '@/api/crm/operateLog'
|
||||
import ReceivablePlanForm from '@/views/crm/receivable/plan/ReceivablePlanForm.vue'
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ const openForm = (type: string, id?: number) => {
|
|||
}
|
||||
|
||||
/** 获取操作日志 */
|
||||
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
|
||||
const getOperateLog = async (receivablePlanId: number) => {
|
||||
if (!receivablePlanId) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -10,11 +10,39 @@
|
|||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||
<el-table-column label="客户名称" align="center" prop="customerName" min-width="200" />
|
||||
<el-table-column label="序号" align="center" type="index" width="80" fixed="left" />
|
||||
<el-table-column
|
||||
label="客户名称"
|
||||
align="center"
|
||||
prop="customerName"
|
||||
min-width="200"
|
||||
fixed="left"
|
||||
/>
|
||||
<el-table-column label="合同名称" align="center" prop="contractName" min-width="200" />
|
||||
<el-table-column label="合同总金额" align="center" prop="totalPrice" min-width="200" />
|
||||
<el-table-column label="回款金额" align="center" prop="receivablePrice" min-width="200" />
|
||||
<el-table-column
|
||||
label="合同总金额"
|
||||
align="center"
|
||||
prop="totalPrice"
|
||||
min-width="200"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="回款金额"
|
||||
align="center"
|
||||
prop="receivablePrice"
|
||||
min-width="200"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column align="center" label="客户来源" prop="source" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="客户行业" prop="industryId" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" align="center" prop="ownerUserName" min-width="200" />
|
||||
<el-table-column label="创建人" align="center" prop="creatorUserName" min-width="200" />
|
||||
<el-table-column
|
||||
|
|
@ -28,8 +56,9 @@
|
|||
label="下单日期"
|
||||
align="center"
|
||||
prop="orderDate"
|
||||
:formatter="dateFormatter2"
|
||||
:formatter="dateFormatter"
|
||||
min-width="200"
|
||||
fixed="right"
|
||||
/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
|
@ -40,10 +69,12 @@ import {
|
|||
CrmStatisticsCustomerSummaryByDateRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { round } from 'lodash-es'
|
||||
import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { erpPriceTableColumnFormatter } from '@/utils'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'CustomerConversionStat' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
|
|
@ -53,7 +84,7 @@ const list = ref<CrmStatisticsCustomerSummaryByDateRespVO[]>([]) // 列表的数
|
|||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
right: 40, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
|
|
@ -93,10 +124,9 @@ const echartsOption = reactive<EChartsOption>({
|
|||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const customerCount = await StatisticsCustomerApi.getCustomerSummaryByDate(props.queryParams)
|
||||
const contractSummary = await StatisticsCustomerApi.getContractSummary(props.queryParams)
|
||||
// 2.1 更新 Echarts 数据
|
||||
|
|
@ -111,7 +141,7 @@ const loadData = async () => {
|
|||
return {
|
||||
name: item.time,
|
||||
value: item.customerCreateCount
|
||||
? round((item.customerDealCount / item.customerCreateCount) * 100, 2)
|
||||
? ((item.customerDealCount / item.customerCreateCount) * 100).toFixed(2)
|
||||
: 0
|
||||
}
|
||||
}
|
||||
|
|
@ -119,8 +149,18 @@ const loadData = async () => {
|
|||
}
|
||||
// 2.2 更新列表数据
|
||||
list.value = contractSummary
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
<!-- 成交周期分析 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||
<el-table-column label="区域" align="center" prop="areaName" min-width="200" />
|
||||
<el-table-column
|
||||
label="成交周期(天)"
|
||||
align="center"
|
||||
prop="customerDealCycle"
|
||||
min-width="200"
|
||||
/>
|
||||
<el-table-column label="成交客户数" align="center" prop="customerDealCount" min-width="200" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
StatisticsCustomerApi,
|
||||
CrmStatisticsCustomerDealCycleByAreaRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import { EChartsOption } from 'echarts'
|
||||
|
||||
defineOptions({ name: 'CustomerDealCycleByArea' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticsCustomerDealCycleByAreaRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 40, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '成交周期(天)',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '成交客户数',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
yAxisIndex: 1
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '成交周期分析' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '成交周期(天)',
|
||||
min: 0,
|
||||
minInterval: 1 // 显示整数刻度
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '成交客户数',
|
||||
min: 0,
|
||||
minInterval: 1, // 显示整数刻度
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted', // 右侧网格线虚化, 减少混乱
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '区域',
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
const customerDealCycleByArea = (
|
||||
await StatisticsCustomerApi.getCustomerDealCycleByArea(props.queryParams)
|
||||
).map((s: CrmStatisticsCustomerDealCycleByAreaRespVO) => {
|
||||
return {
|
||||
areaName: s.areaName,
|
||||
customerDealCycle: s.customerDealCycle,
|
||||
customerDealCount: s.customerDealCount
|
||||
}
|
||||
})
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = customerDealCycleByArea.map(
|
||||
(s: CrmStatisticsCustomerDealCycleByAreaRespVO) => s.areaName
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = customerDealCycleByArea.map(
|
||||
(s: CrmStatisticsCustomerDealCycleByAreaRespVO) => s.customerDealCycle
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = customerDealCycleByArea.map(
|
||||
(s: CrmStatisticsCustomerDealCycleByAreaRespVO) => s.customerDealCount
|
||||
)
|
||||
}
|
||||
// 2.2 更新列表数据
|
||||
list.value = customerDealCycleByArea
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<!-- 成交周期分析 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||
<el-table-column label="产品名称" align="center" prop="productName" min-width="200" />
|
||||
<el-table-column
|
||||
label="成交周期(天)"
|
||||
align="center"
|
||||
prop="customerDealCycle"
|
||||
min-width="200"
|
||||
/>
|
||||
<el-table-column label="成交客户数" align="center" prop="customerDealCount" min-width="200" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
StatisticsCustomerApi,
|
||||
CrmStatisticsCustomerDealCycleByProductRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import { EChartsOption } from 'echarts'
|
||||
|
||||
defineOptions({ name: 'CustomerDealCycleByProduct' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticsCustomerDealCycleByProductRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 40, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '成交周期(天)',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '成交客户数',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
yAxisIndex: 1
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '成交周期分析' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '成交周期(天)',
|
||||
min: 0,
|
||||
minInterval: 1 // 显示整数刻度
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '成交客户数',
|
||||
min: 0,
|
||||
minInterval: 1, // 显示整数刻度
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted', // 右侧网格线虚化, 减少混乱
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '产品名称',
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
const customerDealCycleByProduct = (
|
||||
await StatisticsCustomerApi.getCustomerDealCycleByProduct(props.queryParams)
|
||||
).map((s: CrmStatisticsCustomerDealCycleByProductRespVO) => {
|
||||
return {
|
||||
productName: s.productName ?? '未知',
|
||||
customerDealCycle: s.customerDealCount,
|
||||
customerDealCount: s.customerDealCount
|
||||
}
|
||||
})
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = customerDealCycleByProduct.map(
|
||||
(s: CrmStatisticsCustomerDealCycleByProductRespVO) => s.productName
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = customerDealCycleByProduct.map(
|
||||
(s: CrmStatisticsCustomerDealCycleByProductRespVO) => s.customerDealCycle
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = customerDealCycleByProduct.map(
|
||||
(s: CrmStatisticsCustomerDealCycleByProductRespVO) => s.customerDealCount
|
||||
)
|
||||
}
|
||||
// 2.2 更新列表数据
|
||||
list.value = customerDealCycleByProduct
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -26,11 +26,12 @@
|
|||
import {
|
||||
StatisticsCustomerApi,
|
||||
CrmStatisticsCustomerDealCycleByDateRespVO,
|
||||
CrmStatisticsCustomerSummaryByDateRespVO,
|
||||
CrmStatisticsCustomerSummaryByDateRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import { EChartsOption } from 'echarts'
|
||||
|
||||
defineOptions({ name: 'CustomerDealCycle' })
|
||||
defineOptions({ name: 'CustomerDealCycleByUser' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
|
|
@ -40,7 +41,7 @@ const list = ref<CrmStatisticsCustomerDealCycleByDateRespVO[]>([]) // 列表的
|
|||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
right: 40, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
|
|
@ -49,12 +50,14 @@ const echartsOption = reactive<EChartsOption>({
|
|||
{
|
||||
name: '成交周期(天)',
|
||||
type: 'bar',
|
||||
data: []
|
||||
data: [],
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '成交客户数',
|
||||
type: 'bar',
|
||||
data: []
|
||||
data: [],
|
||||
yAxisIndex: 1
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
|
|
@ -74,10 +77,26 @@ const echartsOption = reactive<EChartsOption>({
|
|||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数量（个）'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '成交周期(天)',
|
||||
min: 0,
|
||||
minInterval: 1 // 显示整数刻度
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '成交客户数',
|
||||
min: 0,
|
||||
minInterval: 1, // 显示整数刻度
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted', // 右侧网格线虚化, 减少混乱
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
|
|
@ -85,14 +104,13 @@ const echartsOption = reactive<EChartsOption>({
|
|||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate(
|
||||
props.queryParams
|
||||
)
|
||||
const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
|
||||
const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
|
||||
props.queryParams
|
||||
)
|
||||
const customerDealCycleByUser = await StatisticsCustomerApi.getCustomerDealCycleByUser(
|
||||
|
|
@ -116,7 +134,16 @@ const loadData = async () => {
|
|||
}
|
||||
// 2.2 更新列表数据
|
||||
list.value = customerDealCycleByUser
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
|
|
@ -12,11 +12,11 @@
|
|||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||
<el-table-column label="员工姓名" align="center" prop="ownerUserName" min-width="200" />
|
||||
<el-table-column label="跟进次数" align="right" prop="followupRecordCount" min-width="200" />
|
||||
<el-table-column label="跟进次数" align="right" prop="followUpRecordCount" min-width="200" />
|
||||
<el-table-column
|
||||
label="跟进客户数"
|
||||
align="right"
|
||||
prop="followupCustomerCount"
|
||||
prop="followUpCustomerCount"
|
||||
min-width="200"
|
||||
/>
|
||||
</el-table>
|
||||
|
|
@ -25,22 +25,24 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
StatisticsCustomerApi,
|
||||
CrmStatisticsFollowupSummaryByDateRespVO,
|
||||
CrmStatisticsFollowupSummaryByUserRespVO
|
||||
CrmStatisticsFollowUpSummaryByDateRespVO,
|
||||
CrmStatisticsFollowUpSummaryByUserRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import Echart from '@/components/Echart/src/Echart.vue'
|
||||
import { EChartsOption } from 'echarts'
|
||||
|
||||
defineOptions({ name: 'CustomerFollowupSummary' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticsFollowupSummaryByUserRespVO[]>([]) // 列表的数据
|
||||
const list = ref<CrmStatisticsFollowUpSummaryByUserRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
right: 30, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
|
|
@ -49,11 +51,13 @@ const echartsOption = reactive<EChartsOption>({
|
|||
{
|
||||
name: '跟进客户数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '跟进次数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
}
|
||||
],
|
||||
|
|
@ -74,46 +78,74 @@ const echartsOption = reactive<EChartsOption>({
|
|||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数量（个）'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '跟进客户数',
|
||||
min: 0,
|
||||
minInterval: 1 // 显示整数刻度
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '跟进次数',
|
||||
min: 0,
|
||||
minInterval: 1, // 显示整数刻度
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted', // 右侧网格线虚化, 减少混乱
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const followupSummaryByDate = await StatisticsCustomerApi.getFollowupSummaryByDate(
|
||||
const followUpSummaryByDate = await StatisticsCustomerApi.getFollowUpSummaryByDate(
|
||||
props.queryParams
|
||||
)
|
||||
const followupSummaryByUser = await StatisticsCustomerApi.getFollowupSummaryByUser(
|
||||
const followUpSummaryByUser = await StatisticsCustomerApi.getFollowUpSummaryByUser(
|
||||
props.queryParams
|
||||
)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = followupSummaryByDate.map(
|
||||
(s: CrmStatisticsFollowupSummaryByDateRespVO) => s.time
|
||||
echartsOption.xAxis['data'] = followUpSummaryByDate.map(
|
||||
(s: CrmStatisticsFollowUpSummaryByDateRespVO) => s.time
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = followupSummaryByDate.map(
|
||||
(s: CrmStatisticsFollowupSummaryByDateRespVO) => s.followupCustomerCount
|
||||
echartsOption.series[0]['data'] = followUpSummaryByDate.map(
|
||||
(s: CrmStatisticsFollowUpSummaryByDateRespVO) => s.followUpCustomerCount
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = followupSummaryByDate.map(
|
||||
(s: CrmStatisticsFollowupSummaryByDateRespVO) => s.followupRecordCount
|
||||
echartsOption.series[1]['data'] = followUpSummaryByDate.map(
|
||||
(s: CrmStatisticsFollowUpSummaryByDateRespVO) => s.followUpRecordCount
|
||||
)
|
||||
}
|
||||
// 2.2 更新列表数据
|
||||
list.value = followupSummaryByUser
|
||||
loading.value = false
|
||||
list.value = followUpSummaryByUser
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
|
|
@ -11,8 +11,12 @@
|
|||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||
<el-table-column label="跟进方式" align="center" prop="followupType" min-width="200" />
|
||||
<el-table-column label="个数" align="center" prop="followupRecordCount" min-width="200" />
|
||||
<el-table-column label="跟进方式" align="center" prop="followUpType" min-width="200">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_FOLLOW_UP_TYPE" :value="scope.row.followUpType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="个数" align="center" prop="followUpRecordCount" min-width="200" />
|
||||
<el-table-column label="占比(%)" align="center" prop="portion" min-width="200" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
|
@ -20,16 +24,19 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
StatisticsCustomerApi,
|
||||
CrmStatisticsFollowupSummaryByTypeRespVO
|
||||
CrmStatisticsFollowUpSummaryByTypeRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { round, sumBy } from 'lodash-es'
|
||||
import { sumBy } from 'lodash-es'
|
||||
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
|
||||
import { erpCalculatePercentage } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'CustomerFollowupType' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticsFollowupSummaryByTypeRespVO[]>([]) // 列表的数据
|
||||
const list = ref<CrmStatisticsFollowUpSummaryByTypeRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 饼图配置 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
|
|
@ -67,35 +74,43 @@ const echartsOption = reactive<EChartsOption>({
|
|||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const followupSummaryByType = await StatisticsCustomerApi.getFollowupSummaryByType(
|
||||
const followUpSummaryByType = await StatisticsCustomerApi.getFollowUpSummaryByType(
|
||||
props.queryParams
|
||||
)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = followupSummaryByType.map(
|
||||
(r: CrmStatisticsFollowupSummaryByTypeRespVO) => {
|
||||
echartsOption.series[0]['data'] = followUpSummaryByType.map(
|
||||
(row: CrmStatisticsFollowUpSummaryByTypeRespVO) => {
|
||||
return {
|
||||
name: r.followupType,
|
||||
value: r.followupRecordCount
|
||||
name: getDictLabel(DICT_TYPE.CRM_FOLLOW_UP_TYPE, row.followUpType),
|
||||
value: row.followUpRecordCount
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
// 2.2 更新列表数据
|
||||
const totalCount = sumBy(followupSummaryByType, 'followupRecordCount')
|
||||
list.value = followupSummaryByType.map((r: CrmStatisticsFollowupSummaryByTypeRespVO) => {
|
||||
const totalCount = sumBy(followUpSummaryByType, 'followUpRecordCount')
|
||||
list.value = followUpSummaryByType.map((row: CrmStatisticsFollowUpSummaryByTypeRespVO) => {
|
||||
return {
|
||||
followupType: r.followupType,
|
||||
followupRecordCount: r.followupRecordCount,
|
||||
portion: round((r.followupRecordCount / totalCount) * 100, 2)
|
||||
...row,
|
||||
portion: erpCalculatePercentage(row.followUpRecordCount, totalCount)
|
||||
}
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<!-- 客户总量统计 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="序号" align="center" type="index" width="80" fixed="left" />
|
||||
<el-table-column label="员工姓名" prop="ownerUserName" min-width="100" fixed="left" />
|
||||
<el-table-column
|
||||
label="进入公海客户数"
|
||||
align="right"
|
||||
prop="customerPutCount"
|
||||
min-width="200"
|
||||
/>
|
||||
<el-table-column
|
||||
label="公海领取客户数"
|
||||
align="right"
|
||||
prop="customerTakeCount"
|
||||
min-width="200"
|
||||
/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
StatisticsCustomerApi,
|
||||
CrmStatisticsPoolSummaryByDateRespVO,
|
||||
CrmStatisticsPoolSummaryByUserRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import { EChartsOption } from 'echarts'
|
||||
|
||||
defineOptions({ name: 'CustomerPoolSummary' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticsPoolSummaryByUserRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 40, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '进入公海客户数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '公海领取客户数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '公海客户分析' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '进入公海客户数',
|
||||
min: 0,
|
||||
minInterval: 1 // 显示整数刻度
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '公海领取客户数',
|
||||
min: 0,
|
||||
minInterval: 1, // 显示整数刻度
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted', // 右侧网格线虚化, 减少混乱
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
const poolSummaryByDate = await StatisticsCustomerApi.getPoolSummaryByDate(props.queryParams)
|
||||
const poolSummaryByUser = await StatisticsCustomerApi.getPoolSummaryByUser(props.queryParams)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = poolSummaryByDate.map(
|
||||
(s: CrmStatisticsPoolSummaryByDateRespVO) => s.time
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = poolSummaryByDate.map(
|
||||
(s: CrmStatisticsPoolSummaryByDateRespVO) => s.customerPutCount
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = poolSummaryByDate.map(
|
||||
(s: CrmStatisticsPoolSummaryByDateRespVO) => s.customerTakeCount
|
||||
)
|
||||
}
|
||||
|
||||
// 2.2 更新列表数据
|
||||
list.value = poolSummaryByUser
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||
<el-table-column label="员工姓名" prop="ownerUserName" min-width="100" />
|
||||
<el-table-column label="序号" align="center" type="index" width="80" fixed="left" />
|
||||
<el-table-column label="员工姓名" prop="ownerUserName" min-width="100" fixed="left" />
|
||||
<el-table-column
|
||||
label="新增客户数"
|
||||
align="right"
|
||||
|
|
@ -21,28 +21,31 @@
|
|||
<el-table-column label="成交客户数" align="right" prop="customerDealCount" min-width="200" />
|
||||
<el-table-column label="客户成交率(%)" align="right" min-width="200">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.customerCreateCount !== 0
|
||||
? round((scope.row.customerDealCount / scope.row.customerCreateCount) * 100, 2)
|
||||
: 0
|
||||
}}
|
||||
{{ erpCalculatePercentage(scope.row.customerDealCount, scope.row.customerCreateCount) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="合同总金额" align="right" prop="contractPrice" min-width="200" />
|
||||
<el-table-column label="回款金额" align="right" prop="receivablePrice" min-width="200" />
|
||||
<el-table-column
|
||||
label="合同总金额"
|
||||
align="right"
|
||||
prop="contractPrice"
|
||||
min-width="200"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="回款金额"
|
||||
align="right"
|
||||
prop="receivablePrice"
|
||||
min-width="200"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column label="未回款金额" align="right" min-width="200">
|
||||
<!-- TODO @dhb52：参考 util/index.ts 的 // ========== ERP 专属方法 ========== 部分，搞个两个方法，一个格式化百分比，一个计算百分比 -->
|
||||
<template #default="scope">
|
||||
{{ round(scope.row.contractPrice - scope.row.receivablePrice, 2) }}
|
||||
{{ erpCalculatePercentage(scope.row.receivablePrice, scope.row.contractPrice) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="回款完成率(%)" align="right" min-width="200">
|
||||
<el-table-column label="回款完成率(%)" align="right" min-width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.contractPrice !== 0
|
||||
? round((scope.row.receivablePrice / scope.row.contractPrice) * 100, 2)
|
||||
: 0
|
||||
}}
|
||||
{{ erpCalculatePercentage(scope.row.receivablePrice, scope.row.contractPrice) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -55,9 +58,10 @@ import {
|
|||
CrmStatisticsCustomerSummaryByUserRespVO
|
||||
} from '@/api/crm/statistics/customer'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { round } from 'lodash-es'
|
||||
import { erpCalculatePercentage, erpPriceTableColumnFormatter } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'CustomerSummary' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
|
|
@ -67,7 +71,7 @@ const list = ref<CrmStatisticsCustomerSummaryByUserRespVO[]>([]) // 列表的数
|
|||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
right: 30, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
|
|
@ -76,11 +80,13 @@ const echartsOption = reactive<EChartsOption>({
|
|||
{
|
||||
name: '新增客户数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '成交客户数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
}
|
||||
],
|
||||
|
|
@ -101,10 +107,26 @@ const echartsOption = reactive<EChartsOption>({
|
|||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数量（个）'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '新增客户数',
|
||||
min: 0,
|
||||
minInterval: 1 // 显示整数刻度
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '成交客户数',
|
||||
min: 0,
|
||||
minInterval: 1, // 显示整数刻度
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted', // 右侧网格线虚化, 减少混乱
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
|
|
@ -112,10 +134,9 @@ const echartsOption = reactive<EChartsOption>({
|
|||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
|
||||
props.queryParams
|
||||
)
|
||||
|
|
@ -138,10 +159,21 @@ const loadData = async () => {
|
|||
(s: CrmStatisticsCustomerSummaryByDateRespVO) => s.customerDealCount
|
||||
)
|
||||
}
|
||||
|
||||
// 2.2 更新列表数据
|
||||
list.value = customerSummaryByUser
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
|
|
|
|||
|
|
@ -3,49 +3,77 @@
|
|||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="时间范围" prop="orderDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.times"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
:shortcuts="defaultShortcuts"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
@change="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间间隔" prop="interval">
|
||||
<el-select
|
||||
v-model="queryParams.interval"
|
||||
class="!w-240px"
|
||||
placeholder="间隔类型"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.DATE_INTERVAL)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select
|
||||
v-model="queryParams.deptId"
|
||||
class="!w-240px"
|
||||
:data="deptList"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
class="!w-240px"
|
||||
node-key="id"
|
||||
placeholder="请选择归属部门"
|
||||
@change="queryParams.userId = undefined"
|
||||
@change="(queryParams.userId = undefined), handleQuery()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工" prop="userId">
|
||||
<el-select v-model="queryParams.userId" class="!w-240px" placeholder="员工" clearable>
|
||||
<el-select
|
||||
v-model="queryParams.userId"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="员工"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="(user, index) in userListByDeptId"
|
||||
:key="index"
|
||||
:label="user.nickname"
|
||||
:value="user.id"
|
||||
:key="index"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
|
||||
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
|
@ -54,24 +82,34 @@
|
|||
<el-col>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 客户总量分析 -->
|
||||
<el-tab-pane label="客户总量分析" name="customerSummary" lazy>
|
||||
<CustomerSummary :query-params="queryParams" ref="customerSummaryRef" />
|
||||
<el-tab-pane label="客户总量分析" lazy name="customerSummary">
|
||||
<CustomerSummary ref="customerSummaryRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 客户跟进次数分析 -->
|
||||
<el-tab-pane label="客户跟进次数分析" name="followupSummary" lazy>
|
||||
<CustomerFollowupSummary :query-params="queryParams" ref="followupSummaryRef" />
|
||||
<el-tab-pane label="客户跟进次数分析" lazy name="followUpSummary">
|
||||
<CustomerFollowUpSummary ref="followUpSummaryRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 客户跟进方式分析 -->
|
||||
<el-tab-pane label="客户跟进方式分析" name="followupType" lazy>
|
||||
<CustomerFollowupType :query-params="queryParams" ref="followupTypeRef" />
|
||||
<el-tab-pane label="客户跟进方式分析" lazy name="followUpType">
|
||||
<CustomerFollowUpType ref="followUpTypeRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 客户转化率分析 -->
|
||||
<el-tab-pane label="客户转化率分析" name="conversionStat" lazy>
|
||||
<CustomerConversionStat :query-params="queryParams" ref="conversionStatRef" />
|
||||
<el-tab-pane label="客户转化率分析" lazy name="conversionStat">
|
||||
<CustomerConversionStat ref="conversionStatRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 公海客户分析 -->
|
||||
<el-tab-pane label="公海客户分析" lazy name="poolSummary">
|
||||
<CustomerPoolSummary ref="customerPoolSummaryRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 成交周期分析 -->
|
||||
<el-tab-pane label="成交周期分析" name="dealCycle" lazy>
|
||||
<CustomerDealCycle :query-params="queryParams" ref="dealCycleRef" />
|
||||
<el-tab-pane label="员工客户成交周期分析" lazy name="dealCycleByUser">
|
||||
<CustomerDealCycleByUser ref="dealCycleByUserRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="地区客户成交周期分析" lazy name="dealCycleByArea">
|
||||
<CustomerDealCycleByArea ref="dealCycleByAreaRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="产品客户成交周期分析" lazy name="dealCycleByProduct">
|
||||
<CustomerDealCycleByProduct ref="dealCycleByProductRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
|
|
@ -81,17 +119,22 @@
|
|||
import * as DeptApi from '@/api/system/dept'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import CustomerSummary from './components/CustomerSummary.vue'
|
||||
import CustomerFollowupSummary from './components/CustomerFollowupSummary.vue'
|
||||
import CustomerFollowupType from './components/CustomerFollowupType.vue'
|
||||
import CustomerConversionStat from './components/CustomerConversionStat.vue'
|
||||
import CustomerDealCycle from './components/CustomerDealCycle.vue'
|
||||
import CustomerDealCycleByUser from './components/CustomerDealCycleByUser.vue'
|
||||
import CustomerDealCycleByArea from './components/CustomerDealCycleByArea.vue'
|
||||
import CustomerDealCycleByProduct from './components/CustomerDealCycleByProduct.vue'
|
||||
import CustomerFollowUpSummary from './components/CustomerFollowUpSummary.vue'
|
||||
import CustomerFollowUpType from './components/CustomerFollowUpType.vue'
|
||||
import CustomerSummary from './components/CustomerSummary.vue'
|
||||
import CustomerPoolSummary from './components/CustomerPoolSummary.vue'
|
||||
|
||||
defineOptions({ name: 'CrmStatisticsCustomer' })
|
||||
|
||||
const queryParams = reactive({
|
||||
interval: 2, // WEEK, 周
|
||||
deptId: useUserStore().getUser.deptId,
|
||||
userId: undefined,
|
||||
times: [
|
||||
|
|
@ -104,50 +147,55 @@ const queryParams = reactive({
|
|||
const queryFormRef = ref() // 搜索的表单
|
||||
const deptList = ref<Tree[]>([]) // 部门树形结构
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 全量用户清单
|
||||
// 根据选择的部门筛选员工清单
|
||||
|
||||
/** 根据选择的部门筛选员工清单 */
|
||||
const userListByDeptId = computed(() =>
|
||||
queryParams.deptId
|
||||
? userList.value.filter((u: UserApi.UserVO) => u.deptId === queryParams.deptId)
|
||||
: []
|
||||
)
|
||||
|
||||
// 活跃标签
|
||||
const activeTab = ref('customerSummary')
|
||||
// 1.客户总量分析
|
||||
const customerSummaryRef = ref()
|
||||
// 2.客户跟进次数分析
|
||||
const followupSummaryRef = ref()
|
||||
// 3.客户跟进方式分析
|
||||
const followupTypeRef = ref()
|
||||
// 4.客户转化率分析
|
||||
const conversionStatRef = ref()
|
||||
// 5.公海客户分析
|
||||
// 缺 crm_owner_record 表
|
||||
// 6.成交周期分析
|
||||
const dealCycleRef = ref()
|
||||
const activeTab = ref('customerSummary') // 活跃标签
|
||||
const customerSummaryRef = ref() // 1. 客户总量分析
|
||||
const followUpSummaryRef = ref() // 2. 客户跟进次数分析
|
||||
const followUpTypeRef = ref() // 3. 客户跟进方式分析
|
||||
const conversionStatRef = ref() // 4. 客户转化率分析
|
||||
const customerPoolSummaryRef = ref() // 5. 客户公海分析
|
||||
const dealCycleByUserRef = ref() // 6. 成交周期分析(按员工)
|
||||
const dealCycleByAreaRef = ref() // 7. 成交周期分析(按地区)
|
||||
const dealCycleByProductRef = ref() // 8. 成交周期分析(按产品)
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
switch (activeTab.value) {
|
||||
case 'customerSummary':
|
||||
case 'customerSummary': // 客户总量分析
|
||||
customerSummaryRef.value?.loadData?.()
|
||||
break
|
||||
case 'followupSummary':
|
||||
followupSummaryRef.value?.loadData?.()
|
||||
case 'followUpSummary': // 客户跟进次数分析
|
||||
followUpSummaryRef.value?.loadData?.()
|
||||
break
|
||||
case 'followupType':
|
||||
followupTypeRef.value?.loadData?.()
|
||||
case 'followUpType': // 客户跟进方式分析
|
||||
followUpTypeRef.value?.loadData?.()
|
||||
break
|
||||
case 'conversionStat':
|
||||
case 'conversionStat': // 客户转化率分析
|
||||
conversionStatRef.value?.loadData?.()
|
||||
break
|
||||
case 'dealCycle':
|
||||
dealCycleRef.value?.loadData?.()
|
||||
case 'poolSummary': // 公海客户分析
|
||||
customerPoolSummaryRef.value?.loadData?.()
|
||||
break
|
||||
case 'dealCycleByUser': // 成交周期分析
|
||||
dealCycleByUserRef.value?.loadData?.()
|
||||
break
|
||||
case 'dealCycleByArea': // 成交周期分析
|
||||
dealCycleByAreaRef.value?.loadData?.()
|
||||
break
|
||||
case 'dealCycleByProduct': // 成交周期分析
|
||||
dealCycleByProductRef.value?.loadData?.()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 当 activeTab 改变时，刷新当前活动的 tab
|
||||
/** 当 activeTab 改变时，刷新当前活动的 tab */
|
||||
watch(activeTab, () => {
|
||||
handleQuery()
|
||||
})
|
||||
|
|
@ -158,7 +206,7 @@ const resetQuery = () => {
|
|||
handleQuery()
|
||||
}
|
||||
|
||||
// 加载部门树
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
userList.value = handleTree(await UserApi.getSimpleUserList())
|
||||
|
|
|
|||
|
|
@ -0,0 +1,307 @@
|
|||
<!-- 客户总量统计 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card class="mt-16px" shadow="never">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column align="center" fixed="left" label="序号" type="index" width="80" />
|
||||
<el-table-column align="center" fixed="left" label="商机名称" prop="name" width="160">
|
||||
<template #default="scope">
|
||||
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
|
||||
{{ scope.row.name }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="left" label="客户名称" prop="customerName" width="120">
|
||||
<template #default="scope">
|
||||
<el-link
|
||||
:underline="false"
|
||||
type="primary"
|
||||
@click="openCustomerDetail(scope.row.customerId)"
|
||||
>
|
||||
{{ scope.row.customerName }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
align="center"
|
||||
label="商机金额（元）"
|
||||
prop="totalPrice"
|
||||
width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="预计成交日期"
|
||||
prop="dealTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="备注" prop="remark" width="200" />
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="下次联系时间"
|
||||
prop="contactNextTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="负责人" prop="ownerUserName" width="100px" />
|
||||
<el-table-column align="center" label="所属部门" prop="ownerUserDeptName" width="100px" />
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="最后跟进时间"
|
||||
prop="contactLastTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="更新时间"
|
||||
prop="updateTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="创建人" prop="creatorName" width="100px" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
fixed="right"
|
||||
label="商机状态组"
|
||||
prop="statusTypeName"
|
||||
width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
fixed="right"
|
||||
label="商机阶段"
|
||||
prop="statusName"
|
||||
width="120"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams0.pageSize"
|
||||
v-model:page="queryParams0.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CrmStatisticsBusinessInversionRateSummaryByDateRespVO,
|
||||
StatisticFunnelApi
|
||||
} from '@/api/crm/statistics/funnel'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { erpCalculatePercentage, erpPriceTableColumnFormatter } from '@/utils'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
|
||||
defineOptions({ name: 'BusinessSummary' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
const queryParams0 = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref([]) // 列表的数据
|
||||
const total = ref(0)
|
||||
/** 将传进来的值赋值给 queryParams0 */
|
||||
watch(
|
||||
() => props.queryParams,
|
||||
(data) => {
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
const newObj = { ...queryParams0, ...data }
|
||||
Object.assign(queryParams0, newObj)
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
color: ['#6ca2ff', '#6ac9d7', '#ff7474'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['赢单转化率', '商机总数', '赢单商机数'],
|
||||
bottom: '0px',
|
||||
itemWidth: 14
|
||||
},
|
||||
grid: {
|
||||
top: '40px',
|
||||
left: '40px',
|
||||
right: '40px',
|
||||
bottom: '40px',
|
||||
containLabel: true,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: { color: '#BDBDBD' }
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '赢单转化率',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}%'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: { color: '#BDBDBD' }
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '商机数',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}个'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: { color: '#BDBDBD' }
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '赢单转化率',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '商机总数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
barWidth: 15,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '赢单商机数',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
barWidth: 15,
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
const businessSummaryByDate = await StatisticFunnelApi.getBusinessInversionRateSummaryByDate(
|
||||
props.queryParams
|
||||
)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis[0] && echartsOption.xAxis[0]['data']) {
|
||||
echartsOption.xAxis[0]['data'] = businessSummaryByDate.map(
|
||||
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.time
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = businessSummaryByDate.map(
|
||||
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) =>
|
||||
erpCalculatePercentage(s.businessWinCount, s.businessCount)
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = businessSummaryByDate.map(
|
||||
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessCount
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
|
||||
echartsOption.series[2]['data'] = businessSummaryByDate.map(
|
||||
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessWinCount
|
||||
)
|
||||
}
|
||||
|
||||
// 2.2 更新列表数据
|
||||
await getList()
|
||||
}
|
||||
/** 获取商机列表 */
|
||||
const getList = async () => {
|
||||
const data = await StatisticFunnelApi.getBusinessPageByDate(props.queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
}
|
||||
/** 打开客户详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'CrmBusinessDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 打开客户详情 */
|
||||
const openCustomerDetail = (id: number) => {
|
||||
push({ name: 'CrmCustomerDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<!-- 客户总量统计 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card class="mt-16px" shadow="never">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column align="center" fixed="left" label="序号" type="index" width="80" />
|
||||
<el-table-column align="center" fixed="left" label="商机名称" prop="name" width="160">
|
||||
<template #default="scope">
|
||||
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
|
||||
{{ scope.row.name }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="left" label="客户名称" prop="customerName" width="120">
|
||||
<template #default="scope">
|
||||
<el-link
|
||||
:underline="false"
|
||||
type="primary"
|
||||
@click="openCustomerDetail(scope.row.customerId)"
|
||||
>
|
||||
{{ scope.row.customerName }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
align="center"
|
||||
label="商机金额（元）"
|
||||
prop="totalPrice"
|
||||
width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="预计成交日期"
|
||||
prop="dealTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="备注" prop="remark" width="200" />
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="下次联系时间"
|
||||
prop="contactNextTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="负责人" prop="ownerUserName" width="100px" />
|
||||
<el-table-column align="center" label="所属部门" prop="ownerUserDeptName" width="100px" />
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="最后跟进时间"
|
||||
prop="contactLastTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="更新时间"
|
||||
prop="updateTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" label="创建人" prop="creatorName" width="100px" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
fixed="right"
|
||||
label="商机状态组"
|
||||
prop="statusTypeName"
|
||||
width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
fixed="right"
|
||||
label="商机阶段"
|
||||
prop="statusName"
|
||||
width="120"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams0.pageSize"
|
||||
v-model:page="queryParams0.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CrmStatisticsBusinessSummaryByDateRespVO,
|
||||
StatisticFunnelApi
|
||||
} from '@/api/crm/statistics/funnel'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { erpPriceTableColumnFormatter } from '@/utils'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
|
||||
defineOptions({ name: 'BusinessSummary' })
|
||||
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
const queryParams0 = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref([]) // 列表的数据
|
||||
const total = ref(0)
|
||||
/** 将传进来的值赋值给 queryParams0 */
|
||||
watch(
|
||||
() => props.queryParams,
|
||||
(data) => {
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
const newObj = { ...queryParams0, ...data }
|
||||
Object.assign(queryParams0, newObj)
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 30,
|
||||
right: 30, // 让 X 轴右侧显示完整
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '新增商机数量',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '新增商机金额',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '新增商机分析' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '新增商机数量',
|
||||
min: 0,
|
||||
minInterval: 1 // 显示整数刻度
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '新增商机金额',
|
||||
min: 0,
|
||||
minInterval: 1, // 显示整数刻度
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted', // 右侧网格线虚化, 减少混乱
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取数据并填充图表 */
|
||||
const fetchAndFill = async () => {
|
||||
// 1. 加载统计数据
|
||||
const businessSummaryByDate = await StatisticFunnelApi.getBusinessSummaryByDate(props.queryParams)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = businessSummaryByDate.map(
|
||||
(s: CrmStatisticsBusinessSummaryByDateRespVO) => s.time
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = businessSummaryByDate.map(
|
||||
(s: CrmStatisticsBusinessSummaryByDateRespVO) => s.businessCreateCount
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = businessSummaryByDate.map(
|
||||
(s: CrmStatisticsBusinessSummaryByDateRespVO) => s.totalPrice
|
||||
)
|
||||
}
|
||||
|
||||
// 2.2 更新列表数据
|
||||
await getList()
|
||||
}
|
||||
/** 获取商机列表 */
|
||||
const getList = async () => {
|
||||
const data = await StatisticFunnelApi.getBusinessPageByDate(props.queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
}
|
||||
/** 打开客户详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'CrmBusinessDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 打开客户详情 */
|
||||
const openCustomerDetail = (id: number) => {
|
||||
push({ name: 'CrmCustomerDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await fetchAndFill()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<!-- 销售漏斗分析 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-button-group class="mb-10px">
|
||||
<el-button type="primary" @click="handleActive(true)">客户视角</el-button>
|
||||
<el-button type="primary" @click="handleActive(false)">动态视角</el-button>
|
||||
</el-button-group>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card class="mt-16px" shadow="never">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column align="center" label="序号" type="index" width="80" />
|
||||
<el-table-column align="center" label="阶段" prop="endStatus" width="200">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_BUSINESS_END_STATUS_TYPE" :value="scope.row.endStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="商机数" min-width="200" prop="businessCount" />
|
||||
<el-table-column align="center" label="商机总金额(元)" min-width="200" prop="totalPrice" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { CrmStatisticFunnelRespVO, StatisticFunnelApi } from '@/api/crm/statistics/funnel'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'FunnelBusiness' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const active = ref(true)
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticFunnelRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 销售漏斗 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '销售漏斗'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['客户', '商机', '赢单']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售漏斗',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '客户-0个' },
|
||||
{ value: 40, name: '商机-0个' },
|
||||
{ value: 20, name: '赢单-0个' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
const handleActive = async (val: boolean) => {
|
||||
active.value = val
|
||||
await loadData()
|
||||
}
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
// 1. 加载漏斗数据
|
||||
const data = (await StatisticFunnelApi.getFunnelSummary(
|
||||
props.queryParams
|
||||
)) as CrmStatisticFunnelRespVO
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (
|
||||
!!data &&
|
||||
echartsOption.series &&
|
||||
echartsOption.series[0] &&
|
||||
echartsOption.series[0]['data']
|
||||
) {
|
||||
// tips：写死 value 值是为了保持漏斗顺序不变
|
||||
const list: { value: number; name: string }[] = []
|
||||
if (active.value) {
|
||||
list.push({ value: 60, name: `客户-${data.customerCount || 0}个` })
|
||||
list.push({ value: 40, name: `商机-${data.businessCount || 0}个` })
|
||||
list.push({ value: 20, name: `赢单-${data.businessWinCount || 0}个` })
|
||||
} else {
|
||||
list.push({ value: data.customerCount || 0, name: `客户-${data.customerCount || 0}个` })
|
||||
list.push({ value: data.businessCount || 0, name: `商机-${data.businessCount || 0}个` })
|
||||
list.push({ value: data.businessWinCount || 0, name: `赢单-${data.businessWinCount || 0}个` })
|
||||
}
|
||||
|
||||
echartsOption.series[0]['data'] = list
|
||||
}
|
||||
// 2.2 获取商机结束状态统计
|
||||
list.value = await StatisticFunnelApi.getBusinessSummaryByEndStatus(props.queryParams)
|
||||
loading.value = false
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<!-- 数据统计 - 客户画像 -->
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="时间范围" prop="orderDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.times"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
:shortcuts="defaultShortcuts"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间间隔" prop="interval">
|
||||
<el-select
|
||||
v-model="queryParams.interval"
|
||||
class="!w-240px"
|
||||
placeholder="间隔类型"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.DATE_INTERVAL)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select
|
||||
v-model="queryParams.deptId"
|
||||
:data="deptList"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
class="!w-240px"
|
||||
node-key="id"
|
||||
placeholder="请选择归属部门"
|
||||
@change="(queryParams.userId = undefined), handleQuery()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工" prop="userId">
|
||||
<el-select
|
||||
v-model="queryParams.userId"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="员工"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="(user, index) in userListByDeptId"
|
||||
:key="index"
|
||||
:label="user.nickname"
|
||||
:value="user.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 客户统计 -->
|
||||
<el-col>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="销售漏斗分析" lazy name="funnelRef">
|
||||
<FunnelBusiness ref="funnelRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="新增商机分析" lazy name="businessSummaryRef">
|
||||
<BusinessSummary ref="businessSummaryRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="商机转化率分析" lazy name="businessInversionRateSummaryRef">
|
||||
<BusinessInversionRateSummary
|
||||
ref="businessInversionRateSummaryRef"
|
||||
:query-params="queryParams"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as DeptApi from '@/api/system/dept'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import FunnelBusiness from './components/FunnelBusiness.vue'
|
||||
import BusinessSummary from './components/BusinessSummary.vue'
|
||||
import BusinessInversionRateSummary from './components/BusinessInversionRateSummary.vue'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'CrmStatisticsFunnel' })
|
||||
|
||||
const queryParams = reactive({
|
||||
interval: 2, // WEEK, 周
|
||||
deptId: useUserStore().getUser.deptId,
|
||||
userId: undefined,
|
||||
times: [
|
||||
// 默认显示最近一周的数据
|
||||
formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
|
||||
formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)))
|
||||
]
|
||||
})
|
||||
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const deptList = ref<Tree[]>([]) // 部门树形结构
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 全量用户清单
|
||||
|
||||
/** 根据选择的部门筛选员工清单 */
|
||||
const userListByDeptId = computed(() =>
|
||||
queryParams.deptId
|
||||
? userList.value.filter((u: UserApi.UserVO) => u.deptId === queryParams.deptId)
|
||||
: []
|
||||
)
|
||||
|
||||
const activeTab = ref('funnelRef') // 活跃标签
|
||||
const funnelRef = ref() // 销售漏斗
|
||||
const businessSummaryRef = ref() // 新增商机分析
|
||||
const businessInversionRateSummaryRef = ref() // 商机转化率分析
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
switch (activeTab.value) {
|
||||
case 'funnelRef':
|
||||
funnelRef.value?.loadData?.()
|
||||
break
|
||||
case 'businessSummaryRef':
|
||||
businessSummaryRef.value?.loadData?.()
|
||||
break
|
||||
case 'businessInversionRateSummaryRef':
|
||||
businessInversionRateSummaryRef.value?.loadData?.()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/** 当 activeTab 改变时，刷新当前活动的 tab */
|
||||
watch(activeTab, () => {
|
||||
handleQuery()
|
||||
})
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
userList.value = handleTree(await UserApi.getSimpleUserList())
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<!-- 员工业绩统计 -->
|
||||
<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="tableData">
|
||||
<el-table-column
|
||||
v-for="item in columnsData"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ scope.row[item.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { EChartsOption } from 'echarts'
|
||||
import {
|
||||
StatisticsPerformanceApi,
|
||||
StatisticsPerformanceRespVO
|
||||
} from '@/api/crm/statistics/performance'
|
||||
|
||||
defineOptions({ name: 'ContractCountPerformance' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<StatisticsPerformanceRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '当月合同数量（个）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '上月合同数量（个）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '去年同月合同数量（个）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '同比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '环比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '客户总量分析' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量（个）',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}%'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const performanceList = await StatisticsPerformanceApi.getContractCountPerformance(
|
||||
props.queryParams
|
||||
)
|
||||
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.currentMonthCount
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
||||
)
|
||||
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
||||
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
|
||||
echartsOption.series[2]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
||||
)
|
||||
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
||||
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
|
||||
)
|
||||
}
|
||||
|
||||
// 2.2 更新列表数据
|
||||
list.value = performanceList
|
||||
convertListData()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const columnsData = reactive([])
|
||||
const tableData = reactive([
|
||||
{ title: '当月合同数量统计（个）' },
|
||||
{ title: '上月合同数量统计（个）' },
|
||||
{ title: '去年当月合同数量统计（个）' },
|
||||
{ title: '同比增长率（%）' },
|
||||
{ title: '环比增长率（%）' }
|
||||
])
|
||||
|
||||
// 定义 convertListData 方法，数据行列转置，展示每月数据
|
||||
const convertListData = () => {
|
||||
const columnObj = { label: '日期', prop: 'title' }
|
||||
columnsData.splice(0, columnsData.length) //清空数组
|
||||
columnsData.push(columnObj)
|
||||
|
||||
list.value.forEach((item, index) => {
|
||||
const columnObj = { label: item.time, prop: 'prop' + index }
|
||||
columnsData.push(columnObj)
|
||||
tableData[0]['prop' + index] = item.currentMonthCount
|
||||
tableData[1]['prop' + index] = item.lastMonthCount
|
||||
tableData[2]['prop' + index] = item.lastYearCount
|
||||
tableData[3]['prop' + index] =
|
||||
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
||||
tableData[4]['prop' + index] =
|
||||
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<!-- 员工业绩统计 -->
|
||||
<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="tableData">
|
||||
<el-table-column
|
||||
v-for="item in columnsData"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ scope.row[item.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { EChartsOption } from 'echarts'
|
||||
import {
|
||||
StatisticsPerformanceApi,
|
||||
StatisticsPerformanceRespVO
|
||||
} from '@/api/crm/statistics/performance'
|
||||
|
||||
defineOptions({ name: 'ContractPricePerformance' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<StatisticsPerformanceRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '当月合同金额（元）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '上月合同金额（元）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '去年同月合同金额（元）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '同比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '环比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '客户总量分析' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（元）',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}%'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const performanceList = await StatisticsPerformanceApi.getContractPricePerformance(
|
||||
props.queryParams
|
||||
)
|
||||
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.currentMonthCount
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
||||
)
|
||||
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
||||
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
|
||||
echartsOption.series[2]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
||||
)
|
||||
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
||||
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
|
||||
)
|
||||
}
|
||||
|
||||
// 2.2 更新列表数据
|
||||
list.value = performanceList
|
||||
convertListData()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const columnsData = reactive([])
|
||||
const tableData = reactive([
|
||||
{ title: '当月合同金额统计（元）' },
|
||||
{ title: '上月合同金额统计（元）' },
|
||||
{ title: '去年当月合同金额统计（元）' },
|
||||
{ title: '同比增长率（%）' },
|
||||
{ title: '环比增长率（%）' }
|
||||
])
|
||||
|
||||
// 定义 init 方法
|
||||
const convertListData = () => {
|
||||
const columnObj = { label: '日期', prop: 'title' }
|
||||
columnsData.splice(0, columnsData.length) //清空数组
|
||||
columnsData.push(columnObj)
|
||||
|
||||
list.value.forEach((item, index) => {
|
||||
const columnObj = { label: item.time, prop: 'prop' + index }
|
||||
columnsData.push(columnObj)
|
||||
tableData[0]['prop' + index] = item.currentMonthCount
|
||||
tableData[1]['prop' + index] = item.lastMonthCount
|
||||
tableData[2]['prop' + index] = item.lastYearCount
|
||||
tableData[3]['prop' + index] =
|
||||
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
||||
tableData[4]['prop' + index] =
|
||||
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
<!-- 员工业绩统计 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card shadow="never" class="mt-16px">
|
||||
<el-table v-loading="loading" :data="tableData">
|
||||
<el-table-column
|
||||
v-for="item in columnsData"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
align="center"
|
||||
>
|
||||
<!-- TODO @scholar：IDEA 爆红的处理 -->
|
||||
<template #default="scope">
|
||||
{{ scope.row[item.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { EChartsOption } from 'echarts'
|
||||
import {
|
||||
StatisticsPerformanceApi,
|
||||
StatisticsPerformanceRespVO
|
||||
} from '@/api/crm/statistics/performance'
|
||||
|
||||
defineOptions({ name: 'ContractPricePerformance' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<StatisticsPerformanceRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 柱状图配置：纵向 */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '当月回款金额（元）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '上月回款金额（元）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '去年同月回款金额（元）',
|
||||
type: 'line',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '同比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '环比增长率（%）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: []
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
xAxisIndex: false // 数据区域缩放：Y 轴不缩放
|
||||
},
|
||||
brush: {
|
||||
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
||||
},
|
||||
saveAsImage: { show: true, name: '客户总量分析' } // 保存为图片
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（元）',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
// TODO @scholar：IDEA 爆红的处理
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#BDBDBD',
|
||||
formatter: '{value}%'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#BDBDBD'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '日期',
|
||||
data: []
|
||||
}
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const performanceList = await StatisticsPerformanceApi.getReceivablePricePerformance(
|
||||
props.queryParams
|
||||
)
|
||||
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
||||
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.currentMonthCount
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[1]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
||||
)
|
||||
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
||||
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
|
||||
)
|
||||
}
|
||||
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
|
||||
echartsOption.series[2]['data'] = performanceList.map(
|
||||
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
||||
)
|
||||
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
||||
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
|
||||
)
|
||||
}
|
||||
|
||||
// 2.2 更新列表数据
|
||||
list.value = performanceList
|
||||
convertListData()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
// TODO @scholar：加个 as any[]，避免 idea 爆红
|
||||
const columnsData = reactive([] as any[])
|
||||
const tableData = reactive([
|
||||
{ title: '当月回款金额统计（元）' },
|
||||
{ title: '上月回款金额统计（元）' },
|
||||
{ title: '去年当月回款金额统计（元）' },
|
||||
{ title: '同比增长率（%）' },
|
||||
{ title: '环比增长率（%）' }
|
||||
])
|
||||
|
||||
// 定义 init 方法
|
||||
const convertListData = () => {
|
||||
const columnObj = { label: '日期', prop: 'title' }
|
||||
columnsData.splice(0, columnsData.length) //清空数组
|
||||
columnsData.push(columnObj)
|
||||
|
||||
list.value.forEach((item, index) => {
|
||||
const columnObj = { label: item.time, prop: 'prop' + index }
|
||||
columnsData.push(columnObj)
|
||||
tableData[0]['prop' + index] = item.currentMonthCount
|
||||
tableData[1]['prop' + index] = item.lastMonthCount
|
||||
tableData[2]['prop' + index] = item.lastYearCount
|
||||
// TODO @scholar：百分比，使用 erpCalculatePercentage 直接计算；如果是 0，则返回 0，统一就好哈；
|
||||
tableData[3]['prop' + index] =
|
||||
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
||||
tableData[4]['prop' + index] =
|
||||
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!-- 数据统计 - 员工业绩分析 -->
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="选择年份" prop="orderDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.times[0]"
|
||||
class="!w-240px"
|
||||
type="year"
|
||||
value-format="YYYY"
|
||||
:default-time="[new Date().getFullYear()]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select
|
||||
v-model="queryParams.deptId"
|
||||
class="!w-240px"
|
||||
:data="deptList"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
node-key="id"
|
||||
placeholder="请选择归属部门"
|
||||
@change="queryParams.userId = undefined"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工" prop="userId">
|
||||
<el-select v-model="queryParams.userId" class="!w-240px" placeholder="员工" clearable>
|
||||
<el-option
|
||||
v-for="(user, index) in userListByDeptId"
|
||||
:label="user.nickname"
|
||||
:value="user.id"
|
||||
:key="index"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
|
||||
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 员工业绩统计 -->
|
||||
<el-col>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 员工合同统计 -->
|
||||
<el-tab-pane label="员工合同数量统计" name="ContractCountPerformance" lazy>
|
||||
<ContractCountPerformance :query-params="queryParams" ref="ContractCountPerformanceRef" />
|
||||
</el-tab-pane>
|
||||
<!-- 员工合同金额统计 -->
|
||||
<el-tab-pane label="员工合同金额统计" name="ContractPricePerformance" lazy>
|
||||
<ContractPricePerformance :query-params="queryParams" ref="ContractPricePerformanceRef" />
|
||||
</el-tab-pane>
|
||||
<!-- 员工回款金额统计 -->
|
||||
<el-tab-pane label="员工回款金额统计" name="ReceivablePricePerformance" lazy>
|
||||
<ReceivablePricePerformance
|
||||
:query-params="queryParams"
|
||||
ref="ReceivablePricePerformanceRef"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as DeptApi from '@/api/system/dept'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { beginOfDay, formatDate } from '@/utils/formatTime'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import ContractCountPerformance from './components/ContractCountPerformance.vue'
|
||||
import ContractPricePerformance from './components/ContractPricePerformance.vue'
|
||||
import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue'
|
||||
|
||||
defineOptions({ name: 'CrmStatisticsCustomer' })
|
||||
|
||||
const queryParams = reactive({
|
||||
deptId: useUserStore().getUser.deptId,
|
||||
userId: undefined,
|
||||
times: [
|
||||
// 默认显示当年的数据
|
||||
formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)))
|
||||
]
|
||||
})
|
||||
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const deptList = ref<Tree[]>([]) // 部门树形结构
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 全量用户清单
|
||||
// 根据选择的部门筛选员工清单
|
||||
const userListByDeptId = computed(() =>
|
||||
queryParams.deptId
|
||||
? userList.value.filter((u: UserApi.UserVO) => u.deptId === queryParams.deptId)
|
||||
: []
|
||||
)
|
||||
|
||||
// TODO @scholar：改成尾注释，保证 vue 内容短一点；变量名小写
|
||||
// 活跃标签
|
||||
const activeTab = ref('ContractCountPerformance')
|
||||
// 1.员工合同数量统计
|
||||
const ContractCountPerformanceRef = ref()
|
||||
// 2.员工合同金额统计
|
||||
const ContractPricePerformanceRef = ref()
|
||||
// 3.员工回款金额统计
|
||||
const ReceivablePricePerformanceRef = ref()
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
// 从 queryParams.times[0] 中获取到了年份
|
||||
const selectYear = parseInt(queryParams.times[0])
|
||||
|
||||
// 创建一个新的 Date 对象，设置为指定的年份的第一天
|
||||
const fullDate = new Date(selectYear, 0, 1, 0, 0, 0)
|
||||
|
||||
// 将完整的日期时间格式化为需要的字符串形式，比如 2004-01-01 00:00:00
|
||||
// TODO @scholar：看看，是不是可以使用 year 哈
|
||||
queryParams.times[0] = `${fullDate.getFullYear()}-${String(fullDate.getMonth() + 1).padStart(
|
||||
2,
|
||||
'0'
|
||||
)}-${String(fullDate.getDate()).padStart(2, '0')} ${String(fullDate.getHours()).padStart(2, '0')}:${String(fullDate.getMinutes()).padStart(2, '0')}:${String(fullDate.getSeconds()).padStart(2, '0')}`
|
||||
|
||||
switch (activeTab.value) {
|
||||
case 'ContractCountPerformance':
|
||||
ContractCountPerformanceRef.value?.loadData?.()
|
||||
break
|
||||
case 'ContractPricePerformance':
|
||||
ContractPricePerformanceRef.value?.loadData?.()
|
||||
break
|
||||
case 'ReceivablePricePerformance':
|
||||
ReceivablePricePerformanceRef.value?.loadData?.()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 当 activeTab 改变时，刷新当前活动的 tab
|
||||
watch(activeTab, () => {
|
||||
handleQuery()
|
||||
})
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
// 加载部门树
|
||||
onMounted(async () => {
|
||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
userList.value = handleTree(await UserApi.getSimpleUserList())
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<!-- 客户城市分布 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption2" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { EChartsOption } from 'echarts'
|
||||
import china from '@/assets/map/json/china.json'
|
||||
import echarts from '@/plugins/echarts'
|
||||
import {
|
||||
CrmStatisticCustomerAreaRespVO,
|
||||
StatisticsPortraitApi
|
||||
} from '@/api/crm/statistics/portrait'
|
||||
import { areaReplace } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'PortraitCustomerArea' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
// 注册地图
|
||||
echarts?.registerMap('china', china as any)
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const areaStatisticsList = ref<CrmStatisticCustomerAreaRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 地图配置（全部客户） */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '全部客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
showDelay: 0,
|
||||
transitionDuration: 0.2
|
||||
},
|
||||
visualMap: {
|
||||
text: ['高', '低'],
|
||||
realtime: false,
|
||||
calculable: true,
|
||||
top: 'middle',
|
||||
inRange: {
|
||||
color: ['#fff', '#3b82f6']
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '客户地域分布',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
roam: false,
|
||||
selectedMode: false,
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 地图配置（成交客户） */
|
||||
const echartsOption2 = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '成交客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
showDelay: 0,
|
||||
transitionDuration: 0.2
|
||||
},
|
||||
visualMap: {
|
||||
text: ['高', '低'],
|
||||
realtime: false,
|
||||
calculable: true,
|
||||
top: 'middle',
|
||||
inRange: {
|
||||
color: ['#fff', '#3b82f6']
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '客户地域分布',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
roam: false,
|
||||
selectedMode: false,
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const areaList = await StatisticsPortraitApi.getCustomerArea(props.queryParams)
|
||||
areaStatisticsList.value = areaList.map((item: CrmStatisticCustomerAreaRespVO) => {
|
||||
return {
|
||||
...item,
|
||||
areaName: areaReplace(item.areaName)
|
||||
}
|
||||
})
|
||||
buildLeftMap()
|
||||
buildRightMap()
|
||||
loading.value = false
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
const buildLeftMap = () => {
|
||||
let min = 0
|
||||
let max = 0
|
||||
echartsOption.series![0].data = areaStatisticsList.value.map((item) => {
|
||||
min = Math.min(min, item.customerCount || 0)
|
||||
max = Math.max(max, item.customerCount || 0)
|
||||
return { ...item, name: item.areaName, value: item.customerCount || 0 }
|
||||
})
|
||||
echartsOption.visualMap!['min'] = min
|
||||
echartsOption.visualMap!['max'] = max
|
||||
}
|
||||
|
||||
const buildRightMap = () => {
|
||||
let min = 0
|
||||
let max = 0
|
||||
echartsOption2.series![0].data = areaStatisticsList.value.map((item) => {
|
||||
min = Math.min(min, item.dealCount || 0)
|
||||
max = Math.max(max, item.dealCount || 0)
|
||||
return { ...item, name: item.areaName, value: item.dealCount || 0 }
|
||||
})
|
||||
echartsOption2.visualMap!['min'] = min
|
||||
echartsOption2.visualMap!['max'] = max
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!-- 客户行业分析 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption2" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card class="mt-16px" shadow="never">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column align="center" label="序号" type="index" width="80" />
|
||||
<el-table-column align="center" label="客户行业" prop="industryId" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="客户个数" min-width="200" prop="customerCount" />
|
||||
<el-table-column align="center" label="成交个数" min-width="200" prop="dealCount" />
|
||||
<el-table-column align="center" label="行业占比(%)" min-width="200" prop="industryPortion" />
|
||||
<el-table-column align="center" label="成交占比(%)" min-width="200" prop="dealPortion" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CrmStatisticCustomerIndustryRespVO,
|
||||
StatisticsPortraitApi
|
||||
} from '@/api/crm/statistics/portrait'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
|
||||
import { erpCalculatePercentage, getSumValue } from '@/utils'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
|
||||
defineOptions({ name: 'PortraitCustomerIndustry' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticCustomerIndustryRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 饼图配置（全部客户） */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '全部客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: true, name: '全部客户' } // 保存为图片
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '全部客户',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 饼图配置（成交客户） */
|
||||
const echartsOption2 = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '成交客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: true, name: '成交客户' } // 保存为图片
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '成交客户',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const industryList = await StatisticsPortraitApi.getCustomerIndustry(props.queryParams)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = industryList.map((r: CrmStatisticCustomerIndustryRespVO) => {
|
||||
return {
|
||||
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
|
||||
value: r.customerCount
|
||||
}
|
||||
})
|
||||
}
|
||||
// 2.2 更新 Echarts2 数据
|
||||
if (echartsOption2.series && echartsOption2.series[0] && echartsOption2.series[0]['data']) {
|
||||
echartsOption2.series[0]['data'] = industryList.map((r: CrmStatisticCustomerIndustryRespVO) => {
|
||||
return {
|
||||
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
|
||||
value: r.dealCount
|
||||
}
|
||||
})
|
||||
}
|
||||
// 3. 计算比例
|
||||
calculateProportion(industryList)
|
||||
list.value = industryList
|
||||
loading.value = false
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 计算比例 */
|
||||
const calculateProportion = (sourceList: CrmStatisticCustomerIndustryRespVO[]) => {
|
||||
if (isEmpty(sourceList)) {
|
||||
return
|
||||
}
|
||||
// 这里类型丢失了所以重新搞个变量
|
||||
const list = sourceList as unknown as CrmStatisticCustomerIndustryRespVO[]
|
||||
const sumCustomerCount = getSumValue(list.map((item) => item.customerCount))
|
||||
const sumDealCount = getSumValue(list.map((item) => item.dealCount))
|
||||
list.forEach((item) => {
|
||||
item.industryPortion =
|
||||
item.customerCount === 0 ? 0 : erpCalculatePercentage(item.customerCount, sumCustomerCount)
|
||||
item.dealPortion =
|
||||
item.dealCount === 0 ? 0 : erpCalculatePercentage(item.dealCount, sumDealCount)
|
||||
})
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!-- 客户来源分析 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption2" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card class="mt-16px" shadow="never">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column align="center" label="序号" type="index" width="80" />
|
||||
<el-table-column align="center" label="客户级别" prop="level" width="200">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="客户个数" min-width="200" prop="customerCount" />
|
||||
<el-table-column align="center" label="成交个数" min-width="200" prop="dealCount" />
|
||||
<el-table-column align="center" label="级别占比(%)" min-width="200" prop="levelPortion" />
|
||||
<el-table-column align="center" label="成交占比(%)" min-width="200" prop="dealPortion" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CrmStatisticCustomerLevelRespVO,
|
||||
StatisticsPortraitApi
|
||||
} from '@/api/crm/statistics/portrait'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
|
||||
import { erpCalculatePercentage, getSumValue } from '@/utils'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
|
||||
defineOptions({ name: 'PortraitCustomerLevel' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticCustomerLevelRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 饼图配置（全部客户） */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '全部客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: true, name: '全部客户' } // 保存为图片
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '全部客户',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 饼图配置（成交客户） */
|
||||
const echartsOption2 = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '成交客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: true, name: '成交客户' } // 保存为图片
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '成交客户',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const levelList = await StatisticsPortraitApi.getCustomerLevel(props.queryParams)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = levelList.map((r: CrmStatisticCustomerLevelRespVO) => {
|
||||
return {
|
||||
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
|
||||
value: r.customerCount
|
||||
}
|
||||
})
|
||||
}
|
||||
// 2.2 更新 Echarts2 数据
|
||||
if (echartsOption2.series && echartsOption2.series[0] && echartsOption2.series[0]['data']) {
|
||||
echartsOption2.series[0]['data'] = levelList.map((r: CrmStatisticCustomerLevelRespVO) => {
|
||||
return {
|
||||
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
|
||||
value: r.dealCount
|
||||
}
|
||||
})
|
||||
}
|
||||
// 3. 计算比例
|
||||
calculateProportion(levelList)
|
||||
list.value = levelList
|
||||
loading.value = false
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 计算比例 */
|
||||
const calculateProportion = (levelList: CrmStatisticCustomerLevelRespVO[]) => {
|
||||
if (isEmpty(levelList)) {
|
||||
return
|
||||
}
|
||||
// 这里类型丢失了所以重新搞个变量
|
||||
const list = levelList as unknown as CrmStatisticCustomerLevelRespVO[]
|
||||
const sumCustomerCount = getSumValue(list.map((item) => item.customerCount))
|
||||
const sumDealCount = getSumValue(list.map((item) => item.dealCount))
|
||||
list.forEach((item) => {
|
||||
item.levelPortion =
|
||||
item.customerCount === 0 ? 0 : erpCalculatePercentage(item.customerCount, sumCustomerCount)
|
||||
item.dealPortion =
|
||||
item.dealCount === 0 ? 0 : erpCalculatePercentage(item.dealCount, sumDealCount)
|
||||
})
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!-- 客户来源分析 -->
|
||||
<template>
|
||||
<!-- Echarts图 -->
|
||||
<el-card shadow="never">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :height="500" :options="echartsOption2" />
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计列表 -->
|
||||
<el-card class="mt-16px" shadow="never">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column align="center" label="序号" type="index" width="80" />
|
||||
<el-table-column align="center" label="客户来源" prop="source" width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="客户个数" min-width="200" prop="customerCount" />
|
||||
<el-table-column align="center" label="成交个数" min-width="200" prop="dealCount" />
|
||||
<el-table-column align="center" label="来源占比(%)" min-width="200" prop="sourcePortion" />
|
||||
<el-table-column align="center" label="成交占比(%)" min-width="200" prop="dealPortion" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CrmStatisticCustomerSourceRespVO,
|
||||
StatisticsPortraitApi
|
||||
} from '@/api/crm/statistics/portrait'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
import { erpCalculatePercentage, getSumValue } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'PortraitCustomerSource' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
const list = ref<CrmStatisticCustomerSourceRespVO[]>([]) // 列表的数据
|
||||
|
||||
/** 饼图配置（全部客户） */
|
||||
const echartsOption = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '全部客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: true, name: '全部客户' } // 保存为图片
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '全部客户',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 饼图配置（成交客户） */
|
||||
const echartsOption2 = reactive<EChartsOption>({
|
||||
title: {
|
||||
text: '成交客户',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: true, name: '成交客户' } // 保存为图片
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '成交客户',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}) as EChartsOption
|
||||
|
||||
/** 获取统计数据 */
|
||||
const loadData = async () => {
|
||||
// 1. 加载统计数据
|
||||
loading.value = true
|
||||
const sourceList = await StatisticsPortraitApi.getCustomerSource(props.queryParams)
|
||||
// 2.1 更新 Echarts 数据
|
||||
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||
echartsOption.series[0]['data'] = sourceList.map((r: CrmStatisticCustomerSourceRespVO) => {
|
||||
return {
|
||||
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
|
||||
value: r.customerCount
|
||||
}
|
||||
})
|
||||
}
|
||||
// 2.2 更新 Echarts2 数据
|
||||
if (echartsOption2.series && echartsOption2.series[0] && echartsOption2.series[0]['data']) {
|
||||
echartsOption2.series[0]['data'] = sourceList.map((r: CrmStatisticCustomerSourceRespVO) => {
|
||||
return {
|
||||
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
|
||||
value: r.dealCount
|
||||
}
|
||||
})
|
||||
}
|
||||
// 3. 计算比例
|
||||
calculateProportion(sourceList)
|
||||
list.value = sourceList
|
||||
loading.value = false
|
||||
}
|
||||
defineExpose({ loadData })
|
||||
|
||||
/** 计算比例 */
|
||||
const calculateProportion = (sourceList: CrmStatisticCustomerSourceRespVO[]) => {
|
||||
if (isEmpty(sourceList)) {
|
||||
return
|
||||
}
|
||||
// 这里类型丢失了所以重新搞个变量
|
||||
const list = sourceList as unknown as CrmStatisticCustomerSourceRespVO[]
|
||||
const sumCustomerCount = getSumValue(list.map((item) => item.customerCount))
|
||||
const sumDealCount = getSumValue(list.map((item) => item.dealCount))
|
||||
list.forEach((item) => {
|
||||
item.sourcePortion =
|
||||
item.customerCount === 0 ? 0 : erpCalculatePercentage(item.customerCount, sumCustomerCount)
|
||||
item.dealPortion =
|
||||
item.dealCount === 0 ? 0 : erpCalculatePercentage(item.dealCount, sumDealCount)
|
||||
})
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<!-- 数据统计 - 客户画像 -->
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="时间范围" prop="orderDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.times"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
:shortcuts="defaultShortcuts"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select
|
||||
v-model="queryParams.deptId"
|
||||
:data="deptList"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
class="!w-240px"
|
||||
node-key="id"
|
||||
placeholder="请选择归属部门"
|
||||
@change="queryParams.userId = undefined"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工" prop="userId">
|
||||
<el-select v-model="queryParams.userId" class="!w-240px" clearable placeholder="员工">
|
||||
<el-option
|
||||
v-for="(user, index) in userListByDeptId"
|
||||
:key="index"
|
||||
:label="user.nickname"
|
||||
:value="user.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 客户统计 -->
|
||||
<el-col>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 城市分布分析 -->
|
||||
<el-tab-pane label="城市分布分析" lazy name="areaRef">
|
||||
<PortraitCustomerArea ref="areaRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 客户级别分析 -->
|
||||
<el-tab-pane label="客户级别分析" lazy name="levelRef">
|
||||
<PortraitCustomerLevel ref="levelRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 客户来源分析 -->
|
||||
<el-tab-pane label="客户来源分析" lazy name="sourceRef">
|
||||
<PortraitCustomerSource ref="sourceRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
<!-- 客户行业分析 -->
|
||||
<el-tab-pane label="客户行业分析" lazy name="industryRef">
|
||||
<PortraitCustomerIndustry ref="industryRef" :query-params="queryParams" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as DeptApi from '@/api/system/dept'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import PortraitCustomerArea from './components/PortraitCustomerArea.vue'
|
||||
import PortraitCustomerIndustry from './components/PortraitCustomerIndustry.vue'
|
||||
import PortraitCustomerSource from './components/PortraitCustomerSource.vue'
|
||||
import PortraitCustomerLevel from './components/PortraitCustomerLevel.vue'
|
||||
|
||||
defineOptions({ name: 'CrmStatisticsPortrait' })
|
||||
|
||||
const queryParams = reactive({
|
||||
deptId: useUserStore().getUser.deptId,
|
||||
userId: undefined,
|
||||
times: [
|
||||
// 默认显示最近一周的数据
|
||||
formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
|
||||
formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)))
|
||||
]
|
||||
})
|
||||
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const deptList = ref<Tree[]>([]) // 部门树形结构
|
||||
const userList = ref<UserApi.UserVO[]>([]) // 全量用户清单
|
||||
|
||||
/** 根据选择的部门筛选员工清单 */
|
||||
const userListByDeptId = computed(() =>
|
||||
queryParams.deptId
|
||||
? userList.value.filter((u: UserApi.UserVO) => u.deptId === queryParams.deptId)
|
||||
: []
|
||||
)
|
||||
|
||||
const activeTab = ref('areaRef') // 活跃标签
|
||||
const areaRef = ref() // 客户地区分布
|
||||
const levelRef = ref() // 客户级别
|
||||
const sourceRef = ref() // 客户来源
|
||||
const industryRef = ref() // 客户行业
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
switch (activeTab.value) {
|
||||
case 'areaRef':
|
||||
areaRef.value?.loadData?.()
|
||||
break
|
||||
case 'levelRef':
|
||||
levelRef.value?.loadData?.()
|
||||
break
|
||||
case 'sourceRef':
|
||||
sourceRef.value?.loadData?.()
|
||||
break
|
||||
case 'industryRef':
|
||||
industryRef.value?.loadData?.()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/** 当 activeTab 改变时，刷新当前活动的 tab */
|
||||
watch(activeTab, () => {
|
||||
handleQuery()
|
||||
})
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
userList.value = handleTree(await UserApi.getSimpleUserList())
|
||||
})
|
||||
</script>
|
||||
|
|
@ -22,7 +22,7 @@ import { StatisticsRankApi, StatisticsRankRespVO } from '@/api/crm/statistics/ra
|
|||
import { EChartsOption } from 'echarts'
|
||||
import { clone } from 'lodash-es'
|
||||
|
||||
defineOptions({ name: 'ContactsCountRank' })
|
||||
defineOptions({ name: 'ContactCountRank' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
|
||||
const loading = ref(false) // 加载中
|
||||
|
|
@ -13,7 +13,13 @@
|
|||
<el-table-column label="公司排名" align="center" type="index" width="80" />
|
||||
<el-table-column label="签订人" align="center" prop="nickname" min-width="200" />
|
||||
<el-table-column label="部门" align="center" prop="deptName" min-width="200" />
|
||||
<el-table-column label="合同金额（元）" align="center" prop="count" min-width="200" />
|
||||
<el-table-column
|
||||
label="合同金额（元）"
|
||||
align="center"
|
||||
prop="count"
|
||||
min-width="200"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
|
@ -21,6 +27,7 @@
|
|||
import { StatisticsRankApi, StatisticsRankRespVO } from '@/api/crm/statistics/rank'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { clone } from 'lodash-es'
|
||||
import { erpPriceTableColumnFormatter } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'ContractPriceRank' })
|
||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue