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

feat() 数据授权基础页面

chao
chao 2024-05-06 14:43:11 +08:00
parent 603c935ff7
commit ee0932da7c
3 changed files with 89 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
src/views/data/accredit/auth/AuthDataSource.vue
View File

@ -1,21 +1,21 @@
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="baseInfo" label-width="120px">
<el-form ref="form" label-width="120px">
<el-row>
<el-col :offset="2" :span="8">
<el-form-item label="数据接入名称" prop="nickName">
<el-input v-model="baseInfo.name" disabled/>
<el-input v-model="dataSourceName" disabled/>
</el-form-item>
</el-col>
<el-col :offset="2" :span="8">
<el-form-item label="系统名称" prop="userName">
<el-input v-model="baseInfo.systemName" disabled/>
<el-input v-model="dataSourceDatabaseName" 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-input v-model="dataSourceSystemName" disabled/>
</el-form-item>
</el-col>
</el-row>
@ -85,8 +85,17 @@
import {parseTime} from "@/utils/etl";
import {listDept} from "@/api/system/dept";
import {listUser} from "@/api/system/user";
export default {
props: {
dataSourceName: null,
dataSourceDatabaseName: null,
dataSourceSystemName: null,
deptList: [],
userList: [],
},
name: "AuthDataSource",
data() {
return {
@ -97,16 +106,6 @@ export default {
total: 0,
pageNum: 1,
pageSize: 1,
// 基本信息
baseInfo: {
name: "测试1",
systemName: "云计算系统",
databaseName: "yunjisuan",
},
// 部门列表
deptList: [],
// 用户列表
userList: []
};
},
created() {
@ -117,229 +116,7 @@ export default {
methods: {
parseTime,
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": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 101,
"parentId": 100,
"ancestors": "0,100",
"deptName": "深圳总公司",
"orderNum": 1,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 102,
"parentId": 100,
"ancestors": "0,100",
"deptName": "长沙分公司",
"orderNum": 2,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 103,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "研发部门",
"orderNum": 1,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 104,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "市场部门",
"isAuth": true,
"orderNum": 2,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 105,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "测试部门",
"orderNum": 3,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 106,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "财务部门",
"orderNum": 4,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 107,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "运维部门",
"orderNum": 5,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 108,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "市场部门",
"orderNum": 1,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 109,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "财务部门",
"orderNum": 2,
"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": "admin",
"createTime": "2023-04-23 16:11:38",
"updateBy": null,
"updateTime": null,
"remark": "管理员",
"userId": 1,
"deptId": 103,
"userName": "admin",
"nickName": "智能车联",
"email": "ry@163.com",
"phonenumber": "15888888888",
"isAuth": true,
"dept": {
"deptName": "研发部门"
}
},
{
"createBy": "admin",
"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": "测试部门"
}
}
]
}
},
};

261
src/views/data/accredit/auth/AuthTable.vue
View File

@ -1,36 +1,36 @@
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="baseInfo" label-width="120px">
<el-form ref="form" label-width="120px">
<el-row>
<el-col :offset="2" :span="8">
<el-form-item label="数据接入名称" prop="nickName">
<el-input v-model="baseInfo.name" disabled/>
<el-input v-model="dataSourceName" disabled/>
</el-form-item>
</el-col>
<el-col :offset="2" :span="8">
<el-form-item label="系统名称" prop="userName">
<el-input v-model="baseInfo.systemName" disabled/>
<el-input v-model="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-input v-model="dataSourceDatabaseName" disabled/>
</el-form-item>
</el-col>
<el-col :offset="2" :span="8">
<el-form-item label="表名称" prop="nickName">
<el-input v-model="baseInfo.tableName" disabled/>
<el-input v-model="tableName" disabled/>
</el-form-item>
</el-col>
<el-col :offset="2" :span="8">
<el-form-item label="表中文名" prop="nickName">
<el-input v-model="baseInfo.tableAsName" disabled/>
<el-input v-model="tableNameAnnotation" disabled/>
</el-form-item>
</el-col>
<el-col :offset="2" :span="8">
<el-form-item label="数据量" prop="nickName">
<el-input v-model="baseInfo.total" disabled/>
<el-input v-model="tableDataCount" disabled/>
</el-form-item>
</el-col>
</el-row>
@ -101,6 +101,16 @@
import {parseTime} from "@/utils/etl";
export default {
props: {
dataSourceName: null,
dataSourceDatabaseName: null,
dataSourceSystemName: null,
tableName: null,
tableNameAnnotation: null,
tableDataCount: null,
deptList: [],
userList: [],
},
name: "AuthTable",
data() {
return {
@ -111,19 +121,6 @@ export default {
total: 0,
pageNum: 1,
pageSize: 1,
// 基本信息
baseInfo: {
name: "测试1",
systemName: "云计算系统",
databaseName: "yunjisuan",
tableName: "sys_user",
tableAsName: "用户表",
total: "12546条",
},
// 部门列表
deptList: [],
// 用户列表
userList: []
};
},
created() {
@ -134,229 +131,7 @@ export default {
methods: {
parseTime,
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": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 101,
"parentId": 100,
"ancestors": "0,100",
"deptName": "深圳总公司",
"orderNum": 1,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 102,
"parentId": 100,
"ancestors": "0,100",
"deptName": "长沙分公司",
"orderNum": 2,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 103,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "研发部门",
"orderNum": 1,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 104,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "市场部门",
"isAuth": true,
"orderNum": 2,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 105,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "测试部门",
"orderNum": 3,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 106,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "财务部门",
"orderNum": 4,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 107,
"parentId": 101,
"ancestors": "0,100,101",
"deptName": "运维部门",
"orderNum": 5,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 108,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "市场部门",
"orderNum": 1,
"leader": "muyu牧鱼",
"phone": "15888888888",
"email": "ry@qq.com",
"status": "0",
"delFlag": "0",
"parentName": null,
"children": []
},
{
"createBy": 1,
"createTime": "2023-09-29 11:47:27",
"updateBy": null,
"updateTime": null,
"deptId": 109,
"parentId": 102,
"ancestors": "0,100,102",
"deptName": "财务部门",
"orderNum": 2,
"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": "admin",
"createTime": "2023-04-23 16:11:38",
"updateBy": null,
"updateTime": null,
"remark": "管理员",
"userId": 1,
"deptId": 103,
"userName": "admin",
"nickName": "智能车联",
"email": "ry@163.com",
"phonenumber": "15888888888",
"isAuth": true,
"dept": {
"deptName": "研发部门"
}
},
{
"createBy": "admin",
"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": "测试部门"
}
}
]
}
},
};

