@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/vue-form/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="vue-schema-form">
+        <ElConfigProvider :locale="locale">
+            <FormProvider :form="form">
+                <SchemaField :schema="schemaConfig" :scope="{  ...scopes }" />
+            </FormProvider>
+        </ElConfigProvider>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { resolveComponent } from 'vue';
+import { FormProvider } from '@formily/vue';
+import createSchemaField  from '../createScemaField';
+import useVueForm from './useForm'
+import { ElConfigProvider } from '@cicctencent/jtui';
+import zhCn from '@cicctencent/jtui/lib/locale/lang/zh-cn';
+// import VueForm 的时候, 如果没有 Vue.use(Formliy) 这个时候是不存在SchemaField的
+// 这里如果解析不到SchemaField 则调用 createSchemaField() 生成SchemaField
+const SchemaField=  typeof resolveComponent('SchemaField') === 'string' ? createSchemaField() : resolveComponent('SchemaField')
+console.log('🚀 SchemaField',SchemaField)
+import * as scopes from '../scope'
+const props = defineProps( {
+        schema: {
+            type: Object,
+            default: () => {},
+        },
+        modelValue: {
+            type: Object,
+            default: () => {},
+        },
+        //自动校验
+        autoValidate: {
+            type: Boolean,
+            default: false,
+        },
+        group:{
+            type: Boolean,
+            default: false
+        },
+        readOnly: {
+            type: Boolean,
+            default: false,
+        }
+    }
+)
+const locale = zhCn;
+const emits = defineEmits(['on-change', 'update:modelValue', 'getData', 'fileUpload','openCloud', "initValidateRule"])
+const { validate, setValue, form, schemaConfig } = useVueForm(props,emits)
+defineExpose({ setValue, validate})
+</script>
+
+<style lang="scss">
+.vue-schema-form {
+    .formily-element-plus-form-item{
+        margin-bottom: 16px;
+        .formily-element-plus-form-item-label *{
+            line-height: 20px;
+        }
+        .formily-element-plus-form-item-label-tooltip{
+            height: 20px;
+        }
+    }
+    .formily-element-plus-form-item-label{
+        color: #4B515E;
+        height: 20px;
+        margin-bottom: 10px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        .formily-element-plus-form-item-label-content{
+
+            .formily-element-plus-form-item-asterisk{
+                line-height: 20px;
+            }
+        }
+    }
+    .el-date-editor,
+    .el-input{
+        height: 40px;
+        width: 100%;
+    }
+    /* 需要考虑多行文本,所以最小高度40 */
+    .el-textarea__inner,
+    .formily-input-wrap{
+        min-height: 40px;
+        .el-input {
+            vertical-align: top;
+        }
+
+    }
+    .el-date-editor{
+        box-sizing: border-box;
+    }
+    .el-input-number{
+        width: 150px;
+    }
+    .el-switch{
+        height: 20px;
+    }
+    .el-input__suffix {
+        color: #333;
+        font-weight: 500;
+    }
+}
+</style>

package/src/vue-form/useForm.ts

