yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

pull/406/head
owen 2024-03-14 00:13:58 +08:00
parent c5b1ad480f 1a0f0a11b1
commit aa57d89bea
31 changed files with 1225 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -101,6 +101,7 @@
"postcss-html": "^1.5.0",
"postcss-scss": "^4.0.9",
"prettier": "^3.1.0",
"prettier-eslint": "^16.3.0",
"rimraf": "^5.0.5",
"rollup": "^4.4.1",
"sass": "^1.69.5",

2
src/api/crm/business/index.ts
View File

@ -1,5 +1,5 @@
import request from '@/config/axios'
import { TransferReqVO } from '@/api/crm/customer'
import { TransferReqVO } from '@/api/crm/permission'
export interface BusinessVO {
id: number

2
src/api/crm/clue/index.ts
View File

@ -1,5 +1,5 @@
import request from '@/config/axios'
import { TransferReqVO } from '@/api/crm/customer'
import { TransferReqVO } from '@/api/crm/permission'
export interface ClueVO {
id: number // 编号

2
src/api/crm/contact/index.ts
View File

@ -1,5 +1,5 @@
import request from '@/config/axios'
import { TransferReqVO } from '@/api/crm/customer'
import { TransferReqVO } from '@/api/crm/permission'
export interface ContactVO {
id: number // 编号

2
src/api/crm/contract/index.ts
View File

@ -1,5 +1,5 @@
import request from '@/config/axios'
import { TransferReqVO } from '@/api/crm/customer'
import { TransferReqVO } from '@/api/crm/permission'
export interface ContractVO {
id: number

7
src/api/crm/customer/index.ts
View File

@ -1,4 +1,5 @@
import request from '@/config/axios'
import { TransferReqVO } from '@/api/crm/permission'
export interface CustomerVO {
id: number // 编号
@ -102,12 +103,6 @@ export const getCustomerSimpleList = async () => {
// ======================= 业务操作 =======================
export interface TransferReqVO {
id: number | undefined // 客户编号
newOwnerUserId: number | undefined // 新负责人的用户编号
oldOwnerPermissionLevel: number | undefined // 老负责人加入团队后的权限级别
}
// 客户转移
export const transferCustomer = async (data: TransferReqVO) => {
return await request.put({ url: '/crm/customer/transfer', data })

8
src/api/crm/permission/index.ts
View File

@ -6,6 +6,7 @@ export interface PermissionVO {
bizType: number // Crm 类型
bizId: number // Crm 类型数据编号
level: number // 权限级别
toBizTypes?: number[] // 同时添加至
deptName?: string // 部门名称
nickname?: string // 用户昵称
postNames?: string[] // 岗位名称数组
@ -13,6 +14,13 @@ export interface PermissionVO {
ids?: number[]
}
export interface TransferReqVO {
id: number // 模块编号
newOwnerUserId: number // 新负责人的用户编号
oldOwnerPermissionLevel?: number // 老负责人加入团队后的权限级别
toBizTypes?: number[] // 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择
}
/**
* CRM 业务类型枚举
*

10
src/api/crm/receivable/index.ts
View File

@ -3,18 +3,20 @@ import request from '@/config/axios'
export interface ReceivableVO {
id: number
no: string
planId: number
customerId: number
planId?: number
customerId?: number
customerName?: string
contractId: number
contractId?: number
contract?: {
id?: number
name?: string
no: string
totalPrice: number
}
auditStatus: number
processInstanceId: number
returnTime: Date
returnType: string
returnType: number
price: number
ownerUserId: number
ownerUserName?: string

2
src/api/crm/receivable/plan/index.ts
View File

@ -11,7 +11,7 @@ export interface ReceivablePlanVO {
remindTime: Date
customerId: number
customerName?: string
contractId: number
contractId?: number
contractNo?: string
ownerUserId: number
ownerUserName?: string

116
src/api/crm/statistics/customer.ts Normal file
View File

@ -0,0 +1,116 @@
import request from '@/config/axios'
export interface CrmStatisticsCustomerSummaryByDateRespVO {
time: string
customerCreateCount: number
customerDealCount: number
}
export interface CrmStatisticsCustomerSummaryByUserRespVO {
ownerUserName: string
customerCreateCount: number
customerDealCount: number
contractPrice: number
receivablePrice: number
}
export interface CrmStatisticsFollowupSummaryByDateRespVO {
time: string
followupRecordCount: number
followupCustomerCount: number
}
export interface CrmStatisticsFollowupSummaryByUserRespVO {
ownerUserName: string
followupRecordCount: number
followupCustomerCount: number
}
export interface CrmStatisticsFollowupSummaryByTypeRespVO {
followupType: string
followupRecordCount: number
}
export interface CrmStatisticsCustomerContractSummaryRespVO {
customerName: string
contractName: string
totalPrice: number
receivablePrice: number
customerType: string
customerSource: string
ownerUserName: string
creatorUserName: string
createTime: Date
orderDate: Date
}
export interface CrmStatisticsCustomerDealCycleByDateRespVO {
time: string
customerDealCycle: number
}
export interface CrmStatisticsCustomerDealCycleByUserRespVO {
ownerUserName: string
customerDealCycle: number
customerDealCount: number
}
// 客户分析 API
export const StatisticsCustomerApi = {
// 1.1 客户总量分析(按日期)
getCustomerSummaryByDate: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-customer-summary-by-date',
params
})
},
// 1.2 客户总量分析(按用户)
getCustomerSummaryByUser: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-customer-summary-by-user',
params
})
},
// 2.1 客户跟进次数分析(按日期)
getFollowupSummaryByDate: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-followup-summary-by-date',
params
})
},
// 2.2 客户跟进次数分析(按用户)
getFollowupSummaryByUser: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-followup-summary-by-user',
params
})
},
// 3.1 获取客户跟进方式统计数
getFollowupSummaryByType: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-followup-summary-by-type',
params
})
},
// 4.1 合同摘要信息(客户转化率页面)
getContractSummary: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-contract-summary',
params
})
},
// 5.1 获取客户成交周期(按日期)
getCustomerDealCycleByDate: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-customer-deal-cycle-by-date',
params
})
},
// 5.2 获取客户成交周期(按用户)
getCustomerDealCycleByUser: (params: any) => {
return request.get({
url: '/crm/statistics-customer/get-customer-deal-cycle-by-user',
params
})
}
}

12
src/views/Login/components/LoginForm.vue
View File

@ -291,10 +291,16 @@ const doSocialLogin = async (type: number) => {
await getTenantId()
// 如果获取不到，则需要弹出提示，进行处理
if (!authUtil.getTenantId()) {
await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
const res = await LoginApi.getTenantIdByName(value)
try {
const data = await message.prompt('请输入租户名称', t('common.reminder'))
if (data?.action !== 'confirm') throw 'cancel'
const res = await LoginApi.getTenantIdByName(data.value)
authUtil.setTenantId(res)
})
} catch (error) {
if (error === 'cancel') return
} finally {
loginLoading.value = false
}
}
}
// 计算 redirectUri

22
src/views/crm/business/detail/index.vue
View File

@ -4,8 +4,8 @@
编辑
</el-button>
<el-button
:disabled="business.endStatus"
v-if="permissionListRef?.validateWrite"
:disabled="business.endStatus"
type="success"
@click="openStatusForm()"
>
@ -53,13 +53,12 @@
</el-col>
<!-- 表单弹窗：添加/修改 -->
<BusinessForm ref="formRef" @success="getBusiness(business.id)" />
<BusinessUpdateStatusForm ref="statusFormRef" @success="getBusiness(business.id)" />
<CrmTransferForm ref="transferFormRef" @success="close" />
<BusinessForm ref="formRef" @success="getBusiness" />
<BusinessUpdateStatusForm ref="statusFormRef" @success="getBusiness" />
<CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_BUSINESS" @success="close" />
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import * as ContactApi from '@/api/crm/contact'
import * as BusinessApi from '@/api/crm/business'
import BusinessDetailsHeader from './BusinessDetailsHeader.vue'
import BusinessDetailsInfo from './BusinessDetailsInfo.vue'
@ -73,6 +72,7 @@ import FollowUpList from '@/views/crm/followup/index.vue'
import ContactList from '@/views/crm/contact/components/ContactList.vue'
import BusinessUpdateStatusForm from '@/views/crm/business/BusinessUpdateStatusForm.vue'
import ContractList from '@/views/crm/contract/components/ContractList.vue'
import BusinessProductList from '@/views/crm/business/detail/BusinessProductList.vue'
defineOptions({ name: 'CrmBusinessDetail' })
@ -80,15 +80,15 @@ const message = useMessage()
const businessId = ref(0) // 线索编号
const loading = ref(true) // 加载中
const business = ref<ContactApi.ContactVO>({} as ContactApi.ContactVO) // 联系人详情
const business = ref<BusinessApi.BusinessVO>({} as BusinessApi.BusinessVO) // 商机详情
const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
/** 获取详情 */
const getBusiness = async (id: number) => {
const getBusiness = async () => {
loading.value = true
try {
business.value = await BusinessApi.getBusiness(id)
await getOperateLog(id)
business.value = await BusinessApi.getBusiness(businessId.value)
await getOperateLog(businessId.value)
} finally {
loading.value = false
}
@ -109,7 +109,7 @@ const openStatusForm = () => {
/** 联系人转移 */
const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 联系人转移表单 ref
const transfer = () => {
transferFormRef.value?.open('商机转移', business.value.id, BusinessApi.transferBusiness)
transferFormRef.value?.open(business.value.id)
}
/** 获取操作日志 */
@ -141,6 +141,6 @@ onMounted(async () => {
return
}
businessId.value = params.id as unknown as number
await getBusiness(businessId.value)
await getBusiness()
})
</script>

6
src/views/crm/clue/detail/index.vue
View File

@ -18,7 +18,7 @@
>
转化为客户
</el-button>
<el-button v-else type="success" disabled>已转化客户</el-button>
<el-button v-else disabled type="success">已转化客户</el-button>
</ClueDetailsHeader>
<el-col>
<el-tabs>
@ -45,7 +45,7 @@
<!-- 表单弹窗：添加/修改 -->
<ClueForm ref="formRef" @success="getClue" />
<CrmTransferForm ref="transferFormRef" @success="close" />
<CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CLUE" @success="close" />
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
@ -91,7 +91,7 @@ const openForm = () => {
/** 线索转移 */
const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 线索转移表单 ref
const transfer = () => {
transferFormRef.value?.open('线索转移', clueId.value, ClueApi.transferClue)
transferFormRef.value?.open(clueId.value)
}
/** 转化为客户 */

45
src/views/crm/contact/components/ContactList.vue
View File

@ -6,18 +6,20 @@
创建联系人
</el-button>
<el-button
@click="openBusinessModal"
v-hasPermi="['crm:contact:create-business']"
v-if="queryParams.businessId"
v-hasPermi="['crm:contact:create-business']"
@click="openBusinessModal"
>
<Icon class="mr-5px" icon="ep:circle-plus" />关联
<Icon class="mr-5px" icon="ep:circle-plus" />
关联
</el-button>
<el-button
@click="deleteContactBusinessList"
v-hasPermi="['crm:contact:delete-business']"
v-if="queryParams.businessId"
v-hasPermi="['crm:contact:delete-business']"
@click="deleteContactBusinessList"
>
<Icon class="mr-5px" icon="ep:remove" />解除关联
<Icon class="mr-5px" icon="ep:remove" />
解除关联
</el-button>
</el-row>
@ -27,21 +29,21 @@
ref="contactRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
:stripe="true"
>
<el-table-column type="selection" width="55" v-if="queryParams.businessId" />
<el-table-column label="姓名" fixed="left" align="center" prop="name">
<el-table-column v-if="queryParams.businessId" type="selection" width="55" />
<el-table-column align="center" fixed="left" label="姓名" prop="name">
<template #default="scope">
<el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
{{ scope.row.name }}
</el-link>
</template>
</el-table-column>
<el-table-column label="手机号" align="center" prop="mobile" />
<el-table-column label="职位" align="center" prop="post" />
<el-table-column label="直属上级" align="center" prop="parentName" />
<el-table-column label="是否关键决策人" align="center" prop="master" min-width="100">
<el-table-column align="center" label="手机号" prop="mobile" />
<el-table-column align="center" label="职位" prop="post" />
<el-table-column align="center" label="直属上级" prop="parentName" />
<el-table-column align="center" label="是否关键决策人" min-width="100" prop="master">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
</template>
@ -49,9 +51,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>
@ -60,12 +62,13 @@
<ContactForm ref="formRef" @success="getList" />
<!-- 关联商机选择弹框 -->
<ContactListModal
v-if="customerId"
ref="contactModalRef"
:customer-id="props.customerId"
:customer-id="customerId"
@success="createContactBusinessList"
/>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import * as ContactApi from '@/api/crm/contact'
import ContactForm from './../ContactForm.vue'
import { DICT_TYPE } from '@/utils/dict'
@ -76,8 +79,8 @@ defineOptions({ name: 'CrmContactList' })
const props = defineProps<{
bizType: number // 业务类型
bizId: number // 业务编号
customerId: number // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
businessId: number // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
customerId?: number // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
businessId?: number // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
}>()
const loading = ref(true) // 列表的加载中
@ -147,7 +150,7 @@ const createContactBusinessList = async (contactIds: number[]) => {
contactIds: contactIds
} as ContactApi.ContactBusiness2ReqVO
contactRef.value.getSelectionRows().forEach((row: ContactApi.ContactVO) => {
data.businessIds.push(row.id)
data.contactIds.push(row.id)
})
await ContactApi.createContactBusinessList2(data)
// 刷新列表

52
src/views/crm/contact/components/ContactListModal.vue
View File

@ -1,28 +1,35 @@
<template>
<Dialog title="关联联系人" v-model="dialogVisible">
<Dialog v-model="dialogVisible" title="关联联系人">
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="90px"
>
<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()" 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()">
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
</el-form-item>
</el-form>
@ -31,24 +38,24 @@
<!-- 列表 -->
<ContentWrap class="mt-10px">
<el-table
v-loading="loading"
ref="contactRef"
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
:stripe="true"
>
<el-table-column type="selection" width="55" />
<el-table-column label="姓名" fixed="left" align="center" prop="name">
<el-table-column align="center" fixed="left" label="姓名" prop="name">
<template #default="scope">
<el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
{{ scope.row.name }}
</el-link>
</template>
</el-table-column>
<el-table-column label="手机号" align="center" prop="mobile" />
<el-table-column label="职位" align="center" prop="post" />
<el-table-column label="直属上级" align="center" prop="parentName" />
<el-table-column label="是否关键决策人" align="center" prop="master" min-width="100">
<el-table-column align="center" label="手机号" prop="mobile" />
<el-table-column align="center" label="职位" prop="post" />
<el-table-column align="center" label="直属上级" prop="parentName" />
<el-table-column align="center" label="是否关键决策人" min-width="100" prop="master">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
</template>
@ -56,14 +63,14 @@
</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>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
@ -71,10 +78,9 @@
<ContactForm ref="formRef" @success="getList" />
</Dialog>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import * as ContactApi from '@/api/crm/contact'
import ContactForm from '../ContactForm.vue'
import { erpPriceTableColumnFormatter } from '@/utils'
import { DICT_TYPE } from '@/utils/dict'
const message = useMessage() // 消息弹窗

16
src/views/crm/contact/detail/index.vue
View File

@ -31,15 +31,15 @@
<BusinessList
:biz-id="contact.id!"
:biz-type="BizTypeEnum.CRM_CONTACT"
:customer-id="contact.customerId"
:contact-id="contact.id"
:customer-id="contact.customerId"
/>
</el-tab-pane>
</el-tabs>
</el-col>
<!-- 表单弹窗：添加/修改 -->
<ContactForm ref="formRef" @success="getContact(contact.id)" />
<CrmTransferForm ref="transferFormRef" @success="close" />
<ContactForm ref="formRef" @success="getContact" />
<CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CONTACT" @success="close" />
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
@ -65,11 +65,11 @@ const contact = ref<ContactApi.ContactVO>({} as ContactApi.ContactVO) // 联系
const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
/** 获取详情 */
const getContact = async (id: number) => {
const getContact = async () => {
loading.value = true
try {
contact.value = await ContactApi.getContact(id)
await getOperateLog(id)
contact.value = await ContactApi.getContact(contactId.value)
await getOperateLog(contactId.value)
} finally {
loading.value = false
}
@ -84,7 +84,7 @@ const openForm = (type: string, id?: number) => {
/** 联系人转移 */
const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 联系人转移表单 ref
const transfer = () => {
transferFormRef.value?.open('联系人转移', contact.value.id, ContactApi.transferContact)
transferFormRef.value?.open(contact.value.id)
}
/** 获取操作日志 */
@ -116,6 +116,6 @@ onMounted(async () => {
return
}
contactId.value = params.id as unknown as number
await getContact(contactId.value)
await getContact()
})
</script>

5
src/views/crm/contract/detail/index.vue
View File

@ -48,7 +48,7 @@
<!-- 表单弹窗：添加/修改 -->
<ContractForm ref="formRef" @success="getContractData" />
<CrmTransferForm ref="transferFormRef" @success="close" />
<CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CONTRACT" @success="close" />
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
@ -113,10 +113,9 @@ const createReceivable = (planData: any) => {
}
/** 转移 */
// TODO @puhui999：这个组件，要不传递业务类型，然后组件里判断 title 和 api 能调用哪个；整体治理掉；好呢
const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 合同转移表单 ref
const transferContract = () => {
transferFormRef.value?.open('合同转移', contract.value.id, ContractApi.transferContract)
transferFormRef.value?.open(contract.value.id)
}
/** 关闭 */

4
src/views/crm/customer/detail/index.vue
View File

@ -76,7 +76,7 @@
<!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getCustomer" />
<CustomerDistributeForm ref="distributeForm" @success="getCustomer" />
<CrmTransferForm ref="transferFormRef" @success="getCustomer" />
<CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CUSTOMER" @success="close" />
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
@ -142,7 +142,7 @@ const handleUpdateDealStatus = async () => {
/** 客户转移 */
const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 客户转移表单 ref
const transfer = () => {
transferFormRef.value?.open('客户转移', customerId.value, CustomerApi.transferCustomer)
transferFormRef.value?.open(customerId.value)
}
/** 锁定客户 */

17
src/views/crm/permission/components/PermissionForm.vue
View File

@ -29,12 +29,15 @@
</template>
</el-radio-group>
</el-form-item>
<!-- TODO @puhui999：同时添加至,还没想好下次搞 -->
<el-form-item v-if="false && formType === 'create'" label="同时添加至" prop="toBizType">
<el-select v-model="formData.userId">
<el-option :value="1" label="联系人" />
<el-option :value="1" label="商机" />
</el-select>
<el-form-item
v-if="formType === 'create' && formData.bizType === BizTypeEnum.CRM_CUSTOMER"
label="同时添加至"
>
<el-checkbox-group v-model="formData.toBizTypes">
<el-checkbox :label="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
<el-checkbox :label="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
<el-checkbox :label="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<template #footer>
@ -46,7 +49,7 @@
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
import * as PermissionApi from '@/api/crm/permission'
import { PermissionLevelEnum } from '@/api/crm/permission'
import { BizTypeEnum, PermissionLevelEnum } from '@/api/crm/permission'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
defineOptions({ name: 'CrmPermissionForm' })

86
src/views/crm/permission/components/TransferForm.vue
View File

@ -19,10 +19,7 @@
</el-select>
</el-form-item>
<el-form-item label="老负责人">
<el-radio-group
v-model="oldOwnerHandler"
@change="formData.oldOwnerPermissionLevel = undefined"
>
<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>
@ -39,8 +36,14 @@
</template>
</el-radio-group>
</el-form-item>
<el-form-item v-if="bizType === BizTypeEnum.CRM_CUSTOMER" label="同时转移">
<el-checkbox-group v-model="formData.toBizTypes">
<el-checkbox :label="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
<el-checkbox :label="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
<el-checkbox :label="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<!-- TODO @puhui999 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择 -->
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
@ -49,23 +52,27 @@
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
import type { TransferReqVO } from '@/api/crm/customer'
import * as BusinessApi from '@/api/crm/business'
import * as ClueApi from '@/api/crm/clue'
import * as ContactApi from '@/api/crm/contact'
import * as CustomerApi from '@/api/crm/customer'
import * as ContractApi from '@/api/crm/contract'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { PermissionLevelEnum } from '@/api/crm/permission'
import { BizTypeEnum, PermissionLevelEnum, TransferReqVO } from '@/api/crm/permission'
defineOptions({ name: 'CrmTransferForm' })
const props = defineProps<{
bizType: number
}>()
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
const oldOwnerHandler = ref(false) // 老负责人的处理方式
const formData = ref<TransferReqVO>({
id: undefined, // 客户编号
newOwnerUserId: undefined, // 新负责人的用户编号
oldOwnerPermissionLevel: undefined // 老负责人加入团队后的权限级别
})
const formData = ref<TransferReqVO>({} as TransferReqVO)
const formRules = reactive({
newOwnerUserId: [{ required: true, message: '新负责人不能为空', trigger: 'blur' }],
oldOwnerPermissionLevel: [
@ -73,18 +80,22 @@ const formRules = reactive({
]
})
const formRef = ref() // 表单 Ref
const transferFuncRef = ref<Function>(() => {}) // 转移所需回调
/** 打开弹窗 */
const open = async (title: string, bizId: number, transferFunc: Function) => {
const open = async (bizId: number) => {
dialogVisible.value = true
dialogTitle.value = title
transferFuncRef.value = transferFunc
dialogTitle.value = getDialogTitle()
resetForm()
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 () => {
@ -96,7 +107,7 @@ const submitForm = async () => {
formLoading.value = true
try {
const data = formData.value
await transferFuncRef.value(unref(data))
await transfer(unref(data))
message.success(dialogTitle.value + '成功')
dialogVisible.value = false
// 发送操作成功的事件
@ -105,15 +116,44 @@ const submitForm = async () => {
formLoading.value = false
}
}
const transfer = async (data: TransferReqVO) => {
switch (props.bizType) {
case BizTypeEnum.CRM_CLUE:
return await ClueApi.transferClue(data)
case BizTypeEnum.CRM_CUSTOMER:
return await CustomerApi.transferCustomer(data)
case BizTypeEnum.CRM_CONTACT:
return await ContactApi.transferContact(data)
case BizTypeEnum.CRM_BUSINESS:
return await BusinessApi.transferBusiness(data)
case BizTypeEnum.CRM_CONTRACT:
return await ContractApi.transferContract(data)
default:
message.error('【转移失败】没有转移接口')
throw new Error('【转移失败】没有转移接口')
}
}
const getDialogTitle = () => {
switch (props.bizType) {
case BizTypeEnum.CRM_CLUE:
return '线索转移'
case BizTypeEnum.CRM_CUSTOMER:
return '客户转移'
case BizTypeEnum.CRM_CONTACT:
return '联系人转移'
case BizTypeEnum.CRM_BUSINESS:
return '商机转移'
case BizTypeEnum.CRM_CONTRACT:
return '合同转移'
default:
return '转移'
}
}
/** 重置表单 */
const resetForm = () => {
formRef.value?.resetFields()
formData.value = {
id: undefined, // 客户编号
newOwnerUserId: undefined, // 新负责人的用户编号
oldOwnerPermissionLevel: undefined // 老负责人加入团队后的权限级别
}
formData.value = {} as TransferReqVO
}
onMounted(async () => {
// 获得用户列表

27
src/views/crm/receivable/ReceivableForm.vue
View File

@ -10,7 +10,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="回款编号" prop="no">
<el-input disabled v-model="formData.no" placeholder="保存时自动生成" />
<el-input v-model="formData.no" disabled placeholder="保存时自动生成" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -38,8 +38,8 @@
:disabled="formType !== 'create'"
class="w-1/1"
filterable
@change="handleCustomerChange"
placeholder="请选择客户"
@change="handleCustomerChange"
>
<el-option
v-for="item in customerList"
@ -57,15 +57,15 @@
:disabled="formType !== 'create' || !formData.customerId"
class="w-1/1"
filterable
@change="handleContractChange"
placeholder="请选择合同"
@change="handleContractChange"
>
<el-option
v-for="data in contractList"
:key="data.id"
:disabled="data.auditStatus !== 20"
:label="data.name"
:value="data.id!"
:disabled="data.auditStatus !== 20"
/>
</el-select>
</el-form-item>
@ -78,15 +78,15 @@
v-model="formData.planId"
:disabled="formType !== 'create' || !formData.contractId"
class="!w-1/1"
@change="handleReceivablePlanChange"
placeholder="请选择回款期数"
@change="handleReceivablePlanChange"
>
<el-option
v-for="data in receivablePlanList"
:key="data.id"
:disabled="data.receivableId"
:label="'第 ' + data.period + ' 期'"
:value="data.id!"
:disabled="data.receivableId"
/>
</el-select>
</el-form-item>
@ -109,11 +109,11 @@
<el-form-item label="回款金额" prop="price">
<el-input-number
v-model="formData.price"
:min="0.01"
:precision="2"
class="!w-100%"
controls-position="right"
placeholder="请输入回款金额"
:min="0.01"
:precision="2"
/>
</el-form-item>
</el-col>
@ -145,12 +145,12 @@
<script lang="ts" setup>
import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
import * as ReceivableApi from '@/api/crm/receivable'
import { ReceivableVO } from '@/api/crm/receivable'
import * as UserApi from '@/api/system/user'
import * as CustomerApi from '@/api/crm/customer'
import * as ContractApi from '@/api/crm/contract'
import { useUserStore } from '@/store/modules/user'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import form from '@/components/Form/src/Form.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -185,9 +185,10 @@ const open = async (
if (id) {
formLoading.value = true
try {
formData.value = await ReceivableApi.getReceivable(id)
await handleCustomerChange(formData.value.customerId)
formData.value.contractId = formData.value.contract.id
const data = (await ReceivableApi.getReceivable(id)) as ReceivableVO
formData.value = data
await handleCustomerChange(data.customerId!)
formData.value.contractId = data?.contract?.id
} finally {
formLoading.value = false
}
@ -266,7 +267,7 @@ const handleContractChange = async (contractId: number) => {
// 获得回款计划列表
receivablePlanList.value = []
receivablePlanList.value = await ReceivablePlanApi.getReceivablePlanSimpleList(
formData.value.customerId,
formData.value.customerId!,
contractId
)
// 设置金额

15
src/views/crm/receivable/plan/ReceivablePlanForm.vue
View File

@ -10,7 +10,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="还款期数" prop="period">
<el-input disabled v-model="formData.period" placeholder="保存时自动生成" />
<el-input v-model="formData.period" disabled placeholder="保存时自动生成" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -38,8 +38,8 @@
:disabled="formType !== 'create'"
class="w-1/1"
filterable
@change="handleCustomerChange"
placeholder="请选择客户"
@change="handleCustomerChange"
>
<el-option
v-for="item in customerList"
@ -74,11 +74,11 @@
<el-form-item label="计划回款金额" prop="price">
<el-input-number
v-model="formData.price"
:min="0.01"
:precision="2"
class="!w-100%"
controls-position="right"
placeholder="请输入计划回款金额"
:min="0.01"
:precision="2"
/>
</el-form-item>
</el-col>
@ -136,7 +136,7 @@ import * as CustomerApi from '@/api/crm/customer'
import * as ContractApi from '@/api/crm/contract'
import { useUserStore } from '@/store/modules/user'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { aw } from '../../../../../dist-prod/assets/index-9eac537b'
import { cloneDeep } from 'lodash-es'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -167,7 +167,10 @@ const open = async (type: string, id?: number, customerId?: number, contractId?:
if (id) {
formLoading.value = true
try {
formData.value = await ReceivablePlanApi.getReceivablePlan(id)
const data = await ReceivablePlanApi.getReceivablePlan(id)
formData.value = cloneDeep(data)
await handleCustomerChange(data.customerId!)
formData.value.contractId = data?.contractId
} finally {
formLoading.value = false
}

130
src/views/crm/statistics/customer/components/CustomerConversionStat.vue Normal file
View File

@ -0,0 +1,130 @@
<!-- 客户转化率分析 -->
<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="customerName" min-width="200" />
<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="ownerUserName" min-width="200" />
<el-table-column label="创建人" align="center" prop="creatorUserName" min-width="200" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
min-width="200"
/>
<el-table-column
label="下单日期"
align="center"
prop="orderDate"
:formatter="dateFormatter2"
min-width="200"
/>
</el-table>
</el-card>
</template>
<script setup lang="ts">
import {
StatisticsCustomerApi,
CrmStatisticsCustomerSummaryByDateRespVO
} from '@/api/crm/statistics/customer'
import { EChartsOption } from 'echarts'
import { round } from 'lodash-es'
import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
defineOptions({ name: 'CustomerConversionStat' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
const loading = ref(false) // 加载中
const list = ref<CrmStatisticsCustomerSummaryByDateRespVO[]>([]) // 列表的数据
/** 柱状图配置：纵向 */
const echartsOption = reactive<EChartsOption>({
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true
},
legend: {},
series: [
{
name: '客户转化率',
type: 'line',
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: '转化率(%)'
},
xAxis: {
type: 'category',
name: '日期',
data: []
}
}) as EChartsOption
/** 获取统计数据 */
const loadData = async () => {
// 1. 加载统计数据
loading.value = true
const customerCount = await StatisticsCustomerApi.getCustomerSummaryByDate(props.queryParams)
const contractSummary = await StatisticsCustomerApi.getContractSummary(props.queryParams)
// 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = customerCount.map(
(s: CrmStatisticsCustomerSummaryByDateRespVO) => s.time
)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = customerCount.map(
(item: CrmStatisticsCustomerSummaryByDateRespVO) => {
return {
name: item.time,
value: item.customerCreateCount
? round((item.customerDealCount / item.customerCreateCount) * 100, 2)
: 0
}
}
)
}
// 2.2 更新列表数据
list.value = contractSummary
loading.value = false
}
defineExpose({ loadData })
/** 初始化 */
onMounted(() => {
loadData()
})
</script>

127
src/views/crm/statistics/customer/components/CustomerDealCycle.vue Normal file
View File

@ -0,0 +1,127 @@
<!-- 成交周期分析 -->
<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="ownerUserName" 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,
CrmStatisticsCustomerDealCycleByDateRespVO,
CrmStatisticsCustomerSummaryByDateRespVO,
} from '@/api/crm/statistics/customer'
import { EChartsOption } from 'echarts'
defineOptions({ name: 'CustomerDealCycle' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
const loading = ref(false) // 加载中
const list = ref<CrmStatisticsCustomerDealCycleByDateRespVO[]>([]) // 列表的数据
/** 柱状图配置：纵向 */
const echartsOption = reactive<EChartsOption>({
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true
},
legend: {},
series: [
{
name: '成交周期(天)',
type: 'bar',
data: []
},
{
name: '成交客户数',
type: 'bar',
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: '数量（个）'
},
xAxis: {
type: 'category',
name: '日期',
data: []
}
}) as EChartsOption
/** 获取统计数据 */
const loadData = async () => {
// 1. 加载统计数据
loading.value = true
const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate(
props.queryParams
)
const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
props.queryParams
)
const customerDealCycleByUser = await StatisticsCustomerApi.getCustomerDealCycleByUser(
props.queryParams
)
// 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = customerDealCycleByDate.map(
(s: CrmStatisticsCustomerDealCycleByDateRespVO) => s.time
)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = customerDealCycleByDate.map(
(s: CrmStatisticsCustomerDealCycleByDateRespVO) => s.customerDealCycle
)
}
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
echartsOption.series[1]['data'] = customerSummaryByDate.map(
(s: CrmStatisticsCustomerSummaryByDateRespVO) => s.customerDealCount
)
}
// 2.2 更新列表数据
list.value = customerDealCycleByUser
loading.value = false
}
defineExpose({ loadData })
/** 初始化 */
onMounted(() => {
loadData()
})
</script>

124
src/views/crm/statistics/customer/components/CustomerFollowupSummary.vue Normal file
View File

@ -0,0 +1,124 @@
<!-- 客户跟进次数分析 -->
<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="ownerUserName" min-width="200" />
<el-table-column label="跟进次数" align="right" prop="followupRecordCount" min-width="200" />
<el-table-column
label="跟进客户数"
align="right"
prop="followupCustomerCount"
min-width="200"
/>
</el-table>
</el-card>
</template>
<script setup lang="ts">
import {
StatisticsCustomerApi,
CrmStatisticsFollowupSummaryByDateRespVO,
CrmStatisticsFollowupSummaryByUserRespVO
} from '@/api/crm/statistics/customer'
import { EChartsOption } from 'echarts'
defineOptions({ name: 'CustomerFollowupSummary' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
const loading = ref(false) // 加载中
const list = ref<CrmStatisticsFollowupSummaryByUserRespVO[]>([]) // 列表的数据
/** 柱状图配置：纵向 */
const echartsOption = reactive<EChartsOption>({
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true
},
legend: {},
series: [
{
name: '跟进客户数',
type: 'bar',
data: []
},
{
name: '跟进次数',
type: 'bar',
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: '数量（个）'
},
xAxis: {
type: 'category',
name: '日期',
data: []
}
}) as EChartsOption
/** 获取统计数据 */
const loadData = async () => {
// 1. 加载统计数据
loading.value = true
const followupSummaryByDate = await StatisticsCustomerApi.getFollowupSummaryByDate(
props.queryParams
)
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
)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
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
)
}
// 2.2 更新列表数据
list.value = followupSummaryByUser
loading.value = false
}
defineExpose({ loadData })
/** 初始化 */
onMounted(() => {
loadData()
})
</script>

105
src/views/crm/statistics/customer/components/CustomerFollowupType.vue Normal file
View File

@ -0,0 +1,105 @@
<!-- 客户跟进方式分析 -->
<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="followupType" min-width="200" />
<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>
</template>
<script setup lang="ts">
import {
StatisticsCustomerApi,
CrmStatisticsFollowupSummaryByTypeRespVO
} from '@/api/crm/statistics/customer'
import { EChartsOption } from 'echarts'
import { round, sumBy } from 'lodash-es'
defineOptions({ name: 'CustomerFollowupType' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
const loading = ref(false) // 加载中
const list = ref<CrmStatisticsFollowupSummaryByTypeRespVO[]>([]) // 列表的数据
/** 饼图配置 */
const echartsOption = reactive<EChartsOption>({
title: {
text: '客户跟进方式分析',
left: 'center'
},
legend: {
orient: 'vertical',
left: 'left'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}% '
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '客户跟进方式分析' } // 保存为图片
}
},
series: [
{
name: '跟进方式',
type: 'pie',
radius: '50%',
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}) as EChartsOption
/** 获取统计数据 */
const loadData = async () => {
// 1. 加载统计数据
loading.value = true
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) => {
return {
name: r.followupType,
value: r.followupRecordCount
}
}
)
}
// 2.2 更新列表数据
const totalCount = sumBy(followupSummaryByType, 'followupRecordCount')
list.value = followupSummaryByType.map((r: CrmStatisticsFollowupSummaryByTypeRespVO) => {
return {
followupType: r.followupType,
followupRecordCount: r.followupRecordCount,
portion: round((r.followupRecordCount / totalCount) * 100, 2)
}
})
loading.value = false
}
defineExpose({ loadData })
/** 初始化 */
onMounted(() => {
loadData()
})
</script>

151
src/views/crm/statistics/customer/components/CustomerSummary.vue Normal file
View File

@ -0,0 +1,151 @@
<!-- 客户总量统计 -->
<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="员工姓名" prop="ownerUserName" min-width="100" />
<el-table-column
label="新增客户数"
align="right"
prop="customerCreateCount"
min-width="200"
/>
<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
}}
</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" min-width="200">
<!-- TODO @dhb52：参考 util/index.ts 的 // ========== ERP 专属方法 ========== 部分，搞个两个方法，一个格式化百分比，一个计算百分比 -->
<template #default="scope">
{{ round(scope.row.contractPrice - scope.row.receivablePrice, 2) }}
</template>
</el-table-column>
<el-table-column label="回款完成率(%)" align="right" min-width="200">
<template #default="scope">
{{
scope.row.contractPrice !== 0
? round((scope.row.receivablePrice / scope.row.contractPrice) * 100, 2)
: 0
}}
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script setup lang="ts">
import {
StatisticsCustomerApi,
CrmStatisticsCustomerSummaryByDateRespVO,
CrmStatisticsCustomerSummaryByUserRespVO
} from '@/api/crm/statistics/customer'
import { EChartsOption } from 'echarts'
import { round } from 'lodash-es'
defineOptions({ name: 'CustomerSummary' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
const loading = ref(false) // 加载中
const list = ref<CrmStatisticsCustomerSummaryByUserRespVO[]>([]) // 列表的数据
/** 柱状图配置：纵向 */
const echartsOption = reactive<EChartsOption>({
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true
},
legend: {},
series: [
{
name: '新增客户数',
type: 'bar',
data: []
},
{
name: '成交客户数',
type: 'bar',
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: '数量（个）'
},
xAxis: {
type: 'category',
name: '日期',
data: []
}
}) as EChartsOption
/** 获取统计数据 */
const loadData = async () => {
// 1. 加载统计数据
loading.value = true
const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
props.queryParams
)
const customerSummaryByUser = await StatisticsCustomerApi.getCustomerSummaryByUser(
props.queryParams
)
// 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = customerSummaryByDate.map(
(s: CrmStatisticsCustomerSummaryByDateRespVO) => s.time
)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = customerSummaryByDate.map(
(s: CrmStatisticsCustomerSummaryByDateRespVO) => s.customerCreateCount
)
}
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
echartsOption.series[1]['data'] = customerSummaryByDate.map(
(s: CrmStatisticsCustomerSummaryByDateRespVO) => s.customerDealCount
)
}
// 2.2 更新列表数据
list.value = customerSummaryByUser
loading.value = false
}
defineExpose({ loadData })
/** 初始化 */
onMounted(() => {
loadData()
})
</script>

166
src/views/crm/statistics/customer/index.vue Normal file
View File

@ -0,0 +1,166 @@
<!-- 数据统计 - 员工客户分析 -->
<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"
: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')]"
/>
</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="customerSummary" lazy>
<CustomerSummary :query-params="queryParams" ref="customerSummaryRef" />
</el-tab-pane>
<!-- 客户跟进次数分析 -->
<el-tab-pane label="客户跟进次数分析" name="followupSummary" lazy>
<CustomerFollowupSummary :query-params="queryParams" ref="followupSummaryRef" />
</el-tab-pane>
<!-- 客户跟进方式分析 -->
<el-tab-pane label="客户跟进方式分析" name="followupType" lazy>
<CustomerFollowupType :query-params="queryParams" ref="followupTypeRef" />
</el-tab-pane>
<!-- 客户转化率分析 -->
<el-tab-pane label="客户转化率分析" name="conversionStat" lazy>
<CustomerConversionStat :query-params="queryParams" ref="conversionStatRef" />
</el-tab-pane>
<!-- 成交周期分析 -->
<el-tab-pane label="成交周期分析" name="dealCycle" lazy>
<CustomerDealCycle :query-params="queryParams" ref="dealCycleRef" />
</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 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'
defineOptions({ name: 'CrmStatisticsCustomer' })
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('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 handleQuery = () => {
switch (activeTab.value) {
case 'customerSummary':
customerSummaryRef.value?.loadData?.()
break
case 'followupSummary':
followupSummaryRef.value?.loadData?.()
break
case 'followupType':
followupTypeRef.value?.loadData?.()
break
case 'conversionStat':
conversionStatRef.value?.loadData?.()
break
case 'dealCycle':
dealCycleRef.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>

46
src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
View File

@ -2,39 +2,40 @@
<!-- 列表 -->
<ContentWrap>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['infra:demo03-student:create']"
plain
type="primary"
@click="openForm('create')"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="名字" align="center" prop="name" />
<el-table-column label="分数" align="center" prop="score" />
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="编号" prop="id" />
<el-table-column align="center" label="名字" prop="name" />
<el-table-column align="center" label="分数" prop="score" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px"
/>
<el-table-column label="操作" align="center">
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="['infra:demo03-student:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['infra:demo03-student:update']"
>
编辑
</el-button>
<el-button
v-hasPermi="['infra:demo03-student:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:demo03-student:delete']"
>
删除
</el-button>
@ -43,9 +44,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>
@ -53,7 +54,7 @@
<Demo03CourseForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
import Demo03CourseForm from './Demo03CourseForm.vue'
@ -62,7 +63,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const props = defineProps<{
studentId: undefined // 学生编号（主表的关联字段）
studentId?: number // 学生编号（主表的关联字段）
}>()
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
@ -70,17 +71,20 @@ const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
studentId: undefined
studentId: undefined as unknown
})
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.studentId,
(val) => {
(val: number) => {
if (!val) {
return
}
queryParams.studentId = val
handleQuery()
},
{ immediate: false }
{ immediate: true, deep: true }
)
/** 查询列表 */

46
src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
View File

@ -2,39 +2,40 @@
<!-- 列表 -->
<ContentWrap>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['infra:demo03-student:create']"
plain
type="primary"
@click="openForm('create')"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="名字" align="center" prop="name" />
<el-table-column label="班主任" align="center" prop="teacher" />
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="编号" prop="id" />
<el-table-column align="center" label="名字" prop="name" />
<el-table-column align="center" label="班主任" prop="teacher" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px"
/>
<el-table-column label="操作" align="center">
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="['infra:demo03-student:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['infra:demo03-student:update']"
>
编辑
</el-button>
<el-button
v-hasPermi="['infra:demo03-student:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:demo03-student:delete']"
>
删除
</el-button>
@ -43,9 +44,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>
@ -53,7 +54,7 @@
<Demo03GradeForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
import Demo03GradeForm from './Demo03GradeForm.vue'
@ -62,7 +63,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const props = defineProps<{
studentId: undefined // 学生编号（主表的关联字段）
studentId?: number // 学生编号（主表的关联字段）
}>()
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
@ -70,17 +71,20 @@ const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
studentId: undefined
studentId: undefined as unknown
})
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.studentId,
(val) => {
(val: number) => {
if (!val) {
return
}
queryParams.studentId = val
handleQuery()
},
{ immediate: false }
{ immediate: true, deep: true }
)
/** 查询列表 */

94
src/views/infra/demo/demo03/erp/index.vue
View File

@ -4,23 +4,23 @@
<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 label="性别" prop="sex">
<el-select v-model="queryParams.sex" placeholder="请选择性别" clearable class="!w-240px">
<el-select v-model="queryParams.sex" class="!w-240px" clearable placeholder="请选择性别">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
:key="dict.value"
@ -32,33 +32,41 @@
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</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"
plain
@click="openForm('create')"
v-hasPermi="['infra:demo03-student: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
type="success"
v-hasPermi="['infra:demo03-student:create']"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['infra:demo03-student:export']"
type="primary"
@click="openForm('create')"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button
v-hasPermi="['infra:demo03-student:export']"
:loading="exportLoading"
plain
type="success"
@click="handleExport"
>
<Icon class="mr-5px" icon="ep:download" />
导出
</el-button>
</el-form-item>
</el-form>
@ -69,48 +77,48 @@
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
:stripe="true"
highlight-current-row
@current-change="handleCurrentChange"
>
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="名字" align="center" prop="name" />
<el-table-column label="性别" align="center" prop="sex">
<el-table-column align="center" label="编号" prop="id" />
<el-table-column align="center" label="名字" prop="name" />
<el-table-column align="center" label="性别" prop="sex">
<template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="出生日期"
align="center"
prop="birthday"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="简介" align="center" prop="description" />
<el-table-column align="center" label="简介" prop="description" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px"
/>
<el-table-column label="操作" align="center">
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="['infra:demo03-student:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['infra:demo03-student:update']"
>
编辑
</el-button>
<el-button
v-hasPermi="['infra:demo03-student:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:demo03-student:delete']"
>
删除
</el-button>
@ -119,9 +127,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>
@ -132,17 +140,17 @@
<ContentWrap>
<el-tabs model-value="demo03Course">
<el-tab-pane label="学生课程" name="demo03Course">
<Demo03CourseList :student-id="currentRow.id" />
<Demo03CourseList :student-id="currentRow?.id" />
</el-tab-pane>
<el-tab-pane label="学生班级" name="demo03Grade">
<Demo03GradeList :student-id="currentRow.id" />
<Demo03GradeList :student-id="currentRow?.id" />
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'