页面修改

src/pages/sale/makeupRate.vue

@@ -43,35 +43,41 @@
     right: 0;
     background: #fff;
   }
-  .makeTable th:nth-last-child(2){
+
+  .makeTable th:nth-last-child(2) {
     /* td第一个粘性定位 */
     position: sticky;
     right: 150px;
   }
-  .makeTable td:nth-last-child(2){
+
+  .makeTable td:nth-last-child(2) {
     /* td第一个粘性定位 */
     position: sticky;
     right: 150px;
     background: #fff;
   }
+
   .makeOutDiv {
     position: relative;
     width: 100%;
     overflow-y: auto;
   }
-  .makeTable th:nth-last-child(3){
+
+  .makeTable th:nth-last-child(3) {
     /* td第一个粘性定位 */
     position: sticky;
     right: 300px;
   }
-  .makeTable td:nth-last-child(3){
+
+  .makeTable td:nth-last-child(3) {
     /* td第一个粘性定位 */
     position: sticky;
     right: 300px;
     background: #fff;
-    border-left:1px solid #d1d1d1;
-    border-right:1px solid #d1d1d1;
+    border-left: 1px solid #d1d1d1;
+    border-right: 1px solid #d1d1d1;
   }
+
   .makeOutDiv::-webkit-scrollbar {
     width: 3px;
     height: 8px;
@@ -96,7 +102,8 @@
     background: transparent !important;
     border: 0 !important;
   }
-  .Sysuser_Date .el-range-editor .el-range-input{
+
+  .Sysuser_Date .el-range-editor .el-range-input {
     background: transparent !important;
   }
 </style>
@@ -107,9 +114,9 @@
         <div class="col-4 Sysuser_Date">
           <q-field filled>
              <template v-slot:control>
-              <el-date-picker v-model="dateList" type="daterange" style="width:100%" :picker-options="pickerOptions0" align="right"
-                value-format="yyyy-MM-dd" @change="getData" unlink-panels range-separator="至" start-placeholder="开始日期"
-                end-placeholder="结束日期">
+              <el-date-picker v-model="dateList" type="daterange" style="width:100%" :picker-options="pickerOptions0"
+                align="right" value-format="yyyy-MM-dd" @change="getData" unlink-panels range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期">
               </el-date-picker>
             </template>
           </q-field>
@@ -128,7 +135,7 @@
       </div>
     </div>
     <div class="makeOutDiv">
-      <table class="makeTable" style="border-collapse:collapse;">
+      <!-- <table class="makeTable" style="border-collapse:collapse;">
         <tr>
           <th>员工</th>
           <template v-for="(item,index) in dataList[0].subList">
@@ -153,7 +160,13 @@
             <td>{{getStatical(sItem)}}%</td>
           </template>
         </tr>
-      </table>
+      </table> -->
+      <el-table :data="tableData" style="width: 100%" :fit='true' :default-sort="{prop: 'date', order: 'descending'}">
+        <el-table-column :prop="index" :label="item" sortable show-overflow-tooltip v-for="(item, index) in tableHeader"
+          :key="index">
+
+        </el-table-column>
+      </el-table>
     </div>
   </div>
 </template>
@@ -175,6 +188,12 @@
         dateList: [],
         dataList: [],
         EmployeeList: [],
+        tableHeader: {
+          EmployeeName: "员工",
+        },
+        tableData: [{
+
+        }],
         pickerOptions0: {
           disabledDate(time) {
             return time.getTime() > Date.now() - 8.64e6
@@ -208,15 +227,15 @@
       var month = now.getMonth() + 1;
       var day = now.getDate();
       if (month >= 1 && month <= 9) {
-          month = "0" + month;
+        month = "0" + month;
       }
       if (day >= 1 && day <= 9) {
-          day = "0" + day;
+        day = "0" + day;
       }
       this.msg.startTime = year + strLink + month + strLink + '01';
-      this.msg.endTime = year + strLink + month + strLink + day; 
+      this.msg.endTime = year + strLink + month + strLink + day;
       this.dateList.push(year + strLink + month + strLink + '01');
-      this.dateList.push(year + strLink + month + strLink + day); 
+      this.dateList.push(year + strLink + month + strLink + day);
       this.getEmployeeList();
       this.getData();
     },
@@ -230,9 +249,22 @@
           this.msg.startTime = "";
           this.msg.endTime = "";
         }
+        this.tableData=[];
         MarketChannelStudentStatic(this.msg).then(res => {
-          console.log(res, '数据');
           if (res.Code == 1) {
+            var tempArray = res.Data;
+            if (tempArray && tempArray.length > 0) {
+              tempArray.forEach((item, index) => {
+                if (item.subList && item.subList.length > 0) {
+                  item.subList.forEach((subItem, subIndex) => {
+                    this.tableHeader['ClueCount' + subIndex] = subItem.ChannelName + "回单";
+                    this.tableHeader['VisitCount' + subIndex] = subItem.ChannelName + "到访";
+                    this.tableHeader['Rates' + subIndex] = subItem.ChannelName + "转化率";
+                  })
+                }
+                this.tableData.push(item.dicList)
+              });
+            }
             this.dataList = res.Data;
           }
         });
@@ -258,5 +290,4 @@
       },
     }
   }
-
-</script>
+</script>
\ No newline at end of file