增加处方图片展示

src/api/qw/companyCustomer.js

@@ -157,6 +157,15 @@ export function addBuyTimes(id) {
   });
 }
 
+//修改商城处方的制单状态为已制单
+export function updateScrmPrescriptionDocumentSuccess(id) {
+  return request({
+    url: '/qw/companyCustomer/updateScrmPrescriptionDocumentSuccess',
+    method: 'post',
+    data: { id: id }
+  });
+}
+
 
 // 完善病例
 export function improve(data) {
@@ -166,3 +175,11 @@ export function improve(data) {
     data: data
   })
 }
+
+// 根据客户ID获取关联的处方信息
+export function getScrmPrescribeInfo(id) {
+  return request({
+    url: '/qw/companyCustomer/getScrmPrescribeInfo/' + id,
+    method: 'get'
+  });
+}

src/views/qw/companyCustomer/index.vue

@@ -796,6 +796,36 @@
       :close-on-click-modal="false"
       @close="createOrderCancel"
     >
+      <!-- 处方图片展示区域 -->
+      <div v-if="createOrder.scrmPrescribeInfo" style="margin-bottom: 20px; border-bottom: 1px solid #EBEEF5; padding-bottom: 15px;">
+        <div style="font-weight: bold; margin-bottom: 10px;">处方图片</div>
+        <div :style="getImageLayoutStyle(createOrder.scrmPrescribeInfo.prescribeType)" style="display: flex; gap: 20px; justify-content: flex-start; flex-wrap: wrap;">
+          <!-- 西药图片（prescribeType=1 或 3） -->
+          <div v-if="shouldShowWesternImage(createOrder.scrmPrescribeInfo.prescribeType)" style="text-align: center; flex: 1;">
+            <div style="margin-bottom: 5px;">西药处方</div>
+            <el-image
+              v-if="createOrder.scrmPrescribeInfo.prescribeImgStoreUrl"
+              :src="createOrder.scrmPrescribeInfo.prescribeImgStoreUrl"
+              :preview-src-list="[createOrder.scrmPrescribeInfo.prescribeImgStoreUrl]"
+              style="width: 200px; height: auto; max-height: 200px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;"
+              fit="contain"
+            />
+            <div v-else style="color: #909399;">暂无西药处方图</div>
+          </div>
+          <!-- 中药图片（prescribeType=2 或 3） -->
+          <div v-if="shouldShowChineseImage(createOrder.scrmPrescribeInfo.prescribeType)" style="text-align: center; flex: 1;">
+            <div style="margin-bottom: 5px;">中药处方</div>
+            <el-image
+              v-if="createOrder.scrmPrescribeInfo.prescribeImgUrl"
+              :src="createOrder.scrmPrescribeInfo.prescribeImgUrl"
+              :preview-src-list="[createOrder.scrmPrescribeInfo.prescribeImgUrl]"
+              style="width: 200px; height: auto; max-height: 200px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;"
+              fit="contain"
+            />
+            <div v-else style="color: #909399;">暂无中药处方图</div>
+          </div>
+        </div>
+      </div>
       <el-form
         ref="createOrderForm"
         :model="createOrderForm"
@@ -1401,7 +1431,9 @@ import {
   getQRCode,
   getAddress,
   addBuyTimes,
+  updateScrmPrescriptionDocumentSuccess,
   improve,
+  getScrmPrescribeInfo
 } from "@/api/qw/companyCustomer";
 import { parseTime } from "@/utils/common";
 import { getCitys } from "@/api/hisStore/city";
@@ -1610,7 +1642,7 @@ export default {
         pageSize: 10,
         companyCustomerId: null,
       },
