@jzt-packages/components 1.0.0

package/src/JztUploadImg/Imgs.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="img_upload_box 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="picture-card"
+      :class="[
+        'upload',
+        self_disabled ? 'disabled' : '',
+        drag ? 'no-border' : '',
+        isShow || limit <= _fileList.length ? 'no-upload' : ''
+      ]"
+      :multiple="true"
+      :disabled="self_disabled"
+      :limit="isShow ? _fileList.length : limit"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-exceed="handleExceed"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <div class="upload-empty">
+        <slot name="empty">
+          <el-icon><Plus /></el-icon>
+          <span>{{ emptyText }}</span>
+        </slot>
+      </div>
+      <template #file="{ file }">
+        <img v-if="isFullUrl(file?.url)" :src="file?.isPdf ? pdfCover : file.url" class="upload-image" />
+        <div v-else class="upload-image">
+          <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>
+      </template>
+    </el-upload>
+    <JztEmpty v-else-if="isShow" emptyText="暂无图片" />
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <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 { Plus, Loading } from '@element-plus/icons-vue'
+import { pdfCover } from '@jzt-spd/styles/assets'
+import type { UploadProps, UploadFile, UploadUserFile, UploadRequestOptions } from 'element-plus'
+import { ElNotification, formContextKey, formItemContextKey } from 'element-plus'
+import { useUploadFileHook } from '../hooks/useUploadFileHook'
+import { isFullUrl } from '@jzt-spd/utils'
+import JztEmpty from "../JztEmpty/index.vue";
+import JztFilePreview from "../JztFilePreview/index.vue";
+
+const { useBeforeUpload, useRemoveFilterList, useUploadSuccess, useHttpUploadHook, getFileShowList, getFullUrl } =
+  useUploadFileHook()
+
+interface UploadUserFileTypes extends UploadUserFile {
+  halfUrl: string
+  isPdf?: boolean
+}
+
+interface UploadFileProps {
+  fileList: UploadUserFile[] | string[]
+  api?: (params: any) => Promise<any> // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+  drag?: boolean // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled?: boolean // 是否禁用上传组件 ==> 非必传（默认为 false）
+  limit?: number // 最大图片上传数 ==> 非必传（默认为 5张）
+  fileSize?: number // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType?: File.ImagePostfixType[] // 图片类型限制 ==> 非必传（默认为  [".jpeg", ".png", ".jpg"]）
+  height?: string // 组件高度 ==> 非必传（默认为 120px
+  width?: string // 组件宽度 ==> 非必传（默认为 120px
+  borderRadius?: string // 组件边框圆角 ==> 非必传（默认为 8px）
+  // listType?: "text" | "picture" | "picture-card";
+  emptyText?: string
+  fileName?: string
+  isShow?: boolean // 是否是查看模式，没有数据时会展示空图
+}
+
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  fileList: () => [],
+  drag: true,
+  disabled: false,
+  limit: 5,
+  fileSize: 5,
+  fileType: () => ['.jpeg', '.png', '.jpg'],
+  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
+})
+
+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">
+.no-upload {
+  :deep(.el-upload) {
+    display: none;
+  }
+}
+.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--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;
+    }
+  }
+}
+//文件上传
+.file_upload_box {
+  .upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .el-button {
+      margin-right: 10px;
+    }
+  }
+}
+//图片上传
+.img_upload_box {
+  .no-border {
+    :deep(.el-upload--picture-card) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload-dragger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderRadius);
+      background-color: #fff !important;
+      &: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;
+    }
+    .el-upload-list__item,
+    .el-upload--picture-card {
+      width: v-bind(width);
+      height: v-bind(height);
+      // background-color: transparent;
+      border-radius: v-bind(borderRadius);
+    }
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .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: 15%;
+          font-size: 140%;
+        }
+        span {
+          font-size: 100%;
+        }
+      }
+    }
+    .el-upload-list__item {
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+    }
+    .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);
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 15px;
+    text-align: left;
+  }
+}
+.jzt-upload-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgb(0 0 0 / 50%);
+  .loading-icon {
+    font-size: 24px;
+    color: #fff;
+    animation: rotate 1.5s linear infinite;
+  }
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/JztUploadImg/index.scss

@@ -0,0 +1,138 @@
+// 公共样式
+.no-upload {
+  :deep(.el-upload) {
+    display: none;
+  }
+}
+.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--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 {
+  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;
+    }
+  }
+}
+//图片上传
+.img_upload_box {
+  .no-border {
+    :deep(.el-upload--picture-card) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload-dragger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      // border-radius: v-bind(borderRadius);
+      background-color: #fff !important;
+      &: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;
+    }
+    // .el-upload-list__item,
+    // .el-upload--picture-card {
+    //   width: v-bind(width);
+    //   height: v-bind(height);
+    //   // background-color: transparent;
+    //   border-radius: v-bind(borderRadius);
+    // }
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      // object-fit: contain;
+      object-fit: cover;
+    }
+    .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: 15%;
+          font-size: 140%;
+        }
+        span {
+          font-size: 100%;
+        }
+      }
+    }
+    .el-upload-list__item {
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 15px;
+    text-align: left;
+  }
+}

