Skip to content

Commit 9c77f04

Browse files
sendyasendya
committed
feat: Add /list/applications page
1 parent 3c32cd7 commit 9c77f04

File tree

4 files changed

+295
-1
lines changed

4 files changed

+295
-1
lines changed

‎src/config/router.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export const asyncRouterMap = [
117117
{
118118
path: '/list/search/application',
119119
name: 'SearchApplications',
120-
component: () => import('../views/list/TableList'),
120+
component: () => import('../views/list/search/Applications'),
121121
meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
122122
}
123123
]

‎src/utils/utils.less

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.textOverflow() {
2+
overflow: hidden;
3+
white-space: nowrap;
4+
text-overflow: ellipsis;
5+
word-break: break-all;
6+
}
7+
8+
.textOverflowMulti(@line: 3, @bg: #fff) {
9+
position: relative;
10+
max-height: @line * 1.5em;
11+
margin-right: -1em;
12+
padding-right: 1em;
13+
overflow: hidden;
14+
line-height: 1.5em;
15+
text-align: justify;
16+
&::before {
17+
position: absolute;
18+
right: 14px;
19+
bottom: 0;
20+
padding: 0 1px;
21+
background: @bg;
22+
content: '...';
23+
}
24+
&::after {
25+
position: absolute;
26+
right: 14px;
27+
width: 1em;
28+
height: 1em;
29+
margin-top: 0.2em;
30+
background: white;
31+
content: '';
32+
}
33+
}
34+
35+
// mixins for clearfix
36+
// ------------------------
37+
.clearfix() {
38+
zoom: 1;
39+
&::before,
40+
&::after {
41+
display: table;
42+
content: ' ';
43+
}
44+
&::after {
45+
clear: both;
46+
height: 0;
47+
font-size: 0;
48+
visibility: hidden;
49+
}
50+
}

