adtec-core-package 2.2.0 → 2.2.2

package/src/components/upload/ElUploads.vue

@@ -1,331 +1,364 @@
-<!--创建人 丁盼-->
-<!--说明: 文档上传组件-->
-<!--创建时间: 2024/12/2 下午1:59-->
-<!--修改时间: 2024/12/2 下午1:59-->
-<template>
-  <el-flex v-if="!isEdlt" :vertical="vertical">
-    <el-flex
-      v-for="item of uploadFilesList"
-      :key="item.id"
-      class="file-class"
-      @click="fileView(item.id)"
-      :width="itemWidth"
-    >
-      <el-flex align="center" justify="flex-start">
-        <el-tooltip class="box-item" :content="item.name" placement="top">
-          <el-text truncated style="cursor: pointer">
-            <el-icons :model-value="getIcon(item.name)" style="margin-right: 5px"></el-icons>
-            {{ item.name }}
-          </el-text>
-        </el-tooltip>
-      </el-flex>
-    </el-flex>
-  </el-flex>
-  <el-upload
-    v-else
-    ref="ref_upload"
-    :file-list="uploadFilesList"
-    @success="success"
-    @remove="remove"
-    @preview="preview"
-    @error="error"
-    @exceed="exceed"
-    :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">
-          <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, watch } 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'
-
-const { fileView: fileView } = useFileView()
-const uploadHeaders = ref({
-  Authorization: '',
-})
-const ref_upload = ref()
-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}
-   */
-  isEdlt: {
-    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%',
-  },
-})
-const mousemove = (fileName: string) => {
-  hoverfileName.value = fileName
-}
-const mouseout = () => {
-  hoverfileName.value = ''
-}
-const getAccept = computed(() => {
-  if (props.accept === 'images') {
-    return '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.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'
-  } 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 ''
-  }
-})
-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)
-    }
-  }
-}
-const loading = defineModel<boolean>('loading')
-const loadingFiles = ref<string[]>([])
-watch(
-  loadingFiles,
-  (val) => {
-    if (val.length > 0) {
-      loading.value = true
-    } else {
-      loading.value = false
-    }
-  },
-  { deep: true },
-)
-const beforeUpload = (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
-  }
-  loadingFiles.value.push(file.name)
-  return true
-}
-const fileClick = async (file: UploadFile) => {
-  if (file.name === hoverfileName.value) {
-    const flag = await ElMessageBox.confirm('删除不可恢复！您确定删除此附件？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-    if (!flag) {
-      return
-    }
-    ref_upload.value?.handleRemove(file)
-  } else {
-    preview(file)
-  }
-}
-const exceed = (files: File[], uploadFiles: UploadUserFile[]) => {
-  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)
-    }
-  }
-}
-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) => {
-  // 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 {
-      await documentApi.delSysUploadFile(find.id)
-      props.uploadFilesList.splice(props.uploadFilesList.indexOf(find), 1)
-    } catch (err: any) {
-      frameworkUtils.messageError(err)
-    }
-  }
-  // }
-}
-onMounted(() => {
-  uploadHeaders.value.Authorization = sessionStorage.getItem('Authorization') + ''
-})
-defineExpose({
-  remove
-})
-</script>
-<style scoped lang="scss">
-.file-class {
-}
-
-.file-class :hover {
-  color: var(--el-color-primary);
-}
-
-:deep {
-  .el-icon--upload {
-    margin-bottom: 0;
-  }
-}
-</style>
+<!--创建人 丁盼-->
+<!--说明: 文档上传组件-->
+<!--创建时间: 2024/12/2 下午1:59-->
+<!--修改时间: 2024/12/2 下午1:59-->
+<template>
+  <div v-if="!isEdlt">
+    <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;">
+            <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"
+    @error="error"
+    @exceed="exceed"
+    :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">
+          <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, watch } 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'
+
+const { fileView: fileView } = useFileView()
+const uploadHeaders = ref({
+  Authorization: '',
+})
+const ref_upload = ref()
+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}
+   */
+  isEdlt: {
+    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%',
+  },
+})
+const mousemove = (fileName: string) => {
+  hoverfileName.value = fileName
+}
+const mouseout = () => {
+  hoverfileName.value = ''
+}
+const getAccept = computed(() => {
+  if (props.accept === 'images') {
+    return '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.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'
+  } 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 ''
+  }
+})
+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)
+    }
+  }
+}
+const loading = defineModel<boolean>('loading')
+const loadingFiles = ref<string[]>([])
+watch(
+  loadingFiles,
+  (val) => {
+    if (val.length > 0) {
+      loading.value = true
+    } else {
+      loading.value = false
+    }
+  },
+  { deep: true },
+)
+const beforeUpload = (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
+  }
+  loadingFiles.value.push(file.name)
+  return true
+}
+const fileClick = async (file: UploadFile) => {
+  if (file.name === hoverfileName.value) {
+    const flag = await ElMessageBox.confirm('删除不可恢复！您确定删除此附件？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    if (!flag) {
+      return
+    }
+    ref_upload.value?.handleRemove(file)
+  } else {
+    preview(file)
+  }
+}
+const exceed = (files: File[], uploadFiles: UploadUserFile[]) => {
+  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)
+    }
+  }
+}
+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) => {
+  // 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 {
+      await documentApi.delSysUploadFile(find.id)
+      props.uploadFilesList.splice(props.uploadFilesList.indexOf(find), 1)
+    } catch (err: any) {
+      frameworkUtils.messageError(err)
+    }
+  }
+  // }
+}
+onMounted(() => {
+  uploadHeaders.value.Authorization = sessionStorage.getItem('Authorization') + ''
+})
+defineExpose({
+  remove
+})
+</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>