update 修改处方上传 和 发票上传 图片 和图片回显 以及修改问题

health-admin/src/main/java/com/bzd/web/controller/dtp/RecipeRegisterController.java

@@ -248,6 +248,30 @@ public class RecipeRegisterController extends BaseController {
         }
     }
 
+    /**
+     * 图片上传 通用
+     */
+    @Log(title = "图片上传", businessType = BusinessType.OTHER)
+    @PostMapping("/uploadImg")
+    @ResponseBody
+    public AjaxResult uploadImg(@RequestParam("file") MultipartFile file)
+    {
+        try
+        {
+            if (!file.isEmpty())
+            {
+                String prescriptionImg = FileUploadUtils.upload(HealthConfig.getUploadPath(), file, MimeTypeUtils.IMAGE_EXTENSION);
+                return success(prescriptionImg);
+            }
+            return error();
+        }
+        catch (Exception e)
+        {
+            log.error("上传图片失败！", e);
+            return error(e.getMessage());
+        }
+    }
+
 
     @Log(title = "处方登记删除", businessType = BusinessType.DELETE)
     @PostMapping("/remove")

health-admin/src/main/resources/templates/dtp/recipe/edit.html

@@ -4,6 +4,7 @@
     <th:block th:include="include :: header('处方登记信息修改')" />
     <th:block th:include="include :: jasny-bootstrap-css" />
 <!--    <th:block th:include="include :: bootstrap-fileinput-css" />-->
+    <th:block th:include="include :: jasny-bootstrap-css" />
     <th:block th:include="include :: layout-latest-css" />
     <th:block th:include="include :: select2-css" />
 </head>
@@ -71,10 +72,7 @@
 <!--                <label class="is-required">临床诊断:</label>-->
 <!--                <input name="clinicalDiagnosis" id="clinicalDiagnosis" placeholder="临床诊断"   class="styled-input" type="text">-->
 <!--            </div>-->
-            <div class="customize-form-group">
-                <label>处方图片:</label>
-                <input name="prescriptionImageUrl" id="prescriptionImageUrl" placeholder="处方图片"  class="styled-input" type="text">
-            </div>
+
             <div class="customize-form-group  select-time">
                 <label class="is-required">处方开具日期:</label>
                 <input name="prescriptionIssueDate" id="prescriptionIssueDate" placeholder="处方开具日期"   class="time-input time-input2" type="text">
@@ -84,12 +82,6 @@
                 <input name="invoiceCode" id="invoiceCode" placeholder="发票编码"  class="styled-input" type="text">
             </div>
             <div class="customize-form-group">
-                <label>发票图片:</label>
-                <input name="invoiceImageUrl" id="invoiceImageUrl" placeholder="发票图片"  class="styled-input" type="text">
-            </div>
-
-
-            <div class="customize-form-group">
                 <label>登记药师姓名:</label>
                 <input name="registerPharmacistName" id="registerPharmacistName" placeholder="登记药师姓名"   class="styled-input" type="text">
             </div>
@@ -108,6 +100,44 @@
                 </select>
             </div>
         </div>
+        <div class="customize-form-group-container">
+            <div class="customize-form-group">
+                <label>处方图片:</label>
+                <div class="form-group">
+                    <div class="fileinput fileinput-new" data-provides="fileinput">
+                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
+                            <img id="prescriptionImageUrl" th:if="${prescriptionImageUrl}" th:src="@{${prescriptionImageUrl}}" class="preview-image" />
+
+                            <div th:unless="${prescriptionImageUrl}" class="centered-content">
+                                <span class="plus-sign">+</span>
+                            </div>
+                        </div>
+                        <div>
+                            <input id="prescriptionImageUpload" name="prescriptionImageUpload" type="file">
+                            <a href="javascript:;" class="btn btn-white" data-dismiss="fileinput">清除图片</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="customize-form-group">
+                <label>发票图片:</label>
+                <div class="form-group">
+                    <div class="fileinput fileinput-new" data-provides="fileinput">
+                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
+                            <img id="invoiceImageUrl" th:if="${invoiceImageUrl}" th:src="@{${invoiceImageUrl}}" class="preview-image" />
+
+                            <div th:unless="${invoiceImageUrl}" class="centered-content">
+                                <span class="plus-sign">+</span>
+                            </div>
+                        </div>
+                        <div>
+                            <input id="invoiceImageUpload" name="invoiceImageUpload" type="file">
+                            <a href="javascript:;" class="btn btn-white" data-dismiss="fileinput">清除图片</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </form>
 
 
@@ -326,6 +356,7 @@
 </div>
 <th:block th:include="include :: footer" />
 <!--<th:block th:include="include :: bootstrap-fileinput-js" />-->
+<th:block th:include="include :: jasny-bootstrap-js" />
 <th:block th:include="include :: bootstrap-table-fixed-columns-js" />
 <th:block th:include="include :: layout-latest-js" />
 <th:block th:include="include :: select2-js" />
