feat(owner-vue): 주문 상세보기 로직추가

- 지난 주문
- 주문

owner-vue/src/api/order.js

@@ -25,5 +25,8 @@ export default {
             orderStatus: orderStatus
         }
         return axios.patch(process.env.VUE_APP_OWNER_SERVICE_BASEURL + "/order-service/order/" + orderId, body);
+    },
+    getOrderDetail(orderId) {
+        return axios.get(process.env.VUE_APP_OWNER_SERVICE_BASEURL + "/order-service/api/order-detail/" + orderId);
     }
 }

owner-vue/src/components/OrderCard.vue

@@ -1,84 +1,89 @@
 <template>
-  <v-card>
-    <v-toolbar elevation="1" dense>
-      <v-toolbar-title>{{ userName }}</v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-btn outlined color="grey grey lighten-1" small
-        @click="clickDetail"
-      >
-        상세보기
-      </v-btn>
-    </v-toolbar>
-    <v-card-title v-if="itemNames.length == 1">
-      {{ itemNames[0] }}
-    </v-card-title>
-    <v-card-title v-if="itemNames.length > 1">
-      {{ itemNames[0] }} 외 {{ itemNames.length - 1 }}건
-    </v-card-title>
-    <v-card-subtitle>{{ orderStatus | getOrderStatusName }}</v-card-subtitle>
-    <v-card-text>{{ orderTime }}</v-card-text>
-    <v-card-actions>
-      <v-row v-if="orderStatus === 'PLACED'">
-        <v-col sm="6">
-          <v-btn
-              block depressed color="#006A95" class="white--text"
-              @click="accepted"
-          >
-            주문수락하기
-          </v-btn>
-        </v-col>
-        <v-col sm="6">
-          <v-btn block depressed color="#FF1400" class="white--text"
-            @click="rejected"
-          >
-            주문거절하기
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-row v-else-if="orderStatus === 'ACCEPTED'">
-        <v-col>
-          <v-btn block depressed color="#58ADA0" class="white--text"
-            @click="waiting"
-          >
-            픽업 요청하기
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-row v-else-if="orderStatus === 'REJECTED'">
-        <v-col>
-          <v-btn block disabled>
-            거절됨
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-row v-else-if="orderStatus === 'WAITING'">
-        <v-col>
-          <v-btn block depressed color="#FF5C00" class="white--text"
-                 @click="finished"
-          >
-            고객 수령완료하기
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-row v-else-if="orderStatus === 'FINISHED'">
-        <v-col>
-          <v-btn block depressed color="#F9E0AF" class="grey--text">
-            픽업 완료됨
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-card-actions>
-  </v-card>
+  <div>
+    <v-card>
+      <v-toolbar elevation="1" dense>
+        <v-toolbar-title>{{ userName }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <order-detail-dialog
+            :dialog="false"
+            :orderId="this.id"
+        ></order-detail-dialog>
+      </v-toolbar>
+      <v-card-title v-if="itemNames.length == 1">
+        {{ itemNames[0] }}
+      </v-card-title>
+      <v-card-title v-if="itemNames.length > 1">
+        {{ itemNames[0] }} 외 {{ itemNames.length - 1 }}건
+      </v-card-title>
+      <v-card-subtitle>{{ orderStatus | getOrderStatusName }}</v-card-subtitle>
+      <v-card-text>{{ orderTime }}</v-card-text>
+      <v-card-actions>
+        <v-row v-if="orderStatus === 'PLACED'">
+          <v-col sm="6">
+            <v-btn
+                block depressed color="#006A95" class="white--text"
+                @click="accepted"
+            >
+              주문수락하기
+            </v-btn>
+          </v-col>
+          <v-col sm="6">
+            <v-btn block depressed color="#FF1400" class="white--text"
+                   @click="rejected"
+            >
+              주문거절하기
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-row v-else-if="orderStatus === 'ACCEPTED'">
+          <v-col>
+            <v-btn block depressed color="#58ADA0" class="white--text"
+                   @click="waiting"
+            >
+              픽업 요청하기
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-row v-else-if="orderStatus === 'REJECTED'">
+          <v-col>
+            <v-btn block disabled>
+              거절됨
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-row v-else-if="orderStatus === 'WAITING'">
+          <v-col>
+            <v-btn block depressed color="#FF5C00" class="white--text"
+                   @click="finished"
+            >
+              고객 수령완료하기
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-row v-else-if="orderStatus === 'FINISHED'">
+          <v-col>
+            <v-btn block depressed color="#F9E0AF" class="grey--text">
+              픽업 완료됨
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </div>
 </template>
 
 <script>
 import orderApi from "../api/order";
+import OrderDetailDialog from "@/components/OrderDetailDialog";
 
 export default {
   name: "OrderCard",
+  components: {
+    "order-detail-dialog": OrderDetailDialog
+  },
   data: function() {
     return {
-
+      dialog: false
     };
   },
   props: {
@@ -128,9 +133,6 @@ export default {
         console.log(error);
       }
     },
-    clickDetail: function() {
-      alert("준비중 입니다...");
-    }
   }
 }
 </script>

owner-vue/src/components/OrderDetailDialog.vue

