order list
This commit is contained in:
parent
a1426eec60
commit
5fed496a36
2 changed files with 170 additions and 0 deletions
35
src/views/salesorders/OrdersList.vue
Normal file
35
src/views/salesorders/OrdersList.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<h3>Orders List</h3>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="8" xs="12" sm="12" md="8">
|
||||||
|
<v-card variant="outlined">
|
||||||
|
<RecentOrders :customer="customer" limit=20 doc_status="0"></RecentOrders>
|
||||||
|
<RecentOrders :customer="customer" limit=20 doc_status="2"></RecentOrders>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Customer from '@/types/CustomerType.vue'
|
||||||
|
import RecentOrders from '@/components/RecentOrders.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
site_info: {},
|
||||||
|
user_info: {}
|
||||||
|
},
|
||||||
|
components:{
|
||||||
|
RecentOrders
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
customer: new Customer()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
let c_id = this.$route.params.id || 0
|
||||||
|
this.customer.id = c_id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
135
src/views/salesorders/\
Normal file
135
src/views/salesorders/\
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
<template>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
{{ doc_types[doc_status] }} Orders - {{ customer.acc_no }} {{ customer.name }}
|
||||||
|
<v-btn v-if="customer.id != ''" size="smaller" icon="mdi-refresh" variant="text" color="green" @click="getCustomerRecentOrders" :loading="orders_loading"></v-btn>
|
||||||
|
|
||||||
|
</v-card-title>
|
||||||
|
<v-progress-linear color="blue" :active="orders_loading" indeterminate>
|
||||||
|
</v-progress-linear>
|
||||||
|
<v-container>
|
||||||
|
<v-row dense>
|
||||||
|
<v-col cols=12 v-for="item in sortedOrders" :key="item.doc_no">
|
||||||
|
<v-card density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
|
||||||
|
<v-row dense>
|
||||||
|
<v-col>
|
||||||
|
<v-card-title>
|
||||||
|
Order: {{ item.doc_no }}
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-subtitle>
|
||||||
|
{{ formatDate(item.doc_date,"DD/MM/YYYY") }}
|
||||||
|
<v-icon v-if="item.doc_status == 'Completed'" icon="mdi-check"></v-icon>
|
||||||
|
<v-icon v-if="item.doc_status == 'Live'" icon="mdi-play"></v-icon>
|
||||||
|
{{ item.doc_status }}
|
||||||
|
</v-card-subtitle>
|
||||||
|
<v-card-text>
|
||||||
|
{{ item.customer.acc_no }} - {{ item.customer.name }}
|
||||||
|
</v-card-text>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-card-text>
|
||||||
|
<!--<h5>Address :</h5>-->
|
||||||
|
<template v-if="item.del_addr.id != 0 && item.del_addr.postal_name != ''">
|
||||||
|
<h5>Delivery Address :</h5>
|
||||||
|
<template v-for="(v, k , index) in item.del_addr" :key="index">
|
||||||
|
<span class="text-caption" v-if="k != 'id' && (v != '' || v != 0)">
|
||||||
|
{{ v }}<br/>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</v-card-text>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols=5>
|
||||||
|
<v-card-text>
|
||||||
|
<h5>Items :</h5>
|
||||||
|
<span class="text-caption" v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
|
||||||
|
{{ i.code }} - {{ i.name }}
|
||||||
|
<span v-if="i.quantity != 0">x {{ i.quantity }}</span><br/>
|
||||||
|
</span>
|
||||||
|
</v-card-text>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols=1>
|
||||||
|
<v-btn variant="text" icon="mdi-exclamation" color="red"></v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
import Customer from '@/types/CustomerType.vue'
|
||||||
|
import methods from '@/CommonMethods.vue'
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
customer: new Customer(),
|
||||||
|
doc_status: Number,
|
||||||
|
limit: Number
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
customer() {
|
||||||
|
this.getCustomerRecentOrders()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [methods],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
orders_loading: false,
|
||||||
|
orders: [],
|
||||||
|
doc_types: ["Live","","Completed"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
prog_col(){
|
||||||
|
if (this.doc_status == 2){
|
||||||
|
return "green"
|
||||||
|
} else {
|
||||||
|
return "blue"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sortedOrders() {
|
||||||
|
let sorted = this.orders
|
||||||
|
sorted.sort((a, b) => {
|
||||||
|
if (a.doc_date < b.doc_date){
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
if (a.doc_date > b.doc_date){
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
})
|
||||||
|
return sorted
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCustomerRecentOrders(){
|
||||||
|
this.orders_loading = true
|
||||||
|
let url = this.$api_url + "/customers/" + this.customer.id + "/orders/recent"
|
||||||
|
axios.get(url, {
|
||||||
|
params: {
|
||||||
|
doc_status: this.doc_status,
|
||||||
|
limit: this.limit || 6
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(resp => {
|
||||||
|
this.orders = resp.data
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.orders_loading = false
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.customer.id != "") {
|
||||||
|
this.getCustomerRecentOrders()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in a new issue