From 87acaa411b5c9ecaf69cd8e47036ae1cd5b6b2d4 Mon Sep 17 00:00:00 2001
From: dshclm <3321914460@qq.com>
Date: Fri, 16 May 2025 15:00:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E7=99=BB=E8=AE=B0--=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E3=80=81=E7=BC=96=E8=BE=91=E3=80=81=E6=9D=90=E6=96=99?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/system/newdev/apply/add.html    | 669 ++++++++++++-----
 .../templates/system/newdev/apply/edit.html   | 672 +++++++++++++-----
 .../system/newdev/apply/editFile.html         |  86 ++-
 3 files changed, 1034 insertions(+), 393 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html
index 883a0312..b341c290 100644
--- a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html
+++ b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html
@@ -1,199 +1,495 @@
+
 <!DOCTYPE html>
-<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<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 :: jasny-bootstrap-css" />
+    <th:block th:include="include :: header('新增人员')"/>
+    <th:block th:include="include :: select2-css"/>
+    <th:block th:include="include :: jasny-bootstrap-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);
+            }
+            /*.scale-hover {*/
+            /*    transition: transform 0.2s ease-in-out;*/
+            /*}*/
+            /*.scale-hover:hover {*/
+            /*    transform: scale(1.02);*/
+            /*}*/
+        }
+        .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;
+        }
+    </style>
 </head>
