build

src/components/newResults/department.vue

@@ -51,36 +51,51 @@
           <template slot-scope="scope">
             <div style="display:flex;flex-direction: column;">
               <p style="text-align: center;">{{ unit2TenThousand(scope.row.monthinfo.monthNetSales,isTenThound)}}</p>
-              <el-table border size="mini" :data="scope.row.currentMonthPure">
-                <el-table-column align="center" label="直营/自营">
-                  <template slot-scope="scope">{{ unit2TenThousand(scope.row.zy,isTenThound) }}</template>
-                </el-table-column>
-                <el-table-column align="center" label="渠道">
-                  <template slot-scope="scope">{{unit2TenThousand(scope.row.qd,isTenThound)}}</template>
-                </el-table-column>
-              </el-table>
+              <div class="table-size">
+                <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy,isTenThound) }}</p>
+                <p>渠道: {{unit2TenThousand(scope.row.currentMonthPure[0].qd,isTenThound)}}</p>
+              </div>
             </div>
           </template>
         </el-table-column>
 
         <el-table-column label="成本" align="center" min-width="400px">
-          <el-table-column align="center" label="直营/自营">
+          <!-- <el-table-column align="center" label="直营/自营">
             <template slot-scope="scope">{{unit2TenThousand(scope.row.zy_cost,isTenThound)}}</template>
           </el-table-column>
 
           <el-table-column align="center" label="渠道">
             <template slot-scope="scope">{{unit2TenThousand(scope.row.qd_cost,isTenThound)}}</template>
-          </el-table-column>
+          </el-table-column> -->
+
+          <template slot-scope="scope">
+            <div style="display:flex;flex-direction: column;">
+              <p style="text-align: center;">{{ unit2TenThousand(Number(addition(scope.row.zy_cost,scope.row.qd_cost)).toFixed(2),isTenThound) }}</p>
+              <div class="table-size">
+                <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost,isTenThound) }}</p>
+                <p>渠道: {{unit2TenThousand(scope.row.qd_cost,isTenThound)}}</p>
+              </div>
+            </div>
+          </template>
         </el-table-column>
 
         <el-table-column align="center" label="毛利" min-width="400px">
-          <el-table-column align="center" label="直营/自营">
+          <!-- <el-table-column align="center" label="直营/自营">
             <template slot-scope="scope">{{unit2TenThousand(scope.row.zy_gross,isTenThound)}}</template>
           </el-table-column>
 
           <el-table-column align="center" label="渠道">
             <template slot-scope="scope">{{unit2TenThousand(scope.row.qd_gross,isTenThound)}}</template>
-          </el-table-column>
+          </el-table-column> -->
+          <template slot-scope="scope">
+            <div style="display:flex;flex-direction: column;">
+              <p style="text-align: center;">{{ unit2TenThousand(Number(addition(scope.row.zy_gross,scope.row.qd_gross)).toFixed(2),isTenThound) }}</p>
+              <div class="table-size">
+                <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross,isTenThound) }}</p>
+                <p>渠道: {{unit2TenThousand(scope.row.qd_gross,isTenThound)}}</p>
+              </div>
+            </div>
+          </template>
         </el-table-column>
       </el-table>
     </el-row>
@@ -128,6 +143,7 @@ export default {
   },
   watch:{ daytime:{ handler(){ this.requestData() }}},
   methods: {
+    addition,
     unit2TenThousand,
     transformTime() {
       let time = new Date();
@@ -167,7 +183,8 @@ export default {
 	    return { one: spanOneArr };
 	  },
     setCellClassName({ column }) {
-      const { label } = column; return label === "当月营业收入(净)" ? "pure__cell" : "";
+      const { label } = column; 
+      return label === "当月营业收入(净)" || label=== "成本" || label === "毛利" ? "pure__cell" : "";
     },
     async requestData() {
       this.loading = true;
@@ -241,6 +258,22 @@ export default {
     padding:0px 10px;
     margin-top:10px
   }
+
+  .table-size{
+    display: flex;
+    border-top: 1px solid #ebeef5;
+
+    p {
+      flex:1;
+      border-right: 1px solid #ebeef5;
+      padding: 5px 10px;
+      margin: 0px;
+
+      &:last-child {
+        border: none;
+      }
+    }
+  }
 }
 </style>