Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
常超
founder_vue
Commits
e52ad435
Commit
e52ad435
authored
Oct 26, 2021
by
maxiaohan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
用户组管理+新增用户 静态页面
parent
2a151cbd
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
653 additions
and
6 deletions
+653
-6
src/views/SystemManage/GroupManage.vue
+343
-4
src/views/SystemManage/UserManage.vue
+2
-2
src/views/SystemManage/scss/group.scss
+305
-0
src/views/SystemManage/scss/user.scss
+3
-0
No files found.
src/views/SystemManage/GroupManage.vue
View file @
e52ad435
<
template
><div>
用户组管理
</div></
template
>
<
template
>
<el-container
class=
"manage-page"
direction=
"vertical"
>
<!-- 标题-->
<div
class=
"title"
>
用户组管理
</div>
<div
class=
"clear-btn"
@
click=
"clear"
>
清空
</div>
<div
class=
"search"
>
<div
class=
"search-item"
>
<div
class=
"label"
>
用户组:
</div>
<el-select
class=
"search-info"
placeholder=
"请输入并选择"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
</el-select>
</div>
<div
class=
"search-item"
>
<div
class=
"label"
>
用户名:
</div>
<el-input
class=
"search-info"
placeholder=
"请输入用户名"
></el-input>
</div>
<div
class=
"search-item"
>
<div
class=
"label"
>
姓名:
</div>
<el-select
class=
"search-info"
placeholder=
"请输入并选择"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
</el-select>
</div>
<div
class=
"search-item"
>
<div
class=
"label"
>
用户所属单位代码:
</div>
<el-select
class=
"search-info"
placeholder=
"请输入并选择"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
</el-select>
</div>
<div
class=
"search-item"
>
<div
class=
"label"
>
组角色:
</div>
<el-select
class=
"search-info"
placeholder=
"请输入并选择"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
</el-select>
</div>
<div
class=
"btn"
>
筛选用户组
</div>
</div>
<div
class=
"operation"
>
<div
class=
"btn1"
@
click=
"batch"
>
批量操作
</div>
<div
class=
"btns"
>
<div
class=
"btn1"
>
删除
</div>
<div
class=
"add"
@
click=
"open"
>
<svg-icon
style=
"width: 13px;height: 13px;margin-bottom: -1px;margin-right: 4px "
icon-class=
"ic_add"
/>
新增用户组
</div>
</div>
</div>
<el-tag
style=
"width:100%;color:#666666;margin-bottom:16px"
v-show=
"isShowTip"
>
<i
class=
"el-icon-info"
style=
"color:#055FE7;font-size:15px"
></i>
已选择
<span
style=
"color:#055FE7"
>
{{
multipleSelection
.
length
}}
</span>
项
<span
v-html=
"' '"
></span>
服务调用总计:
<span
v-html=
"' '"
></span>
36.4万
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-left:20px;"
@
click=
"toggleSelection()"
>
清除
</el-link
>
</el-tag>
<div
class=
"table-data"
>
<el-table
highlight-current-row
ref=
"multipleTable"
:data=
"tableData"
class=
"table"
@
selection-change=
"handleSelectionChange"
>
<el-table-column
type=
"selection"
height
width=
"auto"
v-if=
"isSelected"
>
</el-table-column>
<el-table-column
prop=
"date"
label=
"用户组"
>
</el-table-column>
<el-table-column
prop=
"name"
label=
"组角色"
>
</el-table-column>
<el-table-column
prop=
"address"
label=
"组成员"
>
</el-table-column
><el-table-column
prop=
"date"
label=
"启用状态"
width=
"100"
>
</el-table-column>
<el-table-column
prop=
"address"
label=
"操作"
></el-table-column>
</el-table>
</div>
<div
class=
"footer"
>
<span
class=
"count"
>
共
{{
reqParam
.
page
.
total
}}
条记录 第
{{
reqParam
.
page
.
currPage
}}
/
{{
Tpage
}}
页
</span
>
<div
class=
"page"
>
<el-pagination
class=
"paging"
background
@
size-change=
"handleSizeChange"
@
current-change=
"handleCurrPageChange"
:current-page=
"reqParam.page.currPage"
:page-sizes=
"[10, 20, 50, 100]"
:page-size=
"reqParam.page.pageSize"
layout=
"prev, pager, next"
:total=
"reqParam.page.total"
>
</el-pagination>
</div>
</div>
<!-- 新增弹窗-->
<div
class=
"addUserDialogBg"
v-show=
"isShowAddUserDialogBg"
@
click=
"canceladd"
></div>
<div
class=
"addUserDialog"
v-show=
"isShowAddUserDialog"
>
<div
class=
"head-title"
>
<div
class=
"left"
>
新增用户组
</div>
<div
class=
"close"
@
click=
"canceladd"
>
<img
src=
"@/assets/img/manage/close.png"
alt=
""
/>
</div>
</div>
<div
class=
"info"
>
<div
class=
"info-item"
>
<div
class=
"label"
>
*组名称:
</div>
<el-input
class=
"input-info"
placeholder=
"请输入组名称"
></el-input>
</div>
<div
class=
"info-item"
>
<div
class=
"label"
>
用户组描述:
</div>
<el-input
class=
"input-info"
placeholder=
"请输入用户组描述"
></el-input>
</div>
<div
class=
"info-item"
>
<div
class=
"label"
>
加入组用户:
</div>
<el-select
class=
"input-info"
placeholder=
"请选择组用户"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
</el-select>
</div>
<div
class=
"info-item"
>
<div
class=
"label"
>
加入组角色:
</div>
<el-select
class=
"input-info"
placeholder=
"请选择组角色"
>
<el-option
v-for=
"item in options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
</el-select>
</div>
<div
class=
"info-item"
>
<div
class=
"label"
>
启用状态:
</div>
<el-radio-group
class=
"radio-info"
v-model=
"status"
@
change=
"searchStyle"
>
<el-radio
:label=
"0"
>
启用
</el-radio>
<el-radio
:label=
"1"
>
停用
</el-radio>
</el-radio-group>
</div>
</div>
<div
class=
"addbtns"
>
<div
class=
"add"
@
click=
"add"
>
确定
</div>
<div
class=
"cancel"
@
click=
"canceladd"
>
取消
</div>
</div>
</div>
</el-container>
</
template
>
<
script
>
import
"@/icons/ic_add.svg"
;
export
default
{
name
:
"GroupManage"
name
:
"GroupManage"
,
data
()
{
return
{
username
:
""
,
userdesc
:
""
,
unitcode
:
""
,
auth
:
""
,
status
:
""
,
searchOptions
:
""
,
reqParam
:
{
userdesc
:
""
,
page
:
{
total
:
0
,
pageSize
:
10
,
currPage
:
1
}
},
// 选中数据
multipleSelection
:
[],
isShowTip
:
false
,
//批量操作提示
isSelected
:
false
,
// 是否批量操作
// 是否展示认定完成确认框背景
isShowAddUserDialogBg
:
false
,
// 是否展示认定完成确认框
isShowAddUserDialog
:
false
,
tableData
:
[
{
date
:
"2016-05-02"
,
name
:
"王小虎"
,
address
:
"上海市普陀区金沙江路 1518 弄"
},
{
date
:
"2016-05-04"
,
name
:
"王小虎"
,
address
:
"上海市普陀区金沙江路 1517 弄"
},
{
date
:
"2016-05-01"
,
name
:
"王小虎"
,
address
:
"上海市普陀区金沙江路 1519 弄"
},
{
date
:
"2016-05-03"
,
name
:
"王小虎"
,
address
:
"上海市普陀区金沙江路 1516 弄"
}
],
options
:
[
{
value
:
"选项1"
,
label
:
"黄金糕"
},
{
value
:
"选项2"
,
label
:
"双皮奶"
},
{
value
:
"选项3"
,
label
:
"蚵仔煎"
},
{
value
:
"选项4"
,
label
:
"龙须面"
},
{
value
:
"选项5"
,
label
:
"北京烤鸭"
}
],
value
:
""
};
},
computed
:
{
// 计算总页数
Tpage
()
{
return
(
Math
.
floor
(
this
.
reqParam
.
page
.
total
/
this
.
reqParam
.
page
.
pageSize
)
+
1
);
}
},
methods
:
{
clear
()
{
console
.
info
(
"清空方法"
);
},
// 搜索方式
searchStyle
(
val
)
{
// console.log(val, '搜索方式')
this
.
searchOptions
=
val
;
// console.log(this.reqParam.page.searchOptions)
},
// 清除所有选项
toggleSelection
(
rows
)
{
if
(
rows
)
{
rows
.
forEach
(
row
=>
{
this
.
$refs
.
multipleTable
.
toggleRowSelection
(
row
);
});
}
else
{
this
.
$refs
.
multipleTable
.
clearSelection
();
}
console
.
log
(
this
.
multipleSelection
);
},
// 选择数据
handleSelectionChange
(
val
)
{
this
.
multipleSelection
=
val
;
console
.
info
(
this
.
multipleSelection
);
if
(
this
.
multipleSelection
.
length
)
{
this
.
isShowTip
=
true
;
}
else
{
this
.
isShowTip
=
false
;
}
},
//是否是批量操作
batch
()
{
this
.
isSelected
=
!
this
.
isSelected
;
},
// 当期页发生变化
handleCurrPageChange
:
function
(
val
)
{
this
.
reqParam
.
page
.
currPage
=
val
;
// this.search();
},
// 每页展示数量发生变化
handleSizeChange
:
function
(
val
)
{
this
.
reqParam
.
page
.
pageSize
=
val
;
// this.search();
},
// 打开新增弹窗
open
()
{
this
.
isShowAddUserDialog
=
true
;
this
.
isShowAddUserDialogBg
=
true
;
},
// 关闭新增弹窗
canceladd
()
{
this
.
isShowAddUserDialog
=
false
;
this
.
isShowAddUserDialogBg
=
false
;
},
// 新增方法
add
()
{
this
.
isShowAddUserDialog
=
false
;
this
.
isShowAddUserDialogBg
=
false
;
this
.
$message
.
success
(
"新增成功!"
);
}
}
};
</
script
>
<
style
scoped
></
style
>
<
style
scoped
lang=
"scss"
>
@import
"scss/group"
;
</
style
>
src/views/SystemManage/UserManage.vue
View file @
e52ad435
...
...
@@ -118,7 +118,7 @@
<div
class=
"table-data"
>
<el-table
highlight-current-row
ref=
"
sing
leTable"
ref=
"
multip
leTable"
:data=
"tableData"
class=
"table"
@
selection-change=
"handleSelectionChange"
...
...
@@ -409,5 +409,5 @@ export default {
};
</
script
>
<
style
scoped
lang=
"scss"
>
@import
"
./scss/adduser.scss
"
;
@import
"
scss/user
"
;
</
style
>
src/views/SystemManage/scss/group.scss
0 → 100644
View file @
e52ad435
.manage-page
{
width
:
100%
;
padding
:
24px
;
font-family
:
MicrosoftYaHei
;
div
{
display
:
inline-block
;
}
.title
{
width
:
80px
;
height
:
24px
;
font-size
:
16px
;
font-family
:
MicrosoftYaHei-Bold
,
MicrosoftYaHei
;
font-weight
:
bold
;
color
:
#333333
;
line-height
:
24px
;
}
.clear-btn
{
width
:
28px
;
border
:
none
;
height
:
22px
;
padding
:
0
;
margin
:
0
12px
0
12px
;
font-size
:
14px
;
font-weight
:
350
;
color
:
#333333
;
text-align
:
center
;
cursor
:
pointer
;
&
:hover
{
color
:
#055fe7
;
}
&
:active
{
color
:
#055fe7
;
}
}
.search
{
width
:
100%
;
height
:
50px
;
.search-item
{
width
:
auto
;
height
:
32px
;
margin
:
5px
16px
5px
0
;
.label
{
width
:
auto
;
height
:
32px
;
font-size
:
14px
;
font-family
:
MicrosoftYaHei
;
color
:
#333333
;
line-height
:
32px
;
margin
:
8px
;
}
.search-info
{
width
:
155px
;
height
:
32px
;
background
:
#ffffff
;
border-radius
:
4px
;
//border: 1px solid #e6e6e8;
//margin-top: 8px;
}
}
.btn
{
position
:absolute
;
top
:
110px
;
right
:
24px
;
width
:
95px
;
height
:
32px
;
background
:
#055fe7
;
border-radius
:
4px
;
line-height
:
32px
;
color
:
#ffffff
;
font-size
:
14px
;
text-align
:
center
;
cursor
:
pointer
;
}
}
.operation
{
width
:
100%
;
height
:
45px
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-between
;
margin-top
:
10px
;
padding-top
:
16px
;
border-top
:
1px
#eeeeee
solid
;
.btn1
{
width
:
96px
;
height
:
32px
;
border-radius
:
4px
;
color
:
#2e3846
;
font-size
:
14px
;
border
:
1px
solid
#aeb5c2
;
cursor
:
pointer
;
line-height
:
32px
;
text-align
:
center
;
&
:hover
{
border
:
#055fe7
1px
solid
;
color
:
#055fe7
;
}
&
:active
{
border
:
#055fe7
1px
solid
;
color
:
#055fe7
;
}
}
.btns
{
.add
{
width
:
120px
;
height
:
32px
;
line-height
:
32px
;
font-size
:
14px
;
background
:
#ffffff
;
border-radius
:
4px
;
border
:
1px
solid
#aeb5c2
;
margin-left
:
16px
;
text-align
:
center
;
cursor
:
pointer
;
&
:hover
{
border
:
#055fe7
1px
solid
;
color
:
#055fe7
;
}
&
:active
{
border
:
#055fe7
1px
solid
;
color
:
#055fe7
;
}
}
}
}
.table-data
{
height
:
580px
;
width
:
100%
;
}
.footer
{
width
:
1544px
;
//width: calc(100vw - 367px);
position
:
absolute
;
bottom
:
27px
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-between
;
align-items
:
center
;
.count
{
font-size
:
14px
;
font-family
:
MicrosoftYaHei
;
color
:
#666666
;
}
.paging
{
float
:
right
;
}
/
deep
/
.el-pager
{
.number
{
background-color
:
transparent
;
}
.number.active
{
background-color
:
#055fe7
!
important
;
box-shadow
:
0px
12px
16px
1px
rgba
(
0
,
21
,
51
,
0
.03
);
border-radius
:
6px
;
}
.el-icon.more.btn-quicknext.el-icon-more
,
.el-icon.more.btn-quickprev.el-icon-more
{
background-color
:
transparent
!
important
;
}
}
/
deep
/
.btn-prev
,
/
deep
/
.btn-next
{
background-color
:
transparent
!
important
;
}
/
deep
/
.el-pagination__sizes
{
position
:
absolute
;
right
:
0
;
}
/
deep
/
.btn-next
{
//margin-right: 120px !important;
}
}
//表格表头样式
/
deep
/
.el-table
th
,
.el-table
tr
{
height
:
48px
;
background
:
#f6f8fa
;
font-size
:
14px
;
color
:
#282f3c
;
}
//表格内容样式
/
deep
/
.el-table
td
,
.el-table
tr
{
height
:
55px
;
background
:
#ffffff
;
font-size
:
14px
;
color
:
#333333
;
padding
:
0
;
font-weight
:
400
;
}
}
//新增用户 背景
.addUserDialogBg
{
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
500
;
width
:
100%
;
height
:
100%
;
background
:
rgba
(
$color
:
#fff
,
$alpha
:
0
.65
);
filter
:
blur
(
2px
);
}
//新增用户信息
.addUserDialog
{
box-sizing
:
border-box
;
position
:
absolute
;
top
:
calc
(
50%
-
257px
);
left
:
calc
(
50%
-
471
.5px
);
z-index
:
1000
;
width
:
890px
;
height
:
410px
;
background
:
#ffffff
;
box-shadow
:
0px
14px
30px
0px
rgba
(
0
,
21
,
51
,
0
.25
);
border-radius
:
6px
;
.head-title
{
box-sizing
:
border-box
;
width
:
100%
;
height
:
50px
;
display
:
flex
;
justify-content
:
space-between
;
padding
:
14px
32px
;
border-bottom
:
1px
solid
#EEEEEE
;
.left
{
font-size
:
16px
;
color
:
#282f3c
;
}
.close
{
cursor
:
pointer
;
width
:
13px
;
height
:
13px
;
img
{
object-fit
:
contain
;
}
}
}
.info
{
width
:
100%
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:center
;
padding-left
:
230px
;
padding-top
:
10px
;
margin-top
:
10px
;
margin-bottom
:
10px
;
.info-item
{
margin-top
:
3px
;
margin-bottom
:
6px
;
width
:
400px
;
height
:
40px
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
.label
{
width
:
105px
;
height
:
35px
;
font-size
:
14px
;
color
:
#333333
;
line-height
:
35px
;
}
.input-info
{
width
:
264px
;
height
:
35px
;
background
:
#FFFFFF
;
box-shadow
:
0px
6px
10px
2px
rgba
(
0
,
21
,
51
,
0
.06
);
border-radius
:
4px
;
}
.radio-info
{
margin-top
:
10px
;
width
:
264px
;
height
:
35px
;
}
}
}
.addbtns
{
border-top
:
1px
solid
#EEEEEE
;
padding-top
:
20px
;
width
:
100%
;
text-align
:
center
;
.add
{
width
:
72px
;
height
:
40px
;
background
:
#FFFFFF
;
border-radius
:
4px
;
border
:
1px
solid
#AEB5C2
;
font-size
:
14px
;
color
:
#2E3846
;
line-height
:
40px
;
cursor
:pointer
;
margin-right
:
24px
;
}
.cancel
{
width
:
72px
;
height
:
40px
;
background
:
#055FE7
;
border-radius
:
4px
;
font-size
:
14px
;
color
:
#FFFFFF
;
line-height
:
40px
;
cursor
:pointer
;
}
}
}
\ No newline at end of file
src/views/SystemManage/scss/
add
user.scss
→
src/views/SystemManage/scss/user.scss
View file @
e52ad435
...
...
@@ -59,6 +59,9 @@
}
}
.btn
{
position
:absolute
;
top
:
110px
;
right
:
24px
;
width
:
95px
;
height
:
32px
;
background
:
#055fe7
;
...
...
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