优化上传PDF文件控件为上传PDF、JPG、PNG文件控件，以及相关功能整改

src/components/PartyMemberDetails/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2022-01-04 10:37:17
  * @LastEditors: Rockery
- * @LastEditTime: 2022-02-18 16:53:44
+ * @LastEditTime: 2022-03-03 10:52:10
  * @FilePath: \party_construct_web\src\components\PartyMemberDetails\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -77,11 +77,11 @@
                     <template v-if="viewFullPartyInfoObj.resume">
                       <div
                         class="basic-info-fourth-info"
-                        @click="handleViewPageCheckClick(viewFullPartyInfoObj.resume, 'pdf文件')"
+                        @click="handleViewPageCheckClick(viewFullPartyInfoObj.resume, '党员详细资料-本人简历（包括学历）')"
                       >查看</div>
                       <div
                         class="basic-info-fourth-info"
-                        @click="handleViewPageDownloadClick(viewFullPartyInfoObj.resume, 'pdf文件')"
+                        @click="handleViewPageDownloadClick(viewFullPartyInfoObj.resume, '党员详细资料-本人简历（包括学历）')"
                       >下载</div>
                     </template>
                     <template v-else>
@@ -93,11 +93,11 @@
                     <template v-if="viewFullPartyInfoObj.other">
                       <div
                         class="basic-info-fourth-info"
-                        @click="handleViewPageCheckClick(viewFullPartyInfoObj.other, 'pdf文件')"
+                        @click="handleViewPageCheckClick(viewFullPartyInfoObj.other, '党员详细资料-其他情况')"
                       >查看</div>
                       <div
                         class="basic-info-fourth-info"
-                        @click="handleViewPageDownloadClick(viewFullPartyInfoObj.other, 'pdf文件')"
+                        @click="handleViewPageDownloadClick(viewFullPartyInfoObj.other, '党员详细资料-其他情况')"
                       >下载</div>
                     </template>
                     <template v-else>
@@ -416,6 +416,22 @@
       :dialog-title="viewPdfFileObj.fileName"
       :pdfUrl="viewPdfFileObj.filePath"
     ></roc-vue-pdf-dialog>
+
+    <!-- 图片 文件预览对话框 -->
+    <roc-vue-img-dialog
+      v-if="imgDialogVisible"
+      :visible.sync="imgDialogVisible"
+      :dialog-title="viewImgFileObj.fileName"
+      :img-url="viewImgFileObj.filePath"
+    />
+
+    <!-- PDF 文件预览对话框 -->
+    <roc-vue-pdf-dialog
+      v-if="pdfDialogVisible"
+      :visible.sync="pdfDialogVisible"
+      :dialog-title="viewPdfFileObj.fileName"
+      :pdf-url="viewPdfFileObj.filePath"
+    ></roc-vue-pdf-dialog>
   </div>
 </template>
 
