<template>
|
<div class="permissions-management-page subpages-containter-box">
|
<div class="header-view">
|
<el-breadcrumb separator=">">
|
<el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="'breadcrumb-'+index">
|
<span class="title-breadcrumb-item" :class="[(index===breadcrumbs.length-1)?'last':'']" @click="onPageFatherNode(index)">{{item.Name}}</span>
|
</el-breadcrumb-item>
|
</el-breadcrumb>
|
<el-button type="primary" size="small" @click="onNew"><el-icon class="btn-left-icon"><e-icon-plus /></el-icon>新增</el-button>
|
</div>
|
<div class="list-view">
|
<el-table :data="list" border stripe>
|
<el-table-column width="70" label="序号" align="center" fixed>
|
<template #default="scope">{{scope.$index+1}}</template>
|
</el-table-column>
|
<el-table-column label="权限名称">
|
<template #default="scope">
|
<el-link type="primary" v-if="scope.row.hasChildren" @click="onPageNextLevel(scope.row)">{{scope.row.Name}}</el-link>
|
<span v-else>{{scope.row.Name}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="OrderSort" label="优先级" />
|
<el-table-column prop="Code" label="路由地址" />
|
<el-table-column prop="Description" label="权限描述" />
|
<el-table-column prop="CreateTime" label="创建时间" width="160" />
|
<el-table-column prop="ModifyTime" label="修改时间" width="160" />
|
<el-table-column prop="CreateBy" label="创建人" width="100" />
|
<el-table-column prop="ModifyBy" label="修改人" width="100" />
|
<el-table-column label="操作" width="188" fixed="right" align="center">
|
<template #default="scope">
|
<el-button type="primary" size="small" @click="onOpenModifyModal(scope.row)"><el-icon class="btn-left-icon"><e-icon-edit /></el-icon>编辑</el-button>
|
<el-button type="danger" size="small" @click="onCancel(scope.row.Id)" :disabled="scope.row.hasChildren"><el-icon class="btn-left-icon"><e-icon-delete /></el-icon>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<form-modal v-model:visible="formVisible" :type="formType" :row="actionRow" :parent="parentNode" @submitCallback="onFormSubmitCallback" />
|
</div>
|
</template>
|
|
<script>
|
import FormModal from './compontents/FormModal.vue'
|
import {Plus,Edit,Delete} from '@element-plus/icons'
|
export default {
|
name:'permissionsManagementPage',
|
components:{FormModal,'e-icon-plus':Plus,'e-icon-edit':Edit,'e-icon-delete':Delete},
|
data(){
|
return {
|
rootNode:{
|
Id:0,
|
Name:'权限根节点'
|
},
|
breadcrumbs:[],
|
queried:{},
|
list:[],
|
parentNode:{},
|
actionRow:{},
|
formVisible:false,
|
formType:''
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
/* 页面初始化 */
|
init(){
|
this.setDefault();
|
this.newList()
|
},
|
setDefault(){
|
this.breadcrumbs = [{...this.rootNode}]
|
this.parentNode = {...this.rootNode}
|
},
|
/* 表格刷新至首页 */
|
newList(needLoading=true){
|
this.queried = {f:this.parentNode.Id}
|
this.getList(()=>{},needLoading)
|
},
|
/* 更新数据表 */
|
getList(callback,needLoading=true){
|
if (needLoading) {
|
this.$loading();
|
}
|
this.getListAjax(this.queried,(f,d)=>{
|
if (f) {
|
let tempList = d || []
|
this.list = tempList.map((currentItem)=>{
|
currentItem.CreateTime = this.$utils.project.parseTimeStr(currentItem.CreateTime)
|
currentItem.ModifyTime = this.$utils.project.parseTimeStr(currentItem.ModifyTime)
|
return currentItem
|
})
|
}
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(f)
|
});
|
},
|
getListAjax(params,callback){
|
this.$api.get('GetTreeTable',params,{block:'permission'}).then((d)=>{
|
callback && callback(true,d)
|
}).catch((err)=>{
|
callback && callback(false)
|
})
|
},
|
onPageNextLevel(row){
|
let obj = {
|
Id:row.Id,
|
Name:row.Name
|
}
|
this.breadcrumbs.push(obj);
|
this.parentNode = obj;
|
this.newList()
|
},
|
onPageFatherNode(index){
|
if (index+1>=this.breadcrumbs.length) return false
|
this.breadcrumbs.splice(index+1,this.breadcrumbs.length-index-1)
|
this.parentNode = this.breadcrumbs[index];
|
this.newList()
|
},
|
/* 打开新建弹窗 */
|
onNew(){
|
this.formType = 'add';
|
this.formVisible = true;
|
},
|
/* 打开编辑弹窗 */
|
onOpenModifyModal(obj){
|
this.actionRow = obj;
|
this.formType = 'modify';
|
this.formVisible = true;
|
},
|
onCancel(id){
|
this.$confirm('确定要删除该权限吗？', '删除警示').then(()=>{
|
this.dealCancel(id)
|
}).catch(()=>{});
|
},
|
onFormSubmitCallback(needLoading){
|
if (this.formType==='add') {
|
this.newList(needLoading)
|
} else {
|
this.getList()
|
}
|
},
|
/* 删除处理事件 */
|
dealCancel(id){
|
this.$loading();
|
this.$api.delete('Delete',{id},{block:'permission'}).then(()=>{
|
this.getList(()=>{
|
this.$loading().close();
|
},false)
|
}).catch((err)=>{
|
this.$loading().close();
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.permissions-management-page{
|
&>.header-view{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-bottom: 12px;
|
border-bottom: 1px solid #DCDCDC;
|
}
|
.title-breadcrumb-item{
|
font-size: 16px;
|
color: $color-primary;
|
cursor: pointer;
|
text-decoration: underline;
|
font-weight: bold;
|
&:hover{
|
color: $color-primary-hover;
|
}
|
&.last{
|
cursor: default;
|
color: #808080;
|
text-decoration:none;
|
}
|
}
|
&>.list-view{
|
padding-top: 8px;
|
}
|
}
|
</style>
|
