baize
/
cloud-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 数据授权

master
baize 2024-05-08 22:41:09 +08:00
parent 143e5be5d9
commit b0be771679
5 changed files with 584 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/accredit/auth.js 100644
View File

@ -0,0 +1,28 @@
import request from '@/utils/request'
// 查询资产授权列表
export function listAuth(query) {
return request({
url: '/source/auth/list',
method: 'get',
params:query
})
}
// 新增资产授权
export function addAuth(data) {
return request({
url: '/source/auth',
method: 'post',
data: data
})
}
// 删除资产授权
export function delAuth(data) {
return request({
url: '/source/auth/remove' ,
method: 'post',
data
})
}

232
src/views/dataSource/assetAuthorization/auth/AuthDataSource.vue 100644
View File

@ -0,0 +1,232 @@
<template>
<div class="app-container">
<el-form ref="form" :model="baseInfo" label-width="120px">
<el-row>
<el-col :offset="2" :span="8">
<el-form-item label="数据接入名称" prop="nickName">
<el-input v-model="baseInfo.accessSourceName" disabled/>
</el-form-item>
</el-col>
<el-col :offset="2" :span="8">
<el-form-item label="系统名称" prop="userName">
<el-input v-model="baseInfo.dataSourceSystemName" disabled/>
</el-form-item>
</el-col>
<el-col :offset="2" :span="8">
<el-form-item label="数据库名称" prop="nickName">
<el-input v-model="baseInfo.databaseName" disabled/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-tabs type="border-card" v-model="idType" style="margin-top: 20px">
<el-tab-pane label="部门授权" name="dept">
<el-table
ref="deptTable"
v-loading="loading"
:data="deptList"
:default-expand-all="true"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="deptId"
>
<el-table-column label="部门名称" prop="deptName" ></el-table-column>
<el-table-column label="部门负责人" prop="leader" ></el-table-column>
<el-table-column label="邮箱" prop="email" ></el-table-column>
<el-table-column align="center" label="创建时间" prop="createTime" >
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" prop="createTime" >
<template slot-scope="scope">
<el-switch
style="display: block"
v-model="scope.row.isAuth"
@change="(val)=>authChange(val,scope.row,scope.row.deptId)"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="已授权"
inactive-text="未授权">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
</el-tab-pane>
<el-tab-pane label="用户授权" name="user">
<el-table ref="table" v-loading="loading" :data="userList">
<el-table-column align="center" label="用户名称" prop="userName"/>
<el-table-column align="center" label="用户昵称" prop="nickName"/>
<el-table-column align="center" label="用户部门" prop="dept.deptName"/>
<el-table-column align="center" label="用户邮箱" prop="email"/>
<el-table-column align="center" label="用户手机号" prop="phonenumber"/>
<el-table-column align="center" label="创建时间" prop="createTime" />
<el-table-column align="center" label="操作" prop="createTime" width="200px" >
<template slot-scope="scope">
<el-switch
style="display: block"
v-model="scope.row.isAuth"
@change="(val)=>authChange(val,scope.row,scope.row.userId)"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="已授权"
inactive-text="未授权">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { parseTime } from '@/utils/muyu'
import {listDept} from "@/api/system/dept";
import {listUser} from "@/api/system/user";
import {addAuth, delAuth, listAuth} from "@/api/accredit/auth";
export default {
name: "AuthDataSource",
props:{
baseInfo:{
type:Object,
default:{}
}
},
data() {
return {
// 遮罩层
loading: true,
idType: "dept",
// 分页信息
total: 0,
pageNum: 1,
pageSize: 1,
deptData: [],
// 部门列表
deptList: [],
// 用户列表
userList: [],
authType:'dataSource',
argumentsList:{
authId:"",
idType:"",
authData:"",
authType:"",
}
};
},
watch:{
baseInfo:{
handler(){
this.loading = true;
setTimeout(() => this.loading = false, 200)
this.init();
},
immediate:true,
deep:true
},
idType:{
handler(){
this.setAuthInfo();
},
immediate:true
}
},
methods: {
parseTime,
init() {
listDept(null).then(response => {
//部门集合
this.deptData = response.data;
//转换成树状图
this.deptList = this.handleTree(response.data, "deptId");
});
listUser(null).then(response => {
//用户集合
this.userList = response.data.rows;
}
);
setTimeout(() => {
this.setAuthInfo();
}, 600);
},
setAuthInfo() {
//获取是否存在
listAuth({idType: this.idType, authType: this.authType}).then(response => {
let data;
if (this.idType === 'dept') {
data = this.deptData
data.forEach(x => {
response.data.rows.forEach(y => {
console.log("y",y)
if (this.idType === 'dept' && x.deptId === y.authId && this.baseInfo.databaseName==y.authData) {
console.log("y1是等于什么=?",y)
this.$set(x, 'isAuth', true);
this.$set(x, 'assetAuthId', y.databaseName);
} else if (this.idType === 'user' && x.userId === y.authId && this.baseInfo.databaseName==y.authData) {
console.log("y2是等于什么=?",y)
this.$set(x, 'isAuth', true);
this.$set(x, 'assetAuthId', y.databaseName);
}
})
})
} else {
data = this.userList;
data.forEach(x => {
response.data.rows.forEach(y => {
if (this.idType === 'dept' && x.deptId === y.authId && this.baseInfo.databaseName==y.authData) {
console.log("y1是等于什么=?",y)
this.$set(x, 'isAuth', true);
this.$set(x, 'assetAuthId', y.databaseName);
} else if (this.idType === 'user' && x.userId === y.authId && this.baseInfo.databaseName==y.authData) {
console.log("y2是等于什么=?",y)
this.$set(x, 'isAuth', true);
this.$set(x, 'assetAuthId', y.databaseName);
}
})
})
}
if(this.idType === 'dept'){
this.deptList = this.handleTree(this.deptData, "deptId");
}
})
},
authChange(val, row, id) {
if (val) {
//增
addAuth({
authId: id, idType: this.idType,
authData: this.baseInfo.databaseName
, authType: this.authType
}).then(response => {
this.$message.success("授权成功");
this.setAuthInfo();
});
} else {
//删
console.log("val",val)
console.log("row",row)
console.log("id",id)
this.argumentsList={}
this.argumentsList.authId=id
this.argumentsList.authData=this.baseInfo.databaseName
this.argumentsList.authType=this.authType
this.argumentsList.idType=this.idType
delAuth(this.argumentsList).then(response => {
this.$message.success("取消授权成功");
this.setAuthInfo();
});
}
}
}
};
</script>

