Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
4af1b0aa
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
4af1b0aa
编写于
10月 27, 2022
作者:
H
horizons
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 页面布局样式优化和接口合理性优化
上级
848c7431
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
397 addition
and
611 deletion
+397
-611
src/api/role.ts
src/api/role.ts
+5
-5
src/styles/element-plus.scss
src/styles/element-plus.scss
+0
-37
src/styles/index.scss
src/styles/index.scss
+9
-2
src/styles/transition.scss
src/styles/transition.scss
+0
-48
src/types/api/menu.d.ts
src/types/api/menu.d.ts
+0
-4
src/types/api/role.d.ts
src/types/api/role.d.ts
+1
-1
src/types/api/user.d.ts
src/types/api/user.d.ts
+1
-1
src/views/component/editor.vue
src/views/component/editor.vue
+22
-0
src/views/system/dept/index.vue
src/views/system/dept/index.vue
+121
-125
src/views/system/role/index.vue
src/views/system/role/index.vue
+125
-242
src/views/system/user/index.vue
src/views/system/user/index.vue
+113
-146
未找到文件。
src/api/role.ts
浏览文件 @
4af1b0aa
...
@@ -44,9 +44,9 @@ export function listRoleOptions(
...
@@ -44,9 +44,9 @@ export function listRoleOptions(
*
*
* @param queryParams
* @param queryParams
*/
*/
export
function
getRole
Resources
(
roleId
:
string
):
AxiosPromise
<
RoleResource
>
{
export
function
getRole
MenuIds
(
roleId
:
string
):
AxiosPromise
<
number
[]
>
{
return
request
({
return
request
({
url
:
'
/api/v1/roles/
'
+
roleId
+
'
/
resource
s
'
,
url
:
'
/api/v1/roles/
'
+
roleId
+
'
/
menuId
s
'
,
method
:
'
get
'
method
:
'
get
'
});
});
}
}
...
@@ -56,12 +56,12 @@ export function getRoleResources(roleId: string): AxiosPromise<RoleResource> {
...
@@ -56,12 +56,12 @@ export function getRoleResources(roleId: string): AxiosPromise<RoleResource> {
*
*
* @param queryParams
* @param queryParams
*/
*/
export
function
updateRole
Resource
(
export
function
updateRole
Menus
(
roleId
:
string
,
roleId
:
string
,
data
:
RoleResource
data
:
number
[]
):
AxiosPromise
<
any
>
{
):
AxiosPromise
<
any
>
{
return
request
({
return
request
({
url
:
'
/api/v1/roles/
'
+
roleId
+
'
/
resource
s
'
,
url
:
'
/api/v1/roles/
'
+
roleId
+
'
/
menu
s
'
,
method
:
'
put
'
,
method
:
'
put
'
,
data
:
data
data
:
data
});
});
...
...
src/styles/element-plus.scss
浏览文件 @
4af1b0aa
...
@@ -50,40 +50,3 @@
...
@@ -50,40 +50,3 @@
}
}
// fix: 内核较旧的浏览器不支持:not(selector list)
.el-button
:not
(
.is-text
),
.el-button
:not
(
.is-link
),
.el-button
:not
(
.el-button--text
)
{
background-color
:
var
(
--
el-button-bg-color
);
border
:
var
(
--
el-border
);
border-color
:
var
(
--
el-button-border-color
)
}
.el-button
:not
(
.is-text
)
:focus
,
.el-button
:not
(
.is-link
)
:focus
,
.el-button
:not
(
.el-button--text
)
:focus
,
.el-button
:not
(
.is-text
)
:hover
,
.el-button
:not
(
.is-link
)
:hover
,
.el-button
:not
(
.el-button--text
)
:hover
{
color
:
var
(
--
el-button-hover-text-color
);
border-color
:
var
(
--
el-button-hover-border-color
);
background-color
:
var
(
--
el-button-hover-bg-color
);
outline
:
0
}
.el-button
:not
(
.is-text
)
:active
,
.el-button
:not
(
.is-link
)
:active
,
.el-button
:not
(
.el-button--text
)
:active
{
color
:
var
(
--
el-button-active-text-color
);
border-color
:
var
(
--
el-button-active-border-color
);
background-color
:
var
(
--
el-button-active-bg-color
);
outline
:
0
}
.el-button
:not
(
.is-text
)
:focus-visible
,
.el-button
:not
(
.is-link
)
:focus-visible
,
.el-button
:not
(
.el-button--text
)
:focus-visible
{
border-color
:
transparent
;
outline
:
2px
solid
var
(
--
el-button-border-color
);
outline-offset
:
1px
}
src/styles/index.scss
浏览文件 @
4af1b0aa
@import
'src/styles/variables.module'
;
@import
'src/styles/variables.module'
;
@import
'./mixin.scss'
;
@import
'./transition.scss'
;
@import
'src/styles/element-plus'
;
@import
'src/styles/element-plus'
;
@import
'./sidebar.scss'
;
@import
'./sidebar.scss'
;
...
@@ -66,3 +64,12 @@ div:focus {
...
@@ -66,3 +64,12 @@ div:focus {
.app-container
{
.app-container
{
padding
:
20px
;
padding
:
20px
;
}
}
.search
{
padding
:
18px
0
0
10px
;
margin-bottom
:
10px
;
box-shadow
:
var
(
--
el-box-shadow-light
);
border-radius
:
var
(
--
el-card-border-radius
);
border
:
1px
solid
var
(
--
el-card-border-color
);
}
src/styles/transition.scss
已删除
100644 → 0
浏览文件 @
848c7431
// global transition css
/* fade */
.fade-enter-active
,
.fade-leave-active
{
transition
:
opacity
0
.28s
;
}
.fade-enter
,
.fade-leave-active
{
opacity
:
0
;
}
/* fade-transform */
.fade-transform-leave-active
,
.fade-transform-enter-active
{
transition
:
all
0
.5s
;
}
.fade-transform-enter
{
opacity
:
0
;
transform
:
translateX
(
-30px
);
}
.fade-transform-leave-to
{
opacity
:
0
;
transform
:
translateX
(
30px
);
}
/* breadcrumb transition */
.breadcrumb-enter-active
,
.breadcrumb-leave-active
{
transition
:
all
0
.5s
;
}
.breadcrumb-enter
,
.breadcrumb-leave-active
{
opacity
:
0
;
transform
:
translateX
(
20px
);
}
.breadcrumb-move
{
transition
:
all
0
.5s
;
}
.breadcrumb-leave-active
{
position
:
absolute
;
}
src/types/api/menu.d.ts
浏览文件 @
4af1b0aa
...
@@ -88,10 +88,6 @@ export interface Resource {
...
@@ -88,10 +88,6 @@ export interface Resource {
* 子菜单
* 子菜单
*/
*/
children
:
Resource
[];
children
:
Resource
[];
/**
* 权限集合
*/
perms
:
Permission
[];
}
}
/**
/**
...
...
src/types/api/role.d.ts
浏览文件 @
4af1b0aa
...
@@ -4,7 +4,7 @@ import { PageQueryParam, PageResult } from './base';
...
@@ -4,7 +4,7 @@ import { PageQueryParam, PageResult } from './base';
* 角色查询参数类型
* 角色查询参数类型
*/
*/
export
interface
RoleQueryParam
extends
PageQueryParam
{
export
interface
RoleQueryParam
extends
PageQueryParam
{
name
?:
string
;
keywords
?:
string
;
}
}
/**
/**
...
...
src/types/api/user.d.ts
浏览文件 @
4af1b0aa
...
@@ -78,7 +78,7 @@ export interface UserFormData {
...
@@ -78,7 +78,7 @@ export interface UserFormData {
/**
/**
* 用户导入表单类型声明
* 用户导入表单类型声明
*/
*/
export
interface
UserImport
Form
Data
{
export
interface
UserImportData
{
deptId
:
number
;
deptId
:
number
;
roleIds
:
number
[];
roleIds
:
number
[];
}
}
src/views/component/editor.vue
0 → 100644
浏览文件 @
4af1b0aa
<
script
setup
lang=
"ts"
>
import
Editor
from
'
@/components/WangEditor/index.vue
'
;
import
{
ElForm
}
from
'
element-plus
'
;
import
{
reactive
,
ref
,
toRefs
}
from
'
vue
'
;
const
dataFormRef
=
ref
(
ElForm
);
const
state
=
reactive
({
formData
:
{
content
:
'
初始内容
'
}
});
const
{
formData
}
=
toRefs
(
state
);
</
script
>
<
template
>
<div
class=
"app-container"
>
<el-form
ref=
"dataFormRef"
:model=
"formData"
>
<editor
v-model=
"formData.content"
style=
"height: 600px"
/>
</el-form>
</div>
</
template
>
src/views/system/dept/index.vue
浏览文件 @
4af1b0aa
...
@@ -5,10 +5,8 @@ export default {
...
@@ -5,10 +5,8 @@ export default {
</
script
>
</
script
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
// Vue依赖
import
{
onMounted
,
reactive
,
ref
,
toRefs
}
from
'
vue
'
;
import
{
onMounted
,
reactive
,
ref
,
toRefs
}
from
'
vue
'
;
// API依赖
import
{
import
{
getDeptForm
,
getDeptForm
,
deleteDept
,
deleteDept
,
...
@@ -18,36 +16,27 @@ import {
...
@@ -18,36 +16,27 @@ import {
listDepartments
listDepartments
}
from
'
@/api/dept
'
;
}
from
'
@/api/dept
'
;
// 组件依赖
import
{
Search
,
Plus
,
Edit
,
Refresh
,
Delete
}
from
'
@element-plus/icons-vue
'
;
import
{
Search
,
Plus
,
Edit
,
Refresh
,
Delete
}
from
'
@element-plus/icons-vue
'
;
import
{
ElForm
,
ElMessage
,
ElMessageBox
}
from
'
element-plus
'
;
import
{
ElForm
,
ElMessage
,
ElMessageBox
}
from
'
element-plus
'
;
import
{
DeptFormData
,
DeptItem
,
DeptQueryParam
}
from
'
@/types/api/dept
'
;
import
{
DeptFormData
,
DeptItem
,
DeptQueryParam
}
from
'
@/types/api/dept
'
;
import
{
Dialog
,
Option
}
from
'
@/types/common
'
;
import
{
Dialog
,
Option
}
from
'
@/types/common
'
;
// DOM元素的引用声明定义
const
queryFormRef
=
ref
(
ElForm
);
const
queryFormRef
=
ref
(
ElForm
);
const
dataFormRef
=
ref
(
ElForm
);
const
dataFormRef
=
ref
(
ElForm
);
const
state
=
reactive
({
const
state
=
reactive
({
loading
:
false
,
// 选中ID数组
// 选中ID数组
ids
:
[]
as
number
[],
ids
:
[]
as
number
[],
// 非单个禁用
single
:
true
,
loading
:
true
,
// 表格树数据
// 表格树数据
deptList
:
[]
as
DeptItem
[],
dataList
:
[]
as
DeptItem
[],
// 部门下拉选项
deptOptions
:
[]
as
Option
[],
deptOptions
:
[]
as
Option
[],
// 弹窗属性
dialog
:
{
visible
:
false
}
as
Dialog
,
dialog
:
{
visible
:
false
}
as
Dialog
,
// 查询参数
queryParams
:
{}
as
DeptQueryParam
,
queryParams
:
{}
as
DeptQueryParam
,
// 表单数据
formData
:
{
formData
:
{
sort
:
1
,
sort
:
1
,
status
:
1
status
:
1
}
as
DeptFormData
,
}
as
DeptFormData
,
// 表单参数校验
rules
:
{
rules
:
{
parentId
:
[
parentId
:
[
{
required
:
true
,
message
:
'
上级部门不能为空
'
,
trigger
:
'
blur
'
}
{
required
:
true
,
message
:
'
上级部门不能为空
'
,
trigger
:
'
blur
'
}
...
@@ -58,9 +47,9 @@ const state = reactive({
...
@@ -58,9 +47,9 @@ const state = reactive({
});
});
const
{
const
{
single
,
ids
,
loading
,
loading
,
d
ept
List
,
d
ata
List
,
deptOptions
,
deptOptions
,
queryParams
,
queryParams
,
formData
,
formData
,
...
@@ -69,18 +58,18 @@ const {
...
@@ -69,18 +58,18 @@ const {
}
=
toRefs
(
state
);
}
=
toRefs
(
state
);
/**
/**
*
部门
查询
* 查询
*/
*/
function
handleQuery
()
{
function
handleQuery
()
{
state
.
loading
=
true
;
loading
.
value
=
true
;
listDepartments
(
state
.
queryParams
).
then
(({
data
})
=>
{
listDepartments
(
state
.
queryParams
).
then
(({
data
})
=>
{
state
.
deptList
=
data
;
dataList
.
value
=
data
;
state
.
loading
=
false
;
loading
.
value
=
false
;
});
});
}
}
/**
/**
* 重置
查询
* 重置
*/
*/
function
resetQuery
()
{
function
resetQuery
()
{
queryFormRef
.
value
.
resetFields
();
queryFormRef
.
value
.
resetFields
();
...
@@ -89,13 +78,12 @@ function resetQuery() {
...
@@ -89,13 +78,12 @@ function resetQuery() {
function
handleSelectionChange
(
selection
:
any
)
{
function
handleSelectionChange
(
selection
:
any
)
{
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
);
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
);
state
.
single
=
selection
.
length
===
0
;
}
}
/**
/**
*
加载部门下拉数据源
*
获取部门下拉数据
*/
*/
async
function
loadDeptData
()
{
async
function
getDeptOptions
()
{
const
deptOptions
:
any
[]
=
[];
const
deptOptions
:
any
[]
=
[];
listDeptOptions
().
then
(
response
=>
{
listDeptOptions
().
then
(
response
=>
{
const
rootDeptOption
=
{
const
rootDeptOption
=
{
...
@@ -109,23 +97,23 @@ async function loadDeptData() {
...
@@ -109,23 +97,23 @@ async function loadDeptData() {
}
}
/**
/**
* 添加
部门
* 添加
*/
*/
function
handleAdd
(
row
:
any
)
{
function
handleAdd
(
row
:
any
)
{
loadDeptData
();
getDeptOptions
();
state
.
formData
.
id
=
undefined
;
formData
.
value
.
id
=
undefined
;
state
.
formData
.
parentId
=
row
.
id
;
formData
.
value
.
parentId
=
row
.
id
;
state
.
dialog
=
{
dialog
.
value
=
{
title
:
'
添加部门
'
,
title
:
'
添加部门
'
,
visible
:
true
visible
:
true
};
};
}
}
/**
/**
* 修改
部门
* 修改
*/
*/
async
function
handleUpdate
(
row
:
any
)
{
async
function
handleUpdate
(
row
:
any
)
{
await
loadDeptData
();
await
getDeptOptions
();
const
deptId
=
row
.
id
||
state
.
ids
;
const
deptId
=
row
.
id
||
state
.
ids
;
state
.
dialog
=
{
state
.
dialog
=
{
title
:
'
修改部门
'
,
title
:
'
修改部门
'
,
...
@@ -137,7 +125,7 @@ async function handleUpdate(row: any) {
...
@@ -137,7 +125,7 @@ async function handleUpdate(row: any) {
}
}
/**
/**
*
部门表单
提交
* 提交
*/
*/
function
submitForm
()
{
function
submitForm
()
{
dataFormRef
.
value
.
validate
((
valid
:
any
)
=>
{
dataFormRef
.
value
.
validate
((
valid
:
any
)
=>
{
...
@@ -145,13 +133,13 @@ function submitForm() {
...
@@ -145,13 +133,13 @@ function submitForm() {
if
(
state
.
formData
.
id
)
{
if
(
state
.
formData
.
id
)
{
updateDept
(
state
.
formData
.
id
,
state
.
formData
).
then
(()
=>
{
updateDept
(
state
.
formData
.
id
,
state
.
formData
).
then
(()
=>
{
ElMessage
.
success
(
'
修改成功
'
);
ElMessage
.
success
(
'
修改成功
'
);
c
ancel
();
c
loseDialog
();
handleQuery
();
handleQuery
();
});
});
}
else
{
}
else
{
addDept
(
state
.
formData
).
then
(()
=>
{
addDept
(
state
.
formData
).
then
(()
=>
{
ElMessage
.
success
(
'
新增成功
'
);
ElMessage
.
success
(
'
新增成功
'
);
c
ancel
();
c
loseDialog
();
handleQuery
();
handleQuery
();
});
});
}
}
...
@@ -160,12 +148,15 @@ function submitForm() {
...
@@ -160,12 +148,15 @@ function submitForm() {
}
}
/**
/**
* 删除部门
* 删除
*
* @param row
*/
*/
function
handleDelete
(
row
:
any
)
{
function
handleDelete
(
row
:
any
)
{
const
ids
=
[
row
.
id
||
state
.
ids
].
join
(
'
,
'
);
const
ids
=
[
row
.
id
||
state
.
ids
].
join
(
'
,
'
);
if
(
!
ids
)
{
ElMessage
.
warning
(
'
请勾选删除项
'
);
return
;
}
ElMessageBox
.
confirm
(
`确认删除已选中的数据项?`
,
'
警告
'
,
{
ElMessageBox
.
confirm
(
`确认删除已选中的数据项?`
,
'
警告
'
,
{
confirmButtonText
:
'
确定
'
,
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
,
cancelButtonText
:
'
取消
'
,
...
@@ -185,11 +176,10 @@ function handleDelete(row: any) {
...
@@ -185,11 +176,10 @@ function handleDelete(row: any) {
}
}
/**
/**
*
取消/
关闭弹窗
* 关闭弹窗
**/
**/
function
c
ancel
()
{
function
c
loseDialog
()
{
dialog
.
value
.
visible
=
false
;
dialog
.
value
.
visible
=
false
;
formData
.
value
.
id
=
undefined
;
dataFormRef
.
value
.
resetFields
();
dataFormRef
.
value
.
resetFields
();
dataFormRef
.
value
.
clearValidate
();
dataFormRef
.
value
.
clearValidate
();
}
}
...
@@ -200,110 +190,116 @@ onMounted(() => {
...
@@ -200,110 +190,116 @@ onMounted(() => {
</
script
>
</
script
>
<
template
>
<
template
>
<div
class=
"app-container"
>
<div
class=
"app-container"
>
<el-form
ref=
"queryFormRef"
:model=
"queryParams"
:inline=
"true"
>
<div
class=
"search"
>
<el-form-item>
<el-form
ref=
"queryFormRef"
:model=
"queryParams"
:inline=
"true"
>
<el-form-item
label=
"关键字"
prop=
"keywords"
>
<el-input
v-model=
"queryParams.keywords"
placeholder=
"部门名称"
@
keyup.enter=
"handleQuery"
/>
</el-form-item>
<el-form-item
label=
"部门状态"
prop=
"status"
>
<el-select
v-model=
"queryParams.status"
placeholder=
"部门状态"
clearable
>
<el-option
:value=
"1"
label=
"正常"
/>
<el-option
:value=
"0"
label=
"禁用"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
class=
"filter-item"
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button>
</el-form-item>
</el-form>
</div>
<el-card>
<!--toolbar-->
<template
#header
>
<el-button
type=
"success"
:icon=
"Plus"
@
click=
"handleAdd"
<el-button
type=
"success"
:icon=
"Plus"
@
click=
"handleAdd"
>
新增
</el-button
>
新增
</el-button
>
>
<el-button
<el-button
type=
"danger"
type=
"danger"
:icon=
"Delete"
:icon=
"Delete"
:disabled=
"single"
@
click=
"handleDelete"
@
click=
"handleDelete"
:disabled=
"ids.length === 0"
>
删除
>
删除
</el-button>
</el-button>
</el-form-item>
</
template
>
<el-form-item
prop=
"keywords"
>
<el-input
v-model=
"queryParams.keywords"
placeholder=
"请输入部门名称"
@
keyup.enter=
"handleQuery"
/>
</el-form-item>
<el-form-item
prop=
"status"
>
<el-select
v-model=
"queryParams.status"
placeholder=
"部门状态"
clearable
>
<el-option
:value=
"1"
label=
"正常"
/>
<el-option
:value=
"0"
label=
"禁用"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
class=
"filter-item"
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button>
</el-form-item>
</el-form>
<el-table
<!--table-->
v-loading=
"loading"
<el-table
:data=
"deptList"
v-loading=
"loading"
row-key=
"id"
:data=
"dataList"
default-expand-all
row-key=
"id"
:tree-props=
"
{ children: 'children', hasChildren: 'hasChildren' }"
default-expand-all
@selection-change="handleSelectionChange"
:tree-props=
"{ children: 'children', hasChildren: 'hasChildren' }"
>
@
selection-change=
"handleSelectionChange"
<el-table-column
type=
"selection"
width=
"55"
align=
"center"
/>
>
<el-table-column
prop=
"name"
label=
"部门名称"
min-width=
"300"
/>
<el-table-column
type=
"selection"
width=
"55"
align=
"center"
/>
<el-table-column
prop=
"status"
label=
"状态"
width=
"200"
>
<el-table-column
prop=
"name"
label=
"部门名称"
min-width=
"300"
/>
<template
#default
="
scope
"
>
<el-table-column
prop=
"status"
label=
"状态"
width=
"200"
>
<el-tag
v-if=
"scope.row.status == 1"
type=
"success"
>
正常
</el-tag>
<
template
#default=
"scope"
>
<el-tag
v-else
type=
"info"
>
禁用
</el-tag>
<el-tag
v-if=
"scope.row.status == 1"
type=
"success"
>
正常
</el-tag>
</
template
>
<el-tag
v-else
type=
"info"
>
禁用
</el-tag>
</el-table-column>
</
template
>
</el-table-column>
<el-table-column
prop=
"sort"
label=
"排序"
width=
"200"
/>
<el-table-column
prop=
"sort"
label=
"排序"
width=
"200"
/>
<el-table-column
prop=
"createTime"
label=
"创建时间"
width=
"250"
/>
<el-table-column
prop=
"createTime"
label=
"创建时间"
width=
"250"
/>
<el-table-column
prop=
"updateTime"
label=
"修改时间"
width=
"250"
/>
<el-table-column
prop=
"updateTime"
label=
"修改时间"
width=
"250"
/>
<el-table-column
label=
"操作"
align=
"center"
width=
"150"
>
<el-table-column
label=
"操作"
align=
"center"
width=
"150"
>
<
template
#default=
"scope"
>
<
template
#default=
"scope"
>
<el-button
<el-button
type=
"primary"
type=
"primary"
:icon=
"Edit"
:icon=
"Edit"
circle
circle
plain
plain
@
click.stop=
"handleUpdate(scope.row)"
@
click.stop=
"handleUpdate(scope.row)"
>
>
</el-button>
</el-button>
<el-button
<el-button
type=
"success"
type=
"success"
:icon=
"Plus"
:icon=
"Plus"
circle
circle
plain
plain
@
click.stop=
"handleAdd(scope.row)"
@
click.stop=
"handleAdd(scope.row)"
>
>
</el-button>
</el-button>
<el-button
<el-button
type=
"danger"
type=
"danger"
:icon=
"Delete"
:icon=
"Delete"
circle
circle
plain
plain
@
click.stop=
"handleDelete(scope.row)"
@
click.stop=
"handleDelete(scope.row)"
>
>
</el-button>
</el-button>
</
template
>
</
template
>
</el-table-column>
</el-table-column>
</el-table>
</el-table>
</el-card>
<!--
添加或修改部门对话框
-->
<!--
dialog
-->
<el-dialog
<el-dialog
:title=
"dialog.title"
:title=
"dialog.title"
v-model=
"dialog.visible"
v-model=
"dialog.visible"
width=
"600px"
width=
"600px"
@
closed=
"c
ancel
"
@
closed=
"c
loseDialog
"
>
>
<el-form
<el-form
ref=
"dataFormRef"
ref=
"dataFormRef"
...
@@ -343,7 +339,7 @@ onMounted(() => {
...
@@ -343,7 +339,7 @@ onMounted(() => {
<
template
#footer
>
<
template
#footer
>
<div
class=
"dialog-footer"
>
<div
class=
"dialog-footer"
>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
@
click=
"c
ancel
"
>
取 消
</el-button>
<el-button
@
click=
"c
loseDialog
"
>
取 消
</el-button>
</div>
</div>
</
template
>
</
template
>
</el-dialog>
</el-dialog>
...
...
src/views/system/role/index.vue
浏览文件 @
4af1b0aa
...
@@ -5,23 +5,23 @@ export default {
...
@@ -5,23 +5,23 @@ export default {
</
script
>
</
script
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
nextTick
,
onMounted
,
reactive
,
ref
,
toRefs
}
from
'
vue
'
;
import
{
onMounted
,
reactive
,
ref
,
toRefs
}
from
'
vue
'
;
import
{
import
{
listRolePages
,
listRolePages
,
updateRole
,
updateRole
,
getRoleFormDetail
,
getRoleFormDetail
,
addRole
,
addRole
,
deleteRoles
,
deleteRoles
,
getRole
Resource
s
,
getRole
MenuId
s
,
updateRole
Resource
updateRole
Menus
}
from
'
@/api/role
'
;
}
from
'
@/api/role
'
;
import
{
listResources
}
from
'
@/api/menu
'
;
import
{
listResources
}
from
'
@/api/menu
'
;
import
{
ElForm
,
ElMessage
,
ElMessageBox
,
ElTree
}
from
'
element-plus
'
;
import
{
ElForm
,
ElMessage
,
ElMessageBox
,
ElTree
}
from
'
element-plus
'
;
import
{
Search
,
Plus
,
Edit
,
Refresh
,
Delete
}
from
'
@element-plus/icons-vue
'
;
import
{
Search
,
Plus
,
Edit
,
Refresh
,
Delete
}
from
'
@element-plus/icons-vue
'
;
import
{
RoleFormData
,
RoleItem
,
RoleQueryParam
}
from
'
@/types/api/role
'
;
import
{
RoleFormData
,
RoleItem
,
RoleQueryParam
}
from
'
@/types/api/role
'
;
import
{
Resource
}
from
'
@/types/api/menu
'
;
import
SvgIcon
from
'
@/components/SvgIcon/index.vue
'
;
import
SvgIcon
from
'
@/components/SvgIcon/index.vue
'
;
import
{
Option
,
Dialog
}
from
'
@/types/common
'
;
const
emit
=
defineEmits
([
'
roleClick
'
]);
const
emit
=
defineEmits
([
'
roleClick
'
]);
const
queryFormRef
=
ref
(
ElForm
);
const
queryFormRef
=
ref
(
ElForm
);
...
@@ -30,12 +30,8 @@ const resourceRef = ref(ElTree);
...
@@ -30,12 +30,8 @@ const resourceRef = ref(ElTree);
const
state
=
reactive
({
const
state
=
reactive
({
loading
:
true
,
loading
:
true
,
// 选中ID数组
// 选中ID
ids
:
[],
ids
:
[]
as
number
[],
// 非单个禁用
single
:
true
,
// 非多个禁用
multiple
:
true
,
queryParams
:
{
queryParams
:
{
pageNum
:
1
,
pageNum
:
1
,
pageSize
:
10
pageSize
:
10
...
@@ -45,14 +41,14 @@ const state = reactive({
...
@@ -45,14 +41,14 @@ const state = reactive({
dialog
:
{
dialog
:
{
title
:
''
,
title
:
''
,
visible
:
false
visible
:
false
},
}
as
Dialog
,
formData
:
{}
as
RoleFormData
,
formData
:
{}
as
RoleFormData
,
rules
:
{
rules
:
{
name
:
[{
required
:
true
,
message
:
'
请输入角色名称
'
,
trigger
:
'
blur
'
}],
name
:
[{
required
:
true
,
message
:
'
请输入角色名称
'
,
trigger
:
'
blur
'
}],
code
:
[{
required
:
true
,
message
:
'
请输入角色编码
'
,
trigger
:
'
blur
'
}]
code
:
[{
required
:
true
,
message
:
'
请输入角色编码
'
,
trigger
:
'
blur
'
}]
},
},
resource
DialogVisible
:
false
,
menu
DialogVisible
:
false
,
resourceOptions
:
[]
as
Resource
[],
resourceOptions
:
[]
as
Option
[],
btnPerms
:
{}
as
any
,
btnPerms
:
{}
as
any
,
// 勾选的菜单ID
// 勾选的菜单ID
checkedMenuIds
:
new
Set
([]),
checkedMenuIds
:
new
Set
([]),
...
@@ -65,20 +61,22 @@ const state = reactive({
...
@@ -65,20 +61,22 @@ const state = reactive({
});
});
const
{
const
{
ids
,
loading
,
loading
,
multiple
,
queryParams
,
queryParams
,
roleList
,
roleList
,
total
,
total
,
dialog
,
dialog
,
formData
,
formData
,
rules
,
rules
,
resource
DialogVisible
,
menu
DialogVisible
,
checkedRole
,
checkedRole
,
resourceOptions
,
resourceOptions
btnPerms
}
=
toRefs
(
state
);
}
=
toRefs
(
state
);
/**
* 查询
*/
function
handleQuery
()
{
function
handleQuery
()
{
emit
(
'
roleClick
'
,
{});
emit
(
'
roleClick
'
,
{});
state
.
loading
=
true
;
state
.
loading
=
true
;
...
@@ -89,7 +87,7 @@ function handleQuery() {
...
@@ -89,7 +87,7 @@ function handleQuery() {
});
});
}
}
/**
/**
*
查询重置
*
重置查询
*/
*/
function
resetQuery
()
{
function
resetQuery
()
{
queryFormRef
.
value
.
resetFields
();
queryFormRef
.
value
.
resetFields
();
...
@@ -98,8 +96,6 @@ function resetQuery() {
...
@@ -98,8 +96,6 @@ function resetQuery() {
function
handleSelectionChange
(
selection
:
any
)
{
function
handleSelectionChange
(
selection
:
any
)
{
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
);
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
);
state
.
single
=
selection
.
length
!==
1
;
state
.
multiple
=
!
selection
.
length
;
}
}
function
handleRowClick
(
row
:
any
)
{
function
handleRowClick
(
row
:
any
)
{
...
@@ -107,14 +103,14 @@ function handleRowClick(row: any) {
...
@@ -107,14 +103,14 @@ function handleRowClick(row: any) {
}
}
function
handleAdd
()
{
function
handleAdd
()
{
state
.
dialog
=
{
dialog
.
value
=
{
title
:
'
添加角色
'
,
title
:
'
添加角色
'
,
visible
:
true
visible
:
true
};
};
}
}
function
handleUpdate
(
row
:
any
)
{
function
handleUpdate
(
row
:
any
)
{
state
.
dialog
=
{
dialog
.
value
=
{
title
:
'
修改角色
'
,
title
:
'
修改角色
'
,
visible
:
true
visible
:
true
};
};
...
@@ -131,13 +127,13 @@ function submitFormData() {
...
@@ -131,13 +127,13 @@ function submitFormData() {
if
(
state
.
formData
.
id
)
{
if
(
state
.
formData
.
id
)
{
updateRole
(
state
.
formData
.
id
as
any
,
state
.
formData
).
then
(()
=>
{
updateRole
(
state
.
formData
.
id
as
any
,
state
.
formData
).
then
(()
=>
{
ElMessage
.
success
(
'
修改角色成功
'
);
ElMessage
.
success
(
'
修改角色成功
'
);
c
ancel
();
c
loseDialog
();
handleQuery
();
handleQuery
();
loading
.
value
=
false
;
loading
.
value
=
false
;
});
});
}
else
{
}
else
{
addRole
(
state
.
formData
).
then
(()
=>
{
addRole
(
state
.
formData
).
then
(()
=>
{
c
ancel
();
c
loseDialog
();
ElMessage
.
success
(
'
新增角色成功
'
);
ElMessage
.
success
(
'
新增角色成功
'
);
handleQuery
();
handleQuery
();
loading
.
value
=
false
;
loading
.
value
=
false
;
...
@@ -150,9 +146,8 @@ function submitFormData() {
...
@@ -150,9 +146,8 @@ function submitFormData() {
/**
/**
* 取消
* 取消
*/
*/
function
c
ancel
()
{
function
c
loseDialog
()
{
dialog
.
value
.
visible
=
false
;
dialog
.
value
.
visible
=
false
;
formData
.
value
.
id
=
undefined
;
dataFormRef
.
value
.
resetFields
();
dataFormRef
.
value
.
resetFields
();
dataFormRef
.
value
.
clearValidate
();
dataFormRef
.
value
.
clearValidate
();
}
}
...
@@ -176,25 +171,11 @@ function handleDelete(row: any) {
...
@@ -176,25 +171,11 @@ function handleDelete(row: any) {
.
catch
(()
=>
ElMessage
.
info
(
'
已取消删除
'
));
.
catch
(()
=>
ElMessage
.
info
(
'
已取消删除
'
));
}
}
const
handleResourceCheckChange
=
(
data
:
Resource
,
isCheck
:
boolean
,
sonHasCheck
:
boolean
)
=>
{
console
.
log
(
'
data
'
,
data
);
console
.
log
(
'
isCheck
'
,
isCheck
);
if
(
data
.
perms
)
{
data
.
perms
.
forEach
(
item
=>
{
btnPerms
.
value
[
item
.
value
]
=
isCheck
;
});
}
};
/**
/**
* 资源分配
* 资源分配
*/
*/
function
openRoleResource
Dialog
(
row
:
RoleItem
)
{
function
showRoleMenu
Dialog
(
row
:
RoleItem
)
{
resource
DialogVisible
.
value
=
true
;
menu
DialogVisible
.
value
=
true
;
loading
.
value
=
true
;
loading
.
value
=
true
;
const
roleId
:
any
=
row
.
id
;
const
roleId
:
any
=
row
.
id
;
...
@@ -206,80 +187,35 @@ function openRoleResourceDialog(row: RoleItem) {
...
@@ -206,80 +187,35 @@ function openRoleResourceDialog(row: RoleItem) {
// 获取所有的资源
// 获取所有的资源
listResources
().
then
(
response
=>
{
listResources
().
then
(
response
=>
{
resourceOptions
.
value
=
response
.
data
;
resourceOptions
.
value
=
response
.
data
;
// 角色拥有的资源
// 获取角色拥有的资源
getRoleMenuIds
(
roleId
).
then
(({
data
})
=>
{
getRoleResources
(
roleId
).
then
(({
data
})
=>
{
// 勾选回显
// 勾选的菜单回显
const
checkedMenuIds
=
data
;
const
checkedMenuIds
=
data
.
menuIds
;
resourceRef
.
value
.
setCheckedKeys
(
checkedMenuIds
);
resourceRef
.
value
.
setCheckedKeys
(
checkedMenuIds
);
loading
.
value
=
false
;
nextTick
(()
=>
{
// 勾选的权限回显
const
rolePermIds
=
data
.
permIds
;
state
.
allPermIds
=
filterResourcePermIds
(
response
.
data
,
[]);
if
(
state
.
allPermIds
)
{
state
.
allPermIds
.
forEach
(
permId
=>
{
if
(
rolePermIds
.
indexOf
(
permId
)
>
-
1
)
{
btnPerms
.
value
[
permId
]
=
true
;
}
else
{
btnPerms
.
value
[
permId
]
=
false
;
}
});
}
loading
.
value
=
false
;
});
});
});
});
});
}
}
const
filterResourcePermIds
=
(
resources
:
Resource
[],
permIds
:
string
[])
=>
{
resources
.
forEach
(
resource
=>
{
if
(
resource
.
perms
)
{
resource
.
perms
.
forEach
(
perm
=>
{
permIds
.
push
(
perm
.
value
);
});
}
if
(
resource
.
children
)
{
filterResourcePermIds
(
resource
.
children
,
permIds
);
}
});
return
permIds
;
};
/**
/**
* 分配资源提交
* 分配资源提交
*/
*/
function
handleRoleResourceSubmit
()
{
function
handleRoleResourceSubmit
()
{
const
checkedMenuIds
:
any
[]
=
resourceRef
.
value
const
checkedMenuIds
:
number
[]
=
resourceRef
.
value
.
getCheckedNodes
(
false
,
true
)
.
getCheckedNodes
(
false
,
true
)
.
map
((
node
:
any
)
=>
node
.
value
);
.
map
((
node
:
any
)
=>
node
.
value
);
const
checkedPermIds
=
[]
as
string
[];
updateRoleMenus
(
checkedRole
.
value
.
id
,
checkedMenuIds
).
then
(
res
=>
{
if
(
state
.
allPermIds
)
{
state
.
allPermIds
.
forEach
(
permId
=>
{
if
(
btnPerms
.
value
[
permId
])
{
checkedPermIds
.
push
(
permId
);
}
});
}
const
RoleResource
=
{
menuIds
:
checkedMenuIds
,
permIds
:
checkedPermIds
};
updateRoleResource
(
checkedRole
.
value
.
id
,
RoleResource
).
then
(
res
=>
{
ElMessage
.
success
(
'
分配权限成功
'
);
ElMessage
.
success
(
'
分配权限成功
'
);
state
.
resourceDialogVisibl
e
=
false
;
menuDialogVisible
.
valu
e
=
false
;
handleQuery
();
handleQuery
();
});
});
}
}
/**
/**
*
取消资源分配
*
关闭资源弹窗
*/
*/
function
c
ancelResourceAssign
()
{
function
c
loseMenuDialogVisible
()
{
state
.
resourceDialogVisibl
e
=
false
;
menuDialogVisible
.
valu
e
=
false
;
}
}
onMounted
(()
=>
{
onMounted
(()
=>
{
...
@@ -289,104 +225,106 @@ onMounted(() => {
...
@@ -289,104 +225,106 @@ onMounted(() => {
<
template
>
<
template
>
<div
class=
"app-container"
>
<div
class=
"app-container"
>
<!-- 搜索表单 -->
<div
class=
"search"
>
<el-form
ref=
"queryFormRef"
:model=
"queryParams"
:inline=
"true"
>
<el-form
ref=
"queryFormRef"
:model=
"queryParams"
:inline=
"true"
>
<el-form-item>
<el-form-item
prop=
"name"
label=
"关键字"
>
<el-input
v-model=
"queryParams.keywords"
placeholder=
"角色名称"
clearable
@
keyup.enter=
"handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button
>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button>
</el-form-item>
</el-form>
</div>
<el-card>
<template
#header
>
<el-button
type=
"success"
:icon=
"Plus"
@
click=
"handleAdd"
<el-button
type=
"success"
:icon=
"Plus"
@
click=
"handleAdd"
>
新增
</el-button
>
新增
</el-button
>
>
<el-button
<el-button
type=
"danger"
type=
"danger"
:icon=
"Delete"
:icon=
"Delete"
:disabled=
"
multiple
"
:disabled=
"
ids.length === 0
"
@
click=
"handleDelete"
@
click=
"handleDelete"
>
删除
</el-button
>
删除
</el-button
>
>
</el-form-item>
</
template
>
<!--table-->
<el-form-item
prop=
"name"
>
<el-table
<el-input
ref=
"dataTableRef"
v-model=
"queryParams.name"
v-loading=
"loading"
placeholder=
"角色名称"
:data=
"roleList"
clearable
@
selection-change=
"handleSelectionChange"
@
keyup.enter=
"handleQuery"
@
row-click=
"handleRowClick"
/>
highlight-current-row
</el-form-item>
border
>
<el-form-item>
<el-table-column
type=
"selection"
width=
"55"
align=
"center"
/>
<el-button
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
<el-table-column
label=
"角色名称"
prop=
"name"
min-width=
"300"
/>
>
搜索
</el-button
<el-table-column
label=
"角色编码"
prop=
"code"
width=
"200"
/>
>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button>
<el-table-column
label=
"状态"
align=
"center"
width=
"150"
>
</el-form-item>
<
template
#default=
"scope"
>
</el-form>
<el-tag
v-if=
"scope.row.status === 1"
type=
"success"
>
正常
</el-tag>
<el-tag
v-else
type=
"info"
>
禁用
</el-tag>
<!-- 数据表格 -->
</
template
>
<el-table
</el-table-column>
ref=
"dataTableRef"
v-loading=
"loading"
<el-table-column
label=
"排序"
align=
"center"
width=
"100"
prop=
"sort"
/>
:data=
"roleList"
<el-table-column
prop=
"createTime"
label=
"创建时间"
width=
"250"
/>
@
selection-change=
"handleSelectionChange"
<el-table-column
prop=
"updateTime"
label=
"修改时间"
width=
"250"
/>
@
row-click=
"handleRowClick"
highlight-current-row
<el-table-column
label=
"操作"
align=
"center"
width=
"200"
>
border
<
template
#default=
"scope"
>
>
<el-tooltip
content=
"分配资源"
effect=
"light"
>
<el-table-column
type=
"selection"
width=
"55"
align=
"center"
/>
<el-button
<el-table-column
label=
"角色名称"
prop=
"name"
min-width=
"300"
/>
type=
"success"
<el-table-column
label=
"角色编码"
prop=
"code"
width=
"200"
/>
circle
plain
<el-table-column
label=
"状态"
align=
"center"
width=
"150"
>
@
click.stop=
"showRoleMenuDialog(scope.row)"
<template
#default
="
scope
"
>
>
<el-tag
v-if=
"scope.row.status === 1"
type=
"success"
>
正常
</el-tag>
<svg-icon
icon-class=
"perm"
/>
<el-tag
v-else
type=
"info"
>
禁用
</el-tag>
</el-button>
</
template
>
</el-tooltip>
</el-table-column>
<el-table-column
label=
"排序"
align=
"center"
width=
"100"
prop=
"sort"
/>
<el-table-column
prop=
"createTime"
label=
"创建时间"
width=
"250"
/>
<el-table-column
prop=
"updateTime"
label=
"修改时间"
width=
"250"
/>
<el-table-column
label=
"操作"
align=
"center"
width=
"200"
>
<
template
#default=
"scope"
>
<el-tooltip
content=
"分配资源"
effect=
"light"
>
<el-button
<el-button
type=
"success"
type=
"primary"
:icon=
"Edit"
circle
circle
plain
plain
@
click.stop=
"openRoleResourceDialog(scope.row)"
@
click.stop=
"handleUpdate(scope.row)"
>
/>
<svg-icon
icon-class=
"perm"
/>
<el-button
</el-button>
type=
"danger"
</el-tooltip>
:icon=
"Delete"
circle
<el-button
plain
type=
"primary"
@
click.stop=
"handleDelete(scope.row)"
:icon=
"Edit"
/>
circle
</
template
>
plain
</el-table-column>
@
click.stop=
"handleUpdate(scope.row)"
</el-table>
/>
<el-button
<!-- pagination -->
type=
"danger"
<pagination
:icon=
"Delete"
v-if=
"total > 0"
circle
:total=
"total"
plain
v-model:page=
"queryParams.pageNum"
@
click.stop=
"handleDelete(scope.row)"
v-model:limit=
"queryParams.pageSize"
/>
@
pagination=
"handleQuery"
</
template
>
/>
</el-table-column>
</el-card>
</el-table>
<!-- dialog -->
<!-- 分页工具条 -->
<pagination
v-if=
"total > 0"
:total=
"total"
v-model:page=
"queryParams.pageNum"
v-model:limit=
"queryParams.pageSize"
@
pagination=
"handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
<el-dialog
:title=
"dialog.title"
:title=
"dialog.title"
v-model=
"dialog.visible"
v-model=
"dialog.visible"
...
@@ -427,7 +365,7 @@ onMounted(() => {
...
@@ -427,7 +365,7 @@ onMounted(() => {
<
template
#footer
>
<
template
#footer
>
<div
class=
"dialog-footer"
>
<div
class=
"dialog-footer"
>
<el-button
type=
"primary"
@
click=
"submitFormData"
>
确 定
</el-button>
<el-button
type=
"primary"
@
click=
"submitFormData"
>
确 定
</el-button>
<el-button
@
click=
"c
ancel
"
>
取 消
</el-button>
<el-button
@
click=
"c
loseDialog
"
>
取 消
</el-button>
</div>
</div>
</
template
>
</
template
>
</el-dialog>
</el-dialog>
...
@@ -435,7 +373,7 @@ onMounted(() => {
...
@@ -435,7 +373,7 @@ onMounted(() => {
<!--分配资源弹窗-->
<!--分配资源弹窗-->
<el-dialog
<el-dialog
:title=
"'【' + checkedRole.name + '】资源分配'"
:title=
"'【' + checkedRole.name + '】资源分配'"
v-model=
"
resource
DialogVisible"
v-model=
"
menu
DialogVisible"
width=
"800px"
width=
"800px"
>
>
<el-scrollbar
max-height=
"600px"
v-loading=
"loading"
>
<el-scrollbar
max-height=
"600px"
v-loading=
"loading"
>
...
@@ -445,25 +383,9 @@ onMounted(() => {
...
@@ -445,25 +383,9 @@ onMounted(() => {
show-checkbox
show-checkbox
:data=
"resourceOptions"
:data=
"resourceOptions"
:default-expand-all=
"true"
:default-expand-all=
"true"
@
check-change=
"handleResourceCheckChange"
>
>
<
template
#default=
"{ data }"
>
<
template
#default=
"{ data }"
>
{{
data
.
label
}}
{{
data
.
label
}}
<div
v-if=
"data.perms"
class=
"resource-tree-node"
>
<el-divider
direction=
"vertical"
/>
<div
class=
"node-content"
>
<el-checkbox
v-for=
"perm in data.perms"
:key=
"perm.value"
:label=
"perm.value"
border
size=
"small"
v-model=
"btnPerms[perm.value]"
>
{{
perm
.
label
}}
</el-checkbox
>
</div>
</div>
</
template
>
</
template
>
</el-tree>
</el-tree>
</el-scrollbar>
</el-scrollbar>
...
@@ -473,48 +395,9 @@ onMounted(() => {
...
@@ -473,48 +395,9 @@ onMounted(() => {
<el-button
type=
"primary"
@
click=
"handleRoleResourceSubmit"
<el-button
type=
"primary"
@
click=
"handleRoleResourceSubmit"
>
确 定
</el-button
>
确 定
</el-button
>
>
<el-button
@
click=
"c
ancelResourceAssign
"
>
取 消
</el-button>
<el-button
@
click=
"c
loseMenuDialogVisible
"
>
取 消
</el-button>
</div>
</div>
</
template
>
</
template
>
</el-dialog>
</el-dialog>
</div>
</div>
</template>
</template>
<
style
lang=
"scss"
>
.resource-tree-node
{
width
:
100%
;
flex-wrap
:
wrap
;
display
:
flex
;
font-size
:
14px
;
justify-content
:
flex-end
;
margin
:
0
50px
;
.node-content
{
width
:
400px
;
display
:
flex
;
flex-wrap
:
wrap
;
}
.el-divider--vertical
{
height
:
2em
!
important
;
}
}
.el-tree-node__content
{
height
:
auto
!
important
;
}
.el-checkbox-group
{
display
:
flex
;
flex-wrap
:
wrap
;
&
:hover
{
background-color
:
var
(
--
el-tree-node-hover-bg-color
);
}
&
:active
{
background-color
:
var
(
--
el-tree-node-hover-bg-color
);
}
}
.el-checkbox.el-checkbox--small
{
margin
:
5px
;
z-index
:
999
;
background
:
#fff
;
}
</
style
>
src/views/system/user/index.vue
浏览文件 @
4af1b0aa
...
@@ -5,7 +5,6 @@ export default {
...
@@ -5,7 +5,6 @@ export default {
</
script
>
</
script
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
// Vue依赖
import
{
import
{
reactive
,
reactive
,
ref
,
ref
,
...
@@ -15,7 +14,7 @@ import {
...
@@ -15,7 +14,7 @@ import {
toRefs
toRefs
}
from
'
vue
'
;
}
from
'
vue
'
;
//
导入API
//
api
import
{
import
{
listUserPages
,
listUserPages
,
getUserFormData
,
getUserFormData
,
...
@@ -31,7 +30,6 @@ import {
...
@@ -31,7 +30,6 @@ import {
import
{
listDeptOptions
}
from
'
@/api/dept
'
;
import
{
listDeptOptions
}
from
'
@/api/dept
'
;
import
{
listRoleOptions
}
from
'
@/api/role
'
;
import
{
listRoleOptions
}
from
'
@/api/role
'
;
// 组件依赖
import
{
import
{
ElMessage
,
ElMessage
,
ElMessageBox
,
ElMessageBox
,
...
@@ -54,12 +52,11 @@ import {
...
@@ -54,12 +52,11 @@ import {
UserItem
,
UserItem
,
UserQueryParam
,
UserQueryParam
,
UserFormData
,
UserFormData
,
UserImport
Form
Data
UserImportData
}
from
'
@/types/api/user
'
;
}
from
'
@/types/api/user
'
;
import
{
Option
,
Dialog
}
from
'
@/types/common
'
;
import
{
Option
,
Dialog
}
from
'
@/types/common
'
;
// DOM元素的引用声明定义 ,变量名和DOM的ref属性值一致
const
deptTreeRef
=
ref
(
ElTree
);
// 部门树
const
deptTreeRef
=
ref
(
ElTree
);
// 部门树
const
queryFormRef
=
ref
(
ElForm
);
// 查询表单
const
queryFormRef
=
ref
(
ElForm
);
// 查询表单
const
dataFormRef
=
ref
(
ElForm
);
// 用户表单
const
dataFormRef
=
ref
(
ElForm
);
// 用户表单
...
@@ -71,37 +68,27 @@ const state = reactive({
...
@@ -71,37 +68,27 @@ const state = reactive({
// 遮罩层
// 遮罩层
loading
:
true
,
loading
:
true
,
// 选中数组
// 选中数组
ids
:
[],
ids
:
[]
as
number
[],
// 非单个禁用
single
:
true
,
// 非多个禁用
multiple
:
true
,
// 总条数
// 总条数
total
:
0
,
total
:
0
,
// 用户分页数据
userList
:
[]
as
UserItem
[],
userList
:
[]
as
UserItem
[],
// 弹窗属性
dialog
:
{
dialog
:
{
visible
:
false
visible
:
false
}
as
Dialog
,
}
as
Dialog
,
deptName
:
undefined
,
deptName
:
undefined
,
// 部门
树选
项
// 部门
下拉
项
deptOptions
:
[]
as
Option
[],
deptOptions
:
[]
as
Option
[],
// 部门名称
// 性别下拉项
// 性别状态字典
genderOptions
:
[]
as
Option
[],
genderOptions
:
[]
as
any
[],
// 角色下拉项
// 角色选项
roleOptions
:
[]
as
Option
[],
roleOptions
:
[]
as
Option
[],
// 表单参数
formData
:
{
formData
:
{
status
:
1
status
:
1
}
as
UserFormData
,
}
as
UserFormData
,
// 查询参数
queryParams
:
{
queryParams
:
{
pageNum
:
1
,
pageNum
:
1
,
pageSize
:
10
pageSize
:
10
}
as
UserQueryParam
,
}
as
UserQueryParam
,
// 表单校验
rules
:
{
rules
:
{
username
:
[{
required
:
true
,
message
:
'
用户名不能为空
'
,
trigger
:
'
blur
'
}],
username
:
[{
required
:
true
,
message
:
'
用户名不能为空
'
,
trigger
:
'
blur
'
}],
nickname
:
[
nickname
:
[
...
@@ -129,14 +116,14 @@ const state = reactive({
...
@@ -129,14 +116,14 @@ const state = reactive({
title
:
'
用户搭配
'
,
title
:
'
用户搭配
'
,
visible
:
false
visible
:
false
}
as
Dialog
,
}
as
Dialog
,
importFormData
:
{}
as
UserImport
Form
Data
,
importFormData
:
{}
as
UserImportData
,
excelFile
:
undefined
as
any
,
excelFile
:
undefined
as
any
,
excelFilelist
:
[]
as
File
[]
excelFilelist
:
[]
as
File
[]
});
});
const
{
const
{
ids
,
loading
,
loading
,
multiple
,
queryParams
,
queryParams
,
userList
,
userList
,
total
,
total
,
...
@@ -151,9 +138,6 @@ const {
...
@@ -151,9 +138,6 @@ const {
excelFilelist
excelFilelist
}
=
toRefs
(
state
);
}
=
toRefs
(
state
);
/**
* 部门筛选
*/
watchEffect
(
watchEffect
(
()
=>
{
()
=>
{
deptTreeRef
.
value
.
filter
(
state
.
deptName
);
deptTreeRef
.
value
.
filter
(
state
.
deptName
);
...
@@ -164,7 +148,7 @@ watchEffect(
...
@@ -164,7 +148,7 @@ watchEffect(
);
);
/**
/**
* 部门
列表
筛选
* 部门筛选
*/
*/
function
filterDeptNode
(
value
:
string
,
data
:
any
)
{
function
filterDeptNode
(
value
:
string
,
data
:
any
)
{
if
(
!
value
)
{
if
(
!
value
)
{
...
@@ -182,16 +166,16 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
...
@@ -182,16 +166,16 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
}
}
/**
/**
*
加载角色下拉列表
*
获取角色下拉项
*/
*/
async
function
load
RoleOptions
()
{
async
function
get
RoleOptions
()
{
listRoleOptions
().
then
(
response
=>
{
listRoleOptions
().
then
(
response
=>
{
state
.
roleOptions
=
response
.
data
;
state
.
roleOptions
=
response
.
data
;
});
});
}
}
/**
/**
* 用户状态
修改
* 用户状态
change
*/
*/
function
handleStatusChange
(
row
:
{
[
key
:
string
]:
any
})
{
function
handleStatusChange
(
row
:
{
[
key
:
string
]:
any
})
{
const
text
=
row
.
status
===
1
?
'
启用
'
:
'
停用
'
;
const
text
=
row
.
status
===
1
?
'
启用
'
:
'
停用
'
;
...
@@ -216,8 +200,8 @@ function handleStatusChange(row: { [key: string]: any }) {
...
@@ -216,8 +200,8 @@ function handleStatusChange(row: { [key: string]: any }) {
}
}
/**
/**
*
用户
查询
* 查询
*
*
/
*/
function
handleQuery
()
{
function
handleQuery
()
{
state
.
loading
=
true
;
state
.
loading
=
true
;
listUserPages
(
state
.
queryParams
).
then
(({
data
})
=>
{
listUserPages
(
state
.
queryParams
).
then
(({
data
})
=>
{
...
@@ -228,7 +212,7 @@ function handleQuery() {
...
@@ -228,7 +212,7 @@ function handleQuery() {
}
}
/**
/**
* 重置
查询
* 重置
*/
*/
function
resetQuery
()
{
function
resetQuery
()
{
queryFormRef
.
value
.
resetFields
();
queryFormRef
.
value
.
resetFields
();
...
@@ -236,16 +220,14 @@ function resetQuery() {
...
@@ -236,16 +220,14 @@ function resetQuery() {
}
}
/**
/**
*
表格行选中事件
*
行选中
*/
*/
function
handleSelectionChange
(
selection
:
any
)
{
function
handleSelectionChange
(
selection
:
any
)
{
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
);
state
.
ids
=
selection
.
map
((
item
:
any
)
=>
item
.
id
);
state
.
single
=
selection
.
length
!==
1
;
state
.
multiple
=
!
selection
.
length
;
}
}
/**
/**
*
密码重置
*
重置密码
*/
*/
function
resetPassword
(
row
:
{
[
key
:
string
]:
any
})
{
function
resetPassword
(
row
:
{
[
key
:
string
]:
any
})
{
ElMessageBox
.
prompt
(
ElMessageBox
.
prompt
(
...
@@ -276,8 +258,8 @@ async function handleAdd() {
...
@@ -276,8 +258,8 @@ async function handleAdd() {
title
:
'
添加用户
'
,
title
:
'
添加用户
'
,
visible
:
true
visible
:
true
};
};
await
load
DeptOptions
();
await
get
DeptOptions
();
await
load
RoleOptions
();
await
get
RoleOptions
();
}
}
/**
/**
...
@@ -290,8 +272,8 @@ async function handleUpdate(row: { [key: string]: any }) {
...
@@ -290,8 +272,8 @@ async function handleUpdate(row: { [key: string]: any }) {
};
};
const
userId
=
row
.
id
||
state
.
ids
;
const
userId
=
row
.
id
||
state
.
ids
;
await
load
DeptOptions
();
await
get
DeptOptions
();
await
load
RoleOptions
();
await
get
RoleOptions
();
getUserFormData
(
userId
).
then
(({
data
})
=>
{
getUserFormData
(
userId
).
then
(({
data
})
=>
{
formData
.
value
=
data
;
formData
.
value
=
data
;
});
});
...
@@ -307,13 +289,13 @@ function submitForm() {
...
@@ -307,13 +289,13 @@ function submitForm() {
if
(
userId
)
{
if
(
userId
)
{
updateUser
(
userId
,
state
.
formData
).
then
(()
=>
{
updateUser
(
userId
,
state
.
formData
).
then
(()
=>
{
ElMessage
.
success
(
'
修改用户成功
'
);
ElMessage
.
success
(
'
修改用户成功
'
);
c
ancel
();
c
loseDialog
();
handleQuery
();
handleQuery
();
});
});
}
else
{
}
else
{
addUser
(
state
.
formData
).
then
(()
=>
{
addUser
(
state
.
formData
).
then
(()
=>
{
ElMessage
.
success
(
'
新增用户成功
'
);
ElMessage
.
success
(
'
新增用户成功
'
);
c
ancel
();
c
loseDialog
();
handleQuery
();
handleQuery
();
});
});
}
}
...
@@ -345,28 +327,27 @@ function handleDelete(row: { [key: string]: any }) {
...
@@ -345,28 +327,27 @@ function handleDelete(row: { [key: string]: any }) {
}
}
/**
/**
*
取消
*
关闭用户弹窗
*/
*/
function
c
ancel
()
{
function
c
loseDialog
()
{
dialog
.
value
.
visible
=
false
;
dialog
.
value
.
visible
=
false
;
formData
.
value
.
id
=
undefined
;
dataFormRef
.
value
.
resetFields
();
dataFormRef
.
value
.
resetFields
();
dataFormRef
.
value
.
clearValidate
();
dataFormRef
.
value
.
clearValidate
();
}
}
/**
/**
*
加载部门
*
获取部门下拉项
*/
*/
async
function
load
DeptOptions
()
{
async
function
get
DeptOptions
()
{
listDeptOptions
().
then
(
response
=>
{
listDeptOptions
().
then
(
response
=>
{
state
.
deptOptions
=
response
.
data
;
state
.
deptOptions
=
response
.
data
;
});
});
}
}
/**
/**
*
加载性别字典
*
获取性别下拉项
*/
*/
function
load
GenderOptions
()
{
function
get
GenderOptions
()
{
proxy
.
$listDictItemsByTypeCode
(
'
gender
'
).
then
((
response
:
any
)
=>
{
proxy
.
$listDictItemsByTypeCode
(
'
gender
'
).
then
((
response
:
any
)
=>
{
state
.
genderOptions
=
response
?.
data
;
state
.
genderOptions
=
response
?.
data
;
});
});
...
@@ -394,11 +375,11 @@ function handleDownloadTemplate() {
...
@@ -394,11 +375,11 @@ function handleDownloadTemplate() {
}
}
/**
/**
*
显示
导入弹窗
* 导入弹窗
*/
*/
async
function
showImportDialog
()
{
async
function
showImportDialog
()
{
await
load
DeptOptions
();
await
get
DeptOptions
();
await
load
RoleOptions
();
await
get
RoleOptions
();
importDialog
.
value
.
visible
=
true
;
importDialog
.
value
.
visible
=
true
;
}
}
...
@@ -470,20 +451,13 @@ function handleExport() {
...
@@ -470,20 +451,13 @@ function handleExport() {
});
});
}
}
/**
onMounted
(()
=>
{
* 初始化数据
*/
function
loadData
()
{
// 初始化性别字典
// 初始化性别字典
load
GenderOptions
();
get
GenderOptions
();
// 初始化部门
// 初始化部门
load
DeptOptions
();
get
DeptOptions
();
// 初始化用户列表数据
// 初始化用户列表数据
handleQuery
();
handleQuery
();
}
onMounted
(()
=>
{
loadData
();
});
});
</
script
>
</
script
>
...
@@ -514,87 +488,82 @@ onMounted(() => {
...
@@ -514,87 +488,82 @@ onMounted(() => {
<!-- 用户数据 -->
<!-- 用户数据 -->
<el-col
:span=
"20"
:xs=
"24"
>
<el-col
:span=
"20"
:xs=
"24"
>
<
el-card
class=
"box-card
"
>
<
div
class=
"search
"
>
<el-form
ref=
"queryFormRef"
:model=
"queryParams"
:inline=
"true"
>
<el-form
ref=
"queryFormRef"
:model=
"queryParams"
:inline=
"true"
>
<el-row>
<el-form-item
label=
"关键字"
prop=
"keywords"
>
<el-col
:span=
"18"
:xs=
"24"
>
<el-input
<el-form-item>
v-model=
"queryParams.keywords"
<el-button
placeholder=
"用户名/昵称/手机号"
type=
"success"
clearable
:icon=
"Plus"
style=
"width: 200px"
@
click=
"handleAdd"
@
keyup.enter=
"handleQuery"
v-hasPerm=
"['sys:user:add']"
/>
>
新增
</el-button
</el-form-item>
>
<el-button
<el-form-item
label=
"状态"
prop=
"status"
>
type=
"danger"
<el-select
:icon=
"Delete"
v-model=
"queryParams.status"
:disabled=
"multiple"
placeholder=
"全部"
@
click=
"handleDelete"
clearable
v-hasPerm=
"['sys:user:delete']"
style=
"width: 200px"
>
删除
</el-button
>
>
<el-option
label=
"启用"
value=
"1"
/>
</el-form-item>
<el-option
label=
"禁用"
value=
"0"
/>
</el-select>
<el-form-item
prop=
"keywords"
>
</el-form-item>
<el-input
v-model=
"queryParams.keywords"
<el-form-item>
placeholder=
"用户名/昵称/手机号"
<el-button
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
clearable
>
搜索
</el-button
style=
"width: 200px"
>
@
keyup.enter=
"handleQuery"
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button>
/>
</el-form-item>
</el-form-item>
<el-form-item
prop=
"status"
>
<el-select
v-model=
"queryParams.status"
placeholder=
"用户状态"
clearable
style=
"width: 200px"
>
<el-option
label=
"正常"
value=
"1"
/>
<el-option
label=
"禁用"
value=
"0"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button
>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button
>
</el-form-item>
</el-col>
<el-col
:span=
"6"
:xs=
"24"
style=
"text-align: right"
>
<el-form-item>
<el-dropdown
split-button
style=
"margin-left: 12px"
>
导入
<template
#dropdown
>
<el-dropdown-menu>
<el-dropdown-item
:icon=
"Download"
@
click=
"handleDownloadTemplate"
>
下载模板
</el-dropdown-item
>
<el-dropdown-item
:icon=
"Top"
@
click=
"showImportDialog"
>
导入数据
</el-dropdown-item
>
</el-dropdown-menu>
</
template
>
</el-dropdown>
<el-button
:icon=
"Download"
style=
"margin-left: 12px"
@
click=
"handleExport"
>
导出
</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-form>
</div>
<el-card>
<template
#header
>
<el-form-item
style=
"float: left"
>
<el-button
type=
"success"
:icon=
"Plus"
@
click=
"handleAdd"
v-hasPerm=
"['sys:user:add']"
>
新增
</el-button
>
<el-button
type=
"danger"
:icon=
"Delete"
:disabled=
"ids.length === 0"
@
click=
"handleDelete"
v-hasPerm=
"['sys:user:delete']"
>
删除
</el-button
>
</el-form-item>
<el-form-item
style=
"float: right"
>
<el-dropdown
split-button
style=
"margin-left: 12px"
>
导入
<template
#dropdown
>
<el-dropdown-menu>
<el-dropdown-item
:icon=
"Download"
@
click=
"handleDownloadTemplate"
>
下载模板
</el-dropdown-item
>
<el-dropdown-item
:icon=
"Top"
@
click=
"showImportDialog"
>
导入数据
</el-dropdown-item
>
</el-dropdown-menu>
</
template
>
</el-dropdown>
<el-button
:icon=
"Download"
style=
"margin-left: 12px"
@
click=
"handleExport"
>
导出
</el-button
>
</el-form-item>
</template>
<el-table
<el-table
v-loading=
"loading"
v-loading=
"loading"
...
@@ -689,7 +658,7 @@ onMounted(() => {
...
@@ -689,7 +658,7 @@ onMounted(() => {
v-model=
"dialog.visible"
v-model=
"dialog.visible"
width=
"600px"
width=
"600px"
append-to-body
append-to-body
@
close=
"c
ancel
"
@
close=
"c
loseDialog
"
>
>
<el-form
<el-form
ref=
"dataFormRef"
ref=
"dataFormRef"
...
@@ -765,12 +734,12 @@ onMounted(() => {
...
@@ -765,12 +734,12 @@ onMounted(() => {
<
template
#footer
>
<
template
#footer
>
<div
class=
"dialog-footer"
>
<div
class=
"dialog-footer"
>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
@
click=
"c
ancel
"
>
取 消
</el-button>
<el-button
@
click=
"c
loseDialog
"
>
取 消
</el-button>
</div>
</div>
</
template
>
</
template
>
</el-dialog>
</el-dialog>
<!--
用户导入弹窗
-->
<!--
import dialog
-->
<el-dialog
<el-dialog
:title=
"importDialog.title"
:title=
"importDialog.title"
v-model=
"importDialog.visible"
v-model=
"importDialog.visible"
...
@@ -842,5 +811,3 @@ onMounted(() => {
...
@@ -842,5 +811,3 @@ onMounted(() => {
</el-dialog>
</el-dialog>
</div>
</div>
</template>
</template>
<
style
lang=
"scss"
scoped
></
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录