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-option label="审批驳回" value="3" />
                </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-col :span="4">
            <span style="font-size: 20px; font-weight: 800">退役审核列表</span>
          </el-col>
          <el-table :data="tableData" style="width: 100%" border stripe  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 size="mini" type="text" icon="el-icon-edit" @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': '审批完成',
        '3': '审批驳回'
      }
      return statusMap[status] || '未知'
    },

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

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

<style lang="scss" scoped>

.el-form-item {
  margin-bottom: 0; /* 取消form-item的默认下边距 */
}

/* 搜索栏样式 */
.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 0;
  ::v-deep .el-card__body {
    padding: 15px;
  }
}

/* 内容容器样式 */
.content-box {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* 卡片主体样式 */
  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px;
    height: auto !important;
  }

  /* 表格容器样式 */
  .table-container {
    overflow: hidden;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  /* 分页容器样式 */
  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 10px;
    margin-top: 10px;
    text-align: right;

    ::v-deep .pagination-container {
      padding: 0 !important;
      margin: 0;
    }
  }

  /* 表格整体样式 */
  ::v-deep .el-table {
    width: 100%;
    border: 1px solid #E8E8E8;
    border-radius: 4px;

    /* 表头样式 */
    .el-table__header {
      background: #F5F5F5;
      th {
        background: #F5F5F5 !important;
        color: #666;
        font-weight: normal;
        height: 40px;
        border-right: 1px solid #E8E8E8;
        &:last-child {
          border-right: none;
        }
      }
    }

    /* 表格主体样式 */
    .el-table__body {
      td {
        height: 40px;
        border-right: 1px solid #E8E8E8;
        &:last-child {
          border-right: none;
        }
      }
    }

    /* 斑马纹样式 */
    &.el-table--striped .el-table__body tr.el-table__row--striped td {
      background-color: #F6FBFA !important;
    }

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

    /* 表格边框合并 */
    &::before {
      height: 0;
    }
  }

  /* 状态标签样式 */
  ::v-deep .el-tag {
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 12px;
  }

  /* 操作按钮样式 */
  ::v-deep .el-button--mini {
    padding: 4px 10px;
    border-radius: 2px;
    &.el-button--primary {
      background-color: #008859;
      border-color: #008859;
      &:hover {
        background-color: #006644;
        border-color: #006644;
      }
    }
    &.el-button--danger {
      background-color: #F5222D;
      border-color: #F5222D;
      &:hover {
        background-color: #C41D1D;
        border-color: #C41D1D;
      }
    }
  }
}
</style>