<template>
|
<div >
|
<div class="mod-sys__role">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="fa-card-a">
|
<zt-dept-tree @on-selected="onCompanySelected"/>
|
</div>
|
</el-col>
|
<el-col :span="19">
|
<div class="fa-card-a">
|
<zt-table-wraper ref="tableObj" v-slot="{ table }" :lazy="true" delete-url="/sys/role"
|
query-url="/sys/role/page">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
|
<el-form-item style="margin-top: 2px;margin-left: 10px">
|
<el-input v-model="dataForm.name" :placeholder="$t('role.name')" clearable></el-input>
|
</el-form-item>
|
<el-form-item class="message-btn">
|
<zt-button type="query" @click="table.query()"/>
|
<zt-button v-show="selectCompanyFlag" perm="sys:role" type="add" @click="table.editHandle()"/>
|
<zt-button perm="sys:role:delete" type="delete" @click="table.deleteHandle()"/>
|
</el-form-item>
|
</el-form>
|
<el-table v-adaptive="{bottomOffset:70}" v-loading="table.dataLoading" :cell-style="cellStyle"
|
:data="table.dataList"
|
border
|
height="650px"
|
@selection-change="table.selectionChangeHandle" @sort-change="table.sortChangeHandle">
|
<el-table-column align="center" type="selection" width="40"/>
|
<el-table-column :label="$t('role.code')" prop="code" width="180"/>
|
<el-table-column :label="$t('role.name')" prop="name" width="180"/>
|
<el-table-column :label="$t('role.remark')" prop="remark"></el-table-column>
|
<zt-table-column-handle :table="table" delete-perm="sys:role:delete" edit-perm="sys:role:update"
|
width="300">
|
<template v-slot="{ row }">
|
<zt-table-button perm="sys:role:menu" @click="setRoleMenu(row)">{{
|
$t('role.menuRight')
|
}}
|
</zt-table-button>
|
<zt-table-button perm="sys:role:user" @click="showRoleUsers(row)">角色人员</zt-table-button>
|
<!-- <zt-table-button @click="setRoleDataScope(row)">{{ $t('role.dataRight') }}</zt-table-button> -->
|
</template>
|
</zt-table-column-handle>
|
</el-table>
|
<!-- 弹窗, 新增 / 修改 -->
|
<add-or-update :companyId="dataForm.companyId" :companyName="dataForm.companyName"
|
@refreshDataList="table.query"/>
|
<!-- 菜单权限配置 -->
|
<role-menu ref="roleMenu"/>
|
<!-- 数据权限配置 -->
|
<role-data-scope ref="roleDataScope"/>
|
<!-- 角色用户 -->
|
<ListRoleUser ref="listRoleUser"/>
|
</zt-table-wraper>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AddOrUpdate from './role-add-or-update'
|
import RoleMenu from './role-menu'
|
import RoleDataScope from './role-data-scope'
|
import ListRoleUser from './role-user'
|
|
export default {
|
data() {
|
return {
|
selectCompanyFlag: false,
|
dataForm: {
|
companyId: '',
|
companyName: '',
|
name: ''
|
},
|
menuDataDelete: [],
|
isHidden: false,
|
isHidden2: false
|
}
|
},
|
watch: {},
|
mounted: function () {
|
this.getMenu()
|
},
|
methods: {
|
cellStyle({column}) {
|
if (column.label === "角色编码" || column.label === '角色名称' || column.label === '角色描述') {
|
return 'text-align: left !important;'
|
}
|
},
|
onCompanySelected(data) {
|
this.dataForm.companyId = data.id
|
this.dataForm.name = data.name
|
this.selectCompanyFlag = true
|
this.$refs.tableObj.query()
|
},
|
setRoleMenu(role) {
|
this.$refs['roleMenu'].$refs.dialog.init(role.id)
|
},
|
setRoleDataScope(role) {
|
this.$refs['roleDataScope'].$refs.dialog.init(role.id)
|
},
|
showRoleUsers(role) {
|
this.$refs['listRoleUser'].$refs.dialog.init(role.id)
|
},
|
// 获取信息
|
async getMenu() {
|
let res = await this.$http.get(`/sys/role/roleMenu`)
|
if (res.success) {
|
this.menuDataDelete = res.data
|
if (this.menuDataDelete.length > 0) {
|
let a
|
for (a of this.menuDataDelete) {
|
if (a.menuId === "1385805134214275073") {
|
//this.isHidden = true
|
} else {
|
//this.isHidden2 = true
|
}
|
}
|
// if (this.menuDataDelete[0].menuId === "1385805134214275073") {
|
// this.isHidden = true
|
// }
|
// if (this.menuDataDelete[1].menuId === "1386158810275553282"){
|
// this.isHidden2 = true
|
// }
|
}
|
this.$refs.tableObj.query()
|
}
|
}
|
},
|
components: {
|
AddOrUpdate,
|
RoleMenu,
|
RoleDataScope,
|
ListRoleUser
|
}
|
}
|
</script>
|
