157 lines
3.7 KiB
Vue
157 lines
3.7 KiB
Vue
<template>
|
|
<div class="system">
|
|
<!-- 菜单列表头 -->
|
|
<MenuHeader :title="menuTitle" :buttons="menuHeaderButtons" @click="handleAddMenu" />
|
|
<!-- 菜单列表表格 -->
|
|
<MenuTable :table-data="menuTree" :columns="menuTableColumns" row-key="id">
|
|
<template #action="{ row }">
|
|
<el-button link type="primary" size="small" @click="handleEditMenu(row)"> 编辑 </el-button>
|
|
</template>
|
|
</MenuTable>
|
|
</div>
|
|
<!-- 新增/编辑弹窗 -->
|
|
<MenuDialog
|
|
:visible="dialogVisible"
|
|
:title="dialogTitle"
|
|
:type="dialogType"
|
|
@confirm="handleSubmit"
|
|
@cancel="handleCancel"
|
|
@close="handleClose"
|
|
>
|
|
<MenuForm
|
|
:form-data="menuForm"
|
|
:form-rules="menuFormRules"
|
|
:form-items="menuFormItemOptions"
|
|
ref="menuFormRef"
|
|
/>
|
|
</MenuDialog>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import type { FormInstance } from 'element-plus'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
// 组件配置
|
|
import MenuHeader from '@/components/common/Header.vue'
|
|
import MenuTable from '@/components/common/Table.vue'
|
|
import MenuDialog from '@/components/common/Dialog.vue'
|
|
import MenuForm from '@/components/common/Form.vue'
|
|
import { menuTableColumns, menuFormItemOptions } from './options'
|
|
import { rules } from './rules'
|
|
import { getSettingApi, createSettingApi, editSettingApi } from '@/api/modules/system/setting'
|
|
|
|
type SettingItem = {
|
|
id: number
|
|
key: string
|
|
value: string
|
|
description: string
|
|
}
|
|
|
|
// 定义header配置
|
|
const menuTitle = ref('系统设置')
|
|
const menuHeaderButtons = [
|
|
{ label: '新增设置', type: 'primary' as const, icon: Plus, key: 'addMenu' },
|
|
]
|
|
|
|
// 定义表格配置
|
|
const menuTree = ref<SettingItem[]>([])
|
|
|
|
// 定义弹窗配置
|
|
const dialogVisible = ref(false)
|
|
const dialogTitle = ref('')
|
|
const dialogType = ref('add')
|
|
|
|
// 定义菜单表单数据
|
|
const menuForm = ref({
|
|
key: '',
|
|
value: '',
|
|
description: '',
|
|
})
|
|
const menuFormRef = ref<FormInstance>()
|
|
// 表单验证规则
|
|
const menuFormRules = rules()
|
|
|
|
/**
|
|
@description: 新增菜单
|
|
**/
|
|
const handleAddMenu = () => {
|
|
dialogVisible.value = true
|
|
dialogTitle.value = '新增菜单'
|
|
menuFormItemOptions[0]!.disabled = false
|
|
}
|
|
|
|
/**
|
|
@description: 菜单数据处理
|
|
**/
|
|
|
|
// 获取菜单列表
|
|
const fetchSettingList = async () => {
|
|
try {
|
|
const data = await getSettingApi()
|
|
menuTree.value = data
|
|
} catch (err) {
|
|
console.error('获取菜单列表失败', err)
|
|
}
|
|
}
|
|
// 页面加载时获取菜单列表
|
|
onMounted(async () => {
|
|
await fetchSettingList()
|
|
})
|
|
|
|
/**
|
|
@description: 处理菜单编辑/删除/状态切换
|
|
**/
|
|
const handleEditMenu = (row: SettingItem) => {
|
|
dialogVisible.value = true
|
|
menuFormItemOptions[0]!.disabled = true
|
|
dialogTitle.value = '编辑菜单'
|
|
dialogType.value = 'edit'
|
|
menuForm.value = {
|
|
...row
|
|
}
|
|
}
|
|
|
|
/**
|
|
@description: 处理弹窗提交/取消/关闭事件
|
|
**/
|
|
const handleSubmit = async () => {
|
|
console.log('提交菜单表单')
|
|
try {
|
|
await menuFormRef.value?.validate()
|
|
if (dialogType.value === 'add') {
|
|
const params = {
|
|
key: menuForm.value.key,
|
|
value: menuForm.value.value,
|
|
description: menuForm.value.description,
|
|
}
|
|
await createSettingApi(params)
|
|
await fetchSettingList()
|
|
} else {
|
|
await editSettingApi(menuForm.value)
|
|
console.log('编辑菜单成功', menuForm.value)
|
|
await fetchSettingList()
|
|
}
|
|
dialogVisible.value = false
|
|
} catch (err) {
|
|
console.log('表单验证失败', err)
|
|
return
|
|
}
|
|
}
|
|
const handleCancel = () => {
|
|
dialogVisible.value = false
|
|
dialogType.value = 'add'
|
|
menuForm.value = {
|
|
key: '',
|
|
value: '',
|
|
description: '',
|
|
}
|
|
}
|
|
const handleClose = () => {
|
|
dialogVisible.value = false
|
|
dialogType.value = 'add'
|
|
menuForm.value = {
|
|
key: '',
|
|
value: '',
|
|
description: '',
|
|
}
|
|
}
|
|
</script>
|