'表格优化'

src/pages/order/Order.vue

@@ -1,36 +1,89 @@
 <template>
   <div class="course">
     <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <el-select v-model="orderParams.channelCode" placeholder="请选择渠道">
-          <el-option
-            v-for="item in channeList.list"
-            :key="item.code"
-            :label="item.title"
-            :value="item.code"
-          ></el-option>
-        </el-select>
-        <!-- <el-input v-model="orderParams.userId" placeholder="请输入用户ID"></el-input> -->
-        <el-date-picker
-          v-model="dateValue"
-          type="daterange"
-          align="right"
-          unlink-panels
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :picker-options="pickerOptions"
-        ></el-date-picker>
+      <div slot="header" class="clearfix topForm">
+        <div class="leftForm">
+          <div class="channelForm">
+            渠道选择：
+            <el-select v-model="orderParams.channelCode" placeholder="请选择渠道">
+              <el-option
+                v-for="item in channeList.list"
+                :key="item.code"
+                :label="item.title"
+                :value="item.code"
+              ></el-option>
+
+            </el-select>
+          </div>
+          <div class="dateForm">
+            查询日期：
+            <el-date-picker v-model="orderParams.startDate" type="date" placeholder="起"></el-date-picker>
+            <el-date-picker v-model="orderParams.endDate" type="date" placeholder="止"></el-date-picker>
+          </div>
+        </div>
         <el-button type="primary" style="float: right;" @click="search">搜索</el-button>
       </div>
-      <el-table :data="orderList" style="width: 100%" height="700">
-        <el-table-column label="日期" prop="day"></el-table-column>
-        <el-table-column label="包名" prop="packageTitle"></el-table-column>
-        <el-table-column label="包月数量" prop="monthlyPayment"></el-table-column>
-        <el-table-column label="续包月数量" prop="consecutiveMonthly"></el-table-column>
-        <el-table-column label="年包数量" prop="yearlyPayment"></el-table-column>
-        <el-table-column label="UV" prop="uv"></el-table-column>
-        <el-table-column label="VV" prop="pv"></el-table-column>
+      <el-table :data="orderList" border style="width: 100%" height="700">
+        <el-table-column label="日期" prop="day" align="left" header-align="center"></el-table-column>
+        <el-table-column label="产品包名称" prop="packageTitle" align="left" header-align="center"></el-table-column>
+        <el-table-column label="UV" prop="uv" align="right" header-align="center"></el-table-column>
+        <el-table-column label="VV" prop="pv" align="right" header-align="center"></el-table-column>
+        <el-table-column
+          label="人均播放 | =VV/UV"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="perCapitaPlay"
+        ></el-table-column>
+        <el-table-column
+          label="连续包月 | -Qm1"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="consecutiveMonthly"
+        ></el-table-column>
+        <el-table-column
+          label="月包 | -Qm2"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="monthlyPayment"
+        ></el-table-column>
+        <el-table-column
+          label="年包 | -Qy"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="yearlyPayment"
+        ></el-table-column>
+        <el-table-column
+          label="r1 | =Qm1/UV"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="consecutiveConversion"
+        ></el-table-column>
+        <el-table-column
+          label="r2 | =Qm2/UV"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="monthlyConversion"
+        ></el-table-column>
+        <el-table-column
+          label="r3 | =Qy/UV"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="yearlyConversion"
+        ></el-table-column>
+        <el-table-column
+          label="R | =(Qm1+Qm2+Qy)/UV"
+          align="right"
+          header-align="center"
+          :render-header="renderheader"
+          prop="totalConversion"
+        ></el-table-column>
       </el-table>
       <!-- <el-pagination
       v-if="orderList.totalElements"
@@ -44,7 +97,7 @@
 </template>
 <script>
 import { mapGetters } from "vuex";
-import formatDate from '../../utils/formatTime'
+import formatDate from "../../utils/formatTime";
 export default {
   data() {
     return {
@@ -81,10 +134,9 @@ export default {
       },
       dateValue: "",
       orderParams: {
-        // userId: '',
-        channelCode: ""
-        // pageNo: 1,
-        // pageSize: 10
+        channelCode: "",
+        startDate: "",
+        endDate: ""
       },
       formatTime: (row, column) => {
         let date = new Date(row.gmtCreated);
@@ -108,7 +160,7 @@ export default {
         let s =
           date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
         return Y + M + D + h + m + s;
-      },
+      }
       // orderList:[]
     };
   },
@@ -120,26 +172,39 @@ export default {
   },
   created() {
     this.$store.dispatch("getChannelList", { pageNo: "", pageSize: "" });
+    this.$store.dispatch("getOrderList", this.orderParams);
+    this.orderParams.startDate = this.getYesterDay();
+    this.orderParams.endDate = this.getYesterDay();
   },
   methods: {
     // 搜索
     search() {
-      console.log(this.dateValue[0])
-      console.log(formatDate(this.dateValue[0],2))
-      this.orderParams.startDate =
-        this.dateValue.length > 1
-          ? formatDate(this.dateValue[0],2)
-          : "";
-      this.orderParams.endDate =
-        this.dateValue.length > 1
-          ? formatDate(this.dateValue[1],2)
-          : "";
+      console.log(this.dateValue[0]);
+      console.log(formatDate(this.dateValue[0], 2));
+      this.orderParams.startDate = this.orderParams.startDate
+        ? formatDate(this.orderParams.startDate, 2)
+        : "";
+      this.orderParams.endDate = this.orderParams.endDate
+        ? formatDate(this.orderParams.endDate, 2)
+        : "";
       this.$store.dispatch("getOrderList", this.orderParams);
     },
     // 渠道下课程分页
     changePage(e) {
       this.orderParams.pageNo = e;
       this.$store.dispatch("getRelationList", this.orderParams);
+    },
+    // 表头折行
+    renderheader(h, { column, $index }) {
+      return h("span", {}, [
+        h("span", {}, column.label.split("|")[0]),
+        h("br"),
+        h("span", {}, column.label.split("|")[1])
+      ]);
+    },
+    getYesterDay(){
+      let yesterday = new Date().getTime() - 86400000;
+      return formatDate(yesterday,2)
     }
   }
 };
@@ -155,5 +220,19 @@ export default {
 .el-input {
   width: 217px;
 }
+.topForm {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.leftForm {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.dateForm {
+  margin-left: 18px;
+}
 </style>
 

src/store/modules/channel.js

@@ -6,6 +6,8 @@ const channel = {
   },
   mutations: {
     GET_CHANNEL_LIST: (state, data) => {
+      data.list.unshift({title:'全部',code:''})
+      console.log(1111111111,data)
       state.channeList = data
     }
   },
@@ -14,6 +16,7 @@ const channel = {
       return new Promise((resolve, reject) => {
         getChannelList(data).then(res => {
           if(res.code == 200) {
+            console.log(res.data)
             resolve(res.data);
             commit('GET_CHANNEL_LIST', res.data)
           }