supplier_system/src/dashoo.cn/frontend_web/src/pages/system/resource/document.vue

<template>
  <el-card style="min-height: calc(100vh - 92px);">
    <div slot="header" style="height: 20px;">
      <span style="float: left;">
        <i class="icon icon-table2"></i>
      </span>
      <el-breadcrumb class="heading" style="float: left; margin-left: 5px">
        <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
        <el-breadcrumb-item>资料下载</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="background-color: white; width: 60%; margin: 0 auto; ">
      <el-table :data="fileList"
                stripe
                highlight-current-row
                size="mini">
        <el-table-column prop="Name"
                         align="center"
                         label="文件资料">
          <template slot-scope="scope">
            <el-link :href="getDownloadFile(scope.row.FileURL)"
                     target="_blank"
                     type="primary">{{ scope.row.Name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="CreateOn"
                         label="发布时间"
                         align="center"
                         width="141">
          <template slot-scope="scope">{{ jsTImeHandle(scope.row.CreateOn+'') }}</template>
        </el-table-column>
        <el-table-column width="80">
          <template slot-scope="scope"><span style="font-size: 15px; color: #f13f40">{{strNew(scope.row.CreateOn+'') }}</span></template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: 'notice',
    data () {
      return {
        fileList: [] // 文档列表
      }
    },
    created () {
      this.initFileListData()
    },
    methods: {
      // 获取文件列表
      initFileListData () {
        let _this = this
        // 传递列名
        const params = {
          colName: 'DocTab',
          RangeType: '1,3'
        }
        _this.$axios
          .get('/document/getdocumentnameandtime', { params })
          .then(function (response) {
            _this.fileList = response.data
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      getDownloadFile (val) {
        let urlArr = val.split('|')
        let retUrl = urlArr[0]
        // 内网服务器专用
        if (process.client && retUrl.indexOf('/upfile') === 0) {
          const myDomain = window.location.host
          retUrl = myDomain + '/' + retUrl
        }
        return 'http://' + retUrl
      },
      // 格式化时间
      jsTImeHandle (val) {
        if (val === '') {
          return '----'
        } else if (val === '0001-01-01T08:00:00+08:00') {
          return '----'
        } else if (val === '5000-01-01T23:59:59+08:00') {
          return '永久'
        } else {
          val = val.replace('T', ' ')
          return val.substring(0, 10)
        }
      },
      strNew (val) {
        try {
          let b = this.jsTImeHandle(val).split('-')
          let date = new Date(b[0], b[1], b[2])
          let newDate = new Date()
          if ((newDate - date) / (1000 * 60 * 60 * 24) < 30) {
            return '新'
          } else {
            return ''
          }
        } catch (e) {
          return ''
        }
      }
    }
  }
</script>

<style lang="scss">
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .el-pagination {
    margin: 1rem 0 2rem;
    text-align: right;
  }

  .plab {
    font-size: 13px;
    color: #999;
  }

  .triggerone {
    font-size: 13px;
    margin-left: 80px;
  }

  .plab {
    font-size: 13px;
    color: #999;
  }

  .docdelete .el-radio {
    padding: 8px 15px 0 0;
    margin-left: -2px;
  }

</style>