adtec-core-package 0.4.0 → 0.4.2

package/src/components/upload/ElUploads.vue

@@ -1,279 +1,286 @@
-<!--创建人 丁盼-->
-<!--说明: 文档上传组件-->
-<!--创建时间: 2024/12/2 下午1:59-->
-<!--修改时间: 2024/12/2 下午1:59-->
-<template>
-  <el-flex v-if="!isEdlt">
-    <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 } from 'vue'
-import { ElMessage, 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'
-
-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 ''
-   * @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)
-  }
-}
-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
-  }
-  return true
-}
-const fileClick = (file: UploadFile) => {
-  if (file.name === hoverfileName.value) {
-    ref_upload.value?.handleRemove(file)
-  } else {
-    preview(file)
-  }
-}
-const exceed = (files: File[], uploadFiles: UploadUserFile[]) => {
-  ElMessage.warning('最多上传' + props.limit + '个文件,上传文件数量已达到限制')
-}
-const error = () => {
-  ElMessage.error('上传失败')
-}
-const preview = async (uploadFile: UploadFile) => {
-  console.log('preview', 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 (error: any) {
-      ElMessage.error(error.msg)
-    }
-  }
-  // }
-}
-onMounted(() => {
-  uploadHeaders.value.Authorization = sessionStorage.getItem('Authorization') + ''
-})
-</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>
+  <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 } from 'vue'
+import { ElMessage, 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'
+
+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)
+  }
+}
+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
+  }
+  return true
+}
+const fileClick = (file: UploadFile) => {
+  if (file.name === hoverfileName.value) {
+    ref_upload.value?.handleRemove(file)
+  } else {
+    preview(file)
+  }
+}
+const exceed = (files: File[], uploadFiles: UploadUserFile[]) => {
+  ElMessage.warning('最多上传' + props.limit + '个文件,上传文件数量已达到限制')
+}
+const error = () => {
+  ElMessage.error('上传失败')
+}
+const preview = async (uploadFile: UploadFile) => {
+  console.log('preview', 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 (error: any) {
+      ElMessage.error(error.msg)
+    }
+  }
+  // }
+}
+onMounted(() => {
+  uploadHeaders.value.Authorization = sessionStorage.getItem('Authorization') + ''
+})
+</script>
+<style scoped lang="scss">
+.file-class {
+}
+.file-class :hover {
+  color: var(--el-color-primary);
+}
+:deep {
+  .el-icon--upload {
+    margin-bottom: 0;
+  }
+}
+</style>