created form in order page
This commit is contained in:
anju j
parent
4ffb843e46
commit
5c28f24978
|
|
@ -1 +1 @@
|
|||
{"branch_name":"beta","last_commit_date":"2022-01-24T12:46:48.000Z","last_commit_author":"anju j","last_commit_hash":"29509c005abdd92691f4543999a119df3fd403c0"}
|
||||
{"branch_name":"dev","last_commit_date":"2022-01-24T12:54:49.000Z","last_commit_author":"rakesh","last_commit_hash":"4ffb843e46532353dd9a1963aa9f3f079c2ebed2"}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.width-250px {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
|
@ -1,11 +1,229 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<div>
|
||||
<p>this is boxed order history page</p>
|
||||
<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"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" lg="4">
|
||||
<v-menu
|
||||
v-model="menu1"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="createdDate"
|
||||
label="Created From"
|
||||
persistent-hint
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
outlined
|
||||
hide-details
|
||||
|
||||
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
v-model="date1"
|
||||
no-title
|
||||
@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="4">
|
||||
<v-menu
|
||||
v-model="menu2"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model=" toDate"
|
||||
label="To"
|
||||
persistent-hint
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
outlined
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
v-model="date2"
|
||||
no-title
|
||||
@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="searchOrder"
|
||||
>
|
||||
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
|
||||
target="_blank"
|
||||
class="text-decoration-none"
|
||||
:to="{ name: '' }"
|
||||
>
|
||||
<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-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
:items-per-page="10"
|
||||
class="elevation-1 pt-5"
|
||||
></v-data-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'BoxedOrderHistoryPage',
|
||||
import {createHelpers} from "vuex-map-fields";
|
||||
const {mapFields} = createHelpers({
|
||||
getterType:"orderlist/getField",
|
||||
mutationType: "orderlist/updateField"
|
||||
})
|
||||
|
||||
}
|
||||
export default {
|
||||
name: "BoxedOrderHistoryPage",
|
||||
data: () => ({
|
||||
date1: "",
|
||||
date2: "",
|
||||
menu1: false,
|
||||
menu2: false,
|
||||
headers: [
|
||||
{
|
||||
text: "Date",
|
||||
align: "start",
|
||||
sortable: false,
|
||||
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" },
|
||||
],
|
||||
desserts: [
|
||||
{
|
||||
date: "1/27/22",
|
||||
order: 1000316968,
|
||||
retailername: "Pinamik Technologiess",
|
||||
salesrepname: "Brent Kruger bkruger@gmx.com",
|
||||
status: "In Process WS",
|
||||
POnumber: "",
|
||||
action: "View Order",
|
||||
},
|
||||
{
|
||||
date: "1/27/22",
|
||||
order: 1000316968,
|
||||
retailername: "Pinamik Technologiess",
|
||||
salesrepname: "Brent Kruger bkruger@gmx.com",
|
||||
status: "In Process WS",
|
||||
POnumber: "",
|
||||
action: "View Order",
|
||||
},
|
||||
],
|
||||
}),
|
||||
computed: {
|
||||
createdDate() {
|
||||
return this.formatDate(this.date1);
|
||||
},
|
||||
toDate() {
|
||||
return this.formatDate(this.date2);
|
||||
},
|
||||
...mapFields([
|
||||
"orderNumber",
|
||||
// "createdDate",
|
||||
// "toDate",
|
||||
"purchaseOrderNumber"
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
if (!date) return null;
|
||||
const [year, month, day] = date.split("-");
|
||||
return `${month}/${day}/${year}`;
|
||||
},
|
||||
parseDate(date) {
|
||||
if (!date) return null;
|
||||
const [month, day, year] = date.split("/");
|
||||
return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
|
||||
},
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
searchOrder(value){
|
||||
value.preventDeafult();
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style src="./boxed_order_history.scss" lang="scss" scoped/>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { auth } from './gate/auth.module';
|
|||
import { headerCategoryList } from './retailer/header';
|
||||
import { meProductOne } from './retailer/me_product.one';
|
||||
import { catalogBrowser } from './retailer/catalog_browser';
|
||||
import {orderlist} from "./retailer/orderlist"
|
||||
Vue.use(Vuex)
|
||||
|
||||
/**
|
||||
|
|
@ -32,7 +33,8 @@ const store = new Vuex.Store({
|
|||
productOne,
|
||||
userCartProduct,
|
||||
meProductOne,
|
||||
catalogBrowser
|
||||
catalogBrowser,
|
||||
orderlist
|
||||
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import { getField, updateField } from 'vuex-map-fields';
|
||||
|
||||
export const orderlist = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
inprogress: false,
|
||||
orderNumber: "",
|
||||
createdDate: "",
|
||||
toDate: "",
|
||||
purchaseOrderNumber: ""
|
||||
|
||||
},
|
||||
getters: {
|
||||
getField,
|
||||
|
||||
},
|
||||
mutations: {
|
||||
updateField,
|
||||
inProgress(state, yesOrNo) {
|
||||
state.inProgress = yesOrNo
|
||||
},
|
||||
// SetOrderlist(state, orderItem) {
|
||||
// // console.log(state.orderNumber=orderItem)
|
||||
// }
|
||||
},
|
||||
|
||||
actions: {
|
||||
searchOrder:({ commit }, orderItem) => {
|
||||
commit('SetOrderlist', orderItem);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue