adtec-core-package 2.8.1 → 2.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "private": false,
   "type": "module",
   "scripts": {

package/src/api/DocumentApi.ts

@@ -23,5 +23,8 @@ export default {
   },
   fileStatusConfirmation(ids: string[]): Promise<ISysUploadFiles[]> {
     return request.post(basePath + 'fileStatusConfirmation', ids)
+  },
+  delSysUploadFiles(ids: string[]): Promise<Record<string, string>> {
+    return request.post(basePath + 'delSysUploadFiles', ids)
   }
 }

package/src/components/upload/CustomElUpload.vue

@@ -0,0 +1,469 @@
+<!--创建人 丁盼-->
+<!--说明: 文档上传组件-->
+<!--创建时间: 2024/12/2 下午1:59-->
+<!--修改时间: 2024/12/2 下午1:59-->
+<template>
+  <div v-if="!isEdit">
+    <el-auto-tool-tip v-if="uploadFilesList?.length">
+      <template #tooltipContent>
+        <div style="display:flex;flex-direction:column">
+              <span
+                v-for="item in uploadFilesList"
+                :key="item.id"
+                style="margin: 0 2px"
+              >{{ item.name }}
+              </span>
+        </div>
+      </template>
+      <template #content>
+        <div style="display:flex;flex-direction:column">
+          <div v-for="item in uploadFilesList" :key="item.id"
+               class="file-item"
+               style="display:flex; align-items:center;overflow: hidden">
+            <el-icons :model-value="getIcon(item.name)" style="margin-right: 5px"></el-icons>
+            <span class="link-name" @click="fileView(item.id)">{{ item.name }}</span>
+          </div>
+        </div>
+      </template>
+    </el-auto-tool-tip>
+    <div style="text-align: center;color: var(--el-disabled-text-color)" v-else>
+      暂无附件
+    </div>
+  </div>
+  <el-upload
+    v-else
+    ref="ref_upload"
+    :file-list="uploadFilesList"
+    @success="success"
+    @remove="remove"
+    @preview="preview"
+    :auto-upload="autoUpload"
+    @error="error"
+    v-loading="loading"
+    @exceed="exceed"
+    @progress="progress"
+    :before-upload="beforeUpload"
+    drag
+    :accept="getAccept"
+    :action="'/api/doc/uploadFile/' + business + '/' + businessId + '/' + association"
+    multiple
+    :limit="limit"
+    :headers="uploadHeaders"
+  >
+    <el-icon class="el-icon--upload">
+      <upload-filled />
+    </el-icon>
+    <div class="el-upload__text">拖动文件或<em>点击上传</em></div>
+    <div class="el-upload__tip">最大上传文件大小{{ size }}MB</div>
+    <template #file="{ file }">
+      <el-flex
+        class="file-class"
+        @mousemove="mousemove(file.name)"
+        @mouseout="mouseout"
+        @click="preview(file)"
+        height="20px"
+        :width="itemWidth"
+      >
+        <el-flex align="center" justify="flex-start" style="overflow: hidden">
+          <el-tooltip class="box-item" :content="file.name" placement="top">
+            <el-text truncated style="cursor: pointer">
+              <el-icons :model-value="getIcon(file.name)" style="margin-right: 5px"></el-icons>
+              {{ file.name }}
+            </el-text>
+          </el-tooltip>
+        </el-flex>
+        <el-flex align="center" justify="flex-end" width="50px">
+          <el-text v-if="!file?.businessId && file.percentage !== 100"
+          >{{ file.percentage }}%
+          </el-text>
+          <el-icons
+            v-if="file?.businessId || file.percentage === 100"
+            @click.prevent.stop="fileClick(file)"
+            :model-value="file.name === hoverfileName ? 'adtec-close' : 'adtec-success'"
+            style="color: var(--el-color-success); font-size: 14px"
+            :style="{
+              color:
+                file.name === hoverfileName ? 'var(--el-color-danger)' : 'var(--el-color-success)',
+            }"
+          ></el-icons>
+        </el-flex>
+      </el-flex>
+    </template>
+  </el-upload>
+</template>
+
+<script setup lang="ts">
+import { UploadFilled } from '@element-plus/icons-vue'
+import { computed, onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox, type UploadFile, type UploadFiles, type UploadUserFile } from 'element-plus'
+import type { ISysUploadFiles } from '../../interface/ISysUploadFiles'
+//@ts-ignore
+import useFileView from '../../hooks/useFileView.ts'
+import documentApi from '../../api/DocumentApi.ts'
+import frameworkUtils from '../../utils/FrameworkUtils.ts'
+import { userInfoStore } from '../../stores/userInfoStore'
+
+const { fileView: fileView } = useFileView()
+const uploadHeaders = ref({
+  Authorization: ''
+})
+const emit = defineEmits(['success'])
+const userInfo = userInfoStore()
+const ref_upload = ref()
+const deleteFiles = ref<ISysUploadFiles[]>([])
+const hoverfileName = ref('')
+const props = defineProps({
+  /**
+   * @description 上传文件数量
+   * @default 1
+   */
+  limit: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * @description 纵向排列
+   * @default false
+   */
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 上传文件类型
+   * @default ''
+   * @type {'images'|'document'|'txt'|'pdf'|'word'|'excel'|'ppt'}
+   */
+  accept: {
+    type: String,
+    default: ''
+  },
+  /**
+   * @description 业务类型
+   * @default 'default'
+   */
+  business: {
+    type: String,
+    default: 'default'
+  },
+  /**
+   * @description 业务id
+   * @default ''
+   */
+  businessId: {
+    type: String,
+    default: 'default'
+  },
+  /**
+   * 文件列表
+   */
+  uploadFilesList: {
+    type: Array<ISysUploadFiles>,
+    default: () => []
+  },
+  /**
+   * @description 是否编辑状态
+   * @default 'true'
+   * @type {true|false}
+   */
+  isEdit: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 文档上传是否默认关联，默认不关联
+   * @default 'false'
+   * @type {true|false}
+   */
+  association: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: Number,
+    default: 50
+  },
+  //附件宽度
+  itemWidth: {
+    type: String,
+    default: '100%'
+  },
+  isConfirmDelete: {
+    type: Boolean,
+    default: true
+  },
+  overwrite: {
+    type: Boolean,
+    default: true
+  },
+  autoUpload: {
+    type: Boolean,
+    default: true
+  }
+})
+const mousemove = (fileName: string) => {
+  hoverfileName.value = fileName
+}
+const mouseout = () => {
+  hoverfileName.value = ''
+}
+const getAccept = computed(() => {
+  if (props.accept === 'images') {
+    return '.jpg,.jpeg,.png,.gif,.bmp'
+  } else if (props.accept === 'document') {
+    return '.txt,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx'
+  } else if (props.accept === 'txt') {
+    return '.txt'
+  } else if (props.accept === 'pdf') {
+    return '.pdf' // 正确配置，仅允许 pdf
+  } else if (props.accept === 'word') {
+    return '.doc,.docx'
+  } else if (props.accept === 'excel') {
+    return '.xls,.xlsx'
+  } else if (props.accept === 'ppt') {
+    return '.ppt,.pptx'
+  } else {
+    return undefined
+  }
+})
+const getIcon = (fileName: string) => {
+  const type: string = fileName.split('.').pop() + ''
+  if ('.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP'.includes(type)) {
+    return 'adtec-image'
+  } else if ('txt'.includes(type)) {
+    return 'adtec-text'
+  } else if ('pdf'.includes(type)) {
+    return 'adtec-pdf'
+  } else if ('doc,docx'.includes(type)) {
+    return 'adtec-word'
+  } else if ('xls,xlsx'.includes(type)) {
+    return 'adtec-excel'
+  } else if ('ppt,pptx'.includes(type)) {
+    return 'adtec-ppt'
+  } else {
+    return 'adtec-text'
+  }
+}
+const success = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  if (response.code === '0') {
+    props.uploadFilesList.push(response.data as ISysUploadFiles)
+  } else {
+    ElMessage.error(response.msg)
+    ref_upload.value?.handleRemove(uploadFile)
+  }
+  for (let i = loadingFiles.value.length - 1; i >= 0; i--) {
+    if (loadingFiles.value[i] === uploadFile.name) {
+      loadingFiles.value.splice(i, 1)
+    }
+  }
+  ElMessage.success('上传成功')
+  emit('success', { files: props.uploadFilesList, deleteFiles: deleteFiles.value })
+  loading.value = false
+}
+const loading = defineModel<boolean>('loading')
+const loadingFiles = ref<string[]>([])
+// watch(
+//   loadingFiles,
+//   (val) => {
+//     if (props.autoUpload) {
+//       if (val.length > 0) {
+//         loading.value = true
+//       } else {
+//         loading.value = false
+//       }
+//     }
+//   },
+//   { deep: true }
+// )
+const beforeUpload = async (file: File) => {
+  const f = props.uploadFilesList.find((c) => c.name === file.name)
+  if (f) {
+    ElMessage.warning(file.name + ',文件已存在')
+    return false
+  } else if (file.size > props.size * 1024 * 1024) {
+    ElMessage.warning('文件大小不能超过' + props.size + 'MB')
+    return false
+  }
+  const acceptSuffixes = getAccept.value
+    ?.split(',')
+    .map(suffix => suffix.slice(1).toLowerCase())
+  const fileSuffix = file.name.split('.').pop()?.toLowerCase()
+  if (acceptSuffixes && !acceptSuffixes.includes(fileSuffix ?? '')) {
+    ElMessage.error(`文件 ${file.name} 格式不支持，仅允许 ${getAccept.value}！`)
+    setTimeout(() => {
+      ref_upload.value?.clearFiles(['ready'])
+    }, 1)
+    return false
+  }
+  loadingFiles.value.push(file.name)
+  return true
+}
+const fileClick = async (file: UploadFile & ISysUploadFiles) => {
+  if (file.name === hoverfileName.value) {
+    if (file.createBy && userInfo.getUserInfo.userCode !== file.createBy) {
+      ElMessage.warning('您没有权限删除此文件！')
+      return
+    }
+    if (!props.isConfirmDelete) {
+      const flag = await ElMessageBox.confirm('删除不可恢复！您确定删除此附件？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      if (!flag) {
+        return
+      }
+    }
+    ref_upload.value?.handleRemove(file)
+  } else {
+    preview(file)
+  }
+}
+// 处理覆盖逻辑
+const exceed = async (files: File[], uploadFiles: UploadUserFile[]) => {
+  if (props.limit === 1 && props.overwrite && props.uploadFilesList.length >= 1) {
+    const existingFile = props.uploadFilesList[0]
+    if (!props.isConfirmDelete) {
+      const flag = await ElMessageBox.confirm('只允许上传一个附件，是否点击确定覆盖原有附件？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      if (!flag) {
+        return
+      }
+      try {
+        loading.value = true
+        await documentApi.delSysUploadFile(existingFile.id).catch(err => {
+          frameworkUtils.messageError(err)
+        })
+      } catch (err) {
+        frameworkUtils.messageError(err)
+        return
+      } finally {
+        loading.value = false
+      }
+    }
+    props.uploadFilesList.splice(0, 1)
+    ref_upload.value?.clearFiles()
+    if (files.length > 0) {
+      const canUpload = await beforeUpload(files[0])
+      if (canUpload) {
+        deleteFiles.value.push(existingFile)
+        ref_upload.value?.handleStart(files[0])
+        props.autoUpload && ref_upload.value?.submit()
+      } else {
+        props.uploadFilesList.push(existingFile)
+      }
+    }
+  } else {
+    ElMessage.warning(`最多上传${props.limit}个文件，上传文件数量已达到限制`)
+  }
+}
+const error = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  ElMessage.error('上传失败')
+  for (let i = loadingFiles.value.length - 1; i >= 0; i--) {
+    if (loadingFiles.value[i] === uploadFile.name) {
+      loadingFiles.value.splice(i, 1)
+    }
+  }
+  loading.value = false
+}
+const preview = async (uploadFile: UploadFile) => {
+  const file = props.uploadFilesList.find((c) => c.name === uploadFile.name)
+  if (file) {
+    //if ((uploadFile.response as any).code === '0') {
+    // const data = (uploadFile.response as any).data as ISysUploadFiles
+    fileView(file.id)
+  }
+}
+const remove = async (file: UploadFile, isConfirm: boolean = true) => {
+  // if ((file.response as any).code === '0') {
+  // const data = (file.response as any).data as ISysUploadFiles
+  const find = props.uploadFilesList.find((c) => c.name === file.name)
+  if (find) {
+    try {
+      if (!isConfirm && !props.isConfirmDelete) {
+        await documentApi.delSysUploadFile(find.id)
+      }
+      props.uploadFilesList.splice(props.uploadFilesList.indexOf(find), 1)
+      deleteFiles.value.push(find)
+    } catch (err: any) {
+      frameworkUtils.messageError(err)
+    }
+  }
+  // }
+}
+const progress = (event: { percent: number }, file: UploadFile) => {
+  loading.value = true
+}
+const confirm = async () => {
+  try {
+    loading.value = true
+    if (props.isConfirmDelete && deleteFiles.value.length > 0) {
+      await documentApi.delSysUploadFiles(deleteFiles.value.map(item => item.id))
+      if (!loadingFiles.value?.length) {
+        ElMessage.success('操作成功')
+        emit('success', { files: props.uploadFilesList, deleteFiles: deleteFiles.value })
+      }
+    }
+    if (!props.autoUpload) {
+      ref_upload.value?.submit()
+    }
+  } catch (err: any) {
+    frameworkUtils.messageError(err)
+    loading.value = false
+  } finally {
+    if (props.autoUpload) {
+      loading.value = false
+    }
+  }
+}
+onMounted(() => {
+  uploadHeaders.value.Authorization = sessionStorage.getItem('Authorization') + ''
+})
+defineExpose({
+  remove,
+  confirm
+})
+</script>
+<style scoped lang="scss">
+.file-class {
+}
+
+.file-class :hover {
+  color: var(--el-color-primary);
+}
+
+:deep {
+  .el-icon--upload {
+    margin-bottom: 0;
+  }
+}
+
+.file-item {
+  position: relative;
+  padding: 2px 0;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--el-fill-color-light);
+
+    .delete-icon {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.link-name {
+  cursor: pointer;
+}
+
+.link-name:hover {
+  color: var(--el-color-primary);
+  text-decoration: underline;
+}
+</style>

package/src/components/upload/ElUploads.vue

@@ -279,7 +279,7 @@ const beforeUpload = (file: File) => {
 const fileClick = async (file: UploadFile & ISysUploadFiles) => {
   if (file.name === hoverfileName.value) {
     if (file.createBy && userInfo.getUserInfo.userCode !== file.createBy) {
-      frameworkUtils.messageError('您没有权限删除此文件！')
+      ElMessage.warning('您没有权限删除此文件！')
       return
     }
     const flag = await ElMessageBox.confirm('删除不可恢复！您确定删除此附件？', '提示', {