200
src/views/dataSource/assetAuthorization/auth/AuthTable.vue 100644
View File

@ -0,0 +1,200 @@
<template>
<div class="app-container">
<el-descriptions title="基本信息" direction="vertical" :column="4" border>
<el-descriptions-item label="数据接入名称">{{baseInfo.accessSourceName}}</el-descriptions-item>
<el-descriptions-item label="系统名称">{{baseInfo.dataSourceSystemName}}</el-descriptions-item>
<el-descriptions-item label="数据库名称" :span="2">{{baseInfo.databaseName}}</el-descriptions-item>
<el-descriptions-item label="表名称">{{asset2.name}}</el-descriptions-item>
<el-descriptions-item label="表中文名称">{{asset2.as}}</el-descriptions-item>
<el-descriptions-item label="数据量">{{asset2.dataTotal}}</el-descriptions-item>
</el-descriptions>
<el-tabs type="border-card" v-model="idType" style="margin-top: 20px">
<el-tab-pane label="部门授权" name="dept">
<el-table
ref="deptTable"
v-loading="loading"
:data="deptList"
:default-expand-all="true"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="deptId"
>
<el-table-column label="部门名称" prop="deptName" ></el-table-column>
<el-table-column label="部门负责人" prop="leader" ></el-table-column>
<el-table-column label="邮箱" prop="email" ></el-table-column>
<el-table-column align="center" label="创建时间" prop="createTime" >
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" prop="createTime" >
<template slot-scope="scope">
<el-switch
style="display: block"
v-model="scope.row.isAuth"
@change="(val)=>authChange(val,scope.row,scope.row.deptId)"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="已授权"
inactive-text="未授权">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
</el-tab-pane>
<el-tab-pane label="用户授权" name="user">
<el-table ref="table" v-loading="loading" :data="userList">
<el-table-column align="center" label="用户名称" prop="userName"/>
<el-table-column align="center" label="用户昵称" prop="nickName"/>
<el-table-column align="center" label="用户部门" prop="dept.deptName"/>
<el-table-column align="center" label="用户邮箱" prop="email"/>
<el-table-column align="center" label="用户手机号" prop="phonenumber"/>
<el-table-column align="center" label="创建时间" prop="createTime" />
<el-table-column align="center" label="操作" prop="createTime" width="200px" >
<template slot-scope="scope">
<el-switch
style="display: block"
v-model="scope.row.isAuth"
active-color="#13ce66"
inactive-color="#ff4949"
@change="(val)=>authChange(val,scope.row,scope.row.userId)"
active-text="已授权"
inactive-text="未授权">
</el-switch>
</template>
</el-table-column>
</el-table>
<pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { parseTime } from '@/utils/muyu'
import {listDept} from "@/api/system/dept";
import {listUser} from "@/api/system/user";
import {addAuth, delAuth, listAuth} from "@/api/accredit/auth";
export default {
name: "AuthTable",
props:{
baseInfo:{
type:Object,
default:{}
},
asset2:{
type:Object,
default:{}
}
},
data() {
return {
// 遮罩层
loading: true,
idType: "dept",
// 分页信息
total: 0,
pageNum: 1,
pageSize: 1,
deptData:[],
// 部门列表
deptList: [],
// 用户列表
userList: [],
authType:'table',
argumentsList:{
authId:"",
idType:"",
authData:"",
authType:"",
}
};
},
watch:{
baseInfo:{
handler(){
this.loading = true;
setTimeout(() => this.loading = false, 200)
this.init();
},
immediate:true,
deep:true
},
idType:{
handler(){
this.setAuthInfo();
},
immediate:true
},
},
methods: {
parseTime,
init(){
listDept(null).then(response => {
this.deptData = response.data;
this.deptList = this.handleTree(response.data, "deptId");
});
listUser(null).then(response => {
this.userList = response.data.rows;
}
);
setTimeout(()=>{
this.setAuthInfo();
},600);
},
setAuthInfo(){
listAuth({idType:this.idType,authType:this.authType}).then(response=>{
let data;
if(this.idType==='dept'){
data=this.deptData;
}else {
data=this.userList;
}
data.forEach(x=>{
response.data.rows.forEach(y=>{
let id=y.authData.split(",")[1];
if(this.idType==='dept'&&x.deptId===y.authId&&this.baseInfo.databaseName +","+this.asset2.name==y.authData){
console.log(this.baseInfo)
this.$set(x,'isAuth',true);
this.$set(x,'assetAuthId',y.id);
}else if(this.idType==='user'&&x.userId===y.authId&&this.baseInfo.databaseName +","+this.asset2.name==y.authData){
this.$set(x,'isAuth',true);
this.$set(x,'assetAuthId',y.id);
}
})
})
if(this.idType === 'dept'){
this.deptList = this.handleTree(this.deptData, "deptId");
}
})
},
authChange(val,row,id){
if(val){
//增
addAuth({authId:id,idType:this.idType,
authData:this.baseInfo.databaseName+','+this.asset2.name
,authType:this.authType}).then(response=>{
this.$message.success("授权成功");
this.setAuthInfo();
});
}else {
this.argumentsList={}
this.argumentsList.authId=id
this.argumentsList.authData=this.baseInfo.databaseName +","+ this.asset2.name
this.argumentsList.authType=this.authType
this.argumentsList.idType=this.idType
//删
delAuth(this.argumentsList).then(response=>{
this.$message.success("取消授权成功");
this.setAuthInfo();
});
}
}
},
};
</script>