‎src/views/list/search/Applications.vue

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<template>
2+
<div>
3+
<a-card :bordered="false" class="ant-pro-components-tag-select">
4+
<a-form :form="form" layout="inline">
5+
<standard-form-row title="所属类目" block style="padding-bottom: 11px;">
6+
<a-form-item>
7+
<tag-select>
8+
<tag-select-option value="Category1">类目一</tag-select-option>
9+
<tag-select-option value="Category2">类目二</tag-select-option>
10+
<tag-select-option value="Category3">类目三</tag-select-option>
11+
<tag-select-option value="Category4">类目四</tag-select-option>
12+
<tag-select-option value="Category5">类目五</tag-select-option>
13+
<tag-select-option value="Category6">类目六</tag-select-option>
14+
<tag-select-option value="Category7">类目七</tag-select-option>
15+
<tag-select-option value="Category8">类目八</tag-select-option>
16+
<tag-select-option value="Category9">类目九</tag-select-option>
17+
<tag-select-option value="Category10">类目十</tag-select-option>
18+
</tag-select>
19+
</a-form-item>
20+
</standard-form-row>
21+
22+
<standard-form-row title="其它选项" grid last>
23+
<a-row>
24+
<a-col :lg="8" :md="10" :sm="10" :xs="24">
25+
<a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="作者">
26+
<a-select
27+
style="max-width: 200px; width: 100%;"
28+
mode="multiple"
29+
placeholder="不限"
30+
v-decorator="['author']"
31+
@change="handleChange"
32+
>
33+
<a-select-option value="lisa">王昭君</a-select-option>
34+
</a-select>
35+
</a-form-item>
36+
</a-col>
37+
<a-col :lg="8" :md="10" :sm="10" :xs="24">
38+
<a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="好评度">
39+
<a-select
40+
style="max-width: 200px; width: 100%;"
41+
placeholder="不限"
42+
v-decorator="['rate']"
43+
>
44+
<a-select-option value="good">优秀</a-select-option>
45+
<a-select-option value="normal">普通</a-select-option>
46+
</a-select>
47+
</a-form-item>
48+
</a-col>
49+
</a-row>
50+
</standard-form-row>
51+
</a-form>
52+
</a-card>
53+
54+
<div class="ant-pro-pages-list-applications-filterCardList">
55+
<a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }" style="margin-top: 24px;">
56+
<a-list-item slot="renderItem" slot-scope="item">
57+
<a-card :body-style="{ paddingBottom: 20 }" hoverable>
58+
<a-card-meta :title="item.title">
59+
<template slot="avatar">
60+
<a-avatar size="small" :src="item.avatar"/>
61+
</template>
62+
</a-card-meta>
63+
<template slot="actions">
64+
<a-tooltip title="下载">
65+
<a-icon type="download" />
66+
</a-tooltip>
67+
<a-tooltip title="编辑">
68+
<a-icon type="edit" />
69+
</a-tooltip>
70+
<a-tooltip title="分享">
71+
<a-icon type="share-alt" />
72+
</a-tooltip>
73+
<a-dropdown>
74+
<a class="ant-dropdown-link">
75+
<a-icon type="ellipsis" />
76+
</a>
77+
<a-menu slot="overlay">
78+
<a-menu-item>
79+
<a href="javascript:;">1st menu item</a>
80+
</a-menu-item>
81+
<a-menu-item>
82+
<a href="javascript:;">2nd menu item</a>
83+
</a-menu-item>
84+
<a-menu-item>
85+
<a href="javascript:;">3rd menu item</a>
86+
</a-menu-item>
87+
</a-menu>
88+
</a-dropdown>
89+
</template>
90+
<div class="">
91+
<card-info active-user="100" new-user="999"></card-info>
92+
</div>
93+
</a-card>
94+
</a-list-item>
95+
</a-list>
96+
</div>
97+
</div>
98+
</template>
99+
100+
<script>
101+
import moment from 'moment'
102+
import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
103+
import CardInfo from './components/CardInfo'
104+
const TagSelectOption = TagSelect.Option
105+
const AvatarListItem = AvatarList.AvatarItem
106+
107+
export default {
108+
components: {
109+
AvatarList,
110+
AvatarListItem,
111+
Ellipsis,
112+
TagSelect,
113+
TagSelectOption,
114+
StandardFormRow,
115+
CardInfo
116+
},
117+
data () {
118+
return {
119+
data: [],
120+
form: this.$form.createForm(this),
121+
loading: true
122+
}
123+
},
124+
filters: {
125+
fromNow (date) {
126+
return moment(date).fromNow()
127+
}
128+
},
129+
mounted () {
130+
this.getList()
131+
},
132+
methods: {
133+
handleChange (value) {
134+
console.log(`selected ${value}`)
135+
},
136+
getList () {
137+
this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
138+
console.log('res', res)
139+
this.data = res.result
140+
this.loading = false
141+
})
142+
}
143+
}
144+
}
145+
</script>
146+
147+
<style lang="less" scoped>
148+
.ant-pro-components-tag-select {
149+
/deep/ .ant-pro-tag-select .ant-tag {
150+
margin-right: 24px;
151+
padding: 0 8px;
152+
font-size: 14px;
153+
}
154+
}
155+
.ant-pro-pages-list-projects-cardList {
156+
margin-top: 24px;
157+
158+
/deep/ .ant-card-meta-title {
159+
margin-bottom: 4px;
160+
}
161+
162+
/deep/ .ant-card-meta-description {
163+
height: 44px;
164+
overflow: hidden;
165+
line-height: 22px;
166+
}
167+
168+
.cardItemContent {
169+
display: flex;
170+
height: 20px;
171+
margin-top: 16px;
172+
margin-bottom: -4px;
173+
line-height: 20px;
174+
175+
> span {
176+
flex: 1 1;
177+
color: rgba(0,0,0,.45);
178+
font-size: 12px;
179+
}
180+
181+
/deep/ .ant-pro-avatar-list {
182+
flex: 0 1 auto;
183+
}
184+
}
185+
}
186+
</style>

‎src/views/list/search/components/CardInfo.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="cardInfo">
3+
<div>
4+
<p>活跃用户</p>
5+
<p>{{ activeUser }}</p>
6+
</div>
7+
<div>
8+
<p>新增用户</p>
9+
<p>{{ newUser }}</p>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
name: 'CardInfo',
17+
props: {
18+
activeUser: {
19+
type: [String, Number],
20+
default: 0
21+
},
22+
newUser: {
23+
type: [String, Number],
24+
default: 0
25+
}
26+
}
27+
}
28+
</script>
29+
30+
<style lang="less" scoped>
31+
@import "~@/components/index.less";
32+
@import "~@/utils/utils.less";
33+
34+
.cardInfo {
35+
36+
.clearfix();
37+
38+
margin-top: 16px;
39+
margin-left: 40px;
40+
& > div {
41+
position: relative;
42+
float: left;
43+
width: 50%;
44+
text-align: left;
45+
p {
46+
margin: 0;
47+
font-size: 24px;
48+
line-height: 32px;
49+
}
50+
p:first-child {
51+
margin-bottom: 4px;
52+
color: @text-color-secondary;
53+
font-size: 12px;
54+
line-height: 20px;
55+
}
56+
}
57+
}
58+
</style>

0 commit comments

Comments
 (0)