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

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

@@ -2,27 +2,89 @@
  * @Author: wei.li
  * @Date: 2022-11-04 14:53:36
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-20 17:23:11
+ * @LastEditTime: 2025-08-18 11:17:57
  * @Description: form upload
 -->
 <template>
-  <div v-spinning="loading" class="ut-upload-wrapper">
-    <el-upload
-      v-model:file-list="fileList"
-      :action="baseUrl + '/ufil/file/uploadMultipart'"
-      :disabled="dataStatus === 'detail'"
-      list-type="picture-card"
-      :headers="headers"
-      :before-upload="beforeUpload"
-      :on-success="onSuccess"
-      :on-preview="onPreview"
-      :on-remove="handleRemove"
-      :http-request="httpRequest"
-    >
-      <template #default>
-        <i v-if="fileList.length < limit && dataStatus !== 'detail'" class="ri-add-line" />
-      </template>
-    </el-upload>
+  <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>
 
@@ -31,40 +93,63 @@ export default { name: 'FormUpload' };
 </script>
 
 <script setup lang="ts">
-import { ref, computed, getCurrentInstance } from 'vue';
+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;
-  limit?: number;
+  dataStatus?: string;
+  renderMode?: string;
+  size?: VxeUploadPropTypes.Size;
+  mode?: VxeUploadPropTypes.Mode;
+  limitCount?: number;
+  limitSize?: number;
   compassorSize?: number;
   quality?: number;
-  size?: number;
-  beforeUpload?: Function;
-  onSuccess?: Function;
-  onRemove?: Function;
+  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: 60,
-  limit: 1,
+  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 viewerApi = instance.appContext.config.globalProperties.$viewerApi;
 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';
@@ -75,20 +160,8 @@ const headers = computed(() => {
   };
   return headers;
 });
-
-const fileList = ref([]);
-const loading = ref(false);
-const display = ref('flex');
-const image_size = ref(props.size + 'px');
-const process_size = ref(props.size - 10 + 'px');
-
-const beforeUpload = file => {
-  if (props.beforeUpload) {
-    return props.beforeUpload(file);
-  }
-  loading.value = true;
-  return true;
-};
+const list = [];
+const fileList = ref<any>([]);
 
 const httpRequest = options => {
   if (imgTypes.includes(options.file.type) && options.file.size > 1024 * 1024 * props.compassorSize) {
@@ -111,73 +184,299 @@ const httpRequest = options => {
 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 => {
-      loading.value = false;
       file.path = data;
+      file.url = `${baseUrl}/ufil${file.path}`;
+      fileList.value.push(file);
+      console.log(file);
       resolve(file);
     })
     .catch(() => {
-      loading.value = false;
       reject(null);
     });
 };
 
-const onSuccess = file => {
-  loading.value = false;
-  if (props.onSuccess) {
-    return props.onSuccess(file);
+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]: file.path });
-    display.value = props.limit > fileList.value.length ? 'flex' : 'none';
+    Object.assign(props.record, { [field]: data.path });
   }
+  console.log(props.record, fileList);
 };
 
-const handleRemove = (uploadFile, uploadFiles) => {
-  if (props.onRemove) {
-    return props.onRemove(uploadFile, fileList);
+const handleRemove: VxeUploadPropTypes.RemoveMethod = ({ option }) => {
+  if (props.remove) {
+    return props.remove(option, fileList);
   }
-  loading.value = false;
-  console.log(uploadFile, uploadFiles);
-  display.value = 'flex';
-  emit('remove', uploadFile, fileList);
+  emit('remove', option, fileList);
 };
 
-const onPreview = file => {
-  if (imgTypes.includes(file.raw.type)) {
-    const src = `${baseUrl}/ufil${file.response.path}`;
-    viewerApi({ options: { toolbar: true, url: 'data-source' }, images: [{ src, 'data-source': src }] });
-  } else {
+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: File, fileList: any): void;
+  (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-wrapper {
-  .el-upload--picture-card {
-    display: v-bind(display);
-    width: v-bind(image_size) !important;
-    height: v-bind(image_size) !important;
+.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;
+      }
+    }
   }
+}
 
-  .el-upload-list--picture-card .el-upload-list__item {
-    width: v-bind(image_size) !important;
-    height: v-bind(image_size) !important;
+.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;
+      }
+    }
   }
+}
 