@@ -362,7 +393,372 @@
     var hospitals = /*[[${hospital}]]*/ '';
     /*]]>*/
 
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // 初始化所有 .fileinput 区域
+        document.querySelectorAll('.fileinput').forEach(function (fileInputWrapper) {
+            initializeImagePreview2(fileInputWrapper);
+        });
+    });
+
+    function initializeImagePreview2(fileInputWrapper) {
+        var fileInput = fileInputWrapper.querySelector('input[type="file"]');
+        var previewThumbnail = fileInputWrapper.querySelector('.fileinput-preview.thumbnail');
+        var largePreview;
+        var clearButton = fileInputWrapper.querySelector('.btn-white[data-dismiss="fileinput"]');
+
+        // 创建大图预览
+        function createLargePreview(imageSrc) {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove();
+            }
+            largePreview = document.createElement('div');
+            largePreview.className = 'preview-large';
+            largePreview.style.backgroundImage = 'url(' + imageSrc + ')';
+            largePreview.style.width = '1000px'; // 根据需要调整宽度
+            largePreview.style.height = '900px'; // 根据需要调整高度
+            largePreview.style.backgroundSize = 'contain';
+            largePreview.style.backgroundRepeat = 'no-repeat';
+            largePreview.style.backgroundPosition = 'center';
+            largePreview.style.position = 'absolute';
+            largePreview.style.zIndex = '1000';
+            largePreview.style.display = 'none'; // 初始状态下不显示
+
+            // 添加到DOM
+            fileInputWrapper.appendChild(largePreview);
+
+            // 为大图预览添加事件监听器
+            largePreview.onmouseover = function () {
+                this.style.display = 'block';
+            };
+
+            largePreview.onmousemove = function (e) {
+                updateLargePreviewPosition(e, previewThumbnail);
+            };
+
+            largePreview.onmouseout = function (e) {
+                if (!previewThumbnail.contains(e.relatedTarget)) {
+                    hideLargePreview();
+                }
+            };
+        }
+
+        // 悬停时显示大图
+        function handleMouseOver(e) {
+            /*if (previewThumbnail.style.backgroundImage && !largePreview) {
+                createLargePreview(previewThumbnail.style.backgroundImage.replace(/^url$["']?/, '').replace(/["']?$$/, ''));
+            }*/
+            if (largePreview) {
+                showLargePreview(e);
+            }
+        }
+
+        // 鼠标移动时更新大图位置
+        function handleMouseMove(e) {
+            if (largePreview) {
+                updateLargePreviewPosition(e, previewThumbnail);
+            }
+        }
+
+        // 缩略图移出事件处理
+        function handleMouseOut(e) {
+            if (!largePreview || !largePreview.contains(e.relatedTarget)) {
+                hideLargePreview();
+            }
+        }
+
+        // 显示大图预览
+        function showLargePreview(e) {
+            largePreview.style.display = 'block';
+            updateLargePreviewPosition(e, previewThumbnail);
+        }
+
+        // 更新大图预览位置
+        function updateLargePreviewPosition(e, referenceElement) {
+            const rect = referenceElement.getBoundingClientRect();
+            const winWidth = window.innerWidth;
+            const winHeight = window.innerHeight;
+            const largePreviewWidth = largePreview.offsetWidth;
+            const largePreviewHeight = largePreview.offsetHeight;
+
+            let left = e.pageX ; // 尝试放置在鼠标右侧
+            let top = e.pageY + 150; // 尝试放置在鼠标下方
+
+            // 确保大图预览不超出浏览器窗口边界
+            //if (left + largePreviewWidth > winWidth) left = e.pageX - largePreviewWidth - 300; // 如果右侧空间不足，则放在左侧
+            if (top + largePreviewHeight > winHeight) top = e.pageY - largePreviewHeight; // 如果底部空间不足，则放在上方
+
+            largePreview.style.left = left + 'px';
+            largePreview.style.top = top+400 + 'px';;
+        }
+
+        // 隐藏大图预览
+        function hideLargePreview() {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+            }
+        }
+
+        // 移除图片和大图预览
+        function removeImageAndPreview() {
+            previewThumbnail.style.backgroundImage = ''; // 清空缩略图背景图片
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove(); // 从 DOM 中移除 largePreview
+                largePreview = null;
+            }
+            updateClearButtonVisibility(); // 更新清除按钮的可见性
+        }
+
+        // 更新清除按钮的可见性
+        function updateClearButtonVisibility() {
+            /*if (clearButton) {
+                clearButton.style.display = previewThumbnail.style.backgroundImage ? 'inline-block' : 'none';
+            }*/
+        }
+
+        // 监听文件上传变化事件
+        fileInput.addEventListener('change', function (e) {
+            // 清除现有的大图预览
+            removeImageAndPreview();
+
+            // 读取新文件并更新缩略图背景图片
+            if (this.files && this.files[0]) {
+                var reader = new FileReader();
+                reader.onload = function (event) {
+                    previewThumbnail.style.backgroundImage = 'url(' + event.target.result + ')';
+                    // 立即创建大图预览以反映新图片
+                    createLargePreview(event.target.result);
+                    setupEventListeners(); // 重新设置事件监听器
+                    updateClearButtonVisibility(); // 更新清除按钮的可见性
+                };
+                reader.readAsDataURL(this.files[0]);
+            } else {
+                updateClearButtonVisibility(); // 更新清除按钮的可见性
+            }
+        });
+
+        // 初始化事件监听器
+        function setupEventListeners() {
+            previewThumbnail.onmouseover = handleMouseOver;
+            previewThumbnail.onmousemove = handleMouseMove;
+            previewThumbnail.onmouseout = handleMouseOut;
+
+            // 监听清除按钮点击事件
+            if (clearButton) {
+                clearButton.addEventListener('click', function () {
+                    removeImageAndPreview(); // 清除图片及大图预览
+                });
+            }
+        }
+
+        // 对于回显的图片，确保初始化时创建大图预览并更新清除按钮的可见性
+        if (previewThumbnail.style.backgroundImage) {
+            createLargePreview(previewThumbnail.style.backgroundImage.replace(/^url$["']?/, '').replace(/["']?$$/, ''));
+            updateClearButtonVisibility();
+        } else {
+            updateClearButtonVisibility();
+        }
+
+        // 初始化事件监听器
+        setupEventListeners();
+    }
+    document.addEventListener('DOMContentLoaded', function () {
+        // 初始化所有 .fileinput 区域
+        document.querySelectorAll('.fileinput').forEach(function (fileInputWrapper) {
+            initializeImagePreview(fileInputWrapper);
+        });
+    });
+
+    function initializeImagePreview(fileInputWrapper) {
+        var previewThumbnail = fileInputWrapper.querySelector('.fileinput-preview.thumbnail');
+        var imgElement = previewThumbnail.querySelector('.preview-image');
+        var largePreview;
+        var clearButton = fileInputWrapper.querySelector('.btn-white[data-dismiss="fileinput"]');
+
+        if (!imgElement || !clearButton) return; // 如果没有img元素或清除按钮，则不执行后续操作
+
+        // 创建大图预览
+        function createLargePreview(img) {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove();
+            }
+            largePreview = document.createElement('div');
+            largePreview.className = 'preview-large';
+            largePreview.style.backgroundImage = 'url(' + img.src + ')';
+            largePreview.style.width = '1000px'; // 根据需要调整宽度
+            largePreview.style.height = '900px'; // 根据需要调整高度
+            largePreview.style.backgroundSize = 'contain';
+            largePreview.style.backgroundRepeat = 'no-repeat';
+            largePreview.style.backgroundPosition = 'center';
+            largePreview.style.position = 'absolute';
+            largePreview.style.zIndex = '1000';
+            largePreview.style.display = 'none'; // 初始状态下不显示
+
+            // 添加到DOM
+            fileInputWrapper.appendChild(largePreview);
+        }
+
+        // 悬停时显示大图
+        function handleMouseOver(e) {
+            if (imgElement.src && !largePreview) {
+                createLargePreview(imgElement);
+            }
+            if (largePreview) {
+                showLargePreview(e);
+            }
+        }
+
+        // 鼠标移动时更新大图位置
+        function handleMouseMove(e) {
+            if (largePreview) {
+                updateLargePreviewPosition(e, previewThumbnail);
+            }
+        }
+
+        // 缩略图移出事件处理
+        function handleMouseOut(e) {
+            if (!largePreview || !largePreview.contains(e.relatedTarget)) {
+                hideLargePreview();
+            }
+        }
+
+        // 显示大图预览
+        function showLargePreview(e) {
+            largePreview.style.display = 'block';
+            updateLargePreviewPosition(e, previewThumbnail);
+        }
+
+        // 更新大图预览位置
+        function updateLargePreviewPosition(e, referenceElement) {
+            const rect = referenceElement.getBoundingClientRect();
+            const winWidth = window.innerWidth;
+            const winHeight = window.innerHeight;
+            const largePreviewWidth = largePreview.offsetWidth;
+            const largePreviewHeight = largePreview.offsetHeight;
+
+            let left = e.pageX ; // 尝试放置在鼠标右侧
+            let top = e.pageY + 150; // 尝试放置在鼠标下方
+
+            // 确保大图预览不超出浏览器窗口边界
+            //if (left + largePreviewWidth > winWidth) left = e.pageX - largePreviewWidth - 150; // 如果右侧空间不足，则放在左侧
+            if (top + largePreviewHeight > winHeight) top = e.pageY - largePreviewHeight; // 如果底部空间不足，则放在上方
+
+            largePreview.style.left = left+100 + 'px';
+            largePreview.style.top = top+400 + 'px'; // 保持原有的偏移量
+        }
+
+        // 隐藏大图预览
+        function hideLargePreview() {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+            }
+        }
+
+        // 初始化事件监听器
+        function setupEventListeners() {
+            previewThumbnail.onmouseover = handleMouseOver;
+            previewThumbnail.onmousemove = handleMouseMove;
+            previewThumbnail.onmouseout = handleMouseOut;
+
+            // 监听清除按钮点击事件
+            clearButton.addEventListener('click', function () {
+                removeImageAndPreview(); // 清除图片及大图预览
+            });
+        }
+
+        // 移除事件监听器
+        function removeEventListeners() {
+            previewThumbnail.onmouseover = null;
+            previewThumbnail.onmousemove = null;
+            previewThumbnail.onmouseout = null;
+        }
+
+        // 监听文件上传变化事件
+        function setupFileInputChange(uploadId) {
+            let upload = fileInputWrapper.querySelector(`#${uploadId}`);
+            if (upload) {
+                upload.addEventListener('change', function (e) {
+                    // 清除现有的大图预览
+                    removeImageAndPreview();
+
+                    // 读取新文件并更新 <img> 元素的 src 属性
+                    if (this.files && this.files[0]) {
+                        var reader = new FileReader();
+                        reader.onload = function (event) {
+                            imgElement.src = event.target.result;
+                            // 立即创建大图预览以反映新图片
+                            createLargePreview(imgElement);
+                            setupEventListeners(); // 重新设置事件监听器
+                            updateClearButtonVisibility(); // 更新清除按钮的可见性
+                        };
+                        reader.readAsDataURL(this.files[0]);
+                    } else {
+                        imgElement.src = ''; // 清空图片源
+                        removeEventListeners(); // 移除事件监听器
+                        updateClearButtonVisibility(); // 更新清除按钮的可见性
+                    }
+                });
+            }
+        }
+
+        // 移除图片和大图预览并更新清除按钮的可见性
+        function removeImageAndPreview() {
+            imgElement.src = ''; // 清空图片源
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove(); // 从 DOM 中移除 largePreview
+                largePreview = null;
+            }
+            removeEventListeners(); // 移除事件监听器
+            updateClearButtonVisibility(); // 更新清除按钮的可见性
+        }
+
+        // 更新清除按钮的可见性
+        function updateClearButtonVisibility() {
+            if (clearButton && imgElement) {
+                clearButton.style.display = imgElement.src !== '' ? 'inline-block' : 'none';
+            }
+        }
+
+        // 初始化
+        setupEventListeners();
+
+        // 对应的文件上传控件ID
+        let fileId = fileInputWrapper.querySelector('input[type="file"]')?.id;
+        if (fileId) {
+            setupFileInputChange(fileId);
+        }
+
+        // 对于回显的图片，确保初始化时创建大图预览并更新清除按钮的可见性
+        if (imgElement.src) {
+            createLargePreview(imgElement);
+            updateClearButtonVisibility();
+        } else {
+            updateClearButtonVisibility();
+        }
+    }
     $(document).ready(function () {
+
+        // 监听文件选择变化事件
+        $("#prescriptionImageUpload").on('change', function() {
+            var file = this.files[0];
+            if (file) {
+                var reader = new FileReader();
+                reader.onload = function(e) {
+                    // 更新预览区域的背景图片
+                    $('#prescriptionImagePreview .fileinput-preview').css('background-image', 'url(' + e.target.result + ')');
+                    $('#prescriptionImagePreview .centered-content').hide(); // 隐藏加号图标
+                };
+                reader.readAsDataURL(file);
+            } else {
+                // 如果没有选择文件，则恢复默认状态
+                $('#prescriptionImagePreview .fileinput-preview').css('background-image', '');
+                $('#prescriptionImagePreview .centered-content').show(); // 显示加号图标
+            }
+        });
         //初始化查询患者是否建档
         var status = $('#status').val();
         if(status == 4){
@@ -446,7 +842,6 @@
                     }).appendTo(options);
 
                 });
