应征入伍保留学籍申请表-附件上传

src/views/routine/enlistmentReserve/applicationForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="application-form-container">
+  <div class="application-form-container" v-loading="loading">
     <h2 class="form-title">广西水利电力职业技术学院</h2>
     <h3 class="form-subtitle">应征入伍保留学籍申请表</h3>
 
@@ -88,17 +88,23 @@
         <tr>
           <td class="label" rowspan="4">申请<br />理由</td>
           <td class="input-cell" colspan="8" rowspan="4">
-            <el-form-item prop="applyReason" class="form-item-custom">
+            <!-- <el-form-item prop="applyReason" class="form-item-custom">
               <el-input v-model="formData.applyReason" type="textarea" :rows="3" placeholder="请填写申请理由..."
                 class="opinion-textarea"></el-input>
-            </el-form-item>
+            </el-form-item> -->
             <p class="reason-text">本人应征入伍，申请保留学籍从
               <el-form-item prop="reserveStartDate" class="form-item-custom inline-item">
                 <el-date-picker v-model="formData.reserveStartDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                   value-format="yyyy-MM-dd" class="date-picker"></el-date-picker>
               </el-form-item> 日至退役后两年。
             </p>
-            <p class="attachment-tip">（设上传入伍通知书等佐证材料区域）</p>
+            <el-form-item prop="affixId">
+              <p class="attachment-tip">
+                <span style="color: red">请上传:入伍通知书等佐证材料.</span>
+                <Affix v-model="formData.affixId" @input="handleAffix" @fileUploaded="handleAffix"/>
+              </p>
+            </el-form-item>
+            
             <div class="applicant-info right-align">
               <span>申请人：</span>
               <el-input v-model="formData.studentName" readonly class="applicant-input"></el-input>
@@ -115,31 +121,37 @@
         <tr></tr>
 
         <!-- 辅导员意见行 -->
-        <tr v-if="!roleGroup.includes('学生')">
-          <td class="label" rowspan="4">辅导员<br />意见</td>
-          <td class="input-cell" colspan="8" rowspan="4">
-            <el-input v-model="counselorApproval.approvalOpinion" type="textarea" :rows="3" placeholder="请填写辅导员意见..."
-              class="opinion-textarea"></el-input>
-            <div class="signature-area right-align">
-              <span>审批结果：</span>
-              <el-select v-model="counselorApproval.approvalResult" placeholder="请选择" class="short-select">
-                <el-option label="通过" value="1"></el-option>
-                <el-option label="驳回" value="2"></el-option>
-              </el-select>
-              <span class="date-label">签名：</span>
-              <el-input v-model="counselorApproval.approverName" placeholder="请输入姓名" class="signature-input"></el-input>
-              <span class="date-label">日期：</span>
-              <el-date-picker v-model="counselorApproval.approvalTime" type="date" placeholder="选择日期"
-                format="yyyy-MM-dd" value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker>
-            </div>
-          </td>
-        </tr>
-        <tr></tr>
-        <tr></tr>
-        <tr></tr>
-
+        <template v-for="item in formData.enlistmentReserveApprovalList">
+          <tr v-if="!roleGroup.includes('学生')">
+            <td class="label" rowspan="4">{{ item.opinionType }}</td>
+            <td class="input-cell" colspan="8" rowspan="4">
+              <!-- <el-input v-model="counselorApproval.approvalOpinion" type="textarea" :rows="3" placeholder="请填写辅导员意见..."
+                class="opinion-textarea"></el-input> -->
+                <div>{{ item.approvalOpinion || "暂无意见" }}</div>
+              <div class="signature-area right-align">
+                <span>
+                  审批结果：
+                  <el-tag v-if="item.approvalResult == 1" type="success">通过</el-tag>
+                  <el-tag v-else type="danger">驳回</el-tag>
+                </span>
+                <!-- <el-select v-model="counselorApproval.approvalResult" placeholder="请选择" class="short-select">
+                  <el-option label="通过" value="1"></el-option>
+                  <el-option label="驳回" value="2"></el-option>
+                </el-select> -->
+                <span class="date-label">签名： {{ item.approverName }}</span>
+                <!-- <el-input v-model="counselorApproval.approverName" placeholder="请输入姓名" class="signature-input"></el-input> -->
+                <span class="date-label">日期： {{ item.approvalTime }}</span>
+                <!-- <el-date-picker v-model="counselorApproval.approvalTime" type="date" placeholder="选择日期"
+                  format="yyyy-MM-dd" value-format="yyyy-MM-dd" class="date-picker full-date"></el-date-picker> -->
+              </div>
+            </td>
+          </tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+        </template>
         <!-- 学务意见行 -->
