refactor: useBeforeCloseDiff
This commit is contained in:
parent
34e5812de9
commit
eb9f278e7f
@ -29,48 +29,52 @@ interface BeforeCloseDiffProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @deprecated 注意为实验性功能 可能有api变动/被移除
|
* 用于Drawer/Modal使用 判断表单是否有变动来决定是否弹窗提示
|
||||||
* @param props props
|
* @param props props
|
||||||
* @returns hook
|
* @returns hook
|
||||||
*
|
|
||||||
* 待解决问题: 网速慢情况直接关闭 会导致数据不一致问题
|
|
||||||
* 但是使用api.lock会导致在报错情况无法关闭(因为目前代码没有finally)
|
|
||||||
*/
|
*/
|
||||||
export function useBeforeCloseDiff(props: BeforeCloseDiffProps) {
|
export function useBeforeCloseDiff(props: BeforeCloseDiffProps) {
|
||||||
const { initializedGetter, currentGetter, compare } = props;
|
const { initializedGetter, currentGetter, compare } = props;
|
||||||
|
/**
|
||||||
|
* 记录初始值 json
|
||||||
|
*/
|
||||||
const initialized = ref<string>('');
|
const initialized = ref<string>('');
|
||||||
|
/**
|
||||||
|
* 是否已经初始化了 通过这个值判断是否需要进行对比 为false直接关闭 不弹窗
|
||||||
|
*/
|
||||||
const isInitialized = ref(false);
|
const isInitialized = ref(false);
|
||||||
const isSubmitted = ref(false);
|
|
||||||
|
|
||||||
async function updateInitialized(data?: string) {
|
/**
|
||||||
|
* 标记是否已经完成初始化 后续需要进行对比
|
||||||
|
* @param data 自定义初始化数据 可选
|
||||||
|
*/
|
||||||
|
async function markInitialized(data?: string) {
|
||||||
initialized.value = data || (await initializedGetter());
|
initialized.value = data || (await initializedGetter());
|
||||||
isInitialized.value = true;
|
isInitialized.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置初始化状态 需要在closed前调用 或者打开窗口时
|
||||||
|
*/
|
||||||
function resetInitialized() {
|
function resetInitialized() {
|
||||||
initialized.value = '';
|
initialized.value = '';
|
||||||
isInitialized.value = false;
|
isInitialized.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSubmitted() {
|
/**
|
||||||
isSubmitted.value = true;
|
* 提供给useVbenForm/useVbenDrawer使用
|
||||||
}
|
* @returns 是否允许关闭
|
||||||
|
*/
|
||||||
async function onBeforeClose(): Promise<boolean> {
|
async function onBeforeClose(): Promise<boolean> {
|
||||||
// 如果还未初始化,直接允许关闭
|
// 如果还未初始化,直接允许关闭
|
||||||
if (!isInitialized.value) {
|
if (!isInitialized.value) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
// 如果已经提交过,直接允许关闭
|
|
||||||
if (isSubmitted.value) {
|
|
||||||
// 重置状态
|
|
||||||
isSubmitted.value = false;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
// 获取当前表单数据
|
||||||
const current = await currentGetter();
|
const current = await currentGetter();
|
||||||
|
// 自定义比较的情况
|
||||||
if (isFunction(compare) && compare(initialized.value, current)) {
|
if (isFunction(compare) && compare(initialized.value, current)) {
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
@ -104,8 +108,7 @@ export function useBeforeCloseDiff(props: BeforeCloseDiffProps) {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
onBeforeClose,
|
onBeforeClose,
|
||||||
updateInitialized,
|
markInitialized,
|
||||||
setSubmitted,
|
|
||||||
resetInitialized,
|
resetInitialized,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -26,11 +26,12 @@ const [BasicForm, formApi] = useVbenForm({
|
|||||||
showDefaultActions: false,
|
showDefaultActions: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { onBeforeClose, updateInitialized, setSubmitted, resetInitialized } =
|
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||||
useBeforeCloseDiff({
|
{
|
||||||
initializedGetter: defaultFormValueGetter(formApi),
|
initializedGetter: defaultFormValueGetter(formApi),
|
||||||
currentGetter: defaultFormValueGetter(formApi),
|
currentGetter: defaultFormValueGetter(formApi),
|
||||||
});
|
},
|
||||||
|
);
|
||||||
|
|
||||||
const [BasicModal, modalApi] = useVbenModal({
|
const [BasicModal, modalApi] = useVbenModal({
|
||||||
fullscreenButton: false,
|
fullscreenButton: false,
|
||||||
@ -50,7 +51,7 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
const record = await configInfo(id);
|
const record = await configInfo(id);
|
||||||
await formApi.setValues(record);
|
await formApi.setValues(record);
|
||||||
}
|
}
|
||||||
await updateInitialized();
|
await markInitialized();
|
||||||
|
|
||||||
modalApi.modalLoading(false);
|
modalApi.modalLoading(false);
|
||||||
},
|
},
|
||||||
@ -65,7 +66,7 @@ async function handleConfirm() {
|
|||||||
}
|
}
|
||||||
const data = cloneDeep(await formApi.getValues());
|
const data = cloneDeep(await formApi.getValues());
|
||||||
await (isUpdate.value ? configUpdate(data) : configAdd(data));
|
await (isUpdate.value ? configUpdate(data) : configAdd(data));
|
||||||
setSubmitted();
|
resetInitialized();
|
||||||
emit('reload');
|
emit('reload');
|
||||||
modalApi.close();
|
modalApi.close();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
@ -135,11 +135,12 @@ async function loadDefaultPassword(update: boolean) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const { onBeforeClose, updateInitialized, setSubmitted, resetInitialized } =
|
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||||
useBeforeCloseDiff({
|
{
|
||||||
initializedGetter: defaultFormValueGetter(formApi),
|
initializedGetter: defaultFormValueGetter(formApi),
|
||||||
currentGetter: defaultFormValueGetter(formApi),
|
currentGetter: defaultFormValueGetter(formApi),
|
||||||
});
|
},
|
||||||
|
);
|
||||||
|
|
||||||
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
||||||
onBeforeClose,
|
onBeforeClose,
|
||||||
@ -208,7 +209,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
|
|||||||
setupPostOptions(user.deptId),
|
setupPostOptions(user.deptId),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
await updateInitialized();
|
await markInitialized();
|
||||||
|
|
||||||
drawerApi.drawerLoading(false);
|
drawerApi.drawerLoading(false);
|
||||||
},
|
},
|
||||||
@ -223,7 +224,7 @@ async function handleConfirm() {
|
|||||||
}
|
}
|
||||||
const data = cloneDeep(await formApi.getValues());
|
const data = cloneDeep(await formApi.getValues());
|
||||||
await (isUpdate.value ? userUpdate(data) : userAdd(data));
|
await (isUpdate.value ? userUpdate(data) : userAdd(data));
|
||||||
setSubmitted();
|
resetInitialized();
|
||||||
emit('reload');
|
emit('reload');
|
||||||
drawerApi.close();
|
drawerApi.close();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
Loading…
Reference in New Issue
Block a user