|
|
@@ -0,0 +1,241 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
|
|
|
+ <pane size="100">
|
|
|
+ <el-col>
|
|
|
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
|
|
|
+ <el-form-item label="平台机构" prop="deptId">
|
|
|
+ <IeInstitutionSelect v-model="queryParams.deptId" placeholder="请选择平台机构" clearable style="width: 240px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="代理商" prop="agentId">
|
|
|
+ <IeAgentSelect v-model="queryParams.agentId" placeholder="请选择代理商" clearable filterable style="width: 240px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开卡时间" prop="openTimeRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="openTimeRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ style="width: 240px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ plain
|
|
|
+ icon="Sort"
|
|
|
+ @click="toggleExpandAll"
|
|
|
+ >展开/折叠</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-if="refreshTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="statisticsList"
|
|
|
+ row-key="id"
|
|
|
+ :default-expand-all="isExpandAll"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ :row-style="getRowStyle"
|
|
|
+ >
|
|
|
+ <el-table-column prop="agentName" label="代理商" align="center" min-width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-if="scope.row.leafAgentName && scope.row.leafAgentName !== scope.row.agentName">
|
|
|
+ {{ scope.row.leafAgentName }}
|
|
|
+ </span>
|
|
|
+ <span v-else>{{ scope.row.agentName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="agentId" label="账号" align="center" />
|
|
|
+ <el-table-column prop="openCard" label="已开卡" align="center" />
|
|
|
+ <el-table-column prop="closeCard" label="已关卡" align="center" />
|
|
|
+ <el-table-column prop="payCard" label="已缴费" align="center" />
|
|
|
+ <el-table-column prop="settlementCard" label="已结算" align="center" />
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </pane>
|
|
|
+ </splitpanes>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="CardStatistics">
|
|
|
+import { getCardStatistics } from "@/api/dz/cards"
|
|
|
+import IeInstitutionSelect from '@/components/IeInstitutionSelect/index.vue'
|
|
|
+import IeAgentSelect from '@/components/IeAgentSelect/index.vue'
|
|
|
+import useAppStore from '@/store/modules/app'
|
|
|
+import { Splitpanes, Pane } from "splitpanes"
|
|
|
+import "splitpanes/dist/splitpanes.css"
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
+const appStore = useAppStore()
|
|
|
+
|
|
|
+const statisticsList = ref([])
|
|
|
+const loading = ref(true)
|
|
|
+const showSearch = ref(true)
|
|
|
+const openTimeRange = ref([])
|
|
|
+const isExpandAll = ref(true)
|
|
|
+const refreshTable = ref(true)
|
|
|
+
|
|
|
+const queryParams = reactive({
|
|
|
+ deptId: undefined,
|
|
|
+ agentId: undefined
|
|
|
+})
|
|
|
+
|
|
|
+/** 查询统计列表 */
|
|
|
+function getList() {
|
|
|
+ loading.value = true
|
|
|
+ // 构建查询参数:deptId, agentId, openTimeBegin, openTimeEnd
|
|
|
+ const params = {}
|
|
|
+
|
|
|
+ // 平台机构
|
|
|
+ if (queryParams.deptId) {
|
|
|
+ params.deptId = queryParams.deptId
|
|
|
+ }
|
|
|
+
|
|
|
+ // 代理商
|
|
|
+ if (queryParams.agentId) {
|
|
|
+ params.agentId = queryParams.agentId
|
|
|
+ }
|
|
|
+
|
|
|
+ // 开卡时间范围
|
|
|
+ if (openTimeRange.value && openTimeRange.value.length === 2) {
|
|
|
+ params.openTimeBegin = openTimeRange.value[0]
|
|
|
+ params.openTimeEnd = openTimeRange.value[1]
|
|
|
+ }
|
|
|
+
|
|
|
+ getCardStatistics(params).then(response => {
|
|
|
+ // 处理数据,构建层级结构
|
|
|
+ const data = response.data || []
|
|
|
+ const map = new Map()
|
|
|
+ const result = []
|
|
|
+
|
|
|
+ // 先按一级代理商分组
|
|
|
+ data.forEach(item => {
|
|
|
+ const key = item.agentId
|
|
|
+ if (!map.has(key)) {
|
|
|
+ map.set(key, {
|
|
|
+ id: `agent_${item.agentId}`,
|
|
|
+ agentId: item.agentId,
|
|
|
+ agentName: item.agentName,
|
|
|
+ leafAgentId: item.leafAgentId,
|
|
|
+ leafAgentName: item.leafAgentName,
|
|
|
+ openCard: 0,
|
|
|
+ closeCard: 0,
|
|
|
+ payCard: 0,
|
|
|
+ settlementCard: 0,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ result.push(map.get(key))
|
|
|
+ }
|
|
|
+
|
|
|
+ const parent = map.get(key)
|
|
|
+
|
|
|
+ // 如果是一级代理商自己(leafAgentId === agentId 或 leafAgentName === agentName)
|
|
|
+ if (item.leafAgentId === item.agentId || item.leafAgentName === item.agentName) {
|
|
|
+ parent.openCard += item.openCard || 0
|
|
|
+ parent.closeCard += item.closeCard || 0
|
|
|
+ parent.payCard += item.payCard || 0
|
|
|
+ parent.settlementCard += item.settlementCard || 0
|
|
|
+ } else {
|
|
|
+ // 子代理商
|
|
|
+ parent.children.push({
|
|
|
+ id: `leaf_${item.leafAgentId}`,
|
|
|
+ agentId: item.agentId,
|
|
|
+ agentName: item.agentName,
|
|
|
+ leafAgentId: item.leafAgentId,
|
|
|
+ leafAgentName: item.leafAgentName,
|
|
|
+ openCard: item.openCard || 0,
|
|
|
+ closeCard: item.closeCard || 0,
|
|
|
+ payCard: item.payCard || 0,
|
|
|
+ settlementCard: item.settlementCard || 0
|
|
|
+ })
|
|
|
+ // 累加到父级
|
|
|
+ parent.openCard += item.openCard || 0
|
|
|
+ parent.closeCard += item.closeCard || 0
|
|
|
+ parent.payCard += item.payCard || 0
|
|
|
+ parent.settlementCard += item.settlementCard || 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 过滤掉没有子项的父级(如果父级自己也没有数据)
|
|
|
+ statisticsList.value = result.filter(item =>
|
|
|
+ item.children.length > 0 || item.openCard > 0 || item.closeCard > 0 || item.settlementCard > 0
|
|
|
+ )
|
|
|
+ }).finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+function handleQuery() {
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+function resetQuery() {
|
|
|
+ proxy.resetForm("queryRef")
|
|
|
+ openTimeRange.value = []
|
|
|
+ queryParams.deptId = undefined
|
|
|
+ queryParams.agentId = undefined
|
|
|
+ handleQuery()
|
|
|
+}
|
|
|
+
|
|
|
+/** 展开/折叠操作 */
|
|
|
+function toggleExpandAll() {
|
|
|
+ refreshTable.value = false
|
|
|
+ isExpandAll.value = !isExpandAll.value
|
|
|
+ nextTick(() => {
|
|
|
+ refreshTable.value = true
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 设置表格行样式 */
|
|
|
+function getRowStyle({ row }) {
|
|
|
+ // 如果是子代理商(有 children 或者是子节点)
|
|
|
+ if (row.children && row.children.length > 0) {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ // 子节点使用浅蓝色背景
|
|
|
+ if (row.leafAgentId && row.leafAgentId !== row.agentId) {
|
|
|
+ return {
|
|
|
+ backgroundColor: '#C4E7F8'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {}
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getList()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.app-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保 splitpanes 的 pane 可以滚动 */
|
|
|
+:deep(.splitpanes__pane) {
|
|
|
+ overflow: auto !important;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保 el-col 内容正常显示,不被遮挡 */
|
|
|
+:deep(.splitpanes__pane .el-col) {
|
|
|
+ padding: 0;
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|