hrp-ui-base 1.4.7 → 1.4.9

package/src/components/annex-upload/index.vue

@@ -1,800 +1,800 @@
-<!-- 
- * @description: 附件上传组件
- * @fileName: annex-upload-component.vue 
- * @author: huatuo 
-!-->
-<template>
-  <div class="upload-attachments">
-    <!-- oss 上传 -->
-    <el-upload
-      class="fzile-uploader"
-      ref="upload"
-      v-model:file-list="fileList"
-      :auto-upload="true"
-      accept=".docx,.doc,.xls,.xlsx,.jpg,.pdf,.png,.bmp,.ppt,.pptx,.jpeg,.tiff,.raw,.heif,.gif,.mp3,.mp4,.rar,.zip,.7z,.wps,.DOCX,.DOC,.XLS,.XLSX,.JPG,.PDF,.PNG,.BMP,.PPT,.PPTX,.JPEG,.TIFF,.RAW,.HEIF,.GIF,.MP3,.MP4,.dcm,.DCM,.RAR,.ZIP,.7Z,.WPS"
-      :before-upload="beforeUploadOSS"
-      :action="uploadUrl"
-      :show-file-list="false"
-      :data="{ pageId: props.pageId }"
-      list-type="picture"
-      :on-exceed="handleExceed"
-      :limit="props.limited"
-      v-if="props.formType != 'detail'"
-      :headers="ossHeader"
-      size="large"
-      :disabled="props.loading"
-      :http-request="uploadFileOSS"
-      multiple
-    >
-      <el-button
-        type="primary"
-        text
-        bg
-        icon="Upload"
-        style="font-size: var(--font-size-body)"
-        size="large"
-        >上传附件</el-button
-      >
-      <template #tip>
-        <div class="el-upload__tip">
-          附件上限数量{{ props.limited }}个，单次最多选择{{
-            props.limited
-          }}个，单文件大小不超过{{ MAX_FILE_SIZE_MB }}MB
-          且附件上传格式仅限docx、doc、wps、xls、xlsx、jpg、pdf、png、bmp、ppt、pptx、jpeg、raw、heif、tiff、gif、mp3、mp4、rar、zip、7z。
-        </div>
-      </template>
-    </el-upload>
-
-    <div class="file-list-box flex-row-start">
-      <div
-        class="file-out-box"
-        v-for="(item, index) in sendFileList"
-        :key="index"
-        @click.stop="previewFile(item, index)"
-      >
-        <div class="file-list-item flex-row-between">
-          <div class="flex-row-start file-list-item-left">
-            <el-image
-              class="file-list-item-icon"
-              :src="item.url"
-              :zoom-rate="1.2"
-              :initial-index="0"
-              fit="cover"
-              preview-teleported="true"
-              @error="handleImageError"
-              @load="handleImageLoad"
-              v-loading="submitLoading"
-              v-if="
-                getFileType(item.url) === 'jpg' ||
-                getFileType(item.url) === 'png' ||
-                getFileType(item.url) === 'bmp' ||
-                getFileType(item.url) === 'jpeg' ||
-                getFileType(item.url) === 'raw' ||
-                getFileType(item.url) === 'heif' ||
-                getFileType(item.url) === 'tiff' ||
-                getFileType(item.url) === 'gif'
-              "
-            >
-              <template #error>
-                <img src="./assets/other.svg" class="file-icon" />
-              </template>
-            </el-image>
-            <div v-else class="file-list-item-icon">
-              <img
-                src="./assets/pdf.svg"
-                v-if="getFileType(item.url) === 'pdf'"
-                class="file-icon"
-              />
-              <img
-                src="./assets/word.svg"
-                v-else-if="
-                  getFileType(item.url) === 'docx' ||
-                  getFileType(item.url) === 'doc'
-                "
-                class="file-icon"
-              />
-              <img
-                src="./assets/mp3.svg"
-                v-else-if="getFileType(item.url) === 'mp3'"
-                class="file-icon"
-              />
-              <img
-                src="./assets/mp4.svg"
-                v-else-if="getFileType(item.url) === 'mp4'"
-                class="file-icon"
-              />
-              <img
-                src="./assets/xls.svg"
-                v-else-if="
-                  getFileType(item.url) === 'xls' ||
-                  getFileType(item.url) === 'xlsx'
-                "
-                class="file-icon"
-              />
-              <img
-                src="./assets/ppt.svg"
-                v-else-if="
-                  getFileType(item.url) === 'ppt' ||
-                  getFileType(item.url) === 'pptx'
-                "
-                class="file-icon"
-              />
-              <img src="./assets/other.svg" v-else class="file-icon" />
-            </div>
-            <div
-              class="flex-column-around file-name-box"
-              style="align-items: flex-start"
-            >
-              <el-tooltip effect="dark" :content="item.fileName">
-                <div class="file-name">{{ item.fileName }}</div>
-              </el-tooltip>
-              <div class="file-size">{{ item.fileSize || "--" }}</div>
-            </div>
-          </div>
-          <div class="flex-column-around file-list-item-right">
-            <img
-              src="./assets/preview.svg"
-              alt=""
-              class="file-preview"
-              @click.stop="previewFile(item, index)"
-            />
-
-            <img
-              src="./assets/download.svg"
-              alt=""
-              class="file-download"
-              @click.stop="downloadFile(item)"
-              v-if="props.allowDownload"
-            />
-          </div>
-        </div>
-        <div
-          class="delete-box"
-          @click.stop="deleteUploadItem(item, index)"
-          v-if="props.formType != 'detail'"
-        >
-          <div class="table-delete">
-            <img
-              src="../../assets/table-delete/table-delete.svg"
-              alt="删除"
-              width="25"
-              height="25"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="notData"
-        v-if="
-          props.formType == 'detail' &&
-          !(
-            sendFileList &&
-            Array.isArray(sendFileList) &&
-            sendFileList.length > 0
-          )
-        "
-      >
-        暂无附件
-      </div>
-    </div>
-    <!-- 专门用来预览的组件 -->
-    <el-image
-      style="display: none"
-      ref="previewImgRef"
-      :src="perviewImg.url"
-      :preview-src-list="perviewImg.srcList"
-      preview-teleported="true"
-      id="previewImgId"
-      @close="handleClosePreview"
-    >
-    </el-image>
-    <!-- 预览mp3，mp4 -->
-    <PreviewMp ref="previewMpRef"></PreviewMp>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, watch, onMounted, PropType, nextTick } from "vue";
-import OSS from "ali-oss";
-import {
-  type UploadFile,
-  type UploadFiles,
-  type TabsPaneContext,
-  type UploadUserFile,
-  type UploadProps,
-  type ElMessageBox,
-  ElMessage,
-} from "element-plus";
-import moment from "moment";
-import axios from "axios";
-import { getFileType, ddWindowOpen } from "hrp-ui-base";
-import dd from "dingtalk-jsapi";
-import PreviewMp from "./modules/previewMp.vue";
-// getUploadFileMsg
-import FileUploadController from "hrp-ui-base/api/bms/file/FileUploadController";
-import StsTokenVO from "hrp-ui-base/api/bms/file/bo/StsTokenVO";
-import FileBaseInfo from "hrp-ui-base/api/bms/file/bo/FileBaseInfo";
-import FileUrlVO from "hrp-ui-base/api/bms/file/bo/FileUrlVO";
-import { downloadFile} from "hrp-ui-base";
-
-const props = defineProps({
-  // 选择了那些审批人 具体的人名
-  type: {
-    type: String as PropType<"oss" | "minio">,
-    default: "oss",
-    require: true,
-  },
-  // 页面id
-  pageId: {
-    type: String,
-    default: "",
-    require: true,
-  },
-  // formType 页面类型
-  formType: {
-    type: String as PropType<"add" | "edit" | "detail">,
-    default: "add",
-    require: true,
-  },
-  // 默认的文件列表
-  fileDetailList: {
-    type: Array as PropType<any[]>,
-    default: false,
-    require: false,
-  },
-  // 页面的loading，由外部控制内部的loading
-  loading: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  keyForReturn: {
-    type: Number,
-    require: true,
-    default: "",
-  },
-  limited: {
-    type: Number,
-    require: true,
-    default: 9,
-  },
-  // 是否允许下载附件
-  allowDownload: {
-    type: Boolean,
-    require: false,
-    default: true,
-  },
-});
-const emits = defineEmits(["getUploadIds", "getUploadInfo", "changeLoading"]);
-const token = localStorage.getItem("TOKEN");
-const uploadUrl =
-  window.location.origin + window.location.pathname + "api/bms/file/upload";
-const MAX_FILE_SIZE_MB = 50;
-const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
-const minioHeader = ref({ "Authorization-Token": token });
-const ossHeader = ref({
-  // 指定该Object被下载时的网页缓存行为。
-  "Cache-Control": "no-cache",
-  // 指定该Object被下载时的名称。
-  "Content-Disposition": "example.txt",
-  // 指定该Object被下载时的内容编码格式。
-  "Content-Encoding": "utf-8",
-  // 指定过期时间，单位为毫秒。
-  Expires: "1000",
-  // 指定Object的存储类型。
-  "x-oss-storage-class": "Standard",
-  // 指定Object标签，可同时设置多个标签。
-  "x-oss-tagging": "Tag1=1&Tag2=2",
-  // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
-  "x-oss-forbid-overwrite": "true",
-});
-const uploadFilesIds = ref<string[]>([]);
-const fileInfoList = ref<any[]>([]);
-
-const handleClosePreview = () => {
-  perviewImg.value.url = "";
-  perviewImg.value.srcList = [];
-};
-const submitLoading = ref<boolean>(false);
-// 上传附件
-const fileList = ref<UploadUserFile[]>([]);
-const fileName = ref<string>("");
-const beforeUploadOSS = async (e: any) => {
-  changeLoadingStatus(true);
-  const isFileSizeValid = e.size <= MAX_FILE_SIZE_BYTES;
-  if (!isFileSizeValid) {
-    changeLoadingStatus(false);
-    ElMessage.error(`上传文件大小不能超过 ${MAX_FILE_SIZE_MB}MB!`);
-    return false;
-  }
-  fileName.value = e.name;
-  // if (props.type === 'oss') {
-
-  //   await getOSSOption(e.name)
-  // }
-};
-
-/** oss 上传方法 */
-const uploadFileOSS = async (uploadMsg: any) => {
-  try {
-    console.log(uploadMsg);
-    const fileOBJ = uploadMsg.file;
-    FileUploadController.upload(fileOBJ, props.pageId)
-      .then((data) => {
-        if (data.code === 200 && data.res) {
-          sendFileList.value.push(data.res);
-          emits(
-            "getUploadIds",
-            sendFileList.value.map((item) => {
-              return item.fileId;
-            }),
-            props.keyForReturn
-          );
-          emits(
-            "getUploadInfo",
-            sendFileList.value.map((item) => {
-              return item;
-            }),
-            props.keyForReturn
-          );
-        } else {
-          ElMessage.error("数据发生错误，请重新上传!");
-        }
-      })
-      .catch((err) => {
-        ElMessage.error("数据发生错误，请重试!");
-      })
-      .finally(() => {
-        changeLoadingStatus(false);
-      });
-  } catch (err) {
-    console.debug(err);
-  }
-};
-const ossClient = ref();
-const handleImageLoad = () => {
-  changeLoadingStatus(false);
-};
-const handleImageError = () => {
-  changeLoadingStatus(false);
-};
-const handleExceed = (e: any) => {
-  ElMessage({
-    message: `最多上传${props.limited}个文件!`,
-    type: "error",
-  });
-};
-const sendFileList = ref<Array<FileBaseInfo>>([]);
-/** 删除 */
-const deleteUploadItem = (item: any, index: any) => {
-  sendFileList.value.splice(index, 1);
-  fileList.value = JSON.parse(JSON.stringify(sendFileList.value));
-  emits(
-    "getUploadIds",
-    sendFileList.value.map((item) => {
-      return item.fileId;
-    }),
-    props.keyForReturn
-  );
-  emits(
-    "getUploadInfo",
-    sendFileList.value.map((item) => {
-      return item;
-    }),
-    props.keyForReturn
-  );
-};
-watch(
-  () => {
-    return props.fileDetailList;
-  },
-  () => {
-    if (props.fileDetailList && Array.isArray(props.fileDetailList)) {
-      sendFileList.value = props.fileDetailList;
-      fileList.value = JSON.parse(JSON.stringify(sendFileList.value));
-    }
-  },
-  { deep: true, immediate: true }
-);
-
-/** 上传中 */
-const handleUploadProgress = () => {
-  emits("changeLoading", true);
-};
-/** 上传失败 */
-const handleUploadError = (err: any) => {
-  ElMessage({
-    message: "上传失败!",
-    type: "error",
-  });
-  changeLoadingStatus(false);
-};
-const changeLoadingStatus = (status: boolean) => {
-  emits("changeLoading", status);
-  submitLoading.value = status;
-};
-
-//清空图片列表
-const clearFileList = () => {
-  sendFileList.value = [];
-};
-
-/** 上传的方式 */
-onMounted(() => {
-  // if (!props.type) {
-  //   ElMessage.error('配置错误，无法确定上传方式')
-  // }
-});
-const ossName = ref<string>("");
-const stsToken = ref<StsTokenVO>(new StsTokenVO());
-
-/** 获取minio 上传地址 */
-const minioOption = ref<FileUrlVO>(new FileUrlVO());
-const getMinioUploadUrl = async (fileName: string) => {
-  await FileUploadController.getUploadUrl(props.pageId, fileName).then(
-    (data) => {
-      if (data.code === 200 && data.res) {
-        minioOption.value = data.res;
-      } else {
-        ElMessage.error("获取上传路径失败！");
-      }
-    }
-  );
-};
-/** minio 上传方法 */
-const uploadFileMinio = async (uploadMsg: any) => {
-  console.debug(uploadMsg);
-  if (minioOption.value) {
-    try {
-      const options = {
-        mime: "json",
-        headers: { "Content-Type": "text/plain" },
-      };
-      const data = uploadMsg.file;
-      // console.error(data)
-      let config = { "Content-Type": uploadMsg.file.type };
-      // // 分片上传。
-      axiosPost("put", minioOption.value.policyUrl, uploadMsg.file, config)
-        .then(function (res) {
-          setTimeout(() => {
-            /** 上传成功 ，去请求接口查询上传的内容*/
-            FileUploadController.checkFileUpload(
-              minioOption.value.fileId ? minioOption.value.fileId : ""
-            )
-              .then((data) => {
-                if (data.code == 200) {
-                  FileUploadController.getMinioFileUrl(
-                    minioOption.value.fileId ? minioOption.value.fileId : ""
-                  )
-                    .then((data) => {
-                      if (data.code === 200 && data.res) {
-                        sendFileList.value.push(data.res);
-                        ElMessage.success("上传成功！");
-                        emits(
-                          "getUploadIds",
-                          sendFileList.value.map((item) => {
-                            return item.fileId;
-                          }),
-                          props.keyForReturn
-                        );
-                        emits(
-                          "getUploadInfo",
-                          sendFileList.value.map((item) => {
-                            return item;
-                          }),
-                          props.keyForReturn
-                        );
-                      }
-                    })
-                    .finally(() => {
-                      changeLoadingStatus(false);
-                    });
-                } else {
-                  ElMessage.error("上传失败，请重新上传!");
-                  changeLoadingStatus(false);
-                }
-              })
-              .catch(() => {
-                ElMessage.error("上传失败，请重新上传!");
-                changeLoadingStatus(false);
-              });
-          }, 1000);
-        })
-        .catch(() => {
-          ElMessage.error("上传失败，请重新上传!");
-          changeLoadingStatus(false);
-        });
-    } catch (err) {
-      console.debug(err);
-    }
-  } else {
-    ElMessage.error("数据发生错误，请重新上传!");
-  }
-};
-function axiosPost(method: string, url: string, data: any, config: any) {
-  let result = axios({
-    method: method,
-    url: url,
-    data: data,
-    headers: config,
-  })
-    .then((resp) => {
-      return resp;
-    })
-    .catch((error) => {
-      return "exception=" + error;
-    });
-  return result;
-}
-/** 预览文件 */
-const previewFile = async (item: FileBaseInfo, index: number) => {
-  if (
-    getFileType(item.url) === "jpg" ||
-    getFileType(item.url) === "png" ||
-    getFileType(item.url) === "bmp" ||
-    getFileType(item.url) === "jpeg" ||
-    getFileType(item.url) === "raw" ||
-    getFileType(item.url) === "heif" ||
-    getFileType(item.url) === "tiff" ||
-    getFileType(item.url) === "gif"
-  ) {
-    // 图片的情况
-    perviewImg.value.url = item.url;
-    perviewImg.value.srcList = [item.url];
-    nextTick(() => {
-      previewImgRef.value?.showPreview();
-    });
-  } else if (getFileType(item.url) === "mp3") {
-    // mp3的情况
-    previewMpRef.value?.open("mp3", item);
-  } else if (getFileType(item.url) === "mp4") {
-    // mp4的情况
-    previewMpRef.value?.open("mp4", item);
-  } else if (
-    getFileType(item.url) === "zip" ||
-    getFileType(item.url) === "7z" ||
-    getFileType(item.url) === "rar"
-  ) {
-    downloadFile(item);
-  } else {
-    try {
-      let currentUserConfig = sessionStorage.getItem("userConfig")
-        ? JSON.parse(sessionStorage.getItem("userConfig") as string)
-        : null;
-      if (currentUserConfig && currentUserConfig.fileUploadType === "oss") {
-        // 文档的情况
-        await FileUploadController.getFilePreview(item.fileId).then((data) => {
-          if (data.code == 200 && data.res) {
-            ddWindowOpen(
-              window.location.origin +
-                window.location.pathname +
-                "ay-doc/index.html?url=" +
-                data.res.webOfficeUrl +
-                "&token=" +
-                data.res.accessToken
-            );
-          } else {
-            ElMessage.error("预览失败，请稍后再试!");
-          }
-        });
-      } else if (
-        currentUserConfig &&
-        currentUserConfig.fileUploadType === "minio"
-      ) {
-        // minio 的预览 需要第三方工具，暂时没有，先定义成下载
-        FileUploadController.getMinioFilePreview(item.fileId).then((data) => {
-          if (data.code == 200 && data.res) {
-            window.open(
-              window.location.origin +
-                window.location.pathname +
-                "preview/onlinePreview?url=" +
-                data.res
-            );
-          }
-        });
-      }
-    } catch (error) {
-      alert("读取本地用户信息失败！");
-    }
-  }
-};
-// Base64编码（支持中文）
-function base64Encode(str: string) {
-  return btoa(
-    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) =>
-      String.fromCharCode("0x" + p1)
-    )
-  );
-}
-
-
-/** 专门用来预览的组件 */
-const previewImgRef = ref();
-const perviewImg = ref<{ url: string; srcList: string[] }>({
-  url: "",
-  srcList: [],
-});
-/** mp3,mp4 预览 */
-const previewMpRef = ref();
-defineExpose({
-  clearFileList,
-  sendFileList,
-});
-</script>
-
-<style lang="scss">
-@use "../../styles/flex-common.scss";
-
-.file-uploader {
-  // margin-top: 30px;
-
-  .imgSize {
-    width: 99px;
-
-    > span {
-      cursor: pointer;
-      position: absolute;
-      color: black;
-      font-size: 20px;
-      right: -69px;
-      height: 30px;
-      top: -12px;
-      width: 37px;
-    }
-
-    el-image {
-      width: 100%;
-    }
-  }
-
-  .el-upload__tip {
-    font-size: var(--font-size-body);
-    font-weight: 400;
-    text-align: left;
-    color: var(--custom-theme-text-3);
-  }
-}
-
-.upload-attachments {
-  .notData {
-    font-size: var(--font-size-body);
-  }
-
-  .el-upload-list {
-    position: relative;
-    text-align: center;
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-
-    .el-upload-list__item {
-      margin-left: 5px;
-      flex-direction: column;
-      width: 17%;
-    }
-  }
-
-  .file-uploader {
-    // margin-top: 30px;
-
-    .imgSize {
-      width: 99px;
-
-      > span {
-        cursor: pointer;
-        position: absolute;
-        color: black;
-        font-size: 20px;
-        right: -69px;
-        height: 30px;
-        top: -12px;
-        width: 37px;
-      }
-
-      el-image {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.preview-img {
-  img {
-    width: 100%;
-  }
-}
-
-.exceed-limit {
-  border-color: red !important;
-}
-
-.error-message {
-  color: red;
-}
-
-.file-list-box {
-  margin-top: 10px;
-  width: 100%;
-  height: auto;
-
-  .file-out-box {
-    cursor: pointer;
-    border: 1px solid var(--custom-theme-border-4);
-    border-radius: 6px 6px 6px 6px;
-    background: var(--custom-theme-fill-7);
-    padding: 24px 8px 8px;
-    width: 272px;
-    height: 80px;
-    margin-right: 16px;
-    margin-bottom: 16px;
-    position: relative;
-  }
-
-  .file-list-item {
-    width: 256px;
-    height: 48px;
-
-    .file-list-item-left {
-      width: calc(100% - 20px);
-      height: 100%;
-
-      .file-list-item-icon {
-        width: 41px;
-        height: 41px;
-
-        .file-icon {
-          width: 41px;
-        }
-      }
-
-      .file-name-box {
-        margin-left: 8px;
-        height: 100%;
-        max-width: calc(100% - 50px);
-
-        .file-name {
-          font-weight: 400;
-          font-size: 12px;
-          color: var(--custom-theme-text-1);
-          line-height: 12x;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-          word-break: break-all;
-        }
-
-        .file-size {
-          font-weight: 400;
-          font-size: 12px;
-          color: var(--custom-theme-text-3);
-          line-height: 11px;
-        }
-      }
-    }
-
-    .file-list-item-right {
-      height: 100%;
-
-      .file-preview {
-        width: 16px;
-        cursor: pointer;
-      }
-
-      .file-download {
-        width: 16px;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .delete-box {
-    position: absolute;
-    right: -7px;
-    top: -7px;
-    overflow: hidden;
-    font-size: 16px;
-    cursor: pointer;
-  }
-}
-</style>
+<!-- 
+ * @description: 附件上传组件
+ * @fileName: annex-upload-component.vue 
+ * @author: huatuo 
+!-->
+<template>
+  <div class="upload-attachments">
+    <!-- oss 上传 -->
+    <el-upload
+      class="fzile-uploader"
+      ref="upload"
+      v-model:file-list="fileList"
+      :auto-upload="true"
+      accept=".docx,.doc,.xls,.xlsx,.jpg,.pdf,.png,.bmp,.ppt,.pptx,.jpeg,.tiff,.raw,.heif,.gif,.mp3,.mp4,.rar,.zip,.7z,.wps,.DOCX,.DOC,.XLS,.XLSX,.JPG,.PDF,.PNG,.BMP,.PPT,.PPTX,.JPEG,.TIFF,.RAW,.HEIF,.GIF,.MP3,.MP4,.dcm,.DCM,.RAR,.ZIP,.7Z,.WPS"
+      :before-upload="beforeUploadOSS"
+      :action="uploadUrl"
+      :show-file-list="false"
+      :data="{ pageId: props.pageId }"
+      list-type="picture"
+      :on-exceed="handleExceed"
+      :limit="props.limited"
+      v-if="props.formType != 'detail'"
+      :headers="ossHeader"
+      size="large"
+      :disabled="props.loading"
+      :http-request="uploadFileOSS"
+      multiple
+    >
+      <el-button
+        type="primary"
+        text
+        bg
+        icon="Upload"
+        style="font-size: var(--font-size-body)"
+        size="large"
+        >上传附件</el-button
+      >
+      <template #tip>
+        <div class="el-upload__tip">
+          附件上限数量{{ props.limited }}个，单次最多选择{{
+            props.limited
+          }}个，单文件大小不超过{{ MAX_FILE_SIZE_MB }}MB
+          且附件上传格式仅限docx、doc、wps、xls、xlsx、jpg、pdf、png、bmp、ppt、pptx、jpeg、raw、heif、tiff、gif、mp3、mp4、rar、zip、7z。
+        </div>
+      </template>
+    </el-upload>
+
+    <div class="file-list-box flex-row-start">
+      <div
+        class="file-out-box"
+        v-for="(item, index) in sendFileList"
+        :key="index"
+        @click.stop="previewFile(item, index)"
+      >
+        <div class="file-list-item flex-row-between">
+          <div class="flex-row-start file-list-item-left">
+            <el-image
+              class="file-list-item-icon"
+              :src="item.url"
+              :zoom-rate="1.2"
+              :initial-index="0"
+              fit="cover"
+              preview-teleported="true"
+              @error="handleImageError"
+              @load="handleImageLoad"
+              v-loading="submitLoading"
+              v-if="
+                getFileType(item.url) === 'jpg' ||
+                getFileType(item.url) === 'png' ||
+                getFileType(item.url) === 'bmp' ||
+                getFileType(item.url) === 'jpeg' ||
+                getFileType(item.url) === 'raw' ||
+                getFileType(item.url) === 'heif' ||
+                getFileType(item.url) === 'tiff' ||
+                getFileType(item.url) === 'gif'
+              "
+            >
+              <template #error>
+                <img src="./assets/other.svg" class="file-icon" />
+              </template>
+            </el-image>
+            <div v-else class="file-list-item-icon">
+              <img
+                src="./assets/pdf.svg"
+                v-if="getFileType(item.url) === 'pdf'"
+                class="file-icon"
+              />
+              <img
+                src="./assets/word.svg"
+                v-else-if="
+                  getFileType(item.url) === 'docx' ||
+                  getFileType(item.url) === 'doc'
+                "
+                class="file-icon"
+              />
+              <img
+                src="./assets/mp3.svg"
+                v-else-if="getFileType(item.url) === 'mp3'"
+                class="file-icon"
+              />
+              <img
+                src="./assets/mp4.svg"
+                v-else-if="getFileType(item.url) === 'mp4'"
+                class="file-icon"
+              />
+              <img
+                src="./assets/xls.svg"
+                v-else-if="
+                  getFileType(item.url) === 'xls' ||
+                  getFileType(item.url) === 'xlsx'
+                "
+                class="file-icon"
+              />
+              <img
+                src="./assets/ppt.svg"
+                v-else-if="
+                  getFileType(item.url) === 'ppt' ||
+                  getFileType(item.url) === 'pptx'
+                "
+                class="file-icon"
+              />
+              <img src="./assets/other.svg" v-else class="file-icon" />
+            </div>
+            <div
+              class="flex-column-around file-name-box"
+              style="align-items: flex-start"
+            >
+              <el-tooltip effect="dark" :content="item.fileName">
+                <div class="file-name">{{ item.fileName }}</div>
+              </el-tooltip>
+              <div class="file-size">{{ item.fileSize || "--" }}</div>
+            </div>
+          </div>
+          <div class="flex-column-around file-list-item-right">
+            <img
+              src="./assets/preview.svg"
+              alt=""
+              class="file-preview"
+              @click.stop="previewFile(item, index)"
+            />
+
+            <img
+              src="./assets/download.svg"
+              alt=""
+              class="file-download"
+              @click.stop="downloadFile(item)"
+              v-if="props.allowDownload"
+            />
+          </div>
+        </div>
+        <div
+          class="delete-box"
+          @click.stop="deleteUploadItem(item, index)"
+          v-if="props.formType != 'detail'"
+        >
+          <div class="table-delete">
+            <img
+              src="../../assets/table-delete/table-delete.svg"
+              alt="删除"
+              width="25"
+              height="25"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="notData"
+        v-if="
+          props.formType == 'detail' &&
+          !(
+            sendFileList &&
+            Array.isArray(sendFileList) &&
+            sendFileList.length > 0
+          )
+        "
+      >
+        暂无附件
+      </div>
+    </div>
+    <!-- 专门用来预览的组件 -->
+    <el-image
+      style="display: none"
+      ref="previewImgRef"
+      :src="perviewImg.url"
+      :preview-src-list="perviewImg.srcList"
+      preview-teleported="true"
+      id="previewImgId"
+      @close="handleClosePreview"
+    >
+    </el-image>
+    <!-- 预览mp3，mp4 -->
+    <PreviewMp ref="previewMpRef"></PreviewMp>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted, PropType, nextTick } from "vue";
+import OSS from "ali-oss";
+import {
+  type UploadFile,
+  type UploadFiles,
+  type TabsPaneContext,
+  type UploadUserFile,
+  type UploadProps,
+  type ElMessageBox,
+  ElMessage,
+} from "element-plus";
+import moment from "moment";
+import axios from "axios";
+import { getFileType, ddWindowOpen } from "hrp-ui-base";
+import dd from "dingtalk-jsapi";
+import PreviewMp from "./modules/previewMp.vue";
+// getUploadFileMsg
+import FileUploadController from "hrp-ui-base/api/bms/file/FileUploadController";
+import StsTokenVO from "hrp-ui-base/api/bms/file/bo/StsTokenVO";
+import FileBaseInfo from "hrp-ui-base/api/bms/file/bo/FileBaseInfo";
+import FileUrlVO from "hrp-ui-base/api/bms/file/bo/FileUrlVO";
+import { downloadFile} from "hrp-ui-base";
+
+const props = defineProps({
+  // 选择了那些审批人 具体的人名
+  type: {
+    type: String as PropType<"oss" | "minio">,
+    default: "oss",
+    require: true,
+  },
+  // 页面id
+  pageId: {
+    type: String,
+    default: "",
+    require: true,
+  },
+  // formType 页面类型
+  formType: {
+    type: String as PropType<"add" | "edit" | "detail">,
+    default: "add",
+    require: true,
+  },
+  // 默认的文件列表
+  fileDetailList: {
+    type: Array as PropType<any[]>,
+    default: false,
+    require: false,
+  },
+  // 页面的loading，由外部控制内部的loading
+  loading: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  keyForReturn: {
+    type: Number,
+    require: true,
+    default: "",
+  },
+  limited: {
+    type: Number,
+    require: true,
+    default: 9,
+  },
+  // 是否允许下载附件
+  allowDownload: {
+    type: Boolean,
+    require: false,
+    default: true,
+  },
+});
+const emits = defineEmits(["getUploadIds", "getUploadInfo", "changeLoading"]);
+const token = localStorage.getItem("TOKEN");
+const uploadUrl =
+  window.location.origin + window.location.pathname + "api/bms/file/upload";
+const MAX_FILE_SIZE_MB = 50;
+const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+const minioHeader = ref({ "Authorization-Token": token });
+const ossHeader = ref({
+  // 指定该Object被下载时的网页缓存行为。
+  "Cache-Control": "no-cache",
+  // 指定该Object被下载时的名称。
+  "Content-Disposition": "example.txt",
+  // 指定该Object被下载时的内容编码格式。
+  "Content-Encoding": "utf-8",
+  // 指定过期时间，单位为毫秒。
+  Expires: "1000",
+  // 指定Object的存储类型。
+  "x-oss-storage-class": "Standard",
+  // 指定Object标签，可同时设置多个标签。
+  "x-oss-tagging": "Tag1=1&Tag2=2",
+  // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
+  "x-oss-forbid-overwrite": "true",
+});
+const uploadFilesIds = ref<string[]>([]);
+const fileInfoList = ref<any[]>([]);
+
+const handleClosePreview = () => {
+  perviewImg.value.url = "";
+  perviewImg.value.srcList = [];
+};
+const submitLoading = ref<boolean>(false);
+// 上传附件
+const fileList = ref<UploadUserFile[]>([]);
+const fileName = ref<string>("");
+const beforeUploadOSS = async (e: any) => {
+  changeLoadingStatus(true);
+  const isFileSizeValid = e.size <= MAX_FILE_SIZE_BYTES;
+  if (!isFileSizeValid) {
+    changeLoadingStatus(false);
+    ElMessage.error(`上传文件大小不能超过 ${MAX_FILE_SIZE_MB}MB!`);
+    return false;
+  }
+  fileName.value = e.name;
+  // if (props.type === 'oss') {
+
+  //   await getOSSOption(e.name)
+  // }
+};
+
+/** oss 上传方法 */
+const uploadFileOSS = async (uploadMsg: any) => {
+  try {
+    console.log(uploadMsg);
+    const fileOBJ = uploadMsg.file;
+    FileUploadController.upload(fileOBJ, props.pageId)
+      .then((data) => {
+        if (data.code === 200 && data.res) {
+          sendFileList.value.push(data.res);
+          emits(
+            "getUploadIds",
+            sendFileList.value.map((item) => {
+              return item.fileId;
+            }),
+            props.keyForReturn
+          );
+          emits(
+            "getUploadInfo",
+            sendFileList.value.map((item) => {
+              return item;
+            }),
+            props.keyForReturn
+          );
+        } else {
+          ElMessage.error("数据发生错误，请重新上传!");
+        }
+      })
+      .catch((err) => {
+        ElMessage.error("数据发生错误，请重试!");
+      })
+      .finally(() => {
+        changeLoadingStatus(false);
+      });
+  } catch (err) {
+    console.debug(err);
+  }
+};
+const ossClient = ref();
+const handleImageLoad = () => {
+  changeLoadingStatus(false);
+};
+const handleImageError = () => {
+  changeLoadingStatus(false);
+};
+const handleExceed = (e: any) => {
+  ElMessage({
+    message: `最多上传${props.limited}个文件!`,
+    type: "error",
+  });
+};
+const sendFileList = ref<Array<FileBaseInfo>>([]);
+/** 删除 */
+const deleteUploadItem = (item: any, index: any) => {
+  sendFileList.value.splice(index, 1);
+  fileList.value = JSON.parse(JSON.stringify(sendFileList.value));
+  emits(
+    "getUploadIds",
+    sendFileList.value.map((item) => {
+      return item.fileId;
+    }),
+    props.keyForReturn
+  );
+  emits(
+    "getUploadInfo",
+    sendFileList.value.map((item) => {
+      return item;
+    }),
+    props.keyForReturn
+  );
+};
+watch(
+  () => {
+    return props.fileDetailList;
+  },
+  () => {
+    if (props.fileDetailList && Array.isArray(props.fileDetailList)) {
+      sendFileList.value = props.fileDetailList;
+      fileList.value = JSON.parse(JSON.stringify(sendFileList.value));
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+/** 上传中 */
+const handleUploadProgress = () => {
+  emits("changeLoading", true);
+};
+/** 上传失败 */
+const handleUploadError = (err: any) => {
+  ElMessage({
+    message: "上传失败!",
+    type: "error",
+  });
+  changeLoadingStatus(false);
+};
+const changeLoadingStatus = (status: boolean) => {
+  emits("changeLoading", status);
+  submitLoading.value = status;
+};
+
+//清空图片列表
+const clearFileList = () => {
+  sendFileList.value = [];
+};
+
+/** 上传的方式 */
+onMounted(() => {
+  // if (!props.type) {
+  //   ElMessage.error('配置错误，无法确定上传方式')
+  // }
+});
+const ossName = ref<string>("");
+const stsToken = ref<StsTokenVO>(new StsTokenVO());
+
+/** 获取minio 上传地址 */
+const minioOption = ref<FileUrlVO>(new FileUrlVO());
+const getMinioUploadUrl = async (fileName: string) => {
+  await FileUploadController.getUploadUrl(props.pageId, fileName).then(
+    (data) => {
+      if (data.code === 200 && data.res) {
+        minioOption.value = data.res;
+      } else {
+        ElMessage.error("获取上传路径失败！");
+      }
+    }
+  );
+};
+/** minio 上传方法 */
+const uploadFileMinio = async (uploadMsg: any) => {
+  console.debug(uploadMsg);
+  if (minioOption.value) {
+    try {
+      const options = {
+        mime: "json",
+        headers: { "Content-Type": "text/plain" },
+      };
+      const data = uploadMsg.file;
+      // console.error(data)
+      let config = { "Content-Type": uploadMsg.file.type };
+      // // 分片上传。
+      axiosPost("put", minioOption.value.policyUrl, uploadMsg.file, config)
+        .then(function (res) {
+          setTimeout(() => {
+            /** 上传成功 ，去请求接口查询上传的内容*/
+            FileUploadController.checkFileUpload(
+              minioOption.value.fileId ? minioOption.value.fileId : ""
+            )
+              .then((data) => {
+                if (data.code == 200) {
+                  FileUploadController.getMinioFileUrl(
+                    minioOption.value.fileId ? minioOption.value.fileId : ""
+                  )
+                    .then((data) => {
+                      if (data.code === 200 && data.res) {
+                        sendFileList.value.push(data.res);
+                        ElMessage.success("上传成功！");
+                        emits(
+                          "getUploadIds",
+                          sendFileList.value.map((item) => {
+                            return item.fileId;
+                          }),
+                          props.keyForReturn
+                        );
+                        emits(
+                          "getUploadInfo",
+                          sendFileList.value.map((item) => {
+                            return item;
+                          }),
+                          props.keyForReturn
+                        );
+                      }
+                    })
+                    .finally(() => {
+                      changeLoadingStatus(false);
+                    });
+                } else {
+                  ElMessage.error("上传失败，请重新上传!");
+                  changeLoadingStatus(false);
+                }
+              })
+              .catch(() => {
+                ElMessage.error("上传失败，请重新上传!");
+                changeLoadingStatus(false);
+              });
+          }, 1000);
+        })
+        .catch(() => {
+          ElMessage.error("上传失败，请重新上传!");
+          changeLoadingStatus(false);
+        });
+    } catch (err) {
+      console.debug(err);
+    }
+  } else {
+    ElMessage.error("数据发生错误，请重新上传!");
+  }
+};
+function axiosPost(method: string, url: string, data: any, config: any) {
+  let result = axios({
+    method: method,
+    url: url,
+    data: data,
+    headers: config,
+  })
+    .then((resp) => {
+      return resp;
+    })
+    .catch((error) => {
+      return "exception=" + error;
+    });
+  return result;
+}
+/** 预览文件 */
+const previewFile = async (item: FileBaseInfo, index: number) => {
+  if (
+    getFileType(item.url) === "jpg" ||
+    getFileType(item.url) === "png" ||
+    getFileType(item.url) === "bmp" ||
+    getFileType(item.url) === "jpeg" ||
+    getFileType(item.url) === "raw" ||
+    getFileType(item.url) === "heif" ||
+    getFileType(item.url) === "tiff" ||
+    getFileType(item.url) === "gif"
+  ) {
+    // 图片的情况
+    perviewImg.value.url = item.url;
+    perviewImg.value.srcList = [item.url];
+    nextTick(() => {
+      previewImgRef.value?.showPreview();
+    });
+  } else if (getFileType(item.url) === "mp3") {
+    // mp3的情况
+    previewMpRef.value?.open("mp3", item);
+  } else if (getFileType(item.url) === "mp4") {
+    // mp4的情况
+    previewMpRef.value?.open("mp4", item);
+  } else if (
+    getFileType(item.url) === "zip" ||
+    getFileType(item.url) === "7z" ||
+    getFileType(item.url) === "rar"
+  ) {
+    downloadFile(item);
+  } else {
+    try {
+      let currentUserConfig = sessionStorage.getItem("userConfig")
+        ? JSON.parse(sessionStorage.getItem("userConfig") as string)
+        : null;
+      if (currentUserConfig && currentUserConfig.fileUploadType === "oss") {
+        // 文档的情况
+        await FileUploadController.getFilePreview(item.fileId).then((data) => {
+          if (data.code == 200 && data.res) {
+            ddWindowOpen(
+              window.location.origin +
+                window.location.pathname +
+                "ay-doc/index.html?url=" +
+                data.res.webOfficeUrl +
+                "&token=" +
+                data.res.accessToken
+            );
+          } else {
+            ElMessage.error("预览失败，请稍后再试!");
+          }
+        });
+      } else if (
+        currentUserConfig &&
+        currentUserConfig.fileUploadType === "minio"
+      ) {
+        // minio 的预览 需要第三方工具，暂时没有，先定义成下载
+        FileUploadController.getMinioFilePreview(item.fileId).then((data) => {
+          if (data.code == 200 && data.res) {
+            window.open(
+              window.location.origin +
+                window.location.pathname +
+                "preview/onlinePreview?url=" +
+                data.res
+            );
+          }
+        });
+      }
+    } catch (error) {
+      alert("读取本地用户信息失败！");
+    }
+  }
+};
+// Base64编码（支持中文）
+function base64Encode(str: string) {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) =>
+      String.fromCharCode("0x" + p1)
+    )
+  );
+}
+
+
+/** 专门用来预览的组件 */
+const previewImgRef = ref();
+const perviewImg = ref<{ url: string; srcList: string[] }>({
+  url: "",
+  srcList: [],
+});
+/** mp3,mp4 预览 */
+const previewMpRef = ref();
+defineExpose({
+  clearFileList,
+  sendFileList,
+});
+</script>
+
+<style lang="scss">
+@use "../../styles/flex-common.scss";
+
+.file-uploader {
+  // margin-top: 30px;
+
+  .imgSize {
+    width: 99px;
+
+    > span {
+      cursor: pointer;
+      position: absolute;
+      color: black;
+      font-size: 20px;
+      right: -69px;
+      height: 30px;
+      top: -12px;
+      width: 37px;
+    }
+
+    el-image {
+      width: 100%;
+    }
+  }
+
+  .el-upload__tip {
+    font-size: var(--font-size-body);
+    font-weight: 400;
+    text-align: left;
+    color: var(--custom-theme-text-3);
+  }
+}
+
+.upload-attachments {
+  .notData {
+    font-size: var(--font-size-body);
+  }
+
+  .el-upload-list {
+    position: relative;
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+
+    .el-upload-list__item {
+      margin-left: 5px;
+      flex-direction: column;
+      width: 17%;
+    }
+  }
+
+  .file-uploader {
+    // margin-top: 30px;
+
+    .imgSize {
+      width: 99px;
+
+      > span {
+        cursor: pointer;
+        position: absolute;
+        color: black;
+        font-size: 20px;
+        right: -69px;
+        height: 30px;
+        top: -12px;
+        width: 37px;
+      }
+
+      el-image {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.preview-img {
+  img {
+    width: 100%;
+  }
+}
+
+.exceed-limit {
+  border-color: red !important;
+}
+
+.error-message {
+  color: red;
+}
+
+.file-list-box {
+  margin-top: 10px;
+  width: 100%;
+  height: auto;
+
+  .file-out-box {
+    cursor: pointer;
+    border: 1px solid var(--custom-theme-border-4);
+    border-radius: 6px 6px 6px 6px;
+    background: var(--custom-theme-fill-7);
+    padding: 24px 8px 8px;
+    width: 272px;
+    height: 80px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    position: relative;
+  }
+
+  .file-list-item {
+    width: 256px;
+    height: 48px;
+
+    .file-list-item-left {
+      width: calc(100% - 20px);
+      height: 100%;
+
+      .file-list-item-icon {
+        width: 41px;
+        height: 41px;
+
+        .file-icon {
+          width: 41px;
+        }
+      }
+
+      .file-name-box {
+        margin-left: 8px;
+        height: 100%;
+        max-width: calc(100% - 50px);
+
+        .file-name {
+          font-weight: 400;
+          font-size: 12px;
+          color: var(--custom-theme-text-1);
+          line-height: 12x;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          word-break: break-all;
+        }
+
+        .file-size {
+          font-weight: 400;
+          font-size: 12px;
+          color: var(--custom-theme-text-3);
+          line-height: 11px;
+        }
+      }
+    }
+
+    .file-list-item-right {
+      height: 100%;
+
+      .file-preview {
+        width: 16px;
+        cursor: pointer;
+      }
+
+      .file-download {
+        width: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .delete-box {
+    position: absolute;
+    right: -7px;
+    top: -7px;
+    overflow: hidden;
+    font-size: 16px;
+    cursor: pointer;
+  }
+}
+</style>