-                //console.log("hospitals====="+hospitals);
                 // 设置默认选中的 dl 选项
                 options.val(hospitals).trigger('change');
                 /*$('#category-select').select2({
@@ -459,7 +854,7 @@
                 options.trigger('change');
             },
             error: function (xhr, status, error) {
-                console.error("Failed to load disease categories:", error);
+                $.modal.alertError("获取疾病大类失败");
             }
         });
 
@@ -511,7 +906,7 @@
                 },
                 cache: true,
                 error: function (xhr, status, error) {
-                    console.error("Failed to load disease categories:", error);
+                    $.modal.alertError("获取疾病信息失败");
                 }
             }
         });
@@ -534,8 +929,6 @@
         }
     }
     function formatGender(value) {
-        debugger;
-        console.log("valuegender1====="+value);
         switch (value) {
             case 0:
                 $('#gender1').val(value);
@@ -550,7 +943,6 @@
     }
     //检查患者是否存在
     function initCheckPatient() {
-        console.log("initCheckPatient=====");
         var formData = new FormData();
         var patientName = $('#patientName').val();
         var patientPhone = $('#patientPhone').val();
@@ -565,11 +957,9 @@
             contentType: false, // 告诉 jQuery 不要设置 contentType（非常重要）
             async: true, // 异步请求更为推荐，除非有特殊原因需要同步
             error: function (request) {
-                console.log("操作失败");
+                $.modal.alertError("检查患者是否存在失败");
             },
             success: function (data) {
-                debugger;
-                console.log("检查患者是否存在data====="+data);
                 if(data.code==0){
                     patientFlag = true;
                     patientId = data.data.id;
@@ -577,7 +967,6 @@
                     age = data.data.age;
                     gender = data.data.gender;
                     //性别格式化
-                    console.log("gender====="+gender);
                     formatGender(gender);
                     $('#gender1').val(data.data.gender);
                     $('#age1').val(data.data.age);
@@ -588,10 +977,9 @@
                     getLastRecipe(patientId);
                    // $.modal.msg(data.msg);
                 }else{
-                    console.log("gender222====="+gender);
                     patientFlag = false;
                     updatePatientFlag(false);
-                    console.log("查询无数据,该患者未建档，请先建档后在继续操");
+                    $.modal.alertError("查询无数据,该患者未建档，请先建档后在继续操作");
                 }
 
             }
@@ -783,14 +1171,11 @@
         const hospitals = JSON.stringify(selectedhospitals);
         const DL = JSON.stringify(selectedDataDL);
         const XL = JSON.stringify(selectedDataXL);
-        //formData.append('hospital', hospitals);
         formData.append('dl', DL);
         formData.append('xl', XL);
         formData.append('dlanme', DL);
         formData.append('xlname', XL);
-        // console.log("DL=" + DL);
-        // console.log("XL=" + XL);
-// 将药物数据序列化为 JSON 字符串并添加到 FormData 中
+        // 将药物数据序列化为 JSON 字符串并添加到 FormData 中
         var tableRows = [];
         var falg = true;
         var ts_msg = '';
@@ -844,7 +1229,6 @@
                 falg = false;
                 return falg;
             }
-            debugger
             /* 计算 D 值天数*/
             var dcnum = rowData.singleDoseValue; // 单次用量
             var pcnum = rowData.dosageFrequency; // 用药频次  eg: 一天一次
