Skip to content

A
ant-design-pro-vue
Commit 9e01b914 by Sendya
Options

add: drawer menu

parent 182bd1c3
Showing with 1146 additions and 365 deletions
src/components/layout/LayoutHeader.vue
<template>
<a-layout-header style="padding: 0px;">
<div class="header">
<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click.native="toggle"/>
<div class="user-wrapper">
<span class="action">
<a-icon type="question-circle-o"></a-icon>
</span>
<header-notice class="action"/>
<a-dropdown>
<span class="action ant-dropdown-link user-dropdown-menu">
<a-avatar class="avatar" size="small" :src="avatar()"/>
<span>{{ nickname() }}</span>
</span>
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
<a-menu-item key="0">
<a-icon type="user"/>
<span>个人中心</span>
</a-menu-item>
<a-menu-item key="1">
<router-link :to="{ name: 'settings' }">
<a-icon type="setting"/>
<span>账户设置</span>
</router-link>
</a-menu-item>
<a-menu-item key="2" disabled>
<a-icon type="setting"/>
<span>测试</span>
</a-menu-item>
<a-menu-divider/>
<a-menu-item key="3">
<a href="javascript:;" @click="handleLogout">
<a-icon type="logout"/>
<span>退出登录</span>
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</a-layout-header>
</template>
<script>
import HeaderNotice from './HeaderNotice'
import { mapActions, mapGetters } from 'vuex'
export default {
name: "LayoutHeader",
components: {
HeaderNotice
},
props: {
collapsed: {
type: Boolean,
required: false,
default: false
},
},
data() {
return {
}
},
created() {
},
methods: {
...mapActions(["Logout"]),
...mapGetters(["nickname", "avatar"]),
handleLogout() {
this.Logout({}).then(() => {
window.location.reload()
}).catch(err => {
this.$message.error(err.message)
})
},
toggle() {
this.$emit('toggle')
}
}
}
</script>
<style scoped>
<template>
<a-layout-header style="padding: 0px;">
<div class="header">
<a-icon class="trigger" v-if="device==='mobile'" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click.native="toggle"></a-icon>
<a-icon class="trigger" v-else :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click.native="toggle"/>
<div class="user-wrapper">
<span class="action">
<a-icon type="question-circle-o"></a-icon>
</span>
<header-notice class="action"/>
<a-dropdown>
<span class="action ant-dropdown-link user-dropdown-menu">
<a-avatar class="avatar" size="small" :src="avatar()"/>
<span>{{ nickname() }}</span>
</span>
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
<a-menu-item key="0">
<a-icon type="user"/>
<span>个人中心</span>
</a-menu-item>
<a-menu-item key="1">
<router-link :to="{ name: 'settings' }">
<a-icon type="setting"/>
<span>账户设置</span>
</router-link>
</a-menu-item>
<a-menu-item key="2" disabled>
<a-icon type="setting"/>
<span>测试</span>
</a-menu-item>
<a-menu-divider/>
<a-menu-item key="3">
<a href="javascript:;" @click="handleLogout">
<a-icon type="logout"/>
<span>退出登录</span>
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</a-layout-header>
</template>
<script>
import HeaderNotice from './HeaderNotice'
import { mapActions, mapGetters } from 'vuex'
export default {
name: "LayoutHeader",
components: {
HeaderNotice
},
props: {
collapsed: {
type: Boolean,
required: false,
default: false
},
device: {
type: String,
required: false,
default: 'desktop'
}
},
data() {
return {
}
},
created() {
},
methods: {
...mapActions(["Logout"]),
...mapGetters(["nickname", "avatar"]),
handleLogout() {
this.Logout({}).then(() => {
window.location.reload()
}).catch(err => {
this.$message.error(err.message)
})
},
toggle() {
this.$emit('toggle')
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/menu/MiniSiderMenu.vue 0 → 100644
<template>
<a-layout-sider
:class="['sider', isMobile ? null : 'shadow', theme ]"
width="256px"
:collapsible="collapsible"
v-model="collapsed"
:trigger="null">
<div class="logo">
<router-link :to="{name:'dashboard'}">
<img src="~@/assets/logo.svg" alt="logo">
<h1>Ant Design Pro</h1>
</router-link>
</div>
<s-menu
:collapsed="collapsed"
:menu="menus"
:theme="theme"
@select="onSelect"
:mode="mode"
style="padding: 16px 0px;"></s-menu>
</a-layout-sider>
</template>
<script>
import ALayoutSider from "ant-design-vue/es/layout/Sider"
import SMenu from './index'
export default {
name: "SiderMenu",
components: { ALayoutSider, SMenu },
props: {
mode: {
type: String,
required: false,
default: 'inline'
},
theme: {
type: String,
required: false,
default: 'dark'
},
collapsible: {
type: Boolean,
required: false,
default: false
},
collapsed: {
type: Boolean,
required: false,
default: false
},
menus: {
type: Array,
required: true
}
},
created () {
},
computed: {
isMobile () {
return this.$store.state.app.device !== 'desktop'
}
},
methods: {
onSelect (obj) {
this.$emit('menuSelect', obj)
}
}
}
</script>
\ No newline at end of file
src/components/tools/DetailList.vue
<template>
<div :class="['detail-list', size === 'small' ? 'small' : 'large', layout === 'vertical' ? 'vertical': 'horizontal']">
<div v-if="title" class="title">{{ title }}</div>
<a-row>
<slot></slot>
</a-row>
</div>
</template>
<script>
export default {
name: "DetailList",
props: {
term: {
type: String,
default: null
}
},
inject: {
col: {
type: Number
}
},
methods: {
}
}
</script>
<style scoped>
<template>
<div :class="['detail-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
<div v-if="title" class="title">{{ title }}</div>
<a-row>
<slot></slot>
</a-row>
</div>
</template>
<script>
import { Col } from 'ant-design-vue/es/grid/'
const Item = {
name: 'DetailListItem',
props: {
term: {
type: String,
default: '',
required: false
},
},
inject: {
col: {
type: Number
}
},
render () {
return (
<Col {...{props: responsive[this.col]}}>
<div class="term">{this.$props.term}</div>
<div class="content">{this.$slots.default}</div>
</Col>
)
}
}
const responsive = {
1: { xs: 24 },
2: { xs: 24, sm: 12 },
3: { xs: 24, sm: 12, md: 8 },
4: { xs: 24, sm: 12, md: 6 }
}
export default {
name: "DetailList",
Item: Item,
components: {
Col
},
props: {
title: {
type: String,
default: '',
required: false
},
col: {
type: Number,
required: false,
default: 3
},
size: {
type: String,
required: false,
default: 'large'
},
layout: {
type: String,
required: false,
default: 'horizontal'
}
},
provide () {
return {
col: this.col > 4 ? 4 : this.col
}
}
}
</script>
<style lang="scss">
.detail-list {
.title {
color: rgba(0,0,0,.85);
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
}
.term {
color: rgba(0,0,0,.85);
display: table-cell;
line-height: 20px;
margin-right: 8px;
padding-bottom: 16px;
white-space: nowrap;
&:after {
content: ":";
margin: 0 8px 0 2px;
position: relative;
top: -.5px;
}
}
.content {
color: rgba(0,0,0,.65);
display: table-cell;
line-height: 22px;
padding-bottom: 16px;
width: 100%;
}
&.small {
.title {
font-size: 14px;
color: rgba(0, 0, 0, .65);
font-weight: normal;
margin-bottom: 12px;
}
.term, .content {
padding-bottom: 8px;
}
}
&.large {
.term, .content {
padding-bottom: 16px;
}
.title {
font-size: 16px;
}
}
&.vertical {
.term {
padding-bottom: 8px;
}
.term, .content {
display: block;
}
}
}
</style>
\ No newline at end of file
src/views/profile/basic/Index.vue
<template>
<a-card :bordered="false">
basic
</a-card>
</template>
<script>
export default {}
</script>
<style scoped>
<template>
<page-layout>
<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/layout/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: parameter => {
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: parameter => {
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]
}
}
}
</script>
<style lang="scss" scoped>
.title {
color: rgba(0,0,0,.85);
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment