<template>
|
<page-header-wrapper
|
:breadcrumb="false"
|
>
|
<a-card :bordered="false">
|
<template>
|
<div class="table-page-search-wrapper" style="background-color: #fff;">
|
<a-form layout="inline">
|
<a-row :gutter="48">
|
<a-col :md="8" :sm="24">
|
<a-form-item label="订单号">
|
<a-input v-model="queryParam.tid" placeholder="请输入有赞订单号查询"/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24">
|
<a-form-item>
|
<a-button type="primary" @click="onSearch">查询</a-button>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<a-table
|
style="background-color: #fff;"
|
:pagination="pagination"
|
:columns="columns"
|
:data-source="dataSource"
|
class="components-table-demo-nested"
|
@expand="expandedRows"
|
:expandedRowKeys="expandedRowKeys"
|
rowKey="tid"
|
:loading="loading"
|
>
|
|
<template slot="address" slot-scope="text, record">
|
<a-tooltip placement="topLeft">
|
<template #title> {{ record.delivery_province+record.delivery_city+record.delivery_district+record.delivery_address }}</template>
|
{{ record.delivery_province+record.delivery_city+record.delivery_district+record.delivery_address }}
|
</a-tooltip>
|
|
</template>
|
<template #expandedRowRender>
|
<a-table
|
style="background-color: #fff;"
|
:columns="innerColumns"
|
:data-source="innerData"
|
:pagination="false" >
|
<span slot="itemimg" slot-scope="text, record">
|
<template v-if="record.picPath!=null">
|
<img style="width: 50%;" :src="record.picPath" />
|
</template>
|
<template v-else>
|
无
|
</template>
|
</span>
|
|
<template slot="action" slot-scope="text, record">
|
<a @click="sendGoods(record)">发货</a>
|
</template>
|
|
</a-table>
|
</template>
|
</a-table>
|
</template>
|
</a-card>
|
</page-header-wrapper>
|
</template>
|
|
<script>
|
import { defineComponent, Pagination } from 'vue'
|
import { GetWaiteCreateTrade, SendYzGoods } from '@/api/tradeapi'
|
const columns = [
|
{ title: '订单号', dataIndex: 'tid', key: 'tid' },
|
{ title: '订单创建时间', dataIndex: 'create_time' },
|
{ title: '支付时间', dataIndex: 'pay_time' },
|
{ title: '支付金额', dataIndex: 'payment' },
|
{ title: '订单状态', dataIndex: 'status_str' },
|
{ title: '收货人', dataIndex: 'receiver_name' },
|
{ title: '收货手机号', dataIndex: 'receiver_tel' },
|
{ title: '收货地址', dataIndex: 'address', width: '200px', ellipsis: true, scopedSlots: { customRender: 'address' } }
|
|
]
|
const innerColumns = [
|
{ title: '子订单号', dataIndex: 'oid', key: 'oid' },
|
{
|
title: '商品',
|
dataIndex: 'proImg',
|
width: '150px',
|
scopedSlots: { customRender: 'itemimg' }
|
},
|
{ title: '标题', dataIndex: 'title', key: 'title' },
|
{ title: '购买数量', dataIndex: 'num', key: 'num' },
|
{ title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
|
]
|
export default {
|
name: 'Waitsendout',
|
data () {
|
return {
|
queryParam: {},
|
loading: false,
|
columns,
|
innerColumns,
|
expandedRowKeys: [],
|
dataSource: [],
|
innerData: [],
|
pagination: {
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
pageSizeOptions: ['10', '20'],
|
onChange: this.onPageChange,
|
onShowSizeChange: this.onPageChange
|
}
|
}
|
},
|
created () {
|
this.GetTradeList()
|
},
|
methods: {
|
onSearch () {
|
this.GetTradeList()
|
},
|
onPageChange (current, size) {
|
this.pagination.current = current
|
this.pagination.pageSize = size
|
this.GetTradeList()
|
},
|
// 获取订单数据
|
GetTradeList () {
|
this.loading = true
|
const parameter = {
|
PageNo: this.pagination.current,
|
PageSize: this.pagination.pageSize,
|
tid: this.queryParam.tid,
|
SearchType: 1
|
}
|
GetWaiteCreateTrade(parameter)
|
.then(res => {
|
this.dataSource = res.result.data
|
this.pagination.total = res.result.totalCount
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
// 展开
|
expandedRows (expand, record) {
|
this.innerData = []
|
this.expandedRowKeys = []
|
if (expand) {
|
this.expandedRowKeys.push(record.tid)
|
this.innerData = record.orders
|
}
|
},
|
// 订单发货
|
sendGoods (record) {
|
this.loading = true
|
const oids = []
|
oids.push(record.oid)
|
const parameter = {
|
YzOid: oids
|
}
|
SendYzGoods(parameter).then(res => {
|
if (res.result == true) {
|
this.$message.success(`发货成功`)
|
this.GetTradeList()
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
</script>
|
