@utogether/udp-core 1.0.1-beta.1 → 1.0.1-beta.2

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

@@ -2,7 +2,7 @@
  * @Author: wei.li
  * @Date: 2022-11-04 14:53:36
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-14 18:32:47
+ * @LastEditTime: 2025-07-20 17:23:11
  * @Description: form upload
 -->
 <template>
@@ -10,15 +10,17 @@
     <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 class="ri-add-line" />
+        <i v-if="fileList.length < limit && dataStatus !== 'detail'" class="ri-add-line" />
       </template>
     </el-upload>
   </div>
@@ -31,15 +33,16 @@ export default { name: 'FormUpload' };
 <script setup lang="ts">
 import { ref, computed, getCurrentInstance } from 'vue';
 import { cookies } from '@utogether/utils';
-// import type { UploadProps } from "element-plus";
-// import { loadEnv } from "@build/index";
-
-// const { VITE_BASE_URL } = loadEnv();
+import compressorjs from 'compressorjs';
 
 export interface IProps {
   record: object;
   field: string;
+  dataStatus: string;
   limit?: number;
+  compassorSize?: number;
+  quality?: number;
+  size?: number;
   beforeUpload?: Function;
   onSuccess?: Function;
   onRemove?: Function;
@@ -49,11 +52,19 @@ const props = withDefaults(defineProps<IProps>(), {
     return {};
   },
   field: '',
-  limit: 1
+  dataStatus: '',
+  size: 60,
+  limit: 1,
+  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 imgTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
 const headers = computed(() => {
   const kTOKENKEY = 'authorized-token';
@@ -68,23 +79,59 @@ const headers = computed(() => {
 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);
   }
-  console.log(file);
   loading.value = true;
   return true;
 };
 
-const onSuccess = response => {
+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);
+
+  return serviceApi
+    .post('/ufil/file/uploadMultipart', formBody, { headers })
+    .then(async data => {
+      loading.value = false;
+      file.path = data;
+      resolve(file);
+    })
+    .catch(() => {
+      loading.value = false;
+      reject(null);
+    });
+};
+
+const onSuccess = file => {
   loading.value = false;
   if (props.onSuccess) {
-    return props.onSuccess(response);
+    return props.onSuccess(file);
   } else {
     const field = props.field;
-    Object.assign(props.record, { [field]: response.data });
+    Object.assign(props.record, { [field]: file.path });
     display.value = props.limit > fileList.value.length ? 'flex' : 'none';
   }
 };
@@ -99,8 +146,12 @@ const handleRemove = (uploadFile, uploadFiles) => {
   emit('remove', uploadFile, fileList);
 };
 
-const onPreview = () => {
-  console.log('....');
+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 emit = defineEmits<{
   (e: 'remove', file: File, fileList: any): void;
@@ -111,21 +162,21 @@ const emit = defineEmits<{
 .ut-upload-wrapper {
   .el-upload--picture-card {
     display: v-bind(display);
-    width: 60px !important;
-    height: 60px !important;
+    width: v-bind(image_size) !important;
+    height: v-bind(image_size) !important;
   }
 
   .el-upload-list--picture-card .el-upload-list__item {
-    width: 60px !important;
-    height: 60px !important;
+    width: v-bind(image_size) !important;
+    height: v-bind(image_size) !important;
   }
 
   .el-upload-list--picture-card .el-progress {
-    width: 50px !important;
+    width: v-bind(process_size) !important;
 
     .el-progress-circle {
-      width: 50px !important;
-      height: 50px !important;
+      width: v-bind(process_size) !important;
+      height: v-bind(process_size) !important;
     }
   }
 }

package/src/main.ts

@@ -1,109 +1,109 @@
-/*
- * @Author: wei.li
- * @Date: 2022-10-18 18:13:54
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-29 15:35:32
- * @Description: file content
- */
-import { createApp, type Directive } from 'vue';
-import App from './App.vue';
-import router from './router';
-import { setViews } from './router';
-import { setupStore } from './store';
-import { setConfig, setSystemEnv } from './config';
-import { useI18n } from '../src/plugins/i18n';
-import { setTableConfig } from '../src/plugins/vxe-table';
-import { injectResponsiveStorage } from './utils/storage';
-import hasAuthority from './utils/authority';
-import { getServiceApi, getBaseURL, setRouter } from './api';
-
-import 'nprogress/nprogress.css';
-// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
-import './style/tailwind.css';
-// // 引入重置样式
-import './style/reset.scss';
-// 导入公共样式
-import './style/index.scss';
-
-import 'viewerjs/dist/viewer.css';
-
-import VueViewer from 'v-viewer';
-
-// import SuTable from './components/SuTable/SuTable.vue';
-
-// import {
-//   UtButton,
-// UGrid,
-//   UtDivider,
-// UtModalForm2,
-// FormUpload2
-//   UtForm,
-//   UtModalGrid,
-//   UtContent,
-//   UtCountdown,
-//   UtIconSelect,
-//   UtCalendar
-// uAttachment
-// } from './components/udp';
-
-const app = createApp(App);
-
-// 全局注册`@iconify/vue`图标库
-import { IconifyIconOffline, FontIcon } from './components/ReIcon';
-// 全局注册`vue-tippy`
-import 'tippy.js/dist/tippy.css';
-import 'tippy.js/animations/perspective.css';
-import VueTippy from 'vue-tippy';
-
-app.use(VueTippy, {
-  defaultProps: { animation: 'perspective' }
-});
-
-// 自定义指令
-import * as directives from './directives';
-
-const setGlobal = app => {
-  app.config.globalProperties.$hasAuthority = hasAuthority;
-  app.config.globalProperties.$serviceApi = getServiceApi();
-  app.config.globalProperties.$url = getBaseURL();
-};
-
-const setGlobalDirective = app => {
-  Object.keys(directives).forEach(key => {
-    app.directive(key, (directives as { [key: string]: Directive })[key]);
-  });
-};
-
-const init = ({ config, lang, views, env, tableConfig }) => {
-  app.use(router);
-  setRouter(router);
-  setConfig(app, config);
-  setSystemEnv(env);
-  setViews(views);
-  setTableConfig(tableConfig);
-  return new Promise(resolve => {
-    useI18n(app, lang);
-    app.component('IconifyIconOffline', IconifyIconOffline);
-    app.component('FontIcon', FontIcon);
-    // app.component('uAttachment', uAttachment).component('UGrid', UGrid);
-    //   .component('UtDivider', UtDivider)
-    // .component('UtModalForm2', UtModalForm2)
-    // .component('FormUpload2', FormUpload2);
-    //   .component('UtForm', UtForm)
-    //   .component('UtContent', UtContent)
-    //   .component('UtIconSelect', UtIconSelect)
-    //   .component('UtCountdown', UtCountdown)
-    //   .component('UtCalendar', UtCalendar)
-    //   .component('UtModalGrid', UtModalGrid);
-    app.use(VueViewer, { defaultOptions: { zIndex: 9999 } });
-    setGlobal(app);
-    setGlobalDirective(app);
-    // 全局组件
-    setupStore(app);
-    injectResponsiveStorage(app, config);
-    const result = { app, router };
-    resolve(result);
-  });
-};
-
-export default init;
+/*
+ * @Author: wei.li
+ * @Date: 2022-10-18 18:13:54
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-29 15:35:32
+ * @Description: file content
+ */
+import { createApp, type Directive } from 'vue';
+import App from './App.vue';
+import router from './router';
+import { setViews } from './router';
+import { setupStore } from './store';
+import { setConfig, setSystemEnv } from './config';
+import { useI18n } from '../src/plugins/i18n';
+import { setTableConfig } from '../src/plugins/vxe-table';
+import { injectResponsiveStorage } from './utils/storage';
+import hasAuthority from './utils/authority';
+import { getServiceApi, getBaseURL, setRouter } from './api';
+
+import 'nprogress/nprogress.css';
+// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
+import './style/tailwind.css';
+// // 引入重置样式
+import './style/reset.scss';
+// 导入公共样式
+import './style/index.scss';
+
+import 'viewerjs/dist/viewer.css';
+
+import VueViewer from 'v-viewer';
+
+// import SuTable from './components/SuTable/SuTable.vue';
+
+// import {
+//   UtButton,
+// UGrid,
+//   UtDivider,
+// UtModalForm2,
+// FormUpload2
+//   UtForm,
+//   UtModalGrid,
+//   UtContent,
+//   UtCountdown,
+//   UtIconSelect,
+//   UtCalendar
+// uAttachment
+// } from './components/udp';
+
+const app = createApp(App);
+
+// 全局注册`@iconify/vue`图标库
+import { IconifyIconOffline, FontIcon } from './components/ReIcon';
+// 全局注册`vue-tippy`
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/perspective.css';
+import VueTippy from 'vue-tippy';
+
+app.use(VueTippy, {
+  defaultProps: { animation: 'perspective' }
+});
+
+// 自定义指令
+import * as directives from './directives';
+
+const setGlobal = app => {
+  app.config.globalProperties.$hasAuthority = hasAuthority;
+  app.config.globalProperties.$serviceApi = getServiceApi();
+  app.config.globalProperties.$url = getBaseURL();
+};
+
+const setGlobalDirective = app => {
+  Object.keys(directives).forEach(key => {
+    app.directive(key, (directives as { [key: string]: Directive })[key]);
+  });
+};
+
+const init = ({ config, lang, views, env, tableConfig }) => {
+  app.use(router);
+  setRouter(router);
+  setConfig(app, config);
+  setSystemEnv(env);
+  setViews(views);
+  setTableConfig(tableConfig);
+  return new Promise(resolve => {
+    useI18n(app, lang);
+    app.component('IconifyIconOffline', IconifyIconOffline);
+    app.component('FontIcon', FontIcon);
+    // app.component('uAttachment', uAttachment).component('UGrid', UGrid);
+    //   .component('UtDivider', UtDivider)
+    // .component('UtModalForm2', UtModalForm2)
+    // app.component('FormUpload2', FormUpload2);
+    //   .component('UtForm', UtForm)
+    //   .component('UtContent', UtContent)
+    //   .component('UtIconSelect', UtIconSelect)
+    //   .component('UtCountdown', UtCountdown)
+    //   .component('UtCalendar', UtCalendar)
+    //   .component('UtModalGrid', UtModalGrid);
+    app.use(VueViewer, { defaultOptions: { zIndex: 9999 } });
+    setGlobal(app);
+    setGlobalDirective(app);
+    // 全局组件
+    setupStore(app);
+    injectResponsiveStorage(app, config);
+    const result = { app, router };
+    resolve(result);
+  });
+};
+
+export default init;

package/src/plugins/vxe-table/index.ts

@@ -1,46 +1,53 @@
-/*
- * @Author: levi7754 levi7754@163.com
- * @Date: 2024-06-05 14:32:03
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-16 15:36:56
- * @FilePath: /udp-front/packages/udp-core/src/plugins/vxe-table/index.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-import 'xe-utils';
-import { merge } from 'xe-utils';
-import { geti18n, transformI18n } from '../i18n/index';
-// import { storageLocal } from '@utogether/utils';
-// import { VxetableRender } from '@utogether/utils';
-import { VxetableRender } from './render';
-import { getServiceApi } from '../../api';
-
-import VXETable, { VxeUI } from 'vxe-table';
-// import './render.tsx';
-
-// const dict = storageLocal.getItem('kLov');
-VxetableRender(VXETable, { serviceApi: getServiceApi(), i18n: transformI18n });
-
-// 全局默认参数
-const defaultConfig = {
-  // 对组件内置的提示语进行国际化翻译
-  // @ts-ignore
-  i18n: (key, args) => geti18n().global.t(key, args),
-  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
-  translate(key) {
-    // 例如，只翻译 "message." 开头的键值
-    const NAMESPACED = ['message.', 'el.'];
-    if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
-      return geti18n().global.t.call(geti18n().global.locale, key);
-    }
-    return key;
-  }
-};
-
-export function setTableConfig(config = {}) {
-  VXETable.setConfig(merge(defaultConfig, config));
-}
-
-export function setTheme(theme) {
-  // 切换为暗黑主题
-  VxeUI.setTheme(theme);
-}
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2024-06-05 14:32:03
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-20 11:07:31
+ * @FilePath: /udp-front/packages/udp-core/src/plugins/vxe-table/index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import 'xe-utils';
+import { merge } from 'xe-utils';
+import { geti18n, transformI18n } from '../i18n/index';
+// import { storageLocal } from '@utogether/utils';
+import { VxetableRender } from '@utogether/utils';
+// import { VxetableRender } from './render';
+import { getServiceApi } from '../../api';
+
+import VXETable, { VxeUI } from 'vxe-table';
+// import './render.tsx';
+
+// const dict = storageLocal.getItem('kLov');
+VxetableRender(VXETable, { serviceApi: getServiceApi(), i18n: transformI18n });
+
+// 全局默认参数
+const defaultConfig = {
+  // 对组件内置的提示语进行国际化翻译
+  // @ts-ignore
+  i18n: (key, args) => geti18n().global.t(key, args),
+  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
+  translate(key) {
+    // 例如，只翻译 "message." 开头的键值
+    const NAMESPACED = ['message.', 'el.'];
+    if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
+      return geti18n().global.t.call(geti18n().global.locale, key);
+    }
+    return key;
+  }
+};
+
+export function setTableConfig(config = {}) {
+  VXETable.setConfig(merge(defaultConfig, config));
+
+  VxeUI.interceptor.add('event.clearEdit', {
+    tableInterceptorMethod(params) {
+      const { $event } = params;
+      if ($event.target.className.indexOf('vxe-table--ignore-clear') > -1) return false;
+    }
+  });
+}
+
+export function setTheme(theme) {
+  // 切换为暗黑主题
+  VxeUI.setTheme(theme);
+}