blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-05 07:27:06 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chenghx 2018-07-27 15:54:54 +08:00
parent 2381c9af25
commit 31faa8ccb8
7 changed files with 214 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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": {

13
src/components/layout/RouterLayout.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<router-view />
</template>
<script>
export default {
name: 'RouterLayout'
}
</script>
<style scoped>
</style>

19
src/components/list/ArticleList.vue Normal file
View 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>

94
src/components/list/CardList.vue Normal file
View 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>

47
src/components/list/SearchLayout.vue Normal file
View 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>

32
src/router/index.js
View File

@ -6,7 +6,6 @@ import NotFound from '@/components/exception/404'
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 Success from '@/components/result/Success'
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 @@ export default new Router({
{
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 @@ export default new Router({
path: '/detail',
name: '详情页',
icon: 'profile',
component: CommonPageLayout,
component: PageLayout,
children: [
{
path: '/detail/basic',
@ -107,7 +117,7 @@ export default new Router({
path: '/result',
name: '结果页',
icon: 'check-circle-o',
component: CommonPageLayout,
component: PageLayout,
children: [
{
path: '/result/success',

22
yarn.lock
View File

@ -4780,6 +4780,12 @@ json2module@^0.0.3:
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 @@ requires-port@^1.0.0:
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 @@ strict-uri-encode@^1.0.0:
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 @@ vm-browserify@0.0.4:
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 @@ vue-antd-ui@^0.7.0:
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"