hwms-shop-mer/src/components/deliveryRecord/index.vue

315 lines
9.6 KiB
Vue

<template>
<div>
<el-dialog v-if="fileVisible" title="批量发货记录" :visible.sync="fileVisible" width="900px">
<div class="container">
<el-form size="small" inline label-width="90px">
<el-form-item label="操作时间" class="width100">
<el-date-picker
v-model="timeVal"
value-format="yyyy/MM/dd"
format="yyyy/MM/dd"
size="small"
type="daterange"
placement="bottom-end"
placeholder="自定义时间"
style="width: 220px;"
@change="onchangeTime"
/>
</el-form-item>
<el-form-item label="发货类型:">
<el-select
v-model="tableFrom.type"
placeholder="请选择"
class="filter-item selWidth mr20"
clearable
@change="(getList(1))"
>
<el-option
v-for="item in deliveryTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-select
v-model="tableFrom.status"
placeholder="请选择"
class="filter-item selWidth"
clearable
@change="(getList(1))"
>
<el-option
v-for="item in deliveryStatusList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</div>
<div v-loading="loading">
<el-table
v-loading="loading"
:data="tableData.data"
style="width: 100%"
size="mini"
class="table"
highlight-current-row
>
<el-table-column label="序号" min-width="90">
<template scope="scope">
<span>{{ scope.$index+(tableFrom.page - 1) * tableFrom.limit + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="发货类型" min-width="90">
<template scope="scope">
<span>{{ scope.row.type | deliveryType }}</span>
</template>
</el-table-column>
<el-table-column label="操作时间" prop="create_time" min-width="180" />
<el-table-column label="发货单数" prop="count" min-width="100" />
<el-table-column label="成功发货单数" prop="success" min-width="100" />
<el-table-column label="状态" min-width="80">
<template slot-scope="scope">
<span>{{ scope.row.status | deliveryStatusFilter }}</span>
</template>
</el-table-column>
<el-table-column key="8" label="操作" min-width="150" fixed="right">
<template slot-scope="scope">
<el-button
v-if="scope.row.status != -1"
type="text"
size="small"
class="mr10"
@click="detail(scope.row.import_id)"
>查看</el-button>
<el-button
v-if="scope.row.status != -1"
type="text"
size="small"
class="mr10"
@click="exports(scope.row.import_id)"
>生成文件</el-button>
<el-button
v-if="scope.row.status == -1 "
type="text"
size="small"
class="mr10"
@click="detail(scope.row.import_id)"
>查看原因</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
:page-size="tableFrom.limit"
:current-page="tableFrom.page"
layout="prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="pageChange"
/>
</div>
</div>
</el-dialog>
<el-dialog v-if="dialogVisible" title="" :visible.sync="dialogVisible" width="900px">
<div v-loading="loading">
<el-table
v-loading="loading"
:data="recordData.data"
style="width: 100%"
size="mini"
class="table"
highlight-current-row
>
<el-table-column label="序号" min-width="60">
<template scope="scope">
<span>{{ scope.$index+(recordFrom.page - 1) * recordFrom.limit + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="订单号" prop="order_sn" min-width="150" />
<el-table-column label="物流公司" prop="delivery_name" min-width="80" />
<el-table-column label="物流单号" prop="delivery_id" min-width="100" />
<el-table-column label="发货状态" prop="status" min-width="80" />
<el-table-column label="异常原因" prop="mark" min-width="120" />
</el-table>
<div class="block">
<el-pagination
:page-sizes="[10, 20, 30]"
:page-size="recordFrom.limit"
:current-page="recordFrom.page"
layout="total, sizes, prev, pager, next, jumper"
:total="recordData.total"
@size-change="handleSizeChange1"
@current-change="pageChange1"
/>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { deliveryRecordListApi, deliveryRecordDetailApi, deliveryRecordImportApi } from '@/api/order'
import createWorkBook from '@/utils/newToExcel.js'
export default {
name: 'DeliveryList',
data() {
return {
fileVisible: false,
dialogVisible: false,
loading: false,
timeVal: [],
deliveryStatusList: [
{ label: '全部', value: '' },
{ label: '全部完成', value: 1 },
{ label: '部分完成', value: 10 },
{ label: '处理中', value: 0 },
{ label: '处理失败', value: -1 }
],
deliveryTypeList: [
{ label: '全部', value: '' },
{ label: '发货', value: 1 },
{ label: '送货', value: 2 },
{ label: '无需物流', value: 3 },
{ label: '电子面单', value: 4 }
],
tableData: {
data: [],
total: 0
},
recordData: {
data: [],
total: 0
},
recordFrom: {
page: 1,
limit: 20
},
tableFrom: {
page: 1,
limit: 10,
date: '',
status: ''
},
recordId: ''
}
},
methods: {
getList(num) {
this.loading = true
this.tableFrom.page = num || this.tableFrom.page
deliveryRecordListApi(this.tableFrom)
.then((res) => {
this.fileVisible = true
this.tableData.data = res.data.list
this.tableData.total = res.data.count
this.loading = false
})
.catch((res) => {
this.$message.error(res.message)
this.listLoading = false
})
},
async exports(id) {
let excelData = JSON.parse(JSON.stringify(this.tableFrom)), data = []
excelData.page = 1
excelData.limit = 100
let pageCount = 1
let lebData = {};
for (let i = 0; i < pageCount; i++) {
lebData = await this.downLoad(id,excelData)
pageCount = Math.ceil(lebData.count/excelData.limit)
if (lebData.export.length) {
data = data.concat(lebData.export)
excelData.page++
}
}
createWorkBook(lebData.header, lebData.title, data, lebData.foot,lebData.filename);
return
},
// 下载
downLoad(id,excelData) {
return new Promise((resolve, reject) => {
deliveryRecordImportApi(id,excelData).then((res) => {
return resolve(res.data)
})
})
// deliveryRecordImportApi(id)
// .then((res) => {
// const h = this.$createElement
// this.$msgbox({
// title: '提示',
// message: h('p', null, [
// h('span', null, '文件正在生成中,请稍后点击"'),
// h('span', { style: 'color: teal' }, '导出记录'),
// h('span', null, '"查看~ ')
// ]),
// confirmButtonText: '我知道了'
// }).then(action => {})
// }).catch((res) => {
// this.$message.error(res.message)
// })
},
// 详情
detail(id) {
this.recordId = id
deliveryRecordDetailApi(id, this.recordFrom).then((res) => {
this.dialogVisible = true
this.recordData.data = res.data.list
this.recordData.total = res.data.count
})
.catch((res) => {
this.$message.error(res.message)
})
},
// 具体日期
onchangeTime(e) {
this.timeVal = e
this.tableFrom.date = e ? this.timeVal.join('-') : ''
this.getList(1)
},
pageChange(page) {
this.tableFrom.page = page
this.getList('')
},
handleSizeChange(val) {
this.tableFrom.limit = val
this.getList('')
},
pageChange1(page) {
this.recordFrom.page = page
this.getList('')
this.detail(this.recordId)
},
handleSizeChange1(val) {
this.recordFrom.limit = val
this.getList('')
this.detail(this.recordId)
}
}
}
</script>
<style scoped lang="scss">
.title {
margin-bottom: 16px;
color: #17233d;
font-weight: 500;
font-size: 14px;
}
.description {
&-term {
display: table-cell;
padding-bottom: 10px;
line-height: 20px;
width: 50%;
font-size: 12px;
}
}
</style>