-<body>
-<div class="main-content">
-    <form id="form-apply-add" class="form-horizontal">
-        <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="请输入姓名" 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="sex" id="sex" 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="nationa" name="nationa" 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="formerName" name="formerName" 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 name="nationality" 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 name="maritalStatus" placeholder="请输入婚姻状况" class="form-control" type="text" maxlength="30" required>
-                    </div>
-                </div>
-            </div>
+<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" id="form-apply-edit" @submit.prevent="submitForm">
+                    <h4 class="form-header h4">基本信息</h4>
+                    <!-- 文本字段 -->
+                    <div class="grid md:grid-cols-3 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 required type="text" id="name" v-model="formData.name" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入姓名">
+                                </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 name="political" required class="form-control" placeholder="请输入政治面貌" type="text">
-                    </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="phone" 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">
-                        <input name="cerno" required class="form-control" placeholder="请输入身份证号" type="text">
-                    </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="address" 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">
-                        <input name="registeredAuthority" required class="form-control" placeholder="请输入户籍地公安机关" type="text">
-                    </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="permanentAddress" 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">
-                        <input name="residentBureau" required class="form-control" placeholder="请输入常住地公安机关" type="text">
-                    </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="positionCapacity" 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">
-                        <input name="smPost" required class="form-control" placeholder="请输入已（拟）任涉密岗位" type="text">
+                            <!-- 性别 -->
+                            <div class="space-y-3">
+                                <label for="sex" 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-venus-mars"></i>
+                                </span>
+                                    <input required type="text" id="sex" v-model="formData.sex" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入性别">
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 第二行前两列：国籍、曾用名 -->
+                        <div class="md:col-span-1 space-y-3">
+                            <!-- 国籍 -->
+                            <div class="space-y-3">
+                                <label for="nationa" 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-globe"></i>
+                                </span>
+                                    <input required type="text" id="nationa" v-model="formData.nationa" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入国籍">
+                                </div>
+                            </div>
+
+                            <!-- 曾用名 -->
+                            <div class="space-y-3">
+                                <label for="formerName" class="block text-sm font-medium text-gray-700">曾用名</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-tag"></i>
+                                </span>
+                                    <input type="text" id="formerName" v-model="formData.formerName" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入曾用名">
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 第一行第三列：图片上传区域（固定位置，跨两行） -->
+                        <div class="md:col-span-1 md:row-span-2 space-y-3 relative">
+                            <label class="block text-sm font-medium text-gray-700 is-required  control-label">一寸照片</label>
+                            <div class="mt-1 h-64 border-2 border-gray-300 rounded-lg shadow-soft transition-all duration-200" style="width: 141px;height: 195px">
+                                <!-- 上传区域（未选中时显示） -->
+                                <div v-if="!selectedFile" class="h-full flex justify-center items-center border-dashed cursor-pointer hover:border-primary">
+                                    <div class="text-center">
+                                        <i class="fa-solid fa-cloud-upload text-4xl text-gray-400 mb-2"></i>
+                                        <label for="photo" class="cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
+                                            <span>上传照片</span>
+                                            <input required id="photo" name="photo" type="file" accept="image/jpeg,image/png" class="sr-only" @change="handleFileUpload">
+                                        </label>
+                                        <p class="text-xs text-gray-500">
+                                            JPG, PNG (最大 2MB)
+                                        </p>
+                                    </div>
+                                </div>
+                                <!-- 预览区域（选中后显示） -->
+                                <div v-else class="h-full flex flex-col items-center justify-center p-3">
+                                    <img :src="previewUrl" alt="预览图" class="max-h-full max-w-full object-cover rounded-lg mb-2" style="max-height: 200px;">
+                                    <button type="button" @click="clearFile" class="text-xs text-red-500 hover:text-red-700">
+                                        <i class="fa-solid fa-times-circle mr-1"></i> 移除
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="nationality" 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-people-group"></i>
+                                    </span>
+                                <input required type="text" id="nationality" v-model="formData.nationality"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入民族">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="maritalStatus" 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-ring"></i>
+                                    </span>
+                                <input required type="text" id="maritalStatus" v-model="formData.maritalStatus"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入婚姻状况">
+
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="political" 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-tie"></i>
+                                    </span>
+                                <input required type="text" id="political" v-model="formData.political"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入政治面貌">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="phone" 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-phone"></i>
+                                    </span>
+                                <input required type="text" id="phone" v-model="formData.phone"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入联系方式">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="cerno" 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-id-card"></i>
+                                    </span>
+                                <input required type="text" id="cerno" v-model="formData.cerno"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入身份证号">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="address" 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-house-chimney"></i>
+                                    </span>
+                                <input required type="text" id="address" v-model="formData.address"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入户籍地址">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="registeredAuthority" 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-badge-shield"></i>
+                                    </span>
+                                <input required type="text" id="registeredAuthority" v-model="formData.registeredAuthority"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入户籍地公安机关">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="permanentAddress" 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-house"></i>
+                                    </span>
+                                <input required type="text" id="permanentAddress" v-model="formData.permanentAddress"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入常住地址">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="residentBureau" 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-badge-shield"></i>
+                                    </span>
+                                <input required type="text" id="residentBureau" v-model="formData.residentBureau"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入常住地公安机关">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="positionCapacity" 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 required type="text" id="positionCapacity" v-model="formData.positionCapacity"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入单位及职务职称">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="smPost" 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-shield-halved"></i>
+                                    </span>
+                                <input required type="text" id="smPost" v-model="formData.smPost"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入已（拟）任涉密岗位">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="smGrade" 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-lock"></i>
+                                    </span>
+                                <input required type="text" id="smGrade" v-model="formData.smGrade"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入涉密等级">
+                            </div>
+                        </div>
                     </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="smGrade" required class="form-control" placeholder="请输入涉密等级" type="text">
+                </form>
+                <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>
-        <div class="row">
-            <div class="form-group">
-                    <label class="col-sm-2 control-label is-required">照片上传：</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" required >
-                                <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>
+    </main>
 </div>
-<th:block th:include="include :: footer" />
-<th:block th:include="include :: select2-js" />
-<th:block th:include="include :: jasny-bootstrap-js" />
-<script>
+<th:block th:include="include :: footer"/>
+<th:block th:include="include :: select2-js"/>
+<th:block th:include="include :: jasny-bootstrap-js"/>
+<script type="text/javascript" th:inline="javascript">
     var prefix = ctx + "system/applyList";
