150 lines
3.6 KiB
Plaintext
150 lines
3.6 KiB
Plaintext
<template>
|
|
<div class="role">
|
|
<div ref="leftContainer" class="left">
|
|
<div class="filter-container">
|
|
<el-button type="primary" size="small" style="margin-left:auto;" @click="handleAddRole">New</el-button>
|
|
</div>
|
|
<base-table
|
|
v-loading="loading"
|
|
:highlight-current-row="true"
|
|
:columns="role_columns"
|
|
:list="list"
|
|
:hidden-page="true"
|
|
@getList="getList"
|
|
@permission="handlePermission"
|
|
@edit="handleEditRole"
|
|
@delete="handleDeleteRole"
|
|
@sortByColumn="sortByColumn"
|
|
>
|
|
<template slot="TypeSlot" slot-scope="{scope}">
|
|
{{ scope.row.Type === 1?'Trial':scope.row.Type === 2?'Reviewer':scope.row.Type === 3?'Other':'' }}
|
|
</template>
|
|
</base-table>
|
|
</div>
|
|
<!-- <div class="right">
|
|
<RoleMenu ref="roleMenu" />
|
|
</div> -->
|
|
<role-form v-if="model_cfg.visible" :data="editRow" @close="closeModal" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { role_columns, model_cfg } from './role'
|
|
import BaseTable from '@/components/BaseTable'
|
|
import { getUserTypeRoleList, deleteUserTypeRole } from '@/api/admin'
|
|
// import RoleMenu from './components/RoleMenu'
|
|
import RoleForm from './components/RoleForm'
|
|
import tableMixins from '@/mixins/table'
|
|
export default {
|
|
name: 'Role',
|
|
components: { BaseTable, RoleForm },
|
|
mixins: [tableMixins],
|
|
data() {
|
|
return {
|
|
role_columns,
|
|
model_cfg,
|
|
list: [],
|
|
total: 0,
|
|
loading: false,
|
|
treeData: [],
|
|
defaultProps: {
|
|
label: 'MenuName',
|
|
children: 'Children'
|
|
},
|
|
dialogVisible: false,
|
|
editRow: {},
|
|
expandedKeys: [],
|
|
treeLoading: false,
|
|
funcListLoading: false,
|
|
funcList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.loading = true
|
|
getUserTypeRoleList({}).then((res) => {
|
|
this.loading = false
|
|
this.list = res.Result
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
handleAddRole() {
|
|
this.editRow = {}
|
|
this.model_cfg.visible = true
|
|
this.model_cfg.title = 'Add'
|
|
},
|
|
handleEditRole(row) {
|
|
this.editRow = row
|
|
this.model_cfg.visible = true
|
|
this.model_cfg.title = 'Edit'
|
|
},
|
|
// 分配权限，获取菜单树，并勾选已有菜单权限
|
|
handlePermission(row) {
|
|
this.roleId = row.Id
|
|
this.$nextTick(function() {
|
|
this.$refs['roleMenu'].getMenus(row.Id)
|
|
})
|
|
},
|
|
handleDeleteRole(row) {
|
|
this.$confirm('Sure to delete?', {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true,
|
|
confirmButtonText: 'Ok',
|
|
cancelButtonText: 'Cancel'
|
|
}).then(() => {
|
|
deleteUserTypeRole(row.Id).then((res) => {
|
|
if (res.IsSuccess) {
|
|
this.list.splice(this.list.findIndex((item) => item.Id === row.Id), 1)
|
|
this.$message.success('Deleted successfully!')
|
|
}
|
|
})
|
|
})
|
|
},
|
|
closeModal() {
|
|
this.model_cfg.visible = false
|
|
this.getList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.role {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 0;
|
|
flex-grow: 4;
|
|
// border-right: 1px solid #ccc;
|
|
.filter-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 5px;
|
|
}
|
|
.data-table {
|
|
flex: 1;
|
|
padding: 5px 0px;
|
|
}
|
|
.pagination-container {
|
|
text-align: right;
|
|
}
|
|
}
|
|
.right {
|
|
width: 0;
|
|
flex-grow: 6;
|
|
overflow-y: auto;
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
.selected-row{
|
|
background-color: cadetblue;
|
|
}
|
|
}
|
|
</style>
|