<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: gaoshp
|
* @LastEditTime: 2024-10-05 21:24:27
|
* @FilePath: /cps-web/src/views/console/authority/apiscope.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="aposcope-main">
|
<div class="aposcope-left">
|
<div class="left-title">菜单</div>
|
<el-tree :data="tableData" row-key="id" :props="defalutProps" lazy :load="loadNode"
|
@node-click="handleNodeClick" ref="treeRef" />
|
</div>
|
<div class="aposcope-right">
|
<div>
|
<!-- <el-button type="primary" @click="addData">+ 添加</el-button> -->
|
<!-- <el-button type="danger" plain @click="delData">删除</el-button> -->
|
</div>
|
<div class="right-content" v-if="searchDataList.length == 0">
|
<div>
|
<span>暂无数据</span>
|
<!-- <span @click="addData">添加规则</span> -->
|
</div>
|
</div>
|
<el-table v-if="searchDataList.length != 0" ref="searchDataListRef" :data="searchDataList" border
|
style="width: 100%;margin-top: 20px;" class="multipleTableRef"
|
@selection-change="searchHandleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="moduleCode" label="接口模块"></el-table-column>
|
<el-table-column prop="controllerCode" label="Controller"></el-table-column>
|
<el-table-column prop="scopeName" label="action"></el-table-column>
|
<el-table-column prop="httpMethod" label="Http方法"></el-table-column>
|
<el-table-column prop="scopePath" label="api地址"></el-table-column>
|
</el-table>
|
</div>
|
<el-drawer :title="'当前选中菜单路径' + drawerPath" v-model="drawer" :direction="direction" :before-close="handleClose"
|
size="780" class="drawerClass">
|
<el-form :inline="true" :model="drawerSearchData" label-width="110px">
|
<el-form-item label="接口模块">
|
<el-select v-model="drawerSearchData.moduleCode" style="width: 100%" size="small">
|
<el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="接口Controller">
|
<el-select v-model="drawerSearchData.controllerCode" style="width: 100%" size="small">
|
<el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="drawerSearchclick" size="small">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<div class="dict-table">
|
<el-table ref="multipleTableRef" :data="drawerTableData" border style="width: 100%"
|
class="multipleTableRef" @selection-change="drawerHandleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="className" label="接口模块"></el-table-column>
|
<el-table-column prop="controllerCode" label="Controller"></el-table-column>
|
<el-table-column prop="name" label="action"></el-table-column>
|
<el-table-column prop="httpMethod" label="Http方法"></el-table-column>
|
<el-table-column prop="url" label="api地址"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="drawer-foot">
|
<el-button type="primary" @click="drawerConfirm" disabled>添加</el-button>
|
<el-button @click="closeDrawer">取消</el-button>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "apiscope",
|
data() {
|
return {
|
drawerPath: "",
|
searchData: {
|
menuId: "",
|
size: "15",
|
current: "1"
|
},
|
searchDataList: [], //右侧数据list
|
aList: [],
|
drawerSearchData: {
|
moduleCode: "",
|
controllerCode: "",
|
menuId: "",
|
size: "-1"
|
},
|
direction: "rtl",
|
drawer: false,
|
defalutProps: {
|
label: 'name',
|
children: 'children',
|
isLeaf: 'hasChildren'
|
},
|
parentId: "0",
|
tableData: [],
|
searchSelection: []
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
//this.getMenuList();
|
},
|
components: {
|
|
},
|
methods: {
|
closeDrawer() {
|
this.drawer = false;
|
},
|
drawerConfirm() {
|
this.drawer = false;
|
},
|
searchHandleSelectionChange(selection) {
|
this.searchSelection = selection;
|
},
|
drawerHandleSelectionChange() {
|
|
},
|
drawerSearchclick() {
|
this.drawerSearchData.menuId = this.searchData.menuId;
|
var obj = {};
|
for (var key in this.drawerSearchData) {
|
if (this.drawerSearchData[key]) {
|
obj[key] = this.drawerSearchData[key];
|
}
|
}
|
this.$HTTP.get("/api/blade-system/resource-definition/page", obj).then(res => {
|
if (res.code == 200) {
|
this.drawerTableData = res.data.records;
|
}
|
})
|
},
|
handleClose(done) {
|
done();
|
},
|
handleNodeClick(data) {
|
this.drawerPath = data.name;
|
console.log(data, data.name, 222)
|
this.searchData.menuId = data.id;
|
this.$HTTP.get("/api/blade-system/api-scope/list", this.searchData).then(res => {
|
if (res.code == 200) {
|
this.searchDataList = res.data.records;
|
}
|
})
|
},
|
getMenuList() {
|
this.$HTTP.get("/api/blade-system/menu/lazy-list?parentId=0").then(res => {
|
if (res.code == 200) {
|
this.tableData = res.data;
|
}
|
})
|
},
|
loadNode(node, resolve, reject) {
|
if (node.data.id) {
|
this.parentId = node.data.id;
|
} else {
|
this.parentId = '0';
|
}
|
this.$HTTP.get("/api/blade-system/menu/lazy-list", { parentId: this.parentId }).then(res => {
|
if (res.code == 200) {
|
res.data.forEach(node => {
|
node.hasChildren = !node.hasChildren;
|
});
|
resolve(res.data);
|
}
|
})
|
},
|
addData() {
|
this.drawerSearchclick();
|
this.drawer = true;
|
},
|
delData() {
|
if (this.searchSelection.length == 0) {
|
this.$message({
|
message: '请选择至少一条数据',
|
type: 'warning'
|
});
|
return;
|
}
|
var selStr = "";
|
this.searchSelection.map(item => {
|
selStr += item.id + ","
|
})
|
selStr = selStr.replace(/,$/, '');
|
var that = this;
|
// this.$HTTP.post("/api/blade-system/data-scope/remove?ids="+selStr).then(res=> {
|
// if(res.code == 200) {
|
// that.$message.success("操作成功");
|
// that.drawerSearchclick();
|
// }
|
// })
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
|
.aposcope-left {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
}
|
|
.aposcope-right {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
|
.left-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
}
|
|
.right-content {
|
text-align: center;
|
}
|
|
.right-content img {
|
width: 350px;
|
height: 350px;
|
}
|
|
.right-content>div {
|
font-size: 14px;
|
;
|
}
|
|
.right-content>div span:nth-child(2) {
|
margin-left: 8px;
|
color: #409eff;
|
cursor: pointer;
|
}
|
|
/deep/ .drawerClass {
|
padding: 8px;
|
}
|
|
.datascope-drawer-btn {
|
margin-bottom: 8px;
|
}
|
|
.drawer-foot {
|
margin-top: 20px;
|
}
|
</style>
|