@@ -908,6 +1292,96 @@
         }
         formData.append('age',  $('#age1').val());
         formData.append('gender',  $('#gender1').val());
+        // prescriptionImageUpload 处方
+        let prescriptionImageUpload = document.getElementById('prescriptionImageUpload');
+        //invoiceImageUpload 发票
+        let invoiceImageUpload = document.getElementById('invoiceImageUpload');
+        let prescriptionImageFile = prescriptionImageUpload.files[0];
+        let invoiceImageFile = invoiceImageUpload.files[0];
+        var fd = new FormData();
+        var fdi = new FormData();
+        var prescriptionImageUrl =$("#prescriptionImageUrl").val();
+        var invoiceImageUrl =$("#invoiceImageUrl").val();
+        formData.append('prescriptionImageUrl', '');
+        formData.append('invoiceImageUrl', '');
+        if (prescriptionImageUrl!=''&&prescriptionImageUrl!=null&&prescriptionImageUrl!=undefined){
+            formData.append('prescriptionImageUrl', prescriptionImageUrl);
+        }
+        if (invoiceImageUrl!=''&&invoiceImageUrl!=null&&invoiceImageUrl!=undefined){
+            formData.append('invoiceImageUrl', invoiceImageUrl);
+        }
+        if (prescriptionImageFile && prescriptionImageFile !== '') {
+            fd.append('file', prescriptionImageFile); // 'file' 是服务器端用来接收文件的字段名
+
+            $.ajax({
+                url: prefix_recipe + "/uploadImg",
+                data: fd,
+                type: "post",
+                processData: false,
+                contentType: false,
+                success: function(result) {
+                    if (result.msg) {
+                        formData.append('prescriptionImageUrl', result.msg);
+                    }
+
+                    // 上传发票图片
+                    if (invoiceImageFile && invoiceImageFile !== '') {
+                        fdi.append('file', invoiceImageFile); // 'file' 是服务器端用来接收文件的字段名
+
+                        $.ajax({
+                            url: prefix_recipe + "/uploadImg",
+                            data: fdi,
+                            type: "post",
+                            processData: false,
+                            contentType: false,
+                            success: function(result) {
+                                if (result.msg) {
+                                    formData.append('invoiceImageUrl', result.msg);
+                                }
+
+                                // 更新 CFDJ
+                                updateCFDJ(formData);
+                            },
+                            error: function(xhr, status, error) {
+                                $.modal.alertError("上传图片失败");
+                            }
+                        });
+                    } else {
+                        // 如果没有发票图片，则直接更新 CFDJ
+                        updateCFDJ(formData);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    $.modal.alertError("上传图片失败");
+                }
+            });
+        } else if (invoiceImageFile && invoiceImageFile !== '') {
+            // 如果只有发票图片需要上传
+            fdi.append('file', invoiceImageFile); // 'file' 是服务器端用来接收文件的字段名
+
+            $.ajax({
+                url: prefix_recipe + "/uploadImg",
+                data: fdi,
+                type: "post",
+                processData: false,
+                contentType: false,
+                success: function(result) {
+                    if (result.msg) {
+                        formData.append('invoiceImageUrl', result.msg);
+                    }
+                    // 更新 CFDJ
+                    updateCFDJ(formData);
+                },
+                error: function(xhr, status, error) {
+                    $.modal.alertError("上传图片失败");
+                }
+            });
+        } else {
+            // 如果没有图片需要上传，则直接更新 CFDJ
+            updateCFDJ(formData);
+        }
+    }
+    function updateCFDJ(formData) {
         $.ajax({
             cache: false, // 设置为 false 防止缓存
             type: "POST",
@@ -915,15 +1389,14 @@
             data: formData,
             processData: false, // 告诉 jQuery 不要处理数据（非常重要）
             contentType: false, // 告诉 jQuery 不要设置 contentType（非常重要）
-            async: true, // 异步请求更为推荐，除非有特殊原因需要同步
-            error: function (request) {
+            async: false, // 异步请求更为推荐，除非有特殊原因需要同步
+            error: function(request) {
                 $.modal.alertError("操作失败");
             },
-            success: function (data) {
-                $.modal.alertSuccess("操作成功" + ts_msg);
+            success: function(data) {
+                $.modal.alertSuccess(data.msg);
                 $.modal.closeTab();
                 $.operator.saveReload();
-
             }
         });
     }
@@ -983,7 +1456,6 @@
 
         var pharmacistId = $('#pharmacistNameSelect').val();
         var password = $('#password').val();
-        console.log(pharmacistId);
         formData.append('id', pharmacistId);
         formData.append('reviewPassword', password);
         $.ajax({
@@ -1301,13 +1773,12 @@
                     }
                     // // 如果找到匹配的数据，更新输入框
                     // $('#patientId').val(data.data.id);
-                    // console.log("data111===="+data);
                     // $('#patientName').val(data.data.name);
                     // var gender = data.data.gender;
                     // $('#gender').val(gender === 1 ? '男' : gender === 0 ? '女' : '');
                     // $('#age').val(data.data.age);
                     // var patientId =  data.data.id;
-                    // debugger
+                    //
                     // if(patientId !='' && patientId != null){
                     //     //查询出对应患者的上一次处方登记信息
                     //     getLastRecipe(patientId);
@@ -1617,7 +2088,7 @@
                 options6.trigger('change');
             },
             error: function(xhr, status, error) {
-                console.error("Failed to load disease categories:", error);
+                $.modal.alertError("解析疾病失败");
             }
         });
     }
