【新增】供应链管理-销售出库单详情

src/views/supply/sales/components/sales_detail.vue

@@ -45,7 +45,60 @@
     </div>
     <el-divider></el-divider>
     <div class="diy-table-2">
-      
+      <div class="head">
+        <el-row :gutter="20">
+          <el-col :span="2">序号</el-col>
+          <el-col :span="4">产品编号</el-col>
+          <el-col :span="8">产品名称</el-col>
+          <el-col :span="2">规格型号</el-col>
+          <el-col :span="2">内机编码</el-col>
+          <el-col :span="2">外机编码</el-col>
+          <el-col :span="2">单位</el-col>
+          <el-col :span="2">数量</el-col>
+        </el-row>
+      </div>
+      <div class="body">
+        <el-row v-for="(item, index) in goodsList" :key="item.goodsId" :gutter="20">
+          <el-col :span="2">{{ index + 1 }}</el-col>
+          <el-col :span="4">{{ item.goodsId || 0 }}</el-col>
+          <el-col :span="8">{{ item.goodsName || 0 }}</el-col>
+          <el-col :span="2">{{ item.salesUnit || 0 }}</el-col>
+          <el-col :span="2">{{ item.price || 0 }}</el-col>
+          <el-col :span="2">{{ item.saleQty || 0 }}</el-col>
+          <el-col :span="2">{{ item.saleValue || 0 }}</el-col>
+          <el-col :span="2">{{ item.saleValue || 0 }}</el-col>
+        </el-row>
+      </div>
+      <div class="foot">
+        <el-row :gutter="20">
+          <el-col :span="24">合计</el-col>
+        </el-row>
+      </div>
+    </div>
+
+    <div class="main-title">
+      <div class="title">审批记录</div>
+    </div>
+    <el-divider></el-divider>
+    <div class="diy-table-1">
+      <el-row :gutter="0">
+        <el-col :xs="12" :sm="8" :lg="8" class="item">
+          <div class="label">审批人</div>
+          <div class="value">2022123233435342</div>
+        </el-col>
+        <el-col :xs="12" :sm="8" :lg="8" class="item">
+          <div class="label">审批结果</div>
+          <div class="value">2022123233435342</div>
+        </el-col>
+        <el-col :xs="12" :sm="8" :lg="8" class="item">
+          <div class="label">审批时间</div>
+          <div class="value">2022123233435342</div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="24" class="item">
+          <div class="label">审批说明</div>
+          <div class="value">2022123233435342</div>
+        </el-col>
+      </el-row>
     </div>
 
 
@@ -61,7 +114,9 @@ export default {
   props: ['listItem'],
   data() {
     return {
-
+      goodsList: [{
+        goodsId: 1,
+      }]
     }
   },
 
@@ -111,6 +166,7 @@ export default {
         background: #F5F7FA;
         border-right: 1px solid #EBEEF5;
         font-size: 14px;
+        color: #333333;
       }
       .value {
         flex: 1;
@@ -121,6 +177,40 @@ export default {
         box-sizing: border-box;
         border-right: 1px solid #EBEEF5;
         font-size: 14px;
+        color: #333333;
+      }
+    }
+  }
+  .diy-table-2 {
+    font-size: 14px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    .el-row {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+      border: 1px solid #EBEEF5;
+      border-right: none;
+    }
+    .el-col {
+      padding-top: 14px;
+      padding-bottom: 14px;
+      border-right: 1px solid #EBEEF5;
+    }
+    .head {
+      color: #909399;
+      font-weight: bold;
+      background: #F5F7FA;
+    }
+    .body {
+      color: #333333;
+      .el-row {
+        border-top: none;
+      }
+    }
+    .foot {
+      color: #333333;
+      .el-row {
+        border-top: none;
       }
     }
   }