yxk-electronic-archives/src/views/collectReorganizi/collectionLibrary/module/fourTest/index.vue

<template>
  <!--四性检测-->
  <el-dialog class="fileUpload-dialog" title="四性检测" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="fourTestVisible">
    <div class="setting-dialog">
      <div class="fourTest-container">
        <el-table :data="tableData">
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column prop="archive_no" label="档号" width="200" />
          <el-table-column prop="maintitle" label="题名" width="160" />
          <el-table-column prop="operationType" label="准确性" />
          <el-table-column prop="file" label="完整性" />
          <el-table-column prop="createDate" label="可用性" />
          <el-table-column prop="createDate" label="安全性" />
        </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>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="fourTestVisible = false">取消</el-button>
        <el-button type="primary" @click.native="handleComfireTest">确定</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'FourTest',
  components: { },
  mixins: [],
  data() {
    return {
      fourTestVisible: false,
      tableData: [],
      page: {
        page: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {

  },
  mounted() {
    // console.log(this.tableData)
  },
  methods: {
    handleComfireTest() {
      this.fourTestVisible = false
      this.$message({
        message: '已成功加入检测列表！',
        type: 'success'
      })
    },
    handleSizeChange(size) {
      this.page.size = size
      this.page.page = 1
    },
    handleCurrentPage(val) {
      this.page.page = val
    }
  }
}
</script>

<style lang='scss' scoped>
  ::v-deep .el-dialog{
    width: 815px;
  }
</style>