-      createOrder: { open: false, title: "创建订单" },
+      createOrder: { open: false, title: "创建订单",scrmPrescribeInfo: null },
       createOrderForm: {
         realName: "",
         phone: "",
@@ -1735,7 +1767,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        generatePrescribeData(row.id).then(response => { 
+        generatePrescribeData(row.id).then(response => {
           this.msgSuccess("开方成功");
           this.getList();
         });
@@ -1992,45 +2024,52 @@ export default {
           console.error("增加购买次数失败", err);
           // 不阻塞主流程，仅记录错误
         });
+        //制单成功更新商城处方表的制单状态为"已制单"
+        updateScrmPrescriptionDocumentSuccess(this.currentCustomerId).catch((err) => {
+          console.error("更新商城处方制单状态失败", err);
+          // 不阻塞主流程，仅记录错误
+        });
       }
+      //根据搜索表单刷新列表
+      this.getList();
       // 弹出提示确认框
-      this.$confirm(
-        `<div style="text-align: center; padding: 10px 0;">
-     <i class="el-icon-warning-outline" style="font-size: 48px; color: #E6A23C;"></i>
-     <p style="font-size: 16px; margin: 15px 0 10px; font-weight: 500;">
-       请上传此订单的手写信息采集，否则无法发货！
-     </p>
-     <p style="color: #F56C6C; font-size: 14px;">
-       点击“确定”跳转上传页面
-     </p>
-   </div>`,
-        "温馨提示",
-        {
-          confirmButtonText: "确定，去上传",
-          cancelButtonText: "暂不处理",
-          type: "warning",
-          dangerouslyUseHTMLString: true,
-          center: true,
-          distinguishCancelAndClose: true,
-        }
-      )
-        .then(() => {
-          // 确保订单列表弹窗打开并刷新
-          if (this.currentCustomerId) {
-            this.orderQueryParams.companyCustomerId = this.currentCustomerId;
-            this.orderListDialogVisible = true;
-            this.getOrderList();
-          } else {
-            this.$message.warning("无法获取客户信息，请手动刷新订单列表");
-            this.orderListDialogVisible = true; // 仍打开弹窗，但可能无法正确筛选
-          }
-          // 打开手写信息采集新增弹窗
-          this.openHandwriteDialog(order, orderParams);
-        })
-        .catch(() => {
-          this.getList();
-          this.$message.info("已取消上传手写信息采集");
-        });
+   //    this.$confirm(
+   //      `<div style="text-align: center; padding: 10px 0;">
+   //   <i class="el-icon-warning-outline" style="font-size: 48px; color: #E6A23C;"></i>
+   //   <p style="font-size: 16px; margin: 15px 0 10px; font-weight: 500;">
+   //     请上传此订单的手写信息采集，否则无法发货！
+   //   </p>
+   //   <p style="color: #F56C6C; font-size: 14px;">
+   //     点击“确定”跳转上传页面
+   //   </p>
+   // </div>`,
+   //      "温馨提示",
+   //      {
+   //        confirmButtonText: "确定，去上传",
+   //        cancelButtonText: "暂不处理",
+   //        type: "warning",
+   //        dangerouslyUseHTMLString: true,
+   //        center: true,
+   //        distinguishCancelAndClose: true,
+   //      }
+   //    )
+   //      .then(() => {
+   //        // 确保订单列表弹窗打开并刷新
+   //        if (this.currentCustomerId) {
+   //          this.orderQueryParams.companyCustomerId = this.currentCustomerId;
+   //          this.orderListDialogVisible = true;
+   //          this.getOrderList();
+   //        } else {
+   //          this.$message.warning("无法获取客户信息，请手动刷新订单列表");
+   //          this.orderListDialogVisible = true; // 仍打开弹窗，但可能无法正确筛选
+   //        }
+   //        // 打开手写信息采集新增弹窗
+   //        this.openHandwriteDialog(order, orderParams);
+   //      })
+   //      .catch(() => {
+   //        this.getList();
+   //        this.$message.info("已取消上传手写信息采集");
+   //      });
     },
 
     // 打开手写信息采集弹窗并预填信息
@@ -2174,6 +2213,7 @@ export default {
       this.totalMoney = 0;
       this.city = [];
       this.district = [];
+      this.createOrder.scrmPrescribeInfo = null;
       if (this.$refs.createOrderForm) {
         this.$refs.createOrderForm.clearValidate();
       }
@@ -2275,11 +2315,24 @@ export default {
       // });
       this.createOrderReset();
       this.createOrder.open = true;
+      this.createOrder.scrmPrescribeInfo = null; // 清空旧数据
       this.createOrderForm.companyCustomerId = row.id;
       this.currentCustomerId = row.id;
       this.createOrderForm.realName = row.customerName;
       this.sAddress(row);
       this.fetchReceiptList();
+      // 调用处方信息接口
+      getScrmPrescribeInfo(row.id).then(response => {
+        if (response.code === 200 && response.data) {
+          this.createOrder.scrmPrescribeInfo = response.data;
+        } else {
+          // 如果没有处方信息，可以显示提示，但不影响制单流程
+          console.warn("未查询到处方信息", response.msg);
+        }
+      }).catch(err => {
+        console.error("获取处方信息失败", err);
+        // 不阻塞制单流程
+      });
     },
     parseTime,
     getCurrentDateTime() {
@@ -2735,6 +2788,23 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    // 判断是否显示西药图片
+    shouldShowWesternImage(prescribeType) {
+      return prescribeType === 1 || prescribeType === 3;
+    },
+    // 判断是否显示中药图片
+    shouldShowChineseImage(prescribeType) {
+      return prescribeType === 2 || prescribeType === 3;
+    },
+    // 动态设置图片区域的布局样式（一张图片时居左，两张时并排）
+    getImageLayoutStyle(prescribeType) {
+      const showWestern = this.shouldShowWesternImage(prescribeType);
+      const showChinese = this.shouldShowChineseImage(prescribeType);
+      if ((showWestern && !showChinese) || (!showWestern && showChinese)) {
+        return { justifyContent: 'flex-start' }; // 只有一张时左对齐
+      }
+      return { justifyContent: 'space-between' }; // 两张时分散对齐
+    },
   },
 };
 </script>