299 lines
8.9 KiB
Vue
299 lines
8.9 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"
|
|
color="primary"
|
|
variant="outlined"
|
|
hide-details
|
|
v-model="orderNumber"
|
|
density="compact"
|
|
></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, props }">
|
|
<v-text-field
|
|
v-model="dateAtFormatted"
|
|
label="Created From"
|
|
variant="outlined"
|
|
density="compact"
|
|
color="primary"
|
|
hide-details
|
|
readonly
|
|
v-bind="props"
|
|
v-on="on"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
v-model="createdFrom"
|
|
@input="menu1 = false"
|
|
></v-date-picker>
|
|
</v-menu> -->
|
|
<v-text-field
|
|
type="date"
|
|
v-model="createdFrom"
|
|
placeholder="Created From"
|
|
density="compact"
|
|
variant="outlined"
|
|
label="Created From"
|
|
color="primary pt-0"
|
|
|
|
>
|
|
</v-text-field>
|
|
</v-col>
|
|
|
|
<div class="pt-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, props }">
|
|
<v-text-field
|
|
v-model="dateToFormatted"
|
|
label="To"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
color="primary"
|
|
readonly
|
|
v-bind="props"
|
|
v-on="on"
|
|
type="date"
|
|
|
|
></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="{ isHovering, props }">
|
|
<v-btn
|
|
:class="isHovering ? 'text-white bg-warning ' : 'text-warning warning'"
|
|
class="width-250px"
|
|
variant="outlined"
|
|
v-bind="props"
|
|
@click="reset"
|
|
>
|
|
Reset
|
|
</v-btn>
|
|
</v-hover>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" lg="3">
|
|
<v-hover v-slot:default="{ isHovering, props }">
|
|
<v-btn
|
|
:class="isHovering ? 'text-white bg-warning ' : 'text-warning warning'"
|
|
class="width-250px"
|
|
v-bind="props"
|
|
variant="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="{ isHovering, props }">
|
|
<router-link
|
|
class="text-decoration-none"
|
|
:to="{ name: 'CartProducts' }"
|
|
>
|
|
<v-btn
|
|
:class="isHovering ? 'text-white bg-primary ' : 'text-primary primary'"
|
|
variant="outlined"
|
|
class="width-250px"
|
|
v-bind="props"
|
|
>
|
|
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.value.updatedAt) }}</span>
|
|
</template>
|
|
<template v-slot:item.order="{ item }">
|
|
<span>{{ item.value.incrementId }}</span>
|
|
</template>
|
|
|
|
<template v-slot:item.salesrepname="{ item }">
|
|
<span>{{ userInfo.firstname + "" + userInfo.lastname }}</span>
|
|
</template>
|
|
<template v-slot:item.status="{ item }">
|
|
<span>{{ item.value.status }}</span>
|
|
</template>
|
|
<template v-slot:item.POnumber="{ item }">
|
|
<span>{{ item.value.payment.poNumber }}</span>
|
|
</template>
|
|
|
|
<template v-slot:item.actions={item}>
|
|
|
|
<v-hover v-slot="{ isHovering, props }">
|
|
<router-link
|
|
:class="isHovering ? 'content-link-hover-color' : 'text-primary'"
|
|
to
|
|
:variant="isHovering?'outlined':''"
|
|
v-bind="props"
|
|
@click.stop="viewMyOrder(item.value.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: () => ({
|
|
visible:false,
|
|
menu1: false,
|
|
menu2: false,
|
|
dateAtFormatted:"",
|
|
dateToFormatted:"",
|
|
headers: [
|
|
{ title: "Date", key: "date" },
|
|
{ title: "Order #", key: "order" },
|
|
{ title: "Sales Rep Name", key: "salesrepname" },
|
|
{ title: "Status", key: "status" },
|
|
{ title: "PO Number", key: "POnumber" },
|
|
{ title: "Action", key: "actions" },
|
|
],
|
|
}),
|
|
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/>
|