kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加账号角色管理

Browse Source
This commit is contained in:
aixianling
2021-12-18 11:39:14 +08:00
parent 6f0f5d40b0
commit af0903a979
4 changed files with 579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
core/apps/AppAccountRole/AppAccountRole.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<section class="AppAccountRole">
<add-account-role v-if="showDetail"/>
<account-role-list v-else/>
</section>
</template>
<script>
import AddAccountRole from "./addAccountRole";
import AccountRoleList from "./accountRoleList";
export default {
name: "AppAccountRole",
props: {
instance: Function
},
components: {AccountRoleList, AddAccountRole},
computed: {
showDetail() {
return this.$route.hash == "#add"
}
},
provide() {
let {instance} = this
return {instance}
}
}
</script>
<style lang="scss" scoped>
.AppAccountRole {
}
</style>

372
core/apps/AppAccountRole/accountRoleList.vue Normal file
View File

@@ -0,0 +1,372 @@
<template>
<ai-list class="accountRoleList">
<ai-title slot="title" title="账号角色管理" isShowBottomBorder/>
<template #content>
<ai-search-bar>
<template #left>
<el-button
type="primary"
icon="el-icon-circle-plus"
@click="$router.push({hash:'#add'})"
v-if="$permissions('admin_sysaccountrole_add')"
>添加
</el-button>
<el-button
icon="el-icon-delete"
class="delete-btn del-btn-list"
@click="allDelete"
:disabled="!Boolean(multipleSelection.length)"
v-if="$permissions('admin_sysaccountrole_del')"
>删除
</el-button>
</template>
<template #right>
<el-input
size="small"
v-model="searchInfo"
placeholder="角色名称"
clearable
@keyup.enter.native="mhSearch()"
prefix-icon="iconfont iconSearch"
/>
<el-button
type="primary"
icon="iconfont iconSearch"
@click="mhSearch()"
>查询
</el-button
>
<el-button
icon="el-icon-refresh-right"
style="padding: 8px 13.5px"
@click="resetConditon"
>重置
</el-button
>
</template>
</ai-search-bar>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
header-cell-class-name="table-header"
tooltip-effect="light"
max-height="calc(100% - 80px)"
row-class-name="table-row"
cell-class-name="table-cell"
>
<el-table-column type="selection" width="55"/>
<el-table-column prop="name" label="角色名" width="300"/>
<el-table-column label="权限明细" prop="appRoleList">
<template slot-scope="scope">
<el-tooltip
content="更多角色用户请点击详情按钮"
placement="top"
effect="light"
v-if="scope.row.appRoleList.length > 3"
>
<span>{{ scope.row.appRoleListHtml }}</span>
</el-tooltip>
<span
v-for="(item, index) in scope.row.appRoleList"
:key="index"
v-else
>
<span>{{ item.appName }}-</span>
<span>{{ item.name }}；</span>
</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center">
<template class="operation_icon" slot-scope="scope">
<el-button
type="text"
size="small"
@click="beforeCopy(scope.row)"
v-if="$permissions('admin_sysaccountrole_add')"
>复制角色
</el-button>
<el-button
type="text"
size="small"
@click="detailShow(scope.row)"
v-if="$permissions('admin_sysaccountrole_detail')"
>详情
</el-button>
<el-button
type="text"
size="small"
@click="edit(scope.row)"
v-if="$permissions('admin_sysaccountrole_edit')"
>编辑
</el-button
>
<el-button
type="text"
size="small"
@click="beforeDelete(scope.row)"
v-if="$permissions('admin_sysaccountrole_del')"
>删除
</el-button
>
</template>
</el-table-column>
<div slot="empty" class="no-data"></div>
</el-table>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
layout="total,prev, pager, next,sizes, jumper"
:total="total"
/>
</div>
<el-dialog
class="editStyle"
:visible.sync="copyDialog"
width="520px"
@close="dataInit()"
title="复制角色"
>
<el-form :model="form" label-width="80px">
<el-form-item
label="角色名"
:rules="[{ required: true, message: '', trigger: 'blur' }]"
>
<el-input
v-model="roleName"
placeholder="请输入..."
size="small"
clearable
/>
</el-form-item>
</el-form>
<div slot="footer" style="text-align: center">
<el-button
style="width: 92px"
size="small"
class="delete-btn"
@click="copyDialog = false"
>取消
</el-button
>
<el-button
style="width: 92px"
size="small"
type="primary"
@click="copyFn()"
:disabled="!Boolean(roleName)"
>确认
</el-button>
</div>
</el-dialog>
<ai-dialog title="账号角色详情" :visible.sync="viewShow" customFooter>
<ai-card title="基本信息">
<template #content>
<ai-wrapper>
<ai-info-item label="账号角色名称" :value="row.name"/>
</ai-wrapper>
</template>
</ai-card>
<ai-card title="权限信息">
<template #content>
<div
class="view_info"
v-for="(item, index) in row.appRoleList"
:key="index"
>
<i class="iconfont iconProlife" style="color: #999"/>&nbsp;
{{ [item.appName, item.name].join(" / ") }}
</div>
</template>
</ai-card>
<template #footer>
<el-button
type="primary"
@click="edit(row)"
v-if="$permissions('admin_sysaccountrole_edit')"
>编辑角色
</el-button>
</template>
</ai-dialog>
</template>
</ai-list>
</template>
<script>
export default {
name: "accountRoleList",
inject:{
instance:{}
},
data() {
return {
searchInfo: "",
pageSize: 10,
tableData: [],
multipleSelection: [],
total: 0,
pageNum: 1,
row: {},
deleteIds: [],
copyDialog: false,
roleName: "",
viewShow: false,
titleDel: "",
form: {},
};
},
methods: {
getTableList() {
this.tableData = [];
this.instance.post(`/admin/role-acc/page`, null, {
params: {
pageSize: this.pageSize,
pageNum: this.pageNum,
roleName: this.searchInfo,
},
}).then((res) => {
if (res.code == 0) {
this.tableData = res.data.records;
this.total = res.data.total;
if (this.tableData.length) {
this.tableData.map((item) => {
if (item.appRoleList.length > 3) {
item.appRoleListHtml = `${item.appRoleList[0].appName}-${item.appRoleList[0].name}；${item.appRoleList[1].appName}-${item.appRoleList[1].name}；${item.appRoleList[2].appName}-${item.appRoleList[2].name}；`;
}
});
}
}
});
},
dataInit() {
this.deleteIds = [];
this.multipleSelection = [];
this.row = {};
},
handleSelectionChange(val) {
this.deleteIds = [];
this.multipleSelection = val;
this.multipleSelection.forEach((e) => {
this.deleteIds.push(e.id);
});
},
allDelete() {
this.titleDel = "确定要执行删除操作吗？";
this.deleteRole();
},
beforeDelete(row) {
this.deleteIds = [];
this.row = row;
this.titleDel = "确定需要删除该角色吗？";
this.deleteIds.push(row.id);
this.deleteRole();
},
beforeCopy(row) {
this.row = row;
this.copyDialog = true;
},
detailShow(row) {
this.row = row;
this.viewShow = true;
},
edit(row) {
this.$router.push({
hash: "#add",
query: {
info: row,
},
});
},
copyFn() {
let crr = [];
let appRoleList = this.row.appRoleList;
appRoleList.forEach((e) => {
crr.push(e.id);
});
this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
params: {
roleName: this.roleName,
},
})
.then((res) => {
if (res.code == 0) {
this.$message({message: "复制成功", type: "success"});
this.copyDialog = false;
this.pageNum = 1;
this.getTableList();
}
});
},
deleteRole() {
this.$confirm(this.titleDel, {
type: "error",
})
.then(() => {
this.instance
.post(`/admin/role-acc/del?ids=${this.deleteIds}`, null, {})
.then((res) => {
if (res.code == 0) {
this.$message.success("删掉角色成功");
this.getTableList();
}
});
})
.catch(() => {
});
},
mhSearch() {
this.pageNum = 1;
this.getTableList();
},
// 重置
resetConditon() {
this.pageNum = 1;
this.searchInfo = "";
this.getTableList();
},
handleSizeChange(val) {
this.pageSize = val;
this.getTableList();
},
handleCurrentChange(val) {
this.pageNum = val;
this.getTableList();
},
},
created() {
this.getTableList();
},
};
</script>
<style lang="scss" scoped>
.accountRoleList {
height: 100%;
::v-deep.ai-card {
box-shadow: none;
border: 1px solid #eee;
.aibar {
height: 40px;
background: #f3f6f9;
}
.ai-card__body {
padding: 0 16px;
}
}
.view_info {
color: #333;
padding-left: 20px;
margin-bottom: 10px;
.info-title {
margin-bottom: 10px;
}
}
}
</style>

