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>-->
            </template>
        </TableHeader>
        <Table ref="tableRef" @cell-click="cellClickEvent" />

        <checkForm ref="checkFormRef" @onSubmit="tableStore.index()" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide, watch } from 'vue'

import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import checkForm from './components/form.vue'
import { useDictData } from '@/stores/dictData'
import { useAdminInfo } from '@/stores/adminInfo'
import { download } from '@/utils/fileDownLoad'
defineOptions({
    name: 'terminal/terminaCkeck'
})

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

// 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: 100 },
        { field: 'bdName', title: '变电站', minWidth: 150 },
        { field: 'objName', title: '监测对象', minWidth: 180 },
        { field: 'devName', title: '终端名称', minWidth: 180 },
        { 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: 80,
            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: 'checkUrl',
            title: '周期检测报告',
            minWidth: 160,
            render: 'customRender',
            customRender: props => {
                const val = props.renderValue?.replace(/^.*?\/(.*?)\//, '') || ''
                return val ? h('span', { style: { color: 'var(--el-color-primary)', cursor: 'pointer' } }, val) : '/'
            }
        },
        // 操作列固定右侧
        {
            title: '操作',
            fixed: 'right',
            minWidth: 160,
            render: 'buttons',
            buttons: [
                // {
                //     name: 'detail',
                //     title: '详情',
                //     type: 'primary',
                //     icon: 'el-icon-EditPen',
                //     render: 'basicButton',
                //     click: row => {
                //         checkFormRef.value.openDetail(row.devId)
                //     }
                // },
                {
                    name: 'edit',
                    title: '上传周期检测报告',
                    type: 'primary',
                    icon: 'el-icon-Open',
                    render: 'basicButton',
                    click: row => {
                        checkFormRef.value.openUpload(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

// 路由跳转带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 }
)
// 点击行
const cellClickEvent = ({ row, column }: any) => {
    if (column.field == 'checkUrl') {
        row.checkUrl ? download(row.checkUrl) : ''
    }
}
provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
})
</script>

<style scoped></style>