mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
新增基础详情页、DetailList组件
This commit is contained in:
iczer
parent
9f244f3719
commit
4711a8556c
@ -1,9 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<a-card :bordered="false">
|
<a-card :bordered="false">
|
||||||
<a-tooltip slot="title" title="test" >
|
<detail-list title="退款详情">
|
||||||
<a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
|
<detail-list-item term="取货单号">1000000000</detail-list-item>
|
||||||
</a-tooltip>
|
<detail-list-item term="状态">已取货</detail-list-item>
|
||||||
|
<detail-list-item term="销售单号">987654321</detail-list-item>
|
||||||
|
<detail-list-item term="子订单">1234567890</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="联系电话">18100000001</detail-list-item>
|
||||||
|
<detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
|
||||||
|
<detail-list-item term="取货地址">浙江省杭州市西湖区万塘路19号</detail-list-item>
|
||||||
|
<detail-list-item term="备注">无</detail-list-item>
|
||||||
|
</detail-list>
|
||||||
|
<a-divider style="margin-bottom: 32px"/>
|
||||||
|
<div class="title">退货商品</div>
|
||||||
|
<a-table
|
||||||
|
style="margin-bottom: 24px"
|
||||||
|
:columns="goodsColumns"
|
||||||
|
:dataSource="goodsData"
|
||||||
|
:pagination="false"
|
||||||
|
>
|
||||||
|
</a-table>
|
||||||
|
<div class="title">退货进度</div>
|
||||||
|
<a-table
|
||||||
|
:columns="scheduleColumns"
|
||||||
|
:dataSource="scheduleData"
|
||||||
|
:pagination="false"
|
||||||
|
>
|
||||||
|
</a-table>
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -12,12 +39,173 @@
|
|||||||
import ACard from 'vue-antd-ui/es/card/Card'
|
import ACard from 'vue-antd-ui/es/card/Card'
|
||||||
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
|
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
|
||||||
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
|
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
|
||||||
|
import DetailList from '../tool/DetailList'
|
||||||
|
import ADivider from 'vue-antd-ui/es/divider/index'
|
||||||
|
import ATable from 'vue-antd-ui/es/table'
|
||||||
|
|
||||||
|
const DetailListItem = DetailList.Item
|
||||||
|
|
||||||
|
const 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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const goodsData = [
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const scheduleColumns = [
|
||||||
|
{
|
||||||
|
title: '时间',
|
||||||
|
dataIndex: 'time',
|
||||||
|
key: 'time'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当前进度',
|
||||||
|
dataIndex: 'rate',
|
||||||
|
key: 'rate'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作员ID',
|
||||||
|
dataIndex: 'operator',
|
||||||
|
key: 'operator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '耗时',
|
||||||
|
dataIndex: 'cost',
|
||||||
|
key: 'cost'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const scheduleData = [
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BasicDetail',
|
name: 'BasicDetail',
|
||||||
components: {AAvatar, ATooltip, ACard}
|
components: {ATable, ADivider, DetailListItem, DetailList, AAvatar, ATooltip, ACard},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
goodsColumns,
|
||||||
|
goodsData,
|
||||||
|
scheduleColumns,
|
||||||
|
scheduleData
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="less" scoped>
|
||||||
|
.title {
|
||||||
|
color: rgba(0,0,0,.85);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
102
src/components/tool/DetailList.vue
Normal file
102
src/components/tool/DetailList.vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">{{title}}</div>
|
||||||
|
<a-row>
|
||||||
|
<slot></slot>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ACol from 'vue-antd-ui/es/grid/Col'
|
||||||
|
import ARow from 'vue-antd-ui/es/grid/Row'
|
||||||
|
const Item = {
|
||||||
|
name: 'DetailListItem',
|
||||||
|
props: {
|
||||||
|
term: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
renderTerm (h, term) {
|
||||||
|
return h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
class: 'term'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[term]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
renderContent (h, content) {
|
||||||
|
return h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
class: 'content'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[content]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render (h) {
|
||||||
|
const term = this.renderTerm(h, this.$props.term)
|
||||||
|
const content = this.renderContent(h, this.$slots.default)
|
||||||
|
return h(
|
||||||
|
ACol,
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
xs: 24,
|
||||||
|
sm: 12,
|
||||||
|
md: 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[term, content]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
name: 'DetailList',
|
||||||
|
Item: Item,
|
||||||
|
props: ['title'],
|
||||||
|
components: {ARow, ACol}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(0,0,0,.85);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.term {
|
||||||
|
// Line-height is 22px IE dom height will calculate error
|
||||||
|
line-height: 20px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
color: rgba(0,0,0,.85);
|
||||||
|
white-space: nowrap;
|
||||||
|
display: table-cell;
|
||||||
|
&:after {
|
||||||
|
content: ':';
|
||||||
|
margin: 0 8px 0 2px;
|
||||||
|
position: relative;
|
||||||
|
top: -0.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
line-height: 22px;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
color: rgba(0,0,0,.85);
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
.term,
|
||||||
|
.content{
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user