src/plugins/install.ts

@@ -37,7 +37,8 @@ import {
   Cascader,
   Breadcrumb,
   Divider,
-  Empty
+  Empty,
+  Slider
 } from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
@@ -88,7 +89,8 @@ const install = (app: App<Element>) => {
     .use(Cascader)
     .use(Breadcrumb)
     .use(Divider)
-    .use(Empty);
+    .use(Empty)
+    .use(Slider);
 };
 
 export default install;

src/router/async.ts

@@ -208,7 +208,7 @@ export const PutManager: RouteConfig = {
     title: "投放管理"
   },
   children: [
-    // PlanManagement,
+    PlanManagement,
     PutBook,
     PutAdAccount,
     PutDataTab,

src/views/data/performance-detail.vue

@@ -61,34 +61,19 @@
             <a-select-option value="month">按月查询</a-select-option>
             <a-select-option value="day">按日查询</a-select-option> </a-select
           >&nbsp;
-          <el-date-picker
-            v-if="search.type === 'month'"
-            v-model="search.date_arr"
-            type="monthrange"
-            range-separator="-"
-            start-placeholder="开始月份"
-            end-placeholder="结束月份"
-            @change="getList"
-            size="small"
-            style="width: 240px"
-            value-format="YYYY-MM"
-            :clearable="false"
-          >
-          </el-date-picker>
-          <el-date-picker
-            v-else
-            v-model="search.date_arr"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            @change="getList"
-            size="small"
-            style="width: 240px"
-            value-format="YYYY-MM-DD"
-            :clearable="false"
-          >
-          </el-date-picker>
+          <a-range-picker
+            :placeholder="
+              search.type === 'month'
+                ? ['开始月份', '结束月份']
+                : ['开始日期', '结束日期']
+            "
+            :format="search.type === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD'"
+            :value="value"
+            :mode="mode2"
+            @panelChange="handlePanelChange2"
+            @change="handleChange"
+            :allowClear="false"
+          />
         </div>
       </div>
       <div id="chart-container" v-if="!loading">
@@ -124,6 +109,7 @@ import { Line } from "@antv/g2plot";
 import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { Moment } from "moment";
+import moment from "moment";
 import { TableColumnOfStuffDetail } from "../_pageOptions/table_data";
 
 import { ColumnProps } from 'ant-design-vue/es/table/interface';
@@ -139,6 +125,8 @@ const PerformanceDetial = defineComponent({
   components: {},
   setup() {
     let { meta, tablePageOptions } = usePagination();
+    const value = ref<Moment[]>([]);
+    const mode2 = ref<string[]>(['month', 'month']);
     const state = reactive({
       search: {
         uid: 0,
@@ -165,7 +153,9 @@ const PerformanceDetial = defineComponent({
       ...toRefs(state),
       tablePageOptions,
       meta,
-      columns
+      columns,
+      value,
+      mode2
     };
   },
   mounted() {
@@ -179,6 +169,19 @@ const PerformanceDetial = defineComponent({
     console.log("ccc", this.$route.query.uid);
   },
   methods: {
+    handlePanelChange2(val: Moment[], mode: string[]) {
+      this.value = val;
+      if(this.search.type === 'month') {
+        this.search.date_arr = [moment(val[0]).format('YYYY-MM'),moment(val[1]).format('YYYY-MM')]
+      } else {
+        this.search.date_arr = [moment(val[0]).format('YYYY-MM-DD'),moment(val[1]).format('YYYY-MM-DD')]
+      }
+      this.getList()
+    },
+    handleChange(val: Moment[]) {
+      this.value = val;
+      this.handlePanelChange2(val,this.mode2)
+    },
     // 获取推广链接数据
     async getList(page?: any, filter?: any, sorter?: any) {
       console.log("SORT", sorter);
@@ -209,6 +212,7 @@ const PerformanceDetial = defineComponent({
       this.list = data.list;
       this.meta = data.meta;
       this.customColumns();
+      this.getSum()
     },
     // 获取绩总览
     async getSum() {
@@ -235,10 +239,14 @@ const PerformanceDetial = defineComponent({
           list[0].substring(0, 7),
           list[1].substring(0, 7),
         ];
+        this.mode2 = ['month','month']
+        this.value= [moment(this.search.date_arr[0],'YYYY-MM'),moment(this.search.date_arr[1],'YYYY-MM')]
       } else {
         this.search.value = "";
         var list = this.getDateRange(date, 30, true);
         this.search.date_arr = list;
+        this.mode2 = ['date','date']
+        this.value= [moment(this.search.date_arr[0],'YYYY-MM-DD'),moment(this.search.date_arr[1],'YYYY-MM-DD')]
       }
       this.getList();
     },
@@ -371,7 +379,7 @@ const PerformanceDetial = defineComponent({
                 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].accruing_amount }</p>
                             <p>回本率： { text[i].back_rate }</p>
                           </div>)
                 },
@@ -398,7 +406,7 @@ const PerformanceDetial = defineComponent({
                   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].accruing_amount }</p>
                               <p>回本率： { text[i].back_rate }</p>
                             </div>)
                   },
@@ -422,13 +430,13 @@ const PerformanceDetial = defineComponent({
                 },
               })
               this.columns.splice(chargeIndex+(i*2), 0,{
-                title: '用户充值(元)M+'+ [0,2,6,14,29][i],
+                title: '用户充值(元)T+'+ [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].accruing_amount }</p>
                             <p>回本率： { text[i].back_rate }</p>
                           </div>)
                 },
@@ -437,7 +445,7 @@ const PerformanceDetial = defineComponent({
           } else { // 自定义月数
             for(let i = 0; i< this.search.value; i++) {
                 this.columns.splice(withdrawalIndex+(i+1), 0,{
-                  title: '提现(元)M+'+ i,
+                  title: '提现(元)T+'+ i,
                   dataIndex: 'cash_withdrawal',
                   width: 150,
                   customRender: ({ text, record }) => {
@@ -449,13 +457,13 @@ const PerformanceDetial = defineComponent({
                   },
                 })
                 this.columns.splice(chargeIndex+(i*2), 0,{
-                  title: '用户充值(元)M+'+ i,
+                  title: '用户充值(元)T+'+ 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].accruing_amount }</p>
                               <p>回本率： { text[i].back_rate }</p>
                             </div>)
                   },

src/views/data/performance.vue

@@ -10,6 +10,7 @@
           placeholder="请输入推广员名称"
           style="width: 180px"
           @keyup.enter="getList"
+          @search="getList"
         />
         <div class="right-search">
           <span v-show="search.type === 'month'">自定义月数：</span>
@@ -37,34 +38,19 @@
             <a-select-option value="month">按月查询</a-select-option>
             <a-select-option value="day">按日查询</a-select-option> </a-select
           >&nbsp;
-          <el-date-picker
-            v-if="search.type === 'month'"
-            v-model="search.date_arr"
-            type="monthrange"
-            range-separator="-"
-            start-placeholder="开始月份"
-            end-placeholder="结束月份"
-            @change="getList"
-            size="small"
-            style="width: 240px"
-            value-format="YYYY-MM"
-            :clearable="false"
-          >
-          </el-date-picker>
-          <el-date-picker
-            v-else
-            v-model="search.date_arr"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            @change="getList"
-            size="small"
-            style="width: 240px"
-            value-format="YYYY-MM-DD"
-            :clearable="false"
-          >
-          </el-date-picker>
+          <a-range-picker
+            :placeholder="
+              search.type === 'month'
+                ? ['开始月份', '结束月份']
+                : ['开始日期', '结束日期']
+            "
+            :format="search.type === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD'"
+            :value="value"
+            :mode="mode2"
+            @panelChange="handlePanelChange2"
+            @change="handleChange"
+            :allowClear="false"
+          />
         </div>
       </div>
       <div class="table-box">
@@ -98,6 +84,7 @@
 import usePagination from "@/hooks/usePagination";
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { Moment } from "moment";
+import moment from "moment";
 import { TableColumnOfStuffPerformance } from "../_pageOptions/table_data";
 //getPromotionList
 import { getStuffPerformance } from "@/api";
@@ -108,6 +95,8 @@ const Performance = defineComponent({
   components: {},
   setup() {
     let { meta,tablePageOptions } = usePagination();
+    const value = ref<Moment[]>([]);
+    const mode2 = ref<string[]>(['month', 'month']);
     const state = reactive({
       search: {
         uname: "", // 推广员名称
@@ -119,12 +108,13 @@ const Performance = defineComponent({
       loading: false,
       list: ref<any[]>([]),
     });
-    const columns: ColumnProps[] = []
+    const columns: ColumnProps[] = [];
     return {
       ...toRefs(state),
       tablePageOptions,
       meta,
-      columns
+      columns,
+      value,mode2
     };
   },
   mounted() {
@@ -133,6 +123,19 @@ const Performance = defineComponent({
     this.onTypeChange("month");
   },
   methods: {
+    handlePanelChange2(val: Moment[], mode: string[]) {
+      this.value = val;
+      if(this.search.type === 'month') {
+        this.search.date_arr = [moment(val[0]).format('YYYY-MM'),moment(val[1]).format('YYYY-MM')]
+      } else {
+        this.search.date_arr = [moment(val[0]).format('YYYY-MM-DD'),moment(val[1]).format('YYYY-MM-DD')]
+      }
+      this.getList()
+    },
+    handleChange(val: Moment[]) {
+      this.value = val;
+      this.handlePanelChange2(val,this.mode2)
+    },
     // columns初始化
     columnsInit() {
       this.columns = [{
@@ -214,10 +217,14 @@ const Performance = defineComponent({
           list[0].substring(0, 7),
           list[1].substring(0, 7),
         ];
+        this.mode2 = ['month','month']
+        this.value= [moment(this.search.date_arr[0],'YYYY-MM'),moment(this.search.date_arr[1],'YYYY-MM')]
       } else {
         this.search.value = "";
         var list = this.getDateRange(date, 7, true);
         this.search.date_arr = list;
+        this.mode2 = ['date','date']
+        this.value= [moment(this.search.date_arr[0],'YYYY-MM-DD'),moment(this.search.date_arr[1],'YYYY-MM-DD')]
       }
       this.getList();
     },
@@ -252,13 +259,13 @@ const Performance = defineComponent({
                 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].accruing_amount }</p>
                             <p>回本率： { text[i].back_rate }</p>
                           </div>)
                 },
               })
             }
-          } else { // 自定义月数
+          } else { // 自定义ri数
             for(let i = 0; i< this.search.value; i++) {
                 this.columns.splice(withdrawalIndex+(i+1), 0,{
                   title: '提现(元)M+'+ i,
@@ -279,7 +286,7 @@ const Performance = defineComponent({
                   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].accruing_amount }</p>
                               <p>回本率： { text[i].back_rate }</p>
                             </div>)
                   },
@@ -303,13 +310,13 @@ const Performance = defineComponent({
                 },
               })
               this.columns.splice(chargeIndex+(i*2), 0,{
-                title: '用户充值(元)M+'+ [0,2,6,14,29][i],
+                title: '用户充值(元)T+'+ [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].accruing_amount }</p>
                             <p>回本率： { text[i].back_rate }</p>
                           </div>)
                 },
@@ -318,7 +325,7 @@ const Performance = defineComponent({
           } else { // 自定义月数
             for(let i = 0; i< this.search.value; i++) {
                 this.columns.splice(withdrawalIndex+(i+1), 0,{
-                  title: '提现(元)M+'+ i,
+                  title: '提现(元)T+'+ i,
                   dataIndex: 'cash_withdrawal',
                   width: 150,
                   customRender: ({ text, record }) => {
@@ -330,13 +337,13 @@ const Performance = defineComponent({
                   },
                 })
                 this.columns.splice(chargeIndex+(i*2), 0,{
-                  title: '用户充值(元)M+'+ i,
+                  title: '用户充值(元)T+'+ 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].accruing_amount }</p>
                               <p>回本率： { text[i].back_rate }</p>
                             </div>)
                   },

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

@@ -98,7 +98,7 @@
         }"
       />
     </a-modal>
-    <a-modal
+    <!-- <a-modal
       v-model:visible="previewVisible"
       width="40%"
       height="200px"
@@ -119,7 +119,7 @@
         :src="currentUrl"
         controls
       ></video>
-    </a-modal>
+    </a-modal> -->
     <preview-box
       @close="previewVisible = false"
       :type="type"
@@ -255,7 +255,10 @@ const CommonTable = defineComponent({
       console.log("IDS", this.currentId, this.advertiser);
       try {
         await pushMaterial({
-          material_id: this.currentId == 0 ? this.selectedRowKeys.join(',') : this.currentId,
+          material_id:
+            this.currentId == 0
+              ? this.selectedRowKeys.join(",")
+              : this.currentId,
           advertiser_id: this.advertiser[1],
         });
         this.pushVisible = false;

src/views/material/component/preview.vue

@@ -19,12 +19,7 @@
           v-show="playType === 'picture'"
           :style="{ transform: 'scale(' + multiples + ')' }"
         />
-        <video
-          v-show="playType === 'video'"
-          style="max-width: 100%; max-height: 100%"
-          :src="playUrl"
-          controls
-        ></video>
+        <video v-show="playType === 'video'" :src="playUrl" controls></video>
       </div>
     </div>
   </div>
@@ -130,6 +125,10 @@ export default PreviewBox;
       max-height: 100%;
       transition: 0.3s all;
     }
+    video {
+      max-width: 100%;
+      max-height: 100%;
+    }
   }
 }
 </style>