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/performance/index.vue | 146 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 146 insertions(+), 0 deletions(-)
diff --git a/src/views/crm/statistics/performance/index.vue b/src/views/crm/statistics/performance/index.vue
new file mode 100644
index 0000000..822afec
--- /dev/null
+++ b/src/views/crm/statistics/performance/index.vue
@@ -0,0 +1,146 @@
+<!-- 鏁版嵁缁熻 - 鍛樺伐涓氱哗鍒嗘瀽 -->
+<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, endOfDay, 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().getFullYear(), 0, 1))),
+ formatDate(endOfDay(new Date(new Date().getFullYear(), 11, 31)))
+ ]
+})
+
+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('ContractCountPerformance')
+const ContractCountPerformanceRef = ref() // 鍛樺伐鍚堝悓鏁伴噺缁熻
+const ContractPricePerformanceRef = ref() // 鍛樺伐鍚堝悓閲戦缁熻
+const ReceivablePricePerformanceRef = ref() // 鍛樺伐鍥炴閲戦缁熻
+
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+ // 浠� queryParams.times[0] 涓幏鍙栧埌浜嗗勾浠�
+ const selectYear = parseInt(queryParams.times[0])
+ queryParams.times[0] = formatDate(beginOfDay(new Date(selectYear, 0, 1)))
+ queryParams.times[1] = formatDate(endOfDay(new Date(selectYear, 11, 31)))
+
+ // 鎵ц鏌ヨ
+ 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>
--
Gitblit v1.8.0