#页面优化

zhou zhou

19 小时以前 6877c9caa25162e570a3e2a99a5b2ce3ef88368b

 rsf-design/src/views/system/user/modules/user-dialog.vue

@@ -2,7 +2,9 @@
  <ElDialog
    :title="dialogTitle"
    :model-value="visible"
    @update:model-value="handleCancel"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @update:model-value="handleVisibleUpdate"
    width="960px"
    align-center
    class="user-dialog"
@@ -31,6 +33,7 @@

<script setup>
  import ArtForm from '@/components/core/forms/art-form/index.vue'
  import { ElMessageBox } from 'element-plus'
  import { buildUserDialogModel, createUserFormState } from '../userPage.helpers'

  const props = defineProps({
@@ -44,6 +47,7 @@
  const emit = defineEmits(['update:visible', 'submit'])
  const formRef = ref()
  const form = reactive(createUserFormState())
  const initialSnapshot = ref(createComparableSnapshot())

  const isEdit = computed(() => props.type === 'edit')
  const dialogTitle = computed(() => (isEdit.value ? '编辑用户' : '新增用户'))
@@ -214,6 +218,27 @@
      }
    },
    {
      label: '出生日期',
      key: 'birthday',
      type: 'input',
      props: {
        placeholder: '请输入出生日期',
        clearable: true
      }
    },
    {
      label: '个人简介',
      key: 'introduction',
      type: 'input',
      props: {
        type: 'textarea',
        rows: 3,
        placeholder: '请输入个人简介',
        clearable: true
      },
      span: 24
    },
    {
      label: '状态',
      key: 'status',
      type: 'select',
@@ -242,11 +267,14 @@

  const resetForm = () => {
    Object.assign(form, createUserFormState())
    initialSnapshot.value = createComparableSnapshot()
    formRef.value?.clearValidate?.()
  }

  const loadFormData = () => {
    Object.assign(form, buildUserDialogModel(props.userData))
    const nextForm = buildUserDialogModel(props.userData)
    Object.assign(form, nextForm)
    initialSnapshot.value = createComparableSnapshot(nextForm)
  }

  const handleSubmit = async () => {
@@ -259,8 +287,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 = () => {
@@ -298,4 +341,33 @@
      }
    }
  )

  function createComparableSnapshot(source = form) {
    return JSON.stringify({
      ...createUserFormState(),
      ...source,
      roleIds: Array.isArray(source?.roleIds) ? [...source.roleIds] : [],
      userRoleIds: Array.isArray(source?.userRoleIds) ? [...source.userRoleIds] : []
    })
  }

  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>