@skyfox2000/webui 1.2.8 → 1.2.9

package/src/typings/form.d.ts

@@ -99,6 +99,22 @@ export type EditorControl<T> = EditorControlOption & {
    ruleValidator?: Validator;
    /**
     * 验证结果
+    * @example
+    * ```ts
+    * const ruleResults: Record<string, ValidateError[]> = {};
+    * fieldNames.forEach((fieldName) => {
+    *    const rule = formRules[fieldName];
+    *    if (rule) {
+    *       ruleResults[fieldName] = [
+    *          {
+    *             field: fieldName,
+    *             fieldValue: fieldValue,
+    *             message: `数据重复`,
+    *          },
+    *       ];
+    *    }
+    * });
+    * ```
     */
    ruleResults: Ref<Record<string, ValidateError[]> | undefined>;
    /**
@@ -156,10 +172,10 @@ export interface InputFactoryItems<T> {
    /**
     * 输入项reload事件处理
     * @param event 事件名
-    * @param data 参数
+    * @param params 参数
     * @returns
     */
-   reloadHandler?: (event: string, data: Record<string, AnyData> | AnyData[]) => void;
+   reloadHandler?: (event: string, params: Record<string, AnyData> | AnyData[]) => void;
    /**
     * 输入项事件
     * @param evt 事件

package/src/typings/option.d.ts

@@ -43,6 +43,10 @@ export interface OptionProps {
     * 接口定义
     */
    url?: IUrlInfo;
+   /**
+    * 重载接口，默认false
+    */
+   reload?: boolean;
    /**
     * 接口自定义QOD参数
     */
@@ -73,8 +77,9 @@ export interface OptionProps {
     * - eventBus.emit(changeEvent, { Q参数 } | 数据[])
     * - 数据组仅用于联动显示
     * - 其它情况使用Query参数
+    * - 第一个参数为事件名，第二个参数为事件参数模板，支持模板 ${selectedValues}
     */
-   changeEvent?: string | string[];
+   changeEvent?: [string | string[], string];
 }
 
 import type { PropType } from 'vue';
@@ -124,6 +129,14 @@ export const OptionCommProps = {
       type: Object as PropType<IUrlInfo>,
       required: false,
    },
+   /**
+    * 重载接口，默认false
+    */
+   reload: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: false,
+   },
    /**
     * 接口自定义QOD参数
     */
@@ -169,9 +182,10 @@ export const OptionCommProps = {
     * - eventBus.emit(changeEvent, { Q参数 } | 数据[])
     * - 数据组仅用于联动显示
     * - 其它情况使用Query参数
+    * - 第一个参数为事件名，第二个参数为事件参数模板，支持模板 ${selectedValues}
     */
    changeEvent: {
-      type: [String, Array] as PropType<string | string[]>,
+      type: Array as PropType<[string | string[], string]>,
       required: false,
    },
 };

package/src/typings/page.d.ts

@@ -17,6 +17,7 @@ export enum ProviderKeys {
    'EditorControl' = 'Page.EditorControl',
    'GridControl' = 'Page.GridControl',
    'LabelText' = 'FormItem.LabelText',
+   'LabelWidth' = 'FormItem.LabelWidth',
    'RuleKey' = 'FormItem.RuleKey',
    'ErrInfo' = 'FormItem.ErrInfo',
 }

package/src/utils/download.ts

