From 867a0898fb59692fa01ba9d56c9c81eba7e6c436 Mon Sep 17 00:00:00 2001
From: pengjun <158915633@qq.com>
Date: Fri, 22 Dec 2023 18:18:03 +0800
Subject: [PATCH] DO

---
 src/components/doctorCheck/CheckItemList.vue  |   2 +-
 src/components/doctorCheck/CheckPicture.vue   | 105 ++++++---
 .../doctorCheck/CheckPictureUpload.vue        | 217 ++++++++++++++++++
 src/components/doctorCheck/CheckSumSug.vue    |  18 +-
 src/utlis/mm.js                               |   2 +-
 .../customerOrg/patientRegisterImport.vue     |  13 +-
 6 files changed, 322 insertions(+), 35 deletions(-)
 create mode 100644 src/components/doctorCheck/CheckPictureUpload.vue

diff --git a/src/components/doctorCheck/CheckItemList.vue b/src/components/doctorCheck/CheckItemList.vue
index 7490462..50a6789 100644
--- a/src/components/doctorCheck/CheckItemList.vue
+++ b/src/components/doctorCheck/CheckItemList.vue
@@ -6,7 +6,7 @@
       :height="
         window.pageHeight < 600
           ? Math.floor(((420 - 40 - (isCheckPicture ? 100:0)) * 3) / 5)
-          : Math.floor(((window.pageHeight - 260 - 40 - (isCheckPicture ? 100:0)) * 3) / 5)
+          : Math.floor(((window.pageHeight - 260 - 40 - (isCheckPicture ? 120:0)) * 3) / 5)
       "
       :row-style="{ height: '30px' }"
       border highlight-current-row
diff --git a/src/components/doctorCheck/CheckPicture.vue b/src/components/doctorCheck/CheckPicture.vue
index bf8c23d..f29b102 100644
--- a/src/components/doctorCheck/CheckPicture.vue
+++ b/src/components/doctorCheck/CheckPicture.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex;">
+  <div style="display: flex; ">
     <div>
       <div>
         <el-button type="primary" class="btnClass" @click="btnGetPic" size="small">采图</el-button>
@@ -11,33 +11,43 @@
         <el-button type="primary" class="btnClass" @click="btnSavePic" size="small">保存</el-button>
       </div>
     </div>
-    <div class="demo-image__preview" v-for="(item,index) in checkPictures" :key="item.id" style="padding: 0 0 0 2px;"> 
-      <div style="position: relative;font-size:24px;margin: -6px 0 0 55px;z-index:2;">
-        <el-tooltip content="删除该图" placement="bottom" effect="light">
-          <i class="el-icon-close" @click="btnDelImage(index)"
-            style="color: red;cursor:pointer;"></i>
-        </el-tooltip>
-      </div>
-      <div style="margin-top: -25px;">
-        <el-image 
-          style="width: 80px; height: 80px;border-radius:5px;"
-          :src="item.pictureFilename" 
-          :preview-src-list="[item.pictureFilename]">
-        </el-image>
-      </div>
-      <div style="display: flex;">
-        <div style="margin: -6px 0 0 1px;">
-          <el-checkbox v-model="item.isPrintTrans"></el-checkbox>
-        </div>
-        <div style="font-size:12px;margin: -2px 0 0 1px;">打印</div>        
-        <div style="font-size:15px;margin: -5px 0 0 2px;">
-          <el-tooltip content="保存后，图片将按序号从小到大排序" placement="bottom" effect="light">
-            <input placeholder="排序" v-model="item.displayOrder" @onkeyup="validateInteger(e,index)" 
-              style="width: 35px" />
+    <div :style="`display: flex; white-space: nowrap;overflow-x: scroll;width: ${Math.floor((window.pageWidth - 200 - 110 - 45 - 4))}px;`">
+      <div class="demo-image__preview" v-for="(item,index) in checkPictures" :key="item.id" style="display: inline-block;padding: 0 0 0 2px;"
+        > 
+        <div style="position: relative;font-size:24px;margin: -6px 0 0 55px;z-index:2;">
+          <el-tooltip content="删除该图" placement="bottom" effect="light">
+            <i class="el-icon-close" @click="btnDelImage(index)"
+              style="color: red;cursor:pointer;"></i>
           </el-tooltip>
         </div>
