@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/validate/index.ts

@@ -0,0 +1,648 @@
+import { WHITE_COMPONENTS } from './utils/constant';
+import { log, cloneDeep, isEqual, get, set } from '@cicctencent/ark-util';
+import { FormilyValidateState, ValidateError } from '../typings/common';
+import { transformSchema } from '../transform/transform';
+import { getAnyOfConfig } from '../utils/anyof_utils';
+import { UniqueType } from '../transform/utils/constant';
+import { isSchemaConfig } from '../utils/common';
+const infoLog = log('[jt-formily validate]')
+/**
+ *  Formily 校验
+ *   注意: 目前只满足现有组件配置的校验,如果存在特殊的校验逻辑需要更改逻辑
+ */
+export class FormilyValidate {
+   state: FormilyValidateState
+   errList: ValidateError[] //错误列表
+   pathList: string[]  // 属性路径 ['a','b','c','d','e','0'] => a.b.c.d.e[1]
+
+  constructor(state: FormilyValidateState) {
+    this.init(state);
+  }
+
+     init(state: FormilyValidateState){
+        const { data, schema, validateData } = state;
+        this.state = {
+            data: data ?? {},
+            schema: transformSchema({ schema: schema ?? {}, ctx: null }),
+            validateData: validateData ?? [],
+        };
+        // 初始化错误列表
+        this.errList = [];
+        this.pathList = [];
+    }
+
+  validate() {
+    this.validateProperties(this.state.schema?.properties ?? {});
+    infoLog('validate',this.errList);
+    return this.errList;
+  }
+  /**
+   *  判断属性
+   * @param data
+   * @returns
+   */
+   validateItem(data: any): boolean {
+    // 判断是否是自定义组建
+    if ('x-component' in data && WHITE_COMPONENTS.includes(data['x-component'])) {
+      // todo 自定义组件的校验(x)
+      switch(data['x-component']){
+        case 'Middleware':{
+           // 中间件不是必填的,不需要校验name,只需要校验options
+          const { parametersDescriptor } = data['x-component-props'] ?? { parametersDescriptor: '{}' };
+          // 根据中间件的内容 组装Schema
+          const result:any = this.getMiddlewareSchema(typeof parametersDescriptor === 'string'? JSON.parse(parametersDescriptor): parametersDescriptor, get(this.state.data, this.path))
+          this.validateMiddleware(result);
+          return false;
+        }
+        case 'AnyOf':
+         {   // anyOf校验
+          const { list } = data['x-component-props'] ?? { list: [] };
+          let  result = null;
+          if(typeof list  === 'string'){
+            result = getAnyOfConfig(JSON.parse(list), get(this.state.data, this.path));
+          }else{
+            result = getAnyOfConfig(list, get(this.state.data, this.path));
+          }
+          infoLog('anyOf Config',result);
+          this.validateProperties(result?.properties??{})
+          return false;
+        }
+        case 'OneOf':
+        {
+          const { list } = data['x-component-props'] ?? { list: [] };
+          let result = null;
+          if(typeof list === 'string'){
+            result = this.getOneOfProperties(JSON.parse(list));
+          }else{
+            result = this.getOneOfProperties(list);
+          }
+          this.validateProperties(result?.properties)
+          return false;
+        }
+        case 'Event':{
+          const result = this.getEventProperties(data)
+          this.validateProperties(result.properties)
+          return false;
+        }
+        case 'HotArea':{
+            // todo 热区埋点校验 (热区比较特殊,不走正常的校验流程)
+            const result = this.getHotAreaProperties(data);
+            this.validateHotArea(result);
+        }
+      }
+      return false;
+    }
+    else if ('items' in data) {
+      // items里面存在必填项,再执行items校验逻辑
+      if (this.isRequiredByArray(data['items'])) {
+        this.validateArray(data['items']);
+      }
+      return false;
+    }
+    // 是否存在属性描述	properties  items存在的情况,properties只是一个操作按钮
+    else if ('properties' in data) {
+      // 判断当前对象是否依赖其他属性
+      if(this.validateReactions(data)){
+        const dependencies = data['x-reactions']?.['dependencies'] ?? []
+        let depValue = undefined;
+        // 如果当前是void分组
+        if(data?.type === 'void'){
+          depValue = this.parseExpression(dependencies, null, data['x-reactions']?.fulfill?.schema?.['x-visible'], this.path, this.state.data, true);
+        }else{
+          depValue = this.parseExpression(dependencies, null, data['x-reactions']?.fulfill?.schema?.['x-visible'], this.path, this.state.data);
+        }
+        let expression:string = data['x-reactions']?.fulfill?.schema?.['x-visible'] ?? ''
+        // 判断表达式是否成立，不成立不继续校验该对象下面的属性
+          if(!this.calculateReactions(expression.replace(/\$deps\[\d\]/,typeof depValue === 'string' ? `'${depValue}'`: depValue))){
+            return
+          }
+      }
+      this.validateProperties(data['properties'])
+      return false;
+    }
+    // 判断是否存在必填属性 required
+    else if ('required' in data && data['required']) {
+      // 判断当前属性的渲染是否有依赖别的属性
+      if(this.validateReactions(data)){
+        const dependencies = data['x-reactions']?.['dependencies']
+         // 解析 {{$deps[0]}}表达式的结果
+        const depValue = this.parseExpression(dependencies, null, data['x-reactions']?.fulfill?.schema?.['x-visible'], this.path, this.state.data);
+        let expression:string = data['x-reactions']?.fulfill?.schema?.['x-visible'] ?? ''
+        // 判断表达式是否成立，成立返回true 不成立返回false 不进行必填项校验
+        return this.calculateReactions(expression.replace(/\$deps\[\d\]/,typeof depValue === 'string'? `'${depValue}'`: depValue))
+      }
+      return true;
+    }
+  }
+  /**
+   *  是否需要校验联动依赖
+   * @param data
+   * @returns
+   */
+  validateReactions(data){
+        if(!('x-reactions' in data)){
+          return false;
+        }
+        if(data['x-reactions']?.fulfill?.schema?.['x-visible']){
+          //存在依赖
+          return true
+        }
+        return false;
+    }
+
+    calculateReactions(expression: string):boolean{
+      const ExpRE = /^\s*\{\{([\s\S]*)\}\}\s*$/
+      const matchData =  expression.match(ExpRE)
+      if(matchData.length === 2){
+        return this.calc(matchData[1])? true : false
+      }
+      return false
+    }
+    /**
+     * 计算方法
+     * @param expr
+     * @returns
+     */
+    calc (expr){
+      return Function('return (' + expr + ')')()
+  }
+
+    /** 校验热区 */
+   validateHotArea(data){
+    const hotData =  get(this.state.data,this.path);
+  if(Array.isArray(hotData)&& hotData.length > 0 ){
+      hotData.forEach((item,index)=>{
+        this.insertPath(`${index}`);
+        this.insertPath('event');
+        if('properties' in data){
+          this.validateProperties(data.properties);
+        }
+        this.deletePath();
+        this.deletePath();
+      })
+  }
+
+   }
+
+    // 获取热区schema
+   getHotAreaProperties(data){
+      const { event } = data['x-component-props'] ?? { event:{} }
+      return transformSchema(typeof event === 'string' ? {schema: JSON.parse(event),ctx: null}: { schema: event,  ctx: null });
+   }
+   getEventProperties(data){
+    const { schema } = data['x-component-props'] ?? { schema:{ }}
+    const result = {
+      type:'object',
+      properties:{
+        list: typeof schema === 'string'? JSON.parse(schema)?.list ?? []: schema?.list ?? []
+      }
+    }
+    return transformSchema({ schema: result, ctx: null });
+  }
+
+  
+
+  /**
+   *  校验 Properties
+   * @param data
+   */
+   validateProperties(data) {
+    for (const key in data) {
+      // 添加路径  key = input  只是修饰写法 不是字段名   type= void 功能型按钮 或者 非对象
+      if(key !== 'input' && data[key]?.type !== 'void'){
+        this.insertPath(key);
+      }
+
+      /**
+       *  处理以下这种非schema场景
+       *  options:{
+       *    a:{},
+       *    b:{},
+       *    c:{}
+       * }
+       * 
+       */
+      if(!isSchemaConfig(data[key])){
+        const tmpPath = cloneDeep(this.pathList);
+        tmpPath.pop()
+        const validateKey = get(this.state.data,tmpPath.join(".")+'._validateKey');
+        // 不存在validate_key就不需要修改配置
+        if(validateKey){
+          data[key]= data[key][validateKey]
+        }
+      }
+
+      // 校验每一个属性(字段) return true 必填的字段   false 非必填字段
+      if (this.validateItem(data[key])) {
+        // 判断目标路径是否有值
+        const checkData = get(this.state.data, this.path);
+
+        // 0 也当作成功处理
+        if (this.checkResult(checkData)) {
+          // todo 这里可以做额外的校验,例如: 0 or '' 校验失败
+            // 唯一校验 unique值 页面级唯一性校验为1 组件级唯一性校验为2
+            const values = Object.values(UniqueType).filter(v => !isNaN(Number(v)))
+            if('unique' in data[key] && values.includes(data[key]['unique'])){
+              if(this.isUnique(checkData, data[key]['unique'])){
+                // 是唯一的
+            }else{
+              //不是唯一的
+              const schemaData = {};
+              schemaData[key] = {
+                ...data[key],
+                default: checkData,
+                'x-validator': {
+                  buryReportName: true, // 开启buryReportName规则校验 这个校验是判断当前重复值是否发生修改了
+                  value: checkData, // 当前重复值 作为rule对象的属性传入buryReportName规则
+                  ...data[key]['x-validator'], // 配置文件内的其他校验配置 作为rule对象的属性传入buryReportName规则
+                }
+              };
+              if (this.pathList.includes('buryReportName')) {
+                // 区分事件埋点名
+                schemaData[key]['title'] = this.path.indexOf('event') !== -1 ? '事件埋点' : data[key]['title']
+                // schemaData[key]['x-validator'].message = '埋点名重复'
+              }
+              if('x-reactions' in schemaData[key]){
+                this.parseReactions(schemaData[key],['x-visible']);
+                // 处理完 删掉x-reactions 不然受到联动影响无法显示
+                delete schemaData[key]['x-reactions']
+              }
+              this.errList.push({
+                path: this.path,
+                schema: schemaData,
+               });
+            }
+            }
+        } else {
+          //不存在值,说明该字段未填写
+          const schemaData = {};
+          schemaData[key] = data[key];
+          if('x-reactions' in schemaData[key]){
+            this.parseReactions(schemaData[key],['x-visible']);
+            // 处理完 删掉x-reactions 不然受到联动影响无法显示
+            delete schemaData[key]['x-reactions']
+          }
+          this.errList.push({
+            path: this.path,
+            schema: schemaData,
+          });
+        }
+      }
+
+      if(key !== 'input' && data[key]?.type !== 'void'){
+       this.deletePath();
+      }
+    }
+  }
+  /**
+   *  校验items
+   * @param data
+   */
+   validateArray(data) {
+     // 获取目标路径的内容
+    const itemData: any[] = get(this.state.data, this.path);
+    // itemData必然是一个数组类型,如果不是那就是错的
+    if (Array.isArray(itemData)) {
+
+      // length = 5 说明有五条数据需要校验
+      for (let i = 0; i < itemData.length; ++i) {
+        this.insertPath(`${i}`)
+        // todo  处理校验逻辑
+        if ('properties' in data) {
+          const properties = cloneDeep(data['properties'])
+          // 这里是对象数组
+          for (const key in properties) {
+            if ((data['required'] && data['required'].includes(key)) || 'unique' in properties[key] || ('required' in properties[key] && properties[key]['required'])) {
+              // 处理标题 携带数组下标 便于定位是哪一项
+              properties[key].title = `${i + 1}.${properties[key].title || ''}`
+            }
+          }
+          this.validateProperties(properties)
+        } else {
+          // 非对象数组
+            if('required' in data){
+                // 存在必填项
+               if(!get(this.state.data, this.path)){
+                const schemaData={}
+                const key=((Math.random()*100000).toFixed(0)+Date.now()).toString()
+                schemaData[key] = data
+                  this.errList.push({
+                    path: this.path,
+                    schema: schemaData,
+                  });
+               }
+            }
+        }
+        this.deletePath();
+      }
+    }
+
+
+
+  }
+  /**
+   *  添加路径
+   * @param path
+   */
+   insertPath(path: string) {
+    this.pathList.push(path);
+  }
+  /**
+   *  删除路径,相当于(回退)的操作
+   *    path=['a','b','c']
+   *   deletePath()  =>   path=['a','b']
+   */
+   deletePath() {
+    this.pathList.pop();
+  }
+  // items 是否存在必填项(这里只校验配置)
+   isRequiredByArray(items): boolean {
+    infoLog('isRequiredByArray',items)
+    if ('properties' in items) {
+      // 对象数组
+      return true;
+    } else {
+      // 非对象数组
+      if ('required' in items) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   *  校验数据唯一
+   * @param value
+   */
+  isUnique(value, unique){
+    // 检索每一个组件的数据
+    if(value === ''){
+      return false;
+    }
+    //出现的次数统计
+    let countFlag = 0;
+    if (unique === UniqueType.page) {
+      for(let i = 0; i < this.state.validateData.length ; i++){
+        // const values = Object.values(this.state.validateData[i]);
+        const values: any[] = this.getObjectValues(this.state.validateData[i] ?? {})
+        countFlag += values.filter(v => v === value).length
+      }
+    } else if (unique === UniqueType.component) {
+      const values = this.getObjectValues(this.state.data ?? {})
+      countFlag += values.filter(v => v === value).length
+    }
+    // 出现超过2次
+    if(countFlag > 1){
+      return false;
+    }
+    return true;
+  }
+
+  /** getter */
+
+  /* 获取路径(解析好的路径,可以直接使用于dot) */
+   get path() {
+    return this.pathList.join('.')
+  }
+
+  /** 获取anyOf */
+   getAnyOfProperties(configList: any[], data :any){
+    // 没有属性的情况
+    if(Object.keys(data || {}).length === 0){
+      return {}
+    }
+    // 获取最匹配的anyOf元素
+    const config = configList.map(item => ({
+        item,
+        score: this.checkAnyOfProperties(item),
+    })).sort((a, b)=> b.score -a.score)[0];
+
+    return config.item?.properties ?? {};
+  }
+  /** 是否是anyOf */
+   isAnyOf(data){
+    return data['x-component'] === 'AnyOf'
+  }
+
+   checkAnyOfProperties(data){
+    const value = get(this.state.data, this.path) ?? {}
+    const dataKeys=Object.keys(value);
+    const propertiesKeys = Object.keys(data?.properties ?? {});
+    // 最匹配评分
+    let count = -1;
+    for(let j = 0; j < dataKeys.length; j++){
+        if(!propertiesKeys.includes(dataKeys[j])){
+            return -1;
+        } else {
+          count ++;
+        }
+
+    }
+    return count;
+  }
+
+   getOneOfProperties(configList:any[]){
+     const data =  get(this.state.data, this.path +'.name')
+     for(let i = 0;i < configList.length; i++){
+        if(configList[i]?.properties?.name?.default === data){
+         const keys =  Object.keys(configList[i]?.properties).filter(key=>key !== 'name')
+         const result = { properties:{ } }
+          keys.forEach(k=>{
+             result['properties'][k] = configList[i]?.properties[k] ?? {};
+          })
+        return transformSchema({ schema: result, ctx: null });
+        }
+     }
+     return { properties:{}}
+  }
+
+  getObjectValues(data) {
+      let valueArr = [];
+      // null undefine
+      if(!data){
+        return valueArr;
+      }
+      Object.keys(data).forEach(it => {
+          // 不是null,是对象、且不是数组
+          if (data[it] && typeof data[it] === 'object' && !Array.isArray(data[it])) {
+              valueArr = valueArr.concat(this.getObjectValues(data[it]));
+          } else if (data[it] && Array.isArray(data[it])) {
+              for (let i = 0; i < data[it].length; i++) {
+                  valueArr = valueArr.concat(this.getObjectValues(data[it][i]));
+              }
+          }
+          // 值的类型是字符串  并且 key 等于当前配置unique的属性key(通过pathList最后一个元素获取)
+          else if (typeof data[it] === 'string' ) {
+            // 如果存在路径,则要判断当前的value是否等于要校验唯一性的那个值
+            if(this.pathList.length ){
+              if(it === this.pathList[this.pathList.length - 1]){
+                 // 存在历史路径, 判断当前的内容是否是等于 唯一性的值
+                valueArr.push(data[it]);
+              }
+            }else{
+               // 如果没有历史路径,直接返回
+               valueArr.push(data[it]);
+            }
+          }
+      });
+      return valueArr;
+  }
+  /**
+   *  解析 x-reactions
+   *  目前只支持 schema 表达式
+   * @param schema
+   * @param data
+   * @returns
+   */
+  parseReactions(schema, ignore: string[] = []){
+    
+    try {
+      if(!schema){
+        return schema;
+      }
+      if('x-reactions' in schema){
+            if('dependencies' in schema['x-reactions']){
+              // 获取依赖信息 []
+              const dependencies = schema['x-reactions']['dependencies']
+              const reactionsSchema = schema['x-reactions']?.fulfill?.schema;
+              // 是否存在schema 表达式
+              if(reactionsSchema){
+                  Object.keys(reactionsSchema || {}).forEach((key: string) => {
+                    // 如果不是字符串类型,就不可能是一个表达式可以不用管
+                    if(ignore.includes(key) || typeof reactionsSchema[key] !== 'string'
+              ){
+                      return
+                    }
+                    const value = this.parseExpression(dependencies, null,reactionsSchema[key], this.path,this.state.data);
+
+                    if(value){
+                      set(schema, key, value);
+                    }else{
+                      infoLog('parseReactions','解析失败')
+                    }
+                  })
+              }
+            }else if('target' in schema['x-reactions']){
+              // todo 主动联动
+            }
+      }
+    } catch (error) {
+       infoLog(`parseReactions error, schema: ${typeof schema !== 'string'?JSON.stringify(schema):schema} error: ${typeof error !== 'string'? JSON.stringify(error):error}` )
+    }
+  }
+  /**
+   * 解析表达式
+   * @param dependencies  被动联动依赖
+   * @param target     主动联动target
+   * @param exp       表达式字符串
+   * @param path      路径
+   * @param data      数据
+   * @returns
+   */
+   parseExpression(dependencies: string[] | null, target: string | null, exp: string, path: string, data: any, isVoid: boolean = false): any{
+      // const ExpRE = /^\s*\{\{([\s\S]*)\}\}\s*$/
+      // {{$deps[0]===???}} 获取中括号里面的数值
+      const indexStr = exp.match(/\$deps\[(\d+)\]/)
+      if(indexStr){
+              const index =  parseInt(indexStr[1]);
+              const depString =  dependencies[index]
+              // 获取依赖层级
+              let hierarchy = depString.match(/\.+/i) ? depString.match(/\.+/i)[0].length: 0
+
+              // 获取path
+              const newPath = path.split('.')
+
+              // 判断路径
+              if(hierarchy){
+                  if(isVoid){
+                    hierarchy--
+                  }
+                  for(let i =0 ; i < hierarchy ;i++){
+                    newPath.pop();
+                  }
+                  newPath.push(depString.replace(/\.+/,''));
+                  const value = get(data,newPath.join('.'));
+                  return value;
+              }
+      }
+      return null;
+   }
+
+   checkResult(value:any):boolean{
+    // null undefine '' 失败
+    if(!value){
+      // 数字0
+      if(value === 0){
+        return true;
+      }
+      return false
+    }
+    if(Array.isArray(value)){
+      // 数组长度必须大于0
+      if(!value.length){
+        return false
+      }
+      // 对象数组的情况
+      if(typeof value[0] === 'object'){
+          for(let i = 0; i< value.length; i++){
+            // 这里防止value[i] 是null 或者 undefine 使用  in 导致异常
+            if(value[i] && '__validate_value__' in value[i]){
+              if(!value[i]['__validate_value__']){
+                  return false;
+              }
+            }
+          }
+      }
+      return true;
+    }
+
+    if(typeof value === 'object'){
+      // 对象存在__validate_value__属性的情况下，校验结果由 __validate_value__ 控制
+      if('__validate_value__' in value){
+        // 包含__validate_value__的对象
+          return !!value['__validate_value__']
+      }
+      else if(isEqual(value, {})){
+        // 空对象
+        return false;
+      }
+      return true
+    }
+    return true;
+   }
+   /**
+    *  获取中间件Schema
+    */
+   getMiddlewareSchema(parametersDescriptor, data){
+    const schemaList = [];
+    data.forEach(it =>{
+      schemaList.push({
+        properties:{
+          options:{
+            type: 'object',
+            properties: {...parametersDescriptor[it.name]}
+          }
+        }
+      })
+    })
+
+    // 有多少条数据,就有多少个Schema
+    return schemaList;
+   }
+   /**
+    *  校验中间件
+    * @param data
+    */
+   validateMiddleware(data: any[]) {
+    // 获取中间件数据
+   const middlewareData: any[] = get(this.state.data, this.path);
+   // itemData必然是一个数组类型,如果不是那就是错的
+   if (Array.isArray(middlewareData)) {
+     for (let i = 0; i < middlewareData.length; ++i) {
+       this.insertPath(`${i}`)
+       this.validateProperties(data[i]['properties'])
+       this.deletePath();
+     }
+   }
+  }
+}

package/src/validate/utils/constant.ts

@@ -0,0 +1,2 @@
+/* 不校验的组件 */
+export const WHITE_COMPONENTS = ['HotArea', 'Event', 'AnyOf', 'OneOf','Middleware'];

package/src/vue-form/index.ts

@@ -0,0 +1,18 @@
+import VueForm from './index.vue';
+declare global {
+  interface Window{
+    __jt_formily_components: any;
+    JT_VERSION: Record<string, string>;
+  }
+}
+
+
+
+window.JT_VERSION = Object.assign(
+    {
+        '__rollup__name__@__rollup__version__': '__rollup__date__',
+    },
+    window.JT_VERSION
+);
+export { VueForm };
+export default VueForm;