307 lines
9.7 KiB
Vue
307 lines
9.7 KiB
Vue
<template>
|
||
<div>
|
||
<el-container>
|
||
<el-aside width="30%">
|
||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||
</el-aside>
|
||
|
||
<!-- {-->
|
||
<!-- "dataResourceName": "黑鬼",-->
|
||
<!-- "dataBaseName": "text",-->
|
||
<!-- "tableNameB": "engine_version",-->
|
||
<!-- "dataNum": 4,-->
|
||
<!-- "tableRemark": "",-->
|
||
<!-- "dataSourceSystemName": null-->
|
||
<!-- }-->
|
||
|
||
<el-main>
|
||
|
||
<el-card class="box-card">
|
||
|
||
<el-descriptions title="基本信息">
|
||
<el-descriptions-item label="数据接入名称">{{tableBasic.dataResourceName}}</el-descriptions-item>
|
||
<el-descriptions-item label="系统名称">{{tableBasic.dataSourceSystemName}}</el-descriptions-item>
|
||
<el-descriptions-item label="数据库名称">{{tableBasic.dataBaseName}}</el-descriptions-item>
|
||
<el-descriptions-item label="表名称">{{tableBasic.tableNameB}}</el-descriptions-item>
|
||
<el-descriptions-item label="表中文名称">{{tableBasic.tableRemark}}</el-descriptions-item>
|
||
<el-descriptions-item label="数据量">{{tableBasic.dataNum}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
</el-card>
|
||
|
||
<el-card>
|
||
|
||
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="部门授权" name="first">
|
||
|
||
<el-table
|
||
v-if="refreshTable"
|
||
v-loading="loading"
|
||
:data="deptList"
|
||
:default-expand-all="isExpandAll"
|
||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||
row-key="deptId"
|
||
>
|
||
<el-table-column label="部门名称" prop="deptName" width="260"></el-table-column>
|
||
<el-table-column label="部门负责人" prop="leader" width="200"></el-table-column>
|
||
<el-table-column label="邮箱" prop="email" width="200"></el-table-column>
|
||
<el-table-column align="center" label="创建时间" prop="createTime" width="200">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" prop="status" width="200"></el-table-column>
|
||
|
||
<el-table-column label="状态" width="200">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.status"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
:active-value='0'
|
||
:inactive-value='1'
|
||
active-text="已授权"
|
||
inactive-text="未授权"
|
||
@change="updateDeptStatus(scope.row)"
|
||
>
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>-->
|
||
|
||
|
||
</el-table>
|
||
|
||
|
||
</el-tab-pane>
|
||
|
||
|
||
<el-tab-pane label="用户授权" name="second">
|
||
|
||
<el-table
|
||
:data="userList"
|
||
>
|
||
<el-table-column label="用户名称" prop="userName" width="260"></el-table-column>
|
||
<el-table-column label="用户昵称" prop="nickName" width="200"></el-table-column>
|
||
<el-table-column label="用户部门" prop="deptName" width="200"></el-table-column>
|
||
<el-table-column label="用户邮箱" prop="email" width="200"></el-table-column>
|
||
<el-table-column label="用户手机号" prop="phoneNumber" width="200"></el-table-column>
|
||
<el-table-column align="center" label="创建时间" prop="createTime" width="200">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="200">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.status"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
:active-value='0'
|
||
:inactive-value='1'
|
||
@change="updateDeptStatus(scope.row)"
|
||
>
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>-->
|
||
|
||
|
||
</el-table>
|
||
|
||
|
||
</el-tab-pane>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- <el-tab-pane label="用户授权" name="second">-->
|
||
<!-- <el-table-->
|
||
<!-- v-if="refreshTable"-->
|
||
<!-- v-loading="loading"-->
|
||
<!-- :data="deptList"-->
|
||
<!-- :default-expand-all="isExpandAll"-->
|
||
<!-- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"-->
|
||
<!-- row-key="deptId"-->
|
||
<!-- >-->
|
||
<!-- <el-table-column label="用户名称" prop="deptName" width="260"></el-table-column>-->
|
||
<!-- <el-table-column label="用户昵称" prop="orderNum" width="200"></el-table-column>-->
|
||
<!-- <el-table-column label="用户名称" prop="orderNum" width="200"></el-table-column>-->
|
||
<!-- <el-table-column label="用户部门" prop="orderNum" width="200"></el-table-column>-->
|
||
<!-- <el-table-column label="用户邮箱" prop="orderNum" width="200"></el-table-column>-->
|
||
<!-- <el-table-column label="用户手机号" prop="orderNum" width="200"></el-table-column>-->
|
||
<!-- <el-table-column label="创建时间" prop="orderNum" width="200"></el-table-column>-->
|
||
<!-- <template slot-scope="scope">-->
|
||
<!-- <el-switch-->
|
||
<!-- v-model="scope.row.status"-->
|
||
<!-- active-color="#13ce66"-->
|
||
<!-- inactive-color="#ff4949"-->
|
||
<!-- active-value="0"-->
|
||
<!-- inactive-value="1">-->
|
||
<!-- </el-switch>-->
|
||
<!-- </template>-->
|
||
|
||
<!-- </el-table>-->
|
||
<!-- </el-tab-pane>-->
|
||
|
||
|
||
</el-tabs>
|
||
|
||
|
||
</el-card>
|
||
|
||
</el-main>
|
||
</el-container>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
|
||
import {findDeptListStatus, findTableValueList, findUserListStatus} from "@/api/etl/switch";
|
||
import {findTableInfoList} from "@/api/etl/switch";
|
||
import {findAccredit} from "@/api/etl/switch";
|
||
import {addMiddle} from "@/api/etl/switch";
|
||
import {remove} from "@/api/etl/switch";
|
||
import {shouldAdd} from "script-ext-html-webpack-plugin/lib/custom-attributes";
|
||
|
||
|
||
// import {findStructureByTableId} from "@/api/etl/switch";
|
||
export default {
|
||
dicts: ['yes_no'],
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
//这里存放数据"
|
||
return {
|
||
accredit:{
|
||
deptId:'',
|
||
basicId:'',
|
||
tableId:'',
|
||
userId:'',
|
||
},
|
||
|
||
userList:[
|
||
|
||
],
|
||
activeName: 'first',
|
||
// 重新渲染表格状态
|
||
refreshTable: true,
|
||
// 是否展开，默认全部展开
|
||
isExpandAll: true,
|
||
// 遮罩层
|
||
loading: true,
|
||
//表单树数据
|
||
deptList:[
|
||
|
||
],
|
||
DataValue:[],
|
||
|
||
data:{
|
||
|
||
},
|
||
defaultProps:{
|
||
children:"children",
|
||
label:'tableName'
|
||
},
|
||
tableBasic:{
|
||
|
||
},
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
updateDeptStatus(row){
|
||
|
||
this.accredit.deptId=row.deptId
|
||
this.accredit.userId=row.userId
|
||
|
||
if (row.status===0){
|
||
addMiddle(this.accredit).then(res=>{
|
||
if (res.code===200){
|
||
alert("授权成功")
|
||
}
|
||
})
|
||
}
|
||
|
||
if (row.status===1){
|
||
remove(this.accredit).then(res=>{
|
||
if (res.code===200){
|
||
alert("取消授权成功")
|
||
}
|
||
})
|
||
}
|
||
|
||
console.log(row);
|
||
},
|
||
toggleExpandAll() {
|
||
this.refreshTable = false;
|
||
this.isExpandAll = !this.isExpandAll;
|
||
this.$nextTick(() => {
|
||
this.refreshTable = true;
|
||
});
|
||
},
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
},
|
||
findTAbleInfoList(){
|
||
findTableInfoList().then(res=>{
|
||
this.data=res.data;
|
||
})
|
||
},
|
||
handleNodeClick(data) {
|
||
this.accredit.tableId = data.id;
|
||
this.accredit.basicId = data.basicId;
|
||
this.loading = true;
|
||
// if (data.children==null){
|
||
findDeptListStatus(data.id, data.basicId).then(res => {
|
||
this.deptList = this.handleTree(res.data, "deptId");
|
||
this.loading = false;
|
||
})
|
||
findUserListStatus(data.id, data.basicId).then(res => {
|
||
this.userList = res.data;
|
||
})
|
||
findAccredit(data.id).then(res => {
|
||
this.tableBasic = res;
|
||
})
|
||
// }
|
||
|
||
console.log(data);
|
||
},
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.findTAbleInfoList();
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
|