feat: 添加患者首诊图片管理功能

src/api/store/packageOrder.js

@@ -96,6 +96,24 @@ export function getUserPhone(orderId) {
     method: 'get'
   })
 }
+
+// 修改或者添加患者首诊图片
+export function editPatientImages(orderId, imagesList) {
+  const formData = new FormData();
+  formData.append('orderId', orderId);
+  formData.append('imagesList', imagesList);
+  
+  return request({
+    url: '/store/packageOrder/editPatientImages',
+    method: 'post',
+    data: formData,
+    transformRequest: [function (data, headers) {
+      // 删除默认的Content-Type，让浏览器自动设置为multipart/form-data
+      delete headers['Content-Type'];
+      return data;
+    }]
+  })
+}
 export function getWxaCodePackageOrderUnLimit(orderId) {
   return request({
     url: '/store/packageOrder/getWxaCodePackageOrderUnLimit/'+orderId,

src/views/store/components/packageOrderDetails.vue

@@ -162,6 +162,23 @@
                    <el-descriptions-item label="代收金额" ><span v-if="item.payRemain!=null">￥{{item.payRemain.toFixed(2)}}</span></el-descriptions-item>
         </el-descriptions>
            </div>
+
+       <!-- 首诊图片管理 -->
+       <div class="contentx" v-if="item!=null">
+         <div class="desct">
+           首诊图片管理
+           <el-button
+             type="primary"
+             size="mini"
+             style="float: right; margin-top: -5px;"
+             @click="showPatientImagesDialog"
+             :disabled="item.status == 3"
+           >
+             管理首诊图片
+           </el-button>
+         </div>
+       </div>
+
        <el-drawer
            :with-header="false"
            :append-to-body="true"
@@ -200,19 +217,85 @@
           <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
               <add-sms ref="sms" @close="closeSms()"></add-sms>
           </el-dialog>
+
+          <!-- 首诊图片管理对话框 -->
+          <el-dialog
+            title="首诊图片管理"
+            :visible.sync="patientImagesDialog.visible"
+            width="80%"
+            append-to-body
+            @close="closePatientImagesDialog"
+          >
+            <div v-loading="patientImagesDialog.loading">
+              <div style="margin-bottom: 20px;">
+                <h4>当前首诊图片：</h4>
+                <div v-if="patientImagesDialog.images.length > 0" class="image-gallery">
+                  <div
+                    v-for="(image, index) in patientImagesDialog.images"
+                    :key="index"
+                    class="image-item"
+                  >
+                    <img :src="image" class="thumbnail" @click="previewImage(image)" />
+                    <div class="image-actions">
+                      <el-button
+                        size="mini"
+                        type="danger"
+                        icon="el-icon-delete"
+                        circle
+                        @click="removeImage(index)"
+                      ></el-button>
+                    </div>
+                  </div>
+                </div>
+                <div v-else style="color: #999; text-align: center; padding: 20px;">
+                  暂无首诊图片
+                </div>
+              </div>
+
+              <div style="margin-bottom: 20px;">
+                <h4>添加新图片：</h4>
+                <ImageUpload
+                  v-model="patientImagesDialog.newImages"
+                  :limit="10"
+                  :file-size="5"
+                  :file-type="['jpg', 'jpeg', 'png', 'gif']"
+                />
+              </div>
+            </div>
+
+            <div slot="footer" class="dialog-footer">
+              <el-button @click="closePatientImagesDialog">取 消</el-button>
+              <el-button type="primary" @click="savePatientImages" :loading="patientImagesDialog.saving">
+                保 存
+              </el-button>
+            </div>
+          </el-dialog>
+
+          <!-- 图片预览对话框 -->
+          <el-dialog
+            title="图片预览"
+            :visible.sync="previewDialog.visible"
+            width="60%"
+            append-to-body
+          >
+            <div style="text-align: center;">
+              <img :src="previewDialog.image" style="max-width: 100%; max-height: 500px;" />
+            </div>
+          </el-dialog>
       </div>
 </template>
 
 <script>
 
-import { listPackageOrder,storeRefund,inquiryRefund, payment,getPackageOrder, delPackageOrder,refundAudit, addPackageOrder,refund, updatePackageOrder, exportPackageOrder,getUserPhone } from "@/api/store/packageOrder";
+import { listPackageOrder,storeRefund,inquiryRefund, payment,getPackageOrder, delPackageOrder,refundAudit, addPackageOrder,refund, updatePackageOrder, exportPackageOrder,getUserPhone, editPatientImages } from "@/api/store/packageOrder";
 import { listOrderitem} from "@/api/store/storeOrder";
 import storeOrderDetails from '../components/storeOrderDetails2.vue';
 import inquiryOrderDetails from '../components/inquiryOrderDetails.vue';
 import addSms from '../../crm/components/addSms.vue';
+import ImageUpload from '@/components/ImageUpload/index.vue';
   export default {
     name: "patdetails",
-    components: { storeOrderDetails,inquiryOrderDetails,addSms },
+    components: { storeOrderDetails,inquiryOrderDetails,addSms, ImageUpload },
     props:["data"],
     data() {
 
@@ -248,6 +331,19 @@ import addSms from '../../crm/components/addSms.vue';
       refundStatusOptions: [],
         item:null,
       pay:[],
+      // 患者图片管理对话框数据
+      patientImagesDialog: {
+        visible: false,
+        loading: false,
+        saving: false,
+        images: [], // 当前患者图片列表
+        newImages: '' // 新上传的图片
+      },
+      // 图片预览对话框数据
+      previewDialog: {
+        visible: false,
+        image: ''
+      }
       }
     },
     computed: {
@@ -282,7 +378,7 @@ import addSms from '../../crm/components/addSms.vue';
         setTimeout(() => {
             that.$refs.sms.getPackageOrderId(this.item.orderId,mobile,3);
         }, 500);
-        
+
       },
       handlePhone(){
         const orderId = this.item.orderId;
@@ -408,6 +504,114 @@ import addSms from '../../crm/components/addSms.vue';
             });
           }).catch(function() {});
       },
