325 lines
10 KiB
Vue
325 lines
10 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
|
|
width="820px"
|
|
align-center
|
|
:close-on-click-modal="false"
|
|
@close="handleClose"
|
|
>
|
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
|
<el-form-item :label="$t('page.form.labelMenuType')" prop="type">
|
|
<sa-radio v-model="formData.type" type="button" dict="menu_type"></sa-radio>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('page.form.labelParentMenu')" prop="parent_id">
|
|
<el-tree-select
|
|
v-model="formData.parent_id"
|
|
:data="optionData.treeData"
|
|
:render-after-expand="false"
|
|
check-strictly
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('page.form.labelMenuName')" prop="name">
|
|
<el-input v-model="formData.name" :placeholder="$t('page.form.labelMenuName')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="formData.type < 3">
|
|
<el-form-item prop="path">
|
|
<template #label>
|
|
<sa-label
|
|
:label="$t('page.form.labelRoutePath')"
|
|
:tooltip="$t('page.form.labelRoutePathTip')"
|
|
/>
|
|
</template>
|
|
<el-input v-model="formData.path" :placeholder="$t('page.form.placeholderRoutePath')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="formData.type != 3">
|
|
<el-form-item :label="$t('page.form.labelComponentName')" prop="code">
|
|
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderComponentName')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="formData.type === 2">
|
|
<el-form-item prop="component">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelComponentPath')" :tooltip="$t('page.form.labelComponentPathTip')" />
|
|
</template>
|
|
<el-autocomplete
|
|
class="w-full"
|
|
v-model="formData.component"
|
|
:fetch-suggestions="querySearch"
|
|
clearable
|
|
:placeholder="$t('page.form.placeholderComponentPath')"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="formData.type != 3">
|
|
<el-form-item :label="$t('page.form.labelMenuIcon')" prop="icon">
|
|
<sa-icon-picker v-model="formData.icon" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" v-if="formData.type === 3">
|
|
<el-form-item :label="$t('page.form.labelPermSlug')" prop="slug">
|
|
<el-input v-model="formData.slug" :placeholder="$t('page.form.placeholderPermSlug')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" v-if="formData.type === 4">
|
|
<el-form-item :label="$t('page.form.labelLinkUrl')" prop="link_url">
|
|
<el-input v-model="formData.link_url" :placeholder="$t('page.form.placeholderLinkUrl')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item prop="sort">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelSort')" :tooltip="$t('page.form.labelSortTip')" />
|
|
</template>
|
|
<el-input-number
|
|
v-model="formData.sort"
|
|
:placeholder="$t('page.form.placeholderSort')"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item prop="status">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelStatus')" :tooltip="$t('page.form.labelStatusTip')" />
|
|
</template>
|
|
<sa-radio v-model="formData.status" dict="data_status" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item prop="is_iframe">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelIsIframe')" :tooltip="$t('page.form.labelIsIframeTip')" />
|
|
</template>
|
|
<sa-switch v-model="formData.is_iframe" dict="yes_or_no" :showText="false" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item prop="is_keep_alive">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelIsKeepAlive')" :tooltip="$t('page.form.labelIsKeepAliveTip')" />
|
|
</template>
|
|
<sa-switch v-model="formData.is_keep_alive" dict="yes_or_no" :showText="false" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item prop="is_hidden">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelIsHidden')" :tooltip="$t('page.form.labelIsHiddenTip')" />
|
|
</template>
|
|
<sa-switch v-model="formData.is_hidden" dict="yes_or_no" :showText="false" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item prop="is_fixed_tab">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelIsFixedTab')" :tooltip="$t('page.form.labelIsFixedTabTip')" />
|
|
</template>
|
|
<sa-switch v-model="formData.is_fixed_tab" dict="yes_or_no" :showText="false" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item prop="is_full_page">
|
|
<template #label>
|
|
<sa-label :label="$t('page.form.labelIsFullPage')" :tooltip="$t('page.form.labelIsFullPageTip')" />
|
|
</template>
|
|
<sa-switch v-model="formData.is_full_page" dict="yes_or_no" :showText="false" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import api from '@/api/system/menu'
|
|
import { ElMessage } from 'element-plus'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
interface Props {
|
|
modelValue: boolean
|
|
dialogType: string
|
|
data?: Record<string, any>
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: boolean): void
|
|
(e: 'success'): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: false,
|
|
dialogType: 'add',
|
|
data: undefined
|
|
})
|
|
|
|
const emit = defineEmits<Emits>()
|
|
const { t } = useI18n()
|
|
|
|
const formRef = ref<FormInstance>()
|
|
const optionData = reactive({
|
|
treeData: <any[]>[]
|
|
})
|
|
|
|
/**
|
|
* 处理自动查找视图文件
|
|
*/
|
|
const modules = import.meta.glob('/src/views/**/*.vue')
|
|
const getModulesKey = () => {
|
|
return Object.keys(modules).map((item) => item.replace('/src/views/', '/').replace('.vue', ''))
|
|
}
|
|
const componentsOptions = ref(getModulesKey())
|
|
const querySearch = (queryString: string, cb: any) => {
|
|
const results = queryString
|
|
? componentsOptions.value.filter((item) =>
|
|
item.toLowerCase().includes(queryString.toLowerCase())
|
|
)
|
|
: componentsOptions.value
|
|
cb(results.map((item) => ({ value: item })))
|
|
}
|
|
|
|
/**
|
|
* 弹窗显示状态双向绑定
|
|
*/
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
})
|
|
|
|
/**
|
|
* 表单验证规则
|
|
*/
|
|
const rules = computed<FormRules>(() => ({
|
|
parent_id: [{ required: true, message: t('page.form.ruleParentMenuRequired'), trigger: 'change' }],
|
|
name: [{ required: true, message: t('page.form.ruleMenuNameRequired'), trigger: 'blur' }],
|
|
path: [{ required: true, message: t('page.form.ruleRoutePathRequired'), trigger: 'blur' }],
|
|
code: [{ required: true, message: t('page.form.ruleComponentNameRequired'), trigger: 'blur' }],
|
|
slug: [{ required: true, message: t('page.form.rulePermSlugRequired'), trigger: 'blur' }],
|
|
link_url: [{ required: true, message: t('page.form.ruleLinkUrlRequired'), trigger: 'blur' }]
|
|
}))
|
|
|
|
/**
|
|
* 初始数据
|
|
*/
|
|
const initialFormData = {
|
|
id: null,
|
|
parent_id: null,
|
|
type: 1,
|
|
component: '',
|
|
name: '',
|
|
slug: '',
|
|
path: '',
|
|
icon: '',
|
|
code: '',
|
|
remark: '',
|
|
link_url: '',
|
|
is_iframe: 2,
|
|
is_keep_alive: 2,
|
|
is_hidden: 2,
|
|
is_fixed_tab: 2,
|
|
is_full_page: 2,
|
|
sort: 100,
|
|
status: 1
|
|
}
|
|
|
|
/**
|
|
* 表单数据
|
|
*/
|
|
const formData = reactive({ ...initialFormData })
|
|
|
|
/**
|
|
* 监听弹窗打开，初始化表单数据
|
|
*/
|
|
watch(
|
|
() => props.modelValue,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
initPage()
|
|
}
|
|
}
|
|
)
|
|
|
|
/**
|
|
* 初始化页面数据
|
|
*/
|
|
const initPage = async () => {
|
|
// 先重置为初始值
|
|
Object.assign(formData, initialFormData)
|
|
|
|
const data = await api.list({ tree: true })
|
|
optionData.treeData = [
|
|
{
|
|
id: 0,
|
|
value: 0,
|
|
label: '无上级菜单',
|
|
children: data
|
|
}
|
|
]
|
|
|
|
// 如果有数据，则填充数据
|
|
if (props.data) {
|
|
await nextTick()
|
|
initForm()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 初始化表单数据
|
|
*/
|
|
const initForm = () => {
|
|
if (props.data) {
|
|
for (const key in formData) {
|
|
if (props.data[key] != null && props.data[key] != undefined) {
|
|
;(formData as any)[key] = props.data[key]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 关闭弹窗并重置表单
|
|
*/
|
|
const handleClose = () => {
|
|
visible.value = false
|
|
formRef.value?.resetFields()
|
|
}
|
|
|
|
/**
|
|
* 提交表单
|
|
*/
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return
|
|
|
|
try {
|
|
await formRef.value.validate()
|
|
if (props.dialogType === 'add') {
|
|
await api.save(formData)
|
|
ElMessage.success(t('page.form.addSuccess'))
|
|
} else {
|
|
await api.update(formData)
|
|
ElMessage.success(t('page.form.editSuccess'))
|
|
}
|
|
emit('success')
|
|
handleClose()
|
|
} catch (error) {
|
|
console.log('表单验证失败:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-input-number) {
|
|
width: 100%;
|
|
}
|
|
</style>
|