From e3a8cfa1f235815519d281a2f74590c432818a26 Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期六, 12 十一月 2022 09:36:48 +0800 Subject: [PATCH] 123 --- src/views/AuthorizationManagement/menuRoleAuthorization.vue | 386 +++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 261 insertions(+), 125 deletions(-) diff --git a/src/views/AuthorizationManagement/menuRoleAuthorization.vue b/src/views/AuthorizationManagement/menuRoleAuthorization.vue index 92bfac7..36f9d76 100644 --- a/src/views/AuthorizationManagement/menuRoleAuthorization.vue +++ b/src/views/AuthorizationManagement/menuRoleAuthorization.vue @@ -1,16 +1,15 @@ <template> <div class="menuSettings_box"> - <div class="menuSettings_tree"> - <My-bread - :list="[ - `${$t('operatManage.operatManage')}`, + <My-bread + :list="[ + `${$t('operatManage.operatManage')}`, - `${$t('operatManage.MenuRoleAuthorization')}`, - ]" - ></My-bread> - - <el-divider /> - <div class="menuTreeBox"> + `${$t('operatManage.MenuRoleAuthorization')}`, + ]" + ></My-bread> + <el-divider /> + <div class="menuTreeBox"> + <div class="left_tree"> <el-tree :data="depList" :props="defaultProps" @@ -24,12 +23,91 @@ > </el-tree> </div> + <div class="right_menu"> + <div + style=" + font-size: 14px; + color: #409eff; + line-height: 1; + cursor: text; + position: relative; + top: 5px; + margin-left: 10px; + display: flex; + align-items: center; + " + > + <span> + {{ + $t('operatManage.UserRoleAuthorizationObj.PermissionTable') + }}</span + > + <div class="btn" style="margin-left: auto"> + <el-button + v-if="menuStatus.insert" + type="primary" + icon="el-icon-circle-plus-outline" + size="small" + :disabled="roleid == null ? true : false" + @click="adduser" + style="background: #409eff" + >{{ + $t('operatManage.UserRoleAuthorizationObj.Added') + }}</el-button + > + <el-button + v-if="menuStatus.delete" + type="danger" + icon="el-icon-delete" + size="small" + @click="deletesUser" + :disabled="roleid == null ? true : false" + >{{ + $t('operatManage.UserRoleAuthorizationObj.delete') + }}</el-button + > + </div> + </div> + <el-divider class="divider" /> + <el-table + :data="tableData" + style="width: 100%" + height="80%" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55"> </el-table-column> + <el-table-column + align="center" + type="index" + :label="$t('dataManage.styleObj.index')" + /> + <el-table-column + prop="authName" + :label="$t('operatManage.UserRoleAuthorizationObj.name')" + > + </el-table-column> + </el-table> + + <div + style="margin-top: 20px; text-align: center" + class="pagination_box" + > + <el-pagination + @size-change="userhandleSizeChange" + @current-change="userhandleCurrentChange" + :current-page="userlistData.pageIndex" + :page-sizes="[10, 20, 30, 40]" + :page-size="userlistData.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="usercount" + > + </el-pagination> + </div> + </div> </div> - <div class="menuSettings"> - <!-- <div class="title_box"> - <h4>璇︾粏淇℃伅</h4> - </div> --> + <!-- <div class="menuSettings"> + <div style=" font-size: 14px; @@ -56,6 +134,7 @@ size="small" :disabled="roleid == null ? true : false" @click="adduser" + style="background: #409eff" >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button > <el-button @@ -71,42 +150,8 @@ </div> <el-divider class="divider" /> - <el-table - :data="tableData" - stripe - style="width: 100%" - height="85%" - @selection-change="handleSelectionChange" - :header-cell-style="{ - background: 'transparent', - }" - > - <el-table-column type="selection" width="55"> </el-table-column> - <el-table-column - align="center" - type="index" - :label="$t('dataManage.styleObj.index')" - /> - <el-table-column - prop="authName" - :label="$t('operatManage.UserRoleAuthorizationObj.name')" - > - </el-table-column> - </el-table> - <div style="margin-top: 20px; text-align: center" class="pagination_box"> - <el-pagination - @size-change="userhandleSizeChange" - @current-change="userhandleCurrentChange" - :current-page="userlistData.pageIndex" - :page-sizes="[10, 20, 30, 40]" - :page-size="userlistData.pageSize" - layout="total, sizes, prev, pager, next, jumper" - :total="usercount" - > - </el-pagination> - </div> - </div> + </div> --> <el-dialog :title="$t('operatManage.UserRoleAuthorizationObj.Added')" :visible.sync="dialogTableVisible" @@ -381,94 +426,185 @@ <style lang="less" scoped> //@import url(); 寮曞叆鍏叡css绫� .menuSettings_box { - // background: rgb(240, 242, 245); - border-radius: 10px; - height: 100%; - padding: 10px; - box-sizing: border-box; - display: flex; - .menuSettings_tree { + width: 97%; + height: 81%; + + position: absolute; + .menuTreeBox { + width: 100%; + height: 91%; position: relative; - width: 30%; - height: 100%; - background: rgb(240, 242, 245); - padding: 20px; - border-radius: 10px; - box-sizing: border-box; - overflow: auto; - .saveBtn { - position: absolute; - left: 250px; - top: 23px; - } - .menuTreeBox { - height: 90%; - overflow: auto; - .el-tree { + + .left_tree { + width: 30%; + height: 94%; + padding: 20px; + border: 1px solid rgb(202, 201, 204); + border-radius: 5px; + float: left; + overflow-y: auto; + // 鏇存敼鎸囨爣鏍戝浘鏍囬鑹� + /deep/ .el-tree .el-icon-caret-right:before { + color: white; /** 杩欓噷鏄淇敼鍥炬爣鐨勯鑹� **/ + } + /deep/ .el-tree { + color: white; /** 杩欓噷鏄淇敼鍥炬爣鐨勯鑹� **/ background: transparent; - font-size: 15px; - font-family: Microsoft YaHei; - font-weight: 400; - color: #000000; - // /deep/ .el-tree-node__label { - // font-size: 18px; - // } - /deep/ .el-tree-node { - padding-top: 10px; - // padding-bottom: 10px; - } - /deep/ .el-tree-node:focus > .el-tree-node__content { - background-color: #b9b9b9; - } - /deep/ .el-tree-node__content:hover { - background-color: rgb(153, 153, 153); - } - .btnBox { - margin-left: 5px; - .el-button + .el-button { - margin-left: 5px; - } + } + /deep/.el-tree-node__content { + &:hover { + background-color: rgba(255, 255, 255, 0.3) !important; } } + /deep/.el-tree-node.is-current > .el-tree-node__content { + background-color: rgba(255, 255, 255, 0.3) !important; + color: #409eff; + } } - } - .menuSettings { - width: 70%; - border-radius: 10px; - background: rgb(240, 242, 245); - margin-left: 10px; - height: 100%; - padding: 20px; - box-sizing: border-box; - .title_box { - background: #fff; - padding: 10px; - margin-bottom: 24px; - display: flex; - border-radius: 10px; + .right_menu { + width: 63%; + height: 94%; + padding: 20px; border: 1px solid rgb(202, 201, 204); - box-sizing: border-box; + border-radius: 5px; + float: right; } } - .table_box { - padding: 10px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - overflow: auto; - height: 85%; + /*閲岄潰鐨勪唬鐮佸彲浠ユ牴鎹嚜宸遍渶姹傚幓杩涜鏇存敼*/ + /* 璁剧疆婊氬姩鏉$殑鏍峰紡 */ + ::-webkit-scrollbar { + width: 4px; } - .divider { - margin-top: 8px; + /* 婊氬姩妲� */ + ::-webkit-scrollbar-track { + -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3); + border-radius: 10px; + } + /* 婊氬姩鏉℃粦鍧� */ + ::-webkit-scrollbar-thumb { + border-radius: 10px; + background: #8b8b8b; + -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); + } + ::-webkit-scrollbar-thumb:window-inactive { + background: #8b8b8b; + height: 289px; + } + .pagination_box { + /deep/.el-input__inner { + background-color: transparent !important; + border: 1px solid; + color: white; + } + /deep/.el-pagination__total { + color: white; + } + /deep/.el-pagination__jump { + color: white; + } + /deep/.el-pager li.active { + color: #1890ff; + } + /deep/.el-pager li { + color: white; + background: transparent; + } + /deep/.el-pager li { + color: white; + } + /deep/.btn-prev { + background: transparent; + } + /deep/.btn-next { + background: transparent; + } + } + /deep/ .el-dialog { + background: #303030; + } + /deep/.el-range-editor.is-active, + .el-range-editor.is-active:hover, + .el-select .el-input.is-focus .el-input__inner { + border: 1px solid; + } + /deep/.el-dialog__title { + color: white; + } + /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/ + /deep/ .el-table { + background-color: transparent; + + th, + td { + background-color: transparent; + } + .el-table__expanded-cell { + background-color: transparent !important; + } + + // 琛ㄥご鑳屾櫙鑹� + th.el-table__cell { + background-color: #303030; + color: #fff; + } + tr > td { + background-color: #303030; + color: #fff; + } + + // hover鏁堟灉 + tr:hover > td { + background-color: rgba(255, 255, 255, 0.3) !important; + } + + tbody tr:hover { + background-color: rgba(255, 255, 255, 0.3) !important; + // text-align: center; + } + + // 婊氬姩鏉″楂� + .el-table__body-wrapper::-webkit-scrollbar { + width: 5px; + height: 5px; + } + + .el-table__body-wrapper::-webkit-scrollbar { + width: 5px; + /*婊氬姩鏉″搴�*/ + height: 10px; + /*婊氬姩鏉¢珮搴�*/ + } + /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-track { + box-shadow: 0px 1px 3px #216fe6 inset; + /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/ + border-radius: 10px; + } + + /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-thumb { + box-shadow: 0px 1px 3px #216fe6 inset; + border-radius: 6px; + background-color: #216fe6; + } } } -.el-table, -.el-table /deep/ .el-table__expanded-cell { - background-color: transparent; +</style> +<style> +.el-select-dropdown { + background: #303030 !important; + border-color: 1px solid !important; } -.el-table /deep/ th, -.el-table /deep/ tr { - background-color: transparent; +.el-scrollbar__wrap { + margin-bottom: -20px !important; + margin-right: -20px !important; +} +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background: rgba(255, 255, 255, 0.3) !important; +} +.el-select-dropdown__item { + color: white !important; } </style> -- Gitblit v1.9.3