hp-storeroom-system/src/views/archivesManage/fileImport/importLog/index.vue

<template>
  <div>
    <div class="head-container" style="display: flex; justify-content: flex-start;">
      <div class="head-search" style="margin-bottom: 0;">
        <!-- <date-range-picker v-model="query.startTime" class="date-item" /> -->
        <el-input v-model="query.search" clearable size="small" placeholder="文件名搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" />
        <rrOperation />
      </div>
      <crudOperation />
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="selectionChangeHandler" @row-dblclick="handleDbClick">
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column prop="name" label="导入数据包" width="300px" />
      <el-table-column prop="status" label="导入状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 0" class="import-loading">导入中</div>
          <div v-if="scope.row.status === 1">已完成</div>
          <!-- <div v-if="scope.row.status === 2" class="import-error">导入失败</div> -->
        </template>
      </el-table-column>
      <el-table-column prop="archivesNum" label="读取数量" />
      <el-table-column prop="normalNum" label="成功数量" />
      <el-table-column prop="skipNum" label="跳过数量" />
      <el-table-column prop="coverNum" label="覆盖数量" />
      <el-table-column prop="errorNum" label="失败数量" />
      <el-table-column prop="createTime" label="操作日期">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime | parseTime }}</div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />

    <el-dialog class="import-dialog" :close-on-click-modal="false" :visible.sync="detailVisible" title="导入详情" @closed="handleClose">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <ListPre
          ref="importTableList"
          :is-log-or-preview="isLogOrPreview"
          :hp-id="hpId"
          :initial-table-data="previewTableData"
          :initial-total="previewTotal"
        />
      </div>
    </el-dialog>

  </div>
</template>

<script>
import crudFileImport from '@/api/archivesManage/fileImport'
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
// import DateRangePicker from '@/components/DateRangePicker'
import ListPre from '../module/listPre.vue'
export default {
  name: 'ImportLog',
  components: { ListPre, rrOperation, crudOperation, pagination },
  cruds() {
    return CRUD({ title: '导入日志', url: 'api/unzip/getImportHpLog', crudMethod: { ...crudFileImport }, optShow: {
      add: false,
      edit: false,
      del: false,
      reset: true,
      download: false,
      group: false
    },
    sort: []
    })
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      detailVisible: false,
      previewTableData: [], // 用于存储预览表格数据
      previewTotal: 0, // 用于存储预览数据总数
      hpId: null,
      isLogOrPreview: ''
    }
  },
  created() {
  },
  methods: {
    clickRowHandler(row) {
      // this.$refs.table.toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    // 双击详情
    handleDbClick(row) {
      this.hpId = row.id
      this.isLogOrPreview = 'log'
      if (row.status === 0) {
        this.$message({
          type: 'info',
          message: '当前批量数据导入中，请用户耐心等待，谢谢！'
        })
      } else {
        crudFileImport.FetchHpArchivesDetailsByHpId({
          page: 0,
          size: 10,
          hpId: this.hpId,
          isError: false
        }).then(res => {
          this.$refs.importTableList.readData = row.archivesNum
          this.$refs.importTableList.importData = row.normalNum
          this.$refs.importTableList.skipData = row.skipNum
          this.$refs.importTableList.coverData = row.coverNum
          this.$refs.importTableList.errorData = row.errorNum
          this.previewTableData = res.data.content
          this.previewTotal = res.data.totalElements
        })
        this.detailVisible = true
      }
    },
    handleClose() {
      this.detailVisible = false
      this.$refs.importTableList.archivesTabIndex = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.import-dialog{
  ::v-deep .el-dialog{
    width: 940px;
    .el-dialog__body{
      padding: 20px 0 30px 0;
    }
    .setting-dialog{
      position: relative;
    }
  }
}
.import-loading{
  color: #fd8042;
}
.import-error{
  color: rgb(246, 81, 99);
}
</style>