@@ -1625,7 +2096,6 @@
 
     // 示例使用
     function submitArchives() {
-        debugger
         var documentType= $("#documentType").val();
         if(documentType=="居民身份证") {
             var IDCard= $("#documentNumber").val();
@@ -1685,7 +2155,6 @@
         data.push({name: "dl", value: DL});
         data.push({name: "age", value: $("#age").val()});
         data.push({name: "dateBirth", value: $("#dateBirth").val()});
-        console.log("data2"+data);
         $.ajax({
             cache : true,
             type : "POST",
@@ -1725,7 +2194,6 @@
             contentType: false,
             success: function(result) {
                 $("#idCardImg").val(result.msg)
-                console.log($("#idCardImg").val())
             },
             error: function(xhr, status, error) {
                 console.error("Error uploading image:", error);
@@ -1734,7 +2202,6 @@
     }
 
     function recognizeIdCard(file) {
-        console.log("file="+file)
         const formData = new FormData();
         formData.append('image', file);
         $.ajax({
@@ -1744,7 +2211,6 @@
             processData: false,
             contentType: false,
             success: function(result) {
-                console.log("result="+result)
                 if (result.data.words_result) {
                     const name =result.data.words_result.姓名.words;
                     const idNumber = result.data.words_result.公民身份号码.words;
@@ -1967,6 +2433,48 @@
         outline: 0 none;
     }
 
+
+    .fileinput-preview.thumbnail {
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+        text-align: center; /* 确保文本内部也居中 */
+        position: relative;
+        background-color: #f5f5f5; /* 设置背景颜色以更好地区分 */
+        border: 2px dashed #ccc; /* 添加虚线边框 */
+        color: #999; /* 文字颜色 */
+        font-size: 14px; /* 文字大小 */
+    }
+
+    .centered-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .plus-sign {
+        margin-top: 5px;
+        font-size: 24px;
+        font-weight: bold;
+    }
+    /* 隐藏初始的大图 */
+    .preview-large {
+        display: none;
+        position: absolute;
+        border: 1px solid #ccc;
+        background-color: #fff;
+        z-index: 1000;
+    }
+
+    /* 确保预览框在特定容器内 */
+    .customize-form-group-container {
+        position: relative;
+    }
+    .fileinput .fileinput-preview {
+        background-image: none !important;
+        background-color: transparent !important;
+    }
+
 </style>
 </body>
 </html>

health-admin/src/main/resources/templates/dtp/recipe/newRecipe.html

@@ -3,6 +3,7 @@
 <head>
     <th:block th:include="include :: header('处方登记信息')" />
     <th:block th:include="include :: select2-css" />
+    <th:block th:include="include :: jasny-bootstrap-css" />
     <th:block th:include="include :: bootstrap-fileinput-css" />
     <th:block th:include="include :: layout-latest-css" />
 </head>
@@ -79,10 +80,10 @@
 <!--                            <label class="is-required">临床诊断:</label>-->
 <!--                            <input name="clinicalDiagnosis" id="clinicalDiagnosis" placeholder="临床诊断"   class="styled-input" type="text">-->
 <!--                        </div>-->
-                        <div class="customize-form-group">
+                        <!--<div class="customize-form-group">
                             <label>处方图片:</label>
                             <input name="prescriptionImageUrl" id="prescriptionImageUrl" placeholder="处方图片"  class="styled-input" type="text">
-                        </div>
+                        </div>-->
                         <div class="customize-form-group  select-time">
                             <label class="is-required">处方开具日期:</label>
                             <input name="prescriptionIssueDate" id="prescriptionIssueDate" placeholder="处方开具日期"   class="time-input time-input2" type="text">
@@ -91,10 +92,10 @@
                             <label>发票编码:</label>
                             <input name="invoiceCode" id="invoiceCode" placeholder="发票编码"  class="styled-input" type="text">
                         </div>
-                        <div class="customize-form-group">
+                        <!--<div class="customize-form-group">
                             <label>发票图片:</label>
                             <input name="invoiceImageUrl" id="invoiceImageUrl" placeholder="发票图片"  class="styled-input" type="text">
-                        </div>
+                        </div>-->
 
 
 <!--                        <div class="customize-form-group">-->
@@ -125,6 +126,44 @@
                         </div>
 
                     </div>
+        <div class="customize-form-group-container">
+            <div class="customize-form-group">
+                <label>处方图片:</label>
+                <div class="form-group">
+                    <div class="fileinput fileinput-new" data-provides="fileinput">
+                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
+                            <img id="prescriptionImageUrl" th:if="${prescriptionImageUrl}" th:src="@{${prescriptionImageUrl}}" class="preview-image" />
+
+                            <div th:unless="${prescriptionImageUrl}" class="centered-content">
+                                <span class="plus-sign">+</span>
+                            </div>
+                        </div>
+                        <div>
+                            <input id="prescriptionImageUpload" name="prescriptionImageUpload" type="file">
+                            <a href="javascript:;" class="btn btn-white" data-dismiss="fileinput">清除图片</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="customize-form-group">
+                <label>发票图片:</label>
+                <div class="form-group">
+                    <div class="fileinput fileinput-new" data-provides="fileinput">
+                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
+                            <img id="invoiceImageUrl" th:if="${invoiceImageUrl}" th:src="@{${invoiceImageUrl}}" class="preview-image" />
+
+                            <div th:unless="${invoiceImageUrl}" class="centered-content">
+                                <span class="plus-sign">+</span>
+                            </div>
+                        </div>
+                        <div>
+                            <input id="invoiceImageUpload" name="invoiceImageUpload" type="file">
+                            <a href="javascript:;" class="btn btn-white" data-dismiss="fileinput">清除图片</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
      </form>
         <!-- 假设这是你的 HTML 结构class="table table-bordered" -->
         <div class="ibox" id="data-ibox" style="overflow: auto;">
@@ -226,6 +265,7 @@
 </div>
 <th:block th:include="include :: footer" />
 <th:block th:include="include :: select2-js" />
+    <th:block th:include="include :: jasny-bootstrap-js" />
 <!--<th:block th:include="include :: bootstrap-fileinput-js" />-->
 <th:block th:include="include :: bootstrap-table-fixed-columns-js" />
 <th:block th:include="include :: layout-latest-js" />
@@ -253,10 +293,355 @@
     var  drugsLinkId;
     var reviewFlag=true;
     var reviewFormData = new FormData();
-     $(document).ready(function() {
 
+    document.addEventListener('DOMContentLoaded', function () {
+        // 初始化所有 .fileinput 区域
+        document.querySelectorAll('.fileinput').forEach(function (fileInputWrapper) {
+            initializeImagePreview2(fileInputWrapper);
+        });
+    });
+
+    function initializeImagePreview2(fileInputWrapper) {
+        var fileInput = fileInputWrapper.querySelector('input[type="file"]');
+        var previewThumbnail = fileInputWrapper.querySelector('.fileinput-preview.thumbnail');
+        var largePreview;
+        var clearButton = fileInputWrapper.querySelector('.btn-white[data-dismiss="fileinput"]');
+
+        // 创建大图预览
+        function createLargePreview(imageSrc) {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove();
+            }
+            largePreview = document.createElement('div');
+            largePreview.className = 'preview-large';
+            largePreview.style.backgroundImage = 'url(' + imageSrc + ')';
+            largePreview.style.width = '1000px'; // 根据需要调整宽度
+            largePreview.style.height = '900px'; // 根据需要调整高度
+            largePreview.style.backgroundSize = 'contain';
+            largePreview.style.backgroundRepeat = 'no-repeat';
+            largePreview.style.backgroundPosition = 'center';
+            largePreview.style.position = 'absolute';
+            largePreview.style.zIndex = '1000';
+            largePreview.style.display = 'none'; // 初始状态下不显示
+
+            // 添加到DOM
+            fileInputWrapper.appendChild(largePreview);
+
+            // 为大图预览添加事件监听器
+            largePreview.onmouseover = function () {
+                this.style.display = 'block';
+            };
+
+            largePreview.onmousemove = function (e) {
+                updateLargePreviewPosition(e, previewThumbnail);
+            };
+
+            largePreview.onmouseout = function (e) {
+                if (!previewThumbnail.contains(e.relatedTarget)) {
+                    hideLargePreview();
+                }
+            };
+        }
+
+        // 悬停时显示大图
+        function handleMouseOver(e) {
+            /*if (previewThumbnail.style.backgroundImage && !largePreview) {
+                createLargePreview(previewThumbnail.style.backgroundImage.replace(/^url$["']?/, '').replace(/["']?$$/, ''));
+            }*/
+            if (largePreview) {
+                showLargePreview(e);
+            }
+        }
+
+        // 鼠标移动时更新大图位置
+        function handleMouseMove(e) {
+            if (largePreview) {
+                updateLargePreviewPosition(e, previewThumbnail);
+            }
+        }
+
+        // 缩略图移出事件处理
+        function handleMouseOut(e) {
+            if (!largePreview || !largePreview.contains(e.relatedTarget)) {
+                hideLargePreview();
+            }
+        }
+
+        // 显示大图预览
+        function showLargePreview(e) {
+            largePreview.style.display = 'block';
+            updateLargePreviewPosition(e, previewThumbnail);
+        }
+
+        // 更新大图预览位置
+        function updateLargePreviewPosition(e, referenceElement) {
+            const rect = referenceElement.getBoundingClientRect();
+            const winWidth = window.innerWidth;
+            const winHeight = window.innerHeight;
+            const largePreviewWidth = largePreview.offsetWidth;
+            const largePreviewHeight = largePreview.offsetHeight;
+
+            let left = e.pageX ; // 尝试放置在鼠标右侧
+            let top = e.pageY + 150; // 尝试放置在鼠标下方
+
+            // 确保大图预览不超出浏览器窗口边界
+            //if (left + largePreviewWidth > winWidth) left = e.pageX - largePreviewWidth - 150; // 如果右侧空间不足，则放在左侧
+            if (top + largePreviewHeight > winHeight) top = e.pageY - largePreviewHeight; // 如果底部空间不足，则放在上方
+
+            largePreview.style.left = left+100 + 'px';
+            largePreview.style.top = top+300 + 'px';;
+        }
+
+        // 隐藏大图预览
+        function hideLargePreview() {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+            }
+        }
+
+        // 移除图片和大图预览
+        function removeImageAndPreview() {
+            previewThumbnail.style.backgroundImage = ''; // 清空缩略图背景图片
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove(); // 从 DOM 中移除 largePreview
+                largePreview = null;
+            }
+            updateClearButtonVisibility(); // 更新清除按钮的可见性
+        }
+
+        // 更新清除按钮的可见性
+        function updateClearButtonVisibility() {
+            /*if (clearButton) {
+                clearButton.style.display = previewThumbnail.style.backgroundImage ? 'inline-block' : 'none';
+            }*/
+        }
+
+        // 监听文件上传变化事件
+        fileInput.addEventListener('change', function (e) {
+            // 清除现有的大图预览
+            removeImageAndPreview();
+
+            // 读取新文件并更新缩略图背景图片
+            if (this.files && this.files[0]) {
+                var reader = new FileReader();
+                reader.onload = function (event) {
+                    previewThumbnail.style.backgroundImage = 'url(' + event.target.result + ')';
+                    // 立即创建大图预览以反映新图片
+                    createLargePreview(event.target.result);
+                    setupEventListeners(); // 重新设置事件监听器
+                    updateClearButtonVisibility(); // 更新清除按钮的可见性
+                };
+                reader.readAsDataURL(this.files[0]);
+            } else {
+                updateClearButtonVisibility(); // 更新清除按钮的可见性
+            }
+        });
+
+        // 初始化事件监听器
+        function setupEventListeners() {
+            previewThumbnail.onmouseover = handleMouseOver;
+            previewThumbnail.onmousemove = handleMouseMove;
+            previewThumbnail.onmouseout = handleMouseOut;
+
+            // 监听清除按钮点击事件
+            if (clearButton) {
+                clearButton.addEventListener('click', function () {
+                    removeImageAndPreview(); // 清除图片及大图预览
+                });
+            }
+        }
+
+        // 对于回显的图片，确保初始化时创建大图预览并更新清除按钮的可见性
+        if (previewThumbnail.style.backgroundImage) {
+            createLargePreview(previewThumbnail.style.backgroundImage.replace(/^url$["']?/, '').replace(/["']?$$/, ''));
+            updateClearButtonVisibility();
+        } else {
+            updateClearButtonVisibility();
+        }
+
+        // 初始化事件监听器
+        setupEventListeners();
+    }
+    document.addEventListener('DOMContentLoaded', function () {
+        // 初始化所有 .fileinput 区域
+        document.querySelectorAll('.fileinput').forEach(function (fileInputWrapper) {
+            initializeImagePreview(fileInputWrapper);
+        });
+    });
+
+    function initializeImagePreview(fileInputWrapper) {
+        var previewThumbnail = fileInputWrapper.querySelector('.fileinput-preview.thumbnail');
+        var imgElement = previewThumbnail.querySelector('.preview-image');
+        var largePreview;
+        var clearButton = fileInputWrapper.querySelector('.btn-white[data-dismiss="fileinput"]');
+
+        if (!imgElement || !clearButton) return; // 如果没有img元素或清除按钮，则不执行后续操作
+
+        // 创建大图预览
+        function createLargePreview(img) {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove();
+            }
+            largePreview = document.createElement('div');
+            largePreview.className = 'preview-large';
+            largePreview.style.backgroundImage = 'url(' + img.src + ')';
+            largePreview.style.width = '1000px'; // 根据需要调整宽度
+            largePreview.style.height = '900px'; // 根据需要调整高度
+            largePreview.style.backgroundSize = 'contain';
+            largePreview.style.backgroundRepeat = 'no-repeat';
+            largePreview.style.backgroundPosition = 'center';
+            largePreview.style.position = 'absolute';
+            largePreview.style.zIndex = '1000';
+            largePreview.style.display = 'none'; // 初始状态下不显示
+
+            // 添加到DOM
+            fileInputWrapper.appendChild(largePreview);
+        }
+
+        // 悬停时显示大图
+        function handleMouseOver(e) {
+            if (imgElement.src && !largePreview) {
+                createLargePreview(imgElement);
+            }
+            if (largePreview) {
+                showLargePreview(e);
+            }
+        }
+
+        // 鼠标移动时更新大图位置
+        function handleMouseMove(e) {
+            if (largePreview) {
+                updateLargePreviewPosition(e, previewThumbnail);
+            }
+        }
+
+        // 缩略图移出事件处理
+        function handleMouseOut(e) {
+            if (!largePreview || !largePreview.contains(e.relatedTarget)) {
+                hideLargePreview();
+            }
+        }
+
+        // 显示大图预览
+        function showLargePreview(e) {
+            largePreview.style.display = 'block';
+            updateLargePreviewPosition(e, previewThumbnail);
+        }
+
+        // 更新大图预览位置
+        function updateLargePreviewPosition(e, referenceElement) {
+            const rect = referenceElement.getBoundingClientRect();
+            const winWidth = window.innerWidth;
+            const winHeight = window.innerHeight;
+            const largePreviewWidth = largePreview.offsetWidth;
+            const largePreviewHeight = largePreview.offsetHeight;
+
+            let left = e.pageX + 150; // 尝试放置在鼠标右侧
+            let top = e.pageY + 150; // 尝试放置在鼠标下方
 
+            // 确保大图预览不超出浏览器窗口边界
+            //if (left + largePreviewWidth > winWidth) left = e.pageX - largePreviewWidth - 150; // 如果右侧空间不足，则放在左侧
+            if (top + largePreviewHeight > winHeight) top = e.pageY - largePreviewHeight; // 如果底部空间不足，则放在上方
 
+            largePreview.style.left = left+100 + 'px';
+            largePreview.style.top = top+400 + 'px'; // 保持原有的偏移量
+        }
+
+        // 隐藏大图预览
+        function hideLargePreview() {
+            if (largePreview) {
+                largePreview.style.display = 'none';
+            }
+        }
+
+        // 初始化事件监听器
+        function setupEventListeners() {
+            previewThumbnail.onmouseover = handleMouseOver;
+            previewThumbnail.onmousemove = handleMouseMove;
+            previewThumbnail.onmouseout = handleMouseOut;
+
+            // 监听清除按钮点击事件
+            clearButton.addEventListener('click', function () {
+                removeImageAndPreview(); // 清除图片及大图预览
+            });
+        }
+
+        // 移除事件监听器
+        function removeEventListeners() {
+            previewThumbnail.onmouseover = null;
+            previewThumbnail.onmousemove = null;
+            previewThumbnail.onmouseout = null;
+        }
+
+        // 监听文件上传变化事件
+        function setupFileInputChange(uploadId) {
+            let upload = fileInputWrapper.querySelector(`#${uploadId}`);
+            if (upload) {
+                upload.addEventListener('change', function (e) {
+                    // 清除现有的大图预览
+                    removeImageAndPreview();
+
+                    // 读取新文件并更新 <img> 元素的 src 属性
+                    if (this.files && this.files[0]) {
+                        var reader = new FileReader();
+                        reader.onload = function (event) {
+                            imgElement.src = event.target.result;
+                            // 立即创建大图预览以反映新图片
+                            createLargePreview(imgElement);
+                            setupEventListeners(); // 重新设置事件监听器
+                            updateClearButtonVisibility(); // 更新清除按钮的可见性
+                        };
+                        reader.readAsDataURL(this.files[0]);
+                    } else {
+                        imgElement.src = ''; // 清空图片源
+                        removeEventListeners(); // 移除事件监听器
+                        updateClearButtonVisibility(); // 更新清除按钮的可见性
+                    }
+                });
+            }
+        }
+
+        // 移除图片和大图预览并更新清除按钮的可见性
+        function removeImageAndPreview() {
+            imgElement.src = ''; // 清空图片源
+            if (largePreview) {
+                largePreview.style.display = 'none';
+                largePreview.remove(); // 从 DOM 中移除 largePreview
+                largePreview = null;
+            }
+            removeEventListeners(); // 移除事件监听器
+            updateClearButtonVisibility(); // 更新清除按钮的可见性
+        }
+
+        // 更新清除按钮的可见性
+        function updateClearButtonVisibility() {
+            if (clearButton && imgElement) {
+                clearButton.style.display = imgElement.src !== '' ? 'inline-block' : 'none';
+            }
+        }
+
+        // 初始化
+        setupEventListeners();
+
+        // 对应的文件上传控件ID
+        let fileId = fileInputWrapper.querySelector('input[type="file"]')?.id;
+        if (fileId) {
+            setupFileInputChange(fileId);
+        }
+
+        // 对于回显的图片，确保初始化时创建大图预览并更新清除按钮的可见性
+        if (imgElement.src) {
+            createLargePreview(imgElement);
+            updateClearButtonVisibility();
+        } else {
+            updateClearButtonVisibility();
+        }
+    }
+
+     $(document).ready(function() {
         // 获取所有的输入元素（input, textarea, select）
         var $inputs = $('form').find('input, textarea, select').filter(':visible');
 
@@ -333,7 +718,7 @@
                  options.trigger('change');
              },
              error: function(xhr, status, error) {
-                 console.error("Failed to load disease categories:", error);
+                 $.modal.alertError("解析疾病失败");
              }
          });
 
@@ -592,8 +977,6 @@ function initTab(datas){
         // 收集患者信息
         var patientObj = getSelectedPatient();
         if (patientObj) {
-
-            console.log("Selected Patient:", patientObj);
             // 添加患者信息到 FormData
             formData.append('patientId', patientObj.id);
             formData.append('patientName', patientObj.name || '');
@@ -606,7 +989,6 @@ function initTab(datas){
             }
             formData.append('gender', gender);
             formData.append('age', patientObj.age);
-            console.log("PatientObj=" + patientObj);
         }else{
             $.modal.alertError("请先选择患者");
             return;
@@ -632,14 +1014,8 @@ function initTab(datas){
             };
         }).get();
         const DL = JSON.stringify(selectedDataDL);
-       // const XL = JSON.stringify(selectedDataXL);
         formData.append('dl', DL);
-        //formData.append('xl', XL);
         formData.append('dlanme', DL);
-        //formData.append('xlname', XL);
-        console.log("DL=" + DL);
-        //console.log("XL=" + XL);
-        debugger
         var reviewingNameInput = $('#pharmacistNameSelect option:selected');
         if($.common.isEmpty(reviewingName) && reviewFlag){
             reviewFlag=false;
@@ -744,7 +1120,96 @@ function initTab(datas){
             $.modal.alertError("请添加药品");
             return;
         }
+        // prescriptionImageUpload 处方
+        let prescriptionImageUpload = document.getElementById('prescriptionImageUpload');
+        //invoiceImageUpload 发票
+        let invoiceImageUpload = document.getElementById('invoiceImageUpload');
+        let prescriptionImageFile = prescriptionImageUpload.files[0];
+        let invoiceImageFile = invoiceImageUpload.files[0];
+        var fd = new FormData();
+        var fdi = new FormData();
+        var prescriptionImageUrl =$("#prescriptionImageUrl").val();
+        var invoiceImageUrl =$("#invoiceImageUrl").val();
+        formData.append('prescriptionImageUrl', '');
+        formData.append('invoiceImageUrl', '');
+        if (prescriptionImageUrl!=''&&prescriptionImageUrl!=null&&prescriptionImageUrl!=undefined){
+            formData.append('prescriptionImageUrl', prescriptionImageUrl);
+        }
+        if (invoiceImageUrl!=''&&invoiceImageUrl!=null&&invoiceImageUrl!=undefined){
+            formData.append('invoiceImageUrl', invoiceImageUrl);
+        }
+        if (prescriptionImageFile && prescriptionImageFile !== '') {
+            fd.append('file', prescriptionImageFile); // 'file' 是服务器端用来接收文件的字段名
+
+            $.ajax({
+                url: prefix_recipe + "/uploadImg",
+                data: fd,
+                type: "post",
+                processData: false,
+                contentType: false,
+                success: function(result) {
+                    if (result.msg) {
+                        formData.append('prescriptionImageUrl', result.msg);
+                    }
 
+                    // 上传发票图片
+                    if (invoiceImageFile && invoiceImageFile !== '') {
+                        fdi.append('file', invoiceImageFile); // 'file' 是服务器端用来接收文件的字段名
+
+                        $.ajax({
+                            url: prefix_recipe + "/uploadImg",
+                            data: fdi,
+                            type: "post",
+                            processData: false,
+                            contentType: false,
+                            success: function(result) {
+                                if (result.msg) {
+                                    formData.append('invoiceImageUrl', result.msg);
+                                }
+
+                                // 更新 CFDJ
+                                updateCFDJ(formData);
+                            },
+                            error: function(xhr, status, error) {
+                                $.modal.alertError("上传图片失败");
+                            }
+                        });
+                    } else {
+                        // 如果没有发票图片，则直接更新 CFDJ
+                        updateCFDJ(formData);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    $.modal.alertError("上传图片失败");
+                }
+            });
+        } else if (invoiceImageFile && invoiceImageFile !== '') {
+            // 如果只有发票图片需要上传
+            fdi.append('file', invoiceImageFile); // 'file' 是服务器端用来接收文件的字段名
+
+            $.ajax({
+                url: prefix_recipe + "/uploadImg",
+                data: fdi,
+                type: "post",
+                processData: false,
+                contentType: false,
+                success: function(result) {
+                    if (result.msg) {
+                        formData.append('invoiceImageUrl', result.msg);
+                    }
+                    // 更新 CFDJ
+                    updateCFDJ(formData);
+                },
+                error: function(xhr, status, error) {
+                    $.modal.alertError("上传图片失败");
+                }
+            });
+        } else {
+            // 如果没有图片需要上传，则直接更新 CFDJ
+            updateCFDJ(formData);
+        }
+    }
+    function updateCFDJ(formData) {
         $.ajax({
             cache: false, // 设置为 false 防止缓存
             type: "POST",
@@ -826,7 +1291,6 @@ function initTab(datas){
 
         var pharmacistId = $('#pharmacistNameSelect').val();
         var password = $('#password').val();
-        console.log(pharmacistId);
         formData.append('id', pharmacistId);
         formData.append('reviewPassword', password);
         $.ajax({
@@ -1023,16 +1487,12 @@ function initTab(datas){
         var selectElement = document.getElementById('singleDoseUnit' + productId);
         var pcselectElement = document.getElementById('dosageFrequency' + productId);
         storeTypes.forEach(function(item, index){
-            console.log("item"+item.dictLabel);
-            console.log("dictValue"+item.dictValue);
             var option = document.createElement("option");
             option.value = item.dictValue;
             option.text = item.dictLabel;
             selectElement.add(option);
         })
         pcTypes.forEach(function(item, index){
-            console.log("item"+item.dictLabel);
-            console.log("dictValue"+item.dictValue);
             var option = document.createElement("option");
             option.value = item.dictValue;
             option.text = item.dictLabel;
@@ -1042,7 +1502,6 @@ function initTab(datas){
     // 动态绑定用药频次选择事件
     function bindDosageFrequencyChangeListener(productId) {
         $(`#dosageFrequency${productId}`).on('change', function () {
-            debugger
             var selectedValue = $(this).val();
             if (selectedValue) {
                 $(`#dosageFrequencyDays${productId}`).val(selectedValue);
@@ -1139,7 +1598,6 @@ function initTab(datas){
                     }
                         // // 如果找到匹配的数据，更新输入框
                         // $('#patientId').val(data.data.id);
-                        // console.log("data111===="+data);
                         // $('#patientName').val(data.data.name);
                         // var gender = data.data.gender;
                         // $('#gender').val(gender === 1 ? '男' : gender === 0 ? '女' : '');
@@ -1298,6 +1756,46 @@ function initTab(datas){
         font-size: 16px;
         margin-left: 5px;
     }
+    .fileinput-preview.thumbnail {
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+        text-align: center; /* 确保文本内部也居中 */
+        position: relative;
+        background-color: #f5f5f5; /* 设置背景颜色以更好地区分 */
+        border: 2px dashed #ccc; /* 添加虚线边框 */
+        color: #999; /* 文字颜色 */
+        font-size: 14px; /* 文字大小 */
+    }
+
+    .centered-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .plus-sign {
+        margin-top: 5px;
+        font-size: 24px;
+        font-weight: bold;
+    }
+    /* 隐藏初始的大图 */
+    .preview-large {
+        display: none;
+        position: absolute;
+        border: 1px solid #ccc;
+        background-color: #fff;
+        z-index: 1000;
+    }
+
+    /* 确保预览框在特定容器内 */
+    .customize-form-group-container {
+        position: relative;
+    }
+    .fileinput .fileinput-preview {
+        background-image: none !important;
+        background-color: transparent !important;
+    }
 </style>
 </body>
 </html>

health-system/src/main/resources/mapper/mdyy/DTPCFDJMapper.xml

@@ -499,8 +499,15 @@
             </if>
             <if test="dl != null and dl != ''">dl=#{dl},</if>
             <if test="xl != null and xl != ''">xl=#{xl},</if>
-            <if test="prescriptionImageUrl != null and prescriptionImageUrl != ''">
-                prescriptionImageUrl = #{prescriptionImageUrl},
+            <if test="prescriptionImageUrl != null">
+                <choose>
+                    <when test="prescriptionImageUrl == ''">
+                        prescriptionImageUrl = null,
+                    </when>
+                    <otherwise>
+                        prescriptionImageUrl = #{prescriptionImageUrl},
+                    </otherwise>
+                </choose>
             </if>
             <if test="prescriptionIssueDate != null">
                 prescriptionIssueDate = #{prescriptionIssueDate},
@@ -520,8 +527,15 @@
             <if test="invoiceCode != null and invoiceCode != ''">
                 invoiceCode = #{invoiceCode},
             </if>
-            <if test="invoiceImageUrl != null and invoiceImageUrl != ''">
-                invoiceImageUrl = #{invoiceImageUrl},
+            <if test="invoiceImageUrl != null">
+                <choose>
+                    <when test="invoiceImageUrl == ''">
+                        invoiceImageUrl = null,
+                    </when>
+                    <otherwise>
+                        invoiceImageUrl = #{invoiceImageUrl},
+                    </otherwise>
+                </choose>
             </if>
             <if test="registerPharmacistName != null and registerPharmacistName != ''">
                 registerPharmacistName = #{registerPharmacistName},