255 lines
6.8 KiB
Java
255 lines
6.8 KiB
Java
<template>
|
|
<page-layout :title="title">
|
|
<a-card :bordered="false">
|
|
<detail-list title="退款申请">
|
|
<detail-list-item term="取货单号">1000000000</detail-list-item>
|
|
<detail-list-item term="状态">已取货</detail-list-item>
|
|
<detail-list-item term="销售单号">1234123421</detail-list-item>
|
|
<detail-list-item term="子订单">3214321432</detail-list-item>
|
|
</detail-list>
|
|
<a-divider style="margin-bottom: 32px"/>
|
|
<detail-list title="用户信息">
|
|
<detail-list-item term="用户姓名">付小小</detail-list-item>
|
|
<detail-list-item term="联系电话">18100000000</detail-list-item>
|
|
<detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
|
|
<detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
|
|
<detail-list-item term="备注"> 无</detail-list-item>
|
|
</detail-list>
|
|
<a-divider style="margin-bottom: 32px"/>
|
|
|
|
<div class="title">退货商品</div>
|
|
<s-table
|
|
style="margin-bottom: 24px"
|
|
:columns="goodsColumns"
|
|
:data="loadGoodsData">
|
|
|
|
</s-table>
|
|
|
|
<div class="title">退货进度</div>
|
|
<s-table
|
|
style="margin-bottom: 24px"
|
|
:columns="scheduleColumns"
|
|
:data="loadScheduleData">
|
|
|
|
<template
|
|
slot="status"
|
|
slot-scope="status">
|
|
<a-badge :status="status" :text="status | statusFilter"/>
|
|
</template>
|
|
|
|
</s-table>
|
|
</a-card>
|
|
</page-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import PageLayout from '@/components/page/PageLayout'
|
|
import STable from '@/components/table/'
|
|
import DetailList from '@/components/tools/DetailList'
|
|
import ABadge from "ant-design-vue/es/badge/Badge"
|
|
const DetailListItem = DetailList.Item
|
|
|
|
export default {
|
|
components: {
|
|
PageLayout,
|
|
ABadge,
|
|
DetailList,
|
|
DetailListItem,
|
|
STable
|
|
},
|
|
data () {
|
|
return {
|
|
goodsColumns: [
|
|
{
|
|
title: '商品编号',
|
|
dataIndex: 'id',
|
|
key: 'id'
|
|
},
|
|
{
|
|
title: '商品名称',
|
|
dataIndex: 'name',
|
|
key: 'name'
|
|
},
|
|
{
|
|
title: '商品条码',
|
|
dataIndex: 'barcode',
|
|
key: 'barcode'
|
|
},
|
|
{
|
|
title: '单价',
|
|
dataIndex: 'price',
|
|
key: 'price',
|
|
align: 'right'
|
|
},
|
|
{
|
|
title: '数量（件）',
|
|
dataIndex: 'num',
|
|
key: 'num',
|
|
align: 'right'
|
|
},
|
|
{
|
|
title: '金额',
|
|
dataIndex: 'amount',
|
|
key: 'amount',
|
|
align: 'right'
|
|
}
|
|
],
|
|
// 加载数据方法 必须为 Promise 对象
|
|
loadGoodsData: () => {
|
|
return new Promise((resolve => {
|
|
resolve({
|
|
data: [
|
|
{
|
|
id: '1234561',
|
|
name: '矿泉水 550ml',
|
|
barcode: '12421432143214321',
|
|
price: '2.00',
|
|
num: '1',
|
|
amount: '2.00'
|
|
},
|
|
{
|
|
id: '1234562',
|
|
name: '凉茶 300ml',
|
|
barcode: '12421432143214322',
|
|
price: '3.00',
|
|
num: '2',
|
|
amount: '6.00'
|
|
},
|
|
{
|
|
id: '1234563',
|
|
name: '好吃的薯片',
|
|
barcode: '12421432143214323',
|
|
price: '7.00',
|
|
num: '4',
|
|
amount: '28.00'
|
|
},
|
|
{
|
|
id: '1234564',
|
|
name: '特别好吃的蛋卷',
|
|
barcode: '12421432143214324',
|
|
price: '8.50',
|
|
num: '3',
|
|
amount: '25.50'
|
|
}
|
|
],
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
totalPage: 1,
|
|
totalCount: 10
|
|
})
|
|
})).then(res => {
|
|
return res
|
|
})
|
|
},
|
|
|
|
scheduleColumns: [
|
|
{
|
|
title: '时间',
|
|
dataIndex: 'time',
|
|
key: 'time'
|
|
},
|
|
{
|
|
title: '当前进度',
|
|
dataIndex: 'rate',
|
|
key: 'rate'
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
scopedSlots: { customRender: 'status' },
|
|
},
|
|
{
|
|
title: '操作员ID',
|
|
dataIndex: 'operator',
|
|
key: 'operator'
|
|
},
|
|
{
|
|
title: '耗时',
|
|
dataIndex: 'cost',
|
|
key: 'cost'
|
|
}
|
|
],
|
|
loadScheduleData: () => {
|
|
return new Promise((resolve => {
|
|
resolve({
|
|
data: [
|
|
{
|
|
key: '1',
|
|
time: '2017-10-01 14:10',
|
|
rate: '联系客户',
|
|
status: 'processing',
|
|
operator: '取货员 ID1234',
|
|
cost: '5mins'
|
|
},
|
|
{
|
|
key: '2',
|
|
time: '2017-10-01 14:05',
|
|
rate: '取货员出发',
|
|
status: 'success',
|
|
operator: '取货员 ID1234',
|
|
cost: '1h'
|
|
},
|
|
{
|
|
key: '3',
|
|
time: '2017-10-01 13:05',
|
|
rate: '取货员接单',
|
|
status: 'success',
|
|
operator: '取货员 ID1234',
|
|
cost: '5mins'
|
|
},
|
|
{
|
|
key: '4',
|
|
time: '2017-10-01 13:00',
|
|
rate: '申请审批通过',
|
|
status: 'success',
|
|
operator: '系统',
|
|
cost: '1h'
|
|
},
|
|
{
|
|
key: '5',
|
|
time: '2017-10-01 12:00',
|
|
rate: '发起退货申请',
|
|
status: 'success',
|
|
operator: '用户',
|
|
cost: '5mins'
|
|
}
|
|
],
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
totalPage: 1,
|
|
totalCount: 10
|
|
})
|
|
})).then(res => {
|
|
return res
|
|
})
|
|
},
|
|
}
|
|
},
|
|
filters: {
|
|
statusFilter(status) {
|
|
const statusMap = {
|
|
'processing': '进行中',
|
|
'success': '完成',
|
|
'failed': '失败'
|
|
}
|
|
return statusMap[status]
|
|
}
|
|
},
|
|
computed: {
|
|
title () {
|
|
return this.$route.meta.title
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.title {
|
|
color: rgba(0,0,0,.85);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom: 16px;
|
|
}
|
|
</style> |