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: 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-button icon="el-icon-refresh" size="mini" @click="onHandleBatchRetire">批量退役</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="出厂日期" />
                <el-table-column
                    align="center"
                    show-overflow-tooltip
                    prop="workingHours"
                    label="标准使用到期时间(年限)"
                >
                    <template slot-scope="scope">
                        {{ 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="预警情况" />
                <el-table-column align="center" show-overflow-tooltip prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="onHandlePreview(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')
        },

        // 获取装备退役列表
        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></style>