@@ -431,6 +447,7 @@ import { regularDownloadPdfFile } from "@/utils/rockeryutil";
 export default {
   name: "Partymemberdetails",
   components: {
+    'roc-vue-img-dialog': () => import('@/components/RocVueImgDialog'),
     'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog')
   },
   props: {
@@ -447,12 +464,14 @@ export default {
       viewFullPartyInfoObj: {
         thoughtReportRecord: []
       },
-      viewPdfFileObj: {},
-      pdfDialogVisible: false,
       tabsEleObjList: [...EleObjArr],
       nodeDataObj: { ...NodeDataObj },
       atStageNodeDataObj: { ...AtStageNodeDataObj },
-      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`
+      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`,
+      pdfDialogVisible: false,
+      viewPdfFileObj: {},
+      imgDialogVisible: false,
+      viewImgFileObj: {}
     };
   },
   computed: {
@@ -576,20 +595,39 @@ export default {
     /**
      * PDF文件查看按钮事件
      */
-    handleViewPageCheckClick(pdfFilePath, pdfFileName = 'pdf-file') {
+    handleViewPageCheckClick(pdfFilePath, pdfFileName = '查看文件') {
       if (!pdfFilePath) return;
+
+      // 获取文件类型
+      const fileIndex = pdfFilePath.toString().lastIndexOf(".");
+      const fileType = pdfFilePath.toString().substr(fileIndex + 1);
+
+      // 组装文件访问地址
       const filePath = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${pdfFilePath}`;
-      const fileName = `${pdfFileName}-PDF文件预览`;
-      this.viewPdfFileObj = {
-        filePath,
-        fileName
-      };
-      this.pdfDialogVisible = true;
+
+      // 判断文件类型
+      if (['jpg', 'png'].includes(fileType)) { // Img文件
+        const fileName = '图片文件预览';
+        this.viewImgFileObj = {
+          filePath,
+          fileName
+        };
+        this.imgDialogVisible = true;
+      } else if (['pdf'].includes(fileType)) { // PDF文件
+        const fileName = 'PDF文件预览';
+        this.viewPdfFileObj = {
+          filePath,
+          fileName
+        };
+        this.pdfDialogVisible = true;
+      } else { // 不符合类型文件
+        return;
+      }
     },
     /**
      * PDF文件下载按钮事件
      */
-    handleViewPageDownloadClick(pdfFilePath, pdfFileName = 'pdf-file') {
+    handleViewPageDownloadClick(pdfFilePath, pdfFileName = '下载文件') {
       if (!pdfFilePath) return;
       regularDownloadPdfFile(`${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${pdfFilePath}`, pdfFileName);
     },

src/components/RocImgFileUpload/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-27 11:19:47
  * @LastEditors: Rockery
- * @LastEditTime: 2022-03-01 17:46:31
+ * @LastEditTime: 2022-03-02 11:22:19
  * @FilePath: \party_construct_web\src\components\RocImgFileUpload\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -91,8 +91,6 @@ export default {
       // 是否上传文件成功
       isUploadSuccess: false,
       // 文件上传成功数据对象
-      successUrl: '',
-      // 文件上传成功数据对象
       successResp: {},
       removeLoading: false,
       setTimeoutTimer: null
@@ -145,9 +143,6 @@ export default {
 
       let successUrl = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${response?.data?.url}`;
 
-      // 绑定封面图片数据
-      this.successUrl = successUrl;
-
       // 文件上传成功数据对象
       this.successResp = {
         ...response?.data,
@@ -192,7 +187,6 @@ export default {
       this.removeLoading = true;
       this.setTimeoutTimer = setTimeout(() => {
         this.successResp = {};
-        this.successUrl = '';
         this.isUploadSuccess = false;
         this.isSelect = false;
         this.$emit('input', '');
@@ -231,7 +225,6 @@ export default {
         this.isSelect = false;
         this.isUploadSuccess = false;
         this.successResp = {};
-        this.successUrl = '';
         this.$emit('input', '');
         this.setTimeoutTimer && clearTimeout(this.setTimeoutTimer);
         this.removeLoading = false;

src/components/RocImgPdfFileUpload/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-20 09:16:41
  * @LastEditors: Rockery
- * @LastEditTime: 2022-03-01 17:46:07
+ * @LastEditTime: 2022-03-02 11:21:29
  * @FilePath: \party_construct_web\src\components\RocImgPdfFileUpload\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -118,8 +118,6 @@ export default {
       // 是否上传PDF、JPG、PNG文件成功
       isUploadSuccess: false,
       // PDF、JPG、PNG文件上传成功数据对象
-      successUrl: '',
-      // PDF、JPG、PNG文件上传成功数据对象
       successResp: {},
       pdfDialogVisible: false,
       imgDialogVisible: false,
@@ -185,9 +183,6 @@ export default {
 
       let successUrl = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${response?.data?.url}`;
 
-      // 绑定封面图片数据
-      this.successUrl = successUrl;
-
       // PDF、JPG、PNG文件上传成功数据对象
       this.successResp = {
         ...response?.data,
@@ -238,7 +233,6 @@ export default {
       this.removeLoading = true;
       this.setTimeoutTimer = setTimeout(() => {
         this.successResp = {};
-        this.successUrl = '';
         this.isUploadSuccess = false;
         this.isSelect = false;
         this.fileType = '';
@@ -278,7 +272,6 @@ export default {
         this.isSelect = false;
         this.isUploadSuccess = false;
         this.successResp = {};
-        this.successUrl = '';
         this.fileType = '';
         this.$emit('input', '');
         this.setTimeoutTimer && clearTimeout(this.setTimeoutTimer);

src/components/RocPdfFileUpload/index.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-20 09:16:41
  * @LastEditors: Rockery
- * @LastEditTime: 2022-02-28 11:25:16
+ * @LastEditTime: 2022-03-02 11:23:12
  * @FilePath: \party_construct_web\src\components\RocPdfFileUpload\index.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -104,8 +104,6 @@ export default {
       // 是否上传PDF文件成功
       isUploadSuccess: false,
       // PDF文件上传成功数据对象
-      successUrl: '',
-      // PDF文件上传成功数据对象
       successResp: {},
       pdfDialogVisible: false,
       removeLoading: false,
@@ -163,9 +161,6 @@ export default {
 
       let successUrl = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${response?.data?.url}`;
 
-      // 绑定封面图片数据
-      this.successUrl = successUrl;
-
       // PDF文件上传成功数据对象
       this.successResp = {
         ...response?.data,
@@ -210,7 +205,6 @@ export default {
       this.removeLoading = true;
       this.setTimeoutTimer = setTimeout(() => {
         this.successResp = {};
-        this.successUrl = '';
         this.isUploadSuccess = false;
         this.isSelect = false;
         this.$emit('input', '');
@@ -249,7 +243,6 @@ export default {
         this.isSelect = false;
         this.isUploadSuccess = false;
         this.successResp = {};
-        this.successUrl = '';
         this.$emit('input', '');
         this.setTimeoutTimer && clearTimeout(this.setTimeoutTimer);
         this.removeLoading = false;

src/views/PartyBuildingMgr/FullPartyMember/FullPartyMemberIndex.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-10 10:39:07
  * @LastEditors: Rockery
- * @LastEditTime: 2022-02-18 16:50:08
+ * @LastEditTime: 2022-03-03 10:01:39
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\FullPartyMember\FullPartyMemberIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -399,11 +399,11 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="相关材料：" prop="relatedFile">
-              <roc-pdf-file-upload
+              <roc-img-pdf-file-upload
                 key="ROCPDFFILEUPLOADFULLPARTYMEMBERATTACHMENTKEY"
                 v-model="orgRelationChangeObj.form.relatedFile"
                 upload-file-title="相关材料"
-              ></roc-pdf-file-upload>
+              />
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -438,7 +438,7 @@ import { addOrgRelationship } from "@/api/PartyBuildingMgr/OrgRelationship";
 export default {
   name: "Fullpartymember",
   components: {
-    'roc-pdf-file-upload': () => import('@/components/RocPdfFileUpload'),
+    'roc-img-pdf-file-upload': () => import('@/components/RocImgPdfFileUpload'),
     'update-party-develop': () => import('@/components/UpdatePartyDevelop'),
     'party-member-details': () => import('@/components/PartyMemberDetails')
   },

src/views/PartyBuildingMgr/OrgRelationship/OrgRelationshipIndex.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-10 10:45:41
  * @LastEditors: Rockery
- * @LastEditTime: 2022-01-21 16:07:36
+ * @LastEditTime: 2022-03-03 10:47:54
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\OrgRelationship\OrgRelationshipIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -230,12 +230,17 @@
                 <el-col :span="24">
                   <el-form-item label="相关材料：" prop="relatedFile">
                     <div slot="label" class="roc-form-item-label">相关材料：</div>
-                    <div class="orgrelationship-viewpage-form-desc">
-                      <div @click="handleViewPageCheckClick(viewPageFormObj.formModel)">查看</div>
-                      <div
-                        @click="handleViewPageDownloadClick(viewPageFormObj.formModel.relatedFile, '党建管理-组织关系变更-详情-相关材料')"
-                      >下载</div>
-                    </div>
+                    <template v-if="viewPageFormObj.formModel.relatedFile">
+                      <div class="orgrelationship-viewpage-form-desc">
+                        <div @click="handleViewPageCheckClick">查看</div>
+                        <div
+                          @click="handleViewPageDownloadClick(viewPageFormObj.formModel.relatedFile, '党建管理-组织关系变更-详情-相关材料')"
+                        >下载</div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="roc-form-item-input">无相关材料信息</div>
+                    </template>
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
@@ -282,10 +287,18 @@
       <div>&nbsp;</div>
     </template>
 
+    <roc-vue-img-dialog
+      v-if="imgDialogVisible"
+      :visible.sync="imgDialogVisible"
+      :dialog-title="viewImgFileObj.fileName"
+      :img-url="viewImgFileObj.filePath"
+    />
+
     <roc-vue-pdf-dialog
       v-if="pdfDialogVisible"
       :visible.sync="pdfDialogVisible"
-      :pdfUrl="viewPdfFileUrlPrefix + viewPageFormObj.formModel.relatedFile"
+      :dialog-title="viewPdfFileObj.fileName"
+      :pdf-url="viewPdfFileObj.filePath"
     ></roc-vue-pdf-dialog>
 
     <!-- 组织关系变更对话框 -->
@@ -348,11 +361,11 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="相关材料：" prop="relatedFile">
-              <roc-pdf-file-upload
+              <roc-img-pdf-file-upload
                 key="ROCPDFFILEUPLOADFULLPARTYMEMBERATTACHMENTKEY"
                 v-model="orgRelationChangeObj.form.relatedFile"
                 upload-file-title="相关材料"
-              ></roc-pdf-file-upload>
+              />
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -391,8 +404,9 @@ import { regularDownloadPdfFile } from "@/utils/rockeryutil";
 export default {
   name: "Orgrelationship",
   components: {
+    'roc-vue-img-dialog': () => import('@/components/RocVueImgDialog'),
     'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog'),
-    'roc-pdf-file-upload': () => import('@/components/RocPdfFileUpload'),
+    'roc-img-pdf-file-upload': () => import('@/components/RocImgPdfFileUpload'),
     'update-party-develop': () => import('@/components/UpdatePartyDevelop')
   },
   data() {
@@ -440,7 +454,10 @@ export default {
       currentRow: {},
       orgRelationChangeTypeOptions: [],
       pdfDialogVisible: false,
-      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`
+      viewPdfFileObj: {},
+      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`,
+      imgDialogVisible: false,
+      viewImgFileObj: {}
     };
   },
   created() {
@@ -521,7 +538,34 @@ export default {
      * 详情页面查看按钮事件
      */
     handleViewPageCheckClick() {
-      this.pdfDialogVisible = true;
+      if (!this.viewPageFormObj.formModel.relatedFile) return;
+      const relatedFile = this.viewPageFormObj.formModel.relatedFile;
+
+      // 获取文件类型
+      const fileIndex = relatedFile.toString().lastIndexOf(".");
+      const fileType = relatedFile.toString().substr(fileIndex + 1);
+
+      // 组装文件访问地址
+      const filePath = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${relatedFile}`;
+
+      // 判断文件类型
+      if (['jpg', 'png'].includes(fileType)) { // Img文件
+        const fileName = '图片文件预览';
+        this.viewImgFileObj = {
+          filePath,
+          fileName
+        };
+        this.imgDialogVisible = true;
+      } else if (['pdf'].includes(fileType)) { // PDF文件
+        const fileName = 'PDF文件预览';
+        this.viewPdfFileObj = {
+          filePath,
+          fileName
+        };
+        this.pdfDialogVisible = true;
+      } else { // 不符合类型文件
+        return;
+      }
     },
     /**
      * 详情页面下载按钮事件

src/views/PartyBuildingMgr/SituationDesc/SituationDescIndex.vue

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-12-10 10:45:58
  * @LastEditors: Rockery
- * @LastEditTime: 2022-01-20 17:41:01
+ * @LastEditTime: 2022-03-03 10:35:21
  * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\SituationDesc\SituationDescIndex.vue
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
 -->
@@ -206,11 +206,11 @@
             </el-col>
             <el-col :span="24">
               <el-form-item label="情况说明：" prop="conditionFile">
-                <roc-pdf-file-upload
+                <roc-img-pdf-file-upload
                   key="ROCPDFFILEUPLOADSITUATIONDESCCONDITIONFILEKEY"
                   v-model="addPageFormObj.formModel.conditionFile"
                   upload-file-title="情况说明"
-                ></roc-pdf-file-upload>
+                />
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -380,10 +380,18 @@
       <div>&nbsp;</div>
     </template>
 
+    <roc-vue-img-dialog
+      v-if="imgDialogVisible"
+      :visible.sync="imgDialogVisible"
+      :dialog-title="viewImgFileObj.fileName"
+      :img-url="viewImgFileObj.filePath"
+    />
+
     <roc-vue-pdf-dialog
       v-if="pdfDialogVisible"
       :visible.sync="pdfDialogVisible"
-      :pdfUrl="viewPdfFileUrlPrefix + viewPageFormObj.formModel.conditionFile"
+      :dialog-title="viewPdfFileObj.fileName"
+      :pdf-url="viewPdfFileObj.filePath"
     ></roc-vue-pdf-dialog>
   </div>
 </template>
@@ -403,7 +411,8 @@ import { regularDownloadPdfFile } from "@/utils/rockeryutil";
 export default {
   name: "Situationdesc",
   components: {
-    'roc-pdf-file-upload': () => import('@/components/RocPdfFileUpload'),
+    'roc-img-pdf-file-upload': () => import('@/components/RocImgPdfFileUpload'),
+    'roc-vue-img-dialog': () => import('@/components/RocVueImgDialog'),
     'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog')
   },
   data() {
@@ -451,7 +460,10 @@ export default {
         }
       },
       pdfDialogVisible: false,
-      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`
+      viewPdfFileObj: {},
+      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`,
+      imgDialogVisible: false,
+      viewImgFileObj: {}
     };
   },
   created() {
@@ -602,7 +614,34 @@ export default {
      * 详情页面查看按钮事件
      */
     handleViewPageCheckClick() {
-      this.pdfDialogVisible = true;
+      if (!this.viewPageFormObj.formModel.conditionFile) return;
+      const conditionFile = this.viewPageFormObj.formModel.conditionFile;
+
+      // 获取文件类型
+      const fileIndex = conditionFile.toString().lastIndexOf(".");
+      const fileType = conditionFile.toString().substr(fileIndex + 1);
+
+      // 组装文件访问地址
+      const filePath = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${conditionFile}`;
+
+      // 判断文件类型
+      if (['jpg', 'png'].includes(fileType)) { // Img文件
+        const fileName = '图片文件预览';
+        this.viewImgFileObj = {
+          filePath,
+          fileName
+        };
+        this.imgDialogVisible = true;
+      } else if (['pdf'].includes(fileType)) { // PDF文件
+        const fileName = 'PDF文件预览';
+        this.viewPdfFileObj = {
+          filePath,
+          fileName
+        };
+        this.pdfDialogVisible = true;
+      } else { // 不符合类型文件
+        return;
+      }
     },
     /**
      * 详情页面下载按钮事件