bonus-ui/src/views/EquipmentRetireApply/audit.vue

<template>
  <div class="app-container">
    <el-row>
      <el-form ref="queryForm" size="small" label-width="auto" :model="queryParams">
        <el-card class="search-box">
          <el-row :gutter="20" style="display: flex; justify-content: space-between">
            <el-col :span="5">
              <el-form-item label="任务状态" prop="reviewStatus">
                <el-select
                  v-model="queryParams.reviewStatus"
                  placeholder="请选择状态"
                  clearable
                  style="width: 100%"
                >
                  <el-option label="待审批" value="0" />
                  <el-option label="审批中" value="1" />
                  <el-option label="审批完成" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="申请日期范围" prop="dateRange">
                <el-date-picker
                  v-model="queryParams.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="14" style="text-align: right;">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery">
                查询
              </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <el-card class="content-box">
        <div class="table-container">
          <el-table :data="tableData" style="width: 100%" border stripe height="100%" fit>
            <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50" />
            <el-table-column align="center" show-overflow-tooltip prop="code" label="退役单号" />
            <el-table-column align="center" show-overflow-tooltip prop="equipmentNum" label="退役装备数" />
            <el-table-column align="center" show-overflow-tooltip prop="toolNum" label="退役工具数" />
            <el-table-column align="center" show-overflow-tooltip prop="reviewStatus" label="任务状态">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.reviewStatus)">
                  {{ getStatusLabel(scope.row.reviewStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="createUser" label="申请人" />
            <el-table-column align="center" show-overflow-tooltip prop="createTime" label="申请时间" />
            <el-table-column align="center" show-overflow-tooltip label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="onHandleAudit(scope.row)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-wrapper">
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getRetireApplyAuditList"
          />
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getRetireApplyListAPI } from '@/api/EquipmentRetireApply/index.js'
import pagination from '@/components/Pagination'

export default {
  components: {
    pagination
  },
  data() {
    return {
      queryParams: {
        reviewStatus: undefined,
        dateRange: undefined,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    // 获取审核列表
    async getRetireApplyAuditList() {
      const params = {
        ...this.queryParams,
        startDate: this.queryParams.dateRange ? this.queryParams.dateRange[0] : undefined,
        endDate: this.queryParams.dateRange ? this.queryParams.dateRange[1] : undefined,
        dateRange: undefined
      }
      const res = await getRetireApplyListAPI(params)
      this.tableData = res.rows || []
      this.total = res.total || 0
    },

    // 查询
    onHandleQuery() {
      this.queryParams.pageNum = 1
      this.getRetireApplyAuditList()
    },

    // 重置
    onHandleReset() {
      this.queryParams = {
        reviewStatus: undefined,
        dateRange: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.getRetireApplyAuditList()
    },

    // 审核
    onHandleAudit(row) {
      this.$router.push({
        name: 'RetireApplyAuditDetail',
        params: { id: row.id },
        query: { taskInfo: JSON.stringify(row) }
      })
    },

    // 获取状态标签
    getStatusLabel(status) {
      const statusMap = {
        '0': '待审批',
        '1': '审批中',
        '2': '审批完成'
      }
      return statusMap[status] || '未知'
    },

    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        '0': 'warning',
        '1': 'info',
        '2': 'success'
      }
      return typeMap[status] || 'info'
    }
  },

  created() {
    this.getRetireApplyAuditList()
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 0;
}

.content-box {
  border-radius: 8px;
  height: calc(100vh - 260px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;

    ::v-deep .pagination-container {
      padding: 0px 20px !important;
      margin-bottom: 30px;
    }
  }

  ::v-deep .el-table {
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }
}
</style>