63
src/views/data/accredit/index.vue
View File

@ -18,8 +18,21 @@
</el-aside>
<el-container>
<el-main>
<auth-data-source v-if="showAuth === 'dataSource'"/>
<auth-table v-else-if="showAuth === 'dataTable'"/>
<auth-data-source v-if="showAuth === 'dataSource'"
:dataSourceName="dataSourceName"
:dataSourceDatabaseName="dataSourceDatabaseName"
:dataSourceSystemName="dataSourceSystemName"
:deptList="deptList"
:userList="userList"/>
<auth-table v-else-if="showAuth === 'dataTable'"
:dataSourceName="dataSourceName"
:dataSourceDatabaseName="dataSourceDatabaseName"
:dataSourceSystemName="dataSourceSystemName"
:tableName="tableName"
:tableNameAnnotation="tableNameAnnotation"
:tableDataCount="tableDataCount"
:deptList="deptList"
:userList="userList"/>
</el-main>
</el-container>
</el-container>
@ -29,10 +42,12 @@
import AuthDataSource from './auth/AuthDataSource.vue'
import AuthTable from './auth/AuthTable.vue'
import {listAssetStructure, selectAssetSouructureTableList} from "@/api/data/structure";
import {listDept} from "@/api/system/dept";
import {listUser} from "@/api/system/user";
export default {
name: 'assetStructure',
components: { AuthTable, AuthDataSource },
components: {AuthTable, AuthDataSource},
data() {
return {
mainHeight: window.innerHeight - 85,
@ -46,16 +61,47 @@ export default {
assetStructureList: [],
// 子节点列表
childrenList: [],
// 数据源名称
dataSourceName: null,
// 数据库名称
dataSourceDatabaseName: null,
// 系统名称
dataSourceSystemName: null,
// 表名称
tableName: null,
// 表注释
tableNameAnnotation: null,
// 表数据条数
tableDataCount: null,
deptList: [],
userList: [],
}
},
created() {
this.listAssetStructure();
this.getDeptList();
this.getUserList();
},
methods: {
/** 查询部门列表 */
getDeptList() {
this.loading = true;
listDept(null).then(response => {
this.deptList = this.handleTree(response.data, "deptId");
this.loading = false;
});
},
/** 查询用户列表 */
getUserList() {
debugger
this.loading = true;
listUser(null).then(response => {
this.userList = response.data.rows;
this.total = response.data.total;
this.loading = false;
}
);
},
// 查询数据资产列表
listAssetStructure() {
listAssetStructure().then(response => {
@ -67,7 +113,7 @@ export default {
)
})
},
expandTable( node, resolve){
expandTable(node, resolve) {
if (node.level === 0) return resolve(this.assetStructureList);
const {data} = node;
if (data.type === 'dataTable') {
@ -80,6 +126,9 @@ export default {
showAssetsFun(data) {
this.showAuth = data.type;
if (data.type === 'dataSource') {
this.dataSourceName = data.dataSourceName;
this.dataSourceDatabaseName = data.dataSourceDatabaseName;
this.dataSourceSystemName = data.dataSourceSystemName;
// 异步调用 selectAssetSourctureTableList API 函数，传入当前节点的 id 作为参数
selectAssetSouructureTableList(data.id).then((response) => {
// 打印 API 返回的响应数据
@ -99,7 +148,7 @@ export default {
this.tableNameAnnotation = data.tableNameAnnotation;
this.tableDataCount = data.tableDataCount
this.childrenList.forEach(item => {
if (item.tableName === this.tableName){
if (item.tableName === this.tableName) {
this.assetTableDetailsList = item.assetTableDetailsList
}
return
@ -120,10 +169,12 @@ export default {
width: 400px;
background-color: white;
}
.el-main {
background-color: #f1f1f1;
}
.custom-tree-node{
.custom-tree-node {
height: 30px;
}
</style>