@jzt-packages/components 1.0.0

package/src/JztUploadFile/single.vue

@@ -0,0 +1,274 @@
+<template>
+  <div :class="[listType === 'text' ? 'file_upload_box' : 'img_upload_box']">
+    <!-- {{ imageUrl }} -->
+    <!-- {{ fileList }} -->
+    <el-upload
+      :id="uuid"
+      v-model:file-list="fileList"
+      action="#"
+      :class="[
+        'upload flx-left-top',
+        self_disabled ? 'disabled' : '',
+        drag ? 'no-border' : '',
+        listType !== 'text' && imageUrl ? 'no-upload' : '',
+      ]"
+      :multiple="false"
+      :disabled="self_disabled"
+      :show-file-list="listType === 'text' && showFileList"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-remove="deleteImg"
+      :on-error="uploadError"
+
+      :drag="listType === 'text' ? false : drag"
+      :accept="fileType.join(',')"
+    >
+      <div class="el-upload__tip">
+        <slot name="tip"></slot>
+      </div>
+      <template v-if="imageUrl" #trigger>
+        <div v-if="listType === 'text'">
+          <div>
+            <el-button :disabled="true" type="primary" class="mb5">{{
+              emptyText
+            }}</el-button>
+          </div>
+          <!-- <div class="el-upload-list__item flx-between-center" @click.stop>
+            <div class="el-upload-list__item-name sle flx-left-center">
+              <el-icon><Document /></el-icon>
+              <div class="sle fileName">文件XXX文件XXX文件XXX文件XXX文件</div>
+            </div>
+            <div class="result">
+              <span class="success">
+                <el-icon color="#67c23a"><CircleCheck /></el-icon>
+              </span>
+              <span class="delete" @click="deleteImg">
+                <el-icon color="#A1A1A3"><Close /></el-icon>
+              </span>
+            </div>
+          </div> -->
+        </div>
+        <div v-else class="upload-image-box" style="width: 100%; height: 100%">
+          <img :src="getFullUrl(imageUrl)" class="upload-image" />
+          <div class="upload-handle" @click.stop>
+            <div class="handle-icon" @click="imgViewVisible = true">
+              <el-icon><ZoomIn /></el-icon>
+              <span>查看</span>
+            </div>
+            <div v-if="!self_disabled" class="handle-icon" @click="deleteImg">
+              <el-icon><Delete /></el-icon>
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-else #trigger>
+        <template v-if="listType === 'text'">
+          <el-icon v-if="drag" class="el-icon--upload">
+            <upload-filled />
+          </el-icon>
+          <el-button v-else type="primary">
+            {{ emptyText }}
+          </el-button>
+        </template>
+        <template v-else>
+          <div class="upload-empty">
+            <slot name="empty">
+              <el-icon><Plus /></el-icon>
+              <span>{{ emptyText }}</span>
+            </slot>
+          </div>
+        </template>
+      </template>
+    </el-upload>
+    <el-image-viewer
+      v-if="imgViewVisible"
+      :url-list="[getFullUrl(imageUrl)]"
+      @close="imgViewVisible = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImg">
+import { ref, computed, inject, watch } from "vue";
+import { generateUUID } from "../utils/index";
+import {
+  ElNotification,
+  formContextKey,
+  formItemContextKey,
+} from "element-plus";
+import type {
+  UploadProps,
+  UploadRequestOptions,
+  UploadUserFile,
+} from "element-plus";
+import { useUploadFileHook } from "../hooks/useUploadFileHook";
+const { useBeforeUpload, useHttpUploadHook, getFullUrl } = useUploadFileHook();
+
+interface UploadFileProps {
+  imageUrl: string; // 图片地址 ==> 必传
+  api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+  drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+  fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType?: File.FilePostfixType[]; // 图片类型限制 ==> 非必传（默认为 [".jpeg", ".png", ".jpeg", ".jpg", ".pdf"]）
+  height?: string; // 组件高度 ==> 非必传（默认为 120px）
+  width?: string; // 组件宽度 ==> 非必传（默认为 120px）
+  borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+  listType?: "text" | "picture" | "picture-card";
+  fileName?: string;
+  emptyText?: string;
+  showFileList?: boolean; // 是否显示文件列表 ==> 非必传（默认为 true）
+}
+
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  imageUrl: "",
+  drag: false,
+  disabled: false,
+  fileSize: 5,
+  fileType: () => [".jpeg", ".png", ".jpeg", ".jpg", ".pdf"],
+  height: "120px",
+  width: "120px",
+  borderRadius: "8px",
+  emptyText: "上传文件",
+  listType: "text",
+  fileName: "file",
+  showFileList: true, // 默认显示文件列表
+});
+
+const fileList = ref<any[]>([]);
+
+// 监听 props.fileList 列表默认值改变
+watch(
+  () => props.imageUrl,
+  (imageUrl: string) => {
+    if (imageUrl) {
+      fileList.value = [
+        {
+          url: getFullUrl(props.imageUrl),
+          name: props.imageUrl,
+          uid: Math.floor(Math.random() * 100),
+        },
+      ];
+    } else {
+      fileList.value = [];
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+// 生成组件唯一id
+const uuid = ref("id-" + generateUUID());
+
+// 查看图片
+const imgViewVisible = ref(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;
+});
+
+// 获取文件名
+
+/**
+ * @description 图片上传
+ * @param options upload 所有配置项
+ * */
+const emit = defineEmits<{
+  "update:imageUrl": [value: any];
+}>();
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+  useHttpUploadHook({
+    fileName: props.fileName,
+    options,
+    api: props.api,
+  });
+};
+
+/**
+ * @description 删除图片
+ * */
+const deleteImg = () => {
+  emit("update:imageUrl", "");
+};
+
+/**
+ * @description 编辑图片
+ * */
+const editImg = () => {
+  const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
+  dom && dom.dispatchEvent(new MouseEvent("click"));
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
+  return useBeforeUpload({
+    rawFile,
+    fileSize: props.fileSize,
+    fileType: props.fileType,
+  });
+};
+
+/**
+ * @description 图片上传成功
+ *  导入成功的函数,response是 http-request="handleHttpUpload" return的值
+ * */
+const uploadSuccess = (val) => {
+  if (val && val.fileUrl) {
+    ElNotification({
+      title: "温馨提示",
+      message: "图片上传成功！",
+      type: "success",
+    });
+    emit("update:imageUrl", val.fileUrl);
+  } else {
+    emit("update:imageUrl", "");
+  }
+};
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "图片上传失败，请您重新上传！",
+    type: "error",
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@use "./single.scss";
+:deep(.upload) {
+  .el-upload-dragger {
+    width: v-bind(width) !important;
+    height: 100%;
+    border-radius: v-bind(borderRadius);
+    padding: 30px 10px;
+  }
+}
+.img_upload_box {
+  .no-border {
+    :deep(.el-upload) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload {
+      width: v-bind(width);
+      height: v-bind(height);
+      border-radius: v-bind(borderRadius);
+    }
+  }
+}
+</style>

package/src/JztUploadImg/Img.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      :id="uuid"
+      action="#"
+      :class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+      :multiple="false"
+      :disabled="self_disabled"
+      :show-file-list="false"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <template v-if="imageUrl">
+        <img :src="getFullUrl(imageUrl)" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <!-- <div v-if="!self_disabled" class="handle-icon" @click="editImg">
+            <el-icon><Edit /></el-icon>
+            <span>编辑</span>
+          </div> -->
+          <div class="handle-icon" @click="imgViewVisible = true">
+            <el-icon><ZoomIn /></el-icon>
+            <span>查看</span>
+          </div>
+          <div v-if="!self_disabled" class="handle-icon" @click="deleteImg">
+            <el-icon><Delete /></el-icon>
+            <span>删除</span>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="upload-empty">
+          <slot name="empty">
+            <el-icon><Plus /></el-icon>
+            <span>{{ emptyText }}</span>
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-image-viewer v-if="imgViewVisible" :url-list="[getFullUrl(imageUrl)]" @close="imgViewVisible = false" />
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImg">
+import { ref, computed, inject } from 'vue'
+import { generateUUID } from '../utils/index'
+import { ElNotification, formContextKey, formItemContextKey } from 'element-plus'
+import type { UploadProps, UploadRequestOptions } from 'element-plus'
+import { useUploadFileHook } from '../hooks/useUploadFileHook'
+const { useBeforeUpload, useRemoveFilterList, useUploadSuccess, useHttpUploadHook, getFullUrl } = useUploadFileHook()
+
+interface UploadFileProps {
+  imageUrl: string // 图片地址 ==> 必传
+  api?: (params: any) => Promise<any> // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+  drag?: boolean // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled?: boolean // 是否禁用上传组件 ==> 非必传（默认为 false）
+  fileSize?: number // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType?: File.ImagePostfixType[] // 图片类型限制 ==> 非必传（默认为  [".jpeg", ".png", ".jpg"]）
+  height?: string // 组件高度 ==> 非必传（默认为 120px）
+  width?: string // 组件宽度 ==> 非必传（默认为 120px）
+  borderRadius?: string // 组件边框圆角 ==> 非必传（默认为 8px）
+  emptyText?: string
+  fileName?: string
+}
+
+// 接受父组件参数
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  imageUrl: '',
+  drag: true,
+  disabled: false,
+  fileSize: 5,
+  fileType: () => ['.jpeg', '.png', '.jpg'],
+  height: '120px',
+  width: '120px',
+  borderRadius: '8px',
+  emptyText: '请上传图片',
+  fileName: 'file'
+})
+
+// 生成组件唯一id
+const uuid = ref('id-' + generateUUID())
+
+// 查看图片
+const imgViewVisible = ref(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
+})
+/**
+ * @description 图片上传
+ * @param options upload 所有配置项
+ * */
+const emit = defineEmits<{
+  'update:imageUrl': [value: string]
+}>()
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+  useHttpUploadHook({
+    fileName: props.fileName,
+    options,
+    api: props.api
+  })
+}
+
+/**
+ * @description 删除图片
+ * */
+const deleteImg = () => {
+  emit('update:imageUrl', '')
+}
+
+/**
+ * @description 编辑图片
+ * */
+const editImg = () => {
+  const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
+  dom && dom.dispatchEvent(new MouseEvent('click'))
+}
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps['beforeUpload'] = rawFile => {
+  return useBeforeUpload({
+    rawFile,
+    fileSize: props.fileSize,
+    fileType: props.fileType
+  })
+}
+
+/**
+ * @description 图片上传成功
+ * */
+const uploadSuccess = val => {
+  if (val && val.fileUrl) {
+    ElNotification({
+      title: '温馨提示',
+      message: '图片上传成功！',
+      type: 'success'
+    })
+    emit('update:imageUrl', val.fileUrl)
+  } else {
+    emit('update:imageUrl', '')
+  }
+}
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: '图片上传失败，请您重新上传！',
+    type: 'error'
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.is-error {
+  .upload {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+:deep(.disabled) {
+  .el-upload,
+  .el-upload-dragger {
+    cursor: not-allowed !important;
+    background: var(--el-disabled-bg-color);
+    border: 1px dashed var(--el-border-color-darker) !important;
+    &:hover {
+      border: 1px dashed var(--el-border-color-darker) !important;
+    }
+  }
+}
+.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 !important;
+      &: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;
+      }
+      .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%;
+          }
+        }
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 18px;
+    text-align: center;
+  }
+}
+</style>