src/api/experiment/checkTheReport.js

@@ -7,3 +7,12 @@
    params
  })
}

//获取报告内的数据
export function getReportData(params) {
  return request({
    url: '/report/getReportContext',
    method: 'post',
    params
  })
}

 src/components/experiment/checkTheReport/index.vue

@@ -8,25 +8,27 @@
            <table>
                <tr>
                    <td>材料名称</td>
                    <td colspan="5"></td>
                    <td colspan="5">{{reportData.name}}</td>
                </tr>
                <tr>
                    <td>规格型号</td>
                    <td colspan="2"></td>
                    <td colspan="2">
                        {{reportData.specifications.split("-")[1]}}
                    </td>
                    <td>材料厂家</td>
                    <td colspan="2"></td>
                    <td colspan="2">{{reportData.supplier}}</td>
                </tr>
                <tr>
                    <td>材料批号</td>
                    <td colspan="2"></td>
                    <td>材料编号</td>
                    <td colspan="2">{{reportData.imCode}}</td>
                    <td>检测编号</td>
                    <td colspan="2"></td>
                    <td colspan="2">{{reportData.insCode}}</td>
                </tr>
                <tr>
                    <td>检测依据</td>
                    <td colspan="2"></td>
                    <td colspan="2">{{reportData.specifications.split("-")[0]}}</td>
                    <td>检测类别</td>
                    <td colspan="2"></td>
                    <td colspan="2">原材料</td>
                </tr>
                <tr>
                    <td>序号</td>
@@ -36,32 +38,30 @@
                    <td>检测结果</td>
                    <td>单项判断</td>
                </tr>
                <tr v-for="item in 15" :key="item">
                    <td>{{item}}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                <tr v-for="(item,index) in reportData.products" :key="item">
                    <td>{{index+1}}</td>
                    <td>{{item.ipName}}</td>
                    <td>{{item.unit}}</td>
                    <td>{{item.required}}</td>
                    <td>{{item.testValue}}</td>
                    <td>{{item.testState == 1 ? "√" : "X"}}</td>
                </tr>
                <tr>
                    <td colspan="6">检验结论：</td>
                    <td colspan="6">检验结论：{{reportData.type == 1 ? "合格" : "不合格"}}</td>
                </tr>
                <tr>
                    <td colspan="6">
                        注：“√”表示该项目合格，“×”表示该项目不合格“—”表示该项目不要求检测。
                        注：“√”表示该项目合格，“×”表示该项目不合格，“—”表示该项目不要求检测。
                    </td>
                </tr>
            </table>
            <el-row class="date-group" :gutter="20">
                <el-col :span="8">检测、日期：<span>2023-08-25</span></el-col>
                <el-col :span="8">审核、日期：<span>2023-08-25</span></el-col>
                <el-col :span="8">批准、日期：<span>2023-08-25</span></el-col>
                <el-col :span="12">检测、日期：<span>{{reportData.createTime}}</span></el-col>
                <el-col :span="12">审核、日期：<span>{{reportData.checkTime}}</span></el-col>
            </el-row>
            <p class="footer">
                <span>编号:</span><span>ZTT/ICSRCP18-003</span>
                <span> 发行日期:</span><span>2023-08-25</span>
                <span> 发行部门:</span><span>质量部</span>
                <span>编号:</span><span>{{reportData.reportCode}}</span>
                <span> 发行日期:</span><span>{{new Date() | formatDate}}</span>
                <span> 保存期限:</span><span>长期</span>
            </p>
        </div>
@@ -73,7 +73,17 @@
        return {
            logoSrc : require("@/assets/404_images/logo.png"),    
        }
    }
    },
    methods:{
        formatDate(val){
            var dt = new Date(val);
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            return `${year}-${month}-${date}`;
        }
    },
    props:["reportData"]
})
</script>
<style scoped lang="scss">
@@ -105,7 +115,7 @@
                border: 2px solid black;
            }
            tr,td,th{
                padding: 15px 20px;
                padding: 5px 5px;
            }
            .date-group .el-col{
                text-align: center;

 src/views/experiment/checkTheReport/index.vue

@@ -57,10 +57,10 @@
        :visible.sync="dialogVisible"
        width="60%">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="printFun()">打印</el-button>
          <el-button type="primary" @click="printFun()">打印</el-button>
        </span>
        <div class="printStyle">
          <preview id="printDiv"></preview>
          <preview id="printDiv" :reportData="reportData"></preview>
        </div>
      </el-dialog>
      <div class="table-box">
@@ -93,14 +93,14 @@
            </template></el-table-column
          >
          <el-table-column
            prop="materialCode"
            prop="reportCode"
            label="报告单号"
            sortable
            min-width="10%"
          >
            <template slot-scope="scope">
              <span style="color: #409eff;">
                  {{ scope.row.materialCode }}
                  {{ scope.row.reportCode }}
              </span>
            </template></el-table-column
          >
@@ -179,12 +179,13 @@
</template>

<script>
import { selectAllReport } from "@/api/experiment/checkTheReport";
import { selectAllReport,getReportData } from "@/api/experiment/checkTheReport";
import Preview from "@/components/experiment/checkTheReport/index.vue";
import PrintJS from 'print-js'
export default {
  data() {
    return {
      reportData: [],
      searchData:{
        sample_code:'',
        reportCode:'',
@@ -203,25 +204,31 @@
    this.getData();
  },
  mounted(){
    // this.dialogVisible = true;
  },
  components:{
    Preview
  },
  methods: {
    //预览按钮
    previewFun(){
    async queryReportByRCode(code){
      const resp = await getReportData({code:code});
      this.reportData = resp.data;
      console.log(this.reportData);
    },
    //查看报告按钮
    previewFun(row){
      this.dialogVisible = true;
      this.queryReportByRCode(row.reportCode);
    },
    //打印按钮
    printFun(){
        PrintJS({
          printable: "printDiv",
          type: "html",
          // header: "原材料检测报告",
          targetStyles: ["*"],
          ignoreElements: ["no-ignore"],
        });
      this.dialogVisible = false;
      PrintJS({
        printable: "printDiv",
        type: "html",
        // header: "原材料检测报告",
        targetStyles: ["*"],
        ignoreElements: ["no-ignore"],
      });
    },
    // 状态按钮
    handleRadioChange() {

 src/views/inspectionManagement/reportForInspection/index.vue

@@ -123,13 +123,13 @@
                min-width="8%"
              />
              <el-table-column
                prop="condition"
                prop="type"
                label="状态"
                min-width="8%"
              >
              <template slot-scope="scope">
                <span :style="{ color: scope.row.condition === 1 ? 'green' : 'red' }">
                  {{ scope.row.condition === 1 ? '已检测':'未检测' }}
                <span :style="{ color: scope.row.type === 1 ? 'green' : 'red' }">
                  {{ scope.row.type === 1 ? '已检测':'未检测' }}
                </span>
              </template>
              </el-table-column>
@@ -386,6 +386,7 @@
      // console.log(res)
      this.inspectionTable = res.data.row
      this.data = res.data.row
      console.log(res.data.row);
      this.total = res.data.total
    },
    async search(){