<template>
|
<ElDialog
|
:title="dialogTitle"
|
:model-value="visible"
|
@update:model-value="handleCancel"
|
width="760px"
|
align-center
|
class="menu-dialog"
|
@closed="handleClosed"
|
>
|
<ArtForm
|
ref="formRef"
|
v-model="form"
|
:items="formItems"
|
:rules="rules"
|
:span="24"
|
:gutter="20"
|
label-width="100px"
|
:show-reset="false"
|
:show-submit="false"
|
>
|
<template #menuType>
|
<ElRadioGroup v-model="form.menuType" :disabled="disableMenuType">
|
<ElRadioButton value="menu">{{ t('pages.manager.menuPda.type.menu') }}</ElRadioButton>
|
<ElRadioButton value="button">{{ t('pages.manager.menuPda.type.button') }}</ElRadioButton>
|
</ElRadioGroup>
|
</template>
|
</ArtForm>
|
|
<template #footer>
|
<span class="dialog-footer">
|
<ElButton @click="handleCancel">{{ t('common.cancel') }}</ElButton>
|
<ElButton type="primary" @click="handleSubmit">{{ t('common.confirm') }}</ElButton>
|
</span>
|
</template>
|
</ElDialog>
|
</template>
|
|
<script setup>
|
import ArtForm from '@/components/core/forms/art-form/index.vue'
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
const createMenuPdaFormState = () => ({
|
menuType: 'menu',
|
id: null,
|
parentId: 0,
|
name: '',
|
route: '',
|
component: '',
|
authority: '',
|
icon: '',
|
sort: 0,
|
status: 1,
|
memo: ''
|
})
|
|
const props = defineProps({
|
visible: { required: false, default: false },
|
lockType: { required: false, default: false },
|
editData: { required: false, default: null },
|
menuTreeOptions: { required: false, default: () => [] }
|
})
|
|
const emit = defineEmits(['update:visible', 'submit'])
|
const formRef = ref()
|
const form = reactive(createMenuPdaFormState())
|
|
const isEdit = computed(() => Boolean(form.id))
|
const dialogTitle = computed(() =>
|
isEdit.value
|
? form.menuType === 'button'
|
? t('pages.manager.menuPda.dialog.titleEditButton')
|
: t('pages.manager.menuPda.dialog.titleEditMenu')
|
: form.menuType === 'button'
|
? t('pages.manager.menuPda.dialog.titleAddButton')
|
: t('pages.manager.menuPda.dialog.titleAddMenu')
|
)
|
const disableMenuType = computed(() => props.lockType || isEdit.value)
|
|
const rules = computed(() => ({
|
name: [
|
{
|
required: true,
|
message:
|
form.menuType === 'button'
|
? t('pages.manager.menuPda.dialog.validation.permissionName')
|
: t('pages.manager.menuPda.dialog.validation.menuName'),
|
trigger: 'blur'
|
}
|
],
|
route:
|
form.menuType === 'menu'
|
? [{ required: true, message: t('pages.manager.menuPda.dialog.validation.route'), trigger: 'blur' }]
|
: [],
|
authority:
|
form.menuType === 'button'
|
? [{ required: true, message: t('pages.manager.menuPda.dialog.validation.authority'), trigger: 'blur' }]
|
: []
|
}))
|
|
const formItems = computed(() => {
|
const items = [
|
{ label: t('pages.manager.menuPda.dialog.menuType'), key: 'menuType', span: 24 },
|
{
|
label: t('pages.manager.menuPda.dialog.parentMenu'),
|
key: 'parentId',
|
type: 'treeselect',
|
span: 24,
|
props: {
|
data: props.menuTreeOptions,
|
props: {
|
label: 'label',
|
value: 'value',
|
children: 'children'
|
},
|
placeholder: t('pages.manager.menuPda.dialog.placeholder.parentMenu'),
|
checkStrictly: true,
|
clearable: false,
|
defaultExpandAll: true
|
}
|
},
|
{
|
label:
|
form.menuType === 'button'
|
? t('pages.manager.menuPda.dialog.permissionName')
|
: t('pages.manager.menuPda.dialog.menuName'),
|
key: 'name',
|
type: 'input',
|
span: 24,
|
props: {
|
placeholder:
|
form.menuType === 'button'
|
? t('pages.manager.menuPda.dialog.placeholder.permissionName')
|
: t('pages.manager.menuPda.dialog.placeholder.menuName'),
|
clearable: true
|
}
|
}
|
]
|
|
if (form.menuType === 'menu') {
|
items.push(
|
{
|
label: t('pages.manager.menuPda.dialog.route'),
|
key: 'route',
|
type: 'input',
|
span: 24,
|
props: {
|
placeholder: t('pages.manager.menuPda.dialog.placeholder.route'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.manager.menuPda.dialog.component'),
|
key: 'component',
|
type: 'input',
|
span: 24,
|
props: {
|
placeholder: t('pages.manager.menuPda.dialog.placeholder.component'),
|
clearable: true
|
}
|
}
|
)
|
}
|
|
items.push(
|
{
|
label: t('pages.manager.menuPda.dialog.authority'),
|
key: 'authority',
|
type: 'input',
|
span: 24,
|
props: {
|
placeholder: t('pages.manager.menuPda.dialog.placeholder.authority'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.manager.menuPda.dialog.icon'),
|
key: 'icon',
|
type: 'input',
|
span: 24,
|
props: {
|
placeholder: t('pages.manager.menuPda.dialog.placeholder.icon'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.manager.menuPda.dialog.sort'),
|
key: 'sort',
|
type: 'number',
|
span: 24,
|
props: {
|
min: 0,
|
controlsPosition: 'right',
|
style: { width: '100%' }
|
}
|
},
|
{
|
label: t('pages.manager.menuPda.dialog.status'),
|
key: 'status',
|
type: 'select',
|
span: 24,
|
props: {
|
placeholder: t('pages.manager.menuPda.dialog.placeholder.status'),
|
options: [
|
{ label: t('common.status.enabled'), value: 1 },
|
{ label: t('common.status.disabled'), value: 0 }
|
]
|
}
|
},
|
{
|
label: t('table.memo'),
|
key: 'memo',
|
type: 'input',
|
span: 24,
|
props: {
|
type: 'textarea',
|
rows: 3,
|
placeholder: t('pages.manager.menuPda.dialog.placeholder.memo'),
|
clearable: true
|
}
|
}
|
)
|
|
return items
|
})
|
|
const normalizeNumber = (value, fallback = 0) => {
|
if (value === '' || value === null || value === undefined) {
|
return fallback
|
}
|
const normalized = Number(value)
|
return Number.isNaN(normalized) ? fallback : normalized
|
}
|
|
const resetForm = () => {
|
Object.assign(form, createMenuPdaFormState())
|
formRef.value?.clearValidate?.()
|
}
|
|
const loadFormData = () => {
|
resetForm()
|
const row = props.editData
|
if (!row || typeof row !== 'object') {
|
return
|
}
|
form.menuType = Number(row.type) === 1 ? 'button' : 'menu'
|
form.id = row.id ?? null
|
form.parentId = normalizeNumber(row.parentId, 0)
|
form.name = row.name || ''
|
form.route = row.route || ''
|
form.component = row.component || ''
|
form.authority = row.authority || ''
|
form.icon = row.icon || ''
|
form.sort = normalizeNumber(row.sort, 0)
|
form.status = normalizeNumber(row.status, 1)
|
form.memo = row.memo || ''
|
}
|
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
try {
|
await formRef.value.validate()
|
emit('submit', {
|
...form,
|
type: form.menuType === 'button' ? 1 : 0
|
})
|
} catch {
|
return
|
}
|
}
|
|
const handleCancel = () => {
|
emit('update:visible', false)
|
}
|
|
const handleClosed = () => {
|
resetForm()
|
}
|
|
watch(
|
() => props.visible,
|
(visible) => {
|
if (visible) {
|
loadFormData()
|
nextTick(() => formRef.value?.clearValidate?.())
|
}
|
},
|
{ immediate: true }
|
)
|
|
watch(
|
() => props.editData,
|
() => {
|
if (props.visible) {
|
loadFormData()
|
}
|
},
|
{ deep: true }
|
)
|
</script>
|
