feat: add Mock Data for Workplace page

master
chenghx 7 years ago
parent fa7478b01b
commit cd988e20ab
  1. 83
      src/components/dashboard/WorkPlace.vue
  2. 32
      src/mock/common/activityData.js
  3. 44
      src/mock/common/index.js
  4. 1
      src/mock/index.js
  5. 15
      src/mock/workplace/index.js

@ -39,14 +39,12 @@
</a-card-grid>
</div>
</a-card>
<a-card title="动态" :bordered="false">
<a-card :loading="loading" title="动态" :bordered="false">
<a-list>
<a-list-item :key="n" v-for="n in 6">
<a-list-item :key="index" v-for="(item, index) in activities">
<a-list-item-meta>
<a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
<div slot="title">
曲丽丽 <a>高逼格设计天团</a> 新建项目 <a>六月迭代</a>
</div>
<a-avatar slot="avatar" :src="item.user.avatar" />
<div slot="title" v-html="item.template" />
<div slot="description">9小时前</div>
</a-list-item-meta>
</a-list-item>
@ -70,15 +68,17 @@
<radar />
</div>
</a-card>
<a-card title="团队" :bordered="false">
<a-row>
<a-col :span="12" v-for="n in 5" :key="n">
<a class="member">
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
<span>程序员日常</span>
</a>
</a-col>
</a-row>
<a-card :loading="loading" title="团队" :bordered="false">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{item.name}}</span>
</a>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
@ -126,12 +126,16 @@ export default {
return {
currUser: {},
projects: [],
loading: true
loading: true,
activities: [],
teams: []
}
},
mounted () {
this.currentUser()
this.getProjectList()
this.getActivites()
this.getTeams()
},
methods: {
currentUser () {
@ -150,6 +154,22 @@ export default {
this.projects = res.data
this.loading = false
})
},
getActivites () {
this.$axios({
method: 'get',
url: '/work/activity'
}).then(res => {
this.activities = res.data
})
},
getTeams () {
this.$axios({
method: 'get',
url: '/work/team'
}).then(res => {
this.teams = res.data
})
}
}
}
@ -217,14 +237,27 @@ export default {
width: 25%;
}
}
.member{
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0,0,0,.65);
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
}
}
}
}
</style>

@ -0,0 +1,32 @@
import {users, groups} from './index'
const events = [
{
type: 0,
event: '八月迭代'
},
{
type: 1,
event: '留言'
},
{
type: 2,
event: '项目进展'
}
]
const activities = users.map((user, index) => {
return {
user: Object.assign({}, user, {group: groups[user.groupId]}),
activity: events[index % events.length],
template: ''
}
})
const templates = [
(user, activity) => { return `${user.name} 在 <a >${user.group}</a> 新建项目 <a>${activity.event}</a>` },
(user, activity) => { return `${user.name} 在 <a >${user.group}</a> 发布了 <a>${activity.event}</a>` },
(user, activity) => { return `${user.name} 将 <a >${activity.event}</a> 更新至已发布状态` }
]
export {activities, templates}

@ -31,4 +31,46 @@ const logos = [
const admins = ['ICZER', 'JACK', 'LUIS', 'DAVID']
export {logos, sayings, positions, avatars, admins}
const groups = ['高逼格设计天团', '中二少女团', '科学搬砖组', '骗你学计算机', '程序员日常']
const users = [
{
name: '曲丽丽',
avatar: avatars[0],
groupId: 0
},
{
name: '付晓晓',
avatar: avatars[1],
groupId: 0
},
{
name: '林东东',
avatar: avatars[2],
groupId: 1
},
{
name: '周星星',
avatar: avatars[3],
groupId: 2
},
{
name: '朱偏右',
avatar: avatars[4],
groupId: 3
},
{
name: '勒个',
avatar: avatars[5],
groupId: 4
}
]
const teams = groups.map((item, index) => {
return {
name: item,
avatar: avatars[index]
}
})
export {logos, sayings, positions, avatars, admins, groups, users, teams}

@ -2,6 +2,7 @@ import Mock from 'mockjs'
import '@/mock/user/current'
import '@/mock/project'
import '@/mock/user/login'
import '@/mock/workplace'
//
Mock.setup({

@ -0,0 +1,15 @@
import Mock from 'mockjs'
import {activities, templates} from '../common/activityData'
import {teams} from '../../mock/common'
activities.forEach(item => {
item.template = templates[item.activity.type](item.user, item.activity)
})
Mock.mock('/work/activity', 'get', () => {
return activities
})
Mock.mock('/work/team', 'get', () => {
return teams
})
Loading…
Cancel
Save