16.7 调试表格数据

src/api/modules/statisticApi.js

@@ -470,6 +470,14 @@ const dataMainInterface = {
   getRaiServeRemarkAdd:params => {
 	return http.post('/cygx/rai_serve/remark/add',params);
   },
+  /**
+  * 权益数据汇总列表接口
+  * @returns  
+  */
+  getRaiDataSummary:params => {
+	return http.get('/statistic_report/rai_data_summary/list',params);
+  },
+  
 }
 
 export {

src/routes/modules/statisticRoutes.js

@@ -133,6 +133,12 @@ export default [
 				name: '权益服务统计',
 				hidden: false
 			},
+			{
+				path: 'equityDataSummary',
+				component: () => import('@/views/dataReport_manage/equityDataSummary.vue'),
+				name: '权益数据汇总',
+				hidden: false
+			},
 		]
 	},
 ]

src/views/dataReport_manage/components/DataSummary.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <el-dialog v-dialogDrag :title="title" :visible.sync="visible" :close-on-click-modal="false" :modal-append-to-body="false" width="60%" @close="closeDialog">
+      <el-table :data="tableData" border style="margin:20px 0">
+        <el-table-column v-for="(col, index) in columns" :key="index" :prop="col.prop" :label="col.label" align="center" />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    columns: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    closeDialog() {},
+  },
+};
+</script>
+<style scoped lang=""></style>

src/views/dataReport_manage/configdata.js

@@ -231,7 +231,7 @@ export const RaiStockTableColums = [
   {
     label: "合同期限",
     dataType: "新签客户,续约客户",
-    key: "StartDate"
+    key: "StartDate",
   },
   {
     label: "合同金额",
@@ -450,27 +450,148 @@ export const equityTableColums = (type) => {
           sort: true,
         },
       ]
-    : type === "新增试用客户" 
-    ? [ {
-      label: "客户名称",
-      key: "CompanyName",
-      widthsty: "300px",
-      textsty: "color:#409EFF;cursor:pointer;",
-      link: true,
-    },
-    {
-      label: "所属销售",
-      key: "SellerName",
-      widthsty: "150px",
-    },
-    {
-      label: "新增类型",
-      key: "Operation",
-      widthsty: "150px",
-    },
-    {
-      label: "新增时间",
-      key: "CreateTime",
-    }]
-    :[];
+    : type === "新增试用客户"
+    ? [
+        {
+          label: "客户名称",
+          key: "CompanyName",
+          widthsty: "300px",
+          textsty: "color:#409EFF;cursor:pointer;",
+          link: true,
+        },
+        {
+          label: "所属销售",
+          key: "SellerName",
+          widthsty: "150px",
+        },
+        {
+          label: "新增类型",
+          key: "Operation",
+          widthsty: "150px",
+        },
+        {
+          label: "新增时间",
+          key: "CreateTime",
+        },
+      ]
+    : [];
+};
+
+export const tableConfigs = {
+  AddTrialCount: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "新增类型", prop: "Operation" },
+    { label: "新增时间", prop: "CreateTime" },
+  ],
+  // 新签合同
+  NewContractData: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同期限", prop: "StartDate" },
+    { label: "合同金额", prop: "Money" },
+    { label: "签约套餐", prop: "PermissionName" },
+    { label: "操作", prop: "actions" },
+  ],
+  // 到期合同
+  ExpiredContractData: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同期限", prop: "StartDate" },
+    { label: "合同金额", prop: "Money" },
+    { label: "签约套餐", prop: "PermissionName" },
+    { label: "操作", prop: "actions" },
+  ],
+  // 续约合同
+  RenewedContractData: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同期限", prop: "StartDate" },
+    { label: "合同金额", prop: "Money" },
+    { label: "签约套餐", prop: "PermissionName" },
+    { label: "操作", prop: "actions" },
+  ],
+  // 续约率
+  RenewalRateData: [
+    { label: "", prop: "type" },
+    { label: "续约金额(续约客户数)", prop: "renewAmount" },
+    { label: "到期金额（到期客户数）", prop: "expireAmount" },
+    { label: "续约/到期", prop: "renewRate" },
+  ],
+  //确认不续约合同
+  ConfirmedNoRenewalContractData: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同期限", prop: "StartDate" },
+    { label: "合同金额", prop: "Money" },
+    { label: "签约套餐", prop: "PermissionName" },
+    { label: "操作", prop: "actions" },
+  ],
+  //确认不续约率
+  ConfirmNonRenewalRateData: [
+    { label: "", prop: "type" },
+    { label: "不续约金额（不续约客户数）", prop: "notRenewAmount" },
+    { label: "到期金额（到期客户数）", prop: "expireAmount" },
+    { label: "不续约/到期", prop: "notRenewRate" },
+  ],
+  // 签约客户数量
+  SignedClientCount: [
+    { label: "新签客户数量", prop: "newCustomerCount" },
+    { label: "新签合同数量", prop: "newContractCount" },
+    { label: "续约客户数量", prop: "renewCustomerCount" },
+    { label: "续约合同数量", prop: "renewContractCount" },
+  ],
+  // 客单价
+  AverageRevenueCount: [
+    { label: "签约总金额", prop: "totalSignedAmount" },
+    { label: "签约客户数", prop: "totalCustomers" },
+  ],
+  // 开票金额
+  InvoiceAmountCount: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同编号", prop: "contractNumber" },
+    { label: "开票金额", prop: "invoiceAmount" },
+    { label: "开票日期", prop: "invoiceDate" },
+  ],
+  // 新客开票
+  NewCustomerInvoicingCount: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同编号", prop: "contractNumber" },
+    { label: "开票金额", prop: "invoiceAmount" },
+    { label: "开票日期", prop: "invoiceDate" },
+  ],
+  // 到款金额
+  PaymentReceivedCount: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同编号", prop: "contractNumber" },
+    { label: "到款金额", prop: "paymentAmount" },
+    { label: "到款日期", prop: "paymentDate" },
+  ],
+  // 新客到款
+  NewCustomerPaymentsReceivedCount: [
+    { label: "客户名称", prop: "CompanyName" },
+    { label: "所属销售", prop: "SellerName" },
+    { label: "合同编号", prop: "contractNumber" },
+    { label: "到款金额", prop: "paymentAmount" },
+    { label: "到款日期", prop: "paymentDate" },
+  ],
+};
+export const tableDlgTitle = {
+  AddTrialCount: "新增试用", //新增试用
+  NewContractData: "新签合同", //新签合同（金额/数量)
+  ExpiredContractData: "到期合同", //到期合同（金额/数量)
+  RenewedContractData: "续约合同", //续约合同（金额/数量)
+  RenewalRateData: "续约率", //续约率（金额/数量)
+  ConfirmedNoRenewalContractData: "确认不续约合同", //确认不续约合同（金额/数量)
+  SignedClientCount: "签约客户数量", //签约客户数量
+  AverageRevenueCount: "客单价", //客单价
+  InvoiceAmountCount: "开票金额", //开票金额
+  PaymentReceivedCount: "到款金额", //到款金额
+  UnpaidRatioCount: "未到款比例", //未到款比例
+  NewCustomerInvoicingCount: "新客开票", //新客开票
+  NewCustomerPaymentsReceivedCount: "新客到款", //新客到款
+  ConfirmNonRenewalRateData: "确认不续约率",
 };

