feat: add Mock Data for Workplace page

chenghx

2018-08-09 cd988e20aba711a15d6675322bb823b4843b3400

feat: add Mock Data for Workplace page

 src/components/dashboard/WorkPlace.vue

@@ -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 @@
    return {
      currUser: {},
      projects: [],
      loading: true
      loading: true,
      activities: [],
      teams: []
    }
  },
  mounted () {
    this.currentUser()
    this.getProjectList()
    this.getActivites()
    this.getTeams()
  },
  methods: {
    currentUser () {
@@ -149,6 +153,22 @@
      }).then(res => {
        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 @@
      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>

 src/mock/common/activityData.js

New file
@@ -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}

 src/mock/common/index.js

@@ -31,4 +31,46 @@

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}

 src/mock/index.js

@@ -2,6 +2,7 @@
import '@/mock/user/current'
import '@/mock/project'
import '@/mock/user/login'
import '@/mock/workplace'

// 设置全局延时
Mock.setup({

 src/mock/workplace/index.js

New file
@@ -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
})