jy-docs/jydocs-pc/src/views/UserDocs.vue

<template>
  <div class="user-docs">
    <div class="user-docs-header">
      <span class="u-d-title">{{ title }}</span>
    </div>
    <div class="user-docs-content">
      <div class="u-d-header">
        <span class="u-d-h-l">文件名</span>
        <span class="u-d-h-r">
          <span class="u-d-h-item time">下载时间</span>
          <span class="u-d-h-item size">大小</span>
        </span>
      </div>
      <div class="user-d-list" v-loading="listState.loading">
        <doc-card
          v-for="(item, index) in listState.list"
          cardType="oneline"
          :key="index"
          :title="item.DocName"
          :docType="item.docFileType"
          :subInfo="calcSubInfo(item)"
          @onClick="toDocDetail(item)"
        />
        <no-data v-if="listState.list.length === 0 && listState.loaded">暂无我的文库</no-data>
      </div>
      <div class="user-docs-pagination">
        <el-pagination
          background
          layout="prev, pager, next, ->, total"
          :hide-on-single-page="true"
          :current-page="listState.pageNum"
          :page-size="listState.pageSize"
          :total="listState.total"
          @current-change="onPageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Pagination } from 'element-ui'
import DocCard from '@/components/doc-item-card/Card'
import NoData from '@/components/NoData'
import { getUserDocs } from '../api/modules/user'
import { dateFormatter, formatSize } from '@/utils/'
import { mixinBackground } from '@/utils/mixins'

export default {
  name: 'user-docs',
  mixins: [mixinBackground],
  components: {
    [Pagination.name]: Pagination,
    DocCard,
    NoData
  },
  data () {
    return {
      title: '我的文库',
      listState: {
        loaded: false, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 10, // 每页多少条数据
        total: 0, // 一共多少条数据
        list: [] // 查询请求返回的数据
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const query = {
        sign: 0,
        num: this.listState.pageNum,
        size: this.listState.pageSize
      }
      console.log(query)
      this.listState.loading = true
      this.listState.loaded = false
      const r = await getUserDocs(query)
      this.listState.loading = false
      this.listState.loaded = true
      const res = r.data
      if (res.error_code === 0) {
        this.listState.total = res.data.total
        this.listState.list = res.data.list || []
      }
    },
    toDocDetail (item) {
      const { DocId: id } = item
      this.$router.push({
        name: 'content',
        params: { id }
      })
    },
    onPageChange (p) {
      this.listState.pageNum = p
      this.getList()
    },
    calcSubInfo (item) {
      const { DocFileSize, CreateAt, UpdateAt, DeletedAt } = item
      return [dateFormatter(CreateAt * 1000, 'yyyy-MM-dd'), formatSize(DocFileSize)]
    }
  }
}
</script>

<style lang="scss" scoped>
.user-docs {
  background-color: #fff;
  margin: 0 auto;
  .user-docs-header {
    padding-top: 48px;
    .u-d-title {
      font-size: 24px;
      line-height: 36px;
      color: #1D1D1D;
    }
  }
  .user-docs-content {
    margin-top: 48px;
    .u-d-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      height: 48px;
      font-size: 14px;
      line-height: 24px;
      color: #686868;
      border-radius: 4px;
      background-color: #F5F6F7;
    }
    .user-d-list {
      border-top: 1px solid transparent;
      min-height: 500px;
    }
    .u-d-h-r {
      display: inline-block;
      width: 170px;
      .u-d-h-item {
        display: inline-block;
        width: 50%;
        &.size {
          text-align: center;
        }
      }
    }
    
    ::v-deep {
      .subinfo-container {
        display: inline-block;
        margin-right: 10px;
        width: 170px;
        .subinfo-item {
          display: inline-block;
          margin-right: 0;
          width: 50%;
          &.last {
            text-align: center;
          }
        }
      }
    }
  }
  .user-docs-pagination {
    margin-top: 28px;
    padding-bottom: 60px;
    text-align: right;
  }
}
</style>