feat(订单/款式编辑): 添加标签页切换前的未保存状态检查
在订单和款式的编辑页面中,添加了标签页切换前的检查逻辑,防止用户在未保存编辑内容时切换标签页,避免数据丢失
This commit is contained in:
parent
59dff2b1bf
commit
a2dedfe533
@ -417,6 +417,16 @@ export default defineComponent({
|
||||
return [sums];
|
||||
};
|
||||
|
||||
const handleTabChange = ({ name }) => {
|
||||
// 检查当前标签页是否有未保存的编辑状态
|
||||
const currentDtls = activeTab.value === 'setting' ? settingDtls.value : baseDtls.value;
|
||||
if (currentDtls.some(r => hasEditStatus(r))) {
|
||||
alertService.showWarn($t('entity.validation.saveOrCancelFirst'));
|
||||
return false; // 阻止标签页切换
|
||||
}
|
||||
return true; // 允许标签页切换
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
@ -439,6 +449,7 @@ export default defineComponent({
|
||||
handlePrint,
|
||||
activeTab,
|
||||
hasEditStatus,
|
||||
handleTabChange,
|
||||
addDtlEvent,
|
||||
editDtlEvent,
|
||||
saveDtlEvent,
|
||||
|
||||
@ -202,7 +202,7 @@
|
||||
</vxe-form-item>
|
||||
</vxe-form>
|
||||
|
||||
<vxe-tabs v-model="activeTab">
|
||||
<vxe-tabs v-model="activeTab" :before-change-method="handleTabChange">
|
||||
<vxe-tab-pane name="setting" :title="$t('jewpmsApp.order.setting.title')" icon="vxe-icon-setting-fill">
|
||||
<vxe-table
|
||||
v-if="settingDtls"
|
||||
|
||||
@ -473,6 +473,16 @@ export default defineComponent({
|
||||
return [sums];
|
||||
};
|
||||
|
||||
const handleTabChange = ({ name }) => {
|
||||
// 检查当前标签页是否有未保存的编辑状态
|
||||
const currentDtls = activeTab.value === 'setting' ? settingDtls.value : baseDtls.value;
|
||||
if (currentDtls.some(r => hasEditStatus(r))) {
|
||||
alertService.showWarn($t('entity.validation.saveOrCancelFirst'));
|
||||
return false; // 阻止标签页切换
|
||||
}
|
||||
return true; // 允许标签页切换
|
||||
};
|
||||
|
||||
return {
|
||||
loading,
|
||||
isSaving,
|
||||
@ -506,6 +516,7 @@ export default defineComponent({
|
||||
styleGroupDicts,
|
||||
styleGroupPrefix,
|
||||
handleStyleGroupChange,
|
||||
handleTabChange,
|
||||
footerMethod,
|
||||
};
|
||||
},
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
</vxe-form-item>
|
||||
</vxe-form>
|
||||
|
||||
<vxe-tabs v-model="activeTab">
|
||||
<vxe-tabs v-model="activeTab" :before-change-method="handleTabChange">
|
||||
<vxe-tab-pane name="setting" :title="$t('jewpmsApp.style.setting.title')" icon="vxe-icon-setting-fill">
|
||||
<vxe-table
|
||||
v-if="settingDtls"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user