mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-13 18:45:06 +08:00
feat: add vue3(element-plus)
This commit is contained in:
xingyu
404
yudao-ui-admin-vue3/src/views/system/menu/index.vue
Normal file
404
yudao-ui-admin-vue3/src/views/system/menu/index.vue
Normal file
@ -0,0 +1,404 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
import dayjs from 'dayjs'
|
||||
import { IconSelect } from '@/components/Icon'
|
||||
import { Tooltip } from '@/components/Tooltip'
|
||||
import * as MenuApi from '@/api/system/menu'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import {
|
||||
ElRow,
|
||||
ElCol,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElMessageBox,
|
||||
ElMessage,
|
||||
ElCascader,
|
||||
ElRadioGroup,
|
||||
ElRadioButton
|
||||
} from 'element-plus'
|
||||
import { MenuVO } from '@/api/system/menu/types'
|
||||
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
const { t } = useI18n() // 国际化
|
||||
// ========== 创建菜单树结构 ==========
|
||||
const loading = ref(true)
|
||||
const menuData = ref([]) // 树形结构
|
||||
const getList = async () => {
|
||||
const res = await MenuApi.getMenuListApi(queryParams)
|
||||
menuData.value = handleTree(res)
|
||||
loading.value = false
|
||||
}
|
||||
const menuProps = {
|
||||
checkStrictly: true,
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const menuOptions = ref([]) // 树形结构
|
||||
const getTree = async () => {
|
||||
const res = await MenuApi.listSimpleMenusApi()
|
||||
menuOptions.value = handleTree(res)
|
||||
}
|
||||
// ========== 查询 ==========
|
||||
const queryParams = reactive({
|
||||
name: undefined,
|
||||
status: undefined
|
||||
})
|
||||
// 查询操作
|
||||
const handleQuery = async () => {
|
||||
await getList()
|
||||
}
|
||||
// 重置操作
|
||||
const resetQuery = async () => {
|
||||
queryParams.name = undefined
|
||||
queryParams.status = undefined
|
||||
await getList()
|
||||
}
|
||||
// ========== CRUD 相关 ==========
|
||||
const actionLoading = ref(false) // 遮罩层
|
||||
const actionType = ref('') // 操作按钮的类型
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
const dialogTitle = ref('edit') // 弹出层标题
|
||||
const menuForm = ref<MenuVO>({
|
||||
id: 0,
|
||||
name: '',
|
||||
permission: '',
|
||||
type: SystemMenuTypeEnum.DIR,
|
||||
sort: 1,
|
||||
parentId: 0,
|
||||
path: '',
|
||||
icon: '',
|
||||
component: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
visible: true,
|
||||
keepAlive: true,
|
||||
createTime: ''
|
||||
})
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
|
||||
path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
|
||||
}
|
||||
// 设置标题
|
||||
const setDialogTile = (type: string) => {
|
||||
dialogTitle.value = t('action.' + type)
|
||||
actionType.value = type
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 新建操作
|
||||
const handleCreate = () => {
|
||||
// 重置表单
|
||||
setDialogTile('create')
|
||||
}
|
||||
// 修改操作
|
||||
const handleUpdate = async (row: MenuVO) => {
|
||||
// 设置数据
|
||||
const res = await MenuApi.getMenuApi(row.id)
|
||||
menuForm.value = res
|
||||
setDialogTile('update')
|
||||
}
|
||||
// 删除操作
|
||||
const handleDelete = async (row: MenuVO) => {
|
||||
ElMessageBox.confirm(t('common.delDataMessage'), t('common.confirmTitle'), {
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
await MenuApi.deleteMenuApi(row.id)
|
||||
ElMessage.success(t('common.delSuccess'))
|
||||
})
|
||||
.catch(() => {})
|
||||
await getList()
|
||||
}
|
||||
// 保存操作
|
||||
function isExternal(path: string) {
|
||||
return /^(https?:|mailto:|tel:)/.test(path)
|
||||
}
|
||||
const submitForm = async () => {
|
||||
actionLoading.value = true
|
||||
// 提交请求
|
||||
try {
|
||||
if (
|
||||
menuForm.value.type === SystemMenuTypeEnum.DIR ||
|
||||
menuForm.value.type === SystemMenuTypeEnum.MENU
|
||||
) {
|
||||
if (!isExternal(menuForm.value.path)) {
|
||||
if (menuForm.value.parentId === 0 && menuForm.value.path.charAt(0) !== '/') {
|
||||
ElMessage.error('路径必须以 / 开头')
|
||||
return
|
||||
} else if (menuForm.value.parentId !== 0 && menuForm.value.path.charAt(0) === '/') {
|
||||
ElMessage.error('路径不能以 / 开头')
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
if (actionType.value === 'create') {
|
||||
await MenuApi.createMenuApi(menuForm.value)
|
||||
ElMessage.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await MenuApi.updateMenuApi(menuForm.value)
|
||||
ElMessage.success(t('common.updateSuccess'))
|
||||
}
|
||||
// 操作成功，重新加载列表
|
||||
dialogVisible.value = false
|
||||
await getList()
|
||||
} finally {
|
||||
actionLoading.value = false
|
||||
}
|
||||
}
|
||||
// ========== 初始化 ==========
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
getTree()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<!-- 搜索工作区 -->
|
||||
<ContentWrap>
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择菜单状态">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" />
|
||||
{{ t('common.query') }}
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh-right" class="mr-5px" />
|
||||
{{ t('common.reset') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<div class="mb-10px">
|
||||
<el-button type="primary" v-hasPermi="['system:notice:create']" @click="handleCreate">
|
||||
<Icon icon="el:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
table-layout="auto"
|
||||
row-key="id"
|
||||
:data="menuData"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="菜单名称" prop="name" width="240px">
|
||||
<template #default="scope">
|
||||
<Icon :icon="scope.row.icon" />
|
||||
<span class="ml-3">{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="type">
|
||||
<template #default="scope">
|
||||
<DictTag :type="DICT_TYPE.SYSTEM_MENU_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="路由地址" prop="path" />
|
||||
<el-table-column label="组件路径" prop="component" />
|
||||
<el-table-column label="权限标识" prop="permission" />
|
||||
<el-table-column label="排序" prop="sort" />
|
||||
<el-table-column label="状态" prop="status">
|
||||
<template #default="scope">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime">
|
||||
<template #default="scope">
|
||||
<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>
|
||||
<Icon icon="ep:edit" class="mr-5px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:delete']"
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-5px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</ContentWrap>
|
||||
<!-- 添加或修改菜单对话框 -->
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" maxHeight="400px" width="40%">
|
||||
<el-form
|
||||
:model="menuForm"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader
|
||||
:options="menuData"
|
||||
:props="menuProps"
|
||||
placeholder="请选择上级菜单"
|
||||
v-model="menuForm.parentId"
|
||||
class="w-100"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-radio-group v-model="menuForm.type">
|
||||
<el-radio-button
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="menuForm.type !== 3">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单图标">
|
||||
<IconSelect v-model="menuForm.icon" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="路由地址" prop="path">
|
||||
<template #label>
|
||||
<Tooltip
|
||||
titel="路由地址"
|
||||
message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
|
||||
/>
|
||||
</template>
|
||||
<el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-if="menuForm.type === 2">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="路由地址" prop="component">
|
||||
<el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-if="menuForm.type !== 1">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限标识" prop="permission">
|
||||
<template #label>
|
||||
<Tooltip
|
||||
titel="权限标识"
|
||||
message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
|
||||
/>
|
||||
</template>
|
||||
<el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示排序" prop="sort">
|
||||
<el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单状态" prop="status">
|
||||
<el-radio-group v-model="menuForm.status">
|
||||
<el-radio-button
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="menuForm.type !== 3">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示状态" prop="status">
|
||||
<template #label>
|
||||
<Tooltip
|
||||
titel="显示状态"
|
||||
message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
|
||||
/>
|
||||
</template>
|
||||
<el-radio-group v-model="menuForm.visible">
|
||||
<el-radio-button key="true" :label="true">显示</el-radio-button>
|
||||
<el-radio-button key="false" :label="false">隐藏</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-if="menuForm.type === 2">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="缓存状态" prop="keepAlive">
|
||||
<template #label>
|
||||
<Tooltip
|
||||
titel="缓存状态"
|
||||
message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
|
||||
/>
|
||||
</template>
|
||||
<el-radio-group v-model="menuForm.keepAlive">
|
||||
<el-radio-button key="true" :label="true">缓存</el-radio-button>
|
||||
<el-radio-button key="false" :label="false">不缓存</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<el-button
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
type="primary"
|
||||
:loading="actionLoading"
|
||||
@click="submitForm"
|
||||
>
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
:deep(.el-button.is-text) {
|
||||
margin-left: 0;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
</style>
|
||||
166
yudao-ui-admin-vue3/src/views/system/menu/menu.data.ts
Normal file
166
yudao-ui-admin-vue3/src/views/system/menu/menu.data.ts
Normal file
@ -0,0 +1,166 @@
|
||||
import { reactive } from 'vue'
|
||||
import { required } from '@/utils/formRules'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
// 国际化
|
||||
const { t } = useI18n()
|
||||
// 修改
|
||||
export const modelSchema = reactive<FormSchema[]>([
|
||||
{
|
||||
label: '上级菜单',
|
||||
field: 'parentId',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '菜单类型',
|
||||
field: 'type',
|
||||
component: 'RadioButton',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '目录',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '菜单',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '按钮',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '菜单图标',
|
||||
field: 'icon',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '菜单名称',
|
||||
field: 'name',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '显示排序',
|
||||
field: 'sort',
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
label: '路由地址',
|
||||
field: 'path',
|
||||
component: 'Input',
|
||||
labelMessage: '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头'
|
||||
},
|
||||
{
|
||||
label: '组件路径',
|
||||
field: 'component',
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
label: '权限标识',
|
||||
field: 'permission',
|
||||
component: 'Input',
|
||||
labelMessage:
|
||||
'Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission(`system:user:list`)`)'
|
||||
},
|
||||
{
|
||||
label: t('common.status'),
|
||||
field: 'status',
|
||||
component: 'RadioButton',
|
||||
value: 0,
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '开启',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
labelMessage: '选择停用时，路由将不会出现在侧边栏，也不能被访问'
|
||||
},
|
||||
{
|
||||
label: '是否显示',
|
||||
field: 'visible',
|
||||
component: 'RadioButton',
|
||||
value: 0,
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '显示',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '隐藏',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
labelMessage: '选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问'
|
||||
},
|
||||
{
|
||||
label: '是否缓存',
|
||||
field: 'keepAlive',
|
||||
component: 'RadioButton',
|
||||
value: 0,
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '缓存',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '不缓存',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
labelMessage: '选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致'
|
||||
}
|
||||
])
|
||||
// 列表
|
||||
export const columns = reactive<TableColumn[]>([
|
||||
{
|
||||
label: '菜单名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
label: '权限标识',
|
||||
field: 'permission',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '排序',
|
||||
field: 'sort'
|
||||
},
|
||||
{
|
||||
label: t('table.action'),
|
||||
field: 'action',
|
||||
width: '180px'
|
||||
}
|
||||
])
|
||||
226
yudao-ui-admin-vue3/src/views/system/menu/old.vue
Normal file
226
yudao-ui-admin-vue3/src/views/system/menu/old.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, unref } from 'vue'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { IconSelect } from '@/components/Icon'
|
||||
import { ElCard, ElMessage, ElMessageBox, ElTree, ElTreeSelect } from 'element-plus'
|
||||
import { columns, modelSchema } from './menu.data'
|
||||
import { Form, FormExpose } from '@/components/Form'
|
||||
import * as MenuApi from '@/api/system/menu'
|
||||
import { MenuVO } from '@/api/system/menu/types'
|
||||
const { t } = useI18n() // 国际化
|
||||
interface Tree {
|
||||
id: number
|
||||
name: string
|
||||
children?: Tree[]
|
||||
}
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
// ========== 创建菜单树结构 ==========
|
||||
const menuOptions = ref([]) // 树形结构
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const getTree = async () => {
|
||||
const res = await MenuApi.listSimpleMenusApi()
|
||||
menuOptions.value = handleTree(res)
|
||||
}
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
// ========== 菜单信息form表单 ==========
|
||||
const loading = ref(false) // 遮罩层
|
||||
const formRef = ref<FormExpose>()
|
||||
const iconModel = ref('ep:user')
|
||||
const menuParentId = ref()
|
||||
const menuStatus = ref('add')
|
||||
const menuTitle = ref('菜单信息')
|
||||
const showEdit = ref(false)
|
||||
// 提交按钮
|
||||
const submitForm = async () => {
|
||||
loading.value = true
|
||||
// 提交请求
|
||||
try {
|
||||
const data = unref(formRef)?.formModel as MenuVO
|
||||
data.parentId = menuParentId.value
|
||||
// TODO: 表单提交待完善
|
||||
if (menuStatus.value === 'add') {
|
||||
await MenuApi.createMenuApi(data)
|
||||
} else if (menuStatus.value === 'edit') {
|
||||
await MenuApi.updateMenuApi(data)
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// ========== 按钮列表相关 ==========
|
||||
const tableData = ref([])
|
||||
const tableLoading = ref(false)
|
||||
const onDisabled = ref(true)
|
||||
const tableTitle = ref('按钮信息')
|
||||
// 树点击事件
|
||||
const handleMenuNodeClick = async (data: { [key: string]: any }) => {
|
||||
showEdit.value = true
|
||||
const res = await MenuApi.getMenuApi(data.id)
|
||||
menuTitle.value = res.name + '-菜单信息'
|
||||
tableTitle.value = res.name + '-按钮列表'
|
||||
menuParentId.value = data.id
|
||||
tableData.value = await MenuApi.getMenuListApi({ name: res.name })
|
||||
unref(formRef)?.setValues(res)
|
||||
onDisabled.value = true
|
||||
changeDisabled()
|
||||
}
|
||||
const handleCreate = () => {
|
||||
// 重置表单
|
||||
unref(formRef)?.getElFormRef()?.resetFields()
|
||||
menuParentId.value = 0
|
||||
onDisabled.value = false
|
||||
changeDisabled()
|
||||
}
|
||||
const handleEdit = () => {
|
||||
onDisabled.value = false
|
||||
changeDisabled()
|
||||
}
|
||||
const changeDisabled = () => {
|
||||
unref(formRef)?.setProps({
|
||||
disabled: onDisabled
|
||||
})
|
||||
}
|
||||
// 修改操作
|
||||
const handleUpdate = async (row: MenuVO) => {
|
||||
// 设置数据
|
||||
const res = await MenuApi.getMenuApi(row.id)
|
||||
unref(formRef)?.setValues(res)
|
||||
}
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = (row: MenuVO) => {
|
||||
ElMessageBox.confirm(t('common.delDataMessage'), t('common.confirmTitle'), {
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
await MenuApi.deleteMenuApi(row.id)
|
||||
ElMessage.success(t('common.delSuccess'))
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getTree()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-card class="w-1/4 menu" :gutter="12" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>菜单列表</span>
|
||||
<el-button type="primary" v-hasPermi="['system:menu:create']" @click="handleCreate">
|
||||
新增根节点
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <p>菜单列表</p> -->
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
:accordion="true"
|
||||
:data="menuOptions"
|
||||
:props="defaultProps"
|
||||
:highlight-current="true"
|
||||
:filter-method="filterNode"
|
||||
@node-click="handleMenuNodeClick"
|
||||
/>
|
||||
</el-card>
|
||||
<el-card class="w-1/2 menu" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ menuTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="!showEdit">
|
||||
<span>请从左侧选择菜单</span>
|
||||
</div>
|
||||
<div v-if="showEdit">
|
||||
<Form :loading="loading" :schema="modelSchema" ref="formRef">
|
||||
<template #parentId>
|
||||
<el-tree-select
|
||||
node-key="id"
|
||||
v-model="menuParentId"
|
||||
:props="defaultProps"
|
||||
:data="menuOptions"
|
||||
check-strictly
|
||||
/>
|
||||
</template>
|
||||
<template #icon>
|
||||
<IconSelect v-model="iconModel" />
|
||||
</template>
|
||||
</Form>
|
||||
<el-button
|
||||
v-if="!onDisabled"
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
:loading="loading"
|
||||
@click="submitForm"
|
||||
>
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button v-if="!onDisabled" :loading="loading" @click="showEdit = false">
|
||||
{{ t('common.cancel') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="onDisabled"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleEdit"
|
||||
>
|
||||
{{ t('action.edit') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="w-1/2 menu" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ tableTitle }}</span>
|
||||
<!-- <el-button type="primary">新增根节点</el-button> -->
|
||||
</div>
|
||||
</template>
|
||||
<!-- 列表 -->
|
||||
<Table :loading="tableLoading" :columns="columns" :data="tableData">
|
||||
<template #action="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
@click="handleUpdate(row)"
|
||||
>
|
||||
<Icon icon="ep:edit" class="mr-5px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:delete']"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-5px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.menu {
|
||||
height: 1000px;
|
||||
max-height: 1800px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user