@skyfox2000/webui 1.0.14 → 1.2.1

package/src/utils/form-validate.ts

@@ -0,0 +1,368 @@
+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 { isEmpty } from './isEmpty';
+
+export let validMessages: Validator;
+/**
+ * 全局文字提示参数配置
+ */
+export const initValidate = (messages?: Record<string, any>) => {
+   validMessages = new Validator({});
+   validMessages.messages({
+      required: '${label}不能为空',
+      types: {
+         number: '${label}必须是数字',
+      },
+      enum: '${label}必须是${enum}中的一个',
+      string: {
+         len: '${label}长度必须为${len}',
+         min: '${label}长度不能小于${min}',
+         max: '${label}长度不能大于${max}',
+         range: '${label}长度必须在${min}和${max}之间',
+      },
+      number: {
+         len: '${label}必须为${len}',
+         min: '${label}不能小于${min}',
+         max: '${label}不能大于${max}',
+         range: '${label}必须在${min}和${max}之间',
+      },
+      array: {
+         len: '${label}长度必须为${len}',
+         min: '${label}长度不能小于${min}',
+         max: '${label}长度不能大于${max}',
+         range: '${label}长度必须在${min}和${max}之间',
+      },
+      ...messages,
+   });
+};
+
+/**
+ * 获取验证规则的文字描述
+ * @param rules 规则对象
+ * @returns 规则描述数组，格式为{field: string; rules: string[]}[]
+ */
+export const getRuleTexts = (rules?: Record<string, ValidateRule>) => {
+   if (!rules || isEmpty(rules)) {
+      return [];
+   }
+
+   const result: { field: string; rules: string[] }[] = [];
+
+   // 获取预设消息模板
+   const messages = validMessages.messages();
+
+   // 处理单个规则函数，根据规则类型和属性获取相应的消息
+   const handleRule = (field: string, item: any, ruleTexts: string[]) => {
+      // 检查类型规则
+      const type = item.type;
+      if (type && messages.types && type in messages.types) {
+         // 类型要求
+         const typeMsg = messages.types[type as keyof typeof messages.types];
+         addMessage(typeMsg, field, { type }, ruleTexts);
+      }
+
+      // 根据类型处理特定规则
+      const ruleTypes = ['string', 'number', 'array'] as const;
+      for (const ruleType of ruleTypes) {
+         if (type === ruleType && messages[ruleType]) {
+            const typeMessages = messages[ruleType] as Record<string, any>;
+            const props = ['len', 'min', 'max', 'range'] as const;
+
+            for (const prop of props) {
+               if (prop === 'range' && item.min != null && item.max != null && typeMessages.range) {
+                  // 范围规则
+                  addMessage(typeMessages.range, field, { min: item.min, max: item.max }, ruleTexts);
+               } else if (prop !== 'range' && item[prop] != null && typeMessages[prop]) {
+                  // 单一属性规则
+                  addMessage(typeMessages[prop], field, { [prop]: item[prop] }, ruleTexts);
+               }
+            }
+         }
+      }
+
+      // 处理必填项
+      if (item.required && messages.required) {
+         addMessage(messages.required, field, {}, ruleTexts);
+      }
+
+      // 处理正则表达式规则
+      if (item.pattern && messages.pattern) {
+         addMessage(item.message, field, {}, ruleTexts);
+      }
+
+      // 处理枚举规则
+      if (item.enum && Array.isArray(item.enum) && messages.enum) {
+         const enumStr = item.enum.join(', ');
+         addMessage(messages.enum, field, { enum: enumStr }, ruleTexts);
+      }
+   };
+
+   // 将消息添加到结果数组中
+   const addMessage = (msgTemplate: any, field: string, params: Record<string, any>, ruleTexts: string[]) => {
+      if (!msgTemplate) return; // 如果没有消息模板，直接返回
+
+      try {
+         let msg: string;
+         if (typeof msgTemplate === 'function') {
+            // 尝试调用函数
+            const args = [field];
+            for (const key in params) {
+               args.push(params[key]);
+            }
+            msg = msgTemplate.apply(null, args);
+            if (msg) ruleTexts.push(msg);
+         } else {
+            // 字符串替换
+            msg = String(msgTemplate);
+            for (const key in params) {
+               msg = msg.replace(new RegExp(`\\$\\{${key}\\}`, 'g'), params[key]);
+            }
+            msg = msg.replace(/\$\{label\}/g, '');
+            if (msg) ruleTexts.push(msg);
+         }
+      } catch (error) {
+         // 出错时忽略该消息
+         console.error('格式化验证消息出错:', error);
+      }
+   };
+
+   // 处理每个字段的规则
+   Object.keys(rules).forEach((field) => {
+      const ruleItem = rules[field];
+      const ruleTexts: string[] = [];
+
+      try {
+         handleRule(field, ruleItem, ruleTexts);
+
+         // 处理数组形式的规则
+         if (Array.isArray(ruleItem)) {
+            ruleItem.forEach((item) => {
+               if (item && typeof item === 'object') {
+                  handleRule(field, item, ruleTexts);
+               }
+            });
+         }
+
+         // 处理嵌套对象规则 - 如果有嵌套验证规则但没有消息配置，则不显示
+         if (ruleItem && typeof ruleItem === 'object' && 'fields' in ruleItem) {
+            // 嵌套对象规则不显示任何消息
+         }
+      } catch (error) {
+         console.error('处理验证规则出错:', error);
+      }
+
+      // 确保不重复添加相同的规则文字
+      const uniqueTexts = Array.from(new Set(ruleTexts));
+
+      if (field && uniqueTexts.length > 0) {
+         result.push({
+            field,
+            rules: uniqueTexts,
+         });
+      }
+   });
+
+   return result;
+};
+
+/**
+ * 表单数据验证
+ * @param editorCtrl 表单控制对象
+ */
+export const formValidate = async <T>(editorCtrl: EditorControl<T>) => {
+   const formData: Record<string, AnyData> = editorCtrl.formData.value as Record<string, AnyData>;
+   const rules = editorCtrl.formRules.value;
+   if (!isEmpty(rules)) {
+      resetRules(editorCtrl);
+      if (!editorCtrl.ruleValidator) {
+         /**
+          * 设置自定义文字显示与验证条件
+          */
+         editorCtrl.ruleValidator = new Validator({});
+         editorCtrl.ruleValidator.messages(validMessages.messages());
+         editorCtrl.ruleValidator.define(rules!);
+      }
+      editorCtrl.ruleResults.value = await editorCtrl.ruleValidator
+         .validate(formData)
+         .then(() => {
+            return;
+         })
+         .catch(({ fields }) => {
+            return fields;
+         });
+   }
+};
+
+/**
+ * 验证数据
+ * @param data 数据
+ * @param rules 规则
+ * @param validator? 验证器
+ * @returns 验证结果
+ */
+export const validateData = async (
+   data: Record<string, AnyData>,
+   rules: Record<string, ValidateRule>,
+   validator?: Validator,
+) => {
+   if (!validator) {
+      validator = new Validator({});
+      validator.messages(validMessages.messages());
+      validator.define(rules);
+   }
+   return validator
+      .validate(data)
+      .then(() => {
+         /// 验证通过
+         return;
+      })
+      .catch(({ fields }) => {
+         /// 验证失败
+         return fields;
+      });
+};
+
+/**
+ * 重置表单验证结果
+ * @param editorCtrl 表单控制对象
+ */
+export const resetRules = <T>(editorCtrl: EditorControl<T>) => {
+   editorCtrl.ruleResults.value = undefined;
+};
+
+/**
+ * 工厂参数
+ */
+interface RuleFactoryOptions {
+   /**
+    * 标签文字
+    */
+   label?: string;
+   /**
+    * 表单项验证规则名
+    */
+   rule?: string;
+}
+
+/**
+ * 输入组件工厂处理
+ */
+export const useInputFactory = (): InputFactoryItems<AnyData> => {
+   const editorCtrl = inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined;
+   const labelText = ref<string>(inject(ProviderKeys.LabelText, ''));
+   const ruleKey = ref<string>(inject(ProviderKeys.RuleKey, ''));
+   const errInfo = inject(ProviderKeys.ErrInfo, undefined) as Ref<{ msg: string; errClass: string }> | undefined;
+
+   return {
+      editorCtrl,
+      labelText,
+      ruleKey,
+      errInfo,
+   };
+};
+
+const computedErrInfo = (options: RuleFactoryOptions, editorCtrl?: EditorControl<AnyData>) => {
+   let errInfo = ref({
+      msg: '',
+      errClass: '',
+   });
+   if (!options.label || !options.rule) {
+      return errInfo;
+   }
+   const ruleResults = editorCtrl?.ruleResults;
+   watch(
+      () => ruleResults?.value,
+      (newVal) => {
+         errInfo.value.errClass = '';
+         errInfo.value.msg = '';
+         if (!isEmpty(newVal)) {
+            // 处理错误逻辑
+            const errMsg = updateErrMsg(
+               {
+                  label: options.label,
+                  rule: options.rule,
+               },
+               editorCtrl?.formRules.value,
+               toRaw(newVal),
+            );
+            errInfo.value.errClass = errMsg.errClass.value;
+            errInfo.value.msg = errMsg.msg.value;
+         }
+      },
+      { deep: true },
+   );
+   return errInfo;
+};
+
+// 更新错误消息
+const updateErrMsg = (
+   options: RuleFactoryOptions,
+   formRules?: Record<string, ValidateRule>,
+   ruleResults?: Record<string, ValidateError[]>,
+) => {
+   const ruleErrors = ref<ValidateError[]>([]);
+   const msg = ref<string>('');
+   const errClass = ref('');
+
+   if (!options.rule || !formRules || !ruleResults) {
+      return { msg, ruleErrors, errClass };
+   }
+
+   const rules = options.rule.split('|');
+   rules.forEach((rule: string) => {
+      rule = rule.trim();
+      if (rule) {
+         if (ruleResults[rule]) {
+            ruleErrors.value.push(...ruleResults[rule]);
+         } else {
+            // 检查嵌套错误
+            const nestedErrors: ValidateError[] = [];
+            for (let key in ruleResults) {
+               if (key !== rule && key.startsWith(rule + '.')) {
+                  nestedErrors.push(...ruleResults[key]);
+               }
+            }
+            if (nestedErrors.length > 0) {
+               ruleErrors.value.push(...nestedErrors);
+            }
+         }
+      }
+   });
+
+   const reg = /\${\w+}/g;
+   // 构建错误消息
+   ruleErrors.value.forEach((err: ValidateError) => {
+      if (msg.value) msg.value += ' / ';
+      msg.value += err.message!.replace('${label}', options.label ?? '');
+      const rule = formRules[err.field!];
+      if (rule) {
+         const match = msg.value.match(reg);
+         if (match) {
+            match.forEach((item: string) => {
+               const key = item.replace('${', '').replace('}', '');
+               msg.value = msg.value.replace(item, (rule as any)[key] ?? '');
+            });
+         }
+      }
+   });
+   // 设置错误样式
+   if (ruleErrors.value.length > 0) {
+      errClass.value = 'error';
+   }
+
+   return { msg, ruleErrors, errClass };
+};
+
+/**
+ * 表单项工厂处理
+ */
+export const useFormItemFactory = (options: RuleFactoryOptions, editorCtrl?: EditorControl<AnyData>) => {
+   provide(ProviderKeys.LabelText, options.label || '');
+   provide(ProviderKeys.RuleKey, options.rule || '');
+   const errInfo = computedErrInfo(options, editorCtrl);
+   provide(ProviderKeys.ErrInfo, errInfo);
+   return errInfo;
+};

