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

<template>
  <div class="app-container">
    <el-row>
      <el-form ref="queryForm" size="small" label-width="auto" :model="queryParams">
        <el-card class="search-box" shadow="never">
          <el-row :gutter="20" style="display: flex; justify-content: space-between">
            <el-col :span="5">
              <el-form-item label="业务类型" prop="businessType">
                <el-select
                  v-model="queryParams.businessType"
                  placeholder="请选择业务类型"
                  clearable
                  style="width: 100%"
                >
                  <el-option label="全部" value="" />
                  <el-option label="设备报废" value="EQUIPMENT_SCRAP" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="19" style="text-align: right;">
              <el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery">
                查询
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <el-card class="content-box" shadow="never">
        <div >
          <el-table :data="tableData" style="width: 100%" border stripe class="my-table" fit>
            <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50" />
            <el-table-column align="center" show-overflow-tooltip prop="businessType" label="业务类型" width="120">
              <template slot-scope="scope">
                {{ getBusinessTypeName(scope.row.businessType) }}
              </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="instanceCode" label="审批编号" />
            <el-table-column align="center" show-overflow-tooltip prop="applyUserName" label="申请人" />
            <el-table-column align="center" show-overflow-tooltip prop="applyTime" label="申请时间" />
            <el-table-column align="center" show-overflow-tooltip prop="currentNodeName" label="当前节点" />
            <el-table-column align="center" show-overflow-tooltip label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="onHandleApprove(scope.row)">审批</el-button>
                <el-button type="info" size="mini" @click="onHandleDetail(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="getMyTodoList"
          />
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getMyTodoList } from '@/api/approval.js'
import pagination from '@/components/Pagination'

export default {
  components: {
    pagination
  },
  data() {
    return {
      queryParams: {
        businessType: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    // 获取待办列表
    async getMyTodoList() {
      const params = {
        businessType: this.queryParams.businessType || undefined,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      }
      const res = await getMyTodoList(params)
      this.tableData = res.rows || []
      this.total = res.total || 0
    },

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

    // 重置
    onHandleReset() {
      this.queryParams = {
        businessType: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getMyTodoList()
    },

    // 审批
    onHandleApprove(row) {
      this.$router.push({
        // name: 'RetireApplyAuditDetail',
        // params: { id: row.businessId },
        // query: { taskInfo: JSON.stringify(row) }
        path: '/business/EquipmentRetireApply/audit-detail',
        query: { id: row.businessId, taskInfo: JSON.stringify(row) }
      })
    },

    // 查看详情
    onHandleDetail(row) {
      this.$router.push({
        // name: 'RetireApplyAuditDetail',
        // params: { id: row.businessId },
        // query: { taskInfo: JSON.stringify(row) }
        path: '/business/EquipmentRetireApply/audit-detail',
        query: { id: row.businessId, taskInfo: JSON.stringify(row) }
      })
    },

    // 获取业务类型名称
    getBusinessTypeName(type) {
      const typeMap = {
        'EQUIPMENT_SCRAP': '设备报废'
      }
      return typeMap[type] || type
    }
  },

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

<style lang="scss" scoped>
.app-container{
  background: #F0F0F0;
}
::v-deep.el-button--primary{
  background-color: #2CBAB2;
  border-color: #2CBAB2;
}
::v-deep.el-button--danger{
  background-color: #FF5129;
  border-color: #FF5129;
}
::v-deep.el-tag.el-tag--info {
    background-color: #F5F5F5;
    border-color: #B3B3B3;
    color: #B3B3B3;
}
::v-deep.el-tag.el-tag--warn{
    background-color: rgba(255,171,41,0.1);;
    border: #FFAB29;
    color: #FFAB29;
}
::v-deep.el-tag.el-tag--success {
    background-color: rgba(52,226,199,0.1);
    border-color: #34E2C7;
    color: #34E2C7;
}
.search-box {
  height: 65px;
  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>