-    function submitHandler() {
-        if ($.validate.form() ) {
-            var data = $("#form-apply-add").serializeArray();
-            $.operate.saveTab(prefix + "/add", data);
-        }
-    }
+    new Vue({
+        el: '#app',
+        data: {
+            formData: {
+                name: '',
+                sex: '',
+                nationa: '',
+                formerName: '',
+                nationality: '',
+                maritalStatus: '',
+                political: '',
+                phone: '',
+                cerno: '',
+                address: '',
+                registeredAuthority: '',
+                permanentAddress: '',
+                residentBureau: '',
+                positionCapacity: '',
+                smPost: '',
+                smGrade: '',
+                photoUrl: '',
+                applyId: '',
+            },
+            selectedFile: null,
+            isLoading: false,
+            showResult: false,
+            pdfUrl: '',
+            // 新增文件上传相关数据
+            selectedFiles: null,
+            currentFileName: '',
+            uploadProgress: 0,
+            previewModalVisible: false,
+            previewingFile: {},
+            uploadSuccess: false,
+            uploadSuccessMessage: '',
+            prefix: ctx + "system/applyList",
+        },
+        computed: {
+            previewUrl() {
+                return this.selectedFile ? window.URL.createObjectURL(this.selectedFile) : '';
+            }
+        },
+        methods: {
+            handleFileUpload(event) {
+                let file = event.target.files[0];
+                if (file) {
+                    // 检查文件类型和大小
+                    let fileSize = file.size / 1024 / 1024; // MB
+                    if (fileSize > 2) {
+                        alert('文件大小不能超过2MB');
+                        return;
+                    }
+                    let fileType = file.type;
+                    if (!fileType.startsWith('image/')) {
+                        alert('请上传图片文件');
+                        return;
+                    }
+                    // 验证图片格式
+                    let validFormats = ['image/jpeg', 'image/png'];
+                    if (!validFormats.includes(fileType)) {
+                        alert('请上传JPG或PNG格式的图片');
+                        return;
+                    }
+                    // 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素)
+                    let img = new Image();
+                    img.src = window.URL.createObjectURL(file);
+                    img.onload = () => {
+                        let width = img.naturalWidth;
+                        let height = img.naturalHeight;
+                        let ratio = width / height;
+                        // 检查宽高比是否接近一寸照片的比例 (约0.714)
+                        if (Math.abs(ratio - 0.714) > 0.1) {
+                            alert('建议上传一寸照片尺寸 (约295x413像素)');
+                        }
+                        this.selectedFile = file;
+                    };
+                    img.onerror = () => {
+                        alert('无法加载图片，请重新选择');
+                    };
+                    var data = new FormData();
+                    data.append("file", file);
+                    let _that = this
+                    $.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) {
+                                _that.formData.photoUrl = result.url
+                            } else {
+                                $.modal.alertError(result.msg);
+                            }
+                        },
+                        error: function (error) {
+                            $.modal.alertWarning("图片上传失败。");
+                        }
+                    });
+                }
+            },
+            clearFile() {
+                this.selectedFile = null;
+                document.getElementById('photo').value = '';
+            },
+            submitForm() {
+                // 简单验证
+                if (!this.formData.name || !this.formData.sex || !this.formData.nationa ||  !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) {
+                    alert('请填写所有必填字段');
+                    return;
+                }
+                // 检查是否上传了照片
+                if (!this.selectedFile) {
+                    alert('请上传一寸照片');
+                    return;
+                }
+                // 准备表单数据
+                let formData = new FormData();
+                if (this.formData.name) formData.append("name", this.formData.name);
+                if (this.formData.sex) formData.append("sex", this.formData.sex);
+                if (this.formData.nationa) formData.append("nationa", this.formData.nationa);
+                if (this.formData.formerName) formData.append("formerName", this.formData.formerName);
+                if (this.formData.nationality) formData.append("nationality", this.formData.nationality);
+                if (this.formData.maritalStatus) formData.append("maritalStatus", this.formData.maritalStatus);
+                if (this.formData.political) formData.append("political", this.formData.political);
+                if (this.formData.phone) formData.append("phone", this.formData.phone);
+                if (this.formData.cerno) formData.append("cerno", this.formData.cerno);
+                if (this.formData.address) formData.append("address", this.formData.address);
+                if (this.formData.registeredAuthority) formData.append("registeredAuthority", this.formData.registeredAuthority);
+                if (this.formData.permanentAddress) formData.append("permanentAddress", this.formData.permanentAddress);
+                if (this.formData.residentBureau) formData.append("residentBureau", this.formData.residentBureau);
+                if (this.formData.positionCapacity) formData.append("positionCapacity", this.formData.positionCapacity);
+                if (this.formData.smPost) formData.append("smPost", this.formData.smPost);
+                if (this.formData.smGrade) formData.append("smGrade", this.formData.smGrade);
+                formData.append('photo', this.selectedFile);
+                // 显示加载状态
+                this.isLoading = true;
+                // 发送请求
+                axios.post('/api/pdf/fill', formData, {
+                    responseType: 'blob'
+                })
+                    .then(response => {
+                        // 创建下载URL
+                        let blob = new Blob([response.data], { type: 'application/pdf' });
+                        this.pdfUrl = window.URL.createObjectURL(blob);
 
+                        // 隐藏加载状态，显示结果
+                        this.isLoading = false;
+                        this.showResult = true;
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        this.isLoading = false;
+                        alert('生成PDF时出错，请重试');
+                    });
+            },
+            submitHandler() {
+                // 简单验证
+                if (!this.formData.name || !this.formData.sex || !this.formData.nationa ||  !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) {
+                    alert('请填写所有必填字段');
+                    return;
+                }
+                // 检查是否上传了照片
+                if (!this.selectedFile) {
+                    alert('请上传一寸照片');
+                    return;
+                }
+                if(confirm('确认提交吗？')){
+                    $.operate.saveTab(`${this.prefix}/add`,this.formData);
+                }
+            },
+        },
+        mounted() {
+            // 从后端获取转义后的 JSON 字符串
+            // if ([[${applyInfoList}]]){
+            //     this.formData = {...[[${applyInfoList}]]}
+            //     // 获取图片并转换为 Blob
+            //     if (this.formData.photoUrl) {
+            //         fetch(this.formData.photoUrl)
+            //             .then(response => response.blob())
+            //             .then(blob => {
+            //                 this.selectedFile = blob;
+            //             })
+            //             .catch(error => console.error('处理图片时出错:', error));
+            //     }
+            // }
+        }
+    });
     //图片上传
     $('#applyUrlId').on('change.bs.fileinput ', function (e) {
         // 处理自己的业务
@@ -208,14 +504,14 @@
             contentType: false,
             processData: false,
             dataType: 'json',
-            success: function(result) {
+            success: function (result) {
                 if (result.code == web_status.SUCCESS) {
                     $("#photoUrl").val(result.url);
                 } else {
                     $.modal.alertError(result.msg);
                 }
             },
-            error: function(error) {
+            error: function (error) {
                 $.modal.alertWarning("图片上传失败。");
             }
         });
@@ -223,6 +519,5 @@
     });
 
 </script>
