bonus-ui/src/views/EquipmentRetire/index.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="name">
                <el-input
                  style="width: 100%"
                  v-model="queryParams.name"
                  placeholder="输入装备名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="装备厂家" prop="manufacturerId">
                <el-select
                  v-model="queryParams.manufacturerId"
                  placeholder="请选择生产厂家"
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in manufacturerList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="实际使用年限" prop="yearsDiff">
                <el-select
                  style="width: 100%"
                  v-model="queryParams.yearsDiff1"
                  placeholder="选择选项"
                  clearable
                >
                  <el-option label="0-5年" value="0-5"/>
                  <el-option label="5-10年" value="5-10"/>
                  <el-option label="10-15年" value="10-15"/>
                  <el-option label="15年以上" value="15-99"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="剩余使用年限" prop="remainingYears">
                <el-select
                  style="width: 100%"
                  v-model="queryParams.yearsDiff2"
                  placeholder="选择选项"
                  clearable
                >
                  <el-option label="0-5年" value="0-5"/>
                  <el-option label="5-10年" value="5-10"/>
                  <el-option label="10-15年" value="10-15"/>
                  <el-option label="15年以上" value="15-99"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="寿命告警状态" prop="isWarn">
                <el-select
                  style="width: 100%"
                  v-model="queryParams.isWarn"
                  placeholder="选择选项"
                  clearable
                >
                  <el-option label="告警" value="1"/>
                  <el-option label="未告警" value="0"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col 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">
<!--        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="onHandleBatchRetire">批量退役
            </el-button>
          </el-col>
        </el-row>-->
        <div class="table-container">
          <el-table :data="tableData" style="width: 100%" border stripe height="100%">
            <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
            <el-table-column align="center" show-overflow-tooltip prop="propertyUnit" label="单位名称"/>
            <el-table-column align="center" show-overflow-tooltip prop="name" label="装备名称"/>
            <el-table-column align="center" show-overflow-tooltip prop="specificationModel" label="装备型号"/>
            <el-table-column align="center" show-overflow-tooltip prop="code" label="装备编码"/>
            <el-table-column align="center" show-overflow-tooltip prop="manufacturer" label="生产厂家"/>
            <el-table-column align="center" show-overflow-tooltip prop="productionDate" label="出厂日期">
              <template slot-scope="scope">
                {{ formatDate(scope.row.productionDate) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="workingHours"
              label="标准使用到期时间(年限)"
            >
              <template slot-scope="scope">
                {{ formatDate(scope.row.expirationTime) }} ({{ scope.row.expirationYears }}年)
              </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop=" remainingYears" label="实际使用天数(天数)">
              <template slot-scope="scope"> {{ scope.row.daysDiff }}天 ({{ scope.row.yearsDiff }}年)</template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="remainingDays" label="实际使用天数(年限)">
              <template slot-scope="scope">
                {{ scope.row.remainingDays }}天 ({{ scope.row.remainingYears }}年)
              </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="deviceStatus" label="预警情况">
              <template slot-scope="scope">
            <span :class="scope.row.status=='临近364天退役'?'red':''">{{ scope.row.status }}
            </span>
              </template>
            </el-table-column>
            <!--        <el-table-column align="center" show-overflow-tooltip prop="address" label="操作">
                      <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="onHandleRetire(scope.row)">退役</el-button>
                        &lt;!&ndash; <el-button type="primary" size="mini" @click="onHandleRetireEquipment(scope.row)">
                          退役装备
                        </el-button> &ndash;&gt;
                      </template>
                    </el-table-column>-->
          </el-table>
        </div>
        <div class="pagination-wrapper">
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getRetireList"
          />
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getRetireListAPI } from '@/api/EquipmentRetire/index.js'
import { getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js'

export default {
  data() {
    return {
      queryParams: {
        name: undefined,
        brand: undefined,
        yearsDiff1: undefined,
        yearsDiff2: undefined,
        remainingYears: undefined,
        isWarn: undefined,
        pageNum: 1,
        pageSize: 10
      },

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData: [],
      total: 0,
      manufacturerList: []
    }
  },
  methods: {
    // 获取厂家
    getManufacturerSelectList() {
      getManufacturerSelectApi().then((res) => {
        console.log('🚀 ~ getManufacturerSelectList ~ res:', res)
        if (res.code === 200) {
          this.manufacturerList = res.data
        }
      })
    },
    handleNodeClick(data) {
      console.log(data)
    },

    // 出库按钮
    onHandleOut() {
      console.log('出库按钮')
      this.$router.push('/equipment-ledger-out')
    },

    // 入库按钮
    onHandleIn() {
      console.log('入库按钮')
      this.$router.push('/equipment-ledger-store')
    },

    // 维修按钮
    onHandleRepair() {
      console.log('维修按钮')
      this.$router.push('/equipment-ledger-repair')
    },

    // 退役按钮
    onHandleRetire() {
      console.log('退役按钮')
      this.$router.push('/equipment/equ-retire')
    },
    // 重置
    onHandleReset() {
      this.queryParams = {
        name: undefined,
        brand: undefined,
        yearsDiff: undefined,
        remainingYears: undefined,
        deviceStatus: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.getRetireList()
    },
    // 查询
    onHandleQuery() {
      this.getRetireList()
    },

    // 批量退役
    onHandleBatchRetire() {
      console.log('批量退役')
      this.$router.push('/equipment/equ-retire')
    },
    // 格式化日期函数
    formatDate(dateString) {
      if (!dateString) return ''

      // 方法1：使用字符串截取（适用于格式固定的情况）
      //return dateString.split('T')[0]

      // 方法2：使用Date对象（更通用，适用于各种日期格式）
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    // 获取装备退役列表
    async getRetireList() {
      const params = {
        ...this.queryParams,
        actualStartYear: this.queryParams.yearsDiff1 ? this.queryParams.yearsDiff1.split('-')[0] : undefined,
        actualStopYear: this.queryParams.yearsDiff1 ? this.queryParams.yearsDiff1.split('-')[1] : undefined,
        remainingStartYear: this.queryParams.yearsDiff2 ? this.queryParams.yearsDiff2.split('-')[0] : undefined,
        remainingStopYear: this.queryParams.yearsDiff2 ? this.queryParams.yearsDiff2.split('-')[1] : undefined
      }
      const res = await getRetireListAPI(params)
      console.log(res, '装备退役列表')
      this.tableData = res.data.rows
      this.total = res.data.total
    },

    // 查看装备
    onHandlePreview(row) {
      console.log('查看装备', row)
    },

    // 退役装备
    onHandleRetireEquipment(row) {
      console.log('退役装备', row)
    }
  },

  created() {
    this.getRetireList()
    this.getManufacturerSelectList()
  }
}
</script>

<style lang="scss" scoped>

.red {
  color: red;
}

.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;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .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;
    }
  }
}

.dialog-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  ::v-deep .el-table {
    border-radius: 6px;
    overflow: hidden;

    // 启用斑马纹
    &.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: 45px;
        font-size: 14px;
        border-bottom: 2px solid #e4e7ed;
      }
    }

    .el-table__body {
      tr {
        transition: all 0.2s ease;

        &:hover {
          background-color: #f8f9fa;
        }

        td {
          padding: 12px 8px;
          font-size: 13px;
          border-bottom: 1px solid #f0f2f5;
        }
      }
    }

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

    // 表格边框优化
    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }
}
</style>