RING:员工绩效FIX

src/views/data/performance-detail.vue

@@ -83,7 +83,9 @@
           </el-date-picker>
         </div>
       </div>
-      <div id="chart-container" v-if="!loading"></div>
+      <div id="chart-container" v-if="!loading">
+        <a-empty v-if="!chartFlag"></a-empty>
+      </div>
       <div class="chart-loading" v-show="loading">加载中......</div>
       <div class="table-box">
         <a-radio-group
@@ -104,74 +106,20 @@
           :loading="loading"
           :pagination="tablePageOptions"
         >
-          <template #wm0="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[0].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[0].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[0].back_rate }}
-            </p>
-          </template>
-          <template #wm1="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[1].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[1].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[1].back_rate }}
-            </p>
-          </template>
-          <template #wm2="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[2].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[2].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[2].back_rate }}
-            </p>
-          </template>
-          <template #cm0="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[0].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[0].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[0].back_rate }}
-            </p>
-          </template>
-          <template #cm1="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[1].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[1].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[1].back_rate }}
-            </p>
-          </template>
-          <template #cm2="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[2].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[2].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[2].back_rate }}
-            </p>
-          </template>
-          <template #operation="{ record }">
-            <a-button type="link" @click="toDetial(record)">查看详情</a-button>
-          </template>
         </a-table>
       </div>
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="tsx">
 import { Line } from "@antv/g2plot";
 import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { Moment } from "moment";
 import { TableColumnOfStuffDetail } from "../_pageOptions/table_data";
