BasicModal弹窗

Usage
由于弹窗内代码一般作为单文件组件存在，也推荐这样做，所以示例都为单文件组件形式
注意v-bind="$attrs"记得写，用于将弹窗组件的attribute传入BasicModal组件
attribute：是属性的意思，大概意思是接收父组件传过来的数据
@register=“register” 用于注册useModal，如果需要使用useModal提供的 api，必须将register传入组件的onRegister
原理其实很简单，就是 vue 的组件子传父通信，内部通过emit(“register”，instance)实现。
同时独立出去的组件需要将attrs绑定到BasicModal上面。
1.1，下面是子组件 Modal.vue

 <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']">
    Modal Info.
  </BasicModal>
 import { BasicModal } from '/@/components/Modal';

1.2，页面引用弹窗

  <div class="px-10">
    <Modal @register="register" />
  </div>
  import { useModal } from '/@/components/Modal';
  import Modal from './Modal.vue'
  const [register, { openModal, setModalProps }] = useModal();

1.3，可在父组件引入弹框使用参数介绍

1.4，closeModal：用于关闭弹窗

closeModal();

1.5，openModal ：用于打开/关闭弹窗 参考下面的点击方法使用

// true/false: 打开关闭弹窗
// data: 传递到子组件的数据
openModal(true, data);

1.6，setModalProps ：用于更改 子组件modal 的 props 参数

在父组件注册弹框时引入注册
const [addEditorPop, {openModal: changeAddEditorPop, setModalProps: setAddEditorPop }] = useModal();
例如可以在父组件点击方法中这么使用
//新增编辑调用方法处理事件
function handleLOpenAddModal(data, type) {
  setAddEditorPop({
    title: type == 'add' ? '生育津贴及医疗费登记' : '生育津贴及医疗费登记编辑',
    width: "100%",
    draggable: false,
    destroyOnClose: true,
  });
  changeAddEditorPop(true, { row: data, type, fileList })//打开弹窗方法，可以这样传参
}

1.7，子组件弹框组件中可使用方法

 <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']">
    Modal Info.
  </BasicModal>
  import { BasicModal, useModalInner } from '/@/components/Modal';
 const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  //data是父组件传过来的参数接收新增编辑传过来的数据
  addEditingParameters = data;

});

2.1，弹框中有from表单需要校验时，点击弹框确认件获取表单的值，并进行校验
2.2，from表单数据定义：

export const formState1: FormSchema[] = [
    {
        label: '姓名', //显示label
        field: 'name', //查询字段
        component: 'Input', //渲染的组件
        //自动触发检验，布尔类型
        required: true,
        colProps: { span: 8 },
    },
    {
        label: '身份证号', //显示label
        field: 'identityId', //查询字段
        component: 'Input', //渲染的组件
        //检验的时候不加上标题
        rulesMessageJoinLabel: false,
        // rules: [{ required: false, message: '请输入正确的身份证号', pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ }],
        //动态自定义正则，values: 当前表单的所有值
        dynamicRules: ({ values }) => {
            console.log('values:', values);
            //需要return
            return [
                {
                    //默认开启表单检验
                    required: true,
                    // value 当前手机号输入的值
                    validator: (_, value) => {
                        //需要return 一个Promise对象
                        return new Promise((resolve, reject) => {
                            if (!value) {
                                reject('请输入身份证号！');
                            }
                            //验证手机号是否正确
                            let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                            if (!reg.test(value)) {
                                reject('请输入正确身份证号！');
                            }
                            resolve();
                        });
                    },
                },
            ];
        },
        colProps: { span: 8 },
    },
]

2.3，弹框子组件点击确定事件

2.4，在子组件的表单中这样引入一下确定事件的方法

//注册第一个表单
const [registerForm1, { validate: validate1, setFieldsValue: setFieldsValue1, getFieldsValue: getFieldsValue1, setFieldsValue }] = useForm({
  //注册表单列
  schemas: formState1,
  showResetButton: false,
  showSubmitButton: false,
  autoSubmitOnEnter: true,
  submitFunc: addEditingConfirmation,//确定事件的方法这样注册一下
});

2.5，点击确定的事件

//新增编辑请求
async function addEditingConfirmation() {
  validate1().then(function (res) {
       校验成功处理的事件
    }

  })
    .catch(function (err) {
    检验不成功直接弹出提示
      console.log(err);
      return
    });;
}

2，提示框

import { useMessage } from "/@/hooks/web/useMessage";//引入提示组件

//注册Message
const { createMessage } = useMessage();

//使用
createMessage.error("请选择一条登记信息！");

3，表单校验

1，在数据中添加 ：required: true, //自动触发检验，布尔类型

  {
        label: '服务费', //显示label
        field: 'customName6', //查询字段
        //自动触发检验，布尔类型
        required: true,
        component: 'Input', //渲染的组件
        colProps: { span: 12 },
    },

2，在注册的表单中添加校验函数submitFunc: saveBtn, 也需要引入校验函数validate

const [registerForm,{ validate,getFieldsValue,validate}] = useForm({
    //注册表单列
    schemas: addFormAgreement,
    showResetButton: false,
    showSubmitButton: false,
    showActionButtonGroup: false,
    submitFunc: saveBtn,
});

3，在执行的函数中使用validate()
注意，函数前面必须添加 async

async function saveBtn(){
     validate1().then(function (res) {
     //校验成功的逻辑
   })
    .catch(function (err) {
      console.log(err);
      return
    });;
}