开票订单详情

jsowell-ui/src/views/order/invoice/detail.vue

@@ -1,11 +1,49 @@
 <template>
   <div class="app-container">
+    <el-card class="cardStyle" style="padding: 10px 0" >
+     <div style="display: flex;justify-content: space-between;align-items: center">
+       <div style="margin-right: 10px">当前状态为未开票，请点击按钮完成开票</div>
+       <el-button type="primary" round>未开票</el-button>
+     </div>
+    </el-card>
     <el-card class="cardStyle">
-      点击修改状态
+      <h3>申请订单明细</h3>
+      <el-table
+        :data="tableData"
+        border
+        show-summary
+        style="width: 100%">
+        <el-table-column
+          prop="id"
+          label="订单号"
+          align="center"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="amount3"
+          align="center"
+          label="电费总金额">
+        </el-table-column>
+        <el-table-column
+          prop="amount1"
+          align="center"
+          label="服务费总金额">
+        </el-table-column>
+        <el-table-column
+          prop="amount2"
+          align="center"
+          label="订单总金额">
+        </el-table-column>
+      </el-table>
       <div class="marginTop"></div>
     </el-card>
     <el-card class="cardStyle">
-      展示申请开票详情
+      <h3>开票明细</h3>
+       <el-descriptions :column="1" border>
+         <el-descriptions-item label="单位" labelStyle="width: 80px" contentStyle="width: 150px">举视</el-descriptions-item>
+         <el-descriptions-item label="税号">122</el-descriptions-item>
+         <el-descriptions-item label="地址">12111</el-descriptions-item>
+       </el-descriptions>
       <div class="marginTop"></div>
     </el-card>
   </div>
@@ -15,7 +53,32 @@ export default {
   name: "",
   data() {
     return {
-
+      tableData: [{
+        id: '12987122',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      }, {
+        id: '12987123',
+        amount1: '165',
+        amount2: '4.43',
+        amount3: 12
+      }, {
+        id: '12987124',
+        amount1: '324',
+        amount2: '1.9',
+        amount3: 9
+      }, {
+        id: '12987125',
+        amount1: '621',
+        amount2: '2.2',
+        amount3: 17
+      }, {
+        id: '12987126',
+        amount1: '539',
+        amount2: '4.1',
+        amount3: 15
+      }]
     };
   },
   created() {
@@ -23,7 +86,40 @@ export default {
     console.log("发票详情：", this.$route.params);//打印结果为{user:'david'}
   },
   methods: {
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价';
+          return;
+        }
+        const values = data.map(item => Number(item[column.property]));
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          sums[index] += ' 元';
+        } else {
+          sums[index] = 'N/A';
+        }
+      });
 
+      return sums;
+    }
   }
 };
 </script>
+<style >
+.cardStyle{
+  margin-bottom: 10px;
+}
+.marginTop{
+  margin-top: 10px;
+}
+</style>

jsowell-ui/src/views/pile/station/components/SiteInfo.vue

@@ -9,6 +9,7 @@
       :on-remove="handleRemove"
       :on-success="handleSuccess"
       :file-list="fileList"
+      style="margin: 10px 0"
     >
       <i class="el-icon-plus"></i>
     </el-upload>