外宿申请-附件回显bug

2025-12-12 11:51:17 +08:00
parent 8042c3d821
commit 2b7725ab91
4 changed files with 422 additions and 378 deletions
--- a/src/components/affix/index.vue
+++ b/src/components/affix/index.vue
@@ -1,25 +1,14 @@
 <template>
  <div>
-    <el-upload
-      :style="uploadStyle"
-      action=""
-      :class="['cm-affix', {'is-disabled': inputDisabled}]"
-      :disabled="inputDisabled"
-      :multiple="true"
-      :http-request="handleUpload"
-      :file-list="fileList"
-      :accept="accpet"
-      :show-file-list="false"
-      :before-upload="handleBeforeUpload"
-    >
-      <el-button v-if="inputDisabled !== true" id="affix1" :disabled="notupload" size="small" type="primary"><i class='el-icon-upload2'></i>点击上传</el-button>
-      <el-button
-        v-if="this.affixId !== null && this.affixId !== '' && this.fileList.length > 0"
-        id="affix2"
-        size="small"
-        @click.stop="downloadPack()"
-      >
-        <div v-if="downloading" class="el-icon-loading file-upload" style="margin-left: 0px;margin-right: 3px;font-size: 14px;" />
+    <el-upload :style="uploadStyle" action="" :class="['cm-affix', { 'is-disabled': inputDisabled }]"
+      :disabled="inputDisabled" :multiple="true" :http-request="handleUpload" :file-list="fileList" :accept="accpet"
+      :show-file-list="false" :before-upload="handleBeforeUpload">
+      <el-button v-if="inputDisabled !== true" id="affix1" :disabled="notupload" size="small" type="primary"><i
+          class='el-icon-upload2'></i>点击上传</el-button>
+      <el-button v-if="this.affixId !== null && this.affixId !== '' && this.fileList.length > 0" id="affix2"
+        size="small" @click.stop="downloadPack()">
+        <div v-if="downloading" class="el-icon-loading file-upload"
+          style="margin-left: 0px;margin-right: 3px;font-size: 14px;" />
        打包下载
      </el-button>
    </el-upload>
@@ -30,17 +19,14 @@
        <div v-if="item.status === 1" class="el-icon-loading file-upload" title="上传中..." />
        <div v-if="item.status === 2" class="el-icon-download file-download" title="下载" @click="downloadFile(item)" />
        <div v-if="item.status === 2" class="el-icon-delete file-delete" title="删除" @click="deleteFile(item)" />
-        <div v-if="isImageURL(item.name) && item.status === 2" class="el-icon-picture" title="预览" @click="preview(item)" />
+        <div v-if="isImageURL(item.name) && item.status === 2" class="el-icon-picture" title="预览"
+          @click="preview(item)" />



      </div>
    </div>
-    <el-image v-show="false" ref="preview"
-              class="preview"
-              :src="hiddenSrc"
-              :preview-src-list="previewList"
-    />
+    <el-image v-show="false" ref="preview" class="preview" :src="hiddenSrc" :preview-src-list="previewList" />

  </div>
 </template>
