weiyuan-document-web/src/views/dashboard/index.vue

<template>
  <div>
    <div class="title">最新上传</div>
    <xy-table :height="300" :action="index" :req-opt="select1" :table-item="table"></xy-table>

    <div class="title">热门文件</div>
    <xy-table :height="300" :action="index" :req-opt="select2" :table-item="table"></xy-table>
  </div>
</template>

<script>
import { index } from '@/api/system/baseForm'

  export default {
    data() {
      return {
        select1: {
          table_name: 'materials',
          sort_name: 'created_at',
          sort_type: 'desc'
        },
        select2: {
          table_name: 'materials',
          sort_name: 'dianjiliang',
          sort_type: 'desc'
        },
        table: [
          {
            type: 'index',
            width: 60
          },
          {
            label: '文件',
            width: 180,
            customFn: row => {
              return (
                <div>{(row?.nianfen && row?.wenjian && row?.bianhao) ? `${row.nianfen} | ${row.wenjian} | ${row.bianhao}` : ''}</div>
              )
            }
          },
          {
            label: '标题',
            prop: 'biaoti',
            width: 140
          },
          {
            label: '类型',
            prop: 'leixing',
            width: 140,
            formatter: (data, row, val) => {
              let map = new Map([
                [1,'流程文件'],
                [2,'表单文件'],
                [3,'岗位工作及标准'],
                [4,'部门工作职责'],
                [5,'规章制度管理']
              ])
              return map.get(val)
            }
          },
          {
            label: '审核部门',
            prop: 'id_material_shenhebumen_depts_material_id_relation.name',
            width: 140
          },
          {
            label: '标签',
            minWidht: 180,
            align: 'left',
            customFn:row => {
              return (
                <div>{
                  row.id_material_biaoqian_tags_material_id_relation.map(i => {
                    return (
                      <span style="padding-left: 10px;">{ i.mingcheng }</span>
                    )
                  })
                }</div>
              )
            }
          },
          {
            label: '文件',
            minWidht: 200,
            align: 'left',
            customFn:row => {
              return (
                <div>{
                  row.id_material_fujian_uploads_material_id_relation.map(i => {
                    return (
                      <a href={i.url} download={i.name} class="uploaded-a" style="padding-left: 10px;">{ i.name }</a>
                    )
                  })
                }</div>
              )
            }
          }
        ]
      }
    },
    methods: {
      index,
    },
    created() {

    },
    mounted() {
    },
    destroyed() {
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;

    padding: 10px 4px;
  }

  .uploaded-a {
    color: red;
    text-decoration: none;
    transition: all 0.2s;
  }

  .uploaded-a:hover {
    color: red;
    text-decoration: underline;
  }

</style>