feat: add basic-list page

陈小婷

2020-11-26 2f75a948899713e10b200e0f39a48d4b62ef231e

feat: add basic-list page

 src/router/menus/modules/demo/page.ts

@@ -106,6 +106,10 @@
        },
        children: [
          {
            path: 'basic',
            name: '标准列表',
          },
          {
            path: 'card',
            name: 'routes.demo.page.listCard',
          },

 src/router/routes/modules/demo/page.ts

@@ -219,6 +219,14 @@
      },
      children: [
        {
          path: 'basic',
          name: 'ListBasicPage',
          component: () => import('/@/views/demo/page/list/basic/index.vue'),
          meta: {
            title: '标准列表',
          },
        },
        {
          path: 'card',
          name: 'ListCardPage',
          component: () => import('/@/views/demo/page/list/card/index.vue'),

 src/views/demo/page/list/basic/data.tsx

New file
@@ -0,0 +1,17 @@
export const cardList = (() => {
  const result: any[] = [];
  for (let i = 0; i < 6; i++) {
    result.push({
      id: i,
      title: 'Vben Admin',
      description: '基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统',
      datetime: '2020-11-26 17:39',
      extra: '编辑',
      icon: 'logos:vue',
      color: '#1890ff',
      author: 'Vben',
      percent: 20 * (i + 1),
    });
  }
  return result;
})();

 src/views/demo/page/list/basic/index.vue

New file
@@ -0,0 +1,150 @@
<template>
  <div :class="prefixCls">
    <a-page-header title="标准列表" :ghost="false" />
    <div :class="`${prefixCls}__top`">
      <a-row :gutter="12">
        <a-col :span="8" :class="`${prefixCls}__top-col`">
          <div>我的待办</div>
          <p>8个任务</p>
        </a-col>
        <a-col :span="8" :class="`${prefixCls}__top-col`">
          <div>本周任务平均处理时间</div>
          <p>32分钟</p>
        </a-col>
        <a-col :span="8" :class="`${prefixCls}__top-col`">
          <div>本周完成任务数</div>
          <p>24个任务</p>
        </a-col>
      </a-row>
    </div>

    <div :class="`${prefixCls}__content`">
      <a-list :pagination="pagination">
        <template v-for="item in list" :key="item.id">
          <a-list-item class="list">
            <a-list-item-meta>
              <template #avatar>
                <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
              </template>
              <template #title>
                <span>{{ item.title }}</span>
                <div class="extra" v-if="item.extra">
                  {{ item.extra }}
                </div>
              </template>
              <template #description>
                <div class="description">{{ item.description }}</div>
                <div class="info">
                  <div><span>Owner</span>{{ item.author }}</div>
                  <div><span>开始时间</span>{{ item.datetime }}</div>
                </div>
                <div class="progress">
                  <Progress :percent="item.percent" status="active" />
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>
<script lang="ts">
  import { Progress } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import Icon from '/@/components/Icon/index';
  import { cardList } from './data';

  export default defineComponent({
    components: { Icon, Progress },
    setup() {
      return {
        prefixCls: 'list-basic',
        list: cardList,
        pagination: {
          show: true,
          pageSize: 3,
        },
      };
    },
  });
</script>
<style lang="less" scoped>
  .list-basic {
    &__top {
      padding: 24px;
      margin: 24px 24px 0 24px;
      text-align: center;
      background: #fff;

      &-col {
        &:not(:last-child) {
          border-right: 1px dashed rgba(206, 206, 206, 0.4);
        }

        div {
          margin-bottom: 12px;
          font-size: 14px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.45);
        }

        p {
          margin: 0;
          font-size: 24px;
          line-height: 32px;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }

    &__content {
      padding: 24px;
      margin: 12px 24px;
      background: #fff;

      .list {
        position: relative;
      }

      .icon {
        font-size: 40px !important;
      }

      .extra {
        position: absolute;
        top: 20px;
        right: 15px;
        font-weight: normal;
        color: #1890ff;
        cursor: pointer;
      }

      .description {
        display: inline-block;
        width: 40%;
      }

      .info {
        display: inline-block;
        width: 30%;
        text-align: center;

        div {
          display: inline-block;
          padding: 0 20px;

          span {
            display: block;
          }
        }
      }

      .progress {
        display: inline-block;
        width: 15%;
        vertical-align: top;
      }
    }
  }
</style>