Skip to content

Commit 995d821

Browse files
sendyasendya
committed
feat: add search projects
1 parent cc79091 commit 995d821

File tree

3 files changed

+216
-6
lines changed

3 files changed

+216
-6
lines changed

‎src/config/router.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export const asyncRouterMap = [
111111
{
112112
path: '/list/search/project',
113113
name: 'SearchProjects',
114-
component: () => import('../views/list/TableList'),
114+
component: () => import('../views/list/search/Projects'),
115115
meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
116116
},
117117
{

‎src/mock/services/article.js‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,31 @@
11
import Mock from 'mockjs2'
2-
import { builder } from '../util'
2+
import { builder, getQueryParameters } from '../util'
3+
4+
const titles = [
5+
'Alipay',
6+
'Angular',
7+
'Ant Design',
8+
'Ant Design Pro',
9+
'Bootstrap',
10+
'React',
11+
'Vue',
12+
'Webpack'
13+
]
314

415
const avatar = ['https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
516
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
617
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
718
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
819
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
920
]
21+
22+
const covers = [
23+
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
24+
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
25+
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
26+
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png'
27+
]
28+
1029
const owner = [
1130
'付小小',
1231
'吴加好',
@@ -19,9 +38,14 @@ const content = '段落示意：蚂蚁金服设计平台 ant.design，用最小
1938
const description = '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
2039
const href = 'https://ant.design'
2140

22-
const article = () => {
41+
const article = (options) => {
42+
const queryParameters = getQueryParameters(options)
43+
console.log('queryParameters', queryParameters)
44+
if (queryParameters && !queryParameters.count) {
45+
queryParameters.count = 5
46+
}
2347
const data = []
24-
for (let i = 0; i < 5; i++) {
48+
for (let i = 0; i < queryParameters.count; i++) {
2549
const tmpKey = i + 1
2650
const num = parseInt(Math.random() * (4 + 1), 10)
2751
data.push({
@@ -35,8 +59,28 @@ const article = () => {
3559
message: Mock.mock('@integer(1, 999)'),
3660
description: description,
3761
href: href,
38-
title: 'Alipay',
39-
updatedAt: Mock.mock('@datetime')
62+
title: titles[ i % 8 ],
63+
updatedAt: Mock.mock('@datetime'),
64+
members: [
65+
{
66+
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
67+
name: '曲丽丽',
68+
id: 'member1'
69+
},
70+
{
71+
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
72+
name: '王昭君',
73+
id: 'member2'
74+
},
75+
{
76+
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
77+
name: '董娜娜',
78+
id: 'member3'
79+
}
80+
],
81+
activeUser: Math.ceil(Math.random() * 100000) + 100000,
82+
newUser: Math.ceil(Math.random() * 1000) + 1000,
83+
cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)]
4084
})
4185
}
4286
return builder(data)

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

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
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-projects-cardList">
55+
<a-list :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
56+
<a-list-item slot="renderItem" slot-scope="item">
57+
<a-card class="ant-pro-pages-list-projects-card" hoverable>
58+
<img slot="cover" :src="item.cover" :alt="item.title" />
59+
<a-card-meta :title="item.title">
60+
<template slot="description">
61+
<ellipsis :length="50">{{ item.description }}</ellipsis>
62+
</template>
63+
</a-card-meta>
64+
<div class="cardItemContent">
65+
<span>{{ item.updatedAt | fromNow }}</span>
66+
<div class="avatarList">
67+
<avatar-list size="mini">
68+
<avatar-list-item
69+
v-for="(member, i) in item.members"
70+
:key="`${item.id}-avatar-${i}`"
71+
:src="member.avatar"
72+
:tips="member.name"
73+
/>
74+
</avatar-list>
75+
</div>
76+
</div>
77+
</a-card>
78+
</a-list-item>
79+
</a-list>
80+
</div>
81+
</div>
82+
</template>
83+
84+
<script>
85+
import moment from 'moment'
86+
import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
87+
const TagSelectOption = TagSelect.Option
88+
const AvatarListItem = AvatarList.AvatarItem
89+
90+
export default {
91+
components: {
92+
AvatarList,
93+
AvatarListItem,
94+
Ellipsis,
95+
TagSelect,
96+
TagSelectOption,
97+
StandardFormRow
98+
},
99+
data () {
100+
return {
101+
data: [],
102+
form: this.$form.createForm(this)
103+
}
104+
},
105+
filters: {
106+
fromNow (date) {
107+
return moment(date).fromNow()
108+
}
109+
},
110+
mounted () {
111+
this.getList()
112+
},
113+
methods: {
114+
handleChange (value) {
115+
console.log(`selected ${value}`)
116+
},
117+
getList () {
118+
this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
119+
console.log('res', res)
120+
this.data = res.result
121+
})
122+
}
123+
}
124+
}
125+
</script>
126+
127+
<style lang="less" scoped>
128+
.ant-pro-components-tag-select {
129+
/deep/ .ant-pro-tag-select .ant-tag {
130+
margin-right: 24px;
131+
padding: 0 8px;
132+
font-size: 14px;
133+
}
134+
}
135+
.ant-pro-pages-list-projects-cardList {
136+
margin-top: 24px;
137+
138+
/deep/ .ant-card-meta-title {
139+
margin-bottom: 4px;
140+
}
141+
142+
/deep/ .ant-card-meta-description {
143+
height: 44px;
144+
overflow: hidden;
145+
line-height: 22px;
146+
}
147+
148+
.cardItemContent {
149+
display: flex;
150+
height: 20px;
151+
margin-top: 16px;
152+
margin-bottom: -4px;
153+
line-height: 20px;
154+
155+
> span {
156+
flex: 1 1;
157+
color: rgba(0,0,0,.45);
158+
font-size: 12px;
159+
}
160+
161+
/deep/ .ant-pro-avatar-list {
162+
flex: 0 1 auto;
163+
}
164+
}
165+
}
166+
</style>

0 commit comments

Comments
 (0)