#页面优化

zhou zhou

1 天以前 6877c9caa25162e570a3e2a99a5b2ce3ef88368b

 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>