433 lines
12 KiB
Vue
433 lines
12 KiB
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="10" style="display: flex; justify-content: space-between">
|
||
<el-col>
|
||
<el-form-item prop="name">
|
||
<el-input
|
||
style="width: 100%"
|
||
v-model="queryParams.name"
|
||
placeholder="装备名称"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col>
|
||
<el-form-item 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>
|
||
<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: 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>
|
||
<el-button type="primary" size="mini" @click="onHandleRetireEquipment(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="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>
|