@@ -87,6 +73,9 @@ export default {
      baseurl: process.env.VUE_APP_BASE_API,
      hiddenSrc: '',
      previewList: [],
+      // 解决重复提交的核心变量
+      isQuerying: false, // 请求锁：标记是否正在查询附件
+      retryCount: 0     // 重试次数：捕获重复提交错误时重试
    }
  },
  computed: {
@@ -97,11 +86,18 @@ export default {
  watch: {
    // 父组件值监听事件
    value: {
-            handler: function(newVal/*, oldVal*/) {
-                if (newVal === undefined || newVal == null || newVal === ''
-                        || this.affixId === undefined || this.affixId == null || this.affixId === ''
-                        || newVal !== this.affixId) {
-                    this.loadData()
+      immediate: true, // 初始化立即执行
+      handler: function (newVal, oldVal) {
+        // 新旧值不同时，先清空所有旧数据（核心解决数据残留）
+        if (newVal !== oldVal) {
+          this.fileList = [];
+          this.previewList = [];
+          this.affixId = '';
+          this.retryCount = 0;
+        }
+        // 满足条件才加载数据
+        if (newVal && newVal !== '' && newVal !== this.affixId) {
+          this.loadData();
        }
      }
    }
@@ -109,6 +105,14 @@ export default {
  created() {
    this.loadData()
  },
+  // 新增：组件激活时清空旧数据（适配keep-alive页面）
+  activated() {
+    this.fileList = [];
+    this.previewList = [];
+    if (this.value) {
+      this.loadData();
+    }
+  },
  methods: {
    // 预览
    preview(item) {
@@ -262,36 +266,76 @@ export default {
      })
    },
    loadData() {
-            this.fileList = []
+      // 1. 请求锁：防止同一时刻重复请求（解决重复提交）
+      if (this.isQuerying) return;
+      // 2. 清空旧数据（双重保障解决数据残留）
+      this.fileList = [];
+      this.previewList = [];
+
      if (typeof this.value !== 'undefined' && this.value !== null && this.value !== '') {
+        this.isQuerying = true; // 加锁
+        // 带重试机制的查询方法
+        const queryWithRetry = () => {
          queryAffixs(this.value).then((res) => {
+            this.isQuerying = false; // 解锁
            if (res.code == 200) {
              if (res.data.length > 0) {
-                            this.affixId = this.value
+                this.affixId = this.value;
+                // 重新构建数组，避免引用污染
+                const newFileList = [];
+                const newPreviewList = [];
                for (var i = 0; i < res.data.length; i++) {
-                                if(this.isImageURL(res.data[i].savePath)){
-                                    this.previewList.push(this.baseurl+ res.data[i].savePath)
+                  const savePath = this.baseurl + res.data[i].savePath;
+                  if (this.isImageURL(savePath)) {
+                    newPreviewList.push(savePath);
                  }
-                                this.fileList.push({name: res.data[i].trueName, id: res.data[i].id, status: 2,savePath:this.baseurl+ res.data[i].savePath})
+                  newFileList.push({
+                    name: res.data[i].trueName,
+                    id: res.data[i].id,
+                    status: 2,
+                    savePath: savePath
+                  });
+                }
+                // 直接替换数组，彻底解决残留
+                this.fileList = newFileList;
+                this.previewList = newPreviewList;
+              } else {
+                this.affixId = '';
              }
            } else {
-                            this.affixId = ''
+              // 捕获"重复提交"错误，重试1次
+              if (res.msg.includes('请勿重复提交') && this.retryCount < 1) {
+                this.retryCount++;
+                this.isQuerying = true;
+                setTimeout(() => queryWithRetry(), 500); // 500ms后重试
+                return;
              }
-
-                    } else {
-                        this.$message.error(res.msg)
+              this.$message.error(res.msg);
            }
-                }).catch((res) => {
-                    this.editLoading = false
-                    this.$message.error(res.message)
-                })
+          }).catch((err) => {
+            this.isQuerying = false; // 解锁
+            // 捕获异常中的重复提交错误，重试1次
+            if (err.message?.includes('请勿重复提交') && this.retryCount < 1) {
+              this.retryCount++;
+              setTimeout(() => queryWithRetry(), 500);
+              return;
+            }
+            this.$message.error(err.message || '查询附件失败');
+          });
+        };
+        // 执行查询
+        queryWithRetry();
      } else {
-                this.affixId = ''
+        this.affixId = '';
+        this.isQuerying = false;
      }
    },
    clearData() {
-            this.affixId = ''
-            this.fileList = []
+      this.affixId = '';
+      this.fileList = [];
+      this.previewList = [];
+      this.isQuerying = false;
+      this.retryCount = 0;
    }
  }
 }
@@ -306,9 +350,11 @@ export default {
  align-items: center;
  margin-bottom: 10px;
 }
+
 .file {
  width: 100%;
 }
+
 .file-item {

  white-space: nowrap;
@@ -317,30 +363,39 @@ export default {
  align-items: center;
  gap: 8px;
 }
+
 .file-item div {
  display: inline-block;
  white-space: nowrap;
 }
+
 .file-upload {
  font-size: 18px;
  margin-left: 5px;
 }
-    .file-download, .file-delete{
+
+.file-download,
+.file-delete {
  font-size: 18px;
  cursor: pointer;

 }
-    .file-download:hover, .file-delete:hover {
+
+.file-download:hover,
+.file-delete:hover {
  color: #409EFF;
 }
+
 .file-item[class~=is-disabled] .file-delete {
  display: none;
 }
+
 .download-pack:hover {
  background: #409eff;
  border-color: #3999a8;
  color: #fafbfd;
 }
+
 .preview .file-preview {

  font-size: 19px;
--- a/src/views/dormitory/outsideAccommodation/outsideAccommodationApply/applicationForm.vue
+++ b/src/views/dormitory/outsideAccommodation/outsideAccommodationApply/applicationForm.vue
@@ -274,7 +274,7 @@
          <i class="el-icon-folder" />
          保存
        </el-button>
-        <el-button type="primary" size="medium" @click="submitForm(1)">
+        <el-button type="primary" size="medium" @click="submitForm(1)" v-if="form.id == ''">
          <i class="el-icon-check" />
          提交申请
        </el-button>
@@ -703,63 +703,52 @@ export default {
    submitForm(status) {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
-          // 生成申请编号
+          // 生成申请编号等逻辑不变
          if (!this.form.applyNo) {
            const year = new Date().getFullYear();
            const randomNo = Math.floor(Math.random() * 1000000).toString().padStart(6, '0');
-            this.form.applyNo = `WS${year}${randomNo}`;  // 获取申请编号
+            this.form.applyNo = `WS${year}${randomNo}`;
          }
-          // 生成外宿结束时间（默认次年8月31日）
          this.form.endDate = this.getOutsideDefaultEndTime()
-          // 生成本人承诺内容
          this.form.promiseContent = `
            <p>1.自觉遵守国家法律、法规；</p>
            <p>2.自觉遵守学生行为规范和学校的规章制度，遵守社会公德；</p>
            <p>3.自觉遵守外宿住址所在社区的有关管理规定；</p>
            <p>4.本人申请外宿，属个人自愿行为，外宿期间发生的一切事故，造成本人、他人或集体的人身、财产损害的，学校不负责任。</p>
          `
-          // 将地址数组转为字符串（用 / 拼接，后端可按此分隔解析）
          const submitForm = {
            ...this.form,
-            address: this.form.address ? this.form.address.join('/') : '', // 数组转字符串
-            parentAddress: this.form.parentAddress ? this.form.parentAddress.join('/') : '', // 家长地址同理
-            status: status
+            address: this.form.address ? this.form.address.join('/') : '',
+            parentAddress: this.form.parentAddress ? this.form.parentAddress.join('/') : '',
+            status: this.form.status != 0 ? this.form.status : status
          };

          this.loading = true;
-          if (this.form.id != null) {
-            updateOutsideAccommodationApply(submitForm).then((response) => {
-              // 批量新增材料附件
+          // 封装请求逻辑为Promise，确保完成后再操作
+          const requestPromise = this.form.id != null
+            ? updateOutsideAccommodationApply(submitForm)
+            : addOutsideAccommodationApply(submitForm);
+
+          requestPromise.then((response) => {
+            // 附件处理逻辑不变
            if (this.reasonFileList && this.reasonFileList.length > 0) {
-                batchAddOutsideAccommodationAttachment(this.reasonFileList)
-                this.resetForm()
-              }
-              this.loading = false;
-              this.$modal.msgSuccess('修改成功')
-              this.goBack()
-            }).catch(error => {
-              this.loading = false;
-              this.goBack()
-            })
-          } else {
-            addOutsideAccommodationApply(submitForm).then((response) => {
-              // 填写附件里面的申请编号
              this.reasonFileList.forEach(element => {
-                element.applyId = response.data.id
-              })
-              // 批量新增材料附件
-              if (this.reasonFileList && this.reasonFileList.length > 0) {
-                batchAddOutsideAccommodationAttachment(this.reasonFileList)
-                this.resetForm()
+                element.applyId = this.form.id || response.data.id;
+              });
+              batchAddOutsideAccommodationAttachment(this.reasonFileList);
            }
            this.loading = false;
-              this.$modal.msgSuccess('新增成功')
-              this.goBack()
+            this.$modal.msgSuccess(this.form.id ? '修改成功' : '新增成功');
+            // 延迟跳转：给后端数据落地留时间（关键！）
+            setTimeout(() => {
+              this.goBack();
+            }, 800); // 800ms延迟，确保后端写入完成
          }).catch(error => {
            this.loading = false;
-              this.goBack()
+            this.$message.error('提交失败：' + (error.msg || '服务器处理异常'));
+            // 失败时不跳转，避免用户重复操作
+            // this.goBack();
          })
-          }
        } else {
          this.loading = false;
          this.$message.error('表单填写有误，请检查！')
--- a/src/views/dormitory/outsideAccommodation/outsideAccommodationApply/components/detailApply.vue
+++ b/src/views/dormitory/outsideAccommodation/outsideAccommodationApply/components/detailApply.vue
@@ -44,8 +44,8 @@
              </el-descriptions-item>
              <el-descriptions-item span="4">
                <template slot="label"> 宿费交纳情况（只填写当年度交费情况） </template>
-                <!-- {{ renderData.familyAddress }} -->
-                已交 绑定当前学年年度住宿费 人民币
+                {{ renderData.accommodationFee }}
+                <!-- 已交 绑定当前学年年度住宿费 人民币 -->
              </el-descriptions-item>

              <el-descriptions-item span="2">
--- a/src/views/dormitory/outsideAccommodation/outsideAccommodationApply/index.vue
+++ b/src/views/dormitory/outsideAccommodation/outsideAccommodationApply/index.vue
@@ -150,7 +150,7 @@
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['dormitory:outsideAccommodationApply:edit']"
-            v-if="scope.row.status == 0 || getRejectInfo(scope.row.outsideAccommodationApprovals).isReject">修改</el-button>
+            >修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['dormitory:outsideAccommodationApply:remove']" v-if="scope.row.status == 0">删除</el-button>
          <el-button v-if="scope.row.applyStatus != 0" size="mini" type="text" icon="el-icon-info"