admin-sjzx/src/views/pqs/business/terminal/terminaCkeck/index.vue

<template>
    <div class="default-main">
        <TableHeader ref="TableHeaderRef">
            <template #select>
                <el-form-item label="地市">
                    <el-select v-model="tableStore.table.params.city" clearable placeholder="请选择地市">
                        <el-option
                            v-for="item in areaOptionList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变电站">
                    <el-input
                        style="width: 200px"
                        placeholder="请输入变电站"
                        v-model="tableStore.table.params.substation"
                        clearable
                        maxlength="32"
                        show-word-limit
                    ></el-input>
                </el-form-item>
                <el-form-item label="终端名称">
                    <el-input
                        style="width: 200px"
                        placeholder="请输入终端名称"
                        v-model="tableStore.table.params.terminalName"
                        clearable
                        maxlength="32"
                        show-word-limit
                    ></el-input>
                </el-form-item>
            </template>
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增定检记录</el-button>
                <el-button icon="el-icon-Delete" type="primary" @click="deleteEven">批量删除</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />

        <!-- 详情弹窗 -->
        <el-dialog title="定检详情" width="1000px" v-model="dialogShow" v-if="dialogShow"></el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import { useAdminInfo } from '@/stores/adminInfo'
import { terminalCheckPage } from '@/api/device-boot/device'

defineOptions({
    name: 'terminal/terminaCkeck'
})

// 公共依赖
const TableHeaderRef = ref()
const dictData = useDictData()
const adminInfo = useAdminInfo()
// 地区字典（和你原有地市下拉同源）
const areaOptionList = dictData.getBasicData('jibei_area')

// 详情弹窗
const detailId = ref('')
const dialogShow = ref(false)

// TableStore 表格配置（仅修改字段映射，其余不动）
const tableStore = new TableStore({
    url: '/device-boot/alarm/terminalCheckPage',
    method: 'POST',
    column: [
        // 多选框
        {
            width: '60',
            type: 'checkbox'
        },
        // 序号（分页自增，和你现有逻辑一致）
        {
            title: '序号',
            width: 70,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'areaName', title: '地市', minWidth: 80 },
        { field: 'bdName', title: '变电站', minWidth: 110 },
        { field: 'objName', title: '监测对象', minWidth: 140 },
        { field: 'devName', title: '终端名称', minWidth: 150 },
        { field: 'loginDate', title: '投运时间', minWidth: 120 },
        { field: 'thisCheckTime', title: '本次定检时间', minWidth: 120 },
        { field: 'nextCheckTime', title: '下次定检时间', minWidth: 120 },
        {
            title: '是否逾期',
            field: 'checkStatus',
            align: 'center',
            width: 80,
            render: 'customRender',
            customRender: props => {
                const val = props.renderValue
                let text = ''
                let color = ''
                if (val === 1) {
                    text = '是'
                    color = '#f56c6c'
                } else if (val === 0) {
                    text = '否'
                    color = '#67c23a'
                }
                return h('span', { style: { color, fontWeight: 'bold' } }, text)
            }
        },
        {
            field: 'overdueDay',
            title: '逾期天数',
            minWidth: 70,
            render: 'customRender',
            customRender: props => {
                const val = props.renderValue
                let text = ''
                let color = ''
                if (val > 0) {
                    text = val
                    color = '#f56c6c'
                } else if (val > -30) {
                    text = Math.abs(val).toString() + '天后将逾期'
                    color = '#e6a23c'
                } else {
                    text = '/'
                }
                return h('span', { style: { color, fontWeight: 'bold' } }, text)
            }
        },
        { field: 'nextCheckTime', title: '周期检测报告', minWidth: 120 },

        // 操作列固定右侧
        {
            title: '操作',
            fixed: 'right',
            minWidth: 160,
            render: 'buttons',
            buttons: [
                {
                    name: 'detail',
                    title: '详情',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        openDetail(row.devId)
                    }
                },
                {
                    name: 'edit',
                    title: '上传周期检测报告',
                    type: 'primary',
                    icon: 'el-icon-Open',
                    render: 'basicButton',
                    click: row => {}
                }
            ]
        }
    ],
    beforeSearchFun: () => {
        // 携带当前登录人部门ID
        tableStore.table.params.orgId = adminInfo.$state.deptId
    }
})

// 初始化查询参数
tableStore.table.params.city = ''
tableStore.table.params.substation = ''
tableStore.table.params.terminalName = ''
tableStore.table.params.orgId = adminInfo.$state.deptId

// 打开详情弹窗
const openDetail = (id: string) => {
    detailId.value = id
    dialogShow.value = true
}

// 新增按钮
const addFormModel = () => {}

// 批量删除
const deleteEven = () => {
    if (tableStore.table.selection.length == 0) {
        ElMessage({
            type: 'warning',
            message: '请选择要删除的定检数据'
        })
        return
    }
    ElMessageBox.confirm('此操作将永久删除选中记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 批量传devId数组
        deletePqCheck(tableStore.table.selection.map(item => item.devId)).then(() => {
            ElMessage.success('删除成功')
            tableStore.index()
        })
    })
}

// 路由跳转带ID回显编辑（复用你原有路由传参逻辑）
const props = defineProps({
    id: { type: String, default: 'null' }
})
watch(
    () => props.id,
    async newVal => {
        if (newVal === 'null') return
        const fullId = newVal.split('@')[0]
        const routeTime = Number(newVal.split('@')[1])
        if (isNaN(routeTime) || Date.now() - routeTime > import.meta.env.VITE_ROUTE_TIME_OUT) return
        const res = await getPqCheckById(fullId)
        if (res.code === 'A0000') {
        }
    },
    { immediate: true }
)

provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
})
</script>

<style scoped>

</style>