@jzt-packages/components 1.0.0

package/src/JztUploadFile/multiple.vue

@@ -0,0 +1,318 @@
+<template>
+  <div :class="listType === 'text' ? 'file_upload_box' : 'img_upload_box'" class="flx-left-center">
+    <slot name="upload-left"></slot>
+    <el-upload
+      v-if="isShow ? _fileList && _fileList.length : true"
+      v-model:file-list="_fileList"
+      action="#"
+      :list-type="listType"
+      :class="[
+        'upload',
+        self_disabled ? 'disabled' : '',
+        isShow || (listType !== 'text' && _fileList.length >= limit) ? 'no-upload' : ''
+      ]"
+      :multiple="true"
+      :disabled="self_disabled || _fileList.length >= limit"
+      :limit="isShow ? _fileList.length : limit"
+      :drag="listType === 'text' ? false : drag"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-exceed="handleExceed"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :accept="fileType.join(',')"
+    >
+      <template #trigger>
+        <div style="color: var(--el-text-color-secondary)">
+          <slot name="empty">
+            <div v-if="listType === 'text'">
+              <el-button :disabled="_fileList.length >= limit" type="primary">
+                {{ emptyText }}
+              </el-button>
+            </div>
+            <div v-else class="upload-empty">
+              <el-icon><Plus /></el-icon>
+              <span>{{ emptyText }}</span>
+            </div>
+          </slot>
+        </div>
+      </template>
+      <template #file="{ file }">
+        <div v-if="listType === 'text'" class="el-upload-list__item flx-between-center" @click.stop>
+          <div class="el-upload-list__item-name sle flx-left-center" @click="handlePictureCardPreview(file as UploadUserFileTypes)">
+            <el-icon><Document /></el-icon>
+            <div class="sle fileName">{{ file.name }}</div>
+          </div>
+          <div class="result">
+            <span class="success">
+              <el-icon color="#67c23a"><CircleCheck /></el-icon>
+            </span>
+            <span v-if="!self_disabled" class="delete" @click="handleRemove(file as UploadUserFileTypes)">
+              <el-icon color="#A1A1A3"><Close /></el-icon>
+            </span>
+          </div>
+        </div>
+        <div v-else class="img-box">
+          <img v-if="isFullUrl(file?.url)" :src="file?.isPdf ? pdfCover : file.url" class="upload-image" />
+          <div v-else class="upload-image img-box">
+            <img :src="file?.isPdf ? pdfCover : file.url" class="upload-image" />
+          </div>
+          <div v-if="!file?.halfUrl" class="jzt-upload-loading">
+            <el-icon class="loading-icon"><Loading /></el-icon>
+          </div>
+          <div v-else class="upload-handle" @click.stop>
+            <div class="handle-icon" @click="handlePictureCardPreview(file as UploadUserFileTypes)">
+              <el-icon><ZoomIn /></el-icon>
+              <span>查看</span>
+            </div>
+            <div v-if="!self_disabled" class="handle-icon" @click="handleRemove(file as UploadUserFileTypes)">
+              <el-icon><Delete /></el-icon>
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #tip>
+        <div class="el-upload__tip">
+          <slot name="tip"></slot>
+        </div>
+      </template>
+    </el-upload>
+    <JztEmpty v-else-if="isShow" emptyText="暂无图片" />
+    <JztFilePreview ref="JztFilePreviewRef" title="预览" :show-list="false" />
+    <el-image-viewer v-if="imgViewVisible" :url-list="[viewImageUrl]" @close="imgViewVisible = false" />
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImgs">
+import { ref, computed, inject, watch } from 'vue'
+import { pdfCover } from '@jzt-spd/styles/assets'
+import { isFullUrl } from '@jzt-spd/utils'
+import { Plus, Loading } from "@element-plus/icons-vue";
+import JztEmpty from "../JztEmpty/index.vue";
+import JztFilePreview from "../JztFilePreview/index.vue";
+import type {
+  UploadProps,
+  UploadFile,
+  UploadUserFile,
+  UploadRequestOptions,
+} from "element-plus";
+import {
+  ElNotification,
+  formContextKey,
+  formItemContextKey,
+} from "element-plus";
+import { useUploadFileHook } from "../hooks/useUploadFileHook";
+const {
+  useBeforeUpload,
+  useRemoveFilterList,
+  useUploadSuccess,
+  useHttpUploadHook,
+  getFileShowList,
+  getFullUrl,
+} = useUploadFileHook();
+
+interface UploadUserFileTypes extends UploadUserFile {
+  halfUrl: string;
+  isPdf?: boolean;
+}
+
+interface UploadFileProps {
+  fileList: string[];
+  api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+  drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+  limit?: number; // 最大图片上传数 ==> 非必传（默认为 5张）
+  fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType?: File.FilePostfixType[]; // 图片类型限制 ==> 非必传（默认为 [".jpeg", ".png", ".jpeg", ".jpg", ".pdf"]）
+  height?: string; // 组件高度 ==> 非必传（默认为 150px）
+  width?: string; // 组件宽度 ==> 非必传（默认为 150px）
+  borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+  listType?: "text" | "picture" | "picture-card";
+  emptyText?: string;
+  fileName?: string;
+  isShow?: boolean; // 是否是查看模式，没有数据时会展示空图
+}
+
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  fileList: () => [],
+  drag: false,
+  disabled: false,
+  limit: 5,
+  fileSize: 5,
+  fileType: () => [".jpeg", ".png", ".jpeg", ".jpg", ".pdf"],
+  height: "120px",
+  width: "120px",
+  borderRadius: "8px",
+  listType: "text",
+  emptyText: "文件上传",
+  fileName: "file",
+  isShow: false,
+});
+
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+  return props.disabled || formContext?.disabled;
+});
+interface UploadUserFileTypes extends UploadUserFile {
+  halfUrl: string;
+}
+const _fileList = ref<UploadUserFileTypes[]>([]);
+
+// 监听 props.fileList 列表默认值改变
+watch(
+  () => props.fileList,
+  (fileList: any[]) => {
+    const newList = getFileShowList(fileList)
+    // 用 halfUrl 匹配已有文件，复用原对象引用，避免所有图片重新加载
+    const existingMap = new Map(_fileList.value.filter(f => f.halfUrl).map(f => [f.halfUrl, f]))
+    _fileList.value = newList.map(item => {
+      const existing = existingMap.get(item.halfUrl)
+      if (existing) return existing
+      return item
+    })
+  },
+  {
+    immediate: true,
+  }
+);
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
+  return useBeforeUpload({
+    rawFile,
+    fileSize: props.fileSize,
+    fileType: props.fileType,
+  });
+};
+
+/**
+ * @description 图片上传
+ * @param options upload 所有配置项
+ * */
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+  // PDF 的 blob URL 无法在 img 中显示，提前替换为封面图
+  const file = _fileList.value.find(f => f.uid === options.file.uid)
+  if (file && /\.(pdf)$/i.test(options.file.name)) {
+    file.url = pdfCover
+    file.isPdf = true
+  }
+  useHttpUploadHook({
+    fileName: props.fileName,
+    options,
+    api: props.api,
+  });
+};
+/**
+ * @description 图片上传成功
+ * @param response 上传响应结果
+ * @param uploadFile 上传的文件
+ * */
+const emit = defineEmits<{
+  "update:fileList": [value: UploadUserFile[] | string[]];
+}>();
+
+// emit fileList 同步fileList数据
+const setEmit = (halfUrls: string[]) => {
+  emit("update:fileList", halfUrls);
+};
+// 上传成功！
+const uploadSuccess = async (
+  response: { fileUrl: string },
+  uploadFile: UploadUserFile | UploadUserFileTypes
+) => {
+  useUploadSuccess({
+    response,
+    uploadFile: uploadFile as UploadUserFileTypes,
+    _fileList: _fileList.value,
+    callback: (halfUrls) => {
+      setEmit(halfUrls);
+    },
+    formItemContext,
+    formContext,
+  });
+};
+
+/**
+ * @description 删除图片
+ * @param file 删除的文件
+ * */
+const handleRemove = (file: UploadFile | UploadUserFileTypes) => {
+  const halfUrls = useRemoveFilterList({
+    _fileList: _fileList.value,
+    file: file as UploadUserFileTypes,
+  });
+  setEmit(halfUrls);
+};
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "文件上传失败，请您重新上传！",
+    type: "error",
+  });
+};
+
+/**
+ * @description 文件数超出
+ * */
+const handleExceed = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
+    type: "warning",
+  });
+};
+
+/**
+ * @description 图片预览
+ * @param file 预览的文件
+ * */
+const viewImageUrl = ref("");
+const imgViewVisible = ref(false);
+const JztFilePreviewRef = ref();
+
+const handlePictureCardPreview = (file: UploadUserFileTypes) => {
+  if (file && file.isPdf) {
+    // PDF预览功能
+    const url = getFullUrl((file as UploadUserFileTypes).halfUrl);
+    JztFilePreviewRef.value && JztFilePreviewRef.value.openDialog([url]);
+  } else {
+    viewImageUrl.value = file.url!;
+    imgViewVisible.value = true;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@use "./multiple";
+
+//图片上传
+.img_upload_box {
+  :deep(.upload) {
+    .el-upload-dragger {
+      border-radius: v-bind(borderRadius);
+    }
+    .el-upload-list__item,
+    .el-upload--picture-card {
+      width: v-bind(width) !important;
+      height: v-bind(height) !important;
+      border-radius: v-bind(borderRadius);
+      .img-box {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

package/src/JztUploadFile/single.scss

@@ -0,0 +1,226 @@
+// 公共样式
+.no-upload {
+  :deep(.el-upload) {
+    display: none;
+  }
+}
+.upload {
+  flex-direction: column;
+}
+:deep(.el-list-leave-to) {
+  display: none !important;
+}
+
+.is-error {
+  .upload {
+    :deep(.el-upload--picture-card),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+
+:deep(.disabled) {
+  .el-upload {
+    background: var(--el-disabled-bg-color) !important;
+  }
+  .el-upload--picture-card,
+  .el-upload-dragger {
+    cursor: not-allowed;
+    background: var(--el-disabled-bg-color) !important;
+    border: 1px dashed var(--el-border-color-darker);
+    &:hover {
+      border-color: var(--el-border-color-darker) !important;
+    }
+  }
+}
+.el-upload__tip {
+  display: block;
+  line-height: 15px;
+  text-align: left;
+}
+
+.upload-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 12px;
+  line-height: 30px;
+  color: var(--el-color-info);
+  .el-icon {
+    font-size: 28px;
+    color: var(--el-text-color-secondary);
+  }
+}
+//文件上传
+.file_upload_box {
+  .upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .el-button {
+      margin-right: 10px;
+    }
+  }
+  :deep(.el-upload) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100% !important;
+  }
+}
+//图片上传
+.img_upload_box {
+  .no-border {
+    :deep(.el-upload) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // width: v-bind(width);
+      // height: v-bind(height);
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      // border-radius: v-bind(borderRadius);
+      transition: var(--el-transition-duration-fast);
+      background-color: #fff;
+      &:hover {
+        border-color: var(--el-color-primary);
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+      .el-upload-dragger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // width: 100%;
+        // height: 100%;
+
+        padding: 0;
+        overflow: hidden;
+        // background-color: transparent;
+        border: 1px dashed var(--el-border-color-darker);
+        border-radius: v-bind(borderRadius);
+        &:hover {
+          border: 1px dashed var(--el-color-primary);
+        }
+      }
+      .el-upload-dragger.is-dragover {
+        background-color: var(--el-color-primary-light-9);
+        border: 2px dashed var(--el-color-primary) !important;
+      }
+      .upload-image {
+        width: 100%;
+        height: 100%;
+        // object-fit: contain;
+        object-fit: cover;
+      }
+      .upload-empty {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        line-height: 30px;
+        color: var(--el-color-info);
+        .el-icon {
+          font-size: 28px;
+          color: var(--el-text-color-secondary);
+        }
+      }
+      .upload-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background: rgb(0 0 0 / 60%);
+        opacity: 0;
+        transition: var(--el-transition-duration-fast);
+        .handle-icon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0 6%;
+          color: aliceblue;
+          .el-icon {
+            margin-bottom: 40%;
+            font-size: 130%;
+            line-height: 130%;
+          }
+          span {
+            font-size: 85%;
+            line-height: 85%;
+          }
+        }
+      }
+    }
+  }
+}
+:deep(.el-upload-list--text) {
+  max-width: 500px;
+}
+
+// 文件列列表显示样式
+.el-upload-list__item {
+  width: 100%;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  margin-bottom: 5px;
+  position: relative;
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+
+  &:hover {
+    background-color: var(--el-fill-color-light);
+    .result .delete {
+      display: block !important;
+    }
+    .result .success {
+      display: none !important;
+    }
+  }
+  .result {
+    padding: 0 10px;
+    .success {
+      display: inline-block !important;
+    }
+    .delete {
+      display: none !important;
+    }
+  }
+
+  .el-upload-list__item-name {
+    color: var(--el-text-color-regular);
+    display: inline-flex;
+    font-size: var(--el-font-size-base);
+    padding: 0 4px;
+    text-align: center;
+    transition: color var(--el-transition-duration);
+    overflow: hidden;
+    &:hover {
+      color: var(--el-color-primary);
+      cursor: pointer;
+    }
+  }
+  .fileName {
+    flex: 1;
+  }
+}