ruochen
/
etl-ui
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 数据授权(初版)

master
rouchen 2024-04-27 19:50:59 +08:00
parent a3c1acf83a
commit 5d3d0b3c76
5 changed files with 339 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/kvt/kvt.js
View File

@ -121,13 +121,7 @@ export function selectChildAll() {
method: 'post' method: 'post'
}) })
} }
//查询所有部门列表
export function selectDept() {
return request({
url: '/kvt/kvt/selectDept',
method: 'post'
})
}
//查询字典 //查询字典
export function selectDictionaryy(id) { export function selectDictionaryy(id) {
return request({ return request({

157
src/views/kvt/assetAuthorization/auth/AuthDataSource.vue
View File

@ -1,33 +1,34 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<h4 class="form-header h4">基本信息</h4> <h4 class="form-header h4">基本信息</h4>
55555555
{{DataSource}} {{DataSource}}
<el-form ref="form" :model="DataSource" label-width="120px"> <el-form ref="form" :model="DataSource" label-width="120px">
<el-row> <el-row>
<el-col :offset="2" :span="8"> <el-col :offset="2" :span="8">
<el-form-item label="数据接入名称" prop="nickName"> <el-form-item label="数据接入名称" prop="nickName">
<el-input v-model="form.name" disabled/> <el-input v-model="DataSource.name" disabled/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :offset="2" :span="8"> <el-col :offset="2" :span="8">
<el-form-item label="系统名称" prop="userName"> <el-form-item label="系统名称" prop="userName">
<el-input v-model="form.systemName" disabled/> <el-input v-model="DataSource.systemName" disabled/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :offset="2" :span="8"> <el-col :offset="2" :span="8">
<el-form-item label="数据库名称" prop="nickName"> <el-form-item label="数据库名称" prop="nickName">
<el-input v-model="form.databaseName" disabled/> <el-input v-model="DataSource.databaseName" disabled/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-tabs type="border-card" v-model="activeName"> <el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="部门授权" name="dept"> <el-tab-pane label="部门授权" name="dept">
<el-table <el-table
ref="deptTable" ref="deptTable"
v-loading="loading" v-loading="loading"
:data="deptList" :data="deptlists"
:normalizer="normalizer"
:default-expand-all="true" :default-expand-all="true"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="deptId" row-key="deptId"
@ -44,17 +45,21 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
style="display: block" style="display: block"
v-model="scope.row.isAuth" v-model="scope.row.status"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-text="已授权" active-text="已授权"
inactive-text="未授权" > inactive-text="未授权" >
<!-- :active-value="1"-->
<!-- :inactive-value="0"-->
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/> <pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="用户授权" name="user"> <el-tab-pane label="用户授权" name="user">
<el-table ref="table" v-loading="loading" :data="userList"> <el-table ref="table" v-loading="loading" :data="userList">
<el-table-column align="center" label="用户名称" prop="userName"/> <el-table-column align="center" label="用户名称" prop="userName"/>
@ -67,11 +72,14 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
style="display: block" style="display: block"
v-model="scope.row.isAuth" v-model="scope.row.status"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-text="已授权" active-text="已授权"
inactive-text="未授权"> inactive-text="未授权">
<!-- :active-value="1"-->
<!-- :inactive-value="0"-->
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
@ -90,7 +98,9 @@ import { listDept } from '@/api/system/dept'
export default { export default {
name: "AuthDataSource", name: "AuthDataSource",
props: [ props: [
"DataSource" "deptlists",
"DataSource",
"userList"
], ],
data() { data() {
return { return {
@ -102,27 +112,62 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 1, pageSize: 1,
// 基本信息 // 基本信息
baseInfo: { baseInfo: {},
},
// 部门列表 // 部门列表
deptList: [], deptList: [],
// 用户列表 // // 用户列表
userList: [] // userList: []
}; };
}, },
created() { created() {
this.loading = true; this.loading = true;
setTimeout(() => this.loading = false, 200) setTimeout(() => this.loading = false, 200)
this.init() },
watch: {
'activeName.status'(newVal) {
if (newVal === 0) {
alert("闭关")
// 开关为激活状态，执行相关逻辑
} else if (newVal === 1) {
alert("打开")
// 开关为未激活状态，执行相关逻辑
}
},
'userList.status'(newVal) {
if (newVal === 0) {
alert("闭关")
// 开关为激活状态，执行相关逻辑
} else if (newVal === 1) {
alert("打开")
// 开关为未激活状态，执行相关逻辑
}
}
}, },
methods: { methods: {
parseTime, parseTime,
init(){
let response = []; /** 转换部门数据结构 */
listDept().then(res => { normalizer(node) {
console.log(res) if (node.children && !node.children.length) {
this.deptList = res.date delete node.children;
}) }
return {
id: node.deptId,
label: node.deptName,
children: node.children
};
},
// init(){
// let response = [];
// listDept().then(res => {
// console.log(res)
// this.deptList = res.date
// })
// "code": 200, // "code": 200,
// "msg": "操作成功", // "msg": "操作成功",
@ -165,43 +210,43 @@ export default {
// }, // },
// ] // ]
this.deptList = this.handleTree(response.data, "deptId"); // this.deptList = this.handleTree(response.data, "deptId");
this.userList = [ // this.userList = [
{ // {
"createBy": "admin", // "createBy": "admin",
"createTime": "2023-04-23 16:11:38", // "createTime": "2023-04-23 16:11:38",
"updateBy": null, // "updateBy": null,
"updateTime": null, // "updateTime": null,
"remark": "管理员", // "remark": "管理员",
"userId": 1, // "userId": 1,
"deptId": 103, // "deptId": 103,
"userName": "admin", // "userName": "admin",
"nickName": "智能车联", // "nickName": "智能车联",
"email": "ry@163.com", // "email": "ry@163.com",
"phonenumber": "15888888888", // "phonenumber": "15888888888",
"isAuth": true, // "isAuth": true,
"dept": { // "dept": {
"deptName": "研发部门" // "deptName": "研发部门"
} // }
}, // },
{ // {
"createBy": "admin", // "createBy": "admin",
"createTime": "2023-04-23 16:11:38", // "createTime": "2023-04-23 16:11:38",
"updateBy": null, // "updateBy": null,
"updateTime": null, // "updateTime": null,
"remark": "测试员", // "remark": "测试员",
"userId": 2, // "userId": 2,
"deptId": 105, // "deptId": 105,
"userName": "ry", // "userName": "ry",
"nickName": "智能车联", // "nickName": "智能车联",
"email": "ry@qq.com", // "email": "ry@qq.com",
"phonenumber": "15666666666", // "phonenumber": "15666666666",
"dept": { // "dept": {
"deptName": "测试部门" // "deptName": "测试部门"
} // }
} // }
] // ]
} // }
}, },
}; };

200
src/views/kvt/assetAuthorization/auth/AuthTable.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<h4 class="form-header h4">基本信息</h4> <h4 class="form-header h4">基本信息</h4>
2222
{{DataSource}} {{DataSource}}
<el-form ref="form" :model="DataSource" label-width="120px"> <el-form ref="form" :model="DataSource" label-width="120px">
<el-row> <el-row>
@ -36,13 +37,13 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-tabs type="border-card" v-model="activeName"> <el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="部门授权" name="dept"> <el-tab-pane label="部门授权" name="dept">
<el-table <el-table
ref="deptTable" ref="deptTable"
v-loading="loading" v-loading="loading"
:data="deptList" :data="deptlists"
:normalizer="normalizer"
:default-expand-all="true" :default-expand-all="true"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="deptId" row-key="deptId"
@ -59,7 +60,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
style="display: block" style="display: block"
v-model="scope.row.isAuth" v-model="scope.row.status"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-text="已授权" active-text="已授权"
@ -70,6 +71,7 @@
</el-table> </el-table>
<pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/> <pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
</el-tab-pane> </el-tab-pane>
{{userList}}
<el-tab-pane label="用户授权" name="user"> <el-tab-pane label="用户授权" name="user">
<el-table ref="table" v-loading="loading" :data="userList"> <el-table ref="table" v-loading="loading" :data="userList">
<el-table-column align="center" label="用户名称" prop="userName"/> <el-table-column align="center" label="用户名称" prop="userName"/>
@ -82,11 +84,16 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
style="display: block" style="display: block"
v-model="scope.row.isAuth" v-model="scope.row.status"
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949" inactive-color="#ff4949"
active-text="已授权" active-text="已授权"
inactive-text="未授权" > inactive-text="未授权" >
<!-- :active-value="1"-->
<!-- :inactive-value="0"-->
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
@ -101,12 +108,13 @@
import { parseTime } from '@/utils/muyu' import { parseTime } from '@/utils/muyu'
import { listDept } from '@/api/system/dept' import { listDept } from '@/api/system/dept'
import { selectDept } from '@/api/kvt/kvt'
export default { export default {
name: "AuthTable", name: "AuthTable",
props: [ props: [
"DataSource" "DataSource",
"deptlists",
"userList"
], ],
data() { data() {
return { return {
@ -118,98 +126,124 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 1, pageSize: 1,
// 基本信息 // 基本信息
baseInfo: { baseInfo: {},
name: "测试1",
systemName: "云计算系统",
databaseName: "yunjisuan",
tableName: "sys_user",
tableAsName: "用户表",
total: "12546条",
},
// 部门列表 // 部门列表
deptList: [], deptList: [],
// 用户列表 // // 用户列表
userList: [] // userList: []
}; };
}, },
watch: {
'activeName.status'(newVal) {
if (newVal === 0) {
// 开关为激活状态，执行相关逻辑
} else if (newVal === 1) {
alert("打开")
// 开关为未激活状态，执行相关逻辑
}
},
'userList.status'(newVal) {
if (newVal === 0) {
// 开关为激活状态，执行相关逻辑
} else if (newVal === 1) {
alert("打开")
// 开关为未激活状态，执行相关逻辑
}
}
},
created() { created() {
this.loading = true; this.loading = true;
setTimeout(() => this.loading = false, 200) setTimeout(() => this.loading = false, 200)
// this.init() // this.init()
}, },
mounted() { // mounted() {
this.selectDept() // this.selectDept()
}, // },
methods: { methods: {
parseTime, parseTime,
init(){ /** 转换部门数据结构 */
let response = { normalizer(node) {
"code": 200, if (node.children && !node.children.length) {
"msg": "操作成功", delete node.children;
"data": [ }
return {
id: node.deptId,
label: node.deptName,
children: node.children
};
},
// init(){
// let response = {
// "code": 200,
// "msg": "操作成功",
// "data": [
// // {
// // "createBy": 1,
// // "createTime": "2023-09-29 11:47:27",
// // "updateBy": null,
// // "updateTime": null,
// // "deptId": 100,
// // "parentId": 0,
// // "ancestors": "0",
// // "deptName": "muyu牧鱼科技",
// // "orderNum": 0,
// // "leader": "muyu牧鱼",
// // "phone": "15888888888",
// // "email": "ry@qq.com",
// // "status": "0",
// // "delFlag": "0",
// // "parentName": null,
// // "children": []
// // }
// ]
// }
// this.deptList = this.handleTree(response.data, "deptId");
// this.userList = [
// { // {
// "createBy": 1, // "createBy": "admin",
// "createTime": "2023-09-29 11:47:27", // "createTime": "2023-04-23 16:11:38",
// "updateBy": null, // "updateBy": null,
// "updateTime": null, // "updateTime": null,
// "deptId": 100, // "remark": "管理员",
// "parentId": 0, // "userId": 1,
// "ancestors": "0", // "deptId": 103,
// "deptName": "muyu牧鱼科技", // "userName": "admin",
// "orderNum": 0, // "nickName": "智能车联",
// "leader": "muyu牧鱼", // "email": "ry@163.com",
// "phone": "15888888888", // "phonenumber": "15888888888",
// "email": "ry@qq.com", // "isAuth": true,
// "status": "0", // "dept": {
// "delFlag": "0", // "deptName": "研发部门"
// "parentName": null,
// "children": []
// } // }
] // },
} // {
this.deptList = this.handleTree(response.data, "deptId"); // "createBy": "admin",
this.userList = [ // "createTime": "2023-04-23 16:11:38",
{ // "updateBy": null,
"createBy": "admin", // "updateTime": null,
"createTime": "2023-04-23 16:11:38", // "remark": "测试员",
"updateBy": null, // "userId": 2,
"updateTime": null, // "deptId": 105,
"remark": "管理员", // "userName": "ry",
"userId": 1, // "nickName": "智能车联",
"deptId": 103, // "email": "ry@qq.com",
"userName": "admin", // "phonenumber": "15666666666",
"nickName": "智能车联", // "dept": {
"email": "ry@163.com", // "deptName": "测试部门"
"phonenumber": "15888888888", // }
"isAuth": true, // }
"dept": { // ]
"deptName": "研发部门" // },
} // selectDept(){
}, // listDept().then(res => {
{ // console.log(res)
"createBy": "admin", // this.deptList = res.date
"createTime": "2023-04-23 16:11:38", // })
"updateBy": null, // },
"updateTime": null,
"remark": "测试员",
"userId": 2,
"deptId": 105,
"userName": "ry",
"nickName": "智能车联",
"email": "ry@qq.com",
"phonenumber": "15666666666",
"dept": {
"deptName": "测试部门"
}
}
]
},
selectDept(){
listDept().then(res => {
console.log(res)
this.deptList = res.date
})
}
}, },
}; };
</script> </script>

130
src/views/kvt/assetAuthorization/index.vue
View File

@ -7,16 +7,17 @@
lazy lazy
@node-click="(data) => showAuth=data.type" @node-click="(data) => showAuth=data.type"
:props="defaultProps"> :props="defaultProps">
<div class="custom-tree-node" @click="selectDepartmen(data.databaseName)" slot-scope="{ node, data }"> <div class="custom-tree-node" slot-scope="{ node, data }">
<div v-if="data.type === 1">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div> <div v-if="data.type === 1" @click="selectData(node)">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
<div v-if="data.type === 2">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div> <div v-if="data.type === 2" @click="selectTable(node)">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
</div> </div>
</el-tree> </el-tree>
</el-aside> </el-aside>
<el-container> <el-container>
<el-main> <el-main>
<auth-data-source v-if="showAuth === 1" v-bind:DataSource="assetStructureList"/> <auth-data-source v-if="showAuth === 1" v-bind:deptlists="deptList" v-bind:DataSource="authTable" v-bind:userList="userLis" />
<auth-table v-else-if="showAuth === 2" v-bind:DataSource="assetStructureList"/> <auth-table v-else-if="showAuth === 2" v-bind:deptlists ="deptList" v-bind:DataSource="authTable" v-bind:userList="userLis"/>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
@ -25,7 +26,9 @@
import AuthDataSource from './auth/AuthDataSource.vue' import AuthDataSource from './auth/AuthDataSource.vue'
import AuthTable from './auth/AuthTable.vue' import AuthTable from './auth/AuthTable.vue'
import { selectDataSource, selectDepartmen } from '@/api/kvt/kvt' import { selectChild, selectChildAll, selectDataSource, selectDepartmen, selectDictionaryy } from '@/api/kvt/kvt'
import { listDept } from '@/api/system/dept'
import { deptTreeSelect, listUser } from '@/api/system/user'
export default { export default {
name: 'assetStructure', name: 'assetStructure',
@ -80,22 +83,87 @@ export default {
// type: "dataTable", // type: "dataTable",
// childrenList: [] // childrenList: []
// } // }
] ],
deptList: [],
selectDepartmen: [],
authTable: [],
userLis: [],
// 查询参数
queryParams: {
deptName: undefined,
status: undefined,
dateRange:undefined
},
} }
}, },
created() { created() {
this.selectDataSource() this.selectDataSource()
}, },
methods: { methods: {
//查询数据库下的表
selectDepartmen(databaseName){
selectDepartmen(databaseName).then(res => {
console.log(res)
this.childrenList = res.data
console.log("res",this.assertChild) selectData(node){
}) console.log("nodenodddd",node)
let authTable ={}
const name = node.data.name
const systemName =node.data.systemName
const databaseName =node.data.databaseName
authTable = {
name,
systemName,
databaseName
}
this.authTable =authTable
this.loading = true;
listDept(this.queryParams).then(response => {
this.deptList = this.handleTree(response.data, "deptId");
this.loading = false;
});
this.loading = true;
listUser().then(response => {
this.userLis = response.data.rows;
console.log("userListuserList",this.userLis)
this.loading = false;
}
);
}, },
//查询表中的数据条数
selectTable(node){
let authTable ={}
const name = node.parent.data.name
const systemName =node.parent.data.systemName
const databaseName =node.parent.data.databaseName
const tableName =node.data.name
const tableAsName =node.data.as
const total =node.data.dataTotal
authTable ={
name,
systemName,
databaseName,
tableName,
tableAsName,
total
}
this.authTable =authTable
//部门
this.loading = true;
listDept(this.queryParams).then(response => {
this.deptList = this.handleTree(response.data, "deptId");
this.loading = false;
});
//用户
this.loading = true;
listUser().then(response => {
this.userLis = response.data.rows;
console.log("userListuserList",this.userLis)
this.loading = false;
}
);
},
// getList() {
//
// },
//查询同步数据 //查询同步数据
selectDataSource(){ selectDataSource(){
selectDataSource().then(res => { selectDataSource().then(res => {
@ -103,14 +171,46 @@ export default {
}) })
}, },
expandTable( node, resolve){ expandTable( node, resolve){
console.log("node",node)
if (node.level === 0) return resolve(this.assetStructureList); if (node.level === 0) return resolve(this.assetStructureList);
const {data} = node; const {data} = node;
if (data.type === 'dataTable') { if (data.type == 1){
selectDepartmen(data.databaseName).then(res=>{
console.log("resssss",res)
this.childrenList = res.data
})
selectDictionaryy(data.id).then(res => {
console.log("rrrr",res)
this.dictAddName = res.data
})
}
// if (node.level === 2){
// let authTable ={}
// const name = node.parent.data.name
// const systemName =node.parent.data.systemName
// const databaseName =node.parent.data.databaseName
// const tableName =node.data.name
// const tableAsName =node.data.as
// const total =node.data.dataTotal
// authTable ={
// name,
// systemName,
// databaseName,
// tableName,
// tableAsName,
// total
// }
// this.authTable =authTable
// console.log("aaaaaaaaaaaaaaaaaaaaa",this.authTable)
// }
if (data.type === 2) {
return resolve([]) return resolve([])
} }
setTimeout(() => { setTimeout(() => {
resolve(this.childrenList) resolve(this.childrenList)
}, 500); }, 500);
} }
} }
} }

1
src/views/system/user/index.vue
View File

@ -514,7 +514,6 @@ export default {
deptTreeSelect().then(response => { deptTreeSelect().then(response => {
console.log("aaa",response) console.log("aaa",response)
this.deptOptions = response.data; this.deptOptions = response.data;
}); });
}, },
// 筛选节点 // 筛选节点