xiaoshi_system/src/views/report/components/reportFile/reportFileTable.vue

<template>
  <div class="reportFileTable">
    <el-container>
      <el-header style="display:flex;justify-content: space-between;">
        <div>
          <mySearch :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch>
          <!-- <el-form :inline="true">
            <el-form-item label="名称">
              <el-input v-model="form.fileName" size="small" placeholder="请输入文件名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="" size="small" @click="getList">查询</el-button>
            </el-form-item>
          </el-form> -->
        </div>
        <div>
          <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header">
          <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
          <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.reportFiles">
              <div>
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="suffix" label="类型" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.reportFiles">
              <div>
                <span>{{ scope.row.reportFiles[0].suffix }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="reportName" label="所属报告" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="personName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="creationTime" label="创建时间" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.creationTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-dropdown split-button type="primary" size="small">
                <P @click="handleEdit(scope.row)">编辑</P>

                <el-dropdown-menu slot="dropdown" class="text-align_center">
                  <el-dropdown-item @click.native="handleDownload(scope.row)">下载</el-dropdown-item>
                  <el-dropdown-item @click.native="preview(scope.row.reportFiles[0])">预览</el-dropdown-item>
                  <el-dropdown-item divided class="color-red"
                    @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
            @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
        </div>
      </el-main>
      <el-footer class="footer-common">
        <el-button @click="close">关 闭</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // table数据
      tableData: [],
      // 分页及总数信息
      queryParams: {
        current: 1,
        size: 10,
      },
      total: 0,
      // 检索字段
      searchFiled: [],
      // 检索字符串
      searchOption: {},
      //排序字段
      sort: [{ "orderBy": "createTime", "orderType": 1 }],
    }
  },
  mounted() {

  },
  methods: {

  },
}
</script>

<style lang="scss" scoped></style>