From 6877c9caa25162e570a3e2a99a5b2ce3ef88368b Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期一, 13 四月 2026 13:48:37 +0800
Subject: [PATCH] #页面优化

---
 rsf-design/src/views/system/role/modules/role-edit-dialog.vue |   83 ++++++++++++++++++++++++++++++++++++++---
 1 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/rsf-design/src/views/system/role/modules/role-edit-dialog.vue b/rsf-design/src/views/system/role/modules/role-edit-dialog.vue
index fbec2b9..e4fa75a 100644
--- a/rsf-design/src/views/system/role/modules/role-edit-dialog.vue
+++ b/rsf-design/src/views/system/role/modules/role-edit-dialog.vue
@@ -2,9 +2,11 @@
   <ElDialog
     :title="dialogTitle"
     :model-value="visible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
     width="720px"
     align-center
-    @update:model-value="handleCancel"
+    @update:model-value="handleVisibleUpdate"
     @closed="handleClosed"
   >
     <ArtForm
@@ -30,7 +32,12 @@
 
 <script setup>
   import ArtForm from '@/components/core/forms/art-form/index.vue'
-  import { buildRoleDialogModel, createRoleFormState, getRoleStatusOptions } from '../rolePage.helpers'
+  import { ElMessageBox } from 'element-plus'
+  import {
+    buildRoleDialogModel,
+    createRoleFormState,
+    getRoleStatusOptions
+  } from '../rolePage.helpers'
   import { useI18n } from 'vue-i18n'
 
   const props = defineProps({
@@ -42,6 +49,7 @@
   const emit = defineEmits(['update:visible', 'submit'])
   const formRef = ref()
   const form = reactive(createRoleFormState())
+  const initialSnapshot = ref(createComparableSnapshot())
   const { t } = useI18n()
 
   const isEdit = computed(() => props.dialogType === 'edit')
@@ -50,7 +58,9 @@
   )
 
   const rules = computed(() => ({
-    name: [{ required: true, message: t('pages.system.role.dialog.validationName'), trigger: 'blur' }]
+    name: [
+      { required: true, message: t('pages.system.role.dialog.validationName'), trigger: 'blur' }
+    ]
   }))
 
   function createInputFormItem(label, key, placeholder, extraProps = {}, extraConfig = {}) {
@@ -67,7 +77,14 @@
     }
   }
 
-  function createSelectFormItem(label, key, placeholder, options, extraProps = {}, extraConfig = {}) {
+  function createSelectFormItem(
+    label,
+    key,
+    placeholder,
+    options,
+    extraProps = {},
+    extraConfig = {}
+  ) {
     return {
       label,
       key,
@@ -110,11 +127,14 @@
 
   const resetForm = () => {
     Object.assign(form, createRoleFormState())
+    initialSnapshot.value = createComparableSnapshot()
     formRef.value?.clearValidate?.()
   }
 
   const loadFormData = () => {
-    Object.assign(form, buildRoleDialogModel(props.roleData))
+    const nextForm = buildRoleDialogModel(props.roleData)
+    Object.assign(form, nextForm)
+    initialSnapshot.value = createComparableSnapshot(nextForm)
   }
 
   const handleSubmit = async () => {
@@ -127,8 +147,23 @@
     }
   }
 
-  const handleCancel = () => {
+  const closeDialog = () => {
     emit('update:visible', false)
+  }
+
+  const handleCancel = async () => {
+    if (!(await confirmDiscardIfDirty())) {
+      return
+    }
+    closeDialog()
+  }
+
+  const handleVisibleUpdate = (nextVisible) => {
+    if (!nextVisible) {
+      handleCancel()
+      return
+    }
+    emit('update:visible', true)
   }
 
   const handleClosed = () => {
@@ -157,4 +192,40 @@
     },
     { deep: true }
   )
+
+  watch(
+    () => props.dialogType,
+    () => {
+      if (props.visible) {
+        loadFormData()
+      }
+    }
+  )
+
+  function createComparableSnapshot(source = form) {
+    return JSON.stringify({
+      ...createRoleFormState(),
+      ...source
+    })
+  }
+
+  function isDirty() {
+    return createComparableSnapshot() !== initialSnapshot.value
+  }
+
+  async function confirmDiscardIfDirty() {
+    if (!isDirty()) {
+      return true
+    }
+    try {
+      await ElMessageBox.confirm('褰撳墠鍐呭灏氭湭淇濆瓨锛岀‘瀹氳鍏抽棴鍚楋紵', '鏈繚瀛樻彁绀�', {
+        confirmButtonText: '鏀惧純淇敼',
+        cancelButtonText: '缁х画缂栬緫',
+        type: 'warning'
+      })
+      return true
+    } catch {
+      return false
+    }
+  }
 </script>

--
Gitblit v1.9.1