update 开票详情页面

jsowell-ui/src/router/index.js

@@ -140,6 +140,19 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: "/invoice/index",
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        name: "invoiceDetail",
+        path: "invoice/:id",
+        component: () => import("@/views/order/invoice/detail"),
+        meta: { title: "发票详情", activeMenu: "/invoice/detail" },
+      },
+    ],
+  },
 ];
 
 // 动态路由，基于用户权限动态去加载

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="app-container">
+    <el-card class="cardStyle">
+      点击修改状态
+      <div class="marginTop"></div>
+    </el-card>
+    <el-card class="cardStyle">
+      展示申请开票详情
+      <div class="marginTop"></div>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+
+    };
+  },
+  created() {
+    const id = this.$route.params.id;
+    console.log("发票详情：", this.$route.params);//打印结果为{user:'david'}
+  },
+  methods: {
+
+  }
+};
+</script>

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

@@ -9,14 +9,14 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="申请订单编号" prop="orderCodes">
+      <!--<el-form-item label="申请订单编号" prop="orderCodes">
         <el-input
           v-model="queryParams.orderCodes"
           placeholder="请输入申请订单编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item>-->
       <el-form-item label="状态" prop="status">
         <el-select
           v-model="queryParams.status"
@@ -102,7 +102,7 @@
 
     <el-table v-loading="loading" :data="invoiceList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <!--<el-table-column label="" align="center" prop="id" />-->
+      <!--<el-table-column label="ID" align="center" prop="id" />-->
       <el-table-column label="会员id" align="center" prop="memberId" />
       <el-table-column label="申请订单编号" align="center" prop="orderCodes" />
       <el-table-column label="状态" align="center" prop="status" >
@@ -118,14 +118,21 @@
       <el-table-column label="总电费金额" align="center" prop="totalElecAmount" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
+          <!--<el-button
             v-if="scope.row.status === '0'"
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="clickInvoiceStatus(scope.row.id)"
             v-hasPermi="['order:invoice:edit']"
-          >已开发票</el-button>
+          >已开发票</el-button>-->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="clickSelectDetail(scope.row.id)"
+            v-hasPermi="['order:invoice:edit']"
+          >查看详情</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -346,7 +353,13 @@ export default {
         this.dialogVisible = false;
         this.getList();
       });
-    }
+    },
+    // 点击查看详情
+    clickSelectDetail(id) {
+      console.log("点击查看详情",id);
+      //  路径/home对应我在router目录下index.js中定义的path属性值
+      this.$router.push({name:'invoiceDetail', params:{id: id}});
+    },
   }
 };
 </script>