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-row :gutter="10" style="display: flex; justify-content: space-between">
          <el-col>
            <el-form-item prop="deviceName">
              <el-input
                style="width: 100%"
                v-model="queryParams.deviceName"
                placeholder="装备名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item prop="brand">
              <el-input v-model="queryParams.brand" placeholder="装备厂家" clearable/>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item 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>
            <el-form-item 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>
            <el-form-item 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: left">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery">
              查询
            </el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="onHandleBatchRetire" style="float: right;margin-right: 25px">批量退役</el-button>

          </el-col>


        </el-row>
      </el-form>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
        <el-table-column align="center" show-overflow-tooltip prop="companyName" label="单位名称"/>
        <el-table-column align="center" show-overflow-tooltip prop="deviceName" label="装备名称"/>
        <el-table-column align="center" show-overflow-tooltip prop="devModel" label="装备型号"/>
        <el-table-column align="center" show-overflow-tooltip prop="code" label="装备编码"/>
        <el-table-column align="center" show-overflow-tooltip prop="brand" 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.deviceStatus=='临近364天退役'?'red':''">{{ scope.row.deviceStatus }}
            </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>
            <el-button type="primary" size="mini" @click="onHandleRetireEquipment(scope.row)">
              退役装备
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getRetireList"
      />
    </el-row>
  </div>
</template>

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

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

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    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-ledger-retire')
    },
    // 重置
    onHandleReset() {
      this.queryParams = {
        deviceName: 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-ledger-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()
  }
}
</script>

<style>

.red {
  color: red;
}
</style>