OLFBP-753, export Order History table
I think this will change as it does not specify the fields
This commit is contained in:
Nic
parent
a242a18e52
commit
00f198503e
|
|
@ -53,6 +53,7 @@
|
|||
"element-ui": "2.7.0",
|
||||
"file-saver": "2.0.1",
|
||||
"fuse.js": "3.4.4",
|
||||
"papaparse": "^5.0.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsonlint": "1.6.3",
|
||||
"jszip": "3.2.1",
|
||||
|
|
|
|||
|
|
@ -1,31 +1,100 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.orderId" placeholder="Order Id" width="10%" />
|
||||
<el-date-picker
|
||||
v-model="listQuery.dateRange"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
/>
|
||||
<el-select v-model="listQuery.sellerAccountId" :remote-method="getRemoteAccountList" filterable default-first-option remote placeholder="Seller Accounts" loading-text="Loading...">
|
||||
<el-option v-for="(item,index) in sellerAccounts" :key="item+index" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.buyerAccountId" :remote-method="getRemoteAccountList" filterable default-first-option remote placeholder="Buyer Accounts" loading-text="Loading...">
|
||||
<el-option v-for="(item,index) in buyerAccounts" :key="item+index" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
|
||||
Search
|
||||
</el-button>
|
||||
<el-button class="filter-item" type="danger" icon="el-icon-remove" @click="resetFilter">
|
||||
Reset
|
||||
</el-button>
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="7" :sm="6" :md="6" :lg="4" :xl="3">
|
||||
<el-input v-model="listQuery.orderId" placeholder="Order Id" style="width: 100%;" />
|
||||
</el-col>
|
||||
<el-col :xs="17" :sm="6" :md="6" :lg="6" :xl="5">
|
||||
<el-date-picker
|
||||
v-model="listQuery.dateRange"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
|
||||
<el-select
|
||||
v-model="listQuery.sellerAccountId"
|
||||
style="width: 100%;"
|
||||
:remote-method="getRemoteAccountList"
|
||||
filterable
|
||||
default-first-option
|
||||
remote
|
||||
placeholder="Seller Accounts"
|
||||
loading-text="Loading..."
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in sellerAccounts"
|
||||
:key="item+index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
|
||||
<el-select
|
||||
v-model="listQuery.buyerAccountId"
|
||||
style="width: 100%;"
|
||||
:remote-method="getRemoteAccountList"
|
||||
filterable
|
||||
default-first-option
|
||||
remote
|
||||
placeholder="Buyer Accounts"
|
||||
loading-text="Loading..."
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in buyerAccounts"
|
||||
:key="item+index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :xs="7" :sm="6" :md="6" :lg="3" :xl="2">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
style="width: 100%;"
|
||||
@click="handleFilter"
|
||||
>Search</el-button>
|
||||
</el-col>
|
||||
<el-col :xs="7" :sm="6" :md="6" :lg="3" :xl="2">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="danger"
|
||||
icon="el-icon-remove"
|
||||
style="width: 100%;"
|
||||
@click="resetFilter"
|
||||
>Reset</el-button>
|
||||
</el-col>
|
||||
<el-col :xs="7" :sm="6" :md="6" :lg="3" :xl="3">
|
||||
<el-button
|
||||
v-if="list !== null"
|
||||
class="filter-item"
|
||||
type="warning"
|
||||
icon="el-icon-remove"
|
||||
style="width: 100%;"
|
||||
:disabled="!(list.length > 0)"
|
||||
@click="downloadCsv"
|
||||
>Download .csv</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="listLoading" :data="list" border fit style="width: 100%" :summary-method="getSummary" show-summary>
|
||||
<el-table-column align="center" label="Date" sortable prop="created" width="200">
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
style="width: 100%"
|
||||
:summary-method="getSummary"
|
||||
show-summary
|
||||
>
|
||||
<el-table-column align="center" label="Date" sortable prop="created" width="300">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.created }}</span>
|
||||
</template>
|
||||
|
|
@ -33,7 +102,13 @@
|
|||
|
||||
<el-table-column align="center" prop="orderId" sortable label="Order Id" width="100" />
|
||||
|
||||
<el-table-column align="center" prop="offers[0].seller.name" sortable label="Seller" width="250" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="offers[0].seller.name"
|
||||
sortable
|
||||
label="Seller"
|
||||
width="250"
|
||||
/>
|
||||
|
||||
<el-table-column align="center" prop="buyer.name" sortable label="Buyer" width="250" />
|
||||
|
||||
|
|
@ -49,25 +124,20 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<el-table-column class-name="status-col" label="Status" width="200">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.status | statusFilter">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
<el-tag :type="row.status | statusFilter">{{ row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="Actions" width="120">
|
||||
<template slot-scope="scope">
|
||||
<router-link :to="'/orders/edit/' + scope.row._id">
|
||||
<el-button type="primary" size="small" icon="el-icon-edit">
|
||||
Edit
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -75,6 +145,8 @@
|
|||
const fetchAccountList = require('@/api/account').fetchList
|
||||
import { fetchList } from '@/api/order'
|
||||
import moment from 'moment'
|
||||
import papa from 'papaparse'
|
||||
import { saveAs } from 'file-saver'
|
||||
|
||||
export default {
|
||||
name: 'OrderList',
|
||||
|
|
@ -89,7 +161,7 @@ export default {
|
|||
totalPrice(offers) {
|
||||
let price = 0
|
||||
offers.forEach(element => {
|
||||
price += ((element.price * 10) * element.quantityOrdered)
|
||||
price += element.price * 10 * element.quantityOrdered
|
||||
})
|
||||
return `€${(price * 1.19).toFixed(2)}`
|
||||
}
|
||||
|
|
@ -108,7 +180,13 @@ export default {
|
|||
orderId: '',
|
||||
buyerAccountId: '',
|
||||
sellerAccountId: '',
|
||||
dateRange: [moment().startOf('day').startOf('week').toDate(), moment().toDate()]
|
||||
dateRange: [
|
||||
moment()
|
||||
.startOf('day')
|
||||
.startOf('week')
|
||||
.toDate(),
|
||||
moment().toDate()
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -117,14 +195,39 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
downloadCsv() {
|
||||
var csvDoc = []
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
csvDoc.push({
|
||||
Created: this.list[i].created,
|
||||
'Order Id': this.list[i].orderId,
|
||||
Seller: this.list[i].offers[0].seller.name,
|
||||
Buyer: this.list[i].buyer.name,
|
||||
Total: this.$options.filters.totalPrice(this.list[i].offers),
|
||||
Products: this.list[i].offers.length,
|
||||
Status: this.$options.filters.statusFilter(this.list[i].status)
|
||||
})
|
||||
}
|
||||
const output = '\ufeff' + papa.unparse(csvDoc)
|
||||
var blob = new Blob([output], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, 'orders.csv')
|
||||
},
|
||||
getRemoteAccountList(query) {
|
||||
query = {}
|
||||
query.platform = 'OLFDE'
|
||||
query.limit = 100
|
||||
fetchAccountList(query).then(response => {
|
||||
if (!response.data.docs) return
|
||||
this.sellerAccounts = response.data.docs.filter(a => a.type === 'seller').map(v => { return { name: v.name, id: v._id } })
|
||||
this.buyerAccounts = response.data.docs.filter(a => a.type === 'buyer').map(v => { return { name: v.name, id: v._id } })
|
||||
this.sellerAccounts = response.data.docs
|
||||
.filter(a => a.type === 'seller')
|
||||
.map(v => {
|
||||
return { name: v.name, id: v._id }
|
||||
})
|
||||
this.buyerAccounts = response.data.docs
|
||||
.filter(a => a.type === 'buyer')
|
||||
.map(v => {
|
||||
return { name: v.name, id: v._id }
|
||||
})
|
||||
})
|
||||
},
|
||||
getSummary(param) {
|
||||
|
|
@ -134,7 +237,7 @@ export default {
|
|||
let totalPrice = 0
|
||||
data.forEach(order => {
|
||||
order.offers.forEach(element => {
|
||||
totalPrice += ((element.price * 10) * element.quantityOrdered)
|
||||
totalPrice += element.price * 10 * element.quantityOrdered
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -165,7 +268,9 @@ export default {
|
|||
|
||||
// If we have an orderId, that trumps all other fields
|
||||
if (this.listQuery.orderId && this.listQuery.orderId.length > 0) {
|
||||
this.list = allItems.filter(o => o.orderId.indexOf(this.listQuery.orderId) > -1)
|
||||
this.list = allItems.filter(
|
||||
o => o.orderId.indexOf(this.listQuery.orderId) > -1
|
||||
)
|
||||
} else {
|
||||
// We don't have an order id, let's check the other fields to use
|
||||
let newResults = allItems
|
||||
|
|
@ -173,16 +278,23 @@ export default {
|
|||
if (this.listQuery.dateRange.length === 2) {
|
||||
newResults = newResults.filter(o => {
|
||||
const created = new Date(o.created).getTime()
|
||||
return created > this.listQuery.dateRange[0].getTime() && created < this.listQuery.dateRange[1].getTime()
|
||||
return (
|
||||
created > this.listQuery.dateRange[0].getTime() &&
|
||||
created < this.listQuery.dateRange[1].getTime()
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
if (this.listQuery.sellerAccountId.length > 0) {
|
||||
newResults = newResults.filter(o => o.offers[0].seller._id === this.listQuery.sellerAccountId)
|
||||
newResults = newResults.filter(
|
||||
o => o.offers[0].seller._id === this.listQuery.sellerAccountId
|
||||
)
|
||||
}
|
||||
|
||||
if (this.listQuery.buyerAccountId.length > 0) {
|
||||
newResults = newResults.filter(o => o.buyer._id === this.listQuery.buyerAccountId)
|
||||
newResults = newResults.filter(
|
||||
o => o.buyer._id === this.listQuery.buyerAccountId
|
||||
)
|
||||
}
|
||||
|
||||
this.list = newResults
|
||||
|
|
@ -201,4 +313,8 @@ export default {
|
|||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue