pqs-9100_client/frontend/src/views/home/components/resultPopup.vue

<template>
    <el-dialog title="检测结果" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="895px">
        <div class="result-dialog">
            <div class="result-title">
                <el-row>
                    <el-form-item label="检测脚本">
                        <el-input v-model="testScriptName" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="误差体系">
                        <el-input v-model="errorSysName" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="数据原则">
                        <el-input v-model="dataRule" :disabled="true" />
                    </el-form-item>
                </el-row>
            </div>
            <div class="result-content">
                <el-table
                    :data="resultData"
                    stripe
                    max-height="350"
                    :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                    style="width: 100%"
                    border
                    v-on:cell-click="handleClick"
                >
                    <el-table-column prop="deviceName" label="被检设备" />
                    <el-table-column prop="result_1" label="通道1" />
                    <el-table-column prop="result_2" label="通道2" />
                    <el-table-column prop="result_3" label="通道3" />
                    <el-table-column prop="result_4" label="通道4" />
                </el-table>
            </div>
            <div class="result-footer">你可以停留在本页查看数据，或返回首页进行复检、报告生成和归档</div>
        </div>
        <DataCheckPopup
            :visible="DataCheckDialogVisible"
            @update:visible="DataCheckDialogVisible = $event"
        ></DataCheckPopup>
    </el-dialog>
</template>

<script lang="ts" setup name="testPopup">
import { ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
//import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
import DataCheckPopup from './dataCheckPopup.vue'

const props = defineProps<{
    visible: boolean
}>()

const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void
    (e: 'submit', data: any): void
}>()

const testScriptName = ref('Q/GDW 10650.4-2021 模拟式')
const errorSysName = ref('Q/GDW 10650.2-2021')
const dataRule = ref('所有值')
const DataCheckDialogVisible = ref(false)

const resultData = ref([
    {
        deviceName: '被检设备1',
        result_1: '合格',
        result_2: '合格',
        result_3: '合格',
        result_4: '合格'
    },
    {
        deviceName: '被检设备2',
        result_1: '合格',
        result_2: '合格',
        result_3: '—',
        result_4: '—'
    },
    {
        deviceName: '被检设备3',
        result_1: '不合格',
        result_2: '合格',
        result_3: '—',
        result_4: '—'
    }
])

const handleClick = (row: any) => {
   
    DataCheckDialogVisible.value = true
}

const handleCancel = () => {
    emit('update:visible', false) // 关闭对话框
}
</script>

<style scoped>
.result-dialog {
    display: flex;
    flex-direction: column;
}

.result-title {
    /* display: flex;
    flex-direction: row; */
}
.result-footer {
    text-align: right;
    margin-top: 10px;
}
</style>