124
src/views/dataSource/assetAuthorization/index.vue 100644
View File

@ -0,0 +1,124 @@
<template>
<el-container :style="{height: mainHeight + 'px'}">
<el-aside>
<el-tree :data="assetStructureList"
:load="expandTable"
lazy
@node-click="showAssetsFun"
:props="defaultProps">
<div class="custom-tree-node" slot-scope="{ node, data }">
<div v-if="data.type === 0">{{ data. accessSourceName + '('+data.databaseName + '-' + data.dataSourceSystemName+')' }}</div>
<div v-if="data.type === 1">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
</div>
</el-tree>
</el-aside>
<el-main>
<el-container>
<el-main>
<el-empty v-if="showAssets === null" description="暂无数据" style="height: 100%;background-color: white"></el-empty>
<auth-data-source v-if="showAssets === 0" :baseInfo="asset" />
<auth-table v-else-if="showAssets === 1" :baseInfo="asset" :asset2="asset2"/>
</el-main>
</el-container>
</el-main>
</el-container>
</template>
<script>
import AuthDataSource from '@/views/dataSource/assetAuthorization/auth/AuthDataSource.vue'
import AuthTable from '@/views/dataSource/assetAuthorization/auth/AuthTable.vue'
import {findAssetStructure, findInformationById} from "@/api/dataSource/source";
export default {
name: 'assetAuthorization',
components: { AuthTable, AuthDataSource},
data() {
return {
mainHeight: window.innerHeight - 85,
defaultProps: {
children: 'childrenList',
label: 'name'
},
assetStructureList: [],
childrenList: [],
showAssets: null,
asset:{},
asset2:{},
}
},
created() {
this.getList();
},
methods: {
expandTable(node, resolve) {
if (node.level === 0){
return resolve(this.assetStructureList);
}
const { data } = node;
if (node.level===1){
this.asset ={}
console.log(data)
this.asset.accessSourceName=data.accessSourceName
this.asset.dataSourceSystemName=data.dataSourceSystemName
this.asset.databaseName=data.databaseName
console.log("asset",this.asset)
}
if(node.level === 2) {
this.asset2 ={}
this.asset2.name=data.name
this.asset2.as=data.as
this.asset2.dataTotal=data.dataTotal
console.log("asset",this.asset)
}
findInformationById(data.id).then(
res=>{
this.childrenList=res.data;
}
)
this.showAssets = data.type;
if (data.type === 1) {
return resolve([])
}
// 模拟异步操作，延迟返回子节点数据
setTimeout(() => {
resolve(this.childrenList);
}, 500);
// 设置标题
this.title = data.accessSourceName + '(' + data.databaseName + '-' + data.dataSourceSystemName + ')';
},
//树状列表
getList(){
findAssetStructure().then(
res=>{
this.assetStructureList=res.data;
}
)
},
}
}
</script>
<style scoped lang="scss">
.el-aside {
margin: 0;
padding: 0;
width: 400px;
background-color: white;
}
.el-main {
background-color: #f1f1f1;
}
.custom-tree-node{
height: 30px;
}
</style>

6
src/views/dataSource/assets/index.vue
View File

@ -94,13 +94,7 @@ export default {
}
)
if (data.type === 1){
findDataBaseByInformationId(data.id).then(
res=>{
this.databaseTable=res.data;
// console.log("res",this.databaseTable)
}
)
}
setTimeout(() => {