src/views/dataReport_manage/equityDataSummary.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="dataReport-container">
+    <div class="dataReport-top">
+      <button :class="['button-sty', { act: month === item.label }]" v-for="item in monthLabel" @click="toggleMonth(item.label)" :key="item.label">
+        {{ item.label }}
+      </button>
+      <date-picker v-model="timeRange" type="year" range value-type="format" placeholder="自定义时间段" :editable="false" @change="dateChange" :disabled-date="disabledDate" @pick="onPick" clearable />
+    </div>
+    <div class="dataReport-main">
+      <!-- 筛选项 -->
+      <el-checkbox-group v-model="selectedFilters">
+        <el-checkbox v-for="(fields, key) in filterOptions" :key="key" :label="key">
+          {{ key }}
+        </el-checkbox>
+      </el-checkbox-group>
+
+      <!-- 数据表格 -->
+      <el-table :data="flattenedData" border style="width: 100%; margin-top: 20px" :span-method="mergeRows">
+        <!-- DataType 作为合并行 -->
+        <el-table-column prop="DataType" label="" align="center" width="120px" />
+
+        <!-- 销售姓名 -->
+        <el-table-column prop="SellerName" label="销售姓名" align="center" width="150px" />
+
+        <el-table-column v-for="col in dynamicColumns" :key="col.key" :prop="col.key" align="center">
+          <template slot="header" slot-scope="{ row }">
+            <el-tooltip :content="col.tooltip" placement="top">
+              <div style="display: inline-flex; align-items: center">
+                <span style="margin-right: 4px">{{ col.label }}</span>
+                <i class="el-icon-info" style="color: #333333" />
+              </div>
+            </el-tooltip>
+          </template>
+          <template slot-scope="{ row }">
+            <span class="editsty" @click="handlerRowClick(row, col.key)">{{ row[col.key] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <DataSummary :visible="showDlg" :title="titleDlg" :columns="columnsDlg" />
+  </div>
+</template>
+
+<script>
+import { dataMainInterface } from "@/api/api.js";
+import DataSummary from "./components/DataSummary.vue";
+import { tableConfigs, tableDlgTitle } from "./configdata.js";
+export default {
+  components: { DataSummary },
+  data() {
+    const currentYear = new Date().getFullYear() + "";
+    return {
+      timeRange: [currentYear, currentYear],
+      timePick: "",
+      month: "季度",
+      monthLabel: [
+        {
+          label: "季度",
+        },
+        {
+          label: "半年度",
+        },
+        {
+          label: "年度",
+        },
+      ],
+      // 筛选项映射的表头字段（新增后端 key）
+      filterOptions: {
+        新签: [
+          { label: "新增试用", key: "AddTrialCount", tooltip: "新增试用客户的时间，包含在所选时间段内的客户数（包括新建和领取流失）" },
+          { label: "新签合同（金额/数量）", key: "NewContractData", tooltip: "起始时间在所选时间段内的新签合同（第一份合同起始时间一年内的再次签约仍属于新签合同）" },
+        ],
+        续约: [
+          { label: "到期合同（金额/数量）", key: "ExpiredContractData", tooltip: "结束时间在所选时间段内的合用" },
+          { label: "续约合同（金额/数量）", key: "RenewedContractData", tooltip: "起始时间在所选时间段内的续约合同（第一份合同起始时间一年以后的再次签约均属于续约合同）" },
+          { label: "续约率（金额/数量）", key: "RenewalRateData", tooltip: "续约合同/到期合同" },
+          { label: "确认不续约合同（金额/数量）", key: "ConfirmedNoRenewalContractData", tooltip: "已确认不续约的到期合同" },
+          { label: "确认不续约率（金额/数量）", key: "ConfirmNonRenewalRateData", tooltip: "确认不续约合同（剔除非业务不续约）/到期合同" },
+          { label: "签约客户数量", key: "SignedClientCount", tooltip: "新签和续约的客户数" },
+          { label: "客单价", key: "AverageRevenueCount", tooltip: "新签合同和续约合同的总金额/签约客户数量" },
+        ],
+        收入: [
+          { label: "开票金额", key: "InvoiceAmountCount", tooltip: "财务系统中已经登记开票的金额" },
+          { label: "到款金额", key: "PaymentReceivedCount", tooltip: "财务系统中已经登记到账的金额" },
+          { label: "未到款比例", key: "UnpaidRatioCount", tooltip: "开票金额-到款金额 / 开票金额" },
+          { label: "新客开票", key: "NewCustomerInvoicingCount", tooltip: "财务系统中已经登记开票的新签合同金额" },
+          { label: "新客到款", key: "NewCustomerPaymentsReceivedCount", tooltip: "财务系统中已经登记开票的新签合同金额" },
+        ],
+      },
+      selectedFilters: ["新签", "续约", "收入"], // 用户选择的筛选项
+      // 示例数据（与后端返回的 key 对应）
+      tableData: [],
+      // 扁平化后的数据
+      flattenedData: [],
+      showDlg: false,
+      titleDlg: "",
+      columnsDlg: [],
+    };
+  },
+  methods: {
+    /* 选择时间后的处理 */
+    dateChange() {
+      this.$nextTick(() => {
+        if (this.timeRange.length) this.timePick = this.timeRange[0];
+      });
+    },
+    // 处理结束年份变化的逻辑
+    disabledDate(time) {
+      if (this.timePick) {
+        const minTime = +this.timePick;
+        const maxTime = +this.timePick + 4; // 结束年份最大为开始年份限制5年   +4
+        return this.$moment(time).format("YYYY") < minTime || this.$moment(time).format("YYYY") > maxTime;
+      }
+    },
+    // 选了时间的事件
+    onPick(date) {
+      this.timePick = this.$moment(date).format("YYYY");
+    },
+    // 获取表格数据
+    async getDataList() {
+      let params = {
+        StartYear: "2025",
+        EndYear: "2025",
+        DataType: "年度",
+      };
+      const res = await dataMainInterface.getRaiDataSummary(params);
+      this.tableData = res.Data.List;
+      this.flattenedData = this.tableData.flatMap((item) => item.DataList.map((row) => ({ ...row, DataType: item.DataType })));
+    },
+    // 处理合并行
+    mergeRows({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        // 只合并 DataType (第1列)
+        const currentType = row.DataType;
+        const prevType = rowIndex > 0 ? this.flattenedData[rowIndex - 1].DataType : null;
+
+        if (rowIndex === 0 || currentType !== prevType) {
+          // 计算 rowspan（找到相同 DataType 的总行数）
+          const rowspan = this.flattenedData.filter((item) => item.DataType === currentType).length;
+          return { rowspan, colspan: 1 };
+        } else {
+          return { rowspan: 0, colspan: 0 };
+        }
+      }
+    },
+    // 点击表格
+    handlerRowClick(row, key) {
+      console.log(row, key);
+      console.log(tableDlgTitle[key]);
+      this.showDlg = true;
+      this.titleDlg = tableDlgTitle[key];
+      this.columnsDlg = tableConfigs[key];
+    },
+  },
+  computed: {
+    // 计算动态表头
+    dynamicColumns() {
+      let columns = [];
+      this.selectedFilters.forEach((key) => {
+        if (this.filterOptions[key]) {
+          this.filterOptions[key].forEach((field) => {
+            columns.push({ label: field.label, key: field.key, tooltip: field.tooltip });
+          });
+        }
+      });
+      return columns;
+    },
+  },
+  mounted() {
+    this.getDataList();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+.dete-partition {
+  display: inline-block;
+  margin: 0 10px;
+}
+</style>