xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

权限管理-ui

dev
xuhuajiao 3 years ago
parent
4e391b8f1d
commit
4b480d972e
13 changed files with 715 additions and 307 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/t-zs.png
  2. 24
      src/assets/styles/eladmin.scss
  3. 135
      src/assets/styles/index.scss
  4. 36
      src/assets/styles/login.scss
  5. 4
      src/assets/styles/sidebar.scss
  6. 4
      src/layout/index.vue
  7. 3
      src/views/device/deviceConfig.vue
  8. 78
      src/views/device/index.vue
  9. 43
      src/views/login.vue
  10. 115
      src/views/system/dept/index.vue
  11. 66
      src/views/system/menu/index.vue
  12. 142
      src/views/system/role/index.vue
  13. 104
      src/views/system/user/index.vue

BIN
src/assets/images/t-zs.png
View File

Side by Side

After

Width: 44  |  Height: 47  |  Size: 2.2 KiB

24
src/assets/styles/eladmin.scss
View File

@ -1,12 +1,14 @@
.head-container { .head-container {
padding-bottom: 10px;
padding-bottom: 20px;
margin-bottom: 12px;
border-bottom: 1px solid #eee;
.filter-item { .filter-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin: 0 3px 10px 0;
// margin: 0 3px 10px 0;
input { input {
height: 30.5px;
line-height: 30.5px;
height: 32px;
line-height: 32px;
} }
} }
.el-form-item-label { .el-form-item-label {
@ -16,20 +18,22 @@
vertical-align: middle; vertical-align: middle;
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
line-height: 30.5px;
line-height: 32px;
padding: 0 7px 0 7px; padding: 0 7px 0 7px;
} }
.el-button+.el-button {
margin-left: 0 !important;
.el-button {
// margin-left: 0 !important;
padding: 0 15px;
height: 32px;
} }
.el-select__caret.el-input__icon.el-icon-arrow-up{ .el-select__caret.el-input__icon.el-icon-arrow-up{
line-height: 30.5px;
line-height: 32px;
} }
.date-item { .date-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-bottom: 10px;
height: 30.5px !important;
// margin-bottom: 10px;
height: 32pxpx !important;
width: 230px !important; width: 230px !important;
} }
} }

135
src/assets/styles/index.scss
View File

@ -126,7 +126,11 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px 20px 45px 20px;
margin: 24px;
padding: 20px 24px;
background-color: #fff;
border-radius: 4px;
min-height: calc(100vh - 152px);
} }
.components-container { .components-container {
@ -186,19 +190,146 @@ aside {
} }
// start // start
.auth_code {
position: relative;
.login-code {
position: absolute;
right: 0;
top: 0;
width: 33%;
display: inline-block;
height: 40px;
img {
cursor: pointer;
vertical-align: middle
}
span {
position: relative;
display: block;
width: 100%;
font-size: 12px;
text-align: center;
line-height: 40px;
color: #33a1fa;
cursor: pointer;
&:before {
content: "";
position: absolute;
left: 2px;
top: 50%;
width: 1px;
height: 18px;
margin-top: -9px;
background-color: #e2e6ee;
}
}
}
}
.page_add { .page_add {
text-align: right; text-align: right;
.table_add{
padding: 0 24px;
height: 28px;
border-radius: 14px;
margin-top: 2px;
}
} }
.form_item { .form_item {
display: flex;
margin: 0 10px; margin: 0 10px;
span { span {
display: block;
line-height: 32px;
font-size: 14px; font-size: 14px;
margin-right: 10px; margin-right: 10px;
color: #666;
color: #333;
} }
} }
.list_table { .list_table {
margin-top: 20px; margin-top: 20px;
} }
.col_flex {
display: flex;
}
.el-table{
color: #333;
font-size: 14px;
.el-button{
padding: 5px 8px;
border: none !important;
}
.delt_btn {
background-color: #ee5747 !important;
}
.stop_btn{
background-color: #faaf45 !important;
}
.record_btn{
background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
}
}
.el-dialog__body{
.el-form-item{
margin-bottom: 24px;
}
.el-form-item__label{
line-height: 40px;
color: #333;
}
.el-input__inner{
height: 40px;
line-height: 40px;
}
.el-range-separator{
line-height: 34px;
}
}
.el-dialog__header{
position: relative;
padding: 20px 0;
margin: 0 24px;
border-bottom: 1px solid #eee;
&::before{
content: "";
position: absolute;
left: -18px;
top: 50%;
width: 44px;
height: 47px;
margin-top: -24px;
background: url(../images/t-zs.png) no-repeat left center;
background-size: 100% 100%;
}
.el-dialog__title{
color: #000;
}
.el-dialog__headerbtn{
font-size: 20px;
top: 50%;
right: 0;
transform: translateY(-50%);
}
}
.el-dialog__footer {
padding: 10px 0 40px 0;
text-align: center;
.dialog-footer{
.el-button{
font-size: 14px;
padding: 10px 36px;
}
.el-button--default{
color: #3a8aeb;
border-color: #3a8aeb;
margin-left: 40px;
}
}
}
.record_layer {
.el-dialog__body {
padding: 0 20px 30px 20px;
color: #333;
}
}
// end // end

36
src/assets/styles/login.scss
View File

@ -43,38 +43,4 @@
// height: 39px;width: 14px;margin-left: 2px; // height: 39px;width: 14px;margin-left: 2px;
// } // }
} }
.auth_code{
position: relative;
.login-code {
position: absolute;
right: 0;
top: 0;
width: 33%;
display: inline-block;
height: 40px;
img{
cursor: pointer;
vertical-align:middle
}
span{
position: relative;
display: block;
width: 100%;
font-size: 12px;
text-align: center;
line-height: 40px;
color: #33a1fa;
cursor: pointer;
&:before {
content: "";
position: absolute;
left: 2px;
top: 50%;
width: 1px;
height: 18px;
margin-top: -9px;
background-color: #e2e6ee;
}
}
}
}

