Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
phsl
/
admin
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
8535409d
authored
Mar 25, 2023
by
Theo
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完成菜单模块
parent
5d062d58
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
436 additions
and
398 deletions
+436
-398
src/views/system/menu/form.vue
+297
-0
src/views/system/menu/index.vue
+139
-322
src/views/system/menu/menu.data.ts
+0
-76
No files found.
src/views/system/menu/form.vue
0 → 100644
View file @
8535409d
<
template
>
<Dialog
:title=
"modelTitle"
v-model=
"modelVisible"
>
<el-form
ref=
"formRef"
:model=
"formData"
:rules=
"formRules"
label-width=
"80px"
v-loading=
"formLoading"
>
<el-form-item
label=
"上级菜单"
>
<el-tree-select
node-key=
"id"
v-model=
"formData.parentId"
:props=
"defaultProps"
:data=
"menuOptions"
:default-expanded-keys=
"[0]"
check-strictly
/>
</el-form-item>
<el-col
:span=
"16"
>
<el-form-item
label=
"菜单名称"
prop=
"name"
>
<el-input
v-model=
"formData.name"
placeholder=
"请输入菜单名称"
clearable
/>
</el-form-item>
</el-col>
<el-form-item
label=
"菜单类型"
prop=
"type"
>
<el-radio-group
v-model=
"formData.type"
>
<el-radio-button
v-for=
"dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
:key=
"dict.label"
:label=
"dict.value"
>
{{
dict
.
label
}}
</el-radio-button>
</el-radio-group>
</el-form-item>
<template
v-if=
"formData.type !== 3"
>
<el-form-item
label=
"菜单图标"
>
<IconSelect
v-model=
"formData.icon"
clearable
/>
</el-form-item>
<el-col
:span=
"16"
>
<el-form-item
label=
"路由地址"
prop=
"path"
>
<template
#
label
>
<Tooltip
titel=
"路由地址"
message=
"访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头"
/>
</
template
>
<el-input
v-model=
"formData.path"
placeholder=
"请输入路由地址"
clearable
/>
</el-form-item>
</el-col>
</template>
<
template
v-if=
"formData.type === 2"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"组件地址"
prop=
"component"
>
<el-input
v-model=
"formData.component"
placeholder=
"例如说:system/user/index"
clearable
/>
</el-form-item>
</el-col>
<el-col
:span=
"16"
>
<el-form-item
label=
"组件名字"
prop=
"componentName"
>
<el-input
v-model=
"formData.componentName"
placeholder=
"例如说:SystemUser"
clearable
/>
</el-form-item>
</el-col>
</
template
>
<
template
v-if=
"formData.type !== 1"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"权限标识"
prop=
"permission"
>
<template
#
label
>
<Tooltip
titel=
"权限标识"
message=
"Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
/>
</
template
>
<el-input
v-model=
"formData.permission"
placeholder=
"请输入权限标识"
clearable
/>
</el-form-item>
</el-col>
</template>
<el-col
:span=
"16"
>
<el-form-item
label=
"显示排序"
prop=
"sort"
>
<el-input-number
v-model=
"formData.sort"
controls-position=
"right"
:min=
"0"
clearable
/>
</el-form-item>
</el-col>
<el-col
:span=
"16"
>
<el-form-item
label=
"菜单状态"
prop=
"status"
>
<el-radio-group
v-model=
"formData.status"
>
<el-radio
border
v-for=
"dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key=
"dict.label"
:label=
"dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<
template
v-if=
"formData.type !== 3"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"显示状态"
prop=
"visible"
>
<template
#
label
>
<Tooltip
titel=
"显示状态"
message=
"选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问"
/>
</
template
>
<el-radio-group
v-model=
"formData.visible"
>
<el-radio
border
key=
"true"
:label=
"true"
>
显示
</el-radio>
<el-radio
border
key=
"false"
:label=
"false"
>
隐藏
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</template>
<
template
v-if=
"formData.type !== 3"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"总是显示"
prop=
"alwaysShow"
>
<template
#
label
>
<Tooltip
titel=
"总是显示"
message=
"选择不是时,当该菜单只有一个子菜单时,不展示自己,直接展示子菜单"
/>
</
template
>
<el-radio-group
v-model=
"formData.alwaysShow"
>
<el-radio
border
key=
"true"
:label=
"true"
>
总是
</el-radio>
<el-radio
border
key=
"false"
:label=
"false"
>
不是
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</template>
<
template
v-if=
"formData.type === 2"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"缓存状态"
prop=
"keepAlive"
>
<template
#
label
>
<Tooltip
titel=
"缓存状态"
message=
"选择缓存时,则会被 `keep-alive` 缓存,必须填写「组件名称」字段"
/>
</
template
>
<el-radio-group
v-model=
"formData.keepAlive"
>
<el-radio
border
key=
"true"
:label=
"true"
>
缓存
</el-radio>
<el-radio
border
key=
"false"
:label=
"false"
>
不缓存
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</template>
</el-form>
<
template
#
footer
>
<div
class=
"dialog-footer"
>
<el-button
@
click=
"submitForm"
type=
"primary"
:disabled=
"formLoading"
>
确 定
</el-button>
<el-button
@
click=
"modelVisible = false"
>
取 消
</el-button>
</div>
</
template
>
</Dialog>
</template>
<
script
setup
lang=
"ts"
>
import
{
DICT_TYPE
,
getIntDictOptions
}
from
'@/utils/dict'
import
*
as
MenuApi
from
'@/api/system/menu'
import
{
CACHE_KEY
,
useCache
}
from
'@/hooks/web/useCache'
import
{
SystemMenuTypeEnum
,
CommonStatusEnum
}
from
'@/utils/constants'
import
{
handleTree
,
defaultProps
}
from
'@/utils/tree'
const
{
wsCache
}
=
useCache
()
const
{
t
}
=
useI18n
()
// 国际化
const
message
=
useMessage
()
// 消息弹窗
const
modelVisible
=
ref
(
false
)
// 弹窗的是否展示
const
modelTitle
=
ref
(
''
)
// 弹窗的标题
const
formLoading
=
ref
(
false
)
// 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const
formType
=
ref
(
''
)
// 表单的类型:create - 新增;update - 修改
const
formData
=
ref
({
id
:
0
,
name
:
''
,
permission
:
''
,
type
:
SystemMenuTypeEnum
.
DIR
,
sort
:
1
,
parentId
:
0
,
path
:
''
,
icon
:
''
,
component
:
''
,
componentName
:
''
,
status
:
CommonStatusEnum
.
ENABLE
,
visible
:
true
,
keepAlive
:
true
,
alwaysShow
:
true
,
createTime
:
new
Date
()
})
const
formRules
=
reactive
({
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
formRef
=
ref
()
// 表单 Ref
/** 打开弹窗 */
const
openModal
=
async
(
type
:
string
,
id
?:
number
)
=>
{
modelVisible
.
value
=
true
modelTitle
.
value
=
t
(
'action.'
+
type
)
formType
.
value
=
type
resetForm
()
await
getTree
()
// 修改时,设置数据
if
(
id
)
{
formLoading
.
value
=
true
try
{
formData
.
value
=
await
MenuApi
.
getMenuApi
(
id
)
// TODO 芋艿:这块要优化下,部分字段未重置,无法修改
// formData.value.componentName = res.componentName || ''
// formData.value.alwaysShow = res.alwaysShow !== undefined ? res.alwaysShow : true
}
finally
{
formLoading
.
value
=
false
}
}
}
defineExpose
({
openModal
})
// 提供 openModal 方法,用于打开弹窗
/** 提交表单 */
const
emit
=
defineEmits
([
'success'
])
// 定义 success 事件,用于操作成功后的回调
const
submitForm
=
async
()
=>
{
// 校验表单
if
(
!
formRef
)
return
const
valid
=
await
formRef
.
value
.
validate
()
if
(
!
valid
)
return
// 提交请求
formLoading
.
value
=
true
try
{
if
(
formData
.
value
.
type
===
SystemMenuTypeEnum
.
DIR
||
formData
.
value
.
type
===
SystemMenuTypeEnum
.
MENU
)
{
if
(
!
isExternal
(
formData
.
value
.
path
))
{
if
(
formData
.
value
.
parentId
===
0
&&
formData
.
value
.
path
.
charAt
(
0
)
!==
'/'
)
{
message
.
error
(
'路径必须以 / 开头'
)
return
}
else
if
(
formData
.
value
.
parentId
!==
0
&&
formData
.
value
.
path
.
charAt
(
0
)
===
'/'
)
{
message
.
error
(
'路径不能以 / 开头'
)
return
}
}
}
const
data
=
formData
.
value
if
(
formType
.
value
===
'create'
)
{
await
MenuApi
.
createMenuApi
(
data
)
message
.
success
(
t
(
'common.createSuccess'
))
}
else
{
await
MenuApi
.
updateMenuApi
(
data
)
message
.
success
(
t
(
'common.updateSuccess'
))
}
modelVisible
.
value
=
false
// 发送操作成功的事件
emit
(
'success'
)
}
finally
{
formLoading
.
value
=
false
wsCache
.
delete
(
CACHE_KEY
.
ROLE_ROUTERS
)
}
}
// ========== 下拉框[上级菜单] ==========
const
menuOptions
=
ref
<
any
[]
>
([])
// 树形结构
// 获取下拉框[上级菜单]的数据
const
getTree
=
async
()
=>
{
menuOptions
.
value
=
[]
const
res
=
await
MenuApi
.
listSimpleMenusApi
()
let
menu
:
Tree
=
{
id
:
0
,
name
:
'主类目'
,
children
:
[]
}
menu
.
children
=
handleTree
(
res
)
menuOptions
.
value
.
push
(
menu
)
}
/** 重置表单 */
const
resetForm
=
()
=>
{
formData
.
value
=
{
id
:
0
,
name
:
''
,
permission
:
''
,
type
:
SystemMenuTypeEnum
.
DIR
,
sort
:
1
,
parentId
:
0
,
path
:
''
,
icon
:
''
,
component
:
''
,
componentName
:
''
,
status
:
CommonStatusEnum
.
ENABLE
,
visible
:
true
,
keepAlive
:
true
,
alwaysShow
:
true
,
createTime
:
new
Date
()
}
formRef
.
value
?.
resetFields
()
}
// 判断 path 是不是外部的 HTTP 等链接
const
isExternal
=
(
path
:
string
)
=>
{
return
/^
(
https
?
:|mailto:|tel:
)
/
.
test
(
path
)
}
</
script
>
src/views/system/menu/index.vue
View file @
8535409d
<
template
>
<ContentWrap>
<!-- 列表 -->
<XTable
ref=
"xGrid"
@
register=
"registerTable"
show-overflow
>
<template
#
toolbar_buttons
>
<!-- 操作:新增 -->
<XButton
type=
"primary"
preIcon=
"ep:zoom-in"
:title=
"t('action.add')"
v-hasPermi=
"['system:menu:create']"
@
click=
"handleCreate()"
/>
<XButton
title=
"展开所有"
@
click=
"xGrid?.Ref.setAllTreeExpand(true)"
/>
<XButton
title=
"关闭所有"
@
click=
"xGrid?.Ref.clearTreeExpand()"
/>
</
template
>
<
template
#
name_default=
"{ row }"
>
<Icon
:icon=
"row.icon"
/>
<span
class=
"ml-3"
>
{{
row
.
name
}}
</span>
</
template
>
<
template
#
actionbtns_default=
"{ row }"
>
<!-- 操作:修改 -->
<XTextButton
preIcon=
"ep:edit"
:title=
"t('action.edit')"
v-hasPermi=
"['system:menu:update']"
@
click=
"handleUpdate(row.id)"
/>
<!-- 操作:删除 -->
<XTextButton
preIcon=
"ep:delete"
:title=
"t('action.del')"
v-hasPermi=
"['system:menu:delete']"
@
click=
"deleteData(row.id)"
/>
</
template
>
</XTable>
</ContentWrap>
<!-- 添加或修改菜单对话框 -->
<XModal
id=
"menuModel"
v-model=
"dialogVisible"
:title=
"dialogTitle"
>
<!-- 对话框(添加 / 修改) -->
<el-form
ref=
"formRef"
:model=
"menuForm"
:rules=
"rules"
label-width=
"100px"
label-position=
"right"
>
<el-form-item
label=
"上级菜单"
>
<el-tree-select
node-key=
"id"
v-model=
"menuForm.parentId"
:props=
"defaultProps"
:data=
"menuOptions"
:default-expanded-keys=
"[0]"
check-strictly
<!-- 搜索工作栏 -->
<el-form
:model=
"queryParams"
ref=
"queryFormRef"
:inline=
"true"
>
<el-form-item
label=
"菜单名称"
prop=
"name"
>
<el-input
v-model=
"queryParams.name"
placeholder=
"请输入菜单名称"
clearable
@
keyup
.
enter=
"handleQuery"
/>
</el-form-item>
<el-col
:span=
"16"
>
<el-form-item
label=
"菜单名称"
prop=
"name"
>
<el-input
v-model=
"menuForm.name"
placeholder=
"请输入菜单名称"
clearable
/>
</el-form-item>
</el-col>
<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.label"
:label=
"dict.value"
>
{{ dict.label }}
</el-radio-button>
</el-radio-group>
<el-form-item
label=
"状态"
prop=
"status"
>
<el-select
v-model=
"queryParams.status"
placeholder=
"菜单状态"
clearable
>
<el-option
v-for=
"dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key=
"parseInt(dict.value)"
:label=
"dict.label"
:value=
"parseInt(dict.value)"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
@
click=
"handleQuery"
><Icon
icon=
"ep:search"
class=
"mr-5px"
/>
搜索
</el-button>
<el-button
@
click=
"resetQuery"
><Icon
icon=
"ep:refresh"
class=
"mr-5px"
/>
重置
</el-button>
<el-button
type=
"primary"
@
click=
"openModal('create')"
v-hasPermi=
"['system:menu:create']"
>
<Icon
icon=
"ep:plus"
class=
"mr-5px"
/>
新增
</el-button>
</el-form-item>
<
template
v-if=
"menuForm.type !== 3"
>
<el-form-item
label=
"菜单图标"
>
<IconSelect
v-model=
"menuForm.icon"
clearable
/>
</el-form-item>
<el-col
:span=
"16"
>
<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=
"16"
>
<el-form-item
label=
"组件地址"
prop=
"component"
>
<el-input
v-model=
"menuForm.component"
placeholder=
"例如说:system/user/index"
clearable
/>
</el-form-item>
</el-col>
<el-col
:span=
"16"
>
<el-form-item
label=
"组件名字"
prop=
"componentName"
>
<el-input
v-model=
"menuForm.componentName"
placeholder=
"例如说:SystemUser"
clearable
/>
</el-form-item>
</el-col>
</
template
>
<
template
v-if=
"menuForm.type !== 1"
>
<el-col
:span=
"16"
>
<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=
"16"
>
<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=
"16"
>
<el-form-item
label=
"菜单状态"
prop=
"status"
>
<el-radio-group
v-model=
"menuForm.status"
>
<el-radio
border
v-for=
"dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key=
"dict.label"
:label=
"dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<
template
v-if=
"menuForm.type !== 3"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"显示状态"
prop=
"visible"
>
<template
#
label
>
<Tooltip
titel=
"显示状态"
message=
"选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问"
/>
</
template
>
<el-radio-group
v-model=
"menuForm.visible"
>
<el-radio
border
key=
"true"
:label=
"true"
>
显示
</el-radio>
<el-radio
border
key=
"false"
:label=
"false"
>
隐藏
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</template>
<
template
v-if=
"menuForm.type !== 3"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"总是显示"
prop=
"alwaysShow"
>
<template
#
label
>
<Tooltip
titel=
"总是显示"
message=
"选择不是时,当该菜单只有一个子菜单时,不展示自己,直接展示子菜单"
/>
</
template
>
<el-radio-group
v-model=
"menuForm.alwaysShow"
>
<el-radio
border
key=
"true"
:label=
"true"
>
总是
</el-radio>
<el-radio
border
key=
"false"
:label=
"false"
>
不是
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</template>
<
template
v-if=
"menuForm.type === 2"
>
<el-col
:span=
"16"
>
<el-form-item
label=
"缓存状态"
prop=
"keepAlive"
>
<template
#
label
>
<Tooltip
titel=
"缓存状态"
message=
"选择缓存时,则会被 `keep-alive` 缓存,必须填写「组件名称」字段"
/>
</
template
>
<el-radio-group
v-model=
"menuForm.keepAlive"
>
<el-radio
border
key=
"true"
:label=
"true"
>
缓存
</el-radio>
<el-radio
border
key=
"false"
:label=
"false"
>
不缓存
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</template>
</el-form>
<
template
#
footer
>
<!-- 按钮:保存 -->
<XButton
v-if=
"['create', 'update'].includes(actionType)"
type=
"primary"
:loading=
"actionLoading"
@
click=
"submitForm()"
:title=
"t('action.save')"
/>
<!-- 按钮:关闭 -->
<XButton
:loading=
"actionLoading"
@
click=
"dialogVisible = false"
:title=
"t('dialog.close')"
/>
</
template
>
</XModal>
<el-row
:gutter=
"10"
class=
"mb8"
>
<el-col
:span=
"1.5"
>
<el-button
type=
"info"
plain
icon=
"el-icon-sort"
@
click=
"toggleExpandAll"
>
展开/折叠
</el-button
>
</el-col>
</el-row>
<el-table
v-loading=
"loading"
:data=
"list"
v-if=
"refreshTable"
row-key=
"id"
:default-expand-all=
"isExpandAll"
:tree-props=
"
{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
prop=
"name"
label=
"菜单名称"
:show-overflow-tooltip=
"true"
width=
"250"
/>
<el-table-column
prop=
"icon"
label=
"图标"
align=
"center"
width=
"100"
>
<template
#
default=
"scope"
>
<Icon
:icon=
"scope.row.icon"
/>
</
template
>
</el-table-column>
<el-table-column
prop=
"sort"
label=
"排序"
width=
"60"
/>
<el-table-column
prop=
"permission"
label=
"权限标识"
:show-overflow-tooltip=
"true"
/>
<el-table-column
prop=
"component"
label=
"组件路径"
:show-overflow-tooltip=
"true"
/>
<el-table-column
prop=
"componentName"
label=
"组件名称"
:show-overflow-tooltip=
"true"
/>
<el-table-column
prop=
"status"
label=
"状态"
width=
"80"
>
<
template
#
default=
"scope"
>
<dict-tag
:type=
"DICT_TYPE.COMMON_STATUS"
:value=
"scope.row.status"
/>
</
template
>
</el-table-column>
<el-table-column
label=
"操作"
align=
"center"
class-name=
"small-padding fixed-width"
>
<
template
#
default=
"scope"
>
<el-button
link
type=
"primary"
@
click=
"openModal('update', scope.row.id)"
v-hasPermi=
"['system:menu:update']"
>
修改
</el-button
>
<el-button
link
type=
"primary"
@
click=
"openModal('create', scope.row.id)"
v-hasPermi=
"['system:menu:create']"
>
新增
</el-button
>
<el-button
link
type=
"primary"
@
click=
"handleDelete(scope.row.id)"
v-hasPermi=
"['system:menu:delete']"
>
删除
</el-button
>
</
template
>
</el-table-column>
</el-table>
</ContentWrap>
<!-- 表单弹窗:添加/修改 -->
<menu-form
ref=
"modalRef"
@
success=
"getList"
/>
</template>
<
script
setup
lang=
"ts"
name=
"Menu"
>
import
{
CACHE_KEY
,
useCache
}
from
'@/hooks/web/useCache'
import
{
FormInstance
}
from
'element-plus'
// 业务相关的 import
import
{
DICT_TYPE
,
getIntDictOptions
}
from
'@/utils/dict'
import
{
SystemMenuTypeEnum
,
CommonStatusEnum
}
from
'@/utils/constants'
import
{
handleTree
,
defaultProps
}
from
'@/utils/tree'
import
*
as
MenuApi
from
'@/api/system/menu'
import
{
allSchemas
,
rules
}
from
'./menu.data'
import
{
DICT_TYPE
,
getDictOptions
}
from
'@/utils/dict'
import
{
handleTree
}
from
'@/utils/tree'
import
*
as
MenuApi
from
'@/api/system/menu'
import
MenuForm
from
'./form.vue'
const
{
t
}
=
useI18n
()
// 国际化
const
message
=
useMessage
()
// 消息弹窗
const
{
wsCache
}
=
useCache
()
const
xGrid
=
ref
<
any
>
(
null
)
const
loading
=
ref
(
true
)
// 列表的加载中
// 列表相关的变量
const
treeConfig
=
{
transform
:
true
,
rowField
:
'id'
,
parentField
:
'parentId'
,
expandAll
:
false
}
const
[
registerTable
,
{
reload
,
deleteData
}]
=
useXTable
({
allSchemas
:
allSchemas
,
treeConfig
:
treeConfig
,
getListApi
:
MenuApi
.
getMenuListApi
,
deleteApi
:
MenuApi
.
deleteMenuApi
})
// 弹窗相关的变量
const
dialogVisible
=
ref
(
false
)
// 是否显示弹出层
const
dialogTitle
=
ref
(
'edit'
)
// 弹出层标题
const
actionType
=
ref
(
''
)
// 操作按钮的类型
const
actionLoading
=
ref
(
false
)
// 遮罩层
// 新增和修改的表单值
const
formRef
=
ref
<
FormInstance
>
()
const
menuForm
=
ref
<
MenuApi
.
MenuVO
>
({
id
:
0
,
name
:
''
,
permission
:
''
,
type
:
SystemMenuTypeEnum
.
DIR
,
sort
:
1
,
parentId
:
0
,
path
:
''
,
icon
:
''
,
component
:
''
,
componentName
:
''
,
status
:
CommonStatusEnum
.
ENABLE
,
visible
:
true
,
keepAlive
:
true
,
alwaysShow
:
true
,
createTime
:
new
Date
()
const
list
=
ref
<
any
>
([])
// 列表的数据
const
isExpandAll
=
ref
(
false
)
// 是否展开,默认全部折叠
const
refreshTable
=
ref
(
true
)
// 重新渲染表格状态
const
queryParams
=
reactive
({
name
:
undefined
,
status
:
undefined
})
const
queryFormRef
=
ref
()
// 搜索的表单
/
/ ========== 下拉框[上级菜单] ==========
const
menuOptions
=
ref
<
any
[]
>
([])
// 树形结构
// 获取下拉框[上级菜单]的数据
const
getTree
=
async
()
=>
{
menuOptions
.
value
=
[]
const
res
=
await
MenuApi
.
listSimpleMenusApi
(
)
let
menu
:
Tree
=
{
id
:
0
,
name
:
'主类目'
,
children
:
[]
}
menu
.
children
=
handleTree
(
res
)
menuOptions
.
value
.
push
(
menu
)
/
** 查询参数列表 */
const
getList
=
async
()
=>
{
loading
.
value
=
true
try
{
const
data
=
await
MenuApi
.
getMenuListApi
(
queryParams
)
list
.
value
=
handleTree
(
data
)
}
finally
{
loading
.
value
=
false
}
}
// ========== 新增/修改 ==========
/** 搜索按钮操作 */
const
handleQuery
=
()
=>
{
getList
()
}
// 设置标题
const
setDialogTile
=
async
(
type
:
string
)
=>
{
await
getTree
()
dialogTitle
.
value
=
t
(
'action.'
+
type
)
actionType
.
value
=
type
dialogVisible
.
value
=
true
/** 重置按钮操作 */
const
resetQuery
=
()
=>
{
queryFormRef
.
value
.
resetFields
()
handleQuery
()
}
// 新增操作
const
handleCreate
=
()
=>
{
setDialogTile
(
'create'
)
// 重置表单
formRef
.
value
?.
resetFields
()
menuForm
.
value
=
{
id
:
0
,
name
:
''
,
permission
:
''
,
type
:
SystemMenuTypeEnum
.
DIR
,
sort
:
1
,
parentId
:
0
,
path
:
''
,
icon
:
''
,
component
:
''
,
componentName
:
''
,
status
:
CommonStatusEnum
.
ENABLE
,
visible
:
true
,
keepAlive
:
true
,
alwaysShow
:
true
,
createTime
:
new
Date
()
}
/** 添加/修改操作 */
const
modalRef
=
ref
()
const
openModal
=
async
(
type
:
string
,
id
?:
number
)
=>
{
modalRef
.
value
.
openModal
(
type
,
id
)
}
// 修改操作
const
handleUpdate
=
async
(
rowId
:
number
)
=>
{
await
setDialogTile
(
'update'
)
// 设置数据
const
res
=
await
MenuApi
.
getMenuApi
(
rowId
)
menuForm
.
value
=
res
// TODO 芋艿:这块要优化下,部分字段未重置,无法修改
menuForm
.
value
.
componentName
=
res
.
componentName
||
''
menuForm
.
value
.
alwaysShow
=
res
.
alwaysShow
!==
undefined
?
res
.
alwaysShow
:
true
/** 展开/折叠操作 */
const
toggleExpandAll
=
()
=>
{
refreshTable
.
value
=
false
isExpandAll
.
value
=
!
isExpandAll
.
value
nextTick
(()
=>
{
refreshTable
.
value
=
true
})
}
// 提交新增/修改的表单
const
submitForm
=
async
()
=>
{
actionLoading
.
value
=
true
// 提交请求
/** 删除按钮操作 */
const
handleDelete
=
async
(
id
:
number
)
=>
{
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
)
!==
'/'
)
{
message
.
error
(
'路径必须以 / 开头'
)
return
}
else
if
(
menuForm
.
value
.
parentId
!==
0
&&
menuForm
.
value
.
path
.
charAt
(
0
)
===
'/'
)
{
message
.
error
(
'路径不能以 / 开头'
)
return
}
}
}
if
(
actionType
.
value
===
'create'
)
{
await
MenuApi
.
createMenuApi
(
menuForm
.
value
)
message
.
success
(
t
(
'common.createSuccess'
))
}
else
{
await
MenuApi
.
updateMenuApi
(
menuForm
.
value
)
message
.
success
(
t
(
'common.updateSuccess'
))
}
}
finally
{
dialogVisible
.
value
=
false
actionLoading
.
value
=
false
wsCache
.
delete
(
CACHE_KEY
.
ROLE_ROUTERS
)
// 操作成功,重新加载列表
await
reload
()
}
// 删除的二次确认
await
message
.
delConfirm
()
// 发起删除
await
MenuApi
.
deleteMenuApi
(
id
)
message
.
success
(
t
(
'common.delSuccess'
))
// 刷新列表
await
getList
()
}
catch
{}
}
/
/ 判断 path 是不是外部的 HTTP 等链接
const
isExternal
=
(
path
:
string
)
=>
{
return
/^
(
https
?
:|mailto:|tel:
)
/
.
test
(
path
)
}
/
** 初始化 **/
onMounted
((
)
=>
{
getList
(
)
}
)
</
script
>
src/views/system/menu/menu.data.ts
deleted
100644 → 0
View file @
5d062d58
import
type
{
VxeCrudSchema
}
from
'@/hooks/web/useVxeCrudSchemas'
const
{
t
}
=
useI18n
()
// 国际化
// 新增和修改的表单校验
export
const
rules
=
reactive
({
name
:
[
required
],
sort
:
[
required
],
path
:
[
required
],
status
:
[
required
]
})
// CrudSchema
const
crudSchemas
=
reactive
<
VxeCrudSchema
>
({
primaryKey
:
'id'
,
primaryType
:
null
,
action
:
true
,
columns
:
[
{
title
:
'上级菜单'
,
field
:
'parentId'
,
isTable
:
false
},
{
title
:
'菜单名称'
,
field
:
'name'
,
isSearch
:
true
,
table
:
{
treeNode
:
true
,
align
:
'left'
,
width
:
'200px'
,
slots
:
{
default
:
'name_default'
}
}
},
{
title
:
'菜单类型'
,
field
:
'type'
,
dictType
:
DICT_TYPE
.
SYSTEM_MENU_TYPE
},
{
title
:
'路由地址'
,
field
:
'path'
},
{
title
:
'组件路径'
,
field
:
'component'
},
{
title
:
'组件名字'
,
field
:
'componentName'
},
{
title
:
'权限标识'
,
field
:
'permission'
},
{
title
:
'排序'
,
field
:
'sort'
},
{
title
:
t
(
'common.status'
),
field
:
'status'
,
dictType
:
DICT_TYPE
.
COMMON_STATUS
,
dictClass
:
'number'
,
isSearch
:
true
},
{
title
:
t
(
'common.createTime'
),
field
:
'createTime'
,
formatter
:
'formatDate'
,
isTable
:
false
}
]
})
export
const
{
allSchemas
}
=
useVxeCrudSchemas
(
crudSchemas
)
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment