diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/apply/TrainInfoListController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/apply/TrainInfoListController.java
index 2d720276..b38c095c 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/apply/TrainInfoListController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/apply/TrainInfoListController.java
@@ -81,7 +81,7 @@ public class TrainInfoListController extends BaseController {
     public String edit(@PathVariable("applyId") String applyId, ModelMap mmap) {
         TdApplyInfoListDTO applyInfoList = applyInfoListManager.getTdApplyInfoList(applyId);
         mmap.put("applyInfoList", applyInfoList);
-        return prefix + "/add";
+        return prefix + "/training";
     }
 
 }
diff --git a/ruoyi-admin/src/main/resources/static/file/保密教育培训登记表.pdf b/ruoyi-admin/src/main/resources/static/file/保密教育培训登记表.pdf
new file mode 100644
index 00000000..b4b1144c
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/file/保密教育培训登记表.pdf differ
diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/train/add.html b/ruoyi-admin/src/main/resources/templates/system/newdev/train/add.html
deleted file mode 100644
index 69115364..00000000
--- a/ruoyi-admin/src/main/resources/templates/system/newdev/train/add.html
+++ /dev/null
@@ -1,197 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
-<head>
-    <th:block th:include="include :: header('新增人员')" />
-    <th:block th:include="include :: select2-css" />
-    <th:block th:include="include :: datetimepicker-css" />
-    <th:block th:include="include :: jasny-bootstrap-css" />
-</head>
-<body>
-<div class="main-content">
-    <form id="form-train-add" class="form-horizontal" th:object="${applyInfoList}">
-        <input name="applyId"  type="hidden"  th:field="*{applyId}" />
-        <h4 class="form-header h4">基本信息</h4>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">姓名：</label>
-                    <div class="col-sm-8">
-                        <input name="name" id="name" placeholder="请输入姓名" th:field="*{name}" readonly="readonly" class="form-control" type="text" maxlength="30" required>
-                    </div>
-                </div>
-            </div>
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">所在部门：</label>
-                    <div class="col-sm-8">
-                        <input name="deptName" id="deptName" placeholder="请输入所在部门"  class="form-control" type="text" maxlength="30" required>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">所在岗位：</label>
-                    <div class="col-sm-8">
-                        <input id="trainPost" name="trainPost" placeholder="请输入所在岗位"  class="form-control" type="text" maxlength="30" required>
-                    </div>
-                </div>
-            </div>
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">培训时间：</label>
-                    <div class="col-sm-8">
-                        <div class="input-group date">
-                            <input name="trainTime"   class="form-control" placeholder="yyyy-MM-dd" type="text" required>
-                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">培训地点：</label>
-                    <div class="col-sm-8">
-                        <input id="trainAddress" name="trainAddress" placeholder="请输入培训地点" class="form-control"  type="text" maxlength="30" required>
-                    </div>
-                </div>
-            </div>
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">承办部门：</label>
-                    <div class="col-sm-8">
-                        <input id="organizeDept" name="organizeDept" placeholder="请输入承办部门"  class="form-control" type="text" maxlength="30" required>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">教育时长：</label>
-                    <div class="col-sm-8">
-                        <input id="eductTime" name="eductTime" required class="form-control" placeholder="请输入教育时长" type="text">
-                    </div>
-                </div>
-            </div>
-
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">承办部门意见：</label>
-                    <div class="col-sm-8">
-                        <textarea id="organizeMsg" name="organizeMsg" required class="form-control"
-                                  placeholder="请输入承办部门意见"
-                                  rows="5"></textarea>
-                    </div>
-                </div>
-            </div>
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label is-required">保密教育主要内容：</label>
-                    <div class="col-sm-8">
-                        <!-- 改为 textarea 标签，增加 rows 属性控制行数 -->
-                        <textarea id="eductContent" name="eductContent" required class="form-control"
-                                  placeholder="请输入保密教育主要内容"
-                                  rows="5"></textarea>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group">
-                    <label class="col-sm-4 control-label ">备注：</label>
-                    <div class="col-sm-8">
-                        <textarea id="remark" name="remark"  class="form-control"
-                                  placeholder="请输入备注"
-                                  rows="5" style="width: 100%"></textarea>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="form-group">
-                    <label class="col-sm-2 control-label ">照片上传：</label>
-                    <br/>
-                    <div class="fileinput fileinput-new" data-provides="fileinput">
-                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
-                        <div>
-                            <span class="btn btn-white btn-file">
-                                <span class="fileinput-new">选择图片</span>
-                                <span class="fileinput-exists">更改</span>
-                                <input type="file" id="applyUrlId"  >
-                                <input type="hidden" id="photoUrl"  name="photoUrl">
-                            </span>
-                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
-                        </div>
-                    </div>
-                </div>
-        </div>
-
-    </form>
-</div>
-
-<div class="row">
-    <div class="col-sm-offset-5 col-sm-10">
-        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>提 交</button>&nbsp;
-        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
-    </div>
-</div>
-<th:block th:include="include :: footer" />
-<th:block th:include="include :: select2-js" />
-<th:block th:include="include :: datetimepicker-js" />
-<th:block th:include="include :: jasny-bootstrap-js" />
-<script>
-    var prefix = ctx + "system/train";
-
-    function submitHandler() {
-        if ($.validate.form()) {
-            $.modal.confirm("请认真核对填写信息,提交后不允许修改！", function () {
-                var data = $("#form-train-add").serializeArray();
-                $.operate.saveTab(prefix + "/add", data);
-            });
-        }
-    }
-
-    //图片上传
-    $('#applyUrlId').on('change.bs.fileinput ', function (e) {
-        // 处理自己的业务
-        var file = e.target.files[0];
-        var data = new FormData();
-        data.append("file", file);
-        $.ajax({
-            type: "POST",
-            url: ctx + "common/upload",
-            data: data,
-            cache: false,
-            contentType: false,
-            processData: false,
-            dataType: 'json',
-            success: function(result) {
-                if (result.code == web_status.SUCCESS) {
-                    $("#photoUrl").val(result.url);
-                } else {
-                    $.modal.alertError(result.msg);
-                }
-            },
-            error: function(error) {
-                $.modal.alertWarning("图片上传失败。");
-            }
-        });
-
-    });
-    $("input[name='trainTime']").datetimepicker({
-        format: "yyyy-mm-dd",
-        minView: "month",
-        autoclose: true
-    });
-</script>
-
-</body>
-</html>
diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/train/training.html b/ruoyi-admin/src/main/resources/templates/system/newdev/train/training.html
new file mode 100644
index 00000000..b1f42108
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/templates/system/newdev/train/training.html
@@ -0,0 +1,569 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <th:block th:include="include :: header('教育培训')"/>
+    <th:block th:include="include :: select2-css"/>
+    <th:block th:include="include :: datetimepicker-css"/>
+    <th:block th:include="include :: jasny-bootstrap-css"/>
+    <th:block th:include="include :: element-css"/>
+    <link href="/file/pdf/test.css" rel="stylesheet">
+    <script src="/file/pdf/tailwindcss.js"></script>
+    <!-- Tailwind配置 -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#64748b',
+                        accent: '#0ea5e9',
+                        neutral: '#f1f5f9',
+                        'neutral-dark': '#334155',
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'system-ui', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .content-auto {
+                content-visibility: auto;
+            }
+            .shadow-soft {
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            }
+            .transition-custom {
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+        }
+        .text-sm {
+            font-size: 1.4rem;
+        }
+        .text-base {
+            font-size: 1.4rem;
+        }
+        .text-xs {
+            font-size: 0.85rem;
+        }
+        .py-2 {
+            padding-top: 0.8rem;
+            padding-bottom: 0.8rem;
+        }
+        .space-y-3{
+            margin-bottom: 1.5rem;
+        }
+        .form-horizontal .control-label {
+            text-align: left;
+        }
+        .el-date-editor{
+            width: 100% !important;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+<div class="main-content min-h-screen flex flex-col" id="app">
+    <main class="flex-grow container mx-auto px-4 py-8" style="max-width: 100%;">
+        <div class="max-w-10xl mx-auto" style="width: 100%;">
+            <div class="bg-white rounded-xl shadow-soft p-6 mb-8 scale-hover">
+                <form class="form-horizontal space-y-6">
+                    <h4 class="form-header h4">基本信息</h4>
+                    <!-- 文本字段 -->
+                    <div class="grid md:grid-cols-4 gap-6">
+                        <!-- 第一行前两列：姓名、所在部门 -->
+                        <div class="md:col-span-1 space-y-3">
+                            <!-- 姓名 -->
+                            <div class="space-y-3">
+                                <label for="name" class="block text-sm font-medium text-gray-700 is-required control-label">姓名</label>
+                                <div class="relative">
+                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                        <i class="fa-solid fa-user"></i>
+                                    </span>
+                                    <input v-model="formData.name" id="name" placeholder="请输入姓名" disabled class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" type="text" maxlength="30" required>
+                                </div>
+                            </div>
+
+                            <!-- 所在部门 -->
+                            <div class="space-y-3">
+                                <label for="deptName" class="block text-sm font-medium text-gray-700 is-required control-label">所在部门</label>
+                                <div class="relative">
+                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                        <i class="fa-solid fa-building"></i>
+                                    </span>
+                                    <input v-model="formData.deptName" id="deptName" placeholder="请输入所在部门"  class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" type="text" maxlength="30" required>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 第二行前两列：所在岗位、培训时间 -->
+                        <div class="md:col-span-1 space-y-3">
+                            <!-- 所在岗位 -->
+                            <div class="space-y-3">
+                                <label for="trainPost" class="block text-sm font-medium text-gray-700 is-required control-label">所在岗位</label>
+                                <div class="relative">
+                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                        <i class="fa-solid fa-briefcase"></i>
+                                    </span>
+                                    <input v-model="formData.trainPost" id="trainPost" placeholder="请输入所在岗位"  class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" type="text" maxlength="30" required>
+                                </div>
+                            </div>
+
+                            <!-- 培训时间 -->
+                            <div class="space-y-3">
+                                <label for="trainTime" class="block text-sm font-medium text-gray-700 is-required control-label">培训时间</label>
+                                <div class="relative">
+                                    <div class="input-group date" style="width: 100%;">
+<!--                                        <input v-model="formData.trainTime" id="trainTime" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="yyyy-MM-dd" type="date" required>-->
+<!--                                        <span class="input-group-addon absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 cursor-pointer" id="datePickerIcon">-->
+<!--                                            <i class="fa fa-calendar"></i>-->
+<!--                                        </span>-->
+                                        <el-date-picker
+                                                v-model="formData.trainTime"
+                                                id="trainTime"
+                                                type="date"
+                                                placeholder="选择日期">
+                                        </el-date-picker>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 第一行第三列：培训地点、承办部门 -->
+                        <div class="md:col-span-1 space-y-3">
+                            <!-- 培训地点 -->
+                            <div class="space-y-3">
+                                <label for="trainAddress" class="block text-sm font-medium text-gray-700 is-required control-label">培训地点</label>
+                                <div class="relative">
+                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                        <i class="fa-solid fa-map-marker-alt"></i>
+                                    </span>
+                                    <input v-model="formData.trainAddress" id="trainAddress" placeholder="请输入培训地点" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg"  type="text" maxlength="30" required>
+                                </div>
+                            </div>
+
+                            <!-- 承办部门 -->
+                            <div class="space-y-3">
+                                <label for="organizeDept" class="block text-sm font-medium text-gray-700 is-required control-label">承办部门</label>
+                                <div class="relative">
+                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                        <i class="fa-solid fa-building-user"></i>
+                                    </span>
+                                    <input v-model="formData.organizeDept" id="organizeDept" placeholder="请输入承办部门"  class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" type="text" maxlength="30" required>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 教育时长 -->
+                        <div class="space-y-3">
+                            <label for="eductTime" class="block text-sm font-medium text-gray-700 is-required control-label">教育时长</label>
+                            <div class="relative">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                    <i class="fa-solid fa-clock"></i>
+                                </span>
+                                <input v-model="formData.eductTime" id="eductTime" required class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入教育时长" type="text">
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 承办部门意见、保密教育主要内容 -->
+                    <div class="grid md:grid-cols-2 gap-6 mt-6">
+                        <div class="space-y-3">
+                            <label for="organizeMsg" class="block text-sm font-medium text-gray-700 is-required control-label">承办部门意见</label>
+                            <div class="relative">
+                                <textarea v-model="formData.organizeMsg" id="organizeMsg" required class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg pt-3"
+                                          placeholder="请输入承办部门意见"
+                                          rows="5"></textarea>
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="eductContent" class="block text-sm font-medium text-gray-700 is-required control-label">保密教育主要内容</label>
+                            <div class="relative">
+                                <textarea v-model="formData.eductContent" id="eductContent" required class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg pt-3"
+                                          placeholder="请输入保密教育主要内容"
+                                          rows="5"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 备注 -->
+                    <div class="grid md:grid-cols-2 gap-6 mt-6">
+                        <div class="space-y-3">
+                            <label for="remark" class="block text-sm font-medium text-gray-700">备注</label>
+                            <div class="relative">
+                                <textarea v-model="formData.remark" id="remark"  class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg pt-3"
+                                          placeholder="请输入备注"
+                                          rows="5"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 模版下载按钮 -->
+                    <div class="row mt-6">
+                        <a :href="pdfUrl" download="保密教育培训登记表.pdf" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-200">
+                            <i class="fa-solid fa-download mr-2"></i> 下载培训登记表模板
+                        </a>
+<!--                        <button type="button" class="group relative w-full max-w-xs flex justify-center py-3 px-6 border border-transparent text-base font-medium rounded-lg text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300" @click="downloadTemplate">-->
+<!--                            <span class="absolute left-0 inset-y-0 flex items-center pl-3" style="margin-right: 5px;">-->
+<!--                                <i class="fa-solid fa-file-pdf text-white transform group-hover:translate-x-0.5 transition-transform duration-200"></i>-->
+<!--                            </span>-->
+<!--                            下载培训登记表模板-->
+<!--                        </button>-->
+                    </div>
+                </form>
+
+                <!-- 材料上传区域 -->
+                <h4 class="form-header h4 mt-8">材料上传</h4>
+                <div class="mt-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="relative">
+                            <label for="fileUpload" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary cursor-pointer transition-colors duration-200">
+                                <i class="fa-solid fa-upload mr-2"></i> 选择文件
+                                <input id="fileUpload" type="file" class="sr-only" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif,.bmp" @change="handleFileSelection">
+                            </label>
+                        </div>
+                    </div>
+
+                    <!-- 上传进度条 -->
+                    <div v-if="uploadProgress > 0 && uploadProgress < 100" class="mb-4">
+                        <div class="flex justify-between text-sm mb-1">
+                            <span class="text-gray-700">上传中: {{ currentFileName }}</span>
+                            <span class="text-gray-500">{{ uploadProgress }}%</span>
+                        </div>
+                        <div class="w-full bg-gray-200 rounded-full h-2">
+                            <div class="bg-primary h-2 rounded-full" :style="{ width: uploadProgress + '%' }"></div>
+                        </div>
+                    </div>
+
+                    <!-- 文件列表 -->
+                    <div class="mt-4">
+                        <div v-if="uploadedFiles.length === 0" class="py-10 text-center border-2 border-dashed border-gray-300 rounded-lg">
+                            <i class="fa-solid fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
+                            <p class="text-gray-500">暂无上传文件</p>
+                        </div>
+                        <div v-else class="space-y-3">
+                            <div v-for="(file, index) in uploadedFiles" :key="index" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
+                                <div class="flex-shrink-0 mr-4">
+                                    <i :class="getFileIcon(file.fileName)" class="text-2xl"></i>
+                                </div>
+                                <div class="flex-grow min-w-0" style="height: 20px">
+                                    <p style="height: 100%;line-height: 20px" class="text-sm font-medium text-gray-900 truncate">{{ file.fileName }}</p>
+                                </div>
+                                <div class="flex-shrink-0 ml-4">
+                                    <button v-if="isImageFile(file.fileName)" @click="previewFile(file)" class="text-primary hover:text-primary/80 mr-3">
+                                        <i class="fa-solid fa-eye"></i>
+                                    </button>
+                                    <button @click="downloadFile(file)" class="text-primary hover:text-primary/80 mr-3">
+                                        <i class="fa-solid fa-download"></i>
+                                    </button>
+                                    <button @click="deleteFile(file, index)" class="text-red-500 hover:text-red-700">
+                                        <i class="fa-solid fa-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row mt-6">
+                    <div class="col-sm-offset-5 col-sm-10" style="display: flex;">
+                        <button type="button" class="btn btn-sm btn-primary" @click="submitHandler"><i class="fa fa-check"></i>提 交</button>&nbsp;
+                        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭</button>
+                    </div>
+                </div>
+            </div>
+            <!-- 上传成功提示 -->
+            <div v-if="uploadSuccess" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-500 translate-y-0 opacity-100">
+                <div class="flex items-center">
+                    <i class="fa-solid fa-check-circle mr-2"></i>
+                    <span>{{ uploadSuccessMessage }}</span>
+                </div>
+            </div>
+            <!-- 图片预览模态框 -->
+            <div v-if="previewModalVisible" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50">
+                <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-auto">
+                    <div class="p-4 flex justify-between items-center border-b">
+                        <h3 class="text-lg font-medium text-gray-900">{{ previewingFile.fileName }}</h3>
+                        <button @click="closePreviewModal" class="text-gray-500 hover:text-gray-700">
+                            <i class="fa-solid fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="p-4 flex justify-center">
+                        <img :src="getPreviewUrl(previewingFile)" alt="预览图" class="max-w-full max-h-[70vh] object-contain">
+                    </div>
+                    <div class="p-4 border-t flex justify-end">
+                        <button @click="closePreviewModal" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-200">
+                            <i class="fa-solid fa-times mr-2"></i> 关闭
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+<th:block th:include="include :: footer"/>
+<th:block th:include="include :: select2-js"/>
+<th:block th:include="include :: datetimepicker-js"/>
+<th:block th:include="include :: jasny-bootstrap-js"/>
+<th:block th:include="include :: element-js"/>
+<script type="text/javascript" th:inline="javascript">
+    var prefix = ctx + "system/train";
+    new Vue({
+        el: '#app',
+        data: {
+            formData: {
+                name: '',
+                deptName: '',
+                trainPost: '',
+                trainTime: '',
+                trainAddress: '',
+                organizeDept: '',
+                eductTime: '',
+                organizeMsg: '',
+                eductContent: '',
+                remark: '',
+                applyId: '',
+            },
+            // 新增文件上传相关数据
+            selectedFiles: null,
+            currentFileName: '',
+            uploadProgress: 0,
+            uploadedFiles: [],
+            previewModalVisible: false,
+            previewingFile: {},
+            uploadSuccess: false,
+            uploadSuccessMessage: '',
+            prefix: ctx + "system/train",
+            pdfUrl:'/file/保密教育培训登记表.pdf',
+        },
+        methods: {
+            // 新增文件上传相关方法
+            handleFileSelection(event) {
+                this.selectedFiles = event.target.files;
+                if (this.selectedFiles && this.selectedFiles.length > 0) {
+                    // 只处理第一个文件
+                    let file = this.selectedFiles[0];
+                    // 检查文件类型
+                    let fileExtension = file.name.split('.').pop().toLowerCase();
+                    let validExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'gif', 'bmp'];
+                    if (!validExtensions.includes(fileExtension)) {
+                        this.$message.error('请上传PDF、Word文档或图片文件');
+                        return;
+                    }
+                    this.uploadFile(file);
+                }
+            },
+            uploadFile(file) {
+                this.currentFileName = file.name;
+                this.uploadProgress = 0;
+
+                let formData = new FormData();
+                formData.append('applyId', this.formData.applyId || '');
+                formData.append('filename', file.name);
+                formData.append('fileCode', 'bm_jy_train_002');
+                formData.append('file', file);
+
+                axios.post(ctx + 'system/file/upload', formData, {
+                    onUploadProgress: (progressEvent) => {
+                        this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                    }
+                })
+                    .then(response => {
+                        if (response.data.code === web_status.SUCCESS) {
+                            // 显示上传成功提示
+                            this.uploadSuccess = true;
+                            this.uploadSuccessMessage = `文件 "${file.name}" 上传成功`;
+
+                            // 3秒后隐藏提示
+                            setTimeout(() => {
+                                this.uploadSuccess = false;
+                            }, 3000);
+
+                            // 更新文件列表
+                            let fileInfo = {
+                                id: response.data.data.fileId,
+                                fileName: file.name,
+                                fileSize: file.size,
+                                fileType: file.type,
+                                fileUrl: file.filePath,
+                                uploadTime: new Date().toISOString()
+                            };
+                            this.uploadedFiles.push(fileInfo);
+
+                            // 重置选择框
+                            document.getElementById('fileUpload').value = '';
+                        } else {
+                            this.$message.error(`上传失败: ${response.data.msg}`);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('上传错误:', error);
+                        this.$message.error('上传过程中发生错误');
+                    });
+            },
+            downloadFile(file) {
+                // 直接通过接口下载
+                axios.get(ctx + 'system/file/download',{
+                    params: { fileId: file.id },
+                    responseType: 'blob', // 重要：指定响应类型为blob
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                })
+                    .then(response => {
+                        let url = window.URL.createObjectURL(new Blob([response.data]));
+                        let link = document.createElement('a');
+                        link.href = url;
+                        link.setAttribute('download', file.fileName);
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                    })
+                    .catch(error => {
+                        console.error('下载错误:', error);
+                        this.$message.error('下载文件时出错');
+                    });
+            },
+            submitHandler() {
+                // 表单验证
+                if (!this.formData.name || !this.formData.deptName || !this.formData.trainPost ||
+                    !this.formData.trainTime || !this.formData.trainAddress || !this.formData.organizeDept ||
+                    !this.formData.eductTime || !this.formData.organizeMsg || !this.formData.eductContent) {
+                    this.$message({
+                        message: '请填写所有必填字段',
+                        type: 'warning'
+                    });
+                    return;
+                }
+
+                if (this.uploadedFiles.length == 0) {
+                    this.$message.warning('请上传相关培训材料');
+                    return;
+                }
+
+                this.$confirm('确认提交吗？', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    $.operate.saveTab(`${this.prefix}/add`,this.formData);
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消'
+                    });
+                });
+            },
+            deleteFile(file, index) {
+                this.$confirm(`确定要删除文件 "${file.fileName}" 吗？`, '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    axios.get(ctx + 'system/file/delFile/' + file.id)
+                        .then(response => {
+                            if (response.data.code === web_status.SUCCESS) {
+                                this.uploadedFiles.splice(index, 1);
+                                this.$message.success('文件已成功删除');
+                            } else {
+                                this.$message.error(`删除失败: ${response.data.msg}`);
+                            }
+                        })
+                        .catch(error => {
+                            console.error('删除错误:', error);
+                            this.$message.error('删除文件时出错');
+                        });
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除'
+                    });
+                });
+            },
+            // 获取已上传文件
+            getUploadedFiles() {
+                if (!this.formData.applyId) return;
+                axios.get(ctx + 'system/file/getFileInfo', {
+                    params: {
+                        applyId: this.formData.applyId,
+                        fileCode: 'bm_jy_train_002',
+                    }
+                })
+                    .then(response => {
+                        if (response.data.code === web_status.SUCCESS) {
+                            this.uploadedFiles = response.data.data.map((file)=>{
+                                return {
+                                    id: file.fileId,
+                                    fileName: file.fileName,
+                                    fileSize: file.fileSize,
+                                    fileType: file.fileType,
+                                    fileUrl: file.filePath,
+                                    uploadTime: file.createTime
+                                }
+                            })
+                        }
+                    })
+                    .catch(error => {
+                        console.error('获取文件列表错误:', error);
+                        this.$message.error('获取已上传文件时出错');
+                    });
+            },
+            // 新增图片预览相关方法
+            isImageFile(fileName) {
+                const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp','pdf'];
+                const extension = fileName.split('.').pop().toLowerCase();
+                return imageExtensions.includes(extension);
+            },
+            getFileIcon(fileName) {
+                const extension = fileName.split('.').pop().toLowerCase();
+                if (extension === 'pdf') return 'fa-solid fa-file-pdf text-red-500';
+                if (['doc', 'docx'].includes(extension)) return 'fa-solid fa-file-word text-blue-500';
+                if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) return 'fa-solid fa-file-image text-green-500';
+                return 'fa-solid fa-file text-gray-500';
+            },
+            previewFile(file) {
+                let extension = file.fileName.split('.').pop().toLowerCase();
+                if (extension === 'pdf') {
+                    window.open(file.fileUrl);
+                    return
+                }
+                this.previewingFile = file;
+                this.previewModalVisible = true;
+            },
+            closePreviewModal() {
+                this.previewModalVisible = false;
+                this.previewingFile = {};
+            },
+            getPreviewUrl(file) {
+                // 如果是图片，直接返回URL
+                if (this.isImageFile(file.fileName)) {
+                    return ctx + 'system/file/download?fileId=' + file.id;
+                }
+                return '';
+            },
+            downloadTemplate() {
+                // 从本地下载PDF模板
+                window.open(ctx + 'system/file/downloadTemplate?templateCode=train_record', '_blank');
+            },
+        },
+        mounted() {
+            // 从后端获取数据
+            if ([[${applyInfoList}]]){
+                this.formData = {...[[${applyInfoList}]]}
+            }
+
+            // 获取已上传文件
+            this.getUploadedFiles();
+
+        }
+    });
+    // 初始化日期选择器
+    $("input[name='trainTime']").datetimepicker({
+        format: "yyyy-mm-dd",
+        minView: "month",
+        autoclose: true
+    });
+
+    // 为日期选择器图标添加点击事件
+    document.getElementById('datePickerIcon').addEventListener('click', function() {
+        $("input[name='trainTime']").datetimepicker('show');
+    });
+</script>
+</body>
+</html>
\ No newline at end of file