@@ -0,0 +1,164 @@
+<template>
+  <v-dialog
+      v-model="propDialog"
+      scrollable
+      width="1000px"
+  >
+    <template v-slot:activator="{on, attrs}">
+      <v-btn outlined color="grey grey lighten-1" small
+             @click="clickDetail"
+             v-bind="attrs"
+             v-on="on"
+      >
+        상세보기
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-toolbar>
+        <span class="text-h5">주문 상세내역</span>
+      </v-toolbar>
+      <v-card-text class="pa-12">
+        <v-row>
+          <v-col cols="12" sm="6">
+            <h3>{{orderId}}. {{orderInfo.orderStatus | getOrderStatusName }}</h3><br>
+            주문일시: {{ orderInfo.orderTime }}<br>
+            주 문 자: {{ user.name }}<br>
+            휴대번호: {{ user.phoneNumber }}<br><br><br><br>
+            <v-simple-table class="no-border-table">
+              <template v-slot:default>
+                <tbody>
+                <tr>
+                  <td><span class="orange--text"><b>합계</b></span></td>
+                  <td>{{ orderInfo.orderPrice | currency }}</td>
+                </tr>
+                <tr>
+                  <td>포인트사용</td>
+                  <td>0</td>
+                </tr>
+                <tr>
+                  <td>쿠폰 할인</td>
+                  <td>0</td>
+                </tr>
+                <tr>
+                  <td><span class="orange--text"><b>결제금액</b></span></td>
+                  <td><b>{{ orderInfo.orderPrice | currency }}</b></td>
+                </tr>
+                </tbody>
+              </template>
+            </v-simple-table>
+          </v-col>
+          <v-col cols="12" sm="6">
+            <v-simple-table class="no-border-table">
+              <template v-slot:default>
+                <thead>
+                <tr>
+                  <th class="text-left">메뉴</th>
+                  <th class="text-left">수량</th>
+                  <th class="text-left">금액</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="orderItem in orderItems" :key="orderItem.id" class="">
+                  <td>
+                    {{orderItem.name}}<br>
+                    <span class="grey--text" v-if="orderItem.options.length > 0">ㄴ {{orderItem.options}}</span>
+                  </td>
+                  <td>{{orderItem.count}}</td>
+                  <td>{{orderItem.totalPrice | currency}}</td>
+                </tr>
+                </tbody>
+              </template>
+            </v-simple-table>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+            color="grey"
+            outlined
+            bold
+            @click="propDialog = false"
+        >
+          닫기
+        </v-btn>
+        <v-spacer></v-spacer>
+      </v-card-actions>
+    </v-card>
+
+  </v-dialog>
+</template>
+
+<script>
+import orderApi from "../api/order";
+
+export default {
+  name: "OrderDetailDialog",
+  props: ["dialog", "orderId"],
+  watch: {
+    dialog: function() {
+      this.propDialog = !this.propDialog
+    }
+  },
+  data: function() {
+    return {
+      propDialog: false,
+      user: {},
+      orderInfo: {},
+      orderItems: []
+    };
+  },
+  methods: {
+    clickDetail: async function() {
+      this.user = {};
+      this.orderInfo = {};
+      this.orderItems = [];
+      const response = await orderApi.getOrderDetail(this.orderId);
+      this.render(response.data);
+    },
+    render(json) {
+      const orderDetail = json.data;
+
+      const orderUser = orderDetail.user;
+      this.user = {
+        id: orderUser.id,
+        name: orderUser.name,
+        phoneNumber: orderUser.phoneNumber
+      };
+
+      this.orderInfo = {
+        id: orderDetail.id,
+        orderTime: orderDetail.orderTime,
+        orderPrice: orderDetail.orderPrice,
+        orderStatus: orderDetail.orderStatus
+      };
+
+      const orderItems = orderDetail.orderItems;
+      orderItems.forEach(orderItem => {
+
+        let orderItemOptions = []
+        orderItem.options.forEach(option => {
+          const optionTypeName = option.optionType == "REQUIRED" ? "필수" : "기타";
+          orderItemOptions.push(option.name + "(" + optionTypeName + ")");
+        });
+
+        this.orderItems.push({
+          id: orderItem.id,
+          itemId: orderItem.itemId,
+          totalPrice: orderItem.totalPrice,
+          count: orderItem.count,
+          name: orderItem.name,
+          options: orderItemOptions.join(",")
+        });
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .no-border-table tbody tr td {
+    border-bottom: none !important;
+  }
+</style>

owner-vue/src/views/PrevOrder.vue

@@ -25,6 +25,12 @@
         hide-default-footer
         class="elevation-1"
     >
+      <template v-slot:item.detail="{ item }">
+        <order-detail-dialog
+            :dialog="false"
+            :orderId="item.orderId"
+        ></order-detail-dialog>
+      </template>
     </v-data-table>
     <div class="text-center pt-2">
       <v-pagination
@@ -40,13 +46,15 @@
 import orderApi from '../api/order.js';
 
 import DatePicker from "@/components/DatePicker";
+import OrderDetailDialog from "@/components/OrderDetailDialog";
 
 const moment = require('moment');
 
 export default {
   name: "PrevOrder",
   components: {
-    'date-picker': DatePicker
+    'date-picker': DatePicker,
+    "order-detail-dialog": OrderDetailDialog
   },
   mounted: function() {
     this.search();
@@ -81,6 +89,7 @@ export default {
         { text: '주문상품', value: 'orderItemNames' },
         { text: '결제금액', value: 'orderPrice' },
         { text: '닉네임', value: 'userName' },
+        { text: '상세보기', value: 'detail', sortable: false}
       ],
       orders: [],
     }