feat: Add /list/applications page

FeiQinZDF · Apr 19, 2019 · 9c77f04 · 9c77f04
1 parent 3c32cd7
commit 9c77f04
Show file tree

Hide file tree

Showing 4 changed files with 295 additions and 1 deletion.
diff --git a/src/config/router.config.js b/src/config/router.config.js
@@ -117,7 +117,7 @@ export const asyncRouterMap = [
               {
                 path: '/list/search/application',
                 name: 'SearchApplications',
-                component: () => import('../views/list/TableList'),
+                component: () => import('../views/list/search/Applications'),
                 meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
               }
             ]

diff --git a/src/utils/utils.less b/src/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/views/list/search/Applications.vue b/src/views/list/search/Applications.vue
@@ -0,0 +1,186 @@
+<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-applications-filterCardList">
+      <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }" style="margin-top: 24px;">
+        <a-list-item slot="renderItem" slot-scope="item">
+          <a-card :body-style="{ paddingBottom: 20 }" hoverable>
+            <a-card-meta :title="item.title">
+              <template slot="avatar">
+                <a-avatar size="small" :src="item.avatar"/>
+              </template>
+            </a-card-meta>
+            <template slot="actions">
+              <a-tooltip title="下载">
+                <a-icon type="download" />
+              </a-tooltip>
+              <a-tooltip title="编辑">
+                <a-icon type="edit" />
+              </a-tooltip>
+              <a-tooltip title="分享">
+                <a-icon type="share-alt" />
+              </a-tooltip>
+              <a-dropdown>
+                <a class="ant-dropdown-link">
+                  <a-icon type="ellipsis" />
+                </a>
+                <a-menu slot="overlay">
+                  <a-menu-item>
+                    <a href="javascript:;">1st menu item</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:;">2nd menu item</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:;">3rd menu item</a>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </template>
+            <div class="">
+              <card-info active-user="100" new-user="999"></card-info>
+            </div>
+          </a-card>
+        </a-list-item>
+      </a-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
+import CardInfo from './components/CardInfo'
+const TagSelectOption = TagSelect.Option
+const AvatarListItem = AvatarList.AvatarItem
+
+export default {
+  components: {
+    AvatarList,
+    AvatarListItem,
+    Ellipsis,
+    TagSelect,
+    TagSelectOption,
+    StandardFormRow,
+    CardInfo
+  },
+  data () {
+    return {
+      data: [],
+      form: this.$form.createForm(this),
+      loading: true
+    }
+  },
+  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
+        this.loading = false
+      })
+    }
+  }
+}
+</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>
diff --git a/src/views/list/search/components/CardInfo.vue b/src/views/list/search/components/CardInfo.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="cardInfo">
+    <div>
+      <p>活跃用户</p>
+      <p>{{ activeUser }}</p>
+    </div>
+    <div>
+      <p>新增用户</p>
+      <p>{{ newUser }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CardInfo',
+  props: {
+    activeUser: {
+      type: [String, Number],
+      default: 0
+    },
+    newUser: {
+      type: [String, Number],
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/components/index.less";
+@import "~@/utils/utils.less";
+
+.cardInfo {
+
+  .clearfix();
+
+  margin-top: 16px;
+  margin-left: 40px;
+  & > div {
+    position: relative;
+    float: left;
+    width: 50%;
+    text-align: left;
+    p {
+      margin: 0;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    p:first-child {
+      margin-bottom: 4px;
+      color: @text-color-secondary;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+}
+</style>