+        <div style="margin-top: -25px;">
+          <el-image 
+            style="width: 80px; height: 80px;border-radius:5px;"
+            :src="item.pictureFilename.indexOf('http') > -1 ? item.pictureFilename:apiUrl+item.pictureFilename" 
+            :preview-src-list="[item.pictureFilename.indexOf('http') > -1 ? item.pictureFilename:apiUrl+item.pictureFilename]">
+          </el-image>
+        </div>
+        <div style="display: flex;">
+          <div style="margin: -6px 0 0 1px;">
+            <el-checkbox v-model="item.isPrintTrans"></el-checkbox>
+          </div>
+          <div style="font-size:12px;margin: -2px 0 0 1px;">打印</div>        
+          <div style="font-size:15px;margin: -5px 0 0 2px;">
+            <el-tooltip content="保存后，图片将按序号从小到大排序" placement="bottom" effect="light">
+              <input placeholder="排序" v-model="item.displayOrder" @onkeyup="validateInteger(e,index)" 
+                style="width: 35px" />
+            </el-tooltip>
+          </div>
+        </div>
       </div>
     </div>
+    <el-dialog title="图片上传"
+      :visible.sync="dialogCheckPictureUpload"
+      :close-on-click-modal="false"
+      width="800px" @close="getCheckPictures(doctorCheck.RegisterCheckId)"
+      >
+      <CheckPictureUpload :registerCheckId="doctorCheck.RegisterCheckId" :uploadSeq="uploadSeq" :closePicUpload="closePicUpload"/>
+  </el-dialog>
   </div>
 </template>
 <script>
@@ -45,9 +55,13 @@ import moment from "moment";
 import { mapState } from "vuex";
 import { getapi, postapi, putapi, deletapi } from "@/api/api";
 import { deepCopy } from '@/utlis/proFunc';
+import CheckPictureUpload from './CheckPictureUpload.vue'
+import server from "../../utlis/mm"
 
 export default {
-  components: {},
+  components: {
+    CheckPictureUpload,
+  },
   data() {
     return {
       checkPictures:[{
@@ -62,7 +76,12 @@ export default {
         isPrint:'Y',
         isPrintTrans:true,
         pictureFilename:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
-      }],     
+      }],
+      
+      apiUrl:server.apiurl,
+      //图片上传
+      dialogCheckPictureUpload:false,   
+      uploadSeq:0, //第几次点图片上传，每点一次清空前次所选图片      
     };
   },
 