@@ -0,0 +1,112 @@
+import { createForm, onFormInit, onFormMount, onFormValuesChange, registerValidateRules } from "@formily/core";
+import { cloneDeep, isEqual } from "@cicctencent/ark-util";
+import { transformSchema } from "../transform";
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+// import { IValidateResults } from '../typings/common';
+export default function(props,emits){
+  const ctx = getCurrentInstance();
+  // 防抖
+  let timer: any = 0;
+  // 最新的一次changeData
+  let lastChangeData = null
+  // 是否挂载
+  let mountFlag = false;
+
+  // createForm 参数
+  const options = {
+    // https://core.formilyjs.org/zh-CN/api/entry/form-effect-hooks
+    effects(){
+      onFormInit((form)=>{
+        // 表单初始化
+        form.setValues(Object.assign({},form.values,props.modelValue),'deepMerge')
+      })
+      onFormMount((form)=>{
+        mountFlag = true;
+        // Init 拿不到表单的默认数据  所以在Mount的时候重新setValue
+        form.setValues(
+          Object.assign({}, form.values, props.modelValue),
+          'deepMerge'
+        );
+      })
+      onFormValuesChange((form) =>{
+          // 挂载完成,再触发表单更新
+          if(mountFlag){
+            console.log('[jt-formily] onFormValuesChange',form.values)
+            emitValue(Object.assign({}, form.initialValues, form.values))
+          }
+          // 是否需要校验
+          if(props.autoValidate){
+            form.validate();
+          }
+      })
+    }
+  }
+  const form = ref(createForm(options));
+  // Schema配置
+  const schemaConfig = computed(() => {
+    // 转换Schema
+    return transformSchema({ schema: cloneDeep(props.schema) ?? {} as any , ctx: ctx, group: props.group });
+  });
+  /** 监听只读 */
+  watch(() =>props.readOnly, (val) =>{
+    //  设置表单状态
+    form.value.setFormState({ readOnly :val})
+  }, { immediate: true, deep: true})
+  /** 监听数据变化 */
+  watch(()=> props.modelValue, (newVal,oldVal) =>{
+    //最新一次修改的数据,不等于当前modelValue的值,说明不是重复渲染
+    if(!isEqual(newVal,lastChangeData)){
+      form.value.setValues(Object.assign({}, form.value.values, newVal), 'deepMerge')
+    }
+  })
+  /** 往外抛事件 */
+  let oldData = null;
+  function emitValue(data){
+    clearTimeout(timer);
+    timer = setTimeout(() =>{
+      // 由于setValues会触发change，有时候数据没变都触发，这里要做控制
+      if(isEqual(data,oldData)){
+          return;
+      }
+      // 因为表单里面会嵌套对象，这里必须深克隆。
+      oldData = cloneDeep(data);
+      // 因为schema经过特殊处理,结果也要特殊转换一下
+      console.log('[jt-formily]','emitValue',data)
+      lastChangeData = { ...data }
+      emits('update:modelValue', { ...data });
+      emits('on-change', { ...data });
+      // 10毫秒不够，50比较稳
+    }, 50)
+  }
+  /** 注册自定义校验规则 */
+  registerValidateRules({
+    buryReportName(value: any, rule: any){
+      if (!value) return '';
+      return value === rule.value ? rule.message : '';
+    }
+  })
+
+  onMounted(() => {
+      emits('initValidateRule',(rules: any)=>{
+        console.log("🚀 initValidateRule",rules)
+        registerValidateRules({ ...rules })
+      })
+  })
+
+  /**---------- 外部接口 ----------*/
+  /** 设置表单内容 */
+  function setValue(data){
+    const newValue = Object.assign({},form.value.values, data);
+    form.value.setValues(newValue,'deepMerge')
+  }
+  /** 表单校验 */
+  function validate(){
+    return  form.value.validate()
+  }
+  return {
+    form,
+    schemaConfig,
+    setValue,
+    validate
+  }
+}

package/tests/data/anyof.ts

@@ -0,0 +1,40 @@
+export default [{
+  title:'any1',
+  properties:{
+    anyValue1:{
+      title:'anyValue1',
+      type:'string'
+    },
+    anyValue2:{
+      title:'anyValue1',
+      type:'string'
+    },
+    anyValue3:{
+      title:'anyValue1',
+      type:'string'
+    },
+  }
+},{
+  title:'any2',
+  properties:{
+    anyValue1:{
+      title:'anyValue1',
+      type:'string'
+    },
+    anyValue3:{
+      title:'anyValue1',
+      type:'string'
+    },
+    anyValue4:{
+      title:'anyValue1',
+      type:'string'
+    },
+    anyValue5:{
+      title:'anyValue1',
+      type:'string'
+    },
+  },
+  'x-data':{
+    activity:true
+  }
+}]