yxk-storeroom-system/src/views/archivesManage/archivesCheck/module/checkDetail.vue

<template>
  <div>
    <el-dialog title="盘点详情" :visible.sync="detailVisible" :close-on-click-modal="false">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-table :data="rowData" :cell-class-name="cellTop" style="margin-top:15px;width:100%;" height="calc(25vh - 100px)">
          <el-table-column prop="id" align="center" label="盘点单号" min-width="150" />
          <el-table-column prop="region" align="center" label="所在区域" min-width="90" />
          <el-table-column prop="checkState" align="center" label="盘点状态" min-width="120">
            <template slot-scope="scope">
              <span class="clear">{{ scope.row.checkState | checkState }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" align="center" label="创建时间" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="noCheck" align="center" label="未盘档案" min-width="90" />
          <el-table-column prop="correct" align="center" label="在库档案" min-width="90" />
          <el-table-column prop="dislocation" align="center" label="错位档案" min-width="90" />
          <el-table-column prop="borrowed" align="center" label="已借档案" min-width="90" />
          <el-table-column prop="abnormal" align="center" label="异常档案" min-width="90" />
          <el-table-column prop="others" align="center" label="其他档案" min-width="90" />
        </el-table>
        <el-table :data="tableData" :cell-class-name="cell" style="margin-top:15px;width:100%;" height="calc(50vh - 147px)">
          <el-table-column type="index" label="序号" align="center" width="90" />
          <el-table-column prop="checkResult" align="center" label="盘点结果" width="90">
            <template slot-scope="scope">
              <!-- 在库/已借/错位 -->
              <span class="clear" style="width:56px">{{ scope.row.checkResult | checkResult }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="child" align="center" label="子条数目" width="90" />
          <el-table-column prop="categoryType" align="center" label="门类级别" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.categoryType === 5" style="width:56px">文件级</span>
              <span v-if="scope.row.categoryType === 4" style="width:56px">卷内级</span>
              <span v-if="scope.row.categoryType === 3" style="width:56px">案卷级</span>
            </template>
          </el-table-column>
          <el-table-column prop="caseName" align="center" :show-overflow-tooltip="true" label="门类名称" min-width="180" />
          <el-table-column prop="fondsNo" align="center" label="全宗号" min-width="90" />
          <el-table-column prop="archiveNo" align="center" label="档号" min-width="180" />
          <el-table-column prop="archiveYear" align="center" label="归档年度" min-width="90" />
          <el-table-column prop="maintitle" align="center" :show-overflow-tooltip="true" label="题名" min-width="180" />
          <el-table-column prop="securityClass" align="center" label="保密程度" min-width="90" />
          <el-table-column prop="department" align="center" label="部门" min-width="90" />
          <el-table-column prop="caseName" align="center" label="盒名称" min-width="180" />
          <el-table-column prop="folderLocationDetails" align="center" :show-overflow-tooltip="true" label="所在位置" min-width="220" />
          <el-table-column prop="createTime" align="center" label="创建时间" min-width="150">
            <template slot-scope="scope">
              <div>{{ scope.row.createTime | parseTime }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div></el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
    checkState(val) {
      switch (val) {
        case 0:
          return '待执行'
        case 1:
          return '执行中'
        case 2:
          return '已执行'
      }
    },
    checkResult(val) {
      switch (val) {
        case 0:
          return '未盘'
        case 1:
          return '在库'
        case 2:
          return '已盘'
        case 3:
          return '错位'
        case 4:
          return '已借'
        case 5:
          return '异常'
        case 6:
          return '其他'
      }
    }
  },
  data() {
    return {
      detailVisible: false,
      tableData: [],
      rowData: [],
      classLend: ''
    }
  },
  methods: {
    cellTop({ row, columnIndex }) {
      if (row.checkState === 2 && columnIndex === 2) {
        return 'have-clear'
      } else if (row.checkState === 0 && columnIndex === 2) {
        return 'fail-clear'
      } else if (row.checkState === 1 && columnIndex === 2) {
        return 'no-clear'
      }
    },
    cell({ row, columnIndex }) {
      if (row.checkResult === 0 && columnIndex === 1) { // 未盘
        return 'no-clear-bg'
      } else if (row.checkResult === 1 && columnIndex === 1) { // 在库
        return 'no-clear'
      } else if (row.checkResult === 2 && columnIndex === 1) { // 已盘
        return 'have-clear-bg'
      } else if (row.checkResult === 3 && columnIndex === 1) { // 错位
        return 'fail-clear'
      } else if (row.checkResult === 4 && columnIndex === 1) { // 已借
        return 'have-clear'
      } else if (row.checkResult === 5 && columnIndex === 1) { // 异常
        return 'error-clear-bg'
      } else if (row.checkResult === 6 && columnIndex === 1) { // 其他
        return 'other-clear'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
::v-deep .el-dialog__body{
  padding: 10px 0 20px 0;
}
::v-deep .el-dialog{
  width: 950px;
  height: 520px;
}
::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
    position: absolute;
    right: -158px;
    bottom: -12px;
}
p{
  display: flex;
  height: 40px;
  align-items: center;
  .color-blue{
    color: #3A99FD;
    width: 70px;
    height: 19px;
    text-align: right;
  }
  .color-white{
    color: white;
    padding: 0 0 0 20px;
  }
}
.dpflex{
  display: flex;
  .one{
    width: 320px;
    margin-left: 30px;
  }
  .two{
    flex:1;
  }
  .tree{
    flex: 1;
  }
  .four{
    flex: 1;
  }
}

//表格滚动条 白色方格
::v-deep ::-webkit-scrollbar-corner{
  background: transparent;
}
</style>