新增GloablFooter、标准列表

iczer

2018-07-26 b8db6b49b45c7115090a795e86f4f0f3e2feda7c

新增GloablFooter、标准列表

 src/components/layout/CommonPageLayout.vue

New file
@@ -0,0 +1,36 @@
<template>
  <div style="margin: -24px -24px 0px">
    <page-header :breadcrumb="breadcrumb"/>
    <div style="margin: 24px 24px 0px">
      <router-view  ref="page"/>
    </div>
  </div>
</template>

<script>
import PageHeader from '../page/PageHeader'
export default {
  name: 'CommonPageLayout',
  components: {PageHeader},
  data () {
    return {
      breadcrumb: []
    }
  },
  mounted () {
    this.getPageHeaderInfo()
  },
  beforeUpdate () {
    this.getPageHeaderInfo()
  },
  methods: {
    getPageHeaderInfo () {
      this.breadcrumb = this.$route.matched
    }
  }
}
</script>

<style scoped>

</style>

 src/components/layout/GloablFooter.vue

New file
@@ -0,0 +1,43 @@
<template>
  <div class="footer">
    <div class="links">
      <a>Pro首页</a>
      <a><a-icon type="github" /></a>
      <a>Ant Design</a>
    </div>
    <div class="copyright">
      Copyright<a-icon type="copyright" />2018 XXXXXXXXXXXXXXXXXX出品
    </div>
  </div>
</template>

<script>
import AIcon from 'vue-antd-ui/es/icon/icon'
export default {
  name: 'GloablFooter',
  components: {AIcon}
}
</script>

<style lang="less" scoped>
  .footer{
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;
    .copyright{
      color: rgba(0,0,0,.45);
      font-size: 14px;
    }
    .links{
      margin-bottom: 8px;
      a:not(:last-child) {
        margin-right: 40px;
      }
      a{
        color: rgba(0,0,0,.45);
        -webkit-transition: all .3s;
        transition: all .3s;
      }
    }
  }
</style>

 src/components/layout/GloablLayout.vue

@@ -14,7 +14,9 @@
      <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
        <slot></slot>
      </a-layout-content>
      <a-layout-footer></a-layout-footer>
      <a-layout-footer style="padding: 0px">
        <gloabl-footer />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
@@ -24,6 +26,7 @@
import GloablHeader from './GloablHeader'
import AIcon from 'vue-antd-ui/es/icon/icon'
import IMenu from '../menu/menu'
import GloablFooter from './GloablFooter'

