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

src/components/RocFormItemImgPdfUpload/index.vue

@@ -0,0 +1,292 @@
+<!--
+ * @Description: 表单JPG、PNG、PDF文件上传控件
+ * @Author: Rockery
+ * @Date: 2022-02-28 11:31:41
+ * @LastEditors: Rockery
+ * @LastEditTime: 2022-02-28 16:19:11
+ * @FilePath: \party_construct_web\src\components\RocFormItemImgPdfUpload\index.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+  <div class="rocformitemimgpdfupload">
+    <div
+      v-if="(currentOperateType === 'EDIT') && currentFormItemValue"
+      class="rocformitemimgpdfupload-editmode"
+    >
+      <div class="rocformitemimgpdfupload-editmode-view" @click="handleViewPageCheckClick">查看</div>
+      <div class="rocformitemimgpdfupload-editmode-update" @click="handleUpdatePdfFileClick">更新</div>
+      <div class="rocformitemimgpdfupload-editmode-download" @click="handleViewPageDownloadClick">下载</div>
+    </div>
+
+    <roc-img-pdf-file-upload
+      v-else
+      :key="imgPdfFileUploadKey"
+      v-model="currentValue"
+      upload-file-title="本人简历（包括学历"
+    ></roc-img-pdf-file-upload>
+
+    <roc-vue-img-dialog
+      v-if="imgDialogVisible"
+      :visible.sync="imgDialogVisible"
+      :dialog-title="viewImgFileObj.fileName"
+      :img-url="viewImgFileObj.filePath"
+    ></roc-vue-img-dialog>
+
+    <roc-vue-pdf-dialog
+      v-if="pdfDialogVisible"
+      :visible.sync="pdfDialogVisible"
+      :dialog-title="viewPdfFileObj.fileName"
+      :pdf-url="viewPdfFileObj.filePath"
+    ></roc-vue-pdf-dialog>
+
+    <!-- 更新 PDF 文件对话框 -->
+    <el-dialog
+      :title="updatePdfFileDialogObj.title"
+      :visible.sync="updatePdfFileDialogObj.visible"
+      width="600px"
+    >
+      <div class="updatepartydevelop-updatepdffiledialog">
+        <roc-img-pdf-file-upload
+          :key="updatePdfFileDialogObj.key"
+          v-model="updatePdfFileDialogObj.fieldValue"
+          :upload-file-title="updatePdfFileDialogObj.title"
+        ></roc-img-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 || updatePdfFileDialogObj.fieldValue === 'ROCPDFUPLOADSELECT'"
+          @click="handleUpdatePdfFileSubmitClick"
+        >确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { regularDownloadImgPdfFile } from "@/utils/rockeryutil";
+
+export default {
+  name: 'Rocformitemimgpdfupload',
+  components: {
+    'roc-vue-img-dialog': () => import('@/components/RocVueImgDialog'),
+    'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog'),
+    'roc-img-pdf-file-upload': () => import('@/components/RocImgPdfFileUpload')
+  },
+  props: {
+    // 值
+    value: {
+      type: String,
+      default: ''
+    },
+    // 操作类型
+    operateType: {
+      type: String,
+      required: true
+    },
+    // 表单项的字段
+    formItemField: {
+      type: String,
+      default: ''
+    },
+    // 表单项的标题
+    formItemLabel: {
+      type: String,
+      default: ''
+    },
+    // 表单项的字段值
+    formItemValue: {
+      type: String,
+      default: ''
+    },
+    // 表单项的描述
+    formItemDesc: {
+      type: String,
+      default: ''
+    },
+    // PDF、JPG、PNG文件上传控件唯一标识
+    imgPdfFileUploadKey: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      viewPdfFileObj: {
+        filePath: '',
+        fileName: ''
+      },
+      pdfDialogVisible: false,
+      viewImgFileObj: {
+        filePath: '',
+        fileName: ''
+      },
+      imgDialogVisible: false,
+      updatePdfFileDialogObj: {
+        title: '',
+        visible: false,
+        field: '',
+        fieldValue: '',
+        key: ''
+      }
+    };
+  },
+  computed: {
+    currentValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    },
+    currentOperateType: {
+      get() {
+        return this.operateType;
+      },
+      set(val) {
+        this.$emit('update:operateType', val);
+      }
+    },
+    currentFormItemValue: {
+      get() {
+        return this.formItemValue;
+      },
+      set(val) {
+        this.$emit('update:formItemValue', val);
+      }
+    },
+    currentFormItemDesc: {
+      get() {
+        return this.formItemDesc;
+      },
+      set(val) {
+        this.$emit('update:formItemDesc', val);
+      }
+    }
+  },
+  methods: {
+    /**
+     * 编辑模式PDF文件查看按钮事件
+     */
+    handleViewPageCheckClick() {
+      if (!this.currentValue) return;
+
+      // 获取文件类型
+      const fileIndex = this.currentValue.toString().lastIndexOf(".");
+      const fileType = this.currentValue.toString().substr(fileIndex + 1);
+
+      // 组装文件访问地址
+      const filePath = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${this.currentValue}`;
+
+      // 判断文件类型
+      if (['jpg', 'png'].includes(fileType)) { // Img文件
+        const fileName = this.formItemLabel ? `${this.formItemLabel}—图片文件预览` : '图片文件预览';
+        this.viewImgFileObj = {
+          filePath,
+          fileName
+        };
+        this.imgDialogVisible = true;
+
+      } else if (['pdf'].includes(fileType)) { // PDF文件
+        const fileName = this.formItemLabel ? `${this.formItemLabel}—PDF文件预览` : 'PDF文件预览';
+        this.viewPdfFileObj = {
+          filePath,
+          fileName
+        };
+        this.pdfDialogVisible = true;
+
+      } else { // 不符合类型文件
+        return;
+      }
+    },
+    /**
+     * 更新PDF文件按钮事件
+     */
+    handleUpdatePdfFileClick() {
+
+      // 判断必需参数是否有值
+      if (!this.currentFormItemValue || !this.formItemField || !this.formItemLabel) return;
+
+      // 组装更新对话框数据
+      this.updatePdfFileDialogObj = {
+        title: `更新${this.formItemLabel}信息`,
+        visible: true,
+        field: this.formItemField,
+        fieldValue: '',
+        key: `${this.formItemField}-${new Date().getTime()}`
+      };
+    },
+    /**
+     * 更新PDF文件对话框的确定按钮事件
+     */
+    handleUpdatePdfFileSubmitClick() {
+      this.currentValue = this.updatePdfFileDialogObj.fieldValue;
+      this.$alert(`已确定更新${this.formItemLabel}文件，待进行保存操作！`, '提示消息', { type: 'success' });
+      this.updatePdfFileDialogObj.visible = false;
+    },
+    /**
+     * 更新PDF文件对话框的取消按钮事件
+     */
+    handleUpdatePdfFileCancelClick() {
+      this.updatePdfFileDialogObj.visible = false;
+      this.$nextTick(() => {
+        this.updatePdfFileDialogObj = {
+          ...this.updatePdfFileDialogObj,
+          field: '',
+          fieldValue: '',
+          key: ''
+        };
+      });
+    },
+    /**
+     * 编辑模式PDF文件下载按钮事件
+     */
+    handleViewPageDownloadClick() {
+      if (!this.currentValue) return;
+      regularDownloadImgPdfFile(`${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${this.currentValue}`, this.currentFormItemDesc);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.rocformitemimgpdfupload {
+  &-editmode {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 36px;
+      font-weight: 400;
+      font-style: normal;
+      font-size: 18px;
+      color: rgba(24, 144, 255, 0.996);
+      line-height: 36px;
+      cursor: pointer;
+
+      &:last-child {
+        margin-left: 30px;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &-update {
+      margin-left: 30px;
+    }
+  }
+}
+</style>

src/utils/rockeryutil.js

@@ -3,7 +3,7 @@
  * @Author: Rockery
  * @Date: 2021-04-26 15:53:59
  * @LastEditors: Rockery
- * @LastEditTime: 2022-02-18 16:09:52
+ * @LastEditTime: 2022-02-28 16:20:15
  * @FilePath: \party_construct_web\src\utils\rockeryutil.js
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
  */
@@ -119,3 +119,81 @@ export function regularDownloadPdfFile(pdfFileUrl, pdfFileName) {
     });
   }
 }
+
+/**
+ * 常规下载PDF、JPG、PNG等类型文件
+ * @param {String} pdfFileUrl 文件地址 必传
+ * @param {String} pdfFileName 文件别名 非必传
+ */
+export function regularDownloadImgPdfFile(pdfFileUrl, pdfFileName) {
+  if (pdfFileUrl) {
+
+    // 获取文件后缀名
+    const fileIndex = pdfFileUrl.toString().lastIndexOf(".");
+    const fileSuffix = pdfFileUrl.toString().substr(fileIndex + 1);
+
+    // 获取文件类型
+    let fileType = '';
+    if (fileSuffix === 'jpg') { // JPG文件
+      fileType = 'image/jpeg';
+    } else if (fileSuffix === 'png') { // PNG文件
+      fileType = 'image/png';
+    } else if (fileSuffix === 'pdf') { // PDF文件
+      fileType = 'application/pdf';
+    } else { // 不存在类型
+      return;
+    }
+
+    request({
+      url: pdfFileUrl,
+      method: 'get',
+      responseType: 'blob'
+    }).then(res => {
+      // 文件流
+      const blob = new Blob([res], { type: `${fileType};charset=utf-8` });
+
+      // 文件名称
+      const filename = `${pdfFileName || `下载${fileSuffix.toUpperCase()}文件`}_${parseTime(new Date(), "{y}-{m}-{d}")}_${new Date().getTime()}.${fileSuffix}`;
+
+      // 执行文件下载操作
+      if (typeof window.navigator.msSaveBlob !== "undefined") {
+        window.navigator.msSaveBlob(blob, filename);
+        Message({
+          message: `下载${fileSuffix.toUpperCase()}文件成功！`,
+          type: 'success',
+          showClose: true,
+          center: true
+        });
+      } else {
+        // 创建一个指向该参数对象的URL
+        const blobURL = window.URL.createObjectURL(blob);
+
+        // 创建隐藏<a>标签进行下载
+        const tempLink = document.createElement("a");
+        tempLink.style.display = "none";
+        tempLink.href = blobURL;
+        tempLink.setAttribute("download", filename);
+        if (typeof tempLink.download === "undefined") {
+          tempLink.setAttribute("target", "_blank");
+        }
+        document.body.appendChild(tempLink);
+        tempLink.click();
+        window.URL.revokeObjectURL(blobURL);
+        document.body.removeChild(tempLink);
+        Message({
+          message: `下载${fileSuffix.toUpperCase()}文件成功！`,
+          type: 'success',
+          showClose: true,
+          center: true
+        });
+      }
+    }).catch(() => { });
+  } else {
+    Message({
+      message: "文件地址不能为空！",
+      type: 'error',
+      showClose: true,
+      center: true
+    });
+  }
+}