284 lines
8.4 KiB
Vue
284 lines
8.4 KiB
Vue
<template>
|
|
<v-container>
|
|
<div class="h3 my-5 py-5 body-font1">Order Management</div>
|
|
<v-form>
|
|
<v-row
|
|
class="
|
|
d-flex
|
|
justify-center
|
|
align-center align-md-baseline
|
|
justify-md-start
|
|
"
|
|
>
|
|
<v-col cols="12" sm="12" md="12" lg="12">
|
|
<v-text-field
|
|
label="Order Number"
|
|
persistent-hint
|
|
outlined
|
|
hide-details
|
|
v-model="orderNumber"
|
|
dense
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="5">
|
|
<v-menu
|
|
v-model="menu1"
|
|
: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="dateAtFormatted"
|
|
label="Created From"
|
|
persistent-hint
|
|
outlined
|
|
hide-details
|
|
dense
|
|
readonly
|
|
v-bind="attrs"
|
|
v-on="on"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
v-model="createdFrom"
|
|
@input="menu1 = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-col>
|
|
|
|
<div class="pt-md-7">-</div>
|
|
|
|
<v-col cols="12" sm="12" md="6" lg="5">
|
|
<v-menu
|
|
v-model="menu2"
|
|
: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=" dateToFormatted"
|
|
label="To"
|
|
persistent-hint
|
|
outlined
|
|
hide-details
|
|
dense
|
|
readonly
|
|
v-bind="attrs"
|
|
v-on="on"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
v-model="createdTo"
|
|
@input="menu2 = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-col>
|
|
|
|
<!-- <v-col cols="12" sm="12" md="12" lg="12">
|
|
<v-text-field
|
|
label="Purchase Order Number"
|
|
persistent-hint
|
|
outlined
|
|
hide-details
|
|
v-model="purchaseOrderNumber"
|
|
></v-text-field>
|
|
</v-col> -->
|
|
<v-col cols="12" sm="12" md="6" lg="3">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
:class="hover ? 'white--text warning' : 'warning--text'"
|
|
class="width-250px"
|
|
outlined
|
|
@click="reset"
|
|
>
|
|
Reset
|
|
</v-btn>
|
|
</v-hover>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="3">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
:class="hover ? 'white--text warning' : 'warning--text'"
|
|
class="width-250px"
|
|
outlined
|
|
@click.prevent="orderlistApi"
|
|
>
|
|
Search
|
|
</v-btn>
|
|
</v-hover>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="3">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<router-link
|
|
class="text-decoration-none"
|
|
:to="{ name: 'CartProducts' }"
|
|
>
|
|
<v-btn
|
|
:class="hover ? 'white--text primary' : 'primary--text'"
|
|
class="width-250px"
|
|
outlined
|
|
>
|
|
New Order
|
|
</v-btn>
|
|
</router-link>
|
|
</v-hover>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="12" lg="12">
|
|
<v-row class="mt-12" justify="center" v-if="inProgress">
|
|
<v-progress-circular
|
|
:size="60"
|
|
color="primary"
|
|
indeterminate
|
|
></v-progress-circular>
|
|
</v-row>
|
|
<v-row no-gutters v-else>
|
|
<v-col>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="OrderHistory"
|
|
:items-per-page="10"
|
|
class="elevation-1 pt-5"
|
|
>
|
|
<template v-slot:item.date="{ item }">
|
|
<span>{{ isoStringToNormalDate(item.updatedAt) }}</span>
|
|
</template>
|
|
<template v-slot:item.order="{ item }">
|
|
<span>{{ item.incrementId }}</span>
|
|
</template>
|
|
<template v-slot:item.retailername="{ item }">
|
|
<span>{{ userInfo.firstname + "" + userInfo.lastname }}</span>
|
|
</template>
|
|
<template v-slot:item.salesrepname="{ item }">
|
|
<span>{{ userInfo.firstname + "" + userInfo.lastname }}</span>
|
|
</template>
|
|
<template v-slot:item.status="{ item }">
|
|
<span>{{ item.status }}</span>
|
|
</template>
|
|
<template v-slot:item.POnumber="{ item }">
|
|
<span>{{ item.payment.poNumber }}</span>
|
|
</template>
|
|
<template v-slot:item.action="{ item }">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<router-link
|
|
:class="
|
|
hover ? 'content-link-hover-color' : 'secondary--text'
|
|
"
|
|
to
|
|
@click.native="viewMyOrder(item.items[0].orderId)"
|
|
class="
|
|
ls-n009
|
|
text-decoration-none
|
|
body
|
|
myorders-route-link
|
|
"
|
|
>View Order</router-link
|
|
>
|
|
</v-hover>
|
|
</template>
|
|
</v-data-table>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
/* eslint-disable no-alert, no-console , no-debugger */
|
|
import { createHelpers } from "vuex-map-fields";
|
|
|
|
const { mapFields } = createHelpers({
|
|
getterType: "orderlist/getField",
|
|
mutationType: "orderlist/updateField",
|
|
});
|
|
|
|
export default {
|
|
name: "BoxedOrderHistoryPage",
|
|
components: {},
|
|
data: () => ({
|
|
menu1: false,
|
|
menu2: false,
|
|
dateAtFormatted:"",
|
|
dateToFormatted:"",
|
|
headers: [
|
|
{ text: "Date", value: "date" },
|
|
{ text: "Order #", value: "order" },
|
|
{ text: "Retailer Name", value: "retailername" },
|
|
{ text: "Sales Rep Name", value: "salesrepname" },
|
|
{ text: "Status", value: "status" },
|
|
{ text: "PO Number", value: "POnumber" },
|
|
{ text: "Action", value: "action" },
|
|
],
|
|
}),
|
|
computed: {
|
|
OrderHistory() {
|
|
return this.$store.state.orderlist.OrderHistory.items;
|
|
},
|
|
userInfo() {
|
|
return this.$store.state.accountOne.one;
|
|
},
|
|
|
|
inProgress() {
|
|
return this.$store.state.orderlist.inProgress;
|
|
},
|
|
...mapFields(["orderNumber","createdFrom","createdTo"]),
|
|
},
|
|
|
|
methods: {
|
|
viewMyOrder(itemId) {
|
|
this.$store.dispatch("orderlist/fetchOrderList", itemId);
|
|
this.$router
|
|
.push({
|
|
name: "ViewProduct",
|
|
params: { orderId: itemId },
|
|
})
|
|
.catch((error) => {
|
|
error;
|
|
});
|
|
},
|
|
formatDate(date) {
|
|
if (!date) return null;
|
|
const [year, month, day] = date.split("-");
|
|
return `${month}/${day}/${year}`;
|
|
},
|
|
isoStringToNormalDate(date) {
|
|
let newDateTime = Date.parse(date);
|
|
let tmp = new Date(newDateTime).toLocaleDateString().split("/");
|
|
return (date = tmp[1] + "/" + tmp[0] + "/" + tmp[2]);
|
|
},
|
|
// searchOrder() {
|
|
// this.$store.dispatch("orderlist/fetchSearchOrder");
|
|
// },
|
|
reset() {
|
|
this.$store.dispatch("orderlist/fetchReset", this.userInfo.id);
|
|
},
|
|
orderlistApi() {
|
|
if (this.userInfo && this.userInfo.id) {
|
|
this.$store.dispatch("orderlist/fetchOrderList", this.userInfo.id);
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
userInfo() {
|
|
this.orderlistApi();
|
|
},
|
|
createdFrom () {
|
|
this.dateAtFormatted = this.formatDate(this.createdFrom)
|
|
},
|
|
createdTo () {
|
|
this.dateToFormatted = this.formatDate(this.createdTo)
|
|
},
|
|
},
|
|
created() {
|
|
this.orderlistApi();
|
|
},
|
|
};
|
|
</script>
|
|
<style src="./boxed_order_history.scss" lang="scss" scoped/>
|