Merge remote-tracking branch 'origin/owner-vue' into owner-vue
# Conflicts: # owner-vue/package.json # owner-vue/src/router/index.js
This commit is contained in:
hoon7566
@@ -3,15 +3,15 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --port 8080",
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"service": "node service.js"
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/js": "^6.5.95",
|
||||
"axios": "^0.26.0",
|
||||
"core-js": "^3.6.5",
|
||||
"moment": "^2.29.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0",
|
||||
"vuedraggable": "^2.24.3",
|
||||
@@ -26,8 +26,6 @@
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"font-awesome": "^4.7.0",
|
||||
"gulp": "^3.9.1",
|
||||
"sass": "~1.32.0",
|
||||
"sass-loader": "^10.0.0",
|
||||
"vue-cli-plugin-vuetify": "~2.4.2",
|
||||
|
||||
23
owner-vue/src/api/order.js
Normal file
23
owner-vue/src/api/order.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
requestPrevOrder(startDate, endDate, page) {
|
||||
const options = {
|
||||
params: {
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
page: page
|
||||
}
|
||||
}
|
||||
return axios.get("http://localhost:8001/order-service/prevOrder", options);
|
||||
},
|
||||
requestOrder(orderDate, lastOrderId) {
|
||||
const options = {
|
||||
params: {
|
||||
orderDate: orderDate,
|
||||
lastOrderId: lastOrderId
|
||||
}
|
||||
}
|
||||
return axios.get("http://localhost:8001/order-service/orderMain", options);
|
||||
}
|
||||
}
|
||||
55
owner-vue/src/components/DatePicker.vue
Normal file
55
owner-vue/src/components/DatePicker.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<v-menu
|
||||
v-model="isPop"
|
||||
:close-on-content-click="false"
|
||||
:nudge-right="40"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="value"
|
||||
:label="label"
|
||||
prepend-icon="mdi-calendar"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
v-model="value"
|
||||
@input="input">
|
||||
</v-date-picker>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const moment = require('moment');
|
||||
|
||||
export default {
|
||||
name: "DatePicker",
|
||||
props: {
|
||||
'label': String
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
isPop: false,
|
||||
value: moment().format('YYYY-MM-DD')
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.$emit('inputDate', this.value);
|
||||
},
|
||||
methods: {
|
||||
input: function() {
|
||||
this.isPop = false;
|
||||
this.$emit('inputDate', this.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
44
owner-vue/src/components/OrderCard.vue
Normal file
44
owner-vue/src/components/OrderCard.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<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>상세보기</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-title>{{ itemNames.join(", ") }}</v-card-title>
|
||||
<v-card-subtitle></v-card-subtitle>
|
||||
<v-card-text>{{ orderTime }}</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn v-if="orderStatus === 'PENDING'"
|
||||
block depressed color="primary">
|
||||
주문 대기
|
||||
</v-btn>
|
||||
<v-btn v-else-if="orderStatus === 'PLACED'"
|
||||
block depressed color="primary">
|
||||
주문 수령
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "OrderCard",
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
orderId: Number,
|
||||
userName: Number,
|
||||
itemNames: [],
|
||||
orderTime: String,
|
||||
orderStatus: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -19,6 +19,16 @@ const routes = [
|
||||
name: 'menu',
|
||||
component: () => import('./../views/Menu')
|
||||
},
|
||||
{
|
||||
path: '/prev-order',
|
||||
name: 'prev-order',
|
||||
component: () => import('./../views/PrevOrder')
|
||||
},
|
||||
{
|
||||
path: '/order',
|
||||
name: 'order',
|
||||
component: () => import('./../views/Order.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
119
owner-vue/src/views/Order.vue
Normal file
119
owner-vue/src/views/Order.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<v-subheader class="py-0 d-flex justify-space-between rounded-lg">
|
||||
<h3>주문</h3>
|
||||
<v-btn color="success" @click="search">
|
||||
검색
|
||||
</v-btn>
|
||||
</v-subheader>
|
||||
<br>
|
||||
|
||||
<v-row>
|
||||
<date-picker :label=" '주문일' " @inputDate="inputDate"></date-picker>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col v-for="card in cards" cols="4" :key="card.orderId">
|
||||
<order-card
|
||||
:order-id="card.orderId"
|
||||
:userName="card.userName"
|
||||
:itemNames="card.itemNames"
|
||||
:orderTime="card.orderTime"
|
||||
:orderStatus="card.orderStatus"
|
||||
>
|
||||
</order-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<br><br><br>
|
||||
<v-row justify="center" v-if="showButton">
|
||||
<v-btn rounded outlined color="primary"
|
||||
@click="more">더보기</v-btn>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderApi from '../api/order.js';
|
||||
|
||||
import OrderCard from '../components/OrderCard.vue'
|
||||
import DatePicker from "@/components/DatePicker";
|
||||
|
||||
export default {
|
||||
name: "Order",
|
||||
components: {
|
||||
OrderCard,
|
||||
DatePicker
|
||||
},
|
||||
mounted() {
|
||||
this.search();
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
date: '',
|
||||
cards: [],
|
||||
lastOrderId: null,
|
||||
showButton: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search: function() {
|
||||
this.cards = [];
|
||||
this.lastOrderId = null;
|
||||
OrderApi.requestOrder(this.date, this.lastOrderId)
|
||||
.then( (response) => {
|
||||
this.renderCard(response.data);
|
||||
})
|
||||
.catch( (error) => {
|
||||
console.log(error);
|
||||
})
|
||||
},
|
||||
renderCard: function (json) {
|
||||
const orders = json.data;
|
||||
const size = orders.length;
|
||||
|
||||
if (size === 0) {
|
||||
alert("검색 데이터가 없습니다.");
|
||||
this.showButton = false;
|
||||
} else {
|
||||
this.showButton = true;
|
||||
}
|
||||
|
||||
orders.forEach( (order, index) => {
|
||||
if (index === (size - 1)) {
|
||||
this.lastOrderId = order.orderId;
|
||||
}
|
||||
|
||||
let orderItemNames = []
|
||||
order.orderItemResponses.forEach( (orderItem) => {
|
||||
orderItemNames.push(orderItem.itemId);
|
||||
})
|
||||
|
||||
this.cards.push({
|
||||
orderId: order.orderId,
|
||||
userName: order.orderId,
|
||||
itemNames: orderItemNames,
|
||||
orderTime: order.orderTime,
|
||||
orderStatus: order.orderStatus
|
||||
})
|
||||
});
|
||||
},
|
||||
inputDate: function(value) {
|
||||
this.date = value;
|
||||
},
|
||||
more: function() {
|
||||
OrderApi.requestOrder(this.date, this.lastOrderId)
|
||||
.then( (response) => {
|
||||
this.renderCard(response.data);
|
||||
})
|
||||
.catch( (error) => {
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
163
owner-vue/src/views/PrevOrder.vue
Normal file
163
owner-vue/src/views/PrevOrder.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<v-subheader class="py-0 d-flex justify-space-between rounded-lg">
|
||||
<h3>지난 주문</h3>
|
||||
<v-btn color="success" v-on:click="search">
|
||||
검색
|
||||
</v-btn>
|
||||
</v-subheader>
|
||||
<br>
|
||||
|
||||
<v-row>
|
||||
<date-picker :label=" '시작일' " @inputDate="inputStartDate"></date-picker>
|
||||
<date-picker :label=" '종료일' " @inputDate="inputEndDate"></date-picker>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<div class="subtitle-1">{{startDate}} ~ {{endDate}} 내역</div>
|
||||
</v-row>
|
||||
<br>
|
||||
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="orders"
|
||||
:items-per-page="itemsPerPage"
|
||||
hide-default-footer
|
||||
class="elevation-1"
|
||||
>
|
||||
</v-data-table>
|
||||
<div class="text-center pt-2">
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="pageCount"
|
||||
:total-visible="totalVisible"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderApi from '../api/order.js';
|
||||
|
||||
import DatePicker from "@/components/DatePicker";
|
||||
|
||||
const moment = require('moment');
|
||||
|
||||
export default {
|
||||
name: "PrevOrder",
|
||||
components: {
|
||||
'date-picker': DatePicker
|
||||
},
|
||||
mounted: function() {
|
||||
orderApi.requestPrevOrder(this.startDate, this.endDate, this.page - 1)
|
||||
.then( (response) => {
|
||||
this.renderList(response.data);
|
||||
})
|
||||
.catch( (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
"page": function (newPage) {
|
||||
orderApi.requestPrevOrder(this.startDate, this.endDate, newPage - 1)
|
||||
.then( (response) => {
|
||||
this.renderList(response.data);
|
||||
})
|
||||
.catch( (error) => {
|
||||
console.log(error);
|
||||
console.log(error.response.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
// date
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
|
||||
// pagination
|
||||
page: 1,
|
||||
pageCount: 1,
|
||||
itemsPerPage: 10,
|
||||
totalVisible: 10,
|
||||
|
||||
// data table
|
||||
headers: [
|
||||
{
|
||||
text: '주문번호',
|
||||
align: 'start',
|
||||
sortable: false,
|
||||
value: 'orderId',
|
||||
},
|
||||
{ text: '주문상태', value: 'orderStatus' },
|
||||
{ text: '주문시간', value: 'orderTime' },
|
||||
{ text: '주문상품', value: 'orderItemNames' },
|
||||
{ text: '결제금액', value: 'orderPrice' },
|
||||
{ text: '닉네임', value: 'userName' },
|
||||
],
|
||||
orders: [],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
search: function() {
|
||||
if(!this.checkDate()) return;
|
||||
|
||||
orderApi.requestPrevOrder(this.startDate, this.endDate, this.page - 1)
|
||||
.then( (response) => {
|
||||
this.renderList(response.data);
|
||||
})
|
||||
.catch( (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
renderList: function(json) {
|
||||
const orders = json.data.orders;
|
||||
|
||||
this.orders = [];
|
||||
orders.forEach(order => {
|
||||
let orderItemNames = [];
|
||||
order.orderItems.forEach(orderItem => {
|
||||
orderItemNames.push(orderItem.orderItemId);
|
||||
})
|
||||
|
||||
this.orders.push({
|
||||
orderId: order.orderId,
|
||||
orderStatus: order.orderStatus,
|
||||
orderTime: order.orderTime,
|
||||
orderItemNames: orderItemNames.join(", "),
|
||||
orderPrice: order.orderPrice,
|
||||
userName: order.userName
|
||||
});
|
||||
})
|
||||
|
||||
// pagination setting
|
||||
const page = json.data.page;
|
||||
this.page = page.startPage + 1;
|
||||
this.pageCount = page.totalPage;
|
||||
},
|
||||
checkDate: function() {
|
||||
if (!this.startDate || !this.endDate) {
|
||||
alert("시작일과 종료일을 입력해주세요.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (moment(this.startDate).isAfter(this.endDate)) {
|
||||
alert("시작일은 종료일보다 클 수 없습니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
inputStartDate: function(value) {
|
||||
this.startDate = value;
|
||||
},
|
||||
inputEndDate: function(value) {
|
||||
this.endDate = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user