173
core/apps/AppAccountRole/addAccountRole.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<section class="addAccountRole">
<ai-detail>
<ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
<template #content>
<ai-card title="基本信息">
<template #content>
<el-form size="small" label-width="120px">
<el-form-item required label="账号角色名称">
<el-input clearable v-model="roleName" placeholder="请输入..."/>
</el-form-item>
</el-form>
</template>
</ai-card>
<ai-card title="角色信息(必选)">
<template #content>
<el-form size="small" label-width="120px">
<el-form-item required label="角色列表">
<div class="roleList">
<p class="input">
<el-input placeholder="请输入..." size="small" v-model="filterText" suffix-icon="iconfont iconSearch">
</el-input>
<el-button icon="iconfont iconDelete" size="small" @click="filterText=''">清空</el-button>
</p>
<div class="tree_list">
<el-tree
class="filter-tree"
:data="roleList"
show-checkbox
:props="defaultProps"
default-expand-all
:check-strictly="true"
node-key="id"
:default-checked-keys="defaultId"
:filter-node-method="filterNode"
ref="tree">
</el-tree>
</div>
</div>
</el-form-item>
</el-form>
</template>
</ai-card>
</template>
<template #footer>
<el-button @click="toAppRole">取消</el-button>
<el-button type="primary" @click="confirm">保存</el-button>
</template>
</ai-detail>
</section>
</template>
<script>
export default {
name: "addAccountRole",
inject: {instance: {}},
data() {
return {
roleName: '',
id: '',
roleList: [],
searchVal: '',
defaultProps: {
children: 'roles',
label: 'name'
},
treeList: [],
defaultId: [],
filterText: ''
}
},
computed: {
isAdd() {
return !this.$route.query?.info?.id
},
pageTitle() {
return this.isAdd ? "新增账号角色" : "编辑账号角色"
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
created() {
this.getAppList();
if (JSON.stringify(this.$route.query) != '{}') {
this.roleName = this.$route.query.info.name;
this.id = this.$route.query.info.id;
this.$route.query.info.appRoleList.forEach(e => {
this.defaultId.push(e.id)
})
}
},
methods: {
//查询下拉列表
getAppList() {
this.instance.post(`/admin/role-app/list-all`).then(res => {
if (res.code == 0) {
this.roleList = res.data;
this.roleList.forEach(e => {
e.disabled = true;
})
}
})
},
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
confirm() {
let crr = [];
let arrCheckList = [];
arrCheckList = this.$refs.tree.getCheckedKeys();
for (let i = 0; i < arrCheckList.length; i++) {
crr.push(arrCheckList[i]);
}
if (!this.roleName) {
this.$message.error('请输入账号角色名称')
return;
}
if (crr.length == 0) {
this.$message.error('请选择角色列表')
return;
}
this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
params: {
roleName: this.roleName,
id: this.id
}
}).then(res => {
if (res?.code == 0) {
this.$message({message: '保存成功', type: 'success'});
this.toAppRole()
}
})
},
//取消 返回
toAppRole() {
this.$router.push({})
}
}
}
</script>
<style lang="scss" scoped>
.addAccountRole {
width: 100%;
height: 100%;
background-color: #fff;
position: relative;
.roleList {
display: inline-block;
width: 340px;
height: 420px;
background-color: #fcfcfc;
border-radius: 2px;
border: solid 1px #d0d4dc;
.input {
display: flex;
justify-content: space-between;
padding: 5px;
margin: 0;
}
.tree_list {
height: 370px;
overflow: auto;
}
}
}
</style>