package/src/utils/form.ts

@@ -0,0 +1,188 @@
+import { EditorControl, ValidateError } from '@/typings/form.d';
+import message from 'vue-m-message';
+import { AnyData, AnyJsonData, ResStatus } from '@skyfox2000/fapi';
+import { doSave } from './data';
+import { getRecordDetail } from './table';
+import { formValidate, resetRules } from './form-validate';
+
+/**
+ * 表单存储事件
+ * @param pageCtrl 页面控制对象
+ */
+export const onFormSave = <T>(editorCtrl: EditorControl<T>) => {
+   saveForm(editorCtrl);
+};
+
+/**
+ * 表单另存为事件
+ * @param pageCtrl 页面控制对象
+ */
+export const onFormSaveAs = <T>(editorCtrl: EditorControl<T>) => {
+   const pageCtrl = editorCtrl.page;
+   const formData = editorCtrl.formData.value as Record<string, AnyData>;
+   formData[editorCtrl.primaryKey ?? pageCtrl.primaryKey] = null;
+   saveForm(editorCtrl);
+};
+
+/**
+ * 关闭表单事件
+ * @param pageCtrl 页面控制对象
+ */
+export const onFormClose = <T>(editorCtrl: EditorControl<T>) => {
+   editorCtrl.visible.value = false;
+};
+
+/**
+ * 执行存储表单数据
+ * @param pageCtrl 页面控制对象
+ * @returns
+ */
+export const saveForm = async <T>(editorCtrl: EditorControl<T>): Promise<void> => {
+   const pageCtrl = editorCtrl.page;
+   editorCtrl.isFormSaving.value = true;
+   resetRules(editorCtrl);
+
+   if (editorCtrl.beforeSave) {
+      const result = editorCtrl.beforeSave();
+      if (result === false) {
+         editorCtrl.isFormSaving.value = false;
+         return Promise.resolve();
+      }
+   }
+
+   if (editorCtrl.formRules.value) {
+      /**
+       * 表单验证
+       */
+      await formValidate(editorCtrl);
+   }
+
+   if (editorCtrl.ruleResults.value) {
+      message.error('提交表单时，验证失败！');
+      console.error('表单验证失败！', editorCtrl.ruleResults.value);
+      /**
+       * 验证失败
+       */
+      editorCtrl.isFormSaving.value = false;
+
+      return Promise.resolve();
+   }
+
+   const formData = editorCtrl.formData.value as Record<string, AnyData>;
+
+   // 使用通用的保存方法
+   return doSave<AnyJsonData>(
+      {
+         page: pageCtrl, // 转换为AnyControl接口
+         reload: editorCtrl.grid?.reload,
+      },
+      {
+         url: editorCtrl.saveUrl,
+         primaryKey: editorCtrl.primaryKey ?? pageCtrl.primaryKey,
+         params: {
+            Data: formData,
+            Query: {},
+         },
+         hideErrorToast: true, // 隐藏自动错误提示，特殊判断控制
+         loadingState: editorCtrl.isFormSaving,
+      },
+   ).then((result) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         message.success('保存成功！');
+         if (editorCtrl.grid) {
+            editorCtrl.grid!.reload.value = true;
+         }
+
+         if (editorCtrl.afterSave) {
+            editorCtrl.afterSave();
+         }
+         if (editorCtrl!.autoClose !== false) {
+            editorCtrl!.visible.value = false;
+         }
+      } else if (result?.msg && result?.msg?.indexOf('Duplicate entry') > -1) {
+         // 获取重复字段
+         const duplicateField = result?.msg?.match(/Duplicate entry '([^']+)' for key '([^']+)'/);
+         if (duplicateField && duplicateField.length > 2 && duplicateField[1] && duplicateField[2]) {
+            const fieldValue = duplicateField[1];
+            const fieldNames = duplicateField[2].replace(/Idx_/g, '').split('_');
+            const formRules = editorCtrl.formRules.value;
+            if (formRules && fieldNames.length > 0) {
+               const ruleResults: Record<string, ValidateError[]> = {};
+               fieldNames.forEach((fieldName) => {
+                  const rule = formRules[fieldName];
+                  if (rule) {
+                     ruleResults[fieldName] = [
+                        {
+                           field: fieldName,
+                           fieldValue: fieldValue,
+                           message: `数据重复`,
+                        },
+                     ];
+                  }
+               });
+               if (Object.keys(ruleResults).length > 0) {
+                  console.error('保存失败！', ruleResults);
+                  editorCtrl.ruleResults.value = ruleResults;
+               }
+            }
+            message.error(`保存失败！数据 \`${fieldValue}\` 已存在！`);
+         } else message.error(result?.msg ?? '保存失败！');
+      } else {
+         message.error(result?.msg ?? '保存失败！');
+      }
+   });
+};
+
+/**
+ * 获取表单数据详情
+ * @param pageCtrl 页面控制对象
+ * @returns
+ */
+export const getFormDetail = async <T>(editorCtrl: EditorControl<T>): Promise<void> => {
+   const pageCtrl = editorCtrl.page;
+   const editorGrid = editorCtrl.grid!;
+   editorCtrl.isFormLoading.value = true;
+
+   const formData = editorCtrl.formData.value as Record<string, AnyData>;
+   const primaryKey = editorCtrl.primaryKey ?? pageCtrl.primaryKey;
+
+   return getRecordDetail(editorGrid, { [primaryKey]: formData[primaryKey] }, editorCtrl.detailUrl).then((result) => {
+      editorCtrl.isFormLoading.value = false;
+      if (result) setFormData(editorCtrl, result as T);
+   });
+};
+
+/**
+ * 打开新输入表单
+ * @param pageCtrl 页面控制对象
+ */
+export const openNewForm = <T>(editorCtrl: EditorControl<T>) => {
+   const gridCtrl = editorCtrl.grid;
+   if (gridCtrl) gridCtrl.rowData.value = undefined;
+   if (editorCtrl) {
+      resetForm(editorCtrl);
+      if (editorCtrl.visible) editorCtrl.visible.value = false;
+      setTimeout(() => {
+         editorCtrl.visible.value = true;
+      }, 1);
+   }
+};
+
+/**
+ * 重置表单，并设置表单数据
+ * @param editorCtrl 表单控制对象
+ */
+export const setFormData = <T>(editorCtrl: EditorControl<T>, formData?: T) => {
+   resetForm(editorCtrl);
+   editorCtrl.formData.value = { ...editorCtrl.formData.value, ...formData } as T;
+};
+
+/**
+ * 重置表单数据，重置表单验证结果
+ * @param editorCtrl 表单控制对象
+ */
+export const resetForm = <T>(editorCtrl: EditorControl<T>) => {
+   editorCtrl.formData.value = editorCtrl.default ? JSON.parse(JSON.stringify(editorCtrl.default)) : {};
+
+   resetRules(editorCtrl);
+};