-        <tr v-if="!roleGroup.includes('学生')">
+        <!-- <tr v-if="!roleGroup.includes('学生')">
           <td class="label" rowspan="4">学务<br />意见</td>
           <td class="input-cell" colspan="8" rowspan="4">
             <el-input v-model="academicApproval.approvalOpinion" type="textarea" :rows="3" placeholder="请填写学务意见..."
@@ -160,10 +172,10 @@
         </tr>
         <tr></tr>
         <tr></tr>
-        <tr></tr>
+        <tr></tr> -->
 
         <!-- 二级学院意见行 -->
-        <tr v-if="!roleGroup.includes('学生')">
+        <!-- <tr v-if="!roleGroup.includes('学生')">
           <td class="label" rowspan="4">二级学院意见</td>
           <td class="input-cell" colspan="8" rowspan="4">
             <el-input v-model="collegeApproval.approvalOpinion" type="textarea" :rows="3" placeholder="请填写二级学院意见..."
@@ -184,10 +196,10 @@
         </tr>
         <tr></tr>
         <tr></tr>
-        <tr></tr>
+        <tr></tr> -->
 
         <!-- 学籍管理科意见行 -->
-        <tr v-if="!roleGroup.includes('学生')">
+        <!-- <tr v-if="!roleGroup.includes('学生')">
           <td class="label" rowspan="5">学籍管理科<br />意见</td>
           <td class="input-cell" colspan="8" rowspan="5">
             <el-input v-model="studentStatusApproval.approvalOpinion" type="textarea" :rows="3"
@@ -210,10 +222,10 @@
         <tr></tr>
         <tr></tr>
         <tr></tr>
-        <tr></tr>
+        <tr></tr> -->
 
         <!-- 教务处主管领导意见行 -->
-        <tr v-if="!roleGroup.includes('学生')">
+        <!-- <tr v-if="!roleGroup.includes('学生')">
           <td class="label" rowspan="4">教务处<br />主管领导意见</td>
           <td class="input-cell" colspan="8" rowspan="4">
             <el-input v-model="deanApproval.approvalOpinion" type="textarea" :rows="3" placeholder="请填写教务处主管领导意见..."
@@ -234,7 +246,7 @@
         </tr>
         <tr></tr>
         <tr></tr>
-        <tr></tr>
+        <tr></tr> -->
 
         <!-- 备注行 -->
         <tr>
@@ -276,12 +288,15 @@
 
 <script>
 import { getOwnInfo, getEnlistmentReserve, delEnlistmentReserve, addEnlistmentReserve, updateEnlistmentReserve } from "@/api/routine/enlistmentReserve/enlistmentReserve";
