feat(订单/款式编辑): 添加标签页切换前的未保存状态检查

在订单和款式的编辑页面中,添加了标签页切换前的检查逻辑,防止用户在未保存编辑内容时切换标签页,避免数据丢失
This commit is contained in:
user 2025-04-24 15:41:18 +08:00
parent 59dff2b1bf
commit a2dedfe533
4 changed files with 24 additions and 2 deletions

View File

@ -417,6 +417,16 @@ export default defineComponent({
return [sums]; 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(() => { onMounted(() => {
loadData(); loadData();
}); });
@ -439,6 +449,7 @@ export default defineComponent({
handlePrint, handlePrint,
activeTab, activeTab,
hasEditStatus, hasEditStatus,
handleTabChange,
addDtlEvent, addDtlEvent,
editDtlEvent, editDtlEvent,
saveDtlEvent, saveDtlEvent,

View File

@ -202,7 +202,7 @@
</vxe-form-item> </vxe-form-item>
</vxe-form> </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-tab-pane name="setting" :title="$t('jewpmsApp.order.setting.title')" icon="vxe-icon-setting-fill">
<vxe-table <vxe-table
v-if="settingDtls" v-if="settingDtls"

View File

@ -473,6 +473,16 @@ export default defineComponent({
return [sums]; 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 { return {
loading, loading,
isSaving, isSaving,
@ -506,6 +516,7 @@ export default defineComponent({
styleGroupDicts, styleGroupDicts,
styleGroupPrefix, styleGroupPrefix,
handleStyleGroupChange, handleStyleGroupChange,
handleTabChange,
footerMethod, footerMethod,
}; };
}, },

View File

@ -130,7 +130,7 @@
</vxe-form-item> </vxe-form-item>
</vxe-form> </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-tab-pane name="setting" :title="$t('jewpmsApp.style.setting.title')" icon="vxe-icon-setting-fill">
<vxe-table <vxe-table
v-if="settingDtls" v-if="settingDtls"