-
 </body>
 </html>
diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html
index ef88721b..77f839a3 100644
--- a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html
+++ b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html
@@ -1,202 +1,496 @@
+
 <!DOCTYPE html>
-<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<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 :: jasny-bootstrap-css" />
+    <th:block th:include="include :: header('新增人员')"/>
+    <th:block th:include="include :: select2-css"/>
+    <th:block th:include="include :: jasny-bootstrap-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);
+            }
+            /*.scale-hover {*/
+            /*    transition: transform 0.2s ease-in-out;*/
+            /*}*/
+            /*.scale-hover:hover {*/
+            /*    transform: scale(1.02);*/
+            /*}*/
+        }
+        .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;
+        }
+    </style>
 </head>
-<body>
-<div class="main-content">
-    <form class="form-horizontal" id="form-apply-edit" 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}" 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="sex" id="sex" placeholder="请输入性别" th:field="*{sex}" 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="nationa" name="nationa" placeholder="请输入国籍" th:field="*{nationa}" 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="formerName" name="formerName" placeholder="请输入曾用名" th:field="*{formerName}" 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 name="nationality" placeholder="请输入民族" class="form-control" th:field="*{nationality}" 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="maritalStatus" placeholder="请输入婚姻状况" th:field="*{maritalStatus}" class="form-control" type="text" maxlength="30" required>
-                    </div>
-                </div>
-            </div>
+<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" id="form-apply-edit" @submit.prevent="submitForm">
+                    <h4 class="form-header h4">基本信息</h4>
+                    <!-- 文本字段 -->
+                    <div class="grid md:grid-cols-3 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 required type="text" id="name" v-model="formData.name" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入姓名">
+                                </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 name="political" required class="form-control" th:field="*{political}" placeholder="请输入政治面貌" type="text">
-                    </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="phone" required class="form-control" th:field="*{phone}" 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">
-                        <input name="cerno" required class="form-control" th:field="*{cerno}" placeholder="请输入身份证号" type="text">
-                    </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="address" required class="form-control" th:field="*{address}" 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">
-                        <input name="registeredAuthority" required class="form-control" th:field="*{registeredAuthority}" placeholder="请输入户籍地公安机关" type="text">
-                    </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="permanentAddress" required class="form-control" th:field="*{permanentAddress}" 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">
-                        <input name="residentBureau" required class="form-control" th:field="*{residentBureau}" placeholder="请输入常住地公安机关" type="text">
-                    </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="positionCapacity" required class="form-control"  th:field="*{positionCapacity}" 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">
-                        <input name="smPost" required class="form-control" th:field="*{smPost}" placeholder="请输入已（拟）任涉密岗位" type="text">
+                            <!-- 性别 -->
+                            <div class="space-y-3">
+                                <label for="sex" 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-venus-mars"></i>
+                                </span>
+                                    <input required type="text" id="sex" v-model="formData.sex" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入性别">
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 第二行前两列：国籍、曾用名 -->
+                        <div class="md:col-span-1 space-y-3">
+                            <!-- 国籍 -->
+                            <div class="space-y-3">
+                                <label for="nationa" 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-globe"></i>
+                                </span>
+                                    <input required type="text" id="nationa" v-model="formData.nationa" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入国籍">
+                                </div>
+                            </div>
+
+                            <!-- 曾用名 -->
+                            <div class="space-y-3">
+                                <label for="formerName" class="block text-sm font-medium text-gray-700">曾用名</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-tag"></i>
+                                </span>
+                                    <input type="text" id="formerName" v-model="formData.formerName" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg" placeholder="请输入曾用名">
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 第一行第三列：图片上传区域（固定位置，跨两行） -->
+                        <div class="md:col-span-1 md:row-span-2 space-y-3 relative">
+                            <label class="block text-sm font-medium text-gray-700 is-required  control-label">一寸照片</label>
+                            <div class="mt-1 h-64 border-2 border-gray-300 rounded-lg shadow-soft transition-all duration-200" style="width: 141px;height: 195px">
+                                <!-- 上传区域（未选中时显示） -->
+                                <div v-if="!selectedFile" class="h-full flex justify-center items-center border-dashed cursor-pointer hover:border-primary">
+                                    <div class="text-center">
+                                        <i class="fa-solid fa-cloud-upload text-4xl text-gray-400 mb-2"></i>
+                                        <label for="photo" class="cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
+                                            <span>上传照片</span>
+                                            <input required id="photo" name="photo" type="file" accept="image/jpeg,image/png" class="sr-only" @change="handleFileUpload">
+                                        </label>
+                                        <p class="text-xs text-gray-500">
+                                            JPG, PNG (最大 2MB)
+                                        </p>
+                                    </div>
+                                </div>
+                                <!-- 预览区域（选中后显示） -->
+                                <div v-else class="h-full flex flex-col items-center justify-center p-3">
+                                    <img :src="previewUrl" alt="预览图" class="max-h-full max-w-full object-cover rounded-lg mb-2" style="max-height: 200px;">
+                                    <button type="button" @click="clearFile" class="text-xs text-red-500 hover:text-red-700">
+                                        <i class="fa-solid fa-times-circle mr-1"></i> 移除
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="nationality" 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-people-group"></i>
+                                    </span>
+                                <input required type="text" id="nationality" v-model="formData.nationality"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入民族">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="maritalStatus" 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-ring"></i>
+                                    </span>
+                                <input required type="text" id="maritalStatus" v-model="formData.maritalStatus"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入婚姻状况">
+
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="political" 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-tie"></i>
+                                    </span>
+                                <input required type="text" id="political" v-model="formData.political"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入政治面貌">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="phone" 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-phone"></i>
+                                    </span>
+                                <input required type="text" id="phone" v-model="formData.phone"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入联系方式">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="cerno" 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-id-card"></i>
+                                    </span>
+                                <input required type="text" id="cerno" v-model="formData.cerno"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入身份证号">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="address" 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-house-chimney"></i>
+                                    </span>
+                                <input required type="text" id="address" v-model="formData.address"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入户籍地址">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="registeredAuthority" 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-badge-shield"></i>
+                                    </span>
+                                <input required type="text" id="registeredAuthority" v-model="formData.registeredAuthority"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入户籍地公安机关">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="permanentAddress" 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-house"></i>
+                                    </span>
+                                <input required type="text" id="permanentAddress" v-model="formData.permanentAddress"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入常住地址">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="residentBureau" 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-badge-shield"></i>
+                                    </span>
+                                <input required type="text" id="residentBureau" v-model="formData.residentBureau"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入常住地公安机关">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="positionCapacity" 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 required type="text" id="positionCapacity" v-model="formData.positionCapacity"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入单位及职务职称">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="smPost" 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-shield-halved"></i>
+                                    </span>
+                                <input required type="text" id="smPost" v-model="formData.smPost"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入已（拟）任涉密岗位">
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label for="smGrade" 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-lock"></i>
+                                    </span>
+                                <input required type="text" id="smGrade" v-model="formData.smGrade"
+                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-200"
+                                       placeholder="请输入涉密等级">
+                            </div>
+                        </div>
                     </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="smGrade" required class="form-control" th:field="*{smGrade}" placeholder="请输入涉密等级" type="text">
