diff --git a/ruoyi-admin/src/main/resources/templates/purchase/purchaseOrder/addPurchaseStorage.html b/ruoyi-admin/src/main/resources/templates/purchase/purchaseOrder/addPurchaseStorage.html
new file mode 100644
index 00000000..85306ef0
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/templates/purchase/purchaseOrder/addPurchaseStorage.html
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+    <th:block th:include="include :: header('采购入库单详情')" />
+    <th:block th:include="include :: datetimepicker-css" />
+    <style>
+
+        .supplier-value span {
+            margin-right: 10px;
+        }
+
+    </style>
+</head>
+<body class="white-bg">
+<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+    <form class="form-horizontal m" id="form-purchaseStorage-detail" th:object="${warehouseStorageOrder}">
+        <input name="warehouseStorageId" th:field="*{warehouseStorageId}" type="hidden">
+        <div class="form-group">
+            <label class="col-sm-4 control-label">采购单号：</label>
+            <div class="col-sm-8">
+                <input name="relatedOrderCode" th:field="*{relatedOrderCode}" class="form-control" type="text" readonly>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-sm-4 control-label">入库类型：</label>
+            <div class="col-sm-8">
+                <select name="warehouseStorageType" class="form-control m-b" th:with="type=${@dict.getType('warehouse_storage_type')}" disabled>
+                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{warehouseStorageType}"></option>
+                </select>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-sm-4 control-label">到货时间：</label>
+            <div class="col-sm-8">
+                <div class="input-group date">
+                    <input name="arrivedTime" th:value="${#dates.format(warehouseStorageOrder.arrivedTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly disabled>
+                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            <!--供应商物料相关-->
+            <div class="row">
+                <div class="col-sm-12" id="tablesContainer">
+                    <!-- 表格将在这里动态生成 -->
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<th:block th:include="include :: footer" />
+<th:block th:include="include :: datetimepicker-js" />
+<th:block th:include="include :: bootstrap-table-editable-js" />
+<script th:inline="javascript">
+
+    var warehouseStorageCode = [[${warehouseStorageOrder.warehouseStorageCode}]]
+    var warehouseCode = [[${warehouseStorageOrder.warehouseCode}]]
+    var prefix = ctx + "purchase/purchaseStorage";
+    $("#form-purchaseStorage-detail").validate({
+        focusCleanup: true
+    });
+
+    //生成的不同table的id集合
+    var tableDatas = [];
+
+    function submitHandler() {
+        const storageOrderData = $("#form-purchaseStorage-detail").serializeArray().reduce((obj, item) => {
+            obj[item.name] = item.value;
+            return obj;
+        }, {});
+        // 初始化一个数组用于存放所有表格的数据
+        let allMaterialDataList = [];
+        for(let i in tableDatas){
+            $('#' + tableDatas[i]).each(function() {
+                const tableData = $(this).bootstrapTable('getData');
+                console.log(JSON.stringify(tableData));
+                // 将表数据转换成与qualityReportData格式一致的数组
+                var materialDataList = tableData.map(function (item) {
+                    // 根据实际字段名调整
+                    return {
+                        "supplierCode": item.supplierCode,
+                        "materialNo": item.materialNo,
+                        "materialName": item.materialName,
+                        "materialType": item.materialType,
+                        "materialPhotourl": item.materialPhotourl,
+                        "materialDescribe": item.materialDescribe,
+                        "materialBrand": item.materialBrand,
+                        "materialUnit": item.materialUnit,
+                        "materialProcessMethod": item.materialProcessMethod,
+                        "notifyHasArrivedNum": item.notifyHasArrivedNum,
+                        "actualHasArrivedNum": item.actualHasArrivedNum,
+                        "temporaryHasQualifiedNum": item.temporaryHasQualifiedNum,
+                        "hasStorageNum": item.hasStorageNum,
+                        "notifyArriveNum": item.notifyArriveNum,
+                        "actualArriveNum": item.actualArriveNum,
+                        "temporaryQualifiedNum": item.temporaryQualifiedNum,
+                        "temporaryRemark": item.temporaryRemark,
+                        "temporaryReportUrl": item.temporaryReportUrl,
+                        "storageNum": item.storageNum,
+                        "storageLocation": item.storageLocation,
+
+                        // ...其他字段
+                    };
+                });
+                allMaterialDataList = allMaterialDataList.concat(materialDataList);
+            });
+        }
+
+        const combinedData = Object.assign({}, storageOrderData, {
+            warehouseStorageOrderDetailList: allMaterialDataList
+        });
+        // 合并表单数据和表格数据
+        // const combinedData = Object.assign({}, ...complaintNoticeData.array(item => ({ [item.name]: item.value })), ...materialData);
+        console.log(combinedData)
+        // 使用 JSON.stringify() 序列化数据
+        const jsonData = JSON.stringify(combinedData);
+        // 发送 AJAX 请求到后端接口
+        $.operate.saveJson(prefix + "/detail", jsonData);
+    }
+
+    $("input[name='arrivedTime']").datetimepicker({
+        format: "yyyy-mm-dd",
+        minView: "month",
+        autoclose: true
+    });
+
+    $("input[name='deliveryInspectionTime']").datetimepicker({
+        format: "yyyy-mm-dd",
+        minView: "month",
+        autoclose: true
+    });
+
+    $(function() {
+        // 假设qualityOrderCode已经定义或者可以通过某种方式获取到
+        var warehouseStorageCode = [[${warehouseStorageOrder.warehouseStorageCode}]]; // 这里需要实际赋值，比如从前端某个地方读取
+
+        $.getJSON(prefix + "/storagePurchaseDetailList?warehouseStorageCode=" + warehouseStorageCode, function(data) {
+            for (var supplierCode in data) {
+                if (data.hasOwnProperty(supplierCode)) {
+                    var supplierData = data[supplierCode];
+                    createTableForSupplier(supplierCode, supplierData);
+                }
+            }
+        });
+    });
+    function createTableForSupplier(supplierCode, supplierData) {
+        var tableId = 'bootstrap-table-' + supplierCode.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+        tableDatas.push(tableId);
+        var $tableWrapper = $('<div class="table-responsive mt-3"></div>');
+
+        // 确保supplierData至少有一条记录，并从中提取供应商详细信息
+        var supplierInfo = supplierData.length > 0 ? supplierData[0] : {}; // 默认为空对象，以防数据不存在
+
+        // 构建含有额外供应商信息的标题字符串
+        var headerTitle ='供应商'+'</br>'+supplierCode + ' -  ' + (supplierInfo.supplierName || 'N/A');
+
+        var $header = $('<h4>' + headerTitle + '</h4>');
+        var $table = $('<table id="' + tableId + '" class="table table-striped table-bordered"></table>');
+
+        $table.bootstrapTable({
+            data: supplierData,
+            columns: [{
+                checkbox: true
+            },
+                {
+                    title: '供应商ID',
+                    field: 'supplierCode',
+                    visible: false
+                },
+                {
+                    title: '料号',
+                    field: 'materialNo'
+                }, {
+                    title: '物料名称',
+                    field: 'materialName'
+                },
+                {
+                    title: '物料类型',
+                    field: 'materialType',
+                },
+                {
+                    title: '物料图片地址',
+                    field: 'materialPhotourl',
+                },
+                {
+                    title: '物料描述',
+                    field: 'materialDescribe',
+                },
+                {
+                    title: '物料品牌',
+                    field: 'materialBrand',
+                },
+                {
+                    title: '物料单位',
+                    field: 'materialUnit',
+                },
+                {
+                    title: '物料加工方式',
+                    field: 'materialProcessMethod',
+                },
+
+                {
+                    title: '通知已到货数',
+                    field: 'notifyHasArrivedNum',
+                },
+                {
+                    title: '已入库数',
+                    field: 'hasStorageNum',
+                },
+                {
+                    title: '通知到货数',
+                    field: 'notifyArriveNum',
+                },
+            ]
+        });
+
+        $tableWrapper.append($header).append($table);
+        $('#tablesContainer').append($tableWrapper);
+    }
+
+
+
+    //根据仓库ID查询仓库名称
+    $(document).ready(function() {
+        // 初始化时默认加载仓库ID列表
+        loadWarehouseCodes();
+
+        // 监听仓库ID下拉框的变化
+        $('#warehouseCode').on('change', function() {
+            var selectedWarehouseCode = $(this).val(); // 获取选中的仓库ID
+            if (selectedWarehouseCode) {
+                // 发起Ajax请求获取仓库名称
+                $.ajax({
+                    type: 'GET',
+                    url: ctx +'stock/stockInfo/getStockNameByWarehouseCode/' + selectedWarehouseCode,
+                    dataType: 'json', // 假设返回的数据格式是JSON
+                    success: function(data) {
+                        console.log(data);
+                        // 将获取到的仓库名称填充到输入框
+                        if(data.data == null){
+                            // 如果返回的数据有问题，可以给出提示或处理
+                            $.modal.alertWarning('未能获取到仓库名称！');
+                        }
+                        $('input[name="warehouseName"]').val(data.data.stockname);
+                    },
+                    error: function(jqXHR, textStatus, errorThrown) {
+                        console.error('Error:', textStatus, errorThrown);
+                        $.modal.alertWarning('查询仓库名称时发生错误！');
+                    }
+                });
+            } else {
+                // 如果没有选择仓库ID，清空仓库名称输入框
+                $('input[name="warehouseName"]').val('');
+            }
+        });
+    });
+
+
+    // 加载仓库Id列表函数
+    function loadWarehouseCodes() {
+        var url = ctx + 'stock/stockInfo/getAllWarehouseCode';
+        $.ajax({
+            type: 'GET', // 请求类型
+            url: url, // 后端接口URL
+            dataType: 'json', // 预期服务器返回的数据类型
+            success: function(data) {
+                if (data && Array.isArray(data)) {
+                    var selectElement = $('#warehouseCode'); // 获取仓库编号下拉框元素
+                    // 清空下拉框现有选项
+                    selectElement.empty();
+
+                    // 添加默认选项（如果需要）编辑时不需要添加默认选项
+                    // selectElement.append('<option value="">所有</option>');
+
+                    // 遍历返回的数据，添加为下拉框的选项
+                    $.each(data, function(index, item) {
+                        // 仓库ID
+                        selectElement.append('<option value="' + item.stockNO + '">' + item.stockNO + '</option>');
+                    });
+                    // $('#warehouseCode').val(stockNO);
+                } else {
+                    $.modal.errMsg("数据为空");
+                }
+            }
+        });
+    }
+
+</script>
+</body>
+</html>
\ No newline at end of file
