hrp-ui-base 1.4.7 → 1.4.8

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

@@ -1,609 +1,609 @@
-<!-- 
- * @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=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
-      :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 }}个，单文件大小不超过20MB
-          且附件上传格式仅限jpg、png、jpeg。
-        </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">
-        <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-src-list="[item.url]" 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="previewFile(item, index)" />
-
-            <img src="./assets/download.svg" alt="" class="file-download" @click="downloadFile(item)">
-          </div>
-
-        </div>
-        <div class="delete-box" @click="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 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 dd from "dingtalk-jsapi";
-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
-  }
-}
-)
-const emits = defineEmits(['getUploadIds', 'getUploadInfo', 'changeLoading'])
-const token = localStorage.getItem("TOKEN");
-const uploadUrl = window.location.origin + window.location.pathname + "api/bms/file/upload";
-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 is20M = e.size / 1024 / 1024 < 20;
-  if (!is20M) {
-    changeLoadingStatus(false)
-    ElMessage.error("上传文件大小不能超过 20MB!");
-    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 (props.type === '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 (props.type === '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);
-        }
-      })
-    }
-  }
-
-}
-// 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 {
-    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=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
+      :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 }}个，单文件大小不超过20MB
+          且附件上传格式仅限jpg、png、jpeg。
+        </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">
+        <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-src-list="[item.url]" 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="previewFile(item, index)" />
+
+            <img src="./assets/download.svg" alt="" class="file-download" @click="downloadFile(item)">
+          </div>
+
+        </div>
+        <div class="delete-box" @click="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 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 dd from "dingtalk-jsapi";
+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
+  }
+}
+)
+const emits = defineEmits(['getUploadIds', 'getUploadInfo', 'changeLoading'])
+const token = localStorage.getItem("TOKEN");
+const uploadUrl = window.location.origin + window.location.pathname + "api/bms/file/upload";
+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 is20M = e.size / 1024 / 1024 < 20;
+  if (!is20M) {
+    changeLoadingStatus(false)
+    ElMessage.error("上传文件大小不能超过 20MB!");
+    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 (props.type === '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 (props.type === '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);
+        }
+      })
+    }
+  }
+
+}
+// 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 {
+    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>