update 开票详情页面

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

@@ -1,55 +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>
+      <div v-if="data.status === '0'" style="display: flex;justify-content: space-between;align-items: center">
+        <div style="margin-right: 10px">当前状态为未开票，请点击按钮完成开票</div>
+        <el-button type="primary" round @click="dialogVisible=true">完成开票</el-button>
+      </div>
+      <div v-if="data.status === '1'" style="display: flex;justify-content: space-between;align-items: center">
+        <div style="margin-right: 10px">当前状态为已开票，{{data.updateTime}}完成开票</div>
+      </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-item label="单位" labelStyle="width: 80px" contentStyle="width: 150px">{{ invoiceTitle.titleName }}</el-descriptions-item>
+        <el-descriptions-item label="税号">{{ invoiceTitle.taxId }}</el-descriptions-item>
+        <el-descriptions-item label="地址">{{ invoiceTitle.unitAddress }}</el-descriptions-item>
       </el-descriptions>
       <div class="marginTop"></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 :data="orderList" border show-summary style="width: 100%">
+        <el-table-column prop="orderCode" label="订单号" align="center" width="180"></el-table-column>
+        <el-table-column prop="totalElectricityAmount" align="center" label="电费总金额"></el-table-column>
+        <el-table-column prop="totalServiceAmount" align="center" label="服务费总金额"></el-table-column>
+        <el-table-column prop="totalOrderAmount" align="center" label="订单总金额"></el-table-column>
       </el-table>
       <div class="marginTop"></div>
     </el-card>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="35%"
+    >
+      点击确定，将此记录更改为已开票状态！
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="updateInvoiceStatus">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
-import {getInvoice} from "@/api/order/invoice";
+import {getInvoice, updateInvoice} from "@/api/order/invoice";
 
 export default {
   name: "",
@@ -57,34 +51,13 @@ export default {
     return {
       // 申请开票 id
       invoiceRecordId: null,
-      // 列表数据
-      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
-      }],
-
+      // 接口返回结果
+      data: null,
+      // 订单金额列表
+      orderList: [],
+      // 发票抬头
+      invoiceTitle: null,
+      dialogVisible: false,
     };
   },
   created() {
@@ -97,6 +70,22 @@ export default {
     selectInvoiceRecord() {
       getInvoice(this.invoiceRecordId).then(response => {
         console.log("查询申请开票信息详情结果", response);
+        this.data = response.data;
+        this.orderList = this.data.orderList;
+        this.invoiceTitle = this.data.invoiceTitle;
+      });
+    },
+    // 修改开票为已开票
+    updateInvoiceStatus() {
+      console.log('修改申请开票状态', this.invoiceRecordId);
+      const param = {
+        id: this.invoiceRecordId,
+        status: "1"
+      };
+      updateInvoice(param).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.dialogVisible = false;
+        this.selectInvoiceRecord();
       });
     },
     // 合计

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

@@ -338,11 +338,11 @@ export default {
         ...this.queryParams
       }, `invoice_${new Date().getTime()}.xlsx`)
     },
-    clickInvoiceStatus(id) {
-      console.log("点击更改开票状态",id);
-      this.updateInvoiceId = id
-      this.dialogVisible = true;
-    },
+    // clickInvoiceStatus(id) {
+    //   console.log("点击更改开票状态",id);
+    //   this.updateInvoiceId = id
+    //   this.dialogVisible = true;
+    // },
     /** 修改申请开票状态 */
     updateInvoiceStatus() {
       console.log('修改申请开票状态', this.updateInvoiceId);