@utogether/udp-core 1.0.1-beta.9 → 1.0.2

package/src/components/udp/form-upload.vue

@@ -1,482 +0,0 @@
-<!--
- * @Author: wei.li
- * @Date: 2022-11-04 14:53:36
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-08-18 11:17:57
- * @Description: form upload
--->
-<template>
-  <div class="flex w-full flex-wrap">
-    <div class="ut-upload-list flex flex-wrap items-center">
-      <div v-for="(item, idx) in fileList" :key="item" :class="'ut-upload-item--' + size">
-        <div class="ut-upload--image flex items-center justify-center">
-          <img
-            v-if="getItemType(item) === 'img'"
-            :src="item.url"
-            class="ut-image select-none"
-            @click="onPreview(item)"
-          />
-          <div v-else-if="renderMode === 'item' || dataStatus !== 'detail'" class="ut-image-hover">
-            <div class="ut-image-file--wrapper">
-              <i :class="getItemType(item)" class="ut-image-file ut-image" style="line-height: 1" />
-              <div class="px-1 ut-image" :style="{ fontSize: size === 'small' ? '11px' : '10px' }">
-                {{ maskFilenameFromPath(item) }}
-              </div>
-            </div>
-            <i
-              class="vxe-icon-download ut-download-icon"
-              :style="{ fontSize: renderMode === 'item' ? '60px' : '48px' }"
-              @click="onDownload(item)"
-            />
-          </div>
-          <vxe-tooltip v-else :content="item.name" class="cursor-pointer">
-            <div class="ut-image-hover">
-              <div class="ut-image-file--wrapper">
-                <i :class="getItemType(item)" class="ut-image-file ut-image" style="font-size: 32px" />
-                <div class="px-1 ut-image" :style="{ fontSize: size === 'small' ? '11px' : '10px' }">
-                  {{ maskFilenameFromPath(item) }}
-                </div>
-              </div>
-              <i
-                class="vxe-icon-download ut-download-icon"
-                :style="{ fontSize: renderMode === 'item' ? '60px' : '48px' }"
-                @click="onDownload(item)"
-              />
-            </div>
-          </vxe-tooltip>
-        </div>
-        <div v-if="dataStatus !== 'detail'" class="ut-upload--image-item-btn-wrapper">
-          <div class="ut-upload-remove--btn"><i class="vxe-icon-close" @click="onRemove(item, idx)" /></div>
-        </div>
-      </div>
-      <div
-        v-if="dataStatus !== 'detail'"
-        :class="'ut-upload-item--' + size"
-        class="ut-upload--btn"
-        style="border: 1px dashed var(--vxe-ui-input-border-color)"
-        @click="onStartUpload"
-      >
-        <div class="flex items-center justify-center h-full flex-col cursor-pointer ut-upload--btn">
-          <span v-if="!loading" class="vxe-icon-add" style="font-size: 18px" />
-          <div v-if="!loading" style="font-size: 11px; padding: 0 1px; text-align: center">点击上传</div>
-          <vxe-icon v-if="loading" name="spinner" status="primary" roll style="font-size: 24px" />
-          <div v-if="loading" style="font-size: 11px; padding: 0 1px; text-align: center">{{ progressText }}</div>
-        </div>
-      </div>
-    </div>
-    <vxe-upload
-      ref="xupload"
-      v-model="list"
-      style="display: none"
-      v-bind="$attrs"
-      :limit-count="limitCount"
-      :limit-size="limitSize"
-      :size="size"
-      :mode="mode"
-      :single-mode="singleMode"
-      :image-types="imageTypes"
-      :auto-hidden-button="autoHiddenButton"
-      :show-error-status="showErrorStatus"
-      :remove-method="handleRemove"
-      :upload-method="httpRequest"
-      :multiple="multiple"
-      :show-download-button="showDownloadButton"
-      :show-list="false"
-      show-progress
-      @upload-success="onSuccess"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-export default { name: 'FormUpload' };
-</script>
-
-<script setup lang="ts">
-import { ref, computed, onBeforeMount, getCurrentInstance } from 'vue';
-import { cookies } from '@utogether/utils';
-import compressorjs from 'compressorjs';
-import { isString, isArray } from 'xe-utils';
-import { VxeUI, VxeUploadPropTypes } from 'vxe-pc-ui';
-import axios from 'axios';
-
-export interface IProps {
-  record: object;
-  imageTypes?: Array<string>;
-  field: string;
-  dataStatus?: string;
-  renderMode?: string;
-  size?: VxeUploadPropTypes.Size;
-  mode?: VxeUploadPropTypes.Mode;
-  limitCount?: number;
-  limitSize?: number;
-  compassorSize?: number;
-  quality?: number;
-  singleMode?: boolean;
-  autoHiddenButton?: boolean;
-  showErrorStatus?: boolean;
-  showDownloadButton?: boolean;
-  multiple?: boolean;
-  success?: Function;
-  remove?: Function;
-}
-const props = withDefaults(defineProps<IProps>(), {
-  record: () => {
-    return {};
-  },
-  imageTypes: () => {
-    return ['jpg', 'jpeg', 'png', 'gif'];
-  },
-  field: '',
-  renderMode: 'item',
-  dataStatus: '',
-  size: 'mini',
-  mode: '',
-  singleMode: false,
-  autoHiddenButton: false,
-  showDownloadButton: false,
-  multiple: false,
-  limitSize: 30,
-  limitCount: 9,
-  quality: 0.6,
-  compassorSize: 2
-});
-
-const instance = getCurrentInstance()!;
-const baseUrl = instance.appContext.config.globalProperties.$url;
-const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
-const progressText = ref('');
-const loading = ref(false);
-
-const imgTypes = ['image/gif', 'image/jpeg', 'image/png'];
-const xupload = ref(null);
-
-const headers = computed(() => {
-  const kTOKENKEY = 'authorized-token';
-  const token = cookies.get(kTOKENKEY)!;
-  const data = JSON.parse(token);
-  const headers = {
-    Authorization: 'Bearer ' + data.accessToken
-  };
-  return headers;
-});
-const list = [];
-const fileList = ref<any>([]);
-
-const httpRequest = options => {
-  if (imgTypes.includes(options.file.type) && options.file.size > 1024 * 1024 * props.compassorSize) {
-    return new Promise((resolve, reject) => {
-      new compressorjs(options.file, {
-        quality: props.quality,
-        mimeType: options.file.type,
-        success(result: File) {
-          const file = new File([result], result.name, { type: result.type });
-          uploadProcess(resolve, reject, file);
-          console.log({ result, file });
-        }
-      });
-    });
-  } else {
-    return new Promise((resolve, reject) => uploadProcess(resolve, reject, options.file));
-  }
-};
-
-const uploadProcess = (resolve, reject, file) => {
-  const formBody = new FormData();
-  formBody.append('file', file);
-  const url = baseUrl + '/ufil/file/uploadMultipart';
-  loading.value = true;
-  return axios
-    .post(url, formBody, {
-      headers: Object.assign({ 'Content-Type': 'multipart/form-data' }, headers.value),
-      onUploadProgress(progressEvent) {
-        const progress = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0));
-        progressText.value = `进度${progress}%`;
-      }
-    })
-    .then(async response => {
-      progressText.value = `处理中...`;
-      file.path = response.data.data;
-      file.url = `${baseUrl}/ufil${file.path}`;
-      fileList.value.push(file);
-      console.log(file);
-      loading.value = false;
-      resolve(file);
-    })
-    .catch(() => {
-      loading.value = false;
-      reject(null);
-    });
-
-  return serviceApi
-    .post('/ufil/file/uploadMultipart', formBody, { headers })
-    .then(async data => {
-      file.path = data;
-      file.url = `${baseUrl}/ufil${file.path}`;
-      fileList.value.push(file);
-      console.log(file);
-      resolve(file);
-    })
-    .catch(() => {
-      reject(null);
-    });
-};
-
-const onStartUpload = () => {
-  xupload.value.choose();
-};
-
-const onSuccess = ({ data }) => {
-  if (props.success) {
-    return props.success(data);
-  } else {
-    const field = props.field;
-    Object.assign(props.record, { [field]: data.path });
-  }
-  console.log(props.record, fileList);
-};
-
-const handleRemove: VxeUploadPropTypes.RemoveMethod = ({ option }) => {
-  if (props.remove) {
-    return props.remove(option, fileList);
-  }
-  emit('remove', option, fileList);
-};
-
-const onRemove = (file, idx) => {
-  fileList.value.splice(idx, 1);
-  emit('remove', file, fileList);
-};
-
-const onPreview = item => {
-  // console.log(item.url);
-  VxeUI.previewImage({ activeIndex: 0, urlList: [item.url] });
-};
-
-const getItemType = item => {
-  const type = item.type || item.url.split('.').pop();
-  let icon = '';
-  switch (type) {
-    case 'jpg':
-    case 'png':
-    case 'jpeg':
-    case 'webp':
-    case 'image/jpeg':
-    case 'image/png':
-    case 'image/gif':
-      icon = 'img';
-      break;
-    case 'doc':
-    case 'docx':
-      icon = 'vxe-icon-file-word';
-      break;
-    case 'xlsx':
-    case 'xls':
-      icon = 'vxe-icon-file-excel';
-      break;
-    case 'pdf':
-      icon = 'vxe-icon-file-pdf';
-      break;
-    case 'txt':
-      icon = 'vxe-icon-file-txt';
-      break;
-    case 'ppt':
-      icon = 'vxe-icon-file-ppt';
-      break;
-    case 'markdown':
-      icon = 'vxe-icon-file-markdown';
-      break;
-    case 'apk':
-      icon = 'ri-android-fill';
-      break;
-    case 'ipa':
-      icon = 'ri-apple-line';
-      break;
-
-    default:
-      icon = 'vxe-icon-file';
-      break;
-  }
-  return icon;
-};
-
-const maskFilenameFromPath = file => {
-  let total = props.size === 'small' ? 10 : 9;
-  // 提取纯文件名（含扩展名）
-  const extractFilename = file => {
-    if (file.name) return file.name;
-    const path = file.url;
-    const separator = path.includes('\\') ? '\\' : '/';
-    return path.split(separator).pop();
-  };
-
-  // 处理文件名脱敏
-  const maskFilename = filename => {
-    const dotPos = filename.lastIndexOf('.');
-    const name = dotPos > 0 ? filename.substring(0, dotPos) : filename;
-    const ext = dotPos > 0 ? filename.substring(dotPos) : '';
-
-    if (name.length <= total) return filename;
-
-    const prefix = props.renderMode === 'item' ? name.substring(0, total - 5) : '';
-    const suffix = name.substring(name.length - (total - 6));
-    return `${prefix}...${suffix}${ext}`;
-  };
-
-  return maskFilename(extractFilename(file));
-};
-
-const onDownload = file => {
-  console.log(file);
-};
-const emit = defineEmits<{
-  (e: 'remove', file: any, fileList: any): void;
-}>();
-
-onBeforeMount(() => {
-  const fileUrl = props.record[props.field];
-  fileList.value = [
-    // { name: '深圳友聚信息技术开发文档.doc', url: `xxx.pdf`, _X_KEY: '1111e' },
-    // { name: '深圳友聚信息技术开发文档.doc', url: `xxx.xlsx`, _X_KEY: '111122' },
-    // {
-    //   name: '15806d21e3f445dcae0e2e0825c76a79.apk',
-    //   url: `${baseUrl}/ufil/resource/image/20250817/15806d21e3f445dcae0e2e0825c76a79.apk`
-    // }
-  ];
-  if (fileUrl) {
-    if (fileUrl && isString(fileUrl)) {
-      const name = fileUrl.match(/[^\/\\]+$/)[0];
-      const file = { name, url: `${baseUrl}/ufil${fileUrl}` };
-      if (props.singleMode) {
-        fileList.value = file;
-      } else {
-        fileList.value.push(file);
-      }
-    } else if (isArray(fileUrl)) {
-      fileUrl.forEach(url => {
-        const name = url.match(/[^\/\\]+$/)[0];
-        fileList.value.push({ name, url: `${baseUrl}/ufil${url}` });
-      });
-    }
-  }
-  console.log('fileList');
-});
-</script>
-
-<style lang="scss">
-.ut-upload-item--small {
-  position: relative;
-  width: var(--vxe-ui-upload-image-wh-small);
-  height: var(--vxe-ui-upload-image-wh-small);
-
-  margin: var(--vxe-ui-layout-padding-half);
-  border: 1px solid var(--vxe-ui-input-border-color);
-  border-radius: var(--vxe-ui-base-border-radius);
-  .ut-upload--image {
-    position: relative;
-    border-radius: var(--vxe-ui-base-border-radius);
-    width: var(--vxe-ui-upload-image-wh-small);
-    height: var(--vxe-ui-upload-image-wh-small);
-    .ut-image-file--wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      .ut-image-file {
-        font-size: 48px;
-      }
-    }
-  }
-}
-
-.ut-upload-item--mini {
-  position: relative;
-  width: var(--vxe-ui-upload-image-wh-mini);
-  height: var(--vxe-ui-upload-image-wh-mini);
-
-  margin: var(--vxe-ui-layout-padding-half);
-  border: 1px solid var(--vxe-ui-input-border-color);
-  border-radius: var(--vxe-ui-base-border-radius);
-  .ut-upload--image {
-    position: relative;
-    border-radius: var(--vxe-ui-base-border-radius);
-    width: var(--vxe-ui-upload-image-wh-mini);
-    height: var(--vxe-ui-upload-image-wh-mini);
-    .ut-image-file--wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      .ut-image-file {
-        font-size: 42px;
-      }
-    }
-  }
-}
-
-.ut-upload-item--xs {
-  position: relative;
-  width: 48px;
-  height: 48px;
-
-  margin: var(--vxe-ui-layout-padding-half);
-  border: 1px solid var(--vxe-ui-input-border-color);
-  border-radius: var(--vxe-ui-base-border-radius);
-  .ut-upload--image {
-    position: relative;
-    border-radius: var(--vxe-ui-base-border-radius);
-    width: 48px;
-    height: 48px;
-    .ut-image-file--wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      .ut-image-file {
-        font-size: 32px;
-      }
-    }
-  }
-}
-
-.ut-upload--btn:hover {
-  border: 1px dashed var(--udp-theme-vxeColor);
-  color: var(--udp-theme-vxeColor);
-}
-
-.ut-upload--image-item-btn-wrapper {
-  display: inline-flex;
-  justify-content: center;
-  position: absolute;
-  top: calc(var(--vxe-ui-layout-padding-half) * -1);
-  right: calc(var(--vxe-ui-layout-padding-half) * -1);
-  .ut-upload-remove--btn {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 1.8em;
-    height: 1.8em;
-    font-size: 0.8em;
-    border-radius: 50%;
-    color: #fff;
-    background-color: var(--vxe-ui-status-error-color);
-    z-index: 3;
-    cursor: pointer;
-  }
-}
-
-.ut-image {
-  height: 100%;
-  border-radius: var(--vxe-ui-base-border-radius);
-}
-
-.ut-image-hover:hover > .ut-image-file--wrapper {
-  display: none;
-}
-
-.ut-image-hover:hover > .ut-download-icon {
-  display: block;
-}
-.ut-download-icon {
-  display: none;
-  cursor: pointer;
-}
-</style>