Skip to content

A
ant-design-pro-vue
Commit 86588f33 by Sendya
Options

Fixed bug 

Added CardList
parent 65970af1
Showing with 177 additions and 22 deletions
src/components/layout/LayoutBaseView.vue
<template>
<layout-main>
<route-view/>
<page-view />
</layout-main>
</template>
<script>
import LayoutMain from './LayoutMain'
import RouteView from './RouteView'
import PageView from './PageView'
export default {
name: "GlobalView",
components: {
LayoutMain,
RouteView
PageView
}
}
</script>
......
src/components/layout/PageHeader.vue
......@@ -135,7 +135,9 @@
line-height: 28px;
font-weight: 500;
color: rgba(0,0,0,.85);
margin-bottom: 12px;
margin-bottom: 16px;
flex: auto;
}
.logo {
width: 28px;
......@@ -160,6 +162,9 @@
min-width: 266px;
flex: 0 1 auto;
text-align: right;
&:empty {
display: none;
}
}
}
}
......
src/components/layout/PageLayout.vue
......@@ -5,18 +5,18 @@
<slot slot="action" name="action"></slot>
<slot slot="content" name="headerContent"></slot>
<div slot="content" v-if="!this.$slots.headerContent && desc">
<p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{ desc }}</p>
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
<div class="link">
<template v-for="(link, index) in linkList">
<a :key="index" :href="link.href">
<a-icon :type="link.icon" />{{ link.title }}
<a-icon :type="link.icon" /><span>{{ link.title }}</span>
</a>
</template>
</div>
</div>
<slot slot="extra" name="extra"></slot>
</page-header>
<div ref="content" class="content">
<div class="content">
<slot></slot>
</div>
</div>
......@@ -34,8 +34,31 @@
}
</script>
<style scoped>
<style lang="scss" scoped>
.content {
margin: 24px 24px 0;
.link {
margin-top: 16px;
a {
margin-right: 32px;
height: 24px;
line-height: 24px;
display: inline-block;
i {
font-size: 24px;
margin-right: 8px;
vertical-align: middle;
}
span {
height: 24px;
line-height: 24px;
display: inline-block;
vertical-align: middle;
}
}
}
}
</style>
\ No newline at end of file
src/components/layout/PageView.vue
<template>
<page-layout :desc="desc" :title="getTitle" :link-list="linkList">
<page-layout :desc="description" :title="getTitle" :link-list="linkList">
<div slot="extra" class="extra-img">
<img :src="extraImage"/>
</div>
<!-- keep-alive -->
<route-view></route-view>
<route-view ref="content"></route-view>
</page-layout>
</template>
......@@ -21,7 +21,7 @@
data () {
return {
title: '',
desc: '',
description: '',
linkList: [],
extraImage: ''
}
......@@ -42,12 +42,11 @@
methods: {
getPageHeaderInfo () {
// eslint-disable-next-line
console.log('route title:', this.$route.meta.title)
this.title = this.$route.meta.title
const content = this.$refs.content
// 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
const content = this.$refs.content.$children[0]
if (content) {
this.desc = content.desc
this.description = content.description
this.linkList = content.linkList
this.extraImage = content.extraImage
}
......
src/router/index.js
......@@ -47,7 +47,7 @@ export const asyncRouterMap = [
path: '/dashboard',
component: Layout,
name: 'dashboard',
redirect: '/dashboard/analysis',
redirect: '/dashboard/workplace',
meta: { title: '仪表盘', icon: 'dashboard' },
children: [
{
......@@ -102,7 +102,6 @@ export const asyncRouterMap = [
component: LayoutBase,
name: 'list',
redirect: '/list/query-list',
hidden: true,
meta: { title: '列表页', icon: 'table' },
children: [
{
......@@ -120,7 +119,7 @@ export const asyncRouterMap = [
{
path: '/list/card',
name: 'CardList',
component: () => import('../views/list/TableList'),
component: () => import('../views/list/CardList'),
meta: { title: '卡片列表' }
},
{
......
src/views/dashboard/Workplace.vue
......@@ -47,8 +47,13 @@
<a-list-item :key="index" v-for="(item, index) in activities">
<a-list-item-meta>
<a-avatar slot="avatar" :src="item.user.avatar" />
<div slot="title" v-html="item.template" />
<div slot="description">9小时前</div>
<div slot="title">
<span>{{ item.user.nickname }}</span>&nbsp;
在&nbsp;<a href="#">{{ item.project.name }}</a>&nbsp;
<span>{{ item.project.action }}</span>&nbsp;
<a href="#">{{ item.project.event }}</a>
</div>
<div slot="description">{{ item.time }}</div>
</a-list-item-meta>
</a-list-item>
</a-list>
......@@ -169,6 +174,8 @@
},
mounted() {
this.getProjects()
this.getActivity()
this.getTeams()
this.initRadar()
},
methods: {
......@@ -180,6 +187,18 @@
this.loading = false
})
},
getActivity() {
this.$http.get('/workplace/activity')
.then(res => {
this.activities = res.result
})
},
getTeams() {
this.$http.get('/workplace/teams')
.then(res => {
this.teams = res.result
})
},
initRadar() {
const dv = new DataSet.View().source(this.axisData)
......@@ -190,8 +209,6 @@
value: 'score'
})
console.log('dv.rows', dv.rows)
this.radarData = dv.rows
}
}
......
src/views/list/CardList.vue 0 → 100644
<template>
<div class="card-list" ref="content">
<a-list
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
:dataSource="dataSource"
>
<a-list-item slot="renderItem" slot-scope="item, index">
<template v-if="item === null">
<a-button class="new-btn" type="dashed">
<a-icon type="plus"/>
新增产品
</a-button>
</template>
<template v-else>
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{item.title}}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
<div class="meta-content" slot="description">{{item.content}}</div>
</a-card-meta>
<ul class="ant-card-actions" slot="actions">
<li><a>操作一</a></li>
<li><a>操作二</a></li>
</ul>
</a-card>
</template>
</a-list-item>
</a-list>
</div>
</template>
<script>
const dataSource = []
dataSource.push(null)
for (let i = 0; i < 11; i++) {
dataSource.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
})
}
export default {
name: "CardList",
data () {
return {
description: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
linkList: [
{ icon: 'rocket', href: '#', title: '快速开始' },
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
{ icon: 'file-text', href: '#', title: '产品文档' }
],
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
dataSource
}
}
}
</script>
<style lang="scss" scoped>
.card-avatar {
width: 48px;
height: 48px;
border-radius: 48px;
}
.ant-card-actions {
background: #f7f9fa;
li {
float: left;
text-align: center;
margin: 12px 0;
color: rgba(0, 0, 0, 0.45);
width: 50%;
&:not(:last-child) {
border-right: 1px solid #e8e8e8;
}
a {
color: rgba(0, 0, 0, .45);
line-height: 22px;
display: inline-block;
width: 100%;
&:hover {
color: #1890ff;
}
}
}
}
.new-btn {
background-color: #fff;
border-radius: 2px;
width: 100%;
height: 188px;
}
.meta-content {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 64px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</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