新增卡片表格、搜索表格;升级vue-antd-ui版本至v1.0.0

chenghx

2018-07-27 31faa8ccb8296f3743df89a0f3dde043ffbc9176

新增卡片表格、搜索表格;升级vue-antd-ui版本至v1.0.0

 package.json

@@ -18,7 +18,7 @@
    "moment": "^2.22.2",
    "viser-vue": "^2.2.5",
    "vue": "^2.5.2",
    "vue-antd-ui": "^0.7.0",
    "vue-antd-ui": "^1.0.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {

 src/components/layout/RouterLayout.vue

New file
@@ -0,0 +1,13 @@
<template>
  <router-view />
</template>

<script>
export default {
  name: 'RouterLayout'
}
</script>

<style scoped>

</style>

 src/components/list/ArticleList.vue

New file
@@ -0,0 +1,19 @@
<template>
  <div>
    <a-card style="" :bordered="false">

    </a-card>
  </div>
</template>

<script>
import ACard from 'vue-antd-ui/es/card/Card'
export default {
  name: 'ArticleList',
  components: {ACard}
}
</script>

<style scoped>

</style>

 src/components/list/CardList.vue

New file
@@ -0,0 +1,94 @@
<template>
  <div >
    <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 :title="item.title" :description="item.content">
              <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large" />
              <div 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>
import AList from 'vue-antd-ui/es/list/index'
import AListItem from 'vue-antd-ui/es/list/Item'
import ACard from 'vue-antd-ui/es/card/Card'
import ACardMeta from 'vue-antd-ui/es/card/Meta'
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
import AButton from 'vue-antd-ui/es/button/button'
import AIcon from 'vue-antd-ui/es/icon/icon'

const dataSource = []

for (let i = 0; i < 11  ; i++) {
  dataSource.push({
    title: 'Alipay',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
    content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
  })
}
dataSource.push(null)
export default {
  name: 'CardList',
  components: {AIcon, AButton, AAvatar, ACardMeta, ACard, AListItem, AList},
  data () {
    return {
      dataSource
    }
  }
}
</script>

<style lang="less" 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%;
      a{
        color: rgba(0,0,0,.45);
        line-height: 22px;
        display: inline-block;
        width: 100%;
      }
      a:hover{
        color: #1890ff;
      }
    }
    li:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }
  }
  .new-btn{
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 188px;
  }
</style>

 src/components/list/SearchLayout.vue

New file
@@ -0,0 +1,47 @@
<template>
    <div>
      <div class="search-head">
        <div class="search-input">
          <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
        </div>
        <div style="padding: 0 24px">
          <a-tabs tabBarStyle="margin: 0">
            <a-tab-pane tab="文章" key="1"></a-tab-pane>
            <a-tab-pane tab="应用" key="2"></a-tab-pane>
            <a-tab-pane tab="项目" key="3"></a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <div class="search-content">
        <router-view />
      </div>
    </div>
</template>

<script>
import AInput from 'vue-antd-ui/es/input/Input'
import AInputGroup from 'vue-antd-ui/es/input/Group'
import AButton from 'vue-antd-ui/es/button/button'
import AInputSearch from 'vue-antd-ui/es/input/Search'
import ATabs from 'vue-antd-ui/es/tabs'

const ATabPane = ATabs.TabPane

export default {
  name: 'SearchLayout',
  components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput}
}
</script>

<style lang="less" scoped>
  .search-head{
    background-color: #fff;
    margin: -25px -24px -24px;
    .search-input{
      text-align: center;
    }
  }
  .search-content{
    margin-top: 48px;
  }
</style>

 src/router/index.js

@@ -6,7 +6,6 @@
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'
@@ -14,6 +13,9 @@
import Error from '@/components/result/Error'
import QueryList from '@/components/list/QueryList'
import StandardList from '@/components/list/StandardList'
import CardList from '@/components/list/CardList'
import SearchLayout from '@/components/list/SearchLayout'
import ArticleList from '@/components/list/ArticleList'

Vue.use(Router)

@@ -54,32 +56,40 @@
    {
      path: '/list',
      name: '列表页',
      component: CommonPageLayout,
      component: PageLayout,
      icon: 'table',
      children: [
        {
          path: '/form/query',
          path: '/list/query',
          name: '查询表格',
          component: QueryList,
          icon: 'none'
        },
        {
          path: '/form/primary',
          path: '/list/primary',
          name: '标准表格',
          component: StandardList,
          icon: 'none'
        },
        {
          path: '/form/card',
          path: '/list/card',
          name: '卡片表格',
          component: NotFound,
          component: CardList,
          icon: 'none'
        },
        {
          path: '/form/search',
          path: '/list/search',
          name: '搜索表格',
          component: NotFound,
          icon: 'none'
          component: SearchLayout,
          icon: 'none',
          children: [
            {
              path: '/list/search/article',
              name: '文章',
              component: ArticleList,
              icon: 'none'
            }
          ]
        }
      ]
    },
@@ -87,7 +97,7 @@
      path: '/detail',
      name: '详情页',
      icon: 'profile',
      component: CommonPageLayout,
      component: PageLayout,
      children: [
        {
          path: '/detail/basic',
@@ -107,7 +117,7 @@
      path: '/result',
      name: '结果页',
      icon: 'check-circle-o',
      component: CommonPageLayout,
      component: PageLayout,
      children: [
        {
          path: '/result/success',

 yarn.lock

@@ -4780,6 +4780,12 @@
  dependencies:
    rw "^1.3.2"

json2mq@^0.2.0:
  version "0.2.0"
  resolved "http://registry.npm.taobao.org/json2mq/download/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
  dependencies:
    string-convert "^0.2.0"

json3@3.3.2, json3@^3.3.2:
  version "3.3.2"
  resolved "http://registry.npm.taobao.org/json3/download/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
@@ -6854,6 +6860,10 @@
  version "1.0.0"
  resolved "http://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"

resize-observer-polyfill@^1.5.0:
  version "1.5.0"
  resolved "http://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"

resolve-cwd@^2.0.0:
  version "2.0.0"
  resolved "http://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -7440,6 +7450,10 @@
  version "1.1.0"
  resolved "http://registry.npm.taobao.org/strict-uri-encode/download/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"

string-convert@^0.2.0:
  version "0.2.1"
  resolved "http://registry.npm.taobao.org/string-convert/download/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"

string-length@^2.0.0:
  version "2.0.0"
  resolved "http://registry.npm.taobao.org/string-length/download/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -8013,9 +8027,9 @@
  dependencies:
    indexof "0.0.1"

vue-antd-ui@^0.7.0:
  version "0.7.0"
  resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-0.7.0.tgz#816b98f0ff595066cf928f5af6fa0aea67e04b76"
vue-antd-ui@^1.0.0:
  version "1.0.0"
  resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-1.0.0.tgz#b7fd61c3b3c9f3334f313a34a28e58e5a0e3ff8d"
  dependencies:
    add-dom-event-listener "^1.0.2"
    array-tree-filter "^2.1.0"
@@ -8029,9 +8043,11 @@
    dom-scroll-into-view "^1.2.1"
    enquire.js "^2.1.6"
    is-negative-zero "^2.0.0"
    json2mq "^0.2.0"
    lodash "^4.17.5"
    moment "^2.21.0"
    omit.js "^1.0.0"
    resize-observer-polyfill "^1.5.0"
    shallow-equal "^1.0.0"
    shallowequal "^1.0.2"
    warning "^3.0.0"