kd-aiot-frontend-qms/src/views/inspectionReport/template/inspection_report1.vue

<template>
    <ele-modal
        :visible.sync="visible"
        title="质检报告"
        width="70%"
        append-to-body
        :maxable="true"
    >
        <div id="printSection" style="padding: 20px; background-color: white;">
            <h1 style="text-align: center; font-size: 24px; margin-bottom: 20px; font-weight: bold;">质检报告</h1>
            
            <!-- 编号和报告单号 -->
            <div style="margin-bottom: 20px;">
                <el-row>
                    <el-col :span="12">
                        <div style="display: flex; align-items: center;">
                            <span style="font-weight: bold; margin-right: 10px;">编号:</span>
                            <span style="flex: 1;">{{ basicInfoData.code }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="display: flex; align-items: center;">
                            <span style="font-weight: bold; margin-right: 10px;">报告单号:</span>
                            <span style="flex: 1;">
                                <div v-if="isView">
                                    {{ basicInfoData.reportNumber }}
                                </div>
                                <div v-else>
                                    <el-input v-model="basicInfoData.reportNumber" placeholder="请输入报告编号"></el-input>
                                </div>
                            </span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            
            <!-- 基本信息表格 -->
            <table class="basic-info-table" style="width: 100%; border-collapse: collapse; border: 1px solid #ccc;">
                <tbody>
                    <tr>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">检品名称</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">{{ basicInfoData.productName }}</td>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">批号/序列号</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">{{ basicInfoData.batchNo }}</td>
                    </tr>
                    <tr>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">规格型号</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">{{ basicInfoData.specification }}/{{ basicInfoData.modelType }}</td>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">数量</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">{{ basicInfoData.total }}</td>
                    </tr>
                    <tr>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">请验日期</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">{{ basicInfoData.pleaseVerifyDate }}</td>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">请验部门</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">{{ basicInfoData.pleaseVerifyDepartment }}</td>
                    </tr>
                    <tr>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">报告日期</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">
                            <div v-if="!isView">
                                <el-date-picker
                                    v-model="basicInfoData.reportDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                />
                            </div>
                            <div v-else>{{ basicInfoData.reportDate }}</div>
                        </td>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">有效期</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">
                            <div v-if="!isView">
                                <el-date-picker
                                    v-model="basicInfoData.expirationDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                />
                            </div>
                            <div v-else>{{ basicInfoData.expirationDate }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">来源</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">
                            <div v-if="!isView">
                                <el-input v-model="basicInfoData.source" placeholder="请输入来源"></el-input>
                            </div>
                            <div v-else>{{ basicInfoData.source }}</div>
                        </td>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">储存条件</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">
                            <div v-if="!isView">
                                <el-input v-model="basicInfoData.storageCondition" placeholder="请输入储存条件"></el-input>
                            </div>
                            <div v-else>{{ basicInfoData.storageCondition }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">检验依据</td>
                        <td style="border: 1px solid #ccc; padding: 8px;" colspan="3">
                            <div v-if="!isView">
                                <el-input v-model="basicInfoData.inspectionBasis" placeholder="请输入检验依据"></el-input>
                            </div>
                            <div v-else>{{ basicInfoData.inspectionBasis }}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 检验项目表格 -->
            <table class="inspection-items-table" style="width: 100%; border-collapse: collapse; border: 1px solid #ccc; margin-bottom: 20px;">
                <thead>
                    <tr>
                        <th style="width: 150px; border: 1px solid #ccc; padding: 8px;">检验项目</th>
                        <th style="border: 1px solid #ccc; padding: 8px;">标准规定</th>
                        <th style="width: 150px; border: 1px solid #ccc; padding: 8px;">检验结果</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in inspectionItems" :key="index">
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px; min-height: 37px;">{{ item.item }}</td>
                        <td style="border: 1px solid #ccc; padding: 8px;">{{ item.standardRegulations }}</td>
                        <td style="width: 150px; border: 1px solid #ccc; padding: 8px;">{{ item.results }}</td>
                    </tr>
                    <tr>
                        <td style="width: 120px; border: 1px solid #ccc; padding: 8px;">结论</td>
                        <td style="border: 1px solid #ccc; padding: 8px;" :colspan="2">
                            <div v-if="!isView">
                                <el-input v-model="basicInfoData.conclusion" placeholder="请输入结论"></el-input>
                            </div>
                            <div v-else>{{ basicInfoData.conclusion || '' }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px; border: 1px solid #ccc; padding: 8px;">备注</td>
                        <td style="border: 1px solid #ccc; padding: 8px;" :colspan="2">
                            <div v-if="!isView">
                                <el-input v-model="basicInfoData.remarks" placeholder="请输入备注"></el-input>
                            </div>
                            <div v-else>{{ basicInfoData.remarks || '' }}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 签名区域 -->
            <div style="margin-top: 20px;">
                <el-row :gutter="20" style="display: flex; align-items: center;">
                    <el-col :span="8">
                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
                            <span style="font-weight: bold; min-width: 100px;">检验员/日期:</span>
                            <span style="flex: 1;">
                                <div v-if="!isView" style="display: flex; align-items: center;">
                                    <el-input v-model="basicInfoData.inspector" placeholder="请输入检验员" style="width: 140px;"></el-input>
                                    <el-date-picker
                                        v-model="basicInfoData.inspectionTime"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期"
                                        style="width: 160px;"
                                    />
                                </div>
                                <div v-else>{{ basicInfoData.inspector || '' }} / {{ basicInfoData.inspectionTime || '' }}</div>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
                            <span style="font-weight: bold; min-width: 100px;">复核人/日期:</span>
                            <span style="flex: 1;">
                                <div v-if="!isView" style="display: flex; align-items: center;">
                                    <el-input v-model="basicInfoData.reviewer" placeholder="请输入复核人" style="width: 140px;"></el-input>
                                    <el-date-picker
                                        v-model="basicInfoData.reviewTime"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期"
                                        style="width: 160px;"
                                    />
                                </div>
                                <div v-else>{{ basicInfoData.reviewer || '' }} / {{ basicInfoData.reviewTime || '' }}</div>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
                            <span style="font-weight: bold; min-width: 100px;">审核人/日期:</span>
                            <span style="flex: 1;">
                                <div v-if="!isView" style="display: flex; align-items: center;">
                                    <el-input v-model="basicInfoData.checker" placeholder="请输入审核人" style="width: 140px;"></el-input>
                                    <el-date-picker
                                        v-model="basicInfoData.approvedDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期"
                                        style="width: 160px;"
                                    />
                                </div>
                                <div v-else>{{ basicInfoData.checker || '' }} / {{ basicInfoData.approvedDate || '' }}</div>
                            </span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <template v-slot:footer>
            <el-button v-if="isView" type="primary" @click="print" v-loading="loading">打印</el-button>
            <el-button v-if="!isView" type="primary" @click="save" v-loading="loading">确认</el-button>
            <el-button @click="cancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script>
    import { queryInspectionReportData, queryInspectionReportList, generateReport } from '@/api/inspectionReport';
export default {
    name: 'QualityReport',
    props: {
        isView: {
            type: Boolean,
            default: false
        },
        visible: {
            type: Boolean,
            default: false
        },
        row: {
            type: Object,
            default: () => {}
        },
        item: {
            type: Object,
            default: () => {}
        },
    },
    data() {
        return {
        // visible: false,
        loading: false,
        currentRow: {}, // 存储当前行数据
        templateItem: {}, // 存储当前模板项数据
        // 基本信息数据
        basicInfoData: {},
        
        // 检验项目
        inspectionItems: [],
    
        }
    },
    watch: {
        visible(newVal, oldVal) {
            if (newVal) {
                this.open(this.row, this.item);
            }
        }
    },
    created() {
        // 页面加载时可以在这里添加数据初始化逻辑
    },
    methods: {
        /* 打开质检报告 */
        open(row, item) {
            this.currentRow = row;
            this.templateItem = item || row;
            console.log('currentRow~~~', this.currentRow, this.templateItem);
            // this.visible = true;
            if(this.currentRow.reportTemplateJson?.basicInfoData) {
                this.basicInfoData = this.currentRow.reportTemplateJson.basicInfoData || {};
                this.inspectionItems = this.currentRow.reportTemplateJson.inspectionItems || [];
            } else {
                this.getBasicInfo();
                this.getInspectionItems();
            }
        },
        getBasicInfo() {
            queryInspectionReportData(this.currentRow.id).then(res => {
                this.basicInfoData = res;
            });
        },
        getInspectionItems() {
            queryInspectionReportList(this.currentRow.id).then(res => {
                this.inspectionItems = res;
            });
        },
        cancel() {
            // this.visible = false;
            this.$emit('update:visible', false);
        },
        /* 保存编辑 */
        save() {
            this.loading = true;
            const printSection = document.getElementById('printSection');
            const params = {
                id: this.currentRow.id,
                reportTemplateId: this.templateItem.id,
                reportTemplateCode: this.templateItem.code || this.templateItem.reportTemplateCode,
                reportTemplateName: this.templateItem.name || this.templateItem.reportTemplateName,
                reportTemplateJson: {
                    template: printSection.innerHTML,
                    basicInfoData: this.basicInfoData,
                    inspectionItems: this.inspectionItems,
                }
            };
            generateReport(params).then(res => {
                this.loading = false;
                this.$message({
                    message: '保存成功',
                    type: 'success'
                });
                this.$emit('reload');
                this.cancel();
                // this.$emit('update:visible', false);
                // this.visible = false;
            }).catch(err => {
                this.loading = false;
                this.$message({
                    message: err.message,
                    type: 'error'
                });
            });
        },
        /* 打印 */
        print() {
            const printSection = document.getElementById('printSection');
            console.log('printSection', printSection.innerHTML);
            // 创建打印任务
            const printWindow = window.open('', '_blank');
            printWindow.document.open();
            printWindow.document.write('<html><head><title>打印预览</title>');
            printWindow.document.write(
                '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
            );
            printWindow.document.write('</head><body>');
            printWindow.document.write(printSection.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.onload = function () {
                printWindow.print();
            };
        }
    }
}
</script>