mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-05 10:05:33 +08:00
JEECG-BOOT 2.0.2版本发布
This commit is contained in:
zhangdaihao
342
ant-design-vue-jeecg/src/views/profile/advanced/Advanced.vue
Normal file
342
ant-design-vue-jeecg/src/views/profile/advanced/Advanced.vue
Normal file
@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
|
||||
|
||||
<detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
|
||||
<detail-list-item term="创建人">曲丽丽</detail-list-item>
|
||||
<detail-list-item term="订购产品">XX服务</detail-list-item>
|
||||
<detail-list-item term="创建时间">2018-08-07</detail-list-item>
|
||||
<detail-list-item term="关联单据"><a>12421</a></detail-list-item>
|
||||
<detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
|
||||
<detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
|
||||
</detail-list>
|
||||
<a-row slot="extra" class="status-list">
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">状态</div>
|
||||
<div class="heading">待审批</div>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12">
|
||||
<div class="text">订单金额</div>
|
||||
<div class="heading">¥ 568.08</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- actions -->
|
||||
<template slot="action">
|
||||
<a-button-group style="margin-right: 4px;">
|
||||
<a-button>操作</a-button>
|
||||
<a-button>操作</a-button>
|
||||
<a-button><a-icon type="ellipsis"/></a-button>
|
||||
</a-button-group>
|
||||
<a-button type="primary" >主操作</a-button>
|
||||
</template>
|
||||
|
||||
<a-card :bordered="false" title="流程进度">
|
||||
<a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
|
||||
<a-step title="创建项目">
|
||||
</a-step>
|
||||
<a-step title="部门初审">
|
||||
</a-step>
|
||||
<a-step title="财务复核">
|
||||
</a-step>
|
||||
<a-step title="完成">
|
||||
</a-step>
|
||||
</a-steps>
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户信息">
|
||||
<detail-list>
|
||||
<detail-list-item term="用户姓名">付晓晓</detail-list-item>
|
||||
<detail-list-item term="会员卡号">32943898021309809423</detail-list-item>
|
||||
<detail-list-item term="身份证">3321944288191034921</detail-list-item>
|
||||
<detail-list-item term="联系方式">18112345678</detail-list-item>
|
||||
<detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
|
||||
</detail-list>
|
||||
<detail-list title="信息组">
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
<detail-list-item term="某某数据">725</detail-list-item>
|
||||
<detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item > </detail-list-item>
|
||||
</detail-list>
|
||||
<a-card type="inner" title="多层信息组">
|
||||
<detail-list title="组名称" size="small">
|
||||
<detail-list-item term="负责人">林东东</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
<detail-list-item term="所属部门">XX公司-YY部</detail-list-item>
|
||||
<detail-list-item term="过期时间">2018-08-08</detail-list-item>
|
||||
<detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="1">
|
||||
<detail-list-item term="学名"> Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..</detail-list-item>
|
||||
</detail-list>
|
||||
<a-divider style="margin: 16px 0" />
|
||||
<detail-list title="组名称" size="small" :col="2">
|
||||
<detail-list-item term="负责人">付小小</detail-list-item>
|
||||
<detail-list-item term="角色码">1234567</detail-list-item>
|
||||
</detail-list>
|
||||
</a-card>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
|
||||
<div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作 -->
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
:tabList="tabList"
|
||||
:activeTabKey="activeTabKey"
|
||||
@tabChange="(key) => {this.activeTabKey = key}"
|
||||
>
|
||||
<a-table
|
||||
v-if="activeTabKey === '1'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation1"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '2'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation2"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table
|
||||
v-if="activeTabKey === '3'"
|
||||
:columns="operationColumns"
|
||||
:dataSource="operation3"
|
||||
:pagination="false"
|
||||
>
|
||||
<template
|
||||
slot="status"
|
||||
slot-scope="status">
|
||||
<a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
|
||||
const DetailListItem = DetailList.Item
|
||||
|
||||
export default {
|
||||
name: "Advanced",
|
||||
components: {
|
||||
PageLayout,
|
||||
DetailList,
|
||||
DetailListItem
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
key: '1',
|
||||
tab: '操作日志一'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
tab: '操作日志二'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
tab: '操作日志三'
|
||||
}
|
||||
],
|
||||
activeTabKey: '1',
|
||||
|
||||
operationColumns: [
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '执行结果',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'updatedAt',
|
||||
key: 'updatedAt'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark'
|
||||
}
|
||||
],
|
||||
operation1: [
|
||||
{
|
||||
key: 'op1',
|
||||
type: '订购关系生效',
|
||||
name: '曲丽丽',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
},
|
||||
{
|
||||
key: 'op5',
|
||||
type: '创建订单',
|
||||
name: '汗牙牙',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
operation2: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
},
|
||||
{
|
||||
key: 'op4',
|
||||
type: '提交订单',
|
||||
name: '林东东',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '很棒'
|
||||
}
|
||||
],
|
||||
operation3: [
|
||||
{
|
||||
key: 'op2',
|
||||
type: '财务复审',
|
||||
name: '付小小',
|
||||
status: 'reject',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '不通过原因'
|
||||
},
|
||||
{
|
||||
key: 'op3',
|
||||
type: '部门初审',
|
||||
name: '周毛毛',
|
||||
status: 'agree',
|
||||
updatedAt: '2017-10-03 19:23:12',
|
||||
remark: '-'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'agree': '成功',
|
||||
'reject': '驳回'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
statusTypeFilter(type) {
|
||||
const statusTypeMap = {
|
||||
'agree': 'success',
|
||||
'reject': 'error'
|
||||
}
|
||||
return statusTypeMap[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.detail-layout {
|
||||
margin-left: 44px;
|
||||
}
|
||||
.text {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: rgba(0, 0, 0, .25);
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
font-size: 16px;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.detail-layout {
|
||||
margin-left: unset;
|
||||
}
|
||||
.text {
|
||||
|
||||
}
|
||||
.status-list {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
255
ant-design-vue-jeecg/src/views/profile/basic/Index.vue
Normal file
255
ant-design-vue-jeecg/src/views/profile/basic/Index.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<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="scss" scoped>
|
||||
.title {
|
||||
color: rgba(0,0,0,.85);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user