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" />

        <!-- 共用dialogShow弹窗，区分详情/上传报告 -->
        <el-dialog
            :title="dialogMode === 'detail' ? '定检详情' : '上传周期检测报告'"
            :width="dialogMode === 'detail' ? '1000px' : '600px'"
            v-model="dialogShow"
            v-if="dialogShow"
        >
            <!-- 详情区域 -->
            <div v-if="dialogMode === 'detail'">
            </div>
            <!-- 上传报告表单区域 -->
            <div v-if="dialogMode === 'upload'">
                <el-form ref="uploadFormRef" :model="uploadForm" label-width="120px">

                    <el-form-item label="定检日期" prop="thisCheckTime" rules="[{ required: true, message: '请选择定检日期', trigger: 'change' }]">
                        <el-date-picker
                            v-model="uploadForm.thisCheckTime"
                            type="date"
                            placeholder="请选择定检日期"
                            @change="calcNextCheckTime"
                            style="width:100%"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                    <el-form-item label="下次定检日期" prop="nextCheckTime">
                        <el-date-picker v-model="uploadForm.nextCheckTime" type="date"  style="width:100%" value-format="YYYY-MM-DD" />
                    </el-form-item>
                    <el-form-item
                        class="uploadFile"
                        for="-"
                        label="设备检测报告："
                        prop="checkUrl"
                    >
                        <el-upload
                            v-model:file-list="uploadForm.checkUrl"
                            ref="uploadRef"
                            action=""
                            :accept="acceptType"
                            :limit="1"
                            :on-change="(file) => choose(file, 'checkUrl')"
                            :auto-upload="false"
                            :on-remove="removeFile('checkUrl')"
                        >
                            <template #trigger>
                                <el-button type="primary" >上传文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>

            <!-- footer 放到所有v-if外层，解决编译报错 -->
            <template #footer>
                <el-button v-if="dialogMode === 'upload'" @click="dialogShow = false">取消</el-button>
                <el-button v-if="dialogMode === 'upload'" type="primary" @click="submitUploadReport">提交</el-button>
            </template>
        </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 type { UploadFile, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import TableHeader from '@/components/table/header/index.vue'
import { genFileId, ElMessage } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import { useAdminInfo } from '@/stores/adminInfo'
import { uploadFile } from '@/api/system-boot/file'
import { userCheckUpload } from '@/api/device-boot/device'

const acceptType = '.pdf,.docx'
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)
// 弹窗模式：detail=详情 upload=上传报告
const dialogMode = ref<'detail' | 'upload'>('detail')
const submitLoading = ref()

// ========== 上传报告表单补充变量 ==========
const uploadFormRef = ref()
const fileList = ref<any[]>([])
const uploadForm = reactive({
    thisCheckTime: '',
    nextCheckTime: '',
    checkUrl: [],
    devId:'',
    objId:''
})
// 电能质量检测报告
const checkUrlFile = ref('')


// 选择定检日期，自动往后推3年
const calcNextCheckTime = (dateVal: string) => {
    if (!dateVal) {
        uploadForm.nextCheckTime = ''
        return
    }
    const date = new Date(dateVal)
    date.setFullYear(date.getFullYear() + 3)
    // 格式化为 YYYY-MM-DD 字符串
    const y = date.getFullYear()
    const m = String(date.getMonth() + 1).padStart(2, '0')
    const d = String(date.getDate()).padStart(2, '0')
    uploadForm.nextCheckTime = `${y}-${m}-${d}`
}


// 表单校验
const uploadRules = reactive({
    thisCheckTime: [{ required: true, message: '请选择定检日期', trigger: 'change' }],
    checkUrl: [{ required: true, message: '请上传设备检测报告', trigger: 'change' }]
})

const resetForm = () => {
    uploadForm.thisCheckTime = ''
    uploadForm.nextCheckTime = ''
    uploadForm.checkUrl = []
}


const submitUploadReport = async () => {
    await uploadFormRef.value?.validate(async (valid: boolean) => {
        if (!valid) return
        if (!uploadForm.checkUrl) return ElMessage.warning('请先上传检测报告文件')
        submitLoading.value = true
        try {
            const params = {
              devId: uploadForm.devId,
              objId: uploadForm.objId,
              thisCheckTime: uploadForm.thisCheckTime,
              nextCheckTime: uploadForm.nextCheckTime,
              checkUrl: checkUrlFile.value
            }
            const res = await userCheckUpload(params)
            if (res.code === 'A0000') {
            ElMessage.success('提交成功')
            dialogShow.value = false
            // 刷新表格
            tableStore.index()
             }
        } catch (err: any) {
            ElMessage.error(err.msg || '提交失败')
        } finally {
            submitLoading.value = false
        }
    })
}


// 打开上传弹窗，重置表单
const openUploadDialog = (row: any) => {
    uploadForm.thisCheckTime = ''
    uploadForm.nextCheckTime = ''
    uploadForm.checkUrl = []
    uploadForm.devId = row.devId
    uploadForm.objId = row.objId
    fileList.value = []
    uploadFormRef.value?.clearValidate()
    dialogMode.value = 'upload'
    dialogShow.value = true
}


// 处理上传文件回显
const fileRaw = (row: any, key: string) => {
    const fileFields = ['checkUrl', 'assessUrl']
    for (const field of fileFields) {
        const filePath = row[key]?.[field] ?? row[field]
        if (filePath != null && filePath.length > 0) {
            uploadForm[field] = [{ name: filePath.split('/')[2] }]
        } else {
            uploadForm[field] = []
        }
    }
    uploadFormRef.value = row[key]?.checkUrl ?? row.checkUrl ?? ''
}


//移除文件上传
const removeFile = (val: string) => {
    return (_file: UploadFile, fileList: UploadFile[]) => {
        if (val === 'checkUrl') {
            checkUrlFile.value = ''
        }
        uploadForm[val] = fileList
    }
}
const choose = (e: any, field: string) => {
    uploadFile(e.raw, '/supervision/').then(res => {
        if (field === 'checkUrl') {
            checkUrlFile.value = res.data.name
        }
    })
}

// ==========================================

// 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: 'checkUrl', 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 => {
                        openUploadDialog(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
}



// 路由跳转带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>