4
src/assets/styles/sidebar.scss
View File

@ -5,6 +5,10 @@
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $sideBarWidth; margin-left: $sideBarWidth;
position: relative; position: relative;
background-color: #f5f5f5;
.el-button--primary {
background: #3a8aeb;
}
} }
.sidebar-container { .sidebar-container {

4
src/layout/index.vue
View File

@ -45,8 +45,8 @@ export default {
}), }),
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
// hideSidebar: !this.sidebar.opened,
// openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation, withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile' mobile: this.device === 'mobile'
} }

3
src/views/device/deviceConfig.vue
View File

@ -274,9 +274,6 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.col_flex {
display: flex;
}
.setting_btn{ .setting_btn{
margin-right: 10px; margin-right: 10px;
} }

78
src/views/device/index.vue
View File

@ -7,20 +7,43 @@
<div class="form_item"> <div class="form_item">
<span>状态</span> <span>状态</span>
<el-select v-model="query.state" size="small" class="filter-item" style="width: 120px"> <el-select v-model="query.state" size="small" class="filter-item" style="width: 120px">
<el-option v-for="item in stateData" :key="item.key" :label="item.name" :value="item.key" />
<el-option
v-for="item in stateData"
:key="item.key"
:label="item.name"
:value="item.key"
/>
</el-select> </el-select>
</div> </div>
<div class="form_item"> <div class="form_item">
<span>设备ID</span> <span>设备ID</span>
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-input
v-model="query.blurry"
clearable
size="small"
placeholder="请输入设备ID"
style="width: 200px"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</div> </div>
<div class="form_item"> <div class="form_item">
<span>设备名称</span> <span>设备名称</span>
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-input
v-model="query.blurry"
clearable
size="small"
placeholder="请输入设备名称"
style="width: 200px"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</div> </div>
<rrOperation /> <rrOperation />
</el-col> </el-col>
<el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button></el-col>
<el-col class="page_add" :span="4">
<el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button>
</el-col>
</el-row> </el-row>
</div> </div>
<el-row :gutter="15"> <el-row :gutter="15">
@ -46,7 +69,11 @@
<el-table-column prop="date" label="创建时间" align="center" width="200" /> <el-table-column prop="date" label="创建时间" align="center" width="200" />
<el-table-column fixed="right" label="操作" align="center"> <el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" />
<el-button
type="primary"
icon="el-icon-edit"
@click="edit(scope.$index, scope.row)"
/>
<el-button type="info" icon="el-icon-info" /> <el-button type="info" icon="el-icon-info" />
</template> </template>
</el-table-column> </el-table-column>
@ -58,13 +85,32 @@
</el-row> </el-row>
<!-- 编辑设备 --> <!-- 编辑设备 -->
<div class="layer"> <div class="layer">
<el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="addFromVisible" width="400px">
<el-dialog
:title="dialogTitle"
:close-on-click-modal="false"
:visible.sync="addFromVisible"
width="400px"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="设备账号" prop="account"><el-input v-model="form.account" autocomplete="off" disabled style="width: 200px" /></el-form-item>
<el-form-item label="设备名称" prop="name"><el-input v-model="form.name" style="width: 200px" /></el-form-item>
<el-form-item label="设备账号" prop="account">
<el-input v-model="form.account" autocomplete="off" disabled style="width: 200px" />
</el-form-item>
<el-form-item label="设备名称" prop="name">
<el-input v-model="form.name" style="width: 200px" />
</el-form-item>
<el-form-item label="设备方向" prop="orientation"> <el-form-item label="设备方向" prop="orientation">
<el-select v-model="form.orientation" size="small" class="filter-item" style="width: 200px">
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
<el-select
v-model="form.orientation"
size="small"
class="filter-item"
style="width: 200px"
>
<el-option
v-for="item in deviceData"
:key="item.key"
:label="item.name"
:value="item.key"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -76,12 +122,17 @@
</div> </div>
<div class="layer"> <div class="layer">
<el-dialog title="发布内容" :close-on-click-modal="false" :visible.sync="contentVisible" width="720px">
<el-dialog
title="发布内容"
:close-on-click-modal="false"
:visible.sync="contentVisible"
width="720px"
>
<div class="content_warp"> <div class="content_warp">
<h4>图片</h4> <h4>图片</h4>
<ul class="item_list"> <ul class="item_list">
<li class="item_cont"> <li class="item_cont">
<img src="../../assets/images/background.jpg" alt="">
<img src="../../assets/images/background.jpg" alt />
<div class="item_info"> <div class="item_info">
<div class="item_format"> <div class="item_format">
<span class="item_type">JPG</span> <span class="item_type">JPG</span>
@ -175,9 +226,6 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.col_flex {
display: flex;
}
.layer { .layer {
::v-deep .el-dialog__body { ::v-deep .el-dialog__body {
padding: 0 0 30px 20px; padding: 0 0 30px 20px;

43
src/views/login.vue
View File

@ -2,15 +2,37 @@
<div class="login"> <div class="login">
<div class="login_bg" /> <div class="login_bg" />
<div class="login_cont"> <div class="login_cont">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login_form">
<img src="../assets/images/login/logo.png" class="login_logo" alt="">
<el-form-item prop="phone"><el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" /></el-form-item>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
label-position="left"
label-width="0px"
class="login_form"
>
<img src="../assets/images/login/logo.png" class="login_logo" alt />
<el-form-item prop="phone">
<el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" />
</el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin" />
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="请输入密码"
@keyup.enter.native="handleLogin"
/>
</el-form-item> </el-form-item>
<el-form-item prop="code" class="auth_code"> <el-form-item prop="code" class="auth_code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin" />
<div class="login-code"><img :src="codeUrl" @click="getCode"></div>
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="请输入验证码"
@keyup.enter.native="handleLogin"
/>
<div class="login-code">
<img :src="codeUrl" @click="getCode" />
</div>
</el-form-item> </el-form-item>
<el-form-item prop="agree" class="login_checked login_agree" style="line-height: 0;"> <el-form-item prop="agree" class="login_checked login_agree" style="line-height: 0;">
<el-checkbox v-model="loginForm.agree"> <el-checkbox v-model="loginForm.agree">
@ -19,7 +41,12 @@
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
<el-form-item class="login_btn"> <el-form-item class="login_btn">
<el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
<el-button
:loading="loading"
size="medium"
type="primary"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
@ -187,7 +214,7 @@ export default {
} }
</style> </style>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
@import '~@/assets/styles/login.scss';
@import "~@/assets/styles/login.scss";
.login_checked { .login_checked {
.el-checkbox__label { .el-checkbox__label {
font-size: 12px; font-size: 12px;

115
src/views/system/dept/index.vue
View File

@ -2,16 +2,49 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<el-col :span="20">
<el-row type="flex">
<el-col :span="20" class="col_flex">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="机构名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-input v-model="query.blurry" clearable size="small" placeholder="管理员名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<div class="form_item">
<span>机构名称：</span>
<el-input
v-model="query.blurry"
clearable
size="small"
placeholder="机构名称"
style="width: 200px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</div>
<div class="form_item">
<span>管理员名称：</span>
<el-input
v-model="query.blurry"
clearable
size="small"
placeholder="管理员名称"
style="width: 200px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</div>
<rrOperation /> <rrOperation />
</el-col> </el-col>
<el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button></el-col>
<el-col class="page_add" :span="4">
<el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
</el-col>
</el-row>
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="addDialogVisible" :title="crud.status.title" width="620px">
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="addDialogVisible"
title="新增"
width="620px"
>
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px"> <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="机构名称" prop="name"> <el-form-item label="机构名称" prop="name">
<el-input v-model="form.name" style="width: 360px;" /> <el-input v-model="form.name" style="width: 360px;" />
@ -29,28 +62,41 @@
</el-form-item> </el-form-item>
<el-form-item label="当前版本" prop="versions"> <el-form-item label="当前版本" prop="versions">
<el-select v-model="form.versions" placeholder="请选择" style="width: 360px;"> <el-select v-model="form.versions" placeholder="请选择" style="width: 360px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">新增</el-button>
<el-button round @click="crud.cancelCU">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 记录 --> <!-- 记录 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="recordVisible" :title="crud.status.title">
<el-table :data="recordData">
<el-table-column property="name" label="操作人" />
<el-table-column property="permissionType" label="角色权限" />
<el-table-column property="account" label="登录账号" />
<el-table-column property="type" label="操作类型" />
<el-table-column property="date" label="操作时间" />
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="recordVisible"
title="记录"
class="record_layer"
width="750px"
>
<el-table :data="recordData" :header-cell-style="{ color: '#333' }">
<el-table-column align="center" property="name" label="操作人" />
<el-table-column align="center" property="permissionType" label="角色权限" />
<el-table-column align="center" property="account" label="登录账号" />
<el-table-column align="center" property="type" label="操作类型" />
<el-table-column align="center" property="date" label="操作时间" />
</el-table> </el-table>
</el-dialog> </el-dialog>
<!-- list -->
<el-row :gutter="15"> <el-row :gutter="15">
<el-col> <el-col>
<el-card class="box-card" shadow="never">
<el-table <el-table
ref="table" ref="table"
v-loading="crud.loading" v-loading="crud.loading"
@ -59,6 +105,7 @@
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:data="tableData" :data="tableData"
row-key="id" row-key="id"
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
@select="crud.selectChange" @select="crud.selectChange"
@select-all="crud.selectAllChange" @select-all="crud.selectAllChange"
@selection-change="crud.selectionChangeHandler" @selection-change="crud.selectionChangeHandler"
@ -77,15 +124,26 @@
<el-table-column prop="indate" align="center" label="有效时间" /> <el-table-column prop="indate" align="center" label="有效时间" />
<el-table-column label="操作" width="220px" align="center" fixed="right"> <el-table-column label="操作" width="220px" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch v-model="scope.row.off" active-color="#13ce66" inactive-color="#ff4949" style="margin-right: 10px;" />
<el-button type="primary" icon="el-icon-edit" @click="editFormData(scope.$index, scope.row)" />
<el-button type="info" icon="el-icon-info" @click="handleRecord(scope.$index, scope.row)" />
<el-button
type="primary"
class="edit_btn"
@click="editFormData(scope.$index, scope.row)"
>编辑</el-button>
<el-button
type="primary"
class="stop_btn"
@click="editFormData(scope.$index, scope.row)"
>停用</el-button>
<el-button
type="info"
class="record_btn"
@click="handleRecord(scope.$index, scope.row)"
>记录</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<pagination /> <pagination />
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -293,4 +351,21 @@ export default {
::v-deep .el-input-number .el-input__inner { ::v-deep .el-input-number .el-input__inner {
text-align: left; text-align: left;
} }
::v-deep .el-dialog__body {
.el-form-item {
margin-bottom: 24px;
}
.el-form-item__label {
line-height: 32px;
color: #333;
}
.el-input__inner {
height: 32px;
line-height: 32px;
}
.el-range-separator {
line-height: 24px;
}
}
</style> </style>

66
src/views/system/menu/index.vue
View File

@ -3,38 +3,78 @@
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<el-row type="flex"> <el-row type="flex">
<el-col :span="20">
<el-col :span="20" class="col_flex">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="所属菜单" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<div class="form_item">
<span>所属菜单：</span>
<el-input
v-model="query.blurry"
clearable
size="small"
placeholder="所属菜单"
style="width: 200px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</div>
<div class="form_item">
<span>时间：</span>
<date-range-picker v-model="query.createTime" class="date-item" /> <date-range-picker v-model="query.createTime" class="date-item" />
</div>
<rrOperation /> <rrOperation />
</el-col> </el-col>
<el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button></el-col>
<el-col class="page_add" :span="4">
<el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
</el-col>
</el-row> </el-row>
</div> </div>
<!--表单渲染--> <!--表单渲染-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="addDialogVisible" :title="crud.status.title" width="420px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="addDialogVisible"
title="新增菜单"
width="580px"
>
<el-form
ref="form"
:inline="true"
:model="form"
:rules="rules"
size="small"
label-width="80px"
>
<el-form-item label="所属菜单" prop="title"> <el-form-item label="所属菜单" prop="title">
<el-select v-model="form.title" placeholder="请选择" style="width: 260px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
<el-select v-model="form.title" placeholder="请选择" style="width: 336px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="新增权限" prop="permission"> <el-form-item label="新增权限" prop="permission">
<el-input v-model="form.permission" :disabled="form.iframe" placeholder="新增权限" style="width: 260px;" />
<el-input
v-model="form.permission"
:disabled="form.iframe"
placeholder="新增权限"
style="width: 336px;"
/>
</el-form-item> </el-form-item>
<el-form-item label="路由地址" prop="path"> <el-form-item label="路由地址" prop="path">
<el-input v-model="form.path" placeholder="路由地址" style="width: 260px;" />
<el-input v-model="form.path" placeholder="路由地址" style="width: 336px;" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">添加</el-button>
<el-button type="text" @click="crud.cancelCU">关闭</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">添加</el-button>
<el-button round @click="crud.cancelCU">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- table -->
<el-row :gutter="15"> <el-row :gutter="15">
<el-col> <el-col>
<el-card class="box-card" shadow="never">
<el-table <el-table
ref="table" ref="table"
v-loading="crud.loading" v-loading="crud.loading"
@ -42,6 +82,7 @@
:load="getMenus" :load="getMenus"
:data="tableData" :data="tableData"
row-key="id" row-key="id"
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
@select="crud.selectChange" @select="crud.selectChange"
@select-all="crud.selectAllChange" @select-all="crud.selectAllChange"
@selection-change="crud.selectionChangeHandler" @selection-change="crud.selectionChangeHandler"
@ -52,7 +93,6 @@
<el-table-column prop="operationTime" label="操作时间" align="center" /> <el-table-column prop="operationTime" label="操作时间" align="center" />
<el-table-column prop="operationName" label="操作人" align="center" /> <el-table-column prop="operationName" label="操作人" align="center" />
</el-table> </el-table>
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>

142
src/views/system/role/index.vue
View File

@ -3,36 +3,89 @@
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<el-row type="flex"> <el-row type="flex">
<el-col :span="20">
<el-col :span="20" class="col_flex">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="角色名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<div class="form_item">
<span>角色名称：</span>
<el-input
v-model="query.blurry"
clearable
size="small"
placeholder="角色名称"
style="width: 200px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</div>
<rrOperation /> <rrOperation />
</el-col> </el-col>
<el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="roleFormVisible = true">新增</el-button></el-col>
<el-col class="page_add" :span="4">
<el-button class="table_add" type="primary" round @click="roleFormVisible = true">新增</el-button>
</el-col>
</el-row> </el-row>
</div> </div>
<!-- 角色新增-表单 --> <!-- 角色新增-表单 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="roleFormVisible" :title="crud.status.title" width="620px" top="20px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="角色名称" prop="roleName"><el-input v-model="form.roleName" style="width: 380px;" /></el-form-item>
<el-form-item label="描述" prop="description"><el-input v-model="form.description" style="width: 380px;" /></el-form-item>
<el-form-item v-for="(item, index) in roleTree" :key="index" :label="item.name" class="press_form">
<el-checkbox v-model="item.isCheck" :indeterminate="item.isIndeterminate" class="check_all" @change="handleCheckAllChange(index, $event)">全选</el-checkbox>
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="roleFormVisible"
:title="crud.status.title"
width="960px"
top="20px"
>
<el-form
ref="form"
:inline="true"
:model="form"
:rules="rules"
size="small"
label-width="80px"
>
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" style="width: 380px;" />
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="form.description" style="width: 380px;" />
</el-form-item>
<el-form-item
v-for="(item, index) in roleTree"
:key="index"
:label="item.name"
class="press_form"
>
<el-checkbox
v-model="item.isCheck"
:indeterminate="item.isIndeterminate"
class="check_all"
@change="handleCheckAllChange(index, $event)"
>全选</el-checkbox>
<div class="check_list"> <div class="check_list">
<el-checkbox v-for="(items, i) in item.children" :key="i" v-model="items.isCheck" :label="items.name" @change="handleCheckedCitiesChange(index, items.Key, $event)">
{{ items.name }}
</el-checkbox>
<el-checkbox
v-for="(items, i) in item.children"
:key="i"
v-model="items.isCheck"
:label="items.name"
@change="handleCheckedCitiesChange(index, items.Key, $event)"
>{{ items.name }}</el-checkbox>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">新增</el-button>
<el-button round @click="crud.cancelCU">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 记录 --> <!-- 记录 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="recordVisible" :title="crud.status.title">
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="recordVisible"
title="记录"
class="record_layer"
width="750px"
>
<el-table :data="recordData"> <el-table :data="recordData">
<el-table-column property="name" label="操作人" /> <el-table-column property="name" label="操作人" />
<el-table-column property="permissionType" label="角色权限" /> <el-table-column property="permissionType" label="角色权限" />
@ -41,37 +94,48 @@
<el-table-column property="date" label="操作时间" /> <el-table-column property="date" label="操作时间" />
</el-table> </el-table>
</el-dialog> </el-dialog>
<el-row :gutter="15">
<!--角色管理--> <!--角色管理-->
<el-row :gutter="15">
<el-col> <el-col>
<el-card class="box-card" shadow="never">
<el-table <el-table
ref="table" ref="table"
v-loading="crud.loading" v-loading="crud.loading"
highlight-current-row highlight-current-row
style="width: 100%;" style="width: 100%;"
:data="roleData" :data="roleData"
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
@selection-change="crud.selectionChangeHandler" @selection-change="crud.selectionChangeHandler"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
> >
<el-table-column :selectable="checkboxT" align="center" type="selection" width="55" /> <el-table-column :selectable="checkboxT" align="center" type="selection" width="55" />
<el-table-column align="center" prop="roleName" label="角色名称" /> <el-table-column align="center" prop="roleName" label="角色名称" />
<el-table-column align="center" prop="description" label="描述" /> <el-table-column align="center" prop="description" label="描述" />
<el-table-column header-align="center" width="600" prop="permissionList" label="相关权限">
<el-table-column header-align="center" width="700" prop="permissionList" label="相关权限">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-for="tag in scope.row.permissionList" :key="tag.name" type="primary">{{ tag.name }}</el-tag>
<el-tag
v-for="tag in scope.row.permissionList"
:key="tag.name"
type="primary"
>{{ tag.name }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="140" align="center" fixed="right"> <el-table-column label="操作" width="140" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="editFormData(scope.$index, scope.row)" />
<el-button type="info" icon="el-icon-info" @click="handleRecord(scope.$index, scope.row)" />
<el-button
type="primary"
class="edit_btn"
@click="editFormData(scope.$index, scope.row)"
>编辑</el-button>
<el-button
type="info"
class="record_btn"
@click="handleRecord(scope.$index, scope.row)"
>记录</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<pagination /> <pagination />
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -232,12 +296,42 @@ export default {
border: 0; border: 0;
padding: 0; padding: 0;
} }
::v-deep .el-dialog__body {
.el-form-item {
margin-bottom: 24px;
}
.el-form-item__label {
line-height: 32px;
color: #333;
}
.el-input__inner {
height: 32px;
line-height: 32px;
}
.el-range-separator {
line-height: 24px;
}
}
.el-tag { .el-tag {
height: 26px;
line-height: 26px;
margin: 5px 10px 5px 0; margin: 5px 10px 5px 0;
background: #cbe3ff;
color: #3a8aeb;
border: none;
} }
.press_form { .press_form {
display: flex; display: flex;
&:last-child {
.check_list {
width: 590px;
.el-checkbox {
&:nth-child(1) {
display: block;
}
}
}
}
} }
.press_form ::v-deep .el-form-item__content { .press_form ::v-deep .el-form-item__content {
display: flex; display: flex;

104
src/views/system/user/index.vue
View File

@ -3,8 +3,10 @@
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<el-row type="flex"> <el-row type="flex">
<el-col :span="20">
<el-col :span="20" class="col_flex">
<!-- 搜索 --> <!-- 搜索 -->
<div class="form_item">
<span>角色名称：</span>
<el-input <el-input
v-model="query.blurry" v-model="query.blurry"
clearable clearable
@ -14,6 +16,9 @@
class="filter-item" class="filter-item"
@keyup.enter.native="crud.toQuery" @keyup.enter.native="crud.toQuery"
/> />
</div>
<div class="form_item">
<span>管理员名称：</span>
<el-input <el-input
v-model="query.blurry" v-model="query.blurry"
clearable clearable
@ -23,15 +28,23 @@
class="filter-item" class="filter-item"
@keyup.enter.native="crud.toQuery" @keyup.enter.native="crud.toQuery"
/> />
</div>
<rrOperation /> <rrOperation />
</el-col> </el-col>
<el-col class="page_add" :span="4"> <el-col class="page_add" :span="4">
<el-button class="table_add" type="primary" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button>
<el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!--新增用户--> <!--新增用户-->
<el-dialog append-to-body :close-on-click-modal="false" :show-close="false" :before-close="crud.cancelCU" :visible.sync="addDialogVisible" title="新增" width="400px">
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="addDialogVisible"
title="新增"
width="576px"
>
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px"> <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
<el-form-item <el-form-item
label="登录账号" label="登录账号"
@ -40,7 +53,7 @@
{ required: true, message: '请输入登录账号', trigger: 'blur' } { required: true, message: '请输入登录账号', trigger: 'blur' }
]" ]"
> >
<el-input v-model="form.account" style="width: 200px" />
<el-input v-model="form.account" style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="管理员名称" label="管理员名称"
@ -50,7 +63,7 @@
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
]" ]"
> >
<el-input v-model="form.nickName" style="width: 200px" />
<el-input v-model="form.nickName" style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="管理员角色" label="管理员角色"
@ -59,7 +72,7 @@
{ required: true, message: '请选择管理员角色', trigger: 'change' } { required: true, message: '请选择管理员角色', trigger: 'change' }
]" ]"
> >
<el-select v-model="form.roles" placeholder="请选择管理员角色">
<el-select v-model="form.roles" placeholder="请选择管理员角色" style="width: 336px">
<el-option label="机构超级管理员" value="1" /> <el-option label="机构超级管理员" value="1" />
<el-option label="普通用户" value="2" /> <el-option label="普通用户" value="2" />
</el-select> </el-select>
@ -71,77 +84,87 @@
{ required: true, trigger: 'change', message: '请选择管理员状态' } { required: true, trigger: 'change', message: '请选择管理员状态' }
]" ]"
> >
<el-select v-model="form.enabled" placeholder="请选择管理员状态">
<el-select v-model="form.enabled" placeholder="请选择管理员状态" style="width: 336px">
<el-option label="启用" value="1" /> <el-option label="启用" value="1" />
<el-option label="关闭" value="0" /> <el-option label="关闭" value="0" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">关闭</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
<el-button round @click="crud.cancelCU">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 编辑用户 --> <!-- 编辑用户 -->
<el-dialog append-to-body :close-on-click-modal="false" :show-close="false" :before-close="crud.cancelCU" :visible.sync="editDialogVisible" title="编辑" width="480px">
<el-form ref="form" :inline="true" :model="editForm" :rules="rules" size="small" label-width="100px">
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="editDialogVisible"
title="编辑"
width="576px"
>
<el-form
ref="form"
:inline="true"
:model="editForm"
:rules="rules"
size="small"
label-width="100px"
>
<el-form-item label="管理员名称" prop="nickName"> <el-form-item label="管理员名称" prop="nickName">
<el-input v-model="editForm.nickName" style="width: 200px" />
<el-input v-model="editForm.nickName" style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item label="管理员角色" prop="roles"> <el-form-item label="管理员角色" prop="roles">
<el-input v-model="editForm.roles" disabled style="width: 200px" />
<el-input v-model="editForm.roles" disabled style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item label="机构名称" prop="orgName"> <el-form-item label="机构名称" prop="orgName">
<el-input v-model="editForm.orgName" disabled style="width: 200px" />
<el-input v-model="editForm.orgName" disabled style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item label="更改手机号" prop="phone"> <el-form-item label="更改手机号" prop="phone">
<el-input v-model.number="editForm.phone" style="width: 200px" />
<el-input v-model.number="editForm.phone" style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item label="获取验证码" prop="code">
<el-input v-model.number="editForm.code" style="width: 200px" />
<el-button class="edit_code" type="primary" :disabled="disabledSendCode" @click="countdown()">{{ verification }}</el-button>
<el-form-item label="验证码" prop="code" class="auth_code">
<el-input v-model.number="editForm.code" style="width: 336px" />
<div class="login-code">
<span @click="countdown()">{{ verification }}</span>
</div>
</el-form-item> </el-form-item>
<el-form-item label="登录密码" prop="password"> <el-form-item label="登录密码" prop="password">
<el-input v-model="editForm.password" style="width: 200px" />
<el-input v-model="editForm.password" style="width: 336px" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">关闭</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
<el-button round @click="crud.cancelCU">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--表格渲染--> <!--表格渲染-->
<el-row :gutter="15"> <el-row :gutter="15">
<el-col> <el-col>
<el-card class="box-card" shadow="never">
<!-- :data="crud.data" --> <!-- :data="crud.data" -->
<el-table ref="table" v-loading="crud.loading" :data="tableData" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table
ref="table"
v-loading="crud.loading"
:data="tableData"
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
style="width: 100%;"
@selection-change="crud.selectionChangeHandler"
>
<el-table-column :selectable="checkboxT" type="selection" width="55" /> <el-table-column :selectable="checkboxT" type="selection" width="55" />
<el-table-column prop="account" width="135" align="center" label="登录账号" /> <el-table-column prop="account" width="135" align="center" label="登录账号" />
<el-table-column prop="nickName" align="center" label="管理员名称" /> <el-table-column prop="nickName" align="center" label="管理员名称" />
<el-table-column prop="roles" align="center" label="管理角色" /> <el-table-column prop="roles" align="center" label="管理角色" />
<el-table-column prop="orgName" align="center" label="机构名称" /> <el-table-column prop="orgName" align="center" label="机构名称" />
<el-table-column prop="phone" align="center" label="手机号码" /> <el-table-column prop="phone" align="center" label="手机号码" />
</el-table-column>
<el-table-column label="状态" align="center" prop="enabled"> <el-table-column label="状态" align="center" prop="enabled">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch
v-model="scope.row.enabled"
:disabled="user.id === scope.row.id"
active-color="#409EFF"
inactive-color="#F56C6C"
@change="changeEnabled(scope.row, scope.row.enabled)"
/>
<div>{{ scope.row.enabled == 0 ? '启用' : '关闭' }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" width="135" label="创建日期" /> <el-table-column prop="createTime" width="135" label="创建日期" />
<!-- v-if="checkPer(['admin','user:edit','user:del'])" --> <!-- v-if="checkPer(['admin','user:edit','user:del'])" -->
<el-table-column
label="操作"
width="140"
align="center"
fixed="right"
>
<el-table-column label="操作" width="180" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <udOperation <!-- <udOperation
:data="scope.row" :data="scope.row"
@ -150,16 +173,15 @@
/>--> />-->
<el-button <el-button
type="primary" type="primary"
icon="el-icon-edit"
class="edit_btn"
@click="editFormData(scope.$index, scope.row)" @click="editFormData(scope.$index, scope.row)"
/>
<el-button type="danger" icon="el-icon-delete" />
>编辑</el-button>
<el-button type="danger" class="delt_btn">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<pagination /> <pagination />
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>

Write Preview
Loading…
Cancel
Save