| | |
| | | // 表单的确认和取消 |
| | | import { onActivated, onDeactivated, ref, watch } from 'vue'; |
| | | import { defineProps, onActivated, onDeactivated, ref, watch } from 'vue'; |
| | | import { useCloned } from '@vueuse/core'; |
| | | import { useMessageBoxTip, useMessageBox } from './messageBox'; |
| | | |
| | | // 表单的确认和取消 |
| | | export function useFormConfirm({ |
| | | defaultForm = undefined, |
| | | submit = { |
| | | do: () => {}, |
| | | do: () => {} |
| | | }, |
| | | cancel = { |
| | | do: () => {}, |
| | | do: () => {} |
| | | }, |
| | | reset = { |
| | | do: () => {}, |
| | | }, |
| | | do: () => {} |
| | | } |
| | | }) { |
| | | if (!submit.title) submit.title = '提交'; |
| | | if (!submit.msg) submit.msg = '确认是否提交?'; |
| | | if (!cancel.title) cancel.title = '取消'; |
| | | if (!cancel.msg) cancel.msg = '是否放弃已编辑的内容?'; |
| | | |
| | | // const formProps = defineProps({ |
| | | // // 是否在提交成功后清空表单 |
| | | // clearAftSubmit: Boolean |
| | | // }); |
| | | |
| | | //表单内容 |
| | | const formObj = ref(defaultForm ? defaultForm : {}); |
| | |
| | | formObj, |
| | | (nv, ov) => { |
| | | if (!isReset && nv != ov) { |
| | | formObjClone = useCloned(formObj, { manual: true }); |
| | | formObjClone = useCloned(nv, { manual: true }); |
| | | } |
| | | if (!isReset && nv === ov) { |
| | | edit.value = true; |
| | |
| | | |
| | | // 重置表单 |
| | | const _reset = function () { |
| | | formRef.value.clearValidate(); |
| | | edit.value = false; |
| | | isReset = true; |
| | | formObj.value = useCloned(formObjClone.cloned, { |
| | | manual: true, |
| | | manual: true |
| | | }).cloned.value; |
| | | formRef.value.clearValidate(); |
| | | }; |
| | | |
| | | // 清空表单 |
| | | const clear = function () { |
| | | edit.value = false; |
| | | isReset = true; |
| | | formRef.value.resetFields(); |
| | | edit.value = false; |
| | | }; |
| | | |
| | | // 提交成功后 |
| | | const submited = function () { |
| | | // if (formProps.clearAftSubmit) clear(); |
| | | edit.value = false; |
| | | formObjClone = useCloned(formObj, { manual: true }); |
| | | }; |
| | | |
| | | // 提交表单 |
| | | const onSubmit = function () { |
| | | formRef.value.validate((valid) => { |
| | | const onSubmit = function (messageBox = true) { |
| | | formRef.value.validate(async (valid) => { |
| | | if (valid) { |
| | | if (messageBox) { |
| | | useMessageBoxTip({ |
| | | confirmMsg: submit.msg, |
| | | confirmTitle: submit.title, |
| | | onConfirm: async () => { |
| | | await submit.do(); |
| | | const res = await submit.do(); |
| | | submited(); |
| | | return; |
| | | }, |
| | | return res; |
| | | } |
| | | }); |
| | | } else { |
| | | await submit.do(); |
| | | submited(); |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | |
| | | confirmMsg: cancel.msg, |
| | | confirmTitle: cancel.title, |
| | | onConfirm: () => { |
| | | clear(); |
| | | // clear(); |
| | | return cancel.do(); |
| | | }, |
| | | } |
| | | }); |
| | | } else { |
| | | cancel.do(); |
| | |
| | | onConfirm: () => { |
| | | _reset(); |
| | | return reset.do(); |
| | | }, |
| | | } |
| | | }); |
| | | } else { |
| | | _reset(); |
| | |
| | | } |
| | | }; |
| | | |
| | | return { formObj, formRef, edit, onSubmit, onCancel, onReset }; |
| | | return { formObj, formRef, edit, onSubmit, onCancel, onReset, clear }; |
| | | } |