+import { batchAddEnlistmentReserveAttach } from "@/api/routine/enlistmentReserve/enlistmentReserveAttach";
 import { getUserProfile } from '@/api/system/user' // 获取当前登录用户
 export default {
   name: 'EnlistmentReserveForm',
   dicts: ['rt_nation'],
   data() {
     return {
+      // 遮罩层
+      loading: false,
       formData: {
         id: null,
         applyNo: '',
@@ -305,8 +320,10 @@ export default {
         approvalNo: '',
         createTime: '',
         updateTime: '',
-        remark: ''
+        remark: '',
+        affixId: null
       },
+      enlistmentReserveAttachList: [],
       formRules: {
         studentName: [
           { required: true, message: '请输入姓名', trigger: 'blur' }
@@ -336,10 +353,7 @@ export default {
           { required: true, message: '请输入家长联系电话', trigger: 'blur' },
           { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
         ],
-        applyReason: [
-          { required: true, message: '请输入申请理由', trigger: 'blur' },
-          { min: 20, message: '申请理由长度不能少于20字', trigger: 'blur' }
-        ],
+        affixId: [{ required: true, message: '请上传入伍材料', trigger: 'blur' }],
         reserveStartDate: [
           { required: true, message: '请选择保留学籍起始时间', trigger: 'change' }
         ],
@@ -408,7 +422,8 @@ export default {
         approvalTime: ''
       },
       roleGroup: '',
-      user: null
+      user: null,
+      currentId: null // 用于存储当前接收的 id
     };
   },
   watch: {
@@ -420,10 +435,48 @@ export default {
       } else {
         this.formData.reserveEndDate = '';
       }
+    },
+    // 监听路由参数变化，只要有新的 id 就更新
+    "$route.query.id": {
+      immediate: true, // 初始化时立即执行一次
+      handler(newId, oldId) {
+        if (newId) {
+          this.currentId = newId;
+          // 调用接口加载数据
+          getEnlistmentReserve(this.currentId).then(res => {
+            this.formData = res.data
+            // 处理审批意见列表，添加意见类型
+            if (this.formData?.enlistmentReserveApprovalList) {
+              // 定义意见类型数组（与索引对应：0=辅导员，1=学务，2=二级学院，3=学籍管理科，4=教务处主管领导）
+              const opinionTypes = [
+                "辅导员意见",
+                "学务意见",
+                "二级学院意见",
+                "学籍管理科意见",
+                "教务处主管领导意见"
+              ];
+              // 遍历审批列表，为每条数据添加 opinionType 字段
+              this.formData.enlistmentReserveApprovalList.forEach((item, index) => {
+                // 只处理前5条数据（超出部分不添加，或可根据实际需求调整）
+                if (index < opinionTypes.length) {
+                  item.opinionType = opinionTypes[index];
+                } else {
+                  // 若超过5条，可设置默认值或不设置
+                  item.opinionType = "其他意见";
+                }
+              });
+            }
+          })
+        } else {
+          // 若 id 为空，可做清空处理
+          this.currentId = null;
+          this.getUser()
+        }
+      }
     }
   },
   mounted() {
-    this.getUser()
+    // this.getUser()
   },
   methods: {
     // 获取当前登录信息
@@ -432,24 +485,25 @@ export default {
         this.user = response.data
         this.roleGroup = response.roleGroup;
         // this.postGroup = response.postGroup;
-        console.log(this.user);
         if (this.user) {
           this.formData.studentName = this.user.nickName
           this.formData.gender = this.user.sex
           getOwnInfo().then(res => {
-            console.log(res);
-            this.formData.studentId = res.data.stuId
-            this.formData.studentNo = res.data.stuNo
-            this.formData.major = res.data.majorName
-            this.formData.className = res.data.className
-            this.formData.grade = res.data.gradeName
-            this.formData.teacherName = res.data.teacherName
+            if (res.data) {
+              this.formData.studentId = res.data.stuId
+              this.formData.studentNo = res.data.stuNo
+              this.formData.major = res.data.majorName
+              this.formData.className = res.data.className
+              this.formData.grade = res.data.gradeName
+              this.formData.teacherName = res.data.teacherName
+            }
           })
         }
       })
     },
     submitForm(applyStatus) {
       this.$refs.formRef.validate((valid) => {
+        this.loading = true;
         if (valid) {
           if (!this.formData.applyNo) {
             const year = new Date().getFullYear();
@@ -459,6 +513,8 @@ export default {
           }
           this.formData.applyStatus = applyStatus;
           this.formData.updateTime = new Date().toISOString().split('T')[0];
+          this.formData.applyReason = "本人应征入伍，申请保留学籍从 " + this.formData.reserveStartDate + " 至退役后两年。"
+          
 
           const submitData = {
             formData: this.formData,
@@ -475,15 +531,27 @@ export default {
           if (this.formData.id != null) {
             updateEnlistmentReserve(submitData.formData).then(response => {
               this.$modal.msgSuccess("修改成功");
+              this.loading = false;
             });
           } else {
             addEnlistmentReserve(submitData.formData).then(response => {
               this.$modal.msgSuccess("新增成功");
+              // 申请表新增成功之后，进行附件的添加
+              if (response.code == 200) {
+                // 填写附件里面的申请编号
+                this.enlistmentReserveAttachList.forEach(element => {
+                  element.applyNo = this.formData.applyNo
+                  element.applyId = response.data.id
+                })
+                batchAddEnlistmentReserveAttach(this.enlistmentReserveAttachList)
+                this.loading = false;
+              }
             });
           }
           // this.$message.success('提交成功！');
         } else {
           this.$message.error('表单填写不完整，请检查！');
+          this.loading = false;
           return false;
         }
       });
@@ -515,6 +583,41 @@ export default {
     },
     printForm() {
       window.print();
+    },
+    handleAffix(affixId) {
+      this.affixId = affixId
+    },
+    // 处理组件传递的文件信息
+    handleAffix(fileInfo) {
+      if (!fileInfo || !fileInfo.fileName || !fileInfo.filePath) {
+        console.warn("无效的文件信息，跳过添加");
+        return; // 不添加空数据
+      }
+      // 构建与后端实体匹配的data对象
+      let data = {
+        // id: null, // 主键（后端自增）
+        applyId: this.formData.id || null, // 关联申请表ID（从主表单获取）
+        fileName: fileInfo.fileName, // 文件名（从组件传递的信息中获取）
+        filePath: fileInfo.filePath, // 文件路径（相对路径，关联sys_file表）
+        fileSize: fileInfo.originalFile?.size || 0, // 若需要，可从fileInfo.originalFile.size获取（单位：字节）
+        fileType: fileInfo.fileType, // 文件类型（如docx、pdf）
+        applyNo: this.formData.applyNo || '', // 申请编号（从主表单获取）
+        studentName: this.formData.studentName || '', // 学生姓名（从主表单获取）
+        studentNo: this.formData.studentNo || '' // 学号（从主表单获取）
+      };
+
+      // 避免重复添加（根据filePath去重）
+      const isDuplicate = this.enlistmentReserveAttachList.some(
+        item => item.filePath === data.filePath
+      );
+      if (!isDuplicate) {
+        this.enlistmentReserveAttachList.push(data);
+        console.log('附件添加成功：', this.enlistmentReserveAttachList);
+      } else {
+        this.$message.warning('该文件已添加，请勿重复上传');
+      }
+      console.log(this.enlistmentReserveAttachList);
+      
     }
   }
 };

src/views/routine/enlistmentReserve/enlistmentReserveAttach/index.vue

@@ -38,10 +38,23 @@
 
     <el-table v-loading="loading" :data="enlistmentReserveAttachList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="id" />
-      <el-table-column label="申请表ID" align="center" prop="applyId" />
-      <el-table-column label="文件名" align="center" prop="fileName" />
-      <el-table-column label="文件路径" align="center" prop="filePath" />
+      <el-table-column label="申请表编号" align="center" prop="applyNo" />
+      <el-table-column label="学生姓名" align="center" prop="studentName" />
+      <el-table-column label="学号" align="center" prop="studentNo" />
+      <el-table-column label="文件名" align="center" prop="fileName">
+        <template slot-scope="scope">
+          <el-tooltip class="item" effect="dark" :content="scope.row.fileName" placement="top">
+            <div class="text-ellipsis">{{ scope.row.fileName }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="文件路径" align="center" prop="filePath">
+        <template slot-scope="scope">
+          <el-tooltip class="item" effect="dark" :content="scope.row.filePath" placement="top">
+            <div class="text-ellipsis">{{ scope.row.filePath }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
       <el-table-column label="文件大小" align="center" prop="fileSize" />
       <el-table-column label="文件类型" align="center" prop="fileType" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -60,8 +73,8 @@
     <!-- 添加或修改保留学籍申请附件（入伍通知书等）对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="申请表ID" prop="applyId">
-          <el-input v-model="form.applyId" placeholder="请输入申请表ID" />
+        <el-form-item label="申请表编号" prop="applyNo">
+          <el-input v-model="form.applyNo" placeholder="申请表编号" />
         </el-form-item>
         <el-form-item label="文件名" prop="fileName">
           <el-input v-model="form.fileName" placeholder="请输入文件名" />
@@ -243,3 +256,11 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+  .text-ellipsis {
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的内容 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+</style>

src/views/routine/enlistmentReserve/index.vue

@@ -86,9 +86,21 @@
       <el-table-column label="班级" align="center" prop="className">
       </el-table-column>
       <el-table-column label="专业名称" align="center" prop="major" />
-      <el-table-column label="家庭地址" align="center" prop="familyAddress" />
+      <el-table-column label="家庭地址" align="center" prop="familyAddress">
+        <template slot-scope="scope">
+          <el-tooltip class="item" effect="dark" :content="scope.row.familyAddress" placement="top">
+            <div class="text-ellipsis">{{ scope.row.familyAddress }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
       <el-table-column label="家长电话" align="center" prop="parentPhone" />
-      <el-table-column label="申请理由" align="center" prop="applyReason" />
+      <el-table-column label="申请理由" align="center" prop="applyReason">
+        <template slot-scope="scope">
+          <el-tooltip class="item" effect="dark" :content="scope.row.applyReason" placement="top">
+            <div class="text-ellipsis">{{ scope.row.applyReason }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
       <el-table-column label="申请状态" align="center" prop="applyStatus">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.applyStatus == 0" type="info">待提交</el-tag>
@@ -368,11 +380,16 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getEnlistmentReserve(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改应征入伍保留学籍申请";
+      // const id = row.id || this.ids
+      // getEnlistmentReserve(id).then(response => {
+      //   this.form = response.data;
+      //   this.open = true;
+      //   this.title = "修改应征入伍保留学籍申请";
+      // });
+      // 跳转时携带 row.id 作为路由参数
+      this.$router.push({
+        path: "/routine/enlistmentReserve/applicationForm",
+        query: { id: row.id } // 将 row.id 放在 query 中
       });
     },
     /** 提交按钮 */
@@ -418,3 +435,11 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+  .text-ellipsis {
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的内容 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+</style>