@@ -51,7 +51,7 @@ export const donwloadFromMinio = <T>(url: IUrlInfo, params?: ReqParams, pageCtrl
             const minioFile: MinioFile = result.data as unknown as MinioFile;
             // 提取内容和文件名
             const base64String = minioFile.Content!;
-            const fileName = minioFile.FileName!;
+            const fileName = minioFile.Key.split('/').pop()!;
 
             // 解码 Base64 字符串
             const byteCharacters = atob(base64String);

package/src/utils/eventbus.ts

@@ -25,7 +25,7 @@ class EventBus {
     */
    on(event: string, listener: (...args: any[]) => void) {
       if (!this.isValidPrefix(event)) {
-         console.error(`事件前缀不正确: ${event}`);
+         console.error(`事件前缀不正确: ${event}, 事件名必须以 ${Object.values(EventPrefix).join(', ')} 开头`);
          return;
       }
 

package/src/utils/file-upload.ts

@@ -3,6 +3,8 @@ import { hostUrl, IUrlInfo } from '@skyfox2000/fapi';
 import { getToken } from '@/utils/main-openapis';
 import { UploadFile, UploadStatus } from '@/typings/upload.d';
 import dayjs from 'dayjs';
+import message from 'vue-m-message';
+import { Ref } from 'vue';
 
 export class path {
    /**
@@ -44,18 +46,70 @@ export class AsyncUploader {
     * @param urlInfo 文件上传的 API 配置（IUrlInfo 对象）
     * @param maxConcurrent 最大允许并发上传的文件数量
     */
-   constructor(urlInfo: IUrlInfo, maxConcurrent: number) {
+   constructor(urlInfo: IUrlInfo, maxConcurrent: number = 3) {
       this.urlInfo = urlInfo;
       this.maxConcurrent = maxConcurrent;
    }
 
+   /**
+    * 执行上传
+    * @param fileList 文件列表
+    * @param loading 加载状态
+    * @param continueOnError 错误时是否继续上传
+    * @param onComplete 上传完成回调
+    * @param onProgress 上传进度回调
+    * @returns 上传结果
+    */
+   public async doUpload(
+      fileList: UploadFile[],
+      loading: Ref<boolean>,
+      continueOnError: boolean,
+      onComplete?: (result: boolean, files: UploadFile[]) => void,
+      onProgress?: (file: UploadFile) => void,
+   ): Promise<void> {
+      if (!fileList.length) return;
+
+      if (fileList.length === 0) {
+         message.warning('请选择上传的文件！');
+         return;
+      }
+
+      loading.value = true;
+
+      // 开始上传文件
+      await this.uploadFiles(fileList, onProgress, (files) => {
+         let result = false;
+         let err_count = 0;
+         for (const file of files) {
+            if (file.status === UploadStatus.Error) {
+               err_count++;
+            }
+         }
+         if (!err_count) {
+            message.success('全部文件上传成功！');
+            result = true;
+         } else if (err_count < files.length) {
+            if (continueOnError) {
+               message.error('上传结束，部分文件上传失败！');
+               message.warning('保存上传成功的文件！');
+               result = true;
+            } else {
+               message.error('上传结束，部分文件上传失败，取消保存！');
+            }
+         } else message.error('上传结束，所有文件上传失败！');
+
+         loading.value = false;
+         onComplete?.(result, files);
+      });
+   }
+
    /**
     * 上传多个文件，控制并发数量
     * @param files 文件列表（File[] 或 FileList）
     * @param onProgress 上传进度回调
     * @param onComplete 上传完成回调
     */
-   public async uploadFiles(
+   private async uploadFiles(
       fileList: UploadFile[],
       onProgress?: (file: UploadFile) => void,
       onComplete?: (files: UploadFile[]) => void,
@@ -93,7 +147,6 @@ export class AsyncUploader {
 
          // 等待所有上传任务完成
          await Promise.all(activeUploads);
-         onComplete?.(fileList);
       } catch (error) {
          console.error('上传失败：', error);
          fileList.forEach((file) => {
@@ -101,6 +154,7 @@ export class AsyncUploader {
             file.error = error instanceof Error ? error : new Error('上传失败');
             onProgress?.(file);
          });
+      } finally {
          onComplete?.(fileList);
       }
    }
@@ -119,19 +173,11 @@ export class AsyncUploader {
       onProgress?: (file: UploadFile) => void,
    ): Promise<void> {
       try {
-         // 更新文件状态为"正在上传"
-         file.status = UploadStatus.Uploading;
-
          await this.uploadFile(file, this.abortController!.signal, (percent) => {
             file.percent = percent;
             onProgress?.(file);
          });
-
-         // 更新文件状态为"上传成功"
-         file.status = UploadStatus.Success;
       } catch (error) {
-         // 更新文件状态为"上传失败"
-         file.status = UploadStatus.Error;
          file.error = error instanceof Error ? error : new Error('上传失败');
          console.error(file.error);
       } finally {
@@ -156,6 +202,9 @@ export class AsyncUploader {
       signal: AbortSignal,
       onProgress: (percent: number) => void,
    ): Promise<UploadFile> {
+      // 更新文件状态为"正在上传"
+      file.status = UploadStatus.Uploading;
+
       // 以 Promise 化的方式处理上传请求
       return new Promise((resolve, reject) => {
          // 创建表单数据
@@ -172,7 +221,7 @@ export class AsyncUploader {
          // 创建 XMLHttpRequest 对象
          const xhr = new XMLHttpRequest();
          const url = hostUrl(this.urlInfo);
-         if (url === false) return Promise.resolve(null);
+         if (url === false) return Promise.resolve(file);
          xhr.open('POST', url, true);
 
          // 设置请求头
@@ -222,22 +271,32 @@ export class AsyncUploader {
                         file.minioFile = {
                            ETag: res.data.ETag,
                            Bucket: res.data.Bucket,
+                           FileName: file.fileName,
                            Key: res.data.Key,
                            Size: res.data.Size,
+                           Type: file.type,
                            UpdateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-                           Status: UploadStatus.Online,
+                           Status: UploadStatus.Success,
                         };
+                     // 更新文件状态为"上传成功"
+                     file.status = UploadStatus.Success;
                      resolve(file); // 上传成功，返回解析后的 JSON 数据
                   } else {
                      // 如果 status 不是 success，则视为失败，提取 msg 作为错误信息
                      const error = res.msg;
+                     // 更新文件状态为"上传失败"
+                     file.status = UploadStatus.Error;
                      reject(new Error(error));
                   }
                } catch (error) {
+                  // 更新文件状态为"上传失败"
+                  file.status = UploadStatus.Error;
                   // 如果 JSON 格式无效，抛出错误
                   reject(new Error('无法解析返回的 JSON 数据: ' + error));
                }
             } else {
+               // 更新文件状态为"上传失败"
+               file.status = UploadStatus.Error;
                // 根据 HTTP 状态码判断上传失败的原因
                reject(new Error(`上传失败，状态码：${xhr.status}`));
             }
@@ -245,6 +304,8 @@ export class AsyncUploader {
 
          // 监听网络错误事件
          xhr.addEventListener('error', () => {
+            // 更新文件状态为"上传失败"
+            file.status = UploadStatus.Error;
             reject(new Error('上传失败，网络异常'));
          });
 
@@ -268,7 +329,6 @@ export class AsyncUploader {
       }
    }
 }
-
 // // 使用示例
 // (async () => {
 //    // 创建上传器实例，指定 API 配置和最大并发数
@@ -302,3 +362,4 @@ export class AsyncUploader {
 //       console.error('上传错误：', error);
 //    }
 // })();
+

package/src/utils/form-excel.ts

@@ -6,6 +6,7 @@ import { isEmpty } from './isEmpty';
 import message from 'vue-m-message';
 import { ValidateRule } from '@/typings/form';
 import { validMessages } from './form-validate';
+import { UploadFile } from '@/typings/upload';
 
 /**
  * Excel数据处理需要标记的单元格
@@ -44,7 +45,10 @@ export const processExcelFile = async (excelBuffer: ArrayBuffer) => {
 
    // 提取表头和数据
    const headers: string[] = [];
+   // 表头对象数据行
    const excelData: Record<string, any>[] = [];
+   // 纯数据行
+   const excelRows: any[][] = [];
 
    // 提取表头（第一行）
    worksheet.getRow(1).eachCell((cell) => {
@@ -86,6 +90,7 @@ export const processExcelFile = async (excelBuffer: ArrayBuffer) => {
       if (rowNumber > 1) {
          // 跳过表头
          const rowData: Record<string, any> = {};
+         const rowDataArray: any[] = [];
          headers.forEach((header, idx) => {
             if (header) {
                const cell = row.getCell(idx + 1);
@@ -116,13 +121,15 @@ export const processExcelFile = async (excelBuffer: ArrayBuffer) => {
                } else {
                   rowData[header] = null;
                }
+               rowDataArray.push(rowData[header]);
             }
          });
          excelData.push(rowData);
+         excelRows.push(rowDataArray);
       }
    });
 
-   return { workbook, worksheet, headers, excelData };
+   return { workbook, worksheet, headers, excelData, excelRows };
 };
 
 /**
@@ -521,3 +528,45 @@ export const checkExcelDuplicates = async (
 
    return { hasError: false }; // 没有重复数据
 };
+
+/**
+ * 将Excel数据追加到fileData中
+ * @param fileInfo 文件信息
+ * @param fileData 文件数据
+ * @param key 文件数据对象的键
+ * @param fields 需要追加的字段
+ * @returns
+ */
+export const appendExcelData = async (fileInfo: UploadFile, fileData: Record<string, any>, fields?: string[]) => {
+   const file = fileInfo.originFileObj as File;
+   if (file) {
+      // 使用ArrayBuffer读取文件
+      const buffer = await file.arrayBuffer();
+      // 获取Excel数据，并转换成指定数据对象结构
+      const excelFileData = await processExcelFile(buffer);
+      if (!excelFileData) {
+         message.error('上传的文件不是Excel文件');
+         return;
+      }
+      const { headers, excelRows, excelData } = excelFileData;
+      if (fields && fields.length > 0) {
+         fields.forEach((field) => {
+            switch (field) {
+               case 'Headers':
+                  fileData.Headers = headers;
+                  break;
+               case 'RawRows':
+                  fileData.RawRows = excelRows;
+                  break;
+               case 'Records':
+                  fileData.Records = excelData;
+                  break;
+            }
+         });
+      } else {
+         fileData.Headers = headers;
+         fileData.RawRows = excelRows;
+         fileData.Records = excelData;
+      }
+   }
+};

package/src/utils/form-validate.ts

@@ -2,7 +2,7 @@ import { inject, toRaw, ref, provide, watch, Ref } from 'vue';
 import Validator from 'async-validator';
 import { EditorControl, InputFactoryItems, ValidateError, ValidateRule } from '@/typings/form.d';
 import { ProviderKeys } from '@/typings/page.d';
-import { AnyData} from '@skyfox2000/fapi';
+import { AnyData } from '@skyfox2000/fapi';
 import { isEmpty } from './isEmpty';
 
 export let validMessages: Validator;
@@ -171,6 +171,23 @@ export const getRuleTexts = (rules?: Record<string, ValidateRule>) => {
 /**
  * 表单数据验证
  * @param editorCtrl 表单控制对象
+ * @example 规则示例
+ * {
+ *    Name: {
+ *       required: true,
+ *       message: '请输入站点名称',
+ *    },
+ *    Files: {
+ *       type: 'object',
+ *       fields: {
+ *          dev_list: {
+ *             type: 'array',
+ *             min: 1,
+ *             message: '请上传端口配置表',
+ *          },
+ *       },
+ *    },
+ * }
  */
 export const formValidate = async <T>(editorCtrl: EditorControl<T>) => {
    const formData: Record<string, AnyData> = editorCtrl.formData.value as Record<string, AnyData>;

package/src/utils/form.ts

@@ -29,6 +29,7 @@ export const onFormSaveAs = <T>(editorCtrl: EditorControl<T>) => {
  * @param pageCtrl 页面控制对象
  */
 export const onFormClose = <T>(editorCtrl: EditorControl<T>) => {
+   resetForm(editorCtrl);
    editorCtrl.visible.value = false;
 };
 
@@ -174,7 +175,8 @@ export const openNewForm = <T>(editorCtrl: EditorControl<T>) => {
  */
 export const setFormData = <T>(editorCtrl: EditorControl<T>, formData?: T) => {
    resetForm(editorCtrl);
-   editorCtrl.formData.value = { ...editorCtrl.formData.value, ...formData } as T;
+   const newFormData = { ...editorCtrl.formData.value, ...formData };
+   editorCtrl.formData.value = JSON.parse(JSON.stringify(newFormData)) as T;
 };
 
 /**

package/src/utils/options.ts

@@ -37,11 +37,12 @@ export const loadOption = (
 ) => {
    if (inputFactory && props.reloadEvent) {
       /// 接收事件，联动显示或者重新加载数据
-      inputFactory.reloadHandler = (_event: string, data: Record<string, AnyData> | AnyData[]) => {
-         optionEventHandler(url!, props, data, options);
+      inputFactory.reloadHandler = (_event: string, params: Record<string, AnyData> | AnyData[]) => {
+         optionEventHandler(url!, props, params, options);
       };
       eventBus.on(props.reloadEvent, inputFactory.reloadHandler);
    }
+
    if (props.data) {
       watch(
          () => props.data,
@@ -106,13 +107,15 @@ const updateOptions = (
 const optionEventHandler = (
    url: IUrlInfo,
    props: OptionProps,
-   data: Record<string, AnyData> | AnyData[],
+   params_data: Record<string, AnyData> | AnyData[],
    options: Ref<OptionItemProps[]>,
 ) => {
-   if (Array.isArray(data)) {
-      updateOptions(props, data, options, true);
+   if (Array.isArray(params_data)) {
+      // 数据组仅用于联动显示
+      updateOptions(props, params_data, options, true);
    } else {
-      doQueryOptions(url, props, { Query: data }, options);
+      // 其它情况使用Query参数
+      doQueryOptions(url, props, params_data, options);
    }
 };
 
@@ -134,7 +137,7 @@ export const unloadOption = (props: OptionProps, inputFactory?: InputFactoryItem
  * @param options 实际选择项
  */
 const doQueryOptions = (url: IUrlInfo, props: OptionProps, params: ReqParams, options: Ref<OptionItemProps[]>) => {
-   const newParams: ReqParams = combineParams(url.params, params, props.params);
+   const newParams: ReqParams = combineParams(url.params, props.params, params);
    queryOptions(url, props.fieldMap, newParams).then((results) => {
       // 使用url，由request负责转换，无需再次map转换
       const data = results as OptionItemProps[];
@@ -295,12 +298,35 @@ export const onOptionChanged = (
    }
 
    if (props.changeEvent) {
-      if (Array.isArray(props.changeEvent)) {
-         props.changeEvent.every((changeEvent: string) => {
-            eventBus.emit(changeEvent, values, selectedValues);
-         });
+      const [eventNames, eventParams] = props.changeEvent;
+      if (eventParams) {
+         if (Array.isArray(eventNames)) {
+            eventNames.every((eventName: string) => {
+               const eventParamsValue = parseFieldTemplate(eventParams, { selectedValues: values });
+               try {
+                  const eventJsonValue = JSON.parse(eventParamsValue);
+                  eventBus.emit(eventName, eventJsonValue, values, selectedValues);
+               } catch (error) {
+                  console.error('eventParamsValue: ', eventParamsValue, error);
+               }
+            });
+         } else {
+            const eventParamsValue = parseFieldTemplate(eventParams, { selectedValues: values });
+            try {
+               const eventJsonValue = JSON.parse(eventParamsValue);
+               eventBus.emit(eventNames, eventJsonValue, values, selectedValues);
+            } catch (error) {
+               console.error('eventParamsValue: ', eventParamsValue, error);
+            }
+         }
       } else {
-         eventBus.emit(props.changeEvent, values, selectedValues);
+         if (Array.isArray(eventNames)) {
+            eventNames.every((eventName: string) => {
+               eventBus.emit(eventName, selectedValues, values);
+            });
+         } else {
+            eventBus.emit(eventNames, selectedValues, values);
+         }
       }
    }
    // 触发 inputFactory 的 change 事件