+
+import { ColumnProps } from 'ant-design-vue/es/table/interface';
+
 //getPromotionList
 import {
   getStuffPerformance,
@@ -194,7 +142,7 @@ const PerformanceDetial = defineComponent({
       },
       loading: false,
       list: ref<any[]>([]),
-      columns: TableColumnOfStuffDetail,
+      // columns: TableColumnOfStuffDetail,
       sum: {
         back_amount: 0, // 回本
         cash_withdrawal_amount: 0, // 体现合计
@@ -202,14 +150,18 @@ const PerformanceDetial = defineComponent({
         user_charge_amount_sum: 0, // 用户充值
       },
       uname: "",
+      chartFlag: true,
     });
+    const columns: ColumnProps[] = []
     return {
       ...toRefs(state),
       tablePageOptions,
       meta,
+      columns
     };
   },
   mounted() {
+    this.columnsInit()
     this.search.uid = Number(this.$route.query.uid);
     this.uname = String(this.$route.query.uname);
     // this.getList({ current: 1 });
@@ -243,6 +195,7 @@ const PerformanceDetial = defineComponent({
       });
       this.list = data.list;
       this.meta = data.meta;
+      this.customColumns();
     },
     // 获取绩总览
     async getSum() {
@@ -279,6 +232,7 @@ const PerformanceDetial = defineComponent({
     // 渲染图表
     renderChart(data: any) {
       console.log("CHART DATA:", data);
+        this.chartFlag = data.length === 0 ? false : true
       const linePlot = new Line("chart-container", {
         data,
         xField: "date",
@@ -368,6 +322,223 @@ const PerformanceDetial = defineComponent({
     toDetial(item: any) {
       console.log("查看详情", item);
     },
+    // columns初始化
+    columnsInit() {
+      this.columns = [{
+        title: '日期',
+        dataIndex: 'date',
+        fixed: 'left',
+        width: 150,
+      },
+      {
+        title: '成本合计(元)',
+        dataIndex: 'cost_amount',
+        width: 120
+      },
+      {
+        title: '回本(元)',
+        dataIndex: 'back_amount',
+        sorter: (a: any, b: any) => a.back_amount - b.back_amount,
+        width: 120
+      },
+      {
+        title: '回本率(%)',
+        dataIndex: 'back_rate',
+        width: 120
+      },
+      {
+        title: '提现合计(元)',
+        dataIndex: 'cash_withdrawal_amount',
+        width: 150
+      },
+      //
+      {
+        title: '用户充值(元)',
+        dataIndex: 'user_charge_amount_sum',
+        width: 120
+      },]
+    },
+    // 搜索条件修改后 处理columns
+    customColumns() {
+      this.columnsInit()
+      let withdrawalIndex = 0, chargeIndex = 0;
+      this.columns.forEach((item,index)=> {
+        if(item.dataIndex === 'cash_withdrawal_amount') withdrawalIndex = index
+        if(item.dataIndex === 'user_charge_amount_sum') chargeIndex = index+2
+      })
+      // 选择按月查询 1.自然日从0加起-默认展示M+0、M+1、M+2 \ 2.24小时-从1加起-默认展示M+1、M+2
+      if(this.search.type === 'month') { //  按月查询
+        if(this.search.model === 'natural') { // 自然日
+          if(!this.search.value) {// 默认 未输入自定义月数
+            for(let i = 0; i< 3; i++) {
+              this.columns.splice(withdrawalIndex+(i+1), 0,{
+                title: '提现(元)M+'+ i,
+                dataIndex: 'cash_withdrawal',
+                width: 150,
+                customRender: ({ text, record }) => {
+                  return (<div style="color:gray;font-size:13px">
+                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                            <p>累计提现： { text[i].accruing_amount }</p>
+                            <p>回本率： { text[i].back_rate }</p>
+                          </div>)
+                },
+              })
+              this.columns.splice(chargeIndex+(i*2), 0,{
+                title: '用户充值(元)M+'+ i,
+                dataIndex: 'user_charge',
+                width: 150,
+                customRender: ({ text, record }) => {
+                  return (<div style="color:gray;font-size:13px">
+                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                            <p>累计提现： { text[i].accruing_amount }</p>
+                            <p>回本率： { text[i].back_rate }</p>
+                          </div>)
+                },
+              })
+            }
+          } else { // 自定义月数
+            for(let i = 0; i< this.search.value; i++) {
+                this.columns.splice(withdrawalIndex+(i+1), 0,{
+                  title: '提现(元)M+'+ i,
+                  dataIndex: 'cash_withdrawal',
+                  width: 150,
+                  customRender: ({ text, record }) => {
+                    return (<div style="color:gray;font-size:13px">
+                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                              <p>累计提现： { text[i].accruing_amount }</p>
+                              <p>回本率： { text[i].back_rate }</p>
+                            </div>)
+                  },
+                })
+                this.columns.splice(chargeIndex+(i*2), 0,{
+                  title: '用户充值(元)M+'+ i,
+                  dataIndex: 'user_charge',
+                  width: 150,
+                  customRender: ({ text, record }) => {
+                    return (<div style="color:gray;font-size:13px">
+                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                              <p>累计提现： { text[i].accruing_amount }</p>
+                              <p>回本率： { text[i].back_rate }</p>
+                            </div>)
+                  },
+                })
+            }
+          }
+        } else { // 24小时
+          if(!this.search.value) { // 未输入月数 默认
+            for(let i =0; i< 3; i++) {
+              this.columns.splice(withdrawalIndex+(i+1), 0,{
+                title: '提现(元)M+'+ (i+1),
+                dataIndex: 'cash_withdrawal',
+                width: 150,
+                customRender: ({ text, record }) => {
+                  return (<div style="color:gray;font-size:13px">
+                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                            <p>累计提现： { text[i].accruing_amount }</p>
+                            <p>回本率： { text[i].back_rate }</p>
+                          </div>)
+                },
+              })
+              this.columns.splice(chargeIndex+(i*2), 0,{
+                title: '用户充值(元)M+'+ (i+1),
+                dataIndex: 'user_charge',
+                width: 150,
+                customRender: ({ text, record }) => {
+                  return (<div style="color:gray;font-size:13px">
+                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                            <p>累计提现： { text[i].accruing_amount }</p>
+                            <p>回本率： { text[i].back_rate }</p>
+                          </div>)
+                },
+              })
+            }
+          } else { // 自定义月数
+            for(let i = 0; i< this.search.value; i++) {
+                this.columns.splice(withdrawalIndex+(i+1), 0,{
+                  title: '提现(元)M+'+ (i+1),
+                  dataIndex: 'cash_withdrawal',
+                  width: 150,
+                  customRender: ({ text, record }) => {
+                    return (<div style="color:gray;font-size:13px">
+                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                              <p>累计提现： { text[i].accruing_amount }</p>
+                              <p>回本率： { text[i].back_rate }</p>
+                            </div>)
+                  },
+                })
+                this.columns.splice(chargeIndex+(i*2), 0,{
+                  title: '用户充值(元)M+'+(i+1),
+                  dataIndex: 'user_charge',
+                  width: 150,
+                  customRender: ({ text, record }) => {
+                    return (<div style="color:gray;font-size:13px">
+                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                              <p>累计提现： { text[i].accruing_amount }</p>
+                              <p>回本率： { text[i].back_rate }</p>
+                            </div>)
+                  },
+                })
+            }
+          }
+        }
+      } else { // 选择按日查询 1.自然日从0加起-默认展示T+0、T+2、T+6、T+14、T+29 \ 2.24小时-从1加起-默认展示T+0、T+2、T+6、T+14、T+29
+          if(!this.search.value) {// 默认 未输入自定义月数
+            for(let i = 0; i< 5; i++) {
+              this.columns.splice(withdrawalIndex+(i+1), 0,{
+                title: '提现(元)T+'+ [0,2,6,14,29][i],
+                dataIndex: 'cash_withdrawal',
+                width: 150,
+                customRender: ({ text, record }) => {
+                  return (<div style="color:gray;font-size:13px">
+                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                            <p>累计提现： { text[i].accruing_amount }</p>
+                            <p>回本率： { text[i].back_rate }</p>
+                          </div>)
+                },
+              })
+              this.columns.splice(chargeIndex+(i*2), 0,{
+                title: '用户充值(元)M+'+ [0,2,6,14,29][i],
+                dataIndex: 'user_charge',
+                width: 150,
+                customRender: ({ text, record }) => {
+                  return (<div style="color:gray;font-size:13px">
+                            <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                            <p>累计提现： { text[i].accruing_amount }</p>
+                            <p>回本率： { text[i].back_rate }</p>
+                          </div>)
+                },
+              })
+            }
+          } else { // 自定义月数
+            for(let i = 0; i< this.search.value; i++) {
+                this.columns.splice(withdrawalIndex+(i+1), 0,{
+                  title: '提现(元)M+'+ i,
+                  dataIndex: 'cash_withdrawal',
+                  width: 150,
+                  customRender: ({ text, record }) => {
+                    return (<div style="color:gray;font-size:13px">
+                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                              <p>累计提现： { text[i].accruing_amount }</p>
+                              <p>回本率： { text[i].back_rate }</p>
+                            </div>)
+                  },
+                })
+                this.columns.splice(chargeIndex+(i*2), 0,{
+                  title: '用户充值(元)M+'+ i,
+                  dataIndex: 'user_charge',
+                  width: 150,
+                  customRender: ({ text, record }) => {
+                    return (<div style="color:gray;font-size:13px">
+                              <p style="color:black;font-size:14px">{ text[i].amount }</p>
+                              <p>累计提现： { text[i].accruing_amount }</p>
+                              <p>回本率： { text[i].back_rate }</p>
+                            </div>)
+                  },
+                })
+            }
+          }
+      }
+    },
   },
 });
 

src/views/data/performance.vue

@@ -80,60 +80,6 @@
           :loading="loading"
           :pagination="tablePageOptions"
         >
-          <template #wm0="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[0].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[0].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[0].back_rate }}
-            </p>
-          </template>
-          <template #wm1="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[1].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[1].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[1].back_rate }}
-            </p>
-          </template>
-          <template #wm2="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[2].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[2].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[2].back_rate }}
-            </p>
-          </template>
-          <template #cm0="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[0].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[0].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[0].back_rate }}
-            </p>
-          </template>
-          <template #cm1="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[1].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[1].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[1].back_rate }}
-            </p>
-          </template>
-          <template #cm2="{ record }">
-            <p class="detail-num">{{ record.cash_withdrawal[2].amount }}</p>
-            <p class="detail-num small-font">
-              累计提现： {{ record.cash_withdrawal[2].accruing_amount }}
-            </p>
-            <p class="detail-num small-font">
-              回本率： {{ record.cash_withdrawal[2].back_rate }}
-            </p>
-          </template>
           <template #operation="{ record }">
             <a-button type="link" @click="toDetial(record)">查看详情</a-button>
           </template>
@@ -179,14 +125,6 @@ const Performance = defineComponent({
     this.columnsInit()
     // this.getList({ current: 1 });
     this.onTypeChange("month");
-    this.columns.push({
-        title: 'user_charge',
-        dataIndex: 'uname',
-        customRender: ({ text, record }) => {
-          return <span>{record.uname}cc<br/><a>dd{text}</a></span>
-        },
-      },)
-      console.log('COLUMNS',this.columns)
   },
   methods: {
     // columns初始化
@@ -200,20 +138,24 @@ const Performance = defineComponent({
       {
         title: '成本合计(元)',
         dataIndex: 'cost_amount',
+        width:120
       },
       {
         title: '回本(元)',
         dataIndex: 'back_amount',
         sorter: (a: any, b: any) => a.back_amount - b.back_amount,
+        width:120
       },
       {
         title: '提现合计(元)',
         dataIndex: 'cash_withdrawal_amount',
+        width:120
       },
       //
       {
         title: '用户充值(元)',
         dataIndex: 'user_charge_amount_sum',
+        width:120
       },
       //
       {