From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/crm/statistics/customer/index.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/src/views/crm/statistics/customer/index.vue b/src/views/crm/statistics/customer/index.vue
new file mode 100644
index 0000000..207dc35
--- /dev/null
+++ b/src/views/crm/statistics/customer/index.vue
@@ -0,0 +1,214 @@
+<!-- 鏁版嵁缁熻 - 鍛樺伐瀹㈡埛鍒嗘瀽 -->
+<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="customerSummary">
+ <CustomerSummary ref="customerSummaryRef" :query-params="queryParams" />
+ </el-tab-pane>
+ <!-- 瀹㈡埛璺熻繘娆℃暟鍒嗘瀽 -->
+ <el-tab-pane label="瀹㈡埛璺熻繘娆℃暟鍒嗘瀽" lazy name="followUpSummary">
+ <CustomerFollowUpSummary ref="followUpSummaryRef" :query-params="queryParams" />
+ </el-tab-pane>
+ <!-- 瀹㈡埛璺熻繘鏂瑰紡鍒嗘瀽 -->
+ <el-tab-pane label="瀹㈡埛璺熻繘鏂瑰紡鍒嗘瀽" lazy name="followUpType">
+ <CustomerFollowUpType ref="followUpTypeRef" :query-params="queryParams" />
+ </el-tab-pane>
+ <!-- 瀹㈡埛杞寲鐜囧垎鏋� -->
+ <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="鍛樺伐瀹㈡埛鎴愪氦鍛ㄦ湡鍒嗘瀽" 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>
+</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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime'
+import { defaultProps, handleTree } from '@/utils/tree'
+import CustomerConversionStat from './components/CustomerConversionStat.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: [
+ // 榛樿鏄剧ず鏈�杩戜竴鍛ㄧ殑鏁版嵁
+ 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') // 娲昏穬鏍囩
+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': // 瀹㈡埛鎬婚噺鍒嗘瀽
+ customerSummaryRef.value?.loadData?.()
+ break
+ case 'followUpSummary': // 瀹㈡埛璺熻繘娆℃暟鍒嗘瀽
+ followUpSummaryRef.value?.loadData?.()
+ break
+ case 'followUpType': // 瀹㈡埛璺熻繘鏂瑰紡鍒嗘瀽
+ followUpTypeRef.value?.loadData?.()
+ break
+ case 'conversionStat': // 瀹㈡埛杞寲鐜囧垎鏋�
+ conversionStatRef.value?.loadData?.()
+ break
+ 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 */
+watch(activeTab, () => {
+ handleQuery()
+})
+
+/** 閲嶇疆鎸夐挳鎿嶄綔 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 鍒濆鍖� */
+onMounted(async () => {
+ deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+ userList.value = handleTree(await UserApi.getSimpleUserList())
+})
+</script>
--
Gitblit v1.8.0