const ALayoutSider = ALayout.Sider
const ALayoutHeader = ALayout.Header
@@ -36,6 +39,7 @@
export default {
  name: 'GloablLayout',
  components: {
    GloablFooter,
    AIcon,
    GloablHeader,
    ALayout,

 src/components/list/StandardList.vue

New file
@@ -0,0 +1,140 @@
<template>
  <div>
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="24">
          <head-info title="我的待办" content="8个任务" bordered/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="本周任务平均处理时间" content="32分钟" bordered/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="本周完成任务数" content="24个"/>
        </a-col>
      </a-row>
    </a-card>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="标准列表"
    >
      <div slot="extra">
        <a-radio-group>
          <a-radio-button>全部</a-radio-button>
          <a-radio-button>进行中</a-radio-button>
          <a-radio-button>等待中</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
      <a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
      <a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
        <a-list-item :key="i" v-for="i in 5">
          <a-list-item-meta
            description="那是一种内在的东西， 他们到达不了，也无法触及的"
          >
            <a-avatar slot="avatar" size="large" shape="square" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"/>
            <a slot="title">Alipay</a>
          </a-list-item-meta>
          <div slot="actions">
            <a>编辑</a>
          </div>
          <div slot="actions">
            <a-dropdown>
              <div slot="overlay">
                <a-menu>
                  <a-menu-item><a>编辑</a></a-menu-item>
                  <a-menu-item><a>删除</a></a-menu-item>
                </a-menu>
              </div>
              <a>更多<a-icon type="down"/></a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>Owner</span>
              <p>付晓晓</p>
            </div>
            <div class="list-content-item">
              <span>开始时间</span>
              <p>2018-07-26 22:44</p>
            </div>
            <div class="list-content-item">
              <a-progress :percent="80" style="width: 180px" />
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import ACard from 'vue-antd-ui/es/card/Card'
import ARow from 'vue-antd-ui/es/grid/Row'
import ACol from 'vue-antd-ui/es/grid/Col'
import HeadInfo from '../tool/HeadInfo'
import AButton from 'vue-antd-ui/es/button/button'
import AList from 'vue-antd-ui/es/list/index'
import AListItem from 'vue-antd-ui/es/list/Item'
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
import AProgress from 'vue-antd-ui/es/progress'
import ADropdown from 'vue-antd-ui/es/dropdown'
import AMenu from 'vue-antd-ui/es/menu/index'
import AIcon from 'vue-antd-ui/es/icon/icon'
import AButtonGroup from 'vue-antd-ui/es/button/button-group'
import AInput from 'vue-antd-ui/es/input/Input'
import AInputSearch from 'vue-antd-ui/es/input/Search'
import ARadioGroup from 'vue-antd-ui/es/radio/Group'
import ARadio from 'vue-antd-ui/es/radio'

const AListItemMeta = AListItem.Meta
const AMenuItem = AMenu.Item
const ARadioButton = ARadio.Button
export default {
  name: 'StandardList',
  components: {
    ARadioButton,
    ARadio,
    ARadioGroup,
    AInputSearch,
    AInput,
    AButtonGroup,
    AIcon,
    AMenuItem,
    AMenu,
    ADropdown,
    AProgress,
    AAvatar,
    AListItemMeta,
    AListItem,
    AList,
    AButton,
    HeadInfo,
    ACol,
    ARow,
    ACard}
}
</script>

<style lang="less" scoped>
  .ant-avatar-lg{
    width: 48px;
    height: 48px;
    line-height: 48px;
  }
  .list-content-item{
    color: rgba(0,0,0,.45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span{
      line-height: 20px;
    }
    p{
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }
</style>

 src/components/tool/HeadInfo.vue

New file
@@ -0,0 +1,42 @@
<template>
  <div class="head-info">
    <span>{{title}}</span>
    <p>{{content}}</p>
    <em v-if="bordered" />
  </div>
</template>

<script>
export default {
  name: 'HeadInfo',
  props: ['title', 'content', 'bordered']
}
</script>

<style lang="less" scoped>
  .head-info{
    position: relative;
    text-align: center;
  span{
    color: rgba(0,0,0,.45);
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 4px;
  };
  p{
    color: rgba(0,0,0,.85);
    font-size: 24px;
    line-height: 32px;
    margin: 0;
  };
  em{
    background-color: #e8e8e8;
    position: absolute;
    height: 56px;
    width: 1px;
    top: 0;
    right: 0;
  }
  }
</style>

 src/router/index.js

@@ -6,12 +6,14 @@
import NotPermit from '@/components/exception/403'
import ServerError from '@/components/exception/500'
import PageLayout from '@/components/layout/PageLayout'
import CommonPageLayout from '@/components/layout/CommonPageLayout'
import BasicForm from '@/components/form/BasicForm'
import StepForm from '@/components/form/stepForm/StepForm'
import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
import Success from '@/components/result/Success'
import Error from '@/components/result/Error'
import QueryList from '@/components/list/QueryList'
import StandardList from '@/components/list/StandardList'

Vue.use(Router)

@@ -52,7 +54,7 @@
    {
      path: '/list',
      name: '列表页',
      component: PageLayout,
      component: CommonPageLayout,
      icon: 'table',
      children: [
        {
@@ -64,7 +66,7 @@
        {
          path: '/form/primary',
          name: '标准表格',
          component: NotFound,
          component: StandardList,
          icon: 'none'
        },
        {
@@ -85,7 +87,7 @@
      path: '/detail',
      name: '详情页',
      icon: 'profile',
      component: PageLayout,
      component: CommonPageLayout,
      children: [
        {
          path: '/detail/basic',
@@ -105,7 +107,7 @@
      path: '/result',
      name: '结果页',
      icon: 'check-circle-o',
      component: PageLayout,
      component: CommonPageLayout,
      children: [
        {
          path: '/result/success',