RING:绩效未完成

src/views/_pageOptions/table_data.ts

@@ -1,10 +1,24 @@
+// interface colunm {
+//   title: string;
+//   dataIndex: string;
+//   width?: number;
+//   slots?: any;
+//   sorter?: any;
+//   children?: Array<colunm>;
+//   ellipsis?: boolean;
+//   sortDirections?: (string | false)[];
+//   fixed?: string;
+//   customRender?: any;
+// }
+import { ColumnProps } from 'ant-design-vue/es/table/interface';
+
 // 员工绩效列表
-export const TableColumnOfStuffPerformance = [
+export const TableColumnOfStuffPerformance: ColumnProps[] = [
   {
     title: '推广员',
     dataIndex: 'uname',
     fixed: 'left',
-    width: 150
+    width: 150,
   },
   {
     title: '成本合计(元)',

src/views/data/performance-detail.vue

@@ -16,22 +16,22 @@
         <h3>绩效总览</h3>
         <div class="detail-data-item">
           <p>成本合计（元）</p>
-          <p>{{ sum.cost_amount }}</p>
+          <p style="color: black">{{ sum.cost_amount }}</p>
         </div>
         <a-divider type="vertical" />
         <div class="detail-data-item">
           <p>提现合计（元）</p>
-          <p>{{ sum.cash_withdrawal_amount }}</p>
+          <p style="color: black">{{ sum.cash_withdrawal_amount }}</p>
         </div>
         <a-divider type="vertical" />
         <div class="detail-data-item">
           <p>回本（元）</p>
-          <p>{{ sum.back_amount }}</p>
+          <p style="color: black">{{ sum.back_amount }}</p>
         </div>
         <a-divider type="vertical" />
         <div class="detail-data-item">
           <p>用户充值（元）</p>
-          <p>{{ sum.user_charge_amount_sum }}</p>
+          <p style="color: black">{{ sum.user_charge_amount_sum }}</p>
         </div>
       </div>
       <div class="search-box" style="border: none">
@@ -182,14 +182,14 @@ import { message } from "ant-design-vue";
 const PerformanceDetial = defineComponent({
   components: {},
   setup() {
-    let { tablePageOptions } = usePagination();
+    let { meta, tablePageOptions } = usePagination();
     const state = reactive({
       search: {
         uid: 0,
         uname: "", // 推广员名称
-        type: "month", // 时间类型 day/month
+        type: "day", // 时间类型 day/month
         model: "natural", // 计算方式 自然日：natural/ 顺延24小时:precise
-        value: ref<any[number | string]>(3), // 自定义月数、天数
+        value: ref<any[number | string]>(""), // 自定义月数、天数
         date_arr: ref<any[]>([]),
       },
       loading: false,
@@ -206,6 +206,7 @@ const PerformanceDetial = defineComponent({
     return {
       ...toRefs(state),
       tablePageOptions,
+      meta,
     };
   },
   mounted() {
@@ -213,7 +214,7 @@ const PerformanceDetial = defineComponent({
     this.uname = String(this.$route.query.uname);
     // this.getList({ current: 1 });
     this.getSum();
-    this.onTypeChange("month");
+    this.onTypeChange("day");
 
     console.log("ccc", this.$route.query.uid);
   },
@@ -241,6 +242,7 @@ const PerformanceDetial = defineComponent({
         this.renderChart(chartData.data);
       });
       this.list = data.list;
+      this.meta = data.meta;
     },
     // 获取绩总览
     async getSum() {
@@ -257,7 +259,7 @@ const PerformanceDetial = defineComponent({
     },
     // 月、日查询类型改变
     onTypeChange(val: string) {
-      var date = new Date();
+      var date = new Date((new Date).getTime()-24*60*60*1000);
       console.log(val);
       if (val === "month") {
         this.search.value = 3;
@@ -269,7 +271,7 @@ const PerformanceDetial = defineComponent({
         ];
       } else {
         this.search.value = "";
-        var list = this.getDateRange(date, 7, true);
+        var list = this.getDateRange(date, 30, true);
         this.search.date_arr = list;
       }
       this.getList();
@@ -295,7 +297,7 @@ const PerformanceDetial = defineComponent({
         animation: {
           appear: {
             animation: "path-in",
-            duration: 2000,
+            duration: 1000,
           },
         },
       });

src/views/data/performance.vue

@@ -20,6 +20,9 @@
             style="width: 100px"
             type="number"
             :min="0"
+            :max="30"
+            :precision="0"
+            :onkeyup="(search.value = String(search.value).replace(/\D/g, ''))"
             @keyup.enter="getList"
           /> 
           <a-select
@@ -69,7 +72,7 @@
         </a-radio-group>
         <a-table
           bordered
-          :scroll="{ x: 1500 }"
+          :scroll="{ x: 1700 }"
           :data-source="list"
           :columns="columns"
           @change="getList"
@@ -139,7 +142,7 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="tsx">
 import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { Moment } from "moment";
@@ -147,10 +150,12 @@ import { TableColumnOfStuffPerformance } from "../_pageOptions/table_data";
 //getPromotionList
 import { getStuffPerformance } from "@/api";
 import { message } from "ant-design-vue";
+import { ColumnProps } from 'ant-design-vue/es/table/interface';
+
 const Performance = defineComponent({
   components: {},
   setup() {
-    let { tablePageOptions } = usePagination();
+    let { meta,tablePageOptions } = usePagination();
     const state = reactive({
       search: {
         uname: "", // 推广员名称
@@ -161,21 +166,69 @@ const Performance = defineComponent({
       },
       loading: false,
       list: ref<any[]>([]),
-      columns: TableColumnOfStuffPerformance,
     });
-
+    const columns: ColumnProps[] = []
     return {
       ...toRefs(state),
       tablePageOptions,
+      meta,
+      columns
     };
   },
   mounted() {
+    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初始化
+    columnsInit() {
+      this.columns = [{
+        title: '推广员',
+        dataIndex: 'uname',
+        fixed: 'left',
+        width: 150,
+      },
+      {
+        title: '成本合计(元)',
+        dataIndex: 'cost_amount',
+      },
+      {
+        title: '回本(元)',
+        dataIndex: 'back_amount',
+        sorter: (a: any, b: any) => a.back_amount - b.back_amount,
+      },
+      {
+        title: '提现合计(元)',
+        dataIndex: 'cash_withdrawal_amount',
+      },
+      //
+      {
+        title: '用户充值(元)',
+        dataIndex: 'user_charge_amount_sum',
+      },
+      //
+      {
+        title: '操作',
+        dataIndex: 'operation',
+        slots: { customRender: 'operation' },
+        fixed: 'right',
+      }]
+    },
     // 获取推广链接数据
     async getList(page?: any, filters?: any, sorter?: any) {
+      if(this.search.value > 30) {
+        message.warning('不能超过30')
+        this.search.value = 30
+      }
       console.log("SORT", page, filters, sorter);
       this.loading = true;
       let param: any = {
@@ -191,17 +244,13 @@ const Performance = defineComponent({
       });
       console.log("请求结果", data);
       this.list = data.list;
+      this.meta = data.meta;
+      this.customColumns();
       this.loading = false;
-      // let { data } = await getPromotionList({
-      //   page: page ? page.current : 1,
-      //   ...this.search,
-      // });
-      // this.loading = false;
-      // this.list = data.list;
     },
     // 月、日查询类型改变
     onTypeChange(val: string) {
-      var date = new Date();
+      var date = new Date((new Date).getTime()-24*60*60*1000);
       console.log(val);
       if (val === "month") {
         this.search.value = 3;
@@ -218,6 +267,188 @@ const Performance = defineComponent({
       }
       this.getList();
     },
+    // 搜索条件修改后 处理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>)
+                  },
+                })
+            }
+          }
+      }
+    },
+    // 返回需要添加的列
     // 工具函数：获取最近日期
     getDateRange(dateNow: any, intervalDays: any, bolPastTime: any) {
       let oneDayTime = 24 * 60 * 60 * 1000;

src/views/material/component/common-table.vue

@@ -92,7 +92,7 @@
         }"
       />
     </a-modal>
-    <!-- <a-modal
+    <a-modal
       v-model:visible="previewVisible"
       width="40%"
       height="200px"
@@ -113,7 +113,7 @@
         :src="currentUrl"
         controls
       ></video>
-    </a-modal> -->
+    </a-modal>
     <preview-box
       @close="previewVisible = false"
       :type="type"
@@ -152,7 +152,7 @@ const CommonTable = defineComponent({
   components: { PreviewBox },
   props: ["materialType", "searchForm"],
   setup(props) {
-    let { tablePageOptions } = usePagination();
+    let { meta, tablePageOptions } = usePagination();
     const state = reactive({
       type: "",
       loading: false,
@@ -177,6 +177,7 @@ const CommonTable = defineComponent({
       });
       state.loading = false;
       state.list = data.list;
+      meta.value = data.meta;
     };
     // 列表选项改变
     const onSelectChange = (selectedRowKeys: any) => {