@@ -72,7 +91,7 @@ export default {
   mounted() {},
 
   computed: {
-    ...mapState(["dict", "doctorCheck","patientRegister", "customerOrg"]),
+    ...mapState(["window", "dict", "doctorCheck","patientRegister", "customerOrg"]),
     lmoment(date, forMat) {
       return moment(new Date(date)).format(forMat);
     },
@@ -108,14 +127,34 @@ export default {
     },
 
     btnGetPic(){
+      if(!this.doctorCheck.RegisterCheckId){
+        this.$message.warning("未选中组合项目！")
+        return
+      }
       console.log('采图，开发中……')
     },
 
+    //导图（上传图片）
     btnExpPic(){
-      console.log('导图，开发中……')
+      if(!this.doctorCheck.RegisterCheckId){
+        this.$message.warning("未选中组合项目！")
+        return
+      }
+      this.uploadSeq++;
+      this.dialogCheckPictureUpload = true;
+    },
+
+    //关闭上传图片窗口
+    closePicUpload(){
+      this.dialogCheckPictureUpload = false;
     },
 
     btnSavePic(){
+      if(!this.doctorCheck.RegisterCheckId){
+        this.$message.warning("未选中组合项目！")
+        return
+      }
+
       let body = []
       // [
       //   {
@@ -233,4 +272,14 @@ export default {
   min-width: 40px;
   padding: 5px 5px; /*原始 默认值 10px 10px */
 }
+
+/* 强制出现滚动条 */
+::-webkit-scrollbar {
+  height: .5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: .25rem;
+} 
 </style>
diff --git a/src/components/doctorCheck/CheckPictureUpload.vue b/src/components/doctorCheck/CheckPictureUpload.vue
new file mode 100644
index 0000000..8c2f858
--- /dev/null
+++ b/src/components/doctorCheck/CheckPictureUpload.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div>
+      <el-upload
+        action="#" multiple :file-list="fileList" accept=".jpg,.png,.bmp,.gif"
+        list-type="picture-card" :on-change="onChange"
+        :auto-upload="false">
+          <i slot="default" class="el-icon-plus"></i>
+          <div slot="file" slot-scope="{file}">
+            <img
+            class="el-upload-list__item-thumbnail"
+              :src="file.url" :alt="file.name"
+            >
+            <span class="el-upload-list__item-actions" >
+              <span
+                class="el-upload-list__item-preview" 
+                @click="handlePictureCardPreview(file)"
+              >
+                <i class="el-icon-zoom-in"></i>
+              </span>
+              <!-- 不需再下载
+              <span
+                v-if="!disabled"
+                class="el-upload-list__item-delete"
+                @click="handleDownload(file)"
+              >
+                <i class="el-icon-download"></i>
+              </span>
+              -->
+              <span
+                class="el-upload-list__item-delete"
+                @click="handleRemove(file)"
+              >
+                <i class="el-icon-delete"></i>
+              </span>
+            </span>
+          </div>
+      </el-upload>
+    </div>
+    <div style="display: flex;margin-top: 10px;justify-content:space-between;">
+      <div></div>
+      <div>
+        <el-button type="primary" class="btnClass" @click="btnUpload">上传</el-button>
+      </div>      
+    </div>
+    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+<script>
+import moment from "moment";
+import { mapState } from "vuex";
+import { getapi, postapi, putapi, deletapi } from "@/api/api";
+import { arrayExistObj, deepCopy } from '@/utlis/proFunc';
+
+
+export default {
+  components: {},
+  props:["registerCheckId","uploadSeq","closePicUpload"],
+  data() {
+    return {      
+      fileList:[],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false
+    };
+  },
+  
+  created() {},
+
+  //挂载完成
+  mounted() {},
+
+  computed: {
+    ...mapState(["dict", "doctorCheck","patientRegister", "customerOrg"]),
+    lmoment(date, forMat) {
+      return moment(new Date(date)).format(forMat);
+    },
+  },
+  methods: {
+
+    handleRemove(file) {
+      //console.log('file,this.fileList',file,this.fileList);
+      let lfind = arrayExistObj(this.fileList,'uid',file.uid)
+      if(lfind > -1) this.fileList.splice(lfind,1)
+    },
+
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+
+    handleDownload(file) {
+      console.log(file);
+    },
+
+    onChange(file, fileList){
+      this.fileList = fileList;
+      // console.log('file, fileList',file, fileList);
+    },
+
+    btnUpload(){
+      console.log('that.registerCheckId',this.registerCheckId)
+      if(!(this.fileList && typeof this.fileList == 'object' && this.fileList.length > 0)){
+        this.$message.warning("请选择要上传的文件！")
+        return
+      }
+      let checkSize=[]
+      this.fileList.forEach(e => {
+        if(e.size > 1024*1024*20) checkSize.push(e.name)
+      });
+
+      if(checkSize.length > 0){
+        this.$message.error(`所选文件 ${JSON.stringify(checkSize)} 大于 20MB ，文件过大无法上传`)
+        return;
+      }
+
+
+      let count = 0,err='';
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      console.log('this.fileList',this.fileList)
+      for(let i=0;i<this.fileList.length;i++){
+        if(err) break;
+        let file = this.fileList[i]        
+        let reader = new FileReader();
+        let that = this;      
+        // 定义读取文件
+        reader.onload = (event) => {
+          let data = event.target.result;
+          console.log('base64',data.length,data)
+          let body = {
+            registerCheckId: that.registerCheckId,
+            pictureBaseStrs: [data]
+          }
+          postapi('/api/app/registercheckpicture/uploadregistercheckpicturemany',body)
+          .then(res =>{
+            if(res.code != -1){
+              count++;
+              // console.log('count,that.fileList.length',count,that.fileList.length)
+              if(count == that.fileList.length){                             
+                loading.close();
+                that.$message.success("操作成功！")
+                that.closePicUpload()
+              }
+            }else{
+              err = res.message;
+              loading.close();
+              that.$message.error("操作失败！")
+              that.closePicUpload()
+            }
+          }).catch(error =>{
+            err = error
+            loading.close();
+            that.$message.error("操作失败！")
+            that.closePicUpload()
+          });
+          
+        }
+
+        // 错误处理
+        reader.onerror = function(event) {
+          // 读取失败时执行的代码
+          this.$message.error("文件转 base64 失败：" + event.target.error)
+        };
+
+        reader.readAsDataURL(file.raw);
+        // reader.readAsText(this.fileList[0].raw);
+        // reader.readAsBinaryString(this.fileList[0].raw);
+      };
+      
+      
+    },
+
+  },
+
+  //监听事件
+  watch: {
+    //体检人员切换
+    "registerCheckId":{
+      immediate:true,
+      handler(newVal, oldVal) {
+        console.log("watch:registerCheckId:", newVal, " oldVal :", oldVal); 
+        // this.getCheckPictures(newVal)        
+      }
+    },
+
+    //每次显示上传图片窗口时，清空前次所选图片
+    "uploadSeq":{
+      immediate:true,
+      handler(newVal, oldVal) {
+        console.log("watch:uploadSeq:", newVal, " oldVal :", oldVal);        
+        this.fileList = [] ;
+      }
+    },
+  }
+};
+</script>
+<style scoped>
+.query {
+  margin-left: 10px;
+  margin-right: 2px;
+  padding: 1px 1px;
+}
+
+.btnClass{
+  margin: 2px 2px 0;    
+  height: 26px;
+  min-width: 40px;
+  padding: 5px 5px; /*原始 默认值 10px 10px */
+}
+</style>
diff --git a/src/components/doctorCheck/CheckSumSug.vue b/src/components/doctorCheck/CheckSumSug.vue
index 1041785..87c8d01 100644
--- a/src/components/doctorCheck/CheckSumSug.vue
+++ b/src/components/doctorCheck/CheckSumSug.vue
@@ -1,8 +1,8 @@
 <template>
   <div style="display: flex;">
-    <div :style="'width:'+Math.floor((window.pageWidth - 200 - 110 - 45 - 4)/2) + 'px;'">
+    <div :style="`width:${sumWidth}px;`">
       <el-table id="tableSummary" row-key="id" :data="doctorCheck.checkSummaryList" size="samll"        
-        :height="window.pageHeight < 600 ? Math.floor((395 - (isCheckPicture ? 100:0))*2/5):Math.floor((window.pageHeight - 205 - (isCheckPicture ? 100:0))*2/5)"
+        :height="sumHeight"
         width="100%" border @row-click="rowClick">
         <el-table-column prop="summary" label="小结">
           <template slot="header">
@@ -40,9 +40,9 @@
         </el-table-column> 
       </el-table>
     </div>
-    <div :style="'margin-left:2px;width:'+Math.floor((window.pageWidth - 200 - 110 - 45 - 4)/2) + 'px;'">
+    <div :style="`margin-left:2px;width:${sumWidth}px;`">
       <el-table id="tableSuggestion" row-key="id" :data="doctorCheck.checkSuggestionList" size="samll"
-        :height="window.pageHeight < 600 ? Math.floor((395 - (isCheckPicture ? 100:0))*2/5):Math.floor((window.pageHeight - 205 - (isCheckPicture ? 100:0))*2/5)"
+        :height="sumHeight"
         width="100%" border @row-click="rowClick">
         <el-table-column prop="suggestion" label="建议" >
           <template slot-scope="scope">
@@ -83,6 +83,16 @@ export default {
 
   computed: {
     ...mapState(['window','dict', 'doctorCheck']),
+
+    //小结宽度
+    sumWidth(){
+      return Math.floor((this.window.pageWidth - 200 - 110 - 45 - 4)/2);
+    },
+
+    //小结高度
+    sumHeight(){
+      return this.window.pageHeight < 600 ? Math.floor((395 - (this.isCheckPicture ? 100:0))*2/5):Math.floor((this.window.pageHeight - 205 - (this.isCheckPicture ? 120:0))*2/5);
+    }
   },
 
   methods: {
diff --git a/src/utlis/mm.js b/src/utlis/mm.js
index 441be16..86f7b25 100644
--- a/src/utlis/mm.js
+++ b/src/utlis/mm.js
@@ -4,5 +4,5 @@
 
 // modify by pengjun
 module.exports = {
-    apiurl:'http://140.143.162.39:9529',
+    apiurl:'http://140.143.162.39:9529', // http://140.143.162.39:9529 192.168.1.168
 }
\ No newline at end of file
diff --git a/src/views/customerOrg/patientRegisterImport.vue b/src/views/customerOrg/patientRegisterImport.vue
index fe3ba27..fec1182 100644
--- a/src/views/customerOrg/patientRegisterImport.vue
+++ b/src/views/customerOrg/patientRegisterImport.vue
@@ -1023,6 +1023,7 @@ export default {
     // 获取选择的文件
     changeFileChoose(e) {
       if(e.target.files.length <= 0) return;
+      // console.log('file',e.target.files[0])
       this.readDataOpts.file = e.target.files[0];
       // 调用导入Excel文件的方法
       // File {name: 'vulkan-1.dll',
@@ -1038,8 +1039,9 @@ export default {
     //sheetjs 读取文件
     readFile(file){
       const reader = new FileReader();
-      reader.readAsBinaryString(file);
+      
       // reader.readAsArrayBuffer(file);
+      // 定义读取文件
       reader.onload = (e) => {
         let data = e.target.result;
         // let typedArray = new Uint8Array(data);
@@ -1058,6 +1060,15 @@ export default {
           this.chooseSheetName(this.sheetNames[0])
         })
       }
+
+      // 错误处理
+      reader.onerror = function(event) {
+        // 读取失败时执行的代码
+        console.error("File could not be read!" + event.target.error);
+      };
+
+
+      reader.readAsBinaryString(file);
     },
 
     //选择要导入的Excel表单名