yxk-storeroom-system/src/views/archivesManage/fileImport/module/detail.vue

<template>
  <div class="import-detail-container">
    <ul class="import-tab">
      <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">案卷</li>
      <li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件</li>
      <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">资料</li>
    </ul>
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      height="calc(100vh - 504px)"
      @row-click="clickRowHandler"
      @selection-change="selectionChangeHandler"
    >
      <el-table-column prop="security_class" label="密级" align="center" width="80px" />
      <el-table-column prop="medium_type" label="载体类型" align="center" width="100px" />
      <el-table-column prop="micro_number" label="缩微号" align="center" width="80px" />
      <el-table-column prop="archive_no" label="档号" align="center" width="200px" />
      <el-table-column prop="page_qty" label="文件件数" align="center" width="100px" />
      <el-table-column prop="maintitle" label="案卷题名" align="center" show-overflow-tooltip width="240px" />
      <el-table-column prop="begin_date" label="起始时间" align="center" width="140px" />
      <el-table-column prop="end_date" label="终止时间" align="center" width="140px" />
      <el-table-column prop="archive_ctg_no" label="分类号" align="center" width="140px" />
      <el-table-column prop="subject_term" label="主题词" align="center" width="140px" />
      <el-table-column prop="remarks" label="附注" align="center" width="120px" />
      <el-table-column prop="retention" label="保管期限" align="center" width="120px" />
      <el-table-column prop="archive_year" label="年度" align="center" width="100px" />
      <el-table-column prop="fonds_no" label="全宗" align="center" width="100px" />
      <el-table-column prop="piece_no" label="卷号" align="center" width="100px" />
    </el-table>
    <!--分页组件-->
    <el-pagination
      :current-page="page.page"
      :total="page.total"
      :page-size="page.size"
      :pager-count="5"
      layout="total, prev, pager, next, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentPage"
    />
  </div>
</template>

<script>
import tableJson from './table.json'
export default {
  name: 'DataImport',
  components: { },
  data() {
    return {
      archivesTabIndex: 0,
      tableData: [],
      page: {
        page: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this.tableData = tableJson
  },
  methods: {
    changeActiveTab(index) {
      this.archivesTabIndex = index
    },
    // table
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // table
    selectionChangeHandler(val) {
      this.selections = val
    },
    handleSizeChange(size) {
      this.page.size = size
      this.page.page = 1
    },
    handleCurrentPage(val) {
      this.page.page = val
    }
  }
}
</script>

<style lang='scss' scoped>
.import-tab{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  li{
    padding: 10px 20px 14px 20px;
    font-size: 16px;
    color: #339CFF;
    cursor: pointer;
    &.active{
      position: relative;
      color: #fff;
      &::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 3px;
        border-radius: 3px;
        background-color: #fff;
      }
    }
  }
}
</style>