// 表单的确认和取消
|
import { onActivated, onDeactivated, ref, watch } from 'vue';
|
import { useCloned } from '@vueuse/core';
|
import { useMessageBoxTip, useMessageBox } from './messageBox';
|
|
export function useFormConfirm({
|
defaultForm = undefined,
|
submit = {
|
do: () => {},
|
},
|
cancel = {
|
do: () => {},
|
},
|
reset = {
|
do: () => {},
|
},
|
}) {
|
if (!submit.title) submit.title = '提交';
|
if (!submit.msg) submit.msg = '确认是否提交？';
|
if (!cancel.title) cancel.title = '取消';
|
if (!cancel.msg) cancel.msg = '是否放弃已编辑的内容？';
|
|
//表单内容
|
const formObj = ref(defaultForm ? defaultForm : {});
|
let formObjClone = useCloned(formObj, { manual: true });
|
//表单组件引用
|
const formRef = ref(null);
|
|
// 表单编辑状态
|
const edit = ref(false);
|
let isReset = false;
|
const active = ref(true);
|
|
// 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用
|
onActivated(() => {
|
active.value = true;
|
});
|
// 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用
|
onDeactivated(() => {
|
active.value = false;
|
});
|
|
// 当表单被取消激活后，清空表单数据
|
watch(active, (nValue) => {
|
if (!nValue) {
|
clear();
|
}
|
});
|
|
// 表单被修改过, 更新编辑状态
|
watch(
|
formObj,
|
(nv, ov) => {
|
if (!isReset && nv != ov) {
|
formObjClone = useCloned(formObj, { manual: true });
|
}
|
if (!isReset && nv === ov) {
|
edit.value = true;
|
}
|
isReset = false;
|
},
|
{ deep: true }
|
);
|
|
// 重置表单
|
const _reset = function () {
|
edit.value = false;
|
isReset = true;
|
formObj.value = useCloned(formObjClone.cloned, {
|
manual: true,
|
}).cloned.value;
|
formRef.value.clearValidate();
|
};
|
|
// 清空表单
|
const clear = function () {
|
edit.value = false;
|
isReset = true;
|
formRef.value.resetFields();
|
};
|
|
// 提交成功后
|
const submited = function () {
|
edit.value = false;
|
formObjClone = useCloned(formObj, { manual: true });
|
};
|
|
// 提交表单
|
const onSubmit = function () {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
useMessageBoxTip({
|
confirmMsg: submit.msg,
|
confirmTitle: submit.title,
|
onConfirm: async () => {
|
await submit.do();
|
submited();
|
return;
|
},
|
});
|
}
|
});
|
};
|
|
// 取消提交
|
const onCancel = function () {
|
if (edit.value) {
|
// 弹出确认框
|
useMessageBox({
|
confirmMsg: cancel.msg,
|
confirmTitle: cancel.title,
|
onConfirm: () => {
|
clear();
|
return cancel.do();
|
},
|
});
|
} else {
|
cancel.do();
|
}
|
};
|
|
// 重置表单
|
const onReset = function (tips) {
|
if (edit.value) {
|
if (tips) {
|
// 弹出确认框
|
useMessageBox({
|
confirmMsg: '是否重置表单内容？',
|
confirmTitle: '重置表单',
|
onConfirm: () => {
|
_reset();
|
return reset.do();
|
},
|
});
|
} else {
|
_reset();
|
reset.do();
|
}
|
} else {
|
reset.do();
|
}
|
};
|
|
return { formObj, formRef, edit, onSubmit, onCancel, onReset };
|
}
|
