订单管理、我的订单增加上传手写信息采集功能

src/views/hisStore/storeOrder/HandwriteCollectionDialog.vue

@@ -0,0 +1,267 @@
+<!-- HandwriteCollectionDialog.vue -->
+<template>
+  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="700px" append-to-body @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <!-- 手写信息采集表 -->
+      <el-form-item label="手写信息采集表" prop="billImgUrl">
+        <image-upload v-model="form.billImgUrl" :limit="1" style="flex: 1;" />
+      </el-form-item>
+
+      <!-- 补充图片 -->
+      <el-form-item label="补充图片" prop="extraImgUrl">
+        <image-upload v-model="form.extraImgUrl" :limit="10" multiple />
+        <div v-if="extraImgRequired" style="color: red; font-size: 12px; margin-top: 4px;">
+          * 该订单包含药品，补充图片为必传
+        </div>
+      </el-form-item>
+
+      <!-- 患者姓名 -->
+      <el-form-item label="患者姓名" prop="patientName">
+        <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
+      </el-form-item>
+
+      <!-- 患者电话 -->
+      <el-form-item label="患者电话" prop="patientPhone">
+        <el-input v-model="form.patientPhone" placeholder="请输入患者电话" />
+      </el-form-item>
+
+      <!-- 订单号 -->
+      <el-form-item label="订单号" prop="orderCode">
+        <el-input v-model="form.orderCode" placeholder="订单号" disabled />
+      </el-form-item>
+
+      <!-- 订单信息卡片（自动展示） -->
+      <div v-if="orderInfoVisible" class="order-info-card" style="margin-top: 10px;">
+        <el-card shadow="never">
+          <div slot="header">
+            <span>订单基本信息</span>
+            <el-button type="text" style="float: right;" @click="orderInfoVisible = false">关闭</el-button>
+          </div>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="订单号">{{ orderInfo.orderCode || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="收货人">{{ orderInfo.realName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="联系电话">{{ orderInfo.userPhone || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="收货地址">{{ orderInfo.userAddress || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="订单状态">
+              <el-tag size="small" v-if="orderInfo.statusText">{{ orderInfo.statusText }}</el-tag>
+              <span v-else>-</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="实付金额">￥{{ orderInfo.payMoney ? orderInfo.payMoney.toFixed(2) : '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </div>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addCollection, updateCollection, checkOrderCode, getOrderCodeInfo } from "@/api/member/handwriteCollection/handwriteCollection";
+import { getStoreOrder } from "@/api/hisStore/storeOrder";
+// 药品标志API
+import { getProductMedicineFlagByOrderCode } from "@/api/store/storeProduct";
+import ImageUpload from "@/components/ImageUpload";
+
+export default {
+  name: "HandwriteCollectionDialog",
+  components: { ImageUpload },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: "上传手写信息采集表",
+      form: {
+        id: null,
+        patientName: "",
+        patientPhone: "",
+        billImgUrl: "",
+        orderCode: "",
+        extraImgUrl: ""
+      },
+      orderInfoVisible: false,
+      orderInfo: {},
+      extraImgRequired: false,  // 补充图片是否必传
+      statusOptions: [],        // 订单状态字典
+      rules: {
+        billImgUrl: [{ required: true, message: "手写信息采集表不能为空", trigger: "change" }],
+        patientName: [{ required: true, message: "患者姓名不能为空", trigger: "blur" }],
+        patientPhone: [
+          { required: true, message: "患者电话不能为空", trigger: "blur" },
+          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
+        ],
+        orderCode: [{ required: true, message: "订单号不能为空", trigger: "blur" }],
+        extraImgUrl: [{ required: false, message: "请上传补充图片", trigger: "change" }]
+      }
+    };
+  },
+  watch: {
+    "form.orderCode": {
+      handler(newVal) {
+        if (newVal) {
+          this.loadOrderInfo(newVal);
+          this.loadMedicineFlag(newVal);
+        }
+      },
+      immediate: true
+    },
+    extraImgRequired(val) {
+      // 动态修改补充图片的必填规则
+      const newRule = val ? { required: true, message: "该订单包含药品，补充图片为必传", trigger: "change" } : { required: false };
+      this.rules.extraImgUrl = newRule;
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.clearValidate("extraImgUrl");
+        }
+      });
+    }
+  },
+  created() {
+    this.getDicts("store_order_status").then(response => {
+      this.statusOptions = response.data;
+    }).catch(() => {
+      this.statusOptions = [];
+    });
+  },
+  methods: {
+    // 打开弹窗，接收行数据
+    open(row) {
+      this.dialogVisible = true;
+      this.resetForm();
+      // 回填订单号、患者姓名、患者电话
+      this.form.orderCode = row.orderCode || "";
+      this.form.patientName = row.realName || "";
+      this.form.patientPhone = row.userPhone || "";
+      // 如果是编辑模式（有id），可额外传入 id、billImgUrl、extraImgUrl
+      if (row.id && row.billImgUrl) {
+        this.dialogTitle = "编辑手写信息采集表";
+        this.form.id = row.id;
+        this.form.billImgUrl = row.billImgUrl;
+        this.form.extraImgUrl = row.extraImgUrl || "";
+      } else {
+        this.dialogTitle = "上传手写信息采集表";
+        this.form.id = null;
+        this.form.billImgUrl = "";
+        this.form.extraImgUrl = "";
+      }
+    },
+
+    // 加载订单信息（自动展示卡片）
+    async loadOrderInfo(orderCode) {
+      if (!orderCode) return;
+      try {
+        const res = await getOrderCodeInfo(orderCode);
+        if (res.code !== 200 || !res.data) {
+          this.orderInfoVisible = false;
+          return;
+        }
+        const orderId = res.data.id;
+        const orderDetailRes = await getStoreOrder(orderId);
+        if (orderDetailRes.code !== 200) {
+          this.orderInfoVisible = false;
+          return;
+        }
+        const order = orderDetailRes.order;
+        if (order) {
+          let statusText = "";
+          if (this.statusOptions && this.statusOptions.length) {
+            const statusObj = this.statusOptions.find(item => item.dictValue == order.status);
+            statusText = statusObj ? statusObj.dictLabel : "";
+          }
+          this.orderInfo = {
+            orderCode: order.orderCode,
+            realName: order.realName,
+            userPhone: order.userPhone,
+            userAddress: order.userAddress,
+            payMoney: order.payMoney,
+            statusText: statusText
+          };
+          this.orderInfoVisible = true;
+        } else {
+          this.orderInfoVisible = false;
+        }
+      } catch (error) {
+        this.orderInfoVisible = false;
+      }
+    },
+
+    // 加载药品标识，决定补充图片是否必传
+    async loadMedicineFlag(orderCode) {
+      if (!orderCode) return;
+      try {
+        const res = await getProductMedicineFlagByOrderCode(orderCode);
+        if (res.code === 200) {
+          this.extraImgRequired = res.flag === true;
+        } else {
+          this.extraImgRequired = false;
+        }
+      } catch (error) {
+        this.extraImgRequired = false;
+      }
+    },
+
+    // 提交表单
+    submitForm() {
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) return;
+
+        // 新增模式校验订单号是否已被使用
+        const isUpdate = this.form.id != null;
+        if (!isUpdate && this.form.orderCode) {
+          try {
+            const res = await checkOrderCode(this.form.orderCode);
+            if (res.code !== 200) {
+              this.$message.error(res.msg || "订单号校验失败，请检查");
+              return;
+            }
+          } catch (error) {
+            this.$message.error("订单号校验请求失败");
+            return;
+          }
+        }
+
+        // 提交数据
+        const action = isUpdate ? updateCollection(this.form) : addCollection(this.form);
+        action.then(() => {
+          this.$message.success(isUpdate ? "修改成功" : "新增成功");
+          this.dialogVisible = false;
+          this.$emit("success"); // 通知父组件刷新列表
+        }).catch(error => {
+          this.$message.error("操作失败");
+        });
+      });
+    },
+
+    resetForm() {
+      this.form = {
+        id: null,
+        patientName: "",
+        patientPhone: "",
+        billImgUrl: "",
+        orderCode: "",
+        extraImgUrl: ""
+      };
+      this.orderInfoVisible = false;
+      this.orderInfo = {};
+      this.extraImgRequired = false;
+      if (this.$refs.form) {
+        this.$refs.form.resetFields();
+        this.$refs.form.clearValidate();
+      }
+    },
+
+    handleClose() {
+      this.resetForm();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.order-info-card {
+  border-radius: 4px;
+  overflow: hidden;
+}
+</style>

src/views/hisStore/storeOrder/list.vue

@@ -295,6 +295,13 @@
                 @click="handleDetails(scope.row)"
                 v-hasPermi="['store:storeOrder:query']"
               >查看</el-button>
+              <!-- 新增：上传手写信息采集按钮 -->
+              <el-button
+                v-if="scope.row.handleCollectionId == null && ['0','1','2','3'].includes(String(scope.row.status))"
+                size="mini"
+                type="text"
+                @click="handleUploadHandwrite(scope.row)"
+              >上传手写信息采集</el-button>
            <!--    <el-button
                 size="mini"
                 type="text"
@@ -312,6 +319,8 @@
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
+    <!-- 手写信息采集弹窗组件 -->
+    <handwrite-collection-dialog ref="handwriteDialog" @success="getList" />
     <el-drawer
      size="75%"
       :title="show.title" :visible.sync="show.open"
@@ -481,8 +490,9 @@ import QRCode from 'qrcodejs2'
 import { treeselect } from "@/api/company/companyDept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import HandwriteCollectionDialog from "./HandwriteCollectionDialog.vue";
 export default {
-  components: { Treeselect,productOrder,productSelect,addUser,addUserAddress },
+  components: { Treeselect,productOrder,productSelect,addUser,addUserAddress,HandwriteCollectionDialog },
   name: "StoreOrder",
   data() {
     return {
@@ -661,6 +671,9 @@ export default {
     this.getList();
   },
   methods: {
+    handleUploadHandwrite(row) {
+      this.$refs.handwriteDialog.open(row);
+    },
      /** 查询部门下拉树结构 */
      getTreeselect() {
       treeselect().then((response) => {

src/views/hisStore/storeOrder/myList.vue

@@ -221,6 +221,12 @@
             @click="handleDetails(scope.row)"
             v-hasPermi="['store:storeOrder:query']"
           >查看</el-button>
+          <el-button
+            v-if="scope.row.handleCollectionId == null && ['0','1','2','3'].includes(String(scope.row.status))"
+            size="mini"
+            type="text"
+            @click="handleUploadHandwrite(scope.row)"
+          >上传手写信息采集</el-button>
           <!-- <el-button
             size="mini"
             type="text"
@@ -238,6 +244,8 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    <!-- 手写信息采集弹窗组件 -->
+    <handwrite-collection-dialog ref="handwriteDialog" @success="getList" />
     <el-drawer
      size="75%"
       :title="show.title" :visible.sync="show.open"
@@ -258,8 +266,9 @@ import addUser from "../components/addUser";
 import addUserAddress from "../components/addUserAddress";
 import config from "@/utils/config";
 import QRCode from 'qrcodejs2'
+import HandwriteCollectionDialog from "./HandwriteCollectionDialog.vue";
 export default {
-  components: { productOrder,productSelect,addUser,addUserAddress },
+  components: { productOrder,productSelect,addUser,addUserAddress,HandwriteCollectionDialog },
   name: "StoreOrder",
   data() {
     return {
@@ -415,6 +424,9 @@ export default {
     this.getList();
   },
   methods: {
+    handleUploadHandwrite(row) {
+      this.$refs.handwriteDialog.open(row);
+    },
     handleGenPayUrl(row){
       this.payQr.open=true;
       setTimeout(() => {