feat(报表): 新增报表浏览组件及质检报告模板

src/components/jimureport/api.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request';
+
+export async function getServiceurl () {
+  const res = await request.get('sys/jimureport/getServiceurl');
+  if (res.data.code == 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+export async function getPrintMap () {
+  const res = await request.get('sys/jimureport/getPrintMap');
+  if (res.data.code == 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+export async function getJmPrintViewUrl (code) {
+  const res = await request.get('sys/jimureport/getJmPrintViewUrl/'+code);
+  if (res.data.code == 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/components/jimureport/browse.vue

@@ -0,0 +1,23 @@
+<template>
+  <iframe
+    :src="url"
+    width="100%"
+    style="height: calc(100vh - 100px)"
+    frameborder="0"
+    allowfullscreen="true"
+  ></iframe>
+</template>
+
+<script>
+  export default {
+    props: {
+      url: ''
+    },
+    data() {
+      return {};
+    },
+
+    methods: {}
+  };
+</script>
+<style scoped lang="scss"></style>

src/components/jimureport/browseModal.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <ele-modal
+      :visible.sync="showEditFlag"
+      :close-on-click-modal="false"
+      custom-class="ele-dialog-form"
+      append-to-body
+      :fullscreen="true"
+    >
+      <browse :url="fileUrl"></browse
+    ></ele-modal>
+    <el-link type="primary" @click="open">{{ text }}</el-link>
+  </div>
+</template>
+
+<script>
+  import { getToken } from '@/utils/token-util';
+  import { getJmPrintViewUrl } from './api.js';
+  import browse from './browse.vue';
+
+  export default {
+    components: {
+      browse
+    },
+    props: {
+      text: {
+        default: '打印预览'
+      },
+      businessId: {
+        default: ''
+      },
+      businessCode: {
+        default: ''
+      }
+    },
+    data() {
+      return {
+        fileUrl: '',
+        showEditFlag: false
+      };
+    },
+
+    methods: {
+      async open() {
+        this.showEditFlag = true;
+        let url = await getJmPrintViewUrl(this.businessCode);
+        this.fileUrl = `${url}?token=${getToken()}&id=${this.businessId}`;
+      }
+    }
+  };
+</script>
+<style scoped lang="scss"></style>

src/views/traceability/traceabilityCode/company.vue

@@ -69,7 +69,7 @@
           </div>
           <div class="info-item">
             <span class="info-label">营业执照:</span>
-            <img style="width: 200px;" v-if="companyInfo.businessLicenseFile.length && companyInfo.businessLicenseFile[0].url" :src="companyInfo.businessLicenseFile[0].url" alt="">
+            <img style="width: 200px;" v-if="companyInfo.businessLicenseFile?.length && companyInfo.businessLicenseFile[0].url" :src="companyInfo.businessLicenseFile[0].url" alt="">
           </div>
         </div>
         <!-- 查看更多信息按钮 -->

src/views/traceability/traceabilityCode/index.vue

@@ -35,6 +35,8 @@
                 <span class="info-value">{{ detail.productName }}</span>
               </div>
             </div>
+          </div>
+          <div class="info-row">
             <div class="info-col">
               <div class="info-item">
                 <span class="info-label">产地:</span>
@@ -49,6 +51,8 @@
                 <span class="info-value">{{ detail.productCode }}</span>
               </div>
             </div>
+          </div>
+          <div class="info-row">
             <div class="info-col">
               <div class="info-item">
                 <span class="info-label">批号:</span>
@@ -64,6 +68,8 @@
                   <span class="info-value">{{ detail.specification }}</span>
                 </div>
               </div>
+            </div>
+            <div class="info-row">
               <div class="info-col">
                 <div class="info-item">
                   <span class="info-label">内控等级:</span>
@@ -87,38 +93,38 @@
                 </div>
               </div>
             </div>
-            <div class="info-row">
+            <!-- <div class="info-row">
               <div class="info-col">
                 <div class="info-item">
                   <span class="info-label">性味与归经:</span>
                   <span class="info-value"></span>
                 </div>
               </div>
-            </div>
-            <div class="info-row">
+            </div> -->
+            <!-- <div class="info-row">
               <div class="info-col">
                 <div class="info-item">
                   <span class="info-label">功能与主治:</span>
                   <span class="info-value"></span>
                 </div>
               </div>
-            </div>
-            <div class="info-row">
+            </div> -->
+            <!-- <div class="info-row">
               <div class="info-col">
                 <div class="info-item">
                   <span class="info-label">用法与用量:</span>
                   <span class="info-value"></span>
                 </div>
               </div>
-            </div>
-            <div class="info-row">
+            </div> -->
+            <!-- <div class="info-row">
               <div class="info-col">
                 <div class="info-item">
                   <span class="info-label">贮藏:</span>
                   <span class="info-value">{{ detail.layBy }}</span>
                 </div>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
         <!-- 查看更多信息按钮 -->

src/views/traceability/traceabilityCode/purchase.vue

@@ -28,13 +28,17 @@
           采购详情
         </div>
         <div class="info-item">
-          <span class="info-label">原药批号:</span>
+          <span class="info-label">批次号:</span>
           <span class="info-value">{{ purchaseInfo.sourceBatchNo }}</span>
         </div>
         <div class="info-item">
-          <span class="info-label">原药产地:</span>
+          <span class="info-label">产地:</span>
           <span class="info-value">{{ purchaseInfo.purchaseOrigins }}</span>
         </div>
+        <div class="info-item">
+          <span class="info-label">供应商名称:</span>
+          <span class="info-value">{{ purchaseInfo.supplierName }}</span>
+        </div>
         <div class="info-item">
           <span class="info-label">采收时间:</span>
           <span class="info-value"></span>
@@ -43,9 +47,13 @@
           <span class="info-label">采购人员:</span>
           <span class="info-value">{{ purchaseInfo.purchaseUserName }}</span>
         </div>
+        <div class="info-item">
+          <span class="info-label">采购数量:</span>
+          <span class="info-value">{{ purchaseInfo.purchaseQuantity }}{{ purchaseInfo.measuringUnit }}</span>
+        </div>
         <div class="info-item">
           <span class="info-label">采购重量:</span>
-          <span class="info-value">{{ purchaseInfo.purchaseWeight }}{{ detail.unit }}</span>
+          <span class="info-value">{{ purchaseInfo.purchaseWeight }}{{ purchaseInfo.weightUnit }}</span>
         </div>
         <div class="info-item">
           <span class="info-label">采购日期:</span>

src/views/traceability/traceabilityCode/quality.vue

@@ -82,7 +82,7 @@
           <span class="info-label">检验日期:</span>
           <span class="info-value">{{ qualityInfo.inspectionTime || '-' }}</span>
         </div>
-        <div class="info-item">
+        <!-- <div class="info-item">
           <span class="info-label">复核人:</span>
           <span class="info-value">{{ qualityInfo.reviewer || '-' }}</span>
         </div>
@@ -97,11 +97,18 @@
         <div class="info-item">
           <span class="info-label">审核日期:</span>
           <span class="info-value">{{ qualityInfo.approvedDate || '-' }}</span>
-        </div>
+        </div> -->
         <div class="images-section">
           <span class="section-subtitle">报告单:</span>
           <div class="images-grid">
             <!-- <img class="detail-image" :src="detailImageSrc" alt="质检报告单"> -->
+             <div v-if="template">
+                <div v-html="template"> </div>
+              </div>
+              <!-- <browse v-else :url="fileUrl"></browse> -->
+               <div v-else class="report-template-container">
+                 <reportTemplate :templateInfo="this.qualityInfo"></reportTemplate>
+               </div>
           </div>
         </div>
       </div>
@@ -117,8 +124,16 @@
 </template>
 
 <script>
+// import browse from '@/components/jimureport/browse.vue';
+// import { getJmPrintViewUrl } from '@/components/jimureport//api.js';
+// import { getToken } from '@/utils/token-util';
+import reportTemplate from '@/views/traceability/traceabilityCode/reportTemplate.vue';
 export default {
   name: 'QualityTraceabilityPage',
+  components: {
+    // browse,
+    reportTemplate,
+  },
   data() {
     return {
       // 使用项目中已有的图标路径
@@ -127,9 +142,11 @@ export default {
       detail: {},
       purchaseInfo: {},
       qualityInfo: {},
+      fileUrl: '',
+      template: '',
     };
   },
-  mounted() {
+  async mounted() {
     console.log('路由参数:');
     console.log('路由参数:', this.$route.query);
     // 从路由参数中获取detail对象
@@ -140,6 +157,13 @@ export default {
         console.log('获取到的detail参数:', this.detail);
         this.purchaseInfo = this.detail.purchaseInfo || {};
         this.qualityInfo = this.detail.qualityInfo || {};
+        if (this.qualityInfo.reportTemplateJson?.template) {
+          this.template = this.qualityInfo.reportTemplateJson.template;
+        } else {
+          // let url = await getJmPrintViewUrl('qmsqualityinspectionprint');
+          // this.fileUrl = `${url}?token=${getToken()}&id=${this.qualityInfo.id}`;
+          // console.log('fileUrl~~~', this.fileUrl);
+        }
       } catch (error) {
         console.error('解析detail参数失败:', error);
         this.detail = {};
@@ -339,6 +363,29 @@ export default {
   object-fit: cover;
 }
 
+.report-template-container {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.report-template-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.report-template-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.report-template-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.report-template-container::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
 .home-button {
   position: fixed;
   bottom: 30px;

src/views/traceability/traceabilityCode/reportTemplate.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="report-container">
+    <div class="report-header">
+      <!-- <div class="company-logo">
+        <img src="@/assets/logo.png" alt="嘉实医药" />
+      </div> -->
+      <div class="report-title">检验报告书</div>
+    </div>
+    
+    <div class="report-info">
+      <div class="info-item">
+        <span class="label">编号:</span>
+        <span class="value">{{ templateInfo.code }}</span>
+      </div>
+      <div class="info-item">
+        <span class="label">报告单号:</span>
+        <span class="value">{{ templateInfo.reportNumber }}</span>
+      </div>
+    </div>
+    
+    <table class="report-table">
+      <tbody>
+        <tr>
+          <td class="td-label">检品名称</td>
+          <td class="td-value" colspan="2">{{ templateInfo.productName }}</td>
+          <td class="td-label">批号/序列号</td>
+          <td class="td-value" colspan="2">{{ templateInfo.batchNo }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">规格型号</td>
+          <td class="td-value" colspan="2">{{ templateInfo.specification }}/{{ templateInfo.modelType }}</td>
+          <td class="td-label">数量</td>
+          <td class="td-value" colspan="2">{{ templateInfo.total }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">请验日期</td>
+          <td class="td-value" colspan="2">{{ templateInfo.pleaseVerifyDate }}</td>
+          <td class="td-label">请验部门</td>
+          <td class="td-value" colspan="2">{{ templateInfo.pleaseVerifyDepartment }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">报告日期</td>
+          <td class="td-value" colspan="2">{{ templateInfo.reportDate }}</td>
+          <td class="td-label">有效期</td>
+          <td class="td-value" colspan="2">{{ templateInfo.expirationDate }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">来源</td>
+          <td class="td-value" colspan="2">{{ templateInfo.source }}</td>
+          <td class="td-label">储存条件</td>
+          <td class="td-value" colspan="2">{{ templateInfo.storageCondition }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">检验依据</td>
+          <td class="td-value" colspan="5">{{ templateInfo.inspectionBasis }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">检验项目</td>
+          <td class="td-value" colspan="3">标准规定</td>
+          <td class="td-value" colspan="2">检验结果</td>
+        </tr>
+        <tr v-for="(item, index) in templateInfo.list" :key="index">
+          <td class="td-value">{{ item.item }}</td>
+          <td class="td-value" colspan="3">{{ item.standardRegulations }}</td>
+          <td class="td-value" colspan="2">{{ item.results }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">结论</td>
+          <td class="td-value" colspan="5">{{ templateInfo.conclusion }}</td>
+        </tr>
+        <tr>
+          <td class="td-label">备注</td>
+          <td class="td-value" colspan="5">{{ templateInfo.remarks }}</td>
+        </tr>
+      </tbody>
+    </table>
+    
+    <div class="report-footer">
+      <div class="footer-item">检验员：{{ templateInfo.inspector }} /日期：{{ templateInfo.inspectionTime }}</div>
+      <div class="footer-item">复核人：{{ templateInfo.reviewer }} /日期：{{ templateInfo.reviewTime }}</div>
+      <div class="footer-item">审核人：{{ templateInfo.checker }} /日期：{{ templateInfo.approvedDate }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ReportTemplate',
+  props: {
+    templateInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.report-container {
+  /* width: 500px; */
+  max-width: 800px;
+  margin: 0 auto;
+  /* padding: 20px; */
+  /* border: 1px solid #000; */
+  /* font-family: Arial, sans-serif; */
+}
+
+.report-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.company-logo {
+  width: 80px;
+  height: 80px;
+}
+
+.company-logo img {
+  width: 100%;
+  height: 100%;
+}
+
+.report-title {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  flex: 1;
+  margin-left: -80px;
+}
+
+.report-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.info-item {
+  display: flex;
+  margin-right: 20px;
+  align-items: center;
+}
+
+.info-item .label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.report-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+.report-table td {
+  border: 1px solid #000;
+  padding: 8px;
+}
+
+.td-label {
+  font-weight: bold;
+  background-color: #f5f5f5;
+  width: 90px;
+}
+
+.td-value {
+  width: 100%;
+}
+
+.report-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.footer-item {
+  flex: 1;
+  text-align: center;
+  margin-right: 20px;
+}
+</style>