检查管理-详情-上传报告

src/components/FileUpload/index.vue

@@ -15,7 +15,7 @@
       class="upload-file-uploader"
     >
       <!-- 上传按钮 -->
-      <el-button size="mini" type="primary">选取文件</el-button>
+      <el-button size="mini" class="fourWordsBtn">选取文件</el-button>
       <!-- 上传提示 -->
       <div v-if="showTip" slot="tip" class="el-upload__tip">
         请上传

src/views/service-management/medical-record-management/check-detail.vue

@@ -164,7 +164,7 @@
           <div style="height: 16px;border-left: 3px solid #5bb647;" />
           <div style="padding-left: 10px;">检查信息</div>
           <div style="margin-left: auto;padding-right: 50px;">
-            <el-button v-show="checkDetail.checkSchedule >=2 && checkDetail.reportTime === null" class="fourWordsBtn">上传报告</el-button>
+            <el-button v-show="checkDetail.checkSchedule >=2 && checkDetail.shadowReport === null" class="fourWordsBtn" @click="uploadReport">上传报告</el-button>
           </div>
         </div>
         <!-- 检查信息 -->
@@ -195,7 +195,7 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="检查时段">
-              <span>{{ '-' }}</span>
+              <span>{{ parseTime(checkDetail.checkStartTime, '{h}:{i}') + '-' + parseTime(checkDetail.checkEndTime, '{h}:{i}') }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -208,7 +208,8 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="影像报告">
-              <span>{{ checkDetail.shadowReport || '暂未上传' }}</span>
+<!--              <span>{{ checkDetail.shadowReport || '暂未上传' }}</span>-->
+              <el-button @click="viewTheReport" class="fourWordsBtn">查看报告</el-button>
             </el-form-item>
           </el-col>
         </el-row>
@@ -217,18 +218,46 @@
     <div style="display: flex; justify-content: left; margin-top: 20px">
       <el-button class="queryBtn" @click="goBack">返 回</el-button>
     </div>
+    <!--  上传报告对话框  -->
+    <el-dialog
+      title="影像报告"
+      :visible.sync="videoReportVisible"
+      width="30%"
+      @close="closeDialog"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div style="margin-top: 20px">
+        <el-form ref="file" label-width="120px">
+          <el-form-item label="影像报告">
+            <FileUpload v-model="videoReport" :limit="1" :file-size="4" :file-type="['pdf']" :is-show-tip="false" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="resetBtn" @click="cancel">取消</el-button>
+        <el-button class="queryBtn" @click="centerDialogVisible">确认</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { parseTime } from '../../../utils/ruoyi'
+import { parseTime } from '@/utils/ruoyi'
+import { updateCheck } from '@/api/business/mdeicalRecord'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'CheckDetail',
   data() {
     return {
       checkDetail: {},
-      schedule: 1
+      schedule: 1,
+      videoReportVisible: false,
+      // 影像报告
+      videoReport: null,
+      // 图片根据不同环境显示路径
+      baseUrl: process.env.VUE_APP_TEST_API
     }
   },
   created() {
@@ -246,11 +275,44 @@ export default {
         query: { subscribe: this.checkDetail }
       })
     },
+    /** 上传报告对话框取消 */
+    cancel() {
+      this.videoReport = null
+      this.videoReportVisible = false
+    },
+    /** 关闭对话框调用 */
+    closeDialog() {
+      this.videoReport = null
+      this.videoReportVisible = false
+    },
+    /** 点击确认 */
+    centerDialogVisible() {
+      this.checkDetail.shadowReport = this.videoReport
+      this.checkDetail.reportTime = parseTime(new Date())
+      console.log('点击上传报告后', this.checkDetail)
+      // 更新检查表
+      const list = []
+      list.push(this.checkDetail)
+      updateCheck(list).then(res => {
+        if (res.code === 200) {
+          this.$message.success('上传成功')
+        }
+      })
+      this.videoReportVisible = false
+    },
+    /** 查看报告 */
+    viewTheReport() {
+      window.open(this.baseUrl + this.checkDetail.shadowReport)
+    },
     // 返回上一页
     goBack() {
       this.$router.push({
         path: '/service-management/medical-record-management'
       })
+    },
+    /** 点击上传报告按钮 */
+    uploadReport() {
+      this.videoReportVisible = true
     }
   }
 }
@@ -265,10 +327,17 @@ export default {
     margin-left: 10px;
   }
 }
+.dialog-footer{
+  display: flex;
+  justify-content: end;
+}
 </style>
 <style scoped lang="scss">
 .app-container {
   background-color: #FFFFFF;
 
 }
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 26vh !important;
+}
 </style>