package/src/JztUploadImg/interface/index.ts

@@ -0,0 +1,22 @@
+// /* FileType */
+// declare namespace File {
+//   type ImageMimeType =
+//     | 'image/apng'
+//     | 'image/bmp'
+//     | 'image/gif'
+//     | 'image/jpeg'
+//     | 'image/pjpeg'
+//     | 'image/png'
+//     | 'image/svg+xml'
+//     | 'image/tiff'
+//     | 'image/webp'
+//     | 'image/x-icon'
+
+//   type ExcelMimeType = 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+
+//   type FileMimeType = 'image/jpeg' | 'image/pjpeg' | 'image/png' | 'image/webp' | 'image/x-icon' | 'application/pdf'
+
+//   type FilePostfixType = '.jpeg' | '.png' | '.png' | '.jpg' | '.pdf'
+
+//   type ImagePostfixType = ' .jpeg' | '.png' | '.png' | '.jpg'
+// }

package/src/SelectIcon/index.scss

@@ -0,0 +1,39 @@
+.icon-box {
+  width: 100%;
+  .el-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--el-text-color-regular);
+  }
+  :deep(.el-dialog__body) {
+    padding: 25px 20px 20px;
+    .el-input {
+      margin-bottom: 10px;
+    }
+    .icon-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 115px);
+      justify-content: space-evenly;
+      max-height: 70vh;
+      .icon-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 42px;
+        padding: 20px 30px;
+        cursor: pointer;
+        transition: all 0.2s;
+        &:hover {
+          transform: scale(1.3);
+        }
+        span {
+          margin-top: 5px;
+          line-height: 20px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}

package/src/SelectIcon/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="icon-box">
+    <el-input
+      ref="inputRef"
+      v-model="valueIcon"
+      v-bind="$attrs"
+      :placeholder="placeholder"
+      :clearable="clearable"
+      @clear="clearIcon"
+      @click="openDialog"
+    >
+      <template #append>
+        <el-button :icon="customIcons[iconValue]" />
+      </template>
+    </el-input>
+    <el-dialog
+      v-model="dialogVisible"
+      :title="placeholder"
+      top="50px"
+      width="66%"
+    >
+      <el-input
+        v-model="inputValue"
+        placeholder="搜索图标"
+        size="large"
+        :prefix-icon="Icons.Search"
+      />
+      <el-scrollbar v-if="Object.keys(iconsList).length">
+        <div class="icon-list">
+          <div
+            v-for="item in iconsList"
+            :key="item"
+            class="icon-item"
+            @click="selectIcon(item)"
+          >
+            <component :is="item"></component>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+      <el-empty v-else description="未搜索到您要找的图标~" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="SelectIcon">
+import { ref, computed } from "vue";
+import * as Icons from "@element-plus/icons-vue";
+
+interface SelectIconProps {
+  iconValue: string;
+  title?: string;
+  clearable?: boolean;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<SelectIconProps>(), {
+  iconValue: "",
+  title: "请选择图标",
+  clearable: true,
+  placeholder: "请选择图标",
+});
+
+// 重新接收一下，防止打包后 clearable 报错
+const valueIcon = ref(props.iconValue);
+
+// open Dialog
+const dialogVisible = ref(false);
+const openDialog = () => (dialogVisible.value = true);
+
+// 选择图标(触发更新父组件数据)
+const emit = defineEmits<{
+  "update:iconValue": [value: string];
+}>();
+const selectIcon = (item: any) => {
+  dialogVisible.value = false;
+  valueIcon.value = item.name;
+  emit("update:iconValue", item.name);
+  setTimeout(() => inputRef.value.blur(), 0);
+};
+
+// 清空图标
+const inputRef = ref();
+const clearIcon = () => {
+  valueIcon.value = "";
+  emit("update:iconValue", "");
+  setTimeout(() => inputRef.value.blur(), 0);
+};
+
+// 监听搜索框值
+const inputValue = ref("");
+const customIcons: { [key: string]: any } = Icons;
+const iconsList = computed((): { [key: string]: any } => {
+  if (!inputValue.value) return Icons;
+  let result: { [key: string]: any } = {};
+  for (const key in customIcons) {
+    if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1)
+      result[key] = customIcons[key];
+  }
+  return result;
+});
+</script>
+
+<style scoped lang="scss">
+@use "./index";
+</style>