feat:数据接入(优化)

src/api/dataSource/source.js

@@ -9,6 +9,17 @@ export function listSource(query) {
   })
 }
 
+// 编辑数据源(添加/修改)
+export function editDataSource(data) {
+  return request({
+    url: '/dataSource/source/editDataSource',
+    method: 'post',
+    data
+  })
+}
+
+
+
 export function getList() {
   return request({
     url: '/dataSource/source/getList',

src/views/dataSource/assetStructure/index.vue

@@ -1,178 +1,109 @@
 <template>
-  <div>
   <el-container :style="{height: mainHeight + 'px'}">
-      <el-aside width="400px" style="background-color: rgb(238, 241, 246);height: 80%">
+    <el-aside>
-          <el-tree style="background-color: white" :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+      <el-tree :data="assetStructureList"
+               :expand-on-click-node="false"
+               :load="expandTable"
+               lazy
+               @node-click="showAssetsFun"
+               :props="defaultProps">
+        <div class="custom-tree-node" slot-scope="{ node, data }">
+          <div v-if="data.type === 'dataSource'">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
+          <div v-if="data.type === 'dataTable'">{{ data.name + '-'+data.nameAs + '(' + data.dataTotal+'条)' }}</div>
+        </div>
+      </el-tree>
     </el-aside>
-
     <el-container>
-
       <el-main>
-          <el-tabs v-model="activeName">
-            <el-tab-pane label="资产结构" name="structure">
         <OverallAssets v-if="showAssets == null"/>
         <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
-              <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
+        <overall-asset-structure v-if="showAssets === 'dataTable'" :table-params="tableParams" :title="title"/>
-            </el-tab-pane>
-            <el-tab-pane label="资产数据" name="data">
-              <el-card style="height: 280px">
-                <div slot="header" class="clearfix">
-                  <span>查询语句</span>
-                </div>
-                <el-input type="textarea" v-model="source.sql" style="width: 1080px;" :rows="6"></el-input>
-                <el-button style="float: right;margin-top: 20px" @click="sql()">查询</el-button>
-
-              </el-card>
-              <br>
-              <el-card>
-                <div slot="header" class="clearfix">
-                  <span>数据资产</span>
-                </div>
-                <el-table :data="structureList" v-if="structureList!=null">
-                  <el-table-column v-for="(assets,index) in assetsList" :label="index+' ('+assets+')'" width="140">
-                    <template slot-scope="scope">
-                      {{scope.row[index].value}}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-card>
-
-            </el-tab-pane>
-          </el-tabs>
-
       </el-main>
     </el-container>
   </el-container>
-
-<!--    <el-dialog title="数据结构" :visible.sync="dialogTableVisible">-->
-<!--      <el-table :data="tableAssets">-->
-<!--        <el-table-column property="field" label="字段名" width="150"></el-table-column>-->
-<!--        <el-table-column property="type" label="类型" width="150"></el-table-column>-->
-<!--        <el-table-column property="null" label="是否为空" width="150"></el-table-column>-->
-<!--        <el-table-column property="key" label="键" width="150"></el-table-column>-->
-<!--        <el-table-column property="default" label="默认值" width="150"></el-table-column>-->
-<!--      </el-table>-->
-<!--      <div slot="footer" class="dialog-footer">-->
-<!--        <el-button @click="dialogTableVisible = false">取 消</el-button>-->
-<!--        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>-->
-<!--      </div>-->
-<!--    </el-dialog>-->
-  </div>
 </template>
-
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+import OverallAssets from './dashboard/OverallAssets.vue'
-//例如：import 《组件名称》 from '《组件路径》,
+import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
-import {assetModelList, assetsList, dataAssetList, listSource, statisticsInfo, structureList} from "@/api/dataSource/source";
+import OverallAssetStructure from './dashboard/OverallAssetStructure.vue'
-import OverallAssetStructure from "@/views/dataSource/assetStructure/dashboard/OverallAssetStructure.vue";
+import {dataAssetList, getList} from "@/api/dataSource/source";
-import OverallSpecificAssets from "@/views/dataSource/assetStructure/dashboard/OverallSpecificAssets.vue";
-import OverallAssets from "@/views/dataSource/assetStructure/dashboard/OverallAssets.vue";
-
 
 export default {
-    //import引入的组件需要注入到对象中才能使用"
+  name: 'assetStructure',
   components: { OverallAssetStructure, OverallSpecificAssets, OverallAssets },
-    props: {},
   data() {
     return {
       mainHeight: window.innerHeight - 85,
-        assetsCompute:{
-          assetsModuleSum: 0,
-          dataModuleSum: 0,
-          dataSourceSum: 0
-        },
-        showAssets: null,
-        title: {},
-        activeName: 'structure',
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          dataSourceName: null,
-          linkAddress: null
-        },
-        // 总条数
-        total: 0,
-        // 【请填写功能名称】表格数据
-        sourceList: [],
-        assetsList:[],
-        structureList:[],
-        tableAssets:[],
       defaultProps: {
-          children: 'tableList',
+        children: 'childrenList',
-          label: 'label'
+        label: 'name'
       },
-        sourceData:{},
+      assetStructureList: [
-        source: {
+      ],
-          sql: ''
+      childrenList: [
+        {
+          name: null,
+          nameAs: null,
+          dataTotal: 0,
+          type: null,
+          childrenList: []
         },
-        statisticsInfo:{}
+      ],
-      };
+      showAssets: null,
-    },
+      title: null,
-    //计算属性 类似于data概念",
+      tableParams: null
-    computed: {},
-    //监控data中的数据变化",
-    watch: {},
-    //方法集合",
-    methods: {
-      test(data){
-        this.sourceData = data
-      },
-      handleNodeClick(data) {
-        this.source = data
-        if (data.dataType === 'dataSource'){
-          dataAssetList(data).then(res => {
-            res.data.forEach(table => {
-              table.dataType = "dataTable"
-              table.label=table.tableName+"-"+table.tableComment+"("+table.tableCount+"条)"
-            })
-            data.tableList = res.data
-            this.sourceList[this.sourceList.indexOf(data)].tableList = res.data
-            this.title = data
-          })
-
-        }else{
-          this.title= data
-        }
-        this.showAssets = data.dataType
-      },
-      sql(){
-        structureList(this.source).then(res => {
-          console.log(res)
-          this.structureList = res.data.kvtList
-        })
-      },
-      getList() {
-        listSource({}).then(response => {
-          this.sourceList = response.data.rows;
-          this.sourceList.forEach(source => {
-            if (source.type=='PostGreSql'){
-              source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'
-            }else{
-              source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'
-            }
-
-            source.dataType = 'dataSource'
-            if (source.tableList!=null){
-              source.tableList.forEach(table => {
-                table.label = table.tableName+'-'+table.tableComment+'('+table.tableCount+'条)'
-                table.dataType = 'dataTable'
-              })
-            }
-          })
-          this.total = response.data.total;
-        });
     }
   },
-    //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
     this.getList()
   },
-    //生命周期 - 挂载完成（可以访问DOM元素）",
+
-    mounted() {
+  methods: {
+    getList(){
+      getList().then(res => {
+        this.assetStructureList = res
+      })
+    },
+    expandTable( node, resolve){
+      console.log(node)
+      console.log("resolve"+resolve)
+      if (node.level === 0) return resolve(this.assetStructureList);
+      const {data} = node;
+      this.showAssets = data.type;
+      if (data.type === 'dataTable') {
+        this.tableParams = {
+          tableName: data.name,
+          tableAsName: data.nameAs
+        }
+        return resolve([])
+      }
+      setTimeout(() => {
+        // dataAssetList(data).then(res=>{
+        //   console.log(res)
+        //   this.childrenList=res.data.forEach(
+        //     table=>{
+        //       table.type="dataTable"
+        //     }
+        //   )
+        // })
+        resolve(this.childrenList)
+      }, 500);
+    },
+    showAssetsFun(data){
+      this.title = data.name + '('+data.databaseName + '-' + data.systemName+')'
+      this.showAssets = data.type;
+      if (data.type === "dataTable"){
+        this.tableParams = {
+          tableName: data.name,
+          tableAsName: data.nameAs
+
+        }
+      }
+    }
+  }
 }
-  };
 </script>
-<style scoped>
+<style scoped lang="scss">
 .el-aside {
   margin: 0;
   padding: 0;

src/views/dataSource/dataAccess/index.vue

@@ -1,18 +1,26 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="130px">
-      <el-form-item label="数据源名称" prop="dataSourceName" label-width="100px">
+      <el-form-item label="接入源名称" prop="name">
         <el-input
-          v-model="queryParams.dataSourceName"
+          v-model="queryParams.name"
-          placeholder="请输入数据源名称"
+          placeholder="请输入接入源名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="数据源链接地址" prop="linkAddress" label-width="120px">
+      <el-form-item label="数据来源系统名称" prop="systemName">
         <el-input
-          v-model="queryParams.linkAddress"
+          v-model="queryParams.systemName"
-          placeholder="请输入数据源链接地址"
+          placeholder="请输入数据来源系统名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="数据库名称" prop="databaseName">
+        <el-input
+          v-model="queryParams.databaseName"
+          placeholder="请输入数据库名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -31,7 +39,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['system:source:add']"
+          v-hasPermi="['system:access:add']"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -42,7 +50,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['system:source:remove']"
+          v-hasPermi="['system:access:remove']"
         >删除</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -52,50 +60,50 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-          v-hasPermi="['system:source:export']"
+          v-hasPermi="['system:access:export']"
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="sourceList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="accessList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="接入源名称" align="center" prop="name" />
-      <el-table-column label="数据源名称" align="center" prop="dataSourceName" />
+      <el-table-column label="数据来源系统名称" align="center" prop="systemName" />
-      <el-table-column label="数据源连接地址" align="center" prop="linkAddress" />
+      <el-table-column label="主机地址" align="center" prop="host" />
-      <el-table-column label="数据源连接端口" align="center" prop="port" />
+      <el-table-column label="主机地址" align="center" prop="port" />
+      <el-table-column label="数据接入类型" align="center" prop="type" />
       <el-table-column label="数据库名称" align="center" prop="databaseName" />
-      <el-table-column label="连接用户名" align="center" prop="username" />
-      <el-table-column label="连接密码" align="center" prop="password" />
       <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="模式名称" align="center" prop="modeName" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-connection"
-            @click="testConnection(scope.row)"
+            @click="syncAssetsStructure(scope.row)"
-          >测试连接</el-button>
+            v-hasPermi="['system:access:edit']"
+          >同步资产结构</el-button>
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-video-play"
-            @click="synchronousData(scope.row)"
+            @click="testConnection(scope.row)"
-          >同步资产</el-button>
+            v-hasPermi="['system:access:edit']"
+          >测试</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:source:edit']"
+            v-hasPermi="['system:access:edit']"
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:source:remove']"
+            v-hasPermi="['system:access:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -109,8 +117,8 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改【请填写功能名称】对话框 -->
+    <!-- 添加或修改数据接入对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1150px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="140px">
         <el-card>
           <div slot="header" class="clearfix">
@@ -118,8 +126,8 @@
           </div>
           <el-row>
             <el-col :md="12" :sm="24">
-              <el-form-item label="接入源名称" prop="dataSourceName">
+              <el-form-item label="接入源名称" prop="name">
-                <el-input v-model="form.dataSourceName" placeholder="请输入接入源名称" />
+                <el-input v-model="form.name" placeholder="请输入接入源名称" />
               </el-form-item>
             </el-col>
             <el-col :md="12" :sm="24">
@@ -130,8 +138,8 @@
           </el-row>
           <el-row>
             <el-col :md="12" :sm="24">
-              <el-form-item label="主机IP" prop="linkAddress">
+              <el-form-item label="主机地址" prop="host">
-                <el-input v-model="form.linkAddress" placeholder="请输入主机地址" />
+                <el-input v-model="form.host" placeholder="请输入主机地址" />
               </el-form-item>
             </el-col>
             <el-col :md="12" :sm="24">
@@ -145,7 +153,7 @@
               <el-form-item label="数据接入类型" prop="type">
                 <el-select style="width: 100%" v-model="form.type">
                   <el-option label="MySql" value="MySql">MySql</el-option>
-                  <el-option label="PostGreSql" value="PostGreSql">PostGreSql</el-option>
+                  <el-option label="Oracle" value="Oracle">Oracle</el-option>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -155,22 +163,15 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row v-show="form.type === 'PostGreSql'">
-            <el-col :md="12" :sm="24">
-              <el-form-item label="模式名称" prop="modeName">
-                <el-input v-model="form.modeName" placeholder="模式名称" />
-              </el-form-item>
-            </el-col>
-          </el-row>
           <el-row>
             <el-col :md="12" :sm="24">
-              <el-form-item label="连接用户名" prop="username">
+              <el-form-item label="数据库用户" prop="username">
-                <el-input v-model="form.username" placeholder="请输入连接用户名" />
+                <el-input v-model="form.username" placeholder="请输入数据库用户" />
               </el-form-item>
             </el-col>
             <el-col :md="12" :sm="24">
-              <el-form-item label="连接密码" prop="password">
+              <el-form-item label="数据库密码" prop="password">
-                <el-input v-model="form.password" placeholder="请输入连接密码" />
+                <el-input v-model="form.password" placeholder="请输入数据库密码" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -248,39 +249,21 @@
           </el-form-item>
         </el-card>
       </el-form>
-
       <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="testConnection(null)">测 试</el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-
-
     </el-dialog>
   </div>
 </template>
 
 <script>
-import {
+
-  listSource,
+import {editDataSource, listSource, synchronousData, testConnection} from "@/api/dataSource/source";
-  getSource,
-  delSource,
-  addSource,
-  updateSource,
-  testConnection,
-  synchronousData
-} from "@/api/dataSource/source";
 
 export default {
-  watch:{
+  name: "Access",
-    'form.type':{
-      handler(val) {
-        if(val != 'PostGre'){
-          this.form.modeName = ''
-        }
-      }
-    }
-  },
-  name: "Source",
   data() {
     return {
       // 遮罩层
@@ -295,8 +278,8 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      // 数据源表格数据
+      // 数据接入表格数据
-      sourceList: [],
+      accessList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -305,14 +288,15 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        dataSourceName: null,
+        name: null,
-        linkAddress: null
+        systemName: null,
+        databaseName: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
-          dataSourceName: [
+        name: [
           {required: true, message: "接入源名称不能为空", trigger: "blur"}
         ],
         systemName: [
@@ -330,6 +314,15 @@ export default {
         databaseName: [
           {required: true, message: "数据库名称不能为空", trigger: "blur"}
         ],
+        password: [
+          {required: true, message: "数据库密码不能为空", trigger: "blur"}
+        ],
+        username: [
+          {required: true, message: "数据库用户不能为空", trigger: "blur"}
+        ],
+        connectionParam: [
+          {required: true, message: "数据连接参数不能为空", trigger: "blur"}
+        ],
         initNum: [
           {required: true, message: "初始连接数量不能为空", trigger: "blur"}
         ],
@@ -343,6 +336,7 @@ export default {
           {required: true, message: "最大等待次数不能为空", trigger: "blur"}
         ]
       },
+      // 条件参数内容
       dataSourceParamList: [
         {
           name: null,
@@ -355,18 +349,12 @@ export default {
     this.getList();
   },
   methods: {
-    synchronousData(data) {
+    syncAssetsStructure(row){
-      synchronousData(data).then(res => {
+      synchronousData(row).then(response => {
-        if (res.code === 200) {
+        if (response.code === 200){
-          this.$message({
+          this.$modal.msgSuccess("同步资产结构成功");
-            message: "同步成功",
-            type: "success"
-          });
         }else {
-          this.$message({
+          this.$modal.msgError("同步资产结构失败");
-            message: "同步失败",
-            type: "error"
-          });
         }
       })
     },
@@ -395,30 +383,16 @@ export default {
         }).join("&")
       console.log(this.form.connectionParam)
     },
-    /** 测试连接 */
+    /** 查询数据接入列表 */
-    testConnection(row) {
-      testConnection(row).then(res => {
-        if (res.code === 200) {
-          this.$message({
-            message: "连接成功",
-            type: "success"
-          });
-        } else {
-          this.$message({
-            message: "连接失败",
-            type: "error"
-          });
-        }
-      })
-    },
-    /** 查询数据源列表 */
     getList() {
       this.loading = true;
-      listSource(this.queryParams).then(response => {
+      listSource(this.queryParams).then(
-        this.sourceList = response.data.rows;
+        response => {
+          this.accessList = response.data.rows;
           this.total = response.data.total;
           this.loading = false;
-      });
+        }
+      )
     },
     // 取消按钮
     cancel() {
@@ -429,20 +403,19 @@ export default {
     reset() {
       this.form = {
         id: null,
-        dataSourceName: null,
+        name: null,
         type: null,
         systemName: null,
-        username: null,
+        host: null,
-        password: null,
-        linkAddress: null,
         port: null,
         databaseName: null,
+        username: null,
+        password: null,
         connectionParam: null,
-        initNum: null,
+        initNum: 5,
-        maxNum: null,
+        maxNum: 20,
-        maxWaitTime: null,
+        maxWaitTime: 3000,
-        maxWaitSize: null,
+        maxWaitSize: 3,
-        modeName: null,
         createBy: null,
         createTime: null,
         updateBy: null,
@@ -470,18 +443,15 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.open = true;
       this.dataSourceParamList = [];
+      this.open = true;
       this.title = "添加数据接入";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      getSource(row.id).then(res => {
+      this.reset();
-        console.log(res)
+      this.form = row;
-        this.form = res.data;
-        console.log(this.form)
       this.dataSourceParamList = [];
-        if (this.form.connectionParam){
       this.form.connectionParam.split("&").forEach(param => {
         let paramArr = param.split("=");
         this.dataSourceParamList.push({
@@ -489,47 +459,70 @@ export default {
           val: paramArr[1]
         })
       })
-        }
       this.open = true;
       this.title = "修改数据接入";
-      })
-
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            updateSource(this.form).then(response => {
+            editDataSource(this.form).then(response => {
+              if (response.code === 200){
                 this.$modal.msgSuccess("修改成功");
                 this.open = false;
-              this.getList();
-            });
               }else {
-            addSource(this.form).then(response => {
+                this.$modal.msgError("修改失败");
+              }
+            })
+          } else {
+            editDataSource(this.form).then(response => {
+              if (response.code === 200){
                 this.$modal.msgSuccess("新增成功");
                 this.open = false;
                 this.getList();
-            });
+              }else {
+                this.$modal.msgError("新增失败");
+              }
+            })
           }
         }
       });
     },
+    /** 测试连接 */
+    testConnection(row) {
+      if (row){
+        testConnection(row).then(response => {
+          if (response.code === 200){
+            this.$modal.msgSuccess("测试连接成功");
+          }else {
+            this.$modal.msgError("测试连接失败");
+          }
+        })
+      }else {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            testConnection(this.form).then(response => {
+              if (response.code === 200){
+                this.$modal.msgSuccess("测试连接成功");
+              }else {
+                this.$modal.msgError("测试连接失败");
+              }
+            })
+          }
+        });
+      }
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除数据接入编号为"' + ids + '"的数据项？').then(() => {
-        return delSource(ids);
-      }).then(() => {
-        this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/source/export', {
+      this.$modal.msgSuccess("导出成功");
-        ...this.queryParams
-      }, `source_${new Date().getTime()}.xlsx`)
     }
   }
 };