JeecgBoot低代码平台简单记录

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: '姓名', //显示labelfield: 'name', //查询字段component: 'Input', //渲染的组件//自动触发检验，布尔类型required: true,colProps: { span: 8 },},{label: '身份证号', //显示labelfield: '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);//需要returnreturn [{//默认开启表单检验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: '服务费', //显示labelfield: '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});;
}