feat: add search projects

src/config/router.config.js

@@ -111,7 +111,7 @@ export const asyncRouterMap = [
               {
                 path: '/list/search/project',
                 name: 'SearchProjects',
-                component: () => import('../views/list/TableList'),
+                component: () => import('../views/list/search/Projects'),
                 meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
               },
               {

src/mock/services/article.js

@@ -1,5 +1,16 @@
 import Mock from 'mockjs2'
-import { builder } from '../util'
+import { builder, getQueryParameters } from '../util'
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack'
+]
 
 const avatar = ['https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
   'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
@@ -7,6 +18,14 @@ const avatar = ['https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE
   'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
   'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
 ]
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png'
+]
+
 const owner = [
   '付小小',
   '吴加好',
@@ -19,9 +38,14 @@ const content = '段落示意：蚂蚁金服设计平台 ant.design，用最小
 const description = '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
 const href = 'https://ant.design'
 
-const article = () => {
+const article = (options) => {
+  const queryParameters = getQueryParameters(options)
+  console.log('queryParameters', queryParameters)
+  if (queryParameters && !queryParameters.count) {
+    queryParameters.count = 5
+  }
   const data = []
-  for (let i = 0; i < 5; i++) {
+  for (let i = 0; i < queryParameters.count; i++) {
     const tmpKey = i + 1
     const num = parseInt(Math.random() * (4 + 1), 10)
     data.push({
@@ -35,8 +59,28 @@ const article = () => {
       message: Mock.mock('@integer(1, 999)'),
       description: description,
       href: href,
-      title: 'Alipay',
-      updatedAt: Mock.mock('@datetime')
+      title: titles[ i % 8 ],
+      updatedAt: Mock.mock('@datetime'),
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1'
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2'
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3'
+        }
+      ],
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)]
     })
   }
   return builder(data)

src/views/list/search/Projects.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <a-card :bordered="false" class="ant-pro-components-tag-select">
+      <a-form :form="form" layout="inline">
+        <standard-form-row title="所属类目" block style="padding-bottom: 11px;">
+          <a-form-item>
+            <tag-select>
+              <tag-select-option value="Category1">类目一</tag-select-option>
+              <tag-select-option value="Category2">类目二</tag-select-option>
+              <tag-select-option value="Category3">类目三</tag-select-option>
+              <tag-select-option value="Category4">类目四</tag-select-option>
+              <tag-select-option value="Category5">类目五</tag-select-option>
+              <tag-select-option value="Category6">类目六</tag-select-option>
+              <tag-select-option value="Category7">类目七</tag-select-option>
+              <tag-select-option value="Category8">类目八</tag-select-option>
+              <tag-select-option value="Category9">类目九</tag-select-option>
+              <tag-select-option value="Category10">类目十</tag-select-option>
+            </tag-select>
+          </a-form-item>
+        </standard-form-row>
+
+        <standard-form-row title="其它选项" grid last>
+          <a-row>
+            <a-col :lg="8" :md="10" :sm="10" :xs="24">
+              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="作者">
+                <a-select
+                  style="max-width: 200px; width: 100%;"
+                  mode="multiple"
+                  placeholder="不限"
+                  v-decorator="['author']"
+                  @change="handleChange"
+                >
+                  <a-select-option value="lisa">王昭君</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="8" :md="10" :sm="10" :xs="24">
+              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="好评度">
+                <a-select
+                  style="max-width: 200px; width: 100%;"
+                  placeholder="不限"
+                  v-decorator="['rate']"
+                >
+                  <a-select-option value="good">优秀</a-select-option>
+                  <a-select-option value="normal">普通</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </standard-form-row>
+      </a-form>
+    </a-card>
+
+    <div class="ant-pro-pages-list-projects-cardList">
+      <a-list :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
+        <a-list-item slot="renderItem" slot-scope="item">
+          <a-card class="ant-pro-pages-list-projects-card" hoverable>
+            <img slot="cover" :src="item.cover" :alt="item.title" />
+            <a-card-meta :title="item.title">
+              <template slot="description">
+                <ellipsis :length="50">{{ item.description }}</ellipsis>
+              </template>
+            </a-card-meta>
+            <div class="cardItemContent">
+              <span>{{ item.updatedAt | fromNow }}</span>
+              <div class="avatarList">
+                <avatar-list size="mini">
+                  <avatar-list-item
+                    v-for="(member, i) in item.members"
+                    :key="`${item.id}-avatar-${i}`"
+                    :src="member.avatar"
+                    :tips="member.name"
+                  />
+                </avatar-list>
+              </div>
+            </div>
+          </a-card>
+        </a-list-item>
+      </a-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
+const TagSelectOption = TagSelect.Option
+const AvatarListItem = AvatarList.AvatarItem
+
+export default {
+  components: {
+    AvatarList,
+    AvatarListItem,
+    Ellipsis,
+    TagSelect,
+    TagSelectOption,
+    StandardFormRow
+  },
+  data () {
+    return {
+      data: [],
+      form: this.$form.createForm(this)
+    }
+  },
+  filters: {
+    fromNow (date) {
+      return moment(date).fromNow()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChange (value) {
+      console.log(`selected ${value}`)
+    },
+    getList () {
+      this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
+        console.log('res', res)
+        this.data = res.result
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-pro-components-tag-select {
+  /deep/ .ant-pro-tag-select .ant-tag {
+    margin-right: 24px;
+    padding: 0 8px;
+    font-size: 14px;
+  }
+}
+.ant-pro-pages-list-projects-cardList {
+  margin-top: 24px;
+
+  /deep/ .ant-card-meta-title {
+    margin-bottom: 4px;
+  }
+
+  /deep/ .ant-card-meta-description {
+    height: 44px;
+    overflow: hidden;
+    line-height: 22px;
+  }
+
+  .cardItemContent {
+    display: flex;
+    height: 20px;
+    margin-top: 16px;
+    margin-bottom: -4px;
+    line-height: 20px;
+
+    > span {
+      flex: 1 1;
+      color: rgba(0,0,0,.45);
+      font-size: 12px;
+    }
+
+    /deep/ .ant-pro-avatar-list {
+      flex: 0 1 auto;
+    }
+  }
+}
+</style>