vben
5 years ago
17 changed files with 573 additions and 44 deletions
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,196 @@ |
|||
import { DescItem } from '/@/components/Description/index'; |
|||
import { BasicColumn } from '/@/components/Table/src/types/table'; |
|||
import Button from '/@/components/Button/index.vue'; |
|||
|
|||
import { Badge } from 'ant-design-vue'; |
|||
|
|||
export const refundData = { |
|||
a1: '1000000000', |
|||
a2: '已取货', |
|||
a3: '1234123421', |
|||
a4: '3214321432', |
|||
}; |
|||
|
|||
export const personData = { |
|||
b1: '付小小', |
|||
b2: '18100000000', |
|||
b3: '菜鸟仓储', |
|||
b4: '浙江省杭州市西湖区万塘路18号', |
|||
b5: '无', |
|||
}; |
|||
export const refundSchema: DescItem[] = [ |
|||
{ |
|||
field: 'a1', |
|||
label: '取货单号', |
|||
}, |
|||
{ |
|||
field: 'a2', |
|||
label: '状态', |
|||
}, |
|||
{ |
|||
field: 'a3', |
|||
label: '销售单号', |
|||
}, |
|||
{ |
|||
field: 'a4', |
|||
label: '子订单', |
|||
}, |
|||
]; |
|||
export const personSchema: DescItem[] = [ |
|||
{ |
|||
field: 'b1', |
|||
label: '用户姓名', |
|||
}, |
|||
{ |
|||
field: 'b2', |
|||
label: '联系电话', |
|||
}, |
|||
{ |
|||
field: 'b3', |
|||
label: '常用快递', |
|||
}, |
|||
{ |
|||
field: 'b4', |
|||
label: '取货地址', |
|||
}, |
|||
{ |
|||
field: 'b5', |
|||
label: '备注', |
|||
}, |
|||
]; |
|||
|
|||
export const refundTableSchema: BasicColumn[] = [ |
|||
{ |
|||
title: '商品编号', |
|||
width: 150, |
|||
dataIndex: 't1', |
|||
customRender: ({ record }) => { |
|||
return ( |
|||
<Button type="link" size="small"> |
|||
{() => record.t1} |
|||
</Button> |
|||
); |
|||
}, |
|||
}, |
|||
{ |
|||
title: '商品名称', |
|||
width: 150, |
|||
dataIndex: 't2', |
|||
}, |
|||
{ |
|||
title: '商品条码', |
|||
width: 150, |
|||
dataIndex: 't3', |
|||
}, |
|||
{ |
|||
title: '单价 ', |
|||
width: 150, |
|||
dataIndex: 't4', |
|||
}, |
|||
{ |
|||
title: '数量（件） ', |
|||
width: 150, |
|||
dataIndex: 't5', |
|||
}, |
|||
{ |
|||
title: '金额', |
|||
width: 150, |
|||
dataIndex: 't6', |
|||
}, |
|||
]; |
|||
export const refundTimeTableSchema: BasicColumn[] = [ |
|||
{ |
|||
title: '时间', |
|||
width: 150, |
|||
dataIndex: 't1', |
|||
}, |
|||
{ |
|||
title: '当前进度', |
|||
width: 150, |
|||
dataIndex: 't2', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
width: 150, |
|||
dataIndex: 't3', |
|||
customRender: ({ record }) => { |
|||
return <Badge status="success" text={record.t3} />; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '操作员ID ', |
|||
width: 150, |
|||
dataIndex: 't4', |
|||
}, |
|||
{ |
|||
title: '耗时', |
|||
width: 150, |
|||
dataIndex: 't5', |
|||
}, |
|||
]; |
|||
|
|||
export const refundTableData: any[] = [ |
|||
{ |
|||
t1: 1234561, |
|||
t2: '矿泉水 550ml', |
|||
t3: '12421432143214321', |
|||
t4: '2.00', |
|||
t5: 1, |
|||
t6: 2.0, |
|||
}, |
|||
{ |
|||
t1: 1234562, |
|||
t2: '矿泉水 550ml', |
|||
t3: '12421432143214321', |
|||
t4: '2.00', |
|||
t5: 2, |
|||
t6: 2.0, |
|||
}, |
|||
{ |
|||
t1: 1234562, |
|||
t2: '矿泉水 550ml', |
|||
t3: '12421432143214321', |
|||
t4: '2.00', |
|||
t5: 2, |
|||
t6: 2.0, |
|||
}, |
|||
{ |
|||
t1: 1234562, |
|||
t2: '矿泉水 550ml', |
|||
t3: '12421432143214321', |
|||
t4: '2.00', |
|||
t5: 2, |
|||
t6: 2.0, |
|||
}, |
|||
]; |
|||
|
|||
export const refundTimeTableData: any[] = [ |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '联系客户', |
|||
t3: '进行中', |
|||
t4: '取货员 ID1234', |
|||
t5: '5mins', |
|||
}, |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '取货员出发', |
|||
t3: '成功', |
|||
t4: '取货员 ID1234', |
|||
t5: '5mins', |
|||
}, |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '取货员接单', |
|||
t3: '成功', |
|||
t4: '系统', |
|||
t5: '5mins', |
|||
}, |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '申请审批通过', |
|||
t3: '成功', |
|||
t4: '用户', |
|||
t5: '1h', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<div> |
|||
<a-page-header title="基础详情页" :ghost="false" /> |
|||
|
|||
<div class="m-5 desc-wrap"> |
|||
<Description |
|||
size="middle" |
|||
title="退款申请" |
|||
:bordered="false" |
|||
:column="3" |
|||
:data="refundData" |
|||
:schema="refundSchema" |
|||
/> |
|||
<a-divider /> |
|||
<Description |
|||
size="middle" |
|||
title="用户信息" |
|||
:bordered="false" |
|||
:column="3" |
|||
:data="personData" |
|||
:schema="personSchema" |
|||
/> |
|||
<a-divider /> |
|||
|
|||
<BasicTable @register="registerRefundTable" /> |
|||
<a-divider /> |
|||
<BasicTable @register="registerTimeTable" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { Description } from '/@/components/Description/index'; |
|||
import { BasicTable, useTable } from '/@/components/Table'; |
|||
|
|||
import { |
|||
refundSchema, |
|||
refundData, |
|||
personSchema, |
|||
personData, |
|||
refundTableSchema, |
|||
refundTimeTableSchema, |
|||
refundTableData, |
|||
refundTimeTableData, |
|||
} from './data'; |
|||
export default defineComponent({ |
|||
components: { Description, BasicTable }, |
|||
setup() { |
|||
const [registerRefundTable] = useTable({ |
|||
title: '退货商品', |
|||
dataSource: refundTableData, |
|||
columns: refundTableSchema, |
|||
pagination: false, |
|||
showIndexColumn: false, |
|||
scroll: { y: 300 }, |
|||
showSummary: true, |
|||
summaryFunc: handleSummary, |
|||
}); |
|||
|
|||
const [registerTimeTable] = useTable({ |
|||
title: '退货进度', |
|||
columns: refundTimeTableSchema, |
|||
pagination: false, |
|||
dataSource: refundTimeTableData, |
|||
showIndexColumn: false, |
|||
scroll: { y: 300 }, |
|||
}); |
|||
|
|||
function handleSummary(tableData: any[]) { |
|||
let totalT5 = 0; |
|||
let totalT6 = 0; |
|||
tableData.forEach((item) => { |
|||
totalT5 += item.t5; |
|||
totalT6 += item.t6; |
|||
}); |
|||
return [ |
|||
{ |
|||
t1: '总计', |
|||
t5: totalT5, |
|||
t6: totalT6, |
|||
}, |
|||
]; |
|||
} |
|||
return { |
|||
registerRefundTable, |
|||
registerTimeTable, |
|||
refundSchema, |
|||
refundData, |
|||
personSchema, |
|||
personData, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.desc-wrap { |
|||
padding: 16px; |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,65 @@ |
|||
import { BasicColumn } from '/@/components/Table/src/types/table'; |
|||
|
|||
import { Badge } from 'ant-design-vue'; |
|||
|
|||
export const refundTimeTableSchema: BasicColumn[] = [ |
|||
{ |
|||
title: '时间', |
|||
width: 150, |
|||
dataIndex: 't1', |
|||
}, |
|||
{ |
|||
title: '当前进度', |
|||
width: 150, |
|||
dataIndex: 't2', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
width: 150, |
|||
dataIndex: 't3', |
|||
customRender: ({ record }) => { |
|||
return <Badge status="success" text={record.t3} />; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '操作员ID ', |
|||
width: 150, |
|||
dataIndex: 't4', |
|||
}, |
|||
{ |
|||
title: '耗时', |
|||
width: 150, |
|||
dataIndex: 't5', |
|||
}, |
|||
]; |
|||
|
|||
export const refundTimeTableData: any[] = [ |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '联系客户', |
|||
t3: '进行中', |
|||
t4: '取货员 ID1234', |
|||
t5: '5mins', |
|||
}, |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '取货员出发', |
|||
t3: '成功', |
|||
t4: '取货员 ID1234', |
|||
t5: '5mins', |
|||
}, |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '取货员接单', |
|||
t3: '成功', |
|||
t4: '系统', |
|||
t5: '5mins', |
|||
}, |
|||
{ |
|||
t1: '2017-10-01 14:10', |
|||
t2: '申请审批通过', |
|||
t3: '成功', |
|||
t4: '用户', |
|||
t5: '1h', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,117 @@ |
|||
<template> |
|||
<div> |
|||
<a-page-header title="单号：234231029431" class="high-desc"> |
|||
<template #extra> |
|||
<a-button key="3"> 操作一 </a-button> |
|||
<a-button key="2"> 操作二 </a-button> |
|||
<a-button key="1" type="primary"> 主操作 </a-button> |
|||
</template> |
|||
<template #footer> |
|||
<a-tabs default-active-key="1"> |
|||
<a-tab-pane key="1" tab="详情" /> |
|||
<a-tab-pane key="2" tab="规则" /> |
|||
</a-tabs> |
|||
</template> |
|||
<a-descriptions size="small" :column="2"> |
|||
<a-descriptions-item label="创建人"> 曲丽丽 </a-descriptions-item> |
|||
<a-descriptions-item label="订购产品"> XX 服务 </a-descriptions-item> |
|||
<a-descriptions-item label="创建时间"> 2017-01-10 </a-descriptions-item> |
|||
<a-descriptions-item label="关联单据"> <a>12421</a> </a-descriptions-item> |
|||
<a-descriptions-item label="生效日期"> 2017-07-07 ~ 2017-08-08 </a-descriptions-item> |
|||
<a-descriptions-item label="备注"> 请于两个工作日内确认 </a-descriptions-item> |
|||
</a-descriptions> |
|||
</a-page-header> |
|||
|
|||
<div class="m-5 desc-wrap"> |
|||
<a-card title="流程进度" :bordered="false"> |
|||
<a-steps :current="1" progress-dot size="small"> |
|||
<a-step title="创建项目"> |
|||
<template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template> |
|||
</a-step> |
|||
<a-step title="部门初审"> |
|||
<template #description> <p>Chad</p> </template> |
|||
</a-step> |
|||
<a-step title="财务复核" /> |
|||
<a-step title="完成" /> |
|||
</a-steps> |
|||
</a-card> |
|||
|
|||
<a-card title="用户信息" :bordered="false" class="mt-5"> |
|||
<a-descriptions :column="3"> |
|||
<a-descriptions-item label="用户姓名"> 付小小 </a-descriptions-item> |
|||
<a-descriptions-item label="会员卡号"> XX 32943898021309809423 </a-descriptions-item> |
|||
<a-descriptions-item label="身份证"> 3321944288191034921 </a-descriptions-item> |
|||
<a-descriptions-item label="联系方式"> 18112345678 </a-descriptions-item> |
|||
<a-descriptions-item label="联系地址" :span="2"> |
|||
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口 |
|||
</a-descriptions-item> |
|||
</a-descriptions> |
|||
|
|||
<a-descriptions title="信息组" :column="3"> |
|||
<a-descriptions-item label="某某数据"> 111 </a-descriptions-item> |
|||
<a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item> |
|||
<a-descriptions-item label="某某数据"> 725 </a-descriptions-item> |
|||
<a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item> |
|||
</a-descriptions> |
|||
|
|||
<h4>信息组</h4> |
|||
<a-card title="多层级信息组"> |
|||
<a-descriptions title="组名称" :column="3"> |
|||
<a-descriptions-item label="负责人"> 林东东 </a-descriptions-item> |
|||
<a-descriptions-item label="角色码"> 1234567 </a-descriptions-item> |
|||
<a-descriptions-item label="所属部门"> XX公司 - YY部 </a-descriptions-item> |
|||
<a-descriptions-item label="过期时间"> 2017-08-08 </a-descriptions-item> |
|||
<a-descriptions-item label="描述" :span="2"> |
|||
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长... |
|||
</a-descriptions-item> |
|||
</a-descriptions> |
|||
<a-divider /> |
|||
<a-descriptions title="组名称" :column="1"> |
|||
<a-descriptions-item label="学名"> |
|||
Citrullus lanatus (Thunb.) Matsum. et |
|||
Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗.. |
|||
</a-descriptions-item> |
|||
</a-descriptions> |
|||
<a-divider /> |
|||
<a-descriptions title="组名称" :column="1"> |
|||
<a-descriptions-item label="负责人"> 付小小 </a-descriptions-item> |
|||
<a-descriptions-item label="角色码"> 1234568 </a-descriptions-item> |
|||
</a-descriptions> |
|||
</a-card> |
|||
</a-card> |
|||
<a-card title="用户近半年来电记录" class="my-5"> |
|||
<a-empty /> |
|||
</a-card> |
|||
<BasicTable @register="registerTimeTable" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { Description } from '/@/components/Description/index'; |
|||
import { BasicTable, useTable } from '/@/components/Table'; |
|||
|
|||
import { refundTimeTableSchema, refundTimeTableData } from './data'; |
|||
export default defineComponent({ |
|||
components: { Description, BasicTable }, |
|||
setup() { |
|||
const [registerTimeTable] = useTable({ |
|||
title: '退货进度', |
|||
columns: refundTimeTableSchema, |
|||
pagination: false, |
|||
dataSource: refundTimeTableData, |
|||
showIndexColumn: false, |
|||
scroll: { y: 300 }, |
|||
}); |
|||
|
|||
return { |
|||
registerTimeTable, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.high-desc { |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue