avue自定义表单扩展正则校验问题

基于avue的自定义表单低代码开发遇到问题和解决方案

基于avue的低代码开发平台，优势在于生成的json完全符合avue crud的配置规范，也就是说通过avue的低代码开发能够快速生成表单，并且实现对表单数据的增删改查。
首先要解决的问题：
1 组件扩展
自带的组件并不能完全满足我们的需求，有些组件属性配置冗余，我们都需要自行扩展。
1.1 扩展组件
在代码中找到fieldsConfig.js在这里面配置需要扩展的组件，如果不想和现有的组件冲突，需要新定义组件类型。

{
        type: "dept",
        label: "组织机构",
        icon: "icon-tree",
        span: 24,
        display: true,
        dicOption: "remote",
        dicMethod: "get",
        dicUrl: "",
        dicData: [],
        parent: true,
        props: {
          label: "deptName",
          value: "id",
          desc: "desc",
        },
      },

这就扩展了一种dept的组件类型，但是你又想利用tree或者cascader类展示，这时候就需要做一个展示类型指向现有的组件类型。

            if (item.type === "dept") {
              item.type = "tree";
            }
            if (item.type === "city") {
              item.type = "cascader";
            }

这样就能很好的利用现有的avue配置支持去实现，一个新组件。

2 以下这些都是组件除了通用配置之外的单个组件的自定义配置。
我们在这里面就可以实现对自己的组件自定义属性控制。

这样就可以对自己的自定义组件进行一些属性进行控制。

2 现在讲一下现在系统的一些bug
2.1 正则校验的bug,正则校验的问题主要是因为

 <monaco-editor
          v-model="option"
          keyIndex="generate"
          height="82%"
          :read-only="true"
        ></monaco-editor>

使用这个编辑器，在预览json中，正则pattern对象无法正确显示，因为并不是字符串，导致正则并不能很好的显示在item的rule配置项中，而是显示一个{}, 到时提交给后台的数据json中正则这块无法获取到正则表达式。
2.2 解决办法：
首先配置的时候，需要配正则表达式的非 // 格式，例如 /^\d{1,6}/应该配置成 ^\d{1,6}，而且我们获取到的时候是个字符串，其中\d会被处理成\d,这样在json中就可以保存这个正则表达式字符串。

其次，在表单预览时或者后面使用表单的时候，我们需要把字符串取出来，把其中的类似\d变成\d,这里要使用replace正则替换的方式，然后利用RegExp 实例化成为正则表单式来使用，这样才会在预览表单和使用表单式生效。

最后，关于正则这块的还有一个坑，就是我们在输入正则表达式时，这个验证消息是系统分配的，例如 某某字段不符合数据格式，这个提示非常不友好，用户并不知道如何填写什么格式的数据，这个时候可以利用placeHolder配置,然后动态的配置到pattern的message配置项中。

 this.validator.pattern = {
          pattern: val,
          message: `${this.data.label}格式不匹配`,
        };

当然你也可以利用字段提示或者placeHolder直接提示。

3 关于校验时候的提示文字和校验字段不匹配的问题

造成这块的原因是，因为这个required必填和这个正则输入，系统是分两个方法监听，并且去生成校验规则的，但实际上这两个是联动的，也就是说我们在做正则修改的时候我们要去required的校验规则否则将会被上一次的修改保持不变，同样我们在做requuired也要做对正则做一个校验规则更新。

这样关于正则校验这块的问题得到解决。