#页面优化

zhou zhou

1 天以前 6877c9caa25162e570a3e2a99a5b2ce3ef88368b

 rsf-design/src/views/system/dict-type/modules/dict-type-dialog.vue

@@ -2,9 +2,11 @@
  <ElDialog
    :title="dialogTitle"
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="820px"
    align-center
    @update:model-value="handleCancel"
    @update:model-value="handleVisibleUpdate"
    @closed="handleClosed"
  >
    <ArtForm
@@ -29,6 +31,7 @@
</template>

<script setup>
  import { ElMessageBox } from 'element-plus'
  import { useI18n } from 'vue-i18n'
  import ArtForm from '@/components/core/forms/art-form/index.vue'
  import { buildDictTypeDialogModel, createDictTypeFormState } from '../dictTypePage.helpers'
@@ -41,15 +44,20 @@
  const emit = defineEmits(['update:visible', 'submit'])
  const formRef = ref()
  const form = reactive(createDictTypeFormState())
  const initialSnapshot = ref(createComparableSnapshot())
  const { t } = useI18n()

  const isEdit = computed(() => Boolean(form.id))
  const dialogTitle = computed(() =>
    isEdit.value ? t('pages.system.dictType.dialog.titleEdit') : t('pages.system.dictType.dialog.titleCreate')
    isEdit.value
      ? t('pages.system.dictType.dialog.titleEdit')
      : t('pages.system.dictType.dialog.titleCreate')
  )

  const rules = computed(() => ({
    code: [{ required: true, message: t('pages.system.dictType.validation.code'), trigger: 'blur' }],
    code: [
      { required: true, message: t('pages.system.dictType.validation.code'), trigger: 'blur' }
    ],
    name: [{ required: true, message: t('pages.system.dictType.validation.name'), trigger: 'blur' }]
  }))

@@ -110,11 +118,14 @@

  function resetForm() {
    Object.assign(form, createDictTypeFormState())
    initialSnapshot.value = createComparableSnapshot()
    formRef.value?.clearValidate?.()
  }

  function loadFormData() {
    Object.assign(form, buildDictTypeDialogModel(props.dictTypeData))
    const nextForm = buildDictTypeDialogModel(props.dictTypeData)
    Object.assign(form, nextForm)
    initialSnapshot.value = createComparableSnapshot(nextForm)
  }

  async function handleSubmit() {
@@ -127,8 +138,23 @@
    }
  }

  function handleCancel() {
  function closeDialog() {
    emit('update:visible', false)
  }

  async function handleCancel() {
    if (!(await confirmDiscardIfDirty())) {
      return
    }
    closeDialog()
  }

  function handleVisibleUpdate(nextVisible) {
    if (!nextVisible) {
      handleCancel()
      return
    }
    emit('update:visible', true)
  }

  function handleClosed() {
@@ -155,4 +181,31 @@
    },
    { deep: true }
  )

  function createComparableSnapshot(source = form) {
    return JSON.stringify({
      ...createDictTypeFormState(),
      ...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>