+      // 显示患者图片管理对话框
+      showPatientImagesDialog() {
+        // 解析patientJson中的firstVisitImages字段
+        if (this.item.patientJson) {
+          try {
+            const patientData = JSON.parse(this.item.patientJson);
+            // 修改：imagesList参数接受的是图片的path字符串，可能包含多个路径用逗号分隔
+            const imagesPath = patientData.firstVisitImages;
+            if (imagesPath) {
+              // 如果是字符串，按逗号分割成数组用于显示
+              if (typeof imagesPath === 'string') {
+                this.patientImagesDialog.images = imagesPath.split(',').filter(img => img.trim() !== '');
+              } else {
+                // 如果已经是数组，直接使用
+                this.patientImagesDialog.images = imagesPath;
+              }
+            } else {
+              this.patientImagesDialog.images = [];
+            }
+          } catch (e) {
+            console.error('解析patientJson失败:', e);
+            this.patientImagesDialog.images = [];
+          }
+        } else {
+          this.patientImagesDialog.images = [];
+        }
+
+        // 重置新上传的图片
+        this.patientImagesDialog.newImages = '';
+        this.patientImagesDialog.visible = true;
+      },
+
+      // 关闭患者图片管理对话框
+      closePatientImagesDialog() {
+        this.patientImagesDialog.visible = false;
+        this.patientImagesDialog.images = [];
+        this.patientImagesDialog.newImages = '';
+      },
+
+      // 预览图片
+      previewImage(image) {
+        this.previewDialog.image = image;
+        this.previewDialog.visible = true;
+      },
+
+      // 移除图片
+      removeImage(index) {
+        this.$confirm('确定要删除这张图片吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.patientImagesDialog.images.splice(index, 1);
+          this.$message.success('删除成功');
+        }).catch(() => {});
+      },
+
+      // 保存患者图片
+      savePatientImages() {
+        this.patientImagesDialog.saving = true;
+
+        // 合并原有图片和新上传的图片
+        let allImages = [...this.patientImagesDialog.images];
+
+        // 如果有新上传的图片，添加到列表中
+        if (this.patientImagesDialog.newImages) {
+          const newImages = this.patientImagesDialog.newImages.split(',').filter(img => img.trim() !== '');
+          allImages = [...allImages, ...newImages];
+        }
+
+        // 修改：根据后端API要求，imagesList参数应该是字符串类型
+        // 将所有图片路径用逗号连接成一个字符串
+        const imagesParam = allImages.join(',');
+
+        console.log('保存患者图片，参数:', {
+          orderId: this.item.orderId,
+          imagesParam: imagesParam
+        });
+
+        // 调用API保存图片
+        editPatientImages(this.item.orderId, imagesParam).then(response => {
+          console.log('保存患者图片成功:', response);
+          this.$message.success('保存成功');
+          this.patientImagesDialog.saving = false;
+          this.patientImagesDialog.visible = false;
+
+          // 更新item中的patientJson
+          if (this.item.patientJson) {
+            try {
+              const patientData = JSON.parse(this.item.patientJson);
+              // 保存时保持与API一致的格式，存储字符串
+              patientData.firstVisitImages = imagesParam;
+              this.item.patientJson = JSON.stringify(patientData);
+            } catch (e) {
+              console.error('更新patientJson失败:', e);
+            }
+          }
+        }).catch(error => {
+          console.error('保存患者图片失败:', error);
+          this.$message.error('保存失败: ' + (error.message || '未知错误'));
+          this.patientImagesDialog.saving = false;
+        }).finally(() => {
+          // 确保无论成功还是失败，都重置saving状态
+          if (this.patientImagesDialog.saving) {
+            this.patientImagesDialog.saving = false;
+          }
+        });
+      }
     }
   }
 </script>
@@ -450,5 +654,46 @@ import addSms from '../../crm/components/addSms.vue';
   float: right;
   margin-right: 20px
 }
+
+/* 图片画廊样式 */
+.image-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.image-item {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+.thumbnail:hover {
+  transform: scale(1.05);
+}
+
+.image-actions {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.image-item:hover .image-actions {
+  opacity: 1;
+}
 </style>