| | |
| | | <template> |
| | | <div class="menuSettings_box"> |
| | | <div class="menuSettings_tree"> |
| | | <div class="content_box subpage_Div"> |
| | | <My-bread :list="[ |
| | | `${$t('operatManage.operatManage')}`, |
| | | `${$t('operatManage.RoleResAuthorization')}`, |
| | | ]"></My-bread> |
| | | <el-divider /> |
| | | <div style="height: 90%; overflow-y: auto"> |
| | | <el-tree |
| | | :data="depList" |
| | | :props="defaultProps" |
| | | :show-checkbox="false" |
| | | :check-on-click-node="true" |
| | | :check-strictly="true" |
| | | node-key="id" |
| | | @check="treeCheck" |
| | | ref="treeForm" |
| | | :default-expanded-keys="[1]" |
| | | > |
| | | </el-tree> |
| | | </div> |
| | | </div> |
| | | <div class="content_box subpage_Div"> |
| | | <div style=" |
| | | font-size: 14px; |
| | | color: #216fe6; |
| | | line-height: 1; |
| | | cursor: text; |
| | | position: relative; |
| | | top: 10px; |
| | | margin-left: 10px; |
| | | "> |
| | | {{ $t('operatManage.UserRoleAuthorizationObj.RoleTable') }} |
| | | </div> |
| | | <el-divider /> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | @row-click="singleElection" |
| | | highlight-current-row |
| | | height="calc(100% - 124px)" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | width="55" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-radio |
| | | class="radio" |
| | | v-model="templateSelection" |
| | | :label="scope.row.id" |
| | | > </el-radio> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | | :label="$t('dataManage.styleObj.index')" |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.name')" |
| | | > |
| | | </el-table-column> |
| | | </el-table> |
| | | <div |
| | | style="text-align: center; margin-top: 20px" |
| | | class="pagination_box" |
| | | > |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="listData.pageIndex" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="userlistData.pageSize" |
| | | layout="prev, pager, next" |
| | | :total="count" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | <div class="content_box subpage_Div"> |
| | | <div style=" |
| | | font-size: 14px; |
| | | color: #216fe6; |
| | | line-height: 1; |
| | | cursor: text; |
| | | position: relative; |
| | | top: 5px; |
| | | margin-left: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | "> |
| | | <span> |
| | | {{ $t('operatManage.UserRoleAuthorizationObj.ResTable') }}</span> |
| | | <div |
| | | class="btn" |
| | | style="margin-left: auto" |
| | | > |
| | | <el-button |
| | | v-if="menuStatus.insert" |
| | | type="success" |
| | | icon="el-icon-circle-plus-outline" |
| | | size="small" |
| | | :disabled="roleid == null ? true : false" |
| | | @click="adduser" |
| | | >{{ |
| | | $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="usertableData" |
| | | |
| | | style="width: 100%" |
| | | height="calc(100% - 124px)" |
| | | @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="resName" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.name')" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="server" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.server')" |
| | | > |
| | | </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, 50, 100]" |
| | | :page-size="userlistData.pageSize" |
| | | layout="prev, pager, next" |
| | | :total="usercount" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="menuSettings_tree"> |
| | | <My-bread |
| | | :list="[ |
| | | `${$t('operatManage.operatManage')}`, |
| | |
| | | > |
| | | <el-table-column align="center" width="55"> |
| | | <template slot-scope="scope"> |
| | | <!-- 可以手动的修改label的值,从而控制选择哪一项 --> |
| | | |
| | | <el-radio |
| | | class="radio" |
| | | v-model="templateSelection" |
| | |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="listData.pageIndex" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="userlistData.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="count" |
| | |
| | | </div> |
| | | </div> |
| | | <div class="menuSettings"> |
| | | <!-- <div class="title_box"> |
| | | <h4>详细信息</h4> |
| | | </div> --> |
| | | <div |
| | | style=" |
| | | font-size: 14px; |
| | |
| | | @size-change="userhandleSizeChange" |
| | | @current-change="userhandleCurrentChange" |
| | | :current-page="userlistData.pageIndex" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :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" |
| | |
| | | height="40vh" |
| | | @selection-change="addhandleSelectionChange" |
| | | > |
| | | <el-table-column type="selection" width="55"> </el-table-column> |
| | | <el-table-column |
| | | type="selection" |
| | | width="55" |
| | | > </el-table-column> |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | |
| | | > |
| | | </el-table-column> |
| | | </el-table> |
| | | <div style="margin-top: 20px; text-align: center" class="pagination_box"> |
| | | <div |
| | | style="margin-top: 20px; text-align: center" |
| | | class="pagination_box" |
| | | > |
| | | <el-pagination |
| | | @size-change="addhandleSizeChange" |
| | | @current-change="addhandleCurrentChange" |
| | | :current-page="addlistData.pageIndex" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="addlistData.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="addcount" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogTableVisible = false">{{ |
| | | <div |
| | | slot="footer" |
| | | class="dialog-footer" |
| | | > |
| | | <el-button |
| | | size="small" |
| | | @click="dialogTableVisible = false" |
| | | >{{ |
| | | $t('dataManage.dictionaryManageObj.cancel') |
| | | }}</el-button> |
| | | <el-button type="primary" @click="addConfirm">{{ |
| | | $t('dataManage.dictionaryManageObj.confirm') |
| | | }}</el-button> |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click="addConfirm" |
| | | >{{ $t('dataManage.dictionaryManageObj.confirm') }}</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | this.dialogTableVisible = false; |
| | | this.getuserList(); |
| | | }) |
| | | .catch(() => {}); |
| | | .catch(() => { }); |
| | | }, |
| | | adduser() { |
| | | this.dialogTableVisible = true; |
| | |
| | | this.usermultipleSelection.forEach((e) => { |
| | | arr.push(e.id); |
| | | }); |
| | | const data = await roleResDeletes({ ids: arr.toString() }); |
| | | if (data.code !== 200) { |
| | | return this.$message.error('删除失败'); |
| | | } |
| | | this.$message({ |
| | | message: '删除成功', |
| | | type: 'success', |
| | | this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(async () => { |
| | | const data = await roleResDeletes({ ids: arr.toString() }); |
| | | if (data.code == 200) { |
| | | this.InsertFormdialog = false; |
| | | this.$message({ |
| | | message: '删除成功!', |
| | | type: 'success', |
| | | }); |
| | | this.getuserList(); |
| | | } else { |
| | | this.$message({ |
| | | message: '删除失败!', |
| | | type: 'warning', |
| | | }); |
| | | } |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }); |
| | | }); |
| | | this.getuserList(); |
| | | // const data = await roleResDeletes({ ids: arr.toString() }); |
| | | // if (data.code !== 200) { |
| | | // return this.$message.error('删除失败'); |
| | | // } |
| | | // this.$message({ |
| | | // message: '删除成功', |
| | | // type: 'success', |
| | | // }); |
| | | // this.getuserList(); |
| | | }, |
| | | //用户表多选 |
| | | handleSelectionChange(val) { |
| | |
| | | <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; |
| | | height: 98%; |
| | | width: 98%; |
| | | padding: 1%; |
| | | |
| | | .menuSettings_tree { |
| | | position: relative; |
| | | width: 344px; |
| | | width: 100%; |
| | | 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 { |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .menuSettings { |
| | | width: calc(50% - 172px); |
| | | border-radius: 10px; |
| | | background: rgb(240, 242, 245); |
| | | margin-left: 10px; |
| | | height: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .title_box { |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | .content_box { |
| | | padding: 10px; |
| | | margin-bottom: 24px; |
| | | display: flex; |
| | | border-radius: 10px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | box-sizing: border-box; |
| | | width: 31%; |
| | | height: 94%; |
| | | |
| | | border-radius: 5px; |
| | | } |
| | | } |
| | | .table_box { |
| | | padding: 10px; |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | overflow: auto; |
| | | height: 85%; |
| | | } |
| | | .divider { |
| | | margin-top: 8px; |
| | | .divider { |
| | | margin-top: 8px; |
| | | } |
| | | } |
| | | } |
| | | .el-table, |
| | | .el-table /deep/ .el-table__expanded-cell { |
| | | background-color: transparent; |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | .el-table /deep/ th, |
| | | .el-table /deep/ tr { |
| | | background-color: transparent; |
| | | } |
| | | background-color: transparent !important; |
| | | } |
| | | </style> |