+                </form>
+                <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>
-        <div class="row">
-         <div class="form-group">
-               <label class="col-sm-2 control-label is-required">照片上传：</label>
-               <br/>
-               <div class="fileinput fileinput-new" data-provides="fileinput">
-                   <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
-                       <img th:src="*{photoUrl}">
-                   </div>
-                   <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" required>
-                           <input id="photoUrl" name="photoUrl" th:field="*{photoUrl}" type="hidden">
-                       </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>
+    </main>
 </div>
-<th:block th:include="include :: footer" />
-<th:block th:include="include :: select2-js" />
-<th:block th:include="include :: jasny-bootstrap-js" />
-<script type="text/javascript">
+<th:block th:include="include :: footer"/>
+<th:block th:include="include :: select2-js"/>
+<th:block th:include="include :: jasny-bootstrap-js"/>
+<script type="text/javascript" th:inline="javascript">
     var prefix = ctx + "system/applyList";
-    function submitHandler() {
-        if ($.validate.form()) {
-            var data = $("#form-apply-edit").serializeArray();
-            $.operate.saveTab(prefix + "/edit", data);
-        }
-    }
+    new Vue({
+        el: '#app',
+        data: {
+            formData: {
+                name: '',
+                sex: '',
+                nationa: '',
+                formerName: '',
+                nationality: '',
+                maritalStatus: '',
+                political: '',
+                phone: '',
+                cerno: '',
+                address: '',
+                registeredAuthority: '',
+                permanentAddress: '',
+                residentBureau: '',
+                positionCapacity: '',
+                smPost: '',
+                smGrade: '',
+                photoUrl: '',
+                applyId: '',
+            },
+            selectedFile: null,
+            isLoading: false,
+            showResult: false,
+            pdfUrl: '',
+            // 新增文件上传相关数据
+            selectedFiles: null,
+            currentFileName: '',
+            uploadProgress: 0,
+            previewModalVisible: false,
+            previewingFile: {},
+            uploadSuccess: false,
+            uploadSuccessMessage: '',
+            prefix: ctx + "system/applyList",
+        },
+        computed: {
+            previewUrl() {
+                return this.selectedFile ? window.URL.createObjectURL(this.selectedFile) : '';
+            }
+        },
+        methods: {
+            handleFileUpload(event) {
+                let file = event.target.files[0];
+                if (file) {
+                    // 检查文件类型和大小
+                    let fileSize = file.size / 1024 / 1024; // MB
+                    if (fileSize > 2) {
+                        alert('文件大小不能超过2MB');
+                        return;
+                    }
+                    let fileType = file.type;
+                    if (!fileType.startsWith('image/')) {
+                        alert('请上传图片文件');
+                        return;
+                    }
+                    // 验证图片格式
+                    let validFormats = ['image/jpeg', 'image/png'];
+                    if (!validFormats.includes(fileType)) {
+                        alert('请上传JPG或PNG格式的图片');
+                        return;
+                    }
+                    // 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素)
+                    let img = new Image();
+                    img.src = window.URL.createObjectURL(file);
+                    img.onload = () => {
+                        let width = img.naturalWidth;
+                        let height = img.naturalHeight;
+                        let ratio = width / height;
+                        // 检查宽高比是否接近一寸照片的比例 (约0.714)
+                        if (Math.abs(ratio - 0.714) > 0.1) {
+                            alert('建议上传一寸照片尺寸 (约295x413像素)');
+                        }
+                        this.selectedFile = file;
+                    };
+                    img.onerror = () => {
+                        alert('无法加载图片，请重新选择');
+                    };
+                    var data = new FormData();
+                    data.append("file", file);
+                    let _that = this
+                    $.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) {
+                                _that.formData.photoUrl = result.url
+                            } else {
+                                $.modal.alertError(result.msg);
+                            }
+                        },
+                        error: function (error) {
+                            $.modal.alertWarning("图片上传失败。");
+                        }
+                    });
+                }
+            },
+            clearFile() {
+                this.selectedFile = null;
+                document.getElementById('photo').value = '';
+            },
+            submitForm() {
+                // 简单验证
+                if (!this.formData.name || !this.formData.sex || !this.formData.nationa ||  !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) {
+                    alert('请填写所有必填字段');
+                    return;
+                }
+                // 检查是否上传了照片
+                if (!this.selectedFile) {
+                    alert('请上传一寸照片');
+                    return;
+                }
+                // 准备表单数据
+                let formData = new FormData();
+                if (this.formData.name) formData.append("name", this.formData.name);
+                if (this.formData.sex) formData.append("sex", this.formData.sex);
+                if (this.formData.nationa) formData.append("nationa", this.formData.nationa);
+                if (this.formData.formerName) formData.append("formerName", this.formData.formerName);
+                if (this.formData.nationality) formData.append("nationality", this.formData.nationality);
+                if (this.formData.maritalStatus) formData.append("maritalStatus", this.formData.maritalStatus);
+                if (this.formData.political) formData.append("political", this.formData.political);
+                if (this.formData.phone) formData.append("phone", this.formData.phone);
+                if (this.formData.cerno) formData.append("cerno", this.formData.cerno);
+                if (this.formData.address) formData.append("address", this.formData.address);
+                if (this.formData.registeredAuthority) formData.append("registeredAuthority", this.formData.registeredAuthority);
+                if (this.formData.permanentAddress) formData.append("permanentAddress", this.formData.permanentAddress);
+                if (this.formData.residentBureau) formData.append("residentBureau", this.formData.residentBureau);
+                if (this.formData.positionCapacity) formData.append("positionCapacity", this.formData.positionCapacity);
+                if (this.formData.smPost) formData.append("smPost", this.formData.smPost);
+                if (this.formData.smGrade) formData.append("smGrade", this.formData.smGrade);
+                formData.append('photo', this.selectedFile);
+                // 显示加载状态
+                this.isLoading = true;
+                // 发送请求
+                axios.post('/api/pdf/fill', formData, {
+                    responseType: 'blob'
+                })
+                    .then(response => {
+                        // 创建下载URL
+                        let blob = new Blob([response.data], { type: 'application/pdf' });
+                        this.pdfUrl = window.URL.createObjectURL(blob);
 
+                        // 隐藏加载状态，显示结果
+                        this.isLoading = false;
+                        this.showResult = true;
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        this.isLoading = false;
+                        alert('生成PDF时出错，请重试');
+                    });
+            },
+            submitHandler() {
+                // 简单验证
+                if (!this.formData.name || !this.formData.sex || !this.formData.nationa ||  !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) {
+                    alert('请填写所有必填字段');
+                    return;
+                }
+                // 检查是否上传了照片
+                if (!this.selectedFile) {
+                    alert('请上传一寸照片');
+                    return;
+                }
+                console.log(this.formData)
+                if(confirm('确认提交吗？')){
+                    $.operate.saveTab(`${this.prefix}/edit`,this.formData);
+                }
+            },
+        },
+        mounted() {
+            // 从后端获取转义后的 JSON 字符串
+            if ([[${applyInfoList}]]){
+                this.formData = {...[[${applyInfoList}]]}
+                // 获取图片并转换为 Blob
+                if (this.formData.photoUrl) {
+                    fetch(this.formData.photoUrl)
+                        .then(response => response.blob())
+                        .then(blob => {
+                            this.selectedFile = blob;
+                        })
+                        .catch(error => console.error('处理图片时出错:', error));
+                }
+            }
+        }
+    });
     //图片上传
     $('#applyUrlId').on('change.bs.fileinput ', function (e) {
         // 处理自己的业务
@@ -211,14 +505,14 @@
             contentType: false,
             processData: false,
             dataType: 'json',
-            success: function(result) {
+            success: function (result) {
                 if (result.code == web_status.SUCCESS) {
                     $("#photoUrl").val(result.url);
                 } else {
                     $.modal.alertError(result.msg);
                 }
             },
-            error: function(error) {
+            error: function (error) {
                 $.modal.alertWarning("图片上传失败。");
             }
         });
diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html
index 6a9ddff5..4978f8cb 100644
--- a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html
+++ b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html
@@ -37,12 +37,12 @@
             .transition-custom {
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             }
-            .scale-hover {
-                transition: transform 0.2s ease-in-out;
-            }
-            .scale-hover:hover {
-                transform: scale(1.02);
-            }
+            /*.scale-hover {*/
+            /*    transition: transform 0.2s ease-in-out;*/
+            /*}*/
+            /*.scale-hover:hover {*/
+            /*    transform: scale(1.02);*/
+            /*}*/
         }
         .text-sm {
             font-size: 1.4rem;
@@ -295,11 +295,11 @@
                 <!-- 新增文件上传区域 -->
                 <div class="mt-6">
                     <div class="flex items-center justify-between mb-4">
-                        <h5 class="text-lg font-medium text-gray-800">上传PDF文件</h5>
+                        <h5 class="text-lg font-medium text-gray-800">上传文件</h5>
                         <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> 选择PDF文件
-                                <input id="fileUpload" type="file" class="sr-only" accept=".pdf" @change="handleFileSelection">
+                                <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>
@@ -324,12 +324,15 @@
                         <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="fa-solid fa-file-pdf-o text-2xl text-red-500"></i>
+                                    <i :class="getFileIcon(file.fileName)" class="text-2xl"></i>
                                 </div>
-                                <div class="flex-grow min-w-0">
-                                    <p class="text-sm font-medium text-gray-900 truncate">{{ file.fileName }}</p>
+                                <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>
@@ -389,6 +392,25 @@
                     <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>
@@ -541,8 +563,10 @@
                     // 只处理第一个文件
                     let file = this.selectedFiles[0];
                     // 检查文件类型
-                    if (!file.name.toLowerCase().endsWith('.pdf')) {
-                        alert('请上传PDF格式的文件');
+                    let fileExtension = file.name.split('.').pop().toLowerCase();
+                    let validExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'gif', 'bmp'];
+                    if (!validExtensions.includes(fileExtension)) {
+                        alert('请上传PDF、Word文档或图片文件');
                         return;
                     }
                     this.uploadFile(file);
@@ -579,7 +603,7 @@
                                 id: response.data.data.fileId,
                                 fileName: file.name,
                                 fileSize: file.size,
-                                fileType: 'application/pdf',
+                                fileType: file.type,
                                 fileUrl: file.filePath,
                                 uploadTime: new Date().toISOString()
                             };
@@ -661,7 +685,7 @@
                                     id: file.fileId,
                                     fileName: file.fileName,
                                     fileSize: file.fileSize,
-                                    fileType: 'application/pdf',
+                                    fileType: file.fileType,
                                     fileUrl: file.filePath,
                                     uploadTime: file.createTime
                                 }
@@ -672,6 +696,34 @@
                         console.error('获取文件列表错误:', error);
                         alert('获取已上传文件时出错');
                     });
+            },
+            // 新增图片预览相关方法
+            isImageFile(fileName) {
+                const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
+                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) {
+                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 '';
             }
         },
         mounted() {
@@ -723,4 +775,4 @@
 
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
