优化修改功能

src/components/RocImgFileUpload/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-27 11:19:47
  * @LastEditors: Rockery
- * @LastEditTime: 2021-12-27 13:57:09
+ * @LastEditTime: 2022-01-21 14:55:59
  * @FilePath: \party_construct_web\src\components\RocImgFileUpload\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -167,7 +167,6 @@ export default {
      * 文件状态改变
      */
     handleRocImgFileUploadOnchange(file, fileList) {
-      console.log('(file.raw || {}).type===', (file.raw || {}).type || '');
       if (file.status === 'ready') {
         if(!['image/png', 'image/jpeg'].includes((file.raw || {}).type || '')){
           this.$refs.rocImgFileUploadRef.clearFiles();

src/components/UpdatePartyDevelop/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-15 17:54:05
  * @LastEditors: Rockery
- * @LastEditTime: 2022-01-21 09:46:04
+ * @LastEditTime: 2022-01-21 14:53:53
  * @FilePath: \party_construct_web\src\components\UpdatePartyDevelop\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -208,10 +208,14 @@
                     class="updatepartydevelop-viewuploadpdffile"
                   >
                     <div
-                      @click="handleViewPageCheckClick(formObj.formModel.resume, '党建管理-录入数据-1-本人简历（包括学历）')"
+                      @click="handleViewPageCheckClick(formObj.formModel.resume, '党建管理-录入数据-0-本人简历（包括学历）')"
                     >查看</div>
                     <div
-                      @click="handleViewPageDownloadClick(formObj.formModel.resume, '党建管理-录入数据-1-本人简历（包括学历）')"
+                      class="updatepartydevelop-viewuploadpdffile-update"
+                      @click="handleUpdatePdfFileClick(formObj.formModel.resume, 'resume','更新本人简历（包括学历）信息')"
+                    >更新</div>
+                    <div
+                      @click="handleViewPageDownloadClick(formObj.formModel.resume, '党建管理-录入数据-0-本人简历（包括学历）')"
                     >下载</div>
                   </div>
                   <roc-pdf-file-upload
@@ -231,10 +235,14 @@
                     class="updatepartydevelop-viewuploadpdffile"
                   >
                     <div
-                      @click="handleViewPageCheckClick(formObj.formModel.other, '党建管理-录入数据-1-其他情况')"
+                      @click="handleViewPageCheckClick(formObj.formModel.other, '党建管理-录入数据-0-其他情况')"
                     >查看</div>
                     <div
-                      @click="handleViewPageDownloadClick(formObj.formModel.other, '党建管理-录入数据-1-其他情况')"
+                      class="updatepartydevelop-viewuploadpdffile-update"
+                      @click="handleUpdatePdfFileClick(formObj.formModel.other, 'other','更新其他情况信息')"
+                    >更新</div>
+                    <div
+                      @click="handleViewPageDownloadClick(formObj.formModel.other, '党建管理-录入数据-0-其他情况')"
                     >下载</div>
                   </div>
                   <roc-pdf-file-upload
@@ -260,6 +268,14 @@
                         @error="imgViewerOnerror"
                       />
                     </div>
+                    <div class="updatepartydevelop-viewuploadimgfile-btn">
+                      <div
+                        @click="handleUpdateImgFileClick(formObj.formModel.personPhoto, 'personPhoto','更新两寸正面免冠照片信息')"
+                      >更新</div>
+                      <div
+                        @click="handleViewPageDownloadClick(formObj.formModel.personPhoto, '党建管理-录入数据-0-两寸正面免冠照片')"
+                      >下载</div>
+                    </div>
                   </div>
                   <roc-img-file-upload
                     v-else
@@ -3150,6 +3166,54 @@
       :dialog-title="viewPdfFileObj.fileName"
       :pdfUrl="viewPdfFileObj.filePath"
     ></roc-vue-pdf-dialog>
+
+    <!-- 更新 PDF 文件对话框 -->
+    <el-dialog
+      :title="updatePdfFileDialogObj.title"
+      :visible.sync="updatePdfFileDialogObj.visible"
+      width="600px"
+    >
+      <div class="updatepartydevelop-updatepdffiledialog">
+        <roc-pdf-file-upload
+          :key="updatePdfFileDialogObj.key"
+          v-model="updatePdfFileDialogObj.fieldValue"
+          :upload-file-title="updatePdfFileDialogObj.title"
+        ></roc-pdf-file-upload>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="rocpartyprimaryplainbtn" @click="handleUpdatePdfFileCancelClick">取 消</el-button>
+        <el-button
+          type="rocpartyprimarybtn"
+          :disabled="!updatePdfFileDialogObj.fieldValue"
+          @click="handleUpdatePdfFileSubmitClick"
+        >确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 更新图片文件对话框 -->
+    <el-dialog
+      :title="updateImgFileDialogObj.title"
+      :visible.sync="updateImgFileDialogObj.visible"
+      width="600px"
+    >
+      <div class="updatepartydevelop-updateimgfiledialog">
+        <roc-img-file-upload
+          :key="updateImgFileDialogObj.key"
+          v-model="updateImgFileDialogObj.fieldValue"
+          :upload-file-title="updateImgFileDialogObj.title"
+        ></roc-img-file-upload>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="rocpartyprimaryplainbtn" @click="handleUpdateImgFileCancelClick">取 消</el-button>
+        <el-button
+          type="rocpartyprimarybtn"
+          :disabled="!updateImgFileDialogObj.fieldValue"
+          @click="handleUpdateImgFileSubmitClick"
+        >确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -3256,7 +3320,21 @@ export default {
       pdfDialogVisible: false,
       // isFormDataSave: false
       disabledDataObj: IsDisabledDataObj,
-      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`
+      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`,
+      updatePdfFileDialogObj: {
+        title: '',
+        visible: false,
+        field: '',
+        fieldValue: '',
+        key: ''
+      },
+      updateImgFileDialogObj: {
+        title: '',
+        visible: false,
+        field: '',
+        fieldValue: '',
+        key: ''
+      }
     };
   },
   watch: {
@@ -3869,6 +3947,76 @@ export default {
       };
       this.pdfDialogVisible = true;
     },
+    /**
+     * 更新PDF文件按钮事件
+     */
+    handleUpdatePdfFileClick(viewPdfFileValue, pdfFileField, pdfFileName = 'pdf-file') {
+      if (!viewPdfFileValue) return;
+      this.updatePdfFileDialogObj = {
+        title: pdfFileName,
+        visible: true,
+        field: pdfFileField,
+        fieldValue: '',
+        key: `${pdfFileField}-${new Date().getTime()}`
+      };
+    },
+    /**
+     * 更新PDF文件对话框的确定按钮事件
+     */
+    handleUpdatePdfFileSubmitClick() {
+      this.formObj.formModel[this.updatePdfFileDialogObj.field] = this.updatePdfFileDialogObj.fieldValue;
+      this.$alert(`已确定更新${this.updatePdfFileDialogObj.title}PDF文件，待进行保存操作！`, '提示消息', { type: 'success' });
+      this.updatePdfFileDialogObj.visible = false;
+    },
+    /**
+     * 更新PDF文件对话框的取消按钮事件
+     */
+    handleUpdatePdfFileCancelClick() {
+      this.updatePdfFileDialogObj.visible = false;
+      this.$nextTick(() => {
+        this.updatePdfFileDialogObj = {
+          ...this.updatePdfFileDialogObj,
+          field: '',
+          fieldValue: '',
+          key: ''
+        };
+      });
+    },
+    /**
+     * 更新图片文件按钮事件
+     */
+    handleUpdateImgFileClick(viewImgFileValue, imgFlieField, imgFileName = 'pdf-file') {
+      if (!viewImgFileValue) return;
+      this.updateImgFileDialogObj = {
+        title: imgFileName,
+        visible: true,
+        field: imgFlieField,
+        fieldValue: '',
+        key: `${imgFlieField}-${new Date().getTime()}`
+      };
+    },
+    /**
+     * 更新图片文件对话框的确定按钮事件
+     */
+    handleUpdateImgFileSubmitClick() {
+      this.formObj.formModel[this.updateImgFileDialogObj.field] = this.updateImgFileDialogObj.fieldValue;
+      this.$alert(`已确定更新${this.updateImgFileDialogObj.title}PDF文件，待进行保存操作！`, '提示消息', { type: 'success' });
+      this.updateImgFileDialogObj.visible = false;
+    },
+    /**
+     * 更新图片文件对话框的取消按钮事件
+     */
+    handleUpdateImgFileCancelClick() {
+      this.updateImgFileDialogObj.visible = false;
+      this.$nextTick(() => {
+        this.updateImgFileDialogObj = {
+          ...this.updateImgFileDialogObj,
+          field: '',
+          fieldValue: '',
+          key: ''
+        };
+      });
+    },
     /**
      * 编辑模式PDF文件下载按钮事件
      */
@@ -4444,4 +4592,35 @@ export default {
 
 <style lang="scss" scoped>
 @import "./scss/UpdatePartyDevelop.scss";
+</style>
+
+<style lang="scss">
+.updatepartydevelop {
+  &-updatepdffiledialog {
+    .rocpdffileupload {
+      &-attachment {
+        &-fileupload {
+          &-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+  &-updateimgfiledialog {
+    .rocimgfileupload {
+      &-attachment {
+        &-fileupload {
+          &-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/components/UpdatePartyDevelop/scss/UpdatePartyDevelop.scss

@@ -311,6 +311,10 @@
         text-decoration: underline;
       }
     }
+
+    &-update {
+      margin-left: 30px;
+    }
   }
 
   &-viewuploadimgfile {
@@ -319,17 +323,34 @@
     width: 100%;
     max-height: 100px;
 
-    div {
+    &-img {
       display: flex;
       align-items: center;
-      width: 100%;
       max-height: 100px;
 
-      img{
+      img {
         max-width: 100px;
         max-height: 100px;
       }
     }
+
+    &-btn {
+      margin-left: 20px;
+
+      div {
+        height: 36px;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 18px;
+        color: rgba(24, 144, 255, 0.996);
+        line-height: 36px;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
   }
 }