<template>
|
<Card>
|
<div class="header-title">{{ form.roleName }}</div>
|
<div class="header-remark">备注：{{ form.remark }}</div>
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="操作权限" name="first">
|
<div class="header">
|
<div class="w20">模块名称</div>
|
<div class="sconed">
|
<div class="subpage">
|
<div class="title">页面名称</div>
|
<div class="btns">权限</div>
|
</div>
|
</div>
|
</div>
|
<div v-for="item in menu" :key="item.menuId">
|
<div class="row">
|
<div class="w20">
|
<el-checkbox disabled :checked="item.selected">
|
{{ item.menuName }}
|
</el-checkbox>
|
</div>
|
<div class="sconed">
|
<div class="subpage"
|
v-if="(item.children.length > 0 && item.children[0].children.length > 0) || item.children[0].children.menuType != 'F'">
|
<div v-for="item1 in item.children" :key="item1.menuId" class="two">
|
<div class="left">
|
<el-checkbox disabled :checked="item1.selected">
|
{{ item1.menuName }}
|
</el-checkbox>
|
</div>
|
|
<div class="right">
|
<div v-for="item2 in item1.children" :key="item2.menuId">
|
<el-checkbox disabled :checked="item2.selected">
|
{{ item2.menuName }}
|
</el-checkbox>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="subpage" v-else>
|
<div class="two">
|
<!-- <div class="left">
|
</div> -->
|
<div class="right">
|
<div v-for="item1 in item.children" :key="item1.menuId">
|
<el-checkbox disabled :checked="item1.selected">
|
{{ item1.menuName }}
|
</el-checkbox>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="menu.length == 0" :style="{ height: height + 'px' }">
|
<div class="no-data">暂无数据</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="人员列表" name="second">
|
|
<el-form :inline="true" class="demo-form-inline">
|
<div style="display: flex;justify-content: space-between;">
|
<el-form-item label="人员搜索">
|
<el-input v-model="nickNameOrPhone" placeholder="请输入姓名/联系电话"></el-input>
|
</el-form-item>
|
<el-form-item label="登陆状态">
|
<el-select v-model="status" placeholder="请选择">
|
<el-option
|
v-for="item in [{ label: '全部', value: '' }, { label: '启用', value: 0 }, { label: '禁用', value: 1 }]"
|
:key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="reset">重置</el-button>
|
<el-button type="primary" @click="onSubmit" style="margin-left: 10px;">查询</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
|
<Table :data="data" :total="pagination.total" :queryForm="pagination" @currentChange="handleCurrentChange"
|
@sizeChange="handleSizeChange">
|
<el-table-column label="序号" type="index" width="50">
|
</el-table-column>
|
<el-table-column prop="nickName" label="姓名"></el-table-column>
|
<el-table-column prop="phonenumber" label="联系电话">
|
</el-table-column>
|
<el-table-column prop="roleName" label="角色">
|
</el-table-column>
|
<el-table-column prop="userName" label="登陆账号">
|
</el-table-column>
|
<el-table-column prop="remark" label="备注">
|
</el-table-column>
|
<el-table-column prop="status" label="登录状态">
|
<template slot-scope="{row}">
|
<div class="status_class">
|
<div :class="row.status == 0 ? 'green' : 'red'"></div>
|
<div>{{ row.status == 0 ? '启用' : '停用' }}</div>
|
<div v-if="row.status == 1" style="cursor: pointer;" @click="dialogVisibleView = true, rowView = row">
|
<i class="el-icon-warning"></i>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
</Table>
|
</el-tab-pane>
|
</el-tabs>
|
<ViewData v-if="dialogVisibleView" :row="rowView" :dialogVisible="dialogVisibleView"
|
@close="dialogVisibleView = false, rowView = {}" />
|
</Card>
|
</template>
|
|
<script>
|
import { getRoleInfo, roleInfoFromUserId, getUserList, getDeptList } from './service.js'
|
import ViewData from '../user/components/view-data'
|
export default {
|
name: 'DetailRole',
|
components: {
|
ViewData
|
},
|
props: {},
|
data() {
|
return {
|
form: {},//表单
|
activeName: 'first',//当前选中的tab
|
menu: [],//菜单
|
data: [],//列表数据
|
nickNameOrPhone: '',//人员搜索
|
deptId: [],//部门
|
deptList: [],//部门列表
|
status: '',//状态
|
pagination: {
|
total: 10,//总条数
|
pageNum: 1,//当前页
|
pageSize: 10,//每页条数
|
},
|
rowView: {},//查看
|
dialogVisibleView: false,//查看
|
};
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight()
|
},
|
},
|
watch: {},
|
created() {
|
roleInfoFromUserId({ userId: 1 }).then(res => {
|
getRoleInfo({ roleId: this.$route.query.roleId }).then(resp => {
|
this.form = {
|
roleName: resp.roleName,
|
remark: resp.remark,
|
}
|
this.menu = this.setSelectedIds(res, resp.menus);
|
|
})
|
})
|
this.getListData()
|
// getDeptList().then((res) => {
|
// this.deptList = res.data.data
|
// })
|
},
|
mounted() { },
|
methods: {
|
async getListData() {
|
let obj = {
|
...this.pagination,
|
nickNameOrPhone: this.nickNameOrPhone,
|
status: this.status,
|
roleIds: [this.$route.query.roleId]
|
}
|
this.listLoading = true
|
getUserList(obj).then(res => {
|
this.data = res.records
|
this.pagination.total = res.total
|
})
|
|
},
|
setSelectedIds(arr, selectKeyList) {
|
function traverse(item) {
|
item.selected = selectKeyList.includes(item.menuId);
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(traverse);
|
}
|
}
|
arr.forEach(traverse);
|
return arr;
|
},
|
reset() {
|
this.nickNameOrPhone = ''
|
this.deptId = []
|
this.status = ''
|
this.pagination.pageNum = 1
|
this.getListData()
|
},
|
onSubmit() {
|
this.pagination.pageNum = 1
|
this.getListData()
|
},
|
|
handleCurrentChange(e) {
|
this.pagination.pageNum = e;
|
this.getListData()
|
},
|
handleSizeChange(e) {
|
this.pagination.pageSize = e
|
this.getListData()
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.el-checkbox__inner {
|
background-color: #009688;
|
border-color: #009688;
|
}
|
|
.header-title {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
}
|
|
.header-remark {
|
font-size: 16px;
|
color: rgba(0, 0, 0, 0.65);
|
margin-bottom: 30px;
|
}
|
|
.row,
|
.header {
|
display: flex;
|
align-items: center;
|
border: 1px solid #e8e8e8;
|
|
.w20 {
|
width: 15%;
|
padding: 8px 20px;
|
}
|
|
.sconed {
|
flex: 1;
|
|
.subpage {
|
.title {
|
border: 1px solid #e8e8e8;
|
border-top: none;
|
border-bottom: none;
|
}
|
|
.two {
|
display: flex;
|
align-items: center;
|
border: 1px solid #e8e8e8;
|
border-top: none;
|
border-right: none;
|
|
.left {
|
width: 200px;
|
padding: 13px 20px;
|
border-right: 1px solid #e8e8e8;
|
}
|
|
.right {
|
display: flex;
|
flex: 1;
|
|
div {
|
padding: 13px 0 13px 20px;
|
}
|
}
|
}
|
|
.two:last-child {
|
border-bottom: none;
|
}
|
|
.btns {
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
}
|
}
|
}
|
}
|
|
.header {
|
border-radius: 16px 16px 0 0;
|
background-color: #FAFAFA;
|
color: #909399;
|
font-weight: 500;
|
|
.subpage {
|
display: flex;
|
}
|
|
.title {
|
width: 200px;
|
padding: 8px 20px;
|
}
|
}
|
|
.status_class {
|
display: flex;
|
align-items: center;
|
|
div:nth-child(1) {
|
width: 9px;
|
height: 9px;
|
border-radius: 50%;
|
margin-right: 5px;
|
}
|
|
div:nth-child(2) {
|
margin-right: 8px;
|
}
|
}
|
|
.no-data {
|
height: 100%;
|
background-color: #fff;
|
border-radius: 0 0 6px 6px;
|
border-left: 1px solid #e8e8e8;
|
border-right: 1px solid #e8e8e8;
|
border-bottom: 1px solid #e8e8e8;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #909399;
|
font-size: 14px;
|
}
|
|
/* 当复选框禁用时覆盖默认样式 */
|
|
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
|
background-color: #409eff;
|
border-color: #409eff;
|
}
|
|
::v-deep .el-checkbox.is-disabled .el-checkbox__inner::after {
|
border-color: #fff;
|
}
|
</style>
|