-  .el-upload-list--picture-card .el-progress {
-    width: v-bind(process_size) !important;
+.ut-upload-item--xs {
+  position: relative;
+  width: 48px;
+  height: 48px;
 
-    .el-progress-circle {
-      width: v-bind(process_size) !important;
-      height: v-bind(process_size) !important;
+  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>

package/src/components/udp/form.vue

@@ -2,7 +2,7 @@
  * @Author: wei.li
  * @Date: 2022-03-02 17:07:59
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-30 18:57:09
+ * @LastEditTime: 2025-08-19 10:19:16
  * @Description: SuForm
 -->
 
@@ -10,18 +10,18 @@
   <div class="width: 100%">
     <vxe-form
       ref="xForm"
-      v-model:collapse-status="collapseStatus"
       :data="record"
       :items="formItems"
       :rules="rules"
       :loading="loading"
       :vertical="vertical"
-      title-align="right"
       :title-width="titleWidth"
+      :disabled="dataStatus === 'detail'"
+      title-align="right"
+      title-bold
+      v-bind="$attrs"
     >
-      <template #dividerPrefix>
-        <div class="w-2 h-4 bg-amber-600">5555</div>
-      </template>
+      <template #dividerPrefix />
       <template #collapseNode>
         <div class="flex justify-start">
           <vxe-checkbox
@@ -30,6 +30,7 @@
             :checked-value="false"
             :unchecked-value="true"
             class="pl-10"
+            @change="onChange"
           />
         </div>
       </template>
@@ -83,9 +84,13 @@ const rules = computed(() => {
 
 const formItems = computed(() => {
   if (!props.items.length) return props.items;
-  return formatItems(props.items, props.dataStatus, 6);
+  return formatItems(props.items, 'edit', 6);
 });
 
+const onChange = () => {
+  xForm.value.toggleCollapse();
+};
+
 /**
  * @deprecated
  * @description 使用validate替换

package/src/components/udp/grid.vue

@@ -31,27 +31,11 @@
 <script lang="ts" setup>
 // @ts-nocheck
 import { useI18n } from 'vue-i18n';
-import {
-  ref,
-  onBeforeMount,
-  reactive,
-  getCurrentInstance,
-  toRaw,
-  useAttrs,
-  onUnmounted,
-  nextTick
-} from 'vue';
+import { ref, onBeforeMount, reactive, getCurrentInstance, toRaw, useAttrs, onUnmounted, nextTick } from 'vue';
 import { VxeGridProps } from 'vxe-table';
 import Sortable from 'sortablejs';
 import { clone } from 'xe-utils';
-import {
-  formatGridItems,
-  i18nColums,
-  formatRules,
-  errorMessage,
-  dbstorage,
-  warnMessage
-} from '@utogether/utils';
+import { formatGridItems, i18nColums, formatRules, errorMessage, dbstorage, warnMessage } from '@utogether/utils';
 import {
   queryAll,
   query,

package/src/components/udp/lov.vue

@@ -18,18 +18,8 @@
         <vxe-grid ref="xgrid" v-bind="data" resizable @cell-dblclick="onCellClick" />
       </template>
       <template #footer>
-        <vxe-button
-          :content="$t('message.btn.cancel')"
-          icon="ri-close-line"
-          status="warning"
-          @click="onClose"
-        />
-        <vxe-button
-          :content="$t('message.btn.confirm')"
-          icon="ri-save-3-line"
-          status="primary"
-          @click="onConfirm"
-        />
+        <vxe-button :content="$t('message.btn.cancel')" icon="ri-close-line" status="warning" @click="onClose" />
+        <vxe-button :content="$t('message.btn.confirm')" icon="ri-save-3-line" status="primary" @click="onConfirm" />
       </template>
     </vxe-modal>
     <el-dialog
@@ -49,18 +39,8 @@
         </div>
       </template>
       <template #footer>
-        <vxe-button
-          :content="$t('message.btn.cancel')"
-          icon="ri-close-line"
-          status="warning"
-          @click="onClose"
-        />
-        <vxe-button
-          :content="$t('message.btn.confirm')"
-          icon="ri-save-3-line"
-          status="primary"
-          @click="onConfirm"
-        />
+        <vxe-button :content="$t('message.btn.cancel')" icon="ri-close-line" status="warning" @click="onClose" />
+        <vxe-button :content="$t('message.btn.confirm')" icon="ri-save-3-line" status="primary" @click="onConfirm" />
       </template>
     </el-dialog>
     <vxe-input
@@ -150,9 +130,7 @@ const data = reactive<VxeGridProps>({
     },
     ajax: {
       query: ({ page, form }) => {
-        const commonParam = cookies.get('kCookies_param')
-          ? JSON.parse(cookies.get('kCookies_param'))
-          : {};
+        const commonParam = cookies.get('kCookies_param') ? JSON.parse(cookies.get('kCookies_param')) : {};
         let queryParams = Object.assign({}, form, commonParam, props.defaultParams);
         queryParams.pageNum = page?.currentPage || 1;
         queryParams.pageSize = page?.pageSize || 20;

package/src/components/udp/upload.vue

@@ -361,9 +361,7 @@ const setErrorMessage = (array: ITableColProps[]) => {
 const formatterData = (formatterType: string) => {
   gridOptions.columns!.forEach((col: any) => {
     if (formatterType === 'toSave') {
-      const commonParam = cookies.get('kCookies_param')
-        ? JSON.parse(cookies.get('kCookies_param')!)
-        : {};
+      const commonParam = cookies.get('kCookies_param') ? JSON.parse(cookies.get('kCookies_param')!) : {};
       dataList.forEach(data => {
         data[col.mapField] = data[col.field];
         Object.assign(data, commonParam, props.defaultParams);