feat: 新增了字典表的新增,删除,和字典表数据的新增,修改

src/api/etl/data.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function listData(query) {
+  return request({
+    url: '/etl/data/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】详细
+export function getData(id) {
+  return request({
+    url: '/etl/data/' + id,
+    method: 'get'
+  })
+}
+
+// 新增【请填写功能名称】
+export function addData(data) {
+  return request({
+    url: '/etl/data',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改【请填写功能名称】
+export function updateData(data) {
+  return request({
+    url: '/etl/data',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除【请填写功能名称】
+export function delData(id) {
+  return request({
+    url: '/etl/data/' + id,
+    method: 'delete'
+  })
+}

src/api/etl/dictionary.js

@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function listDictionary(query) {
+  return request({
+    url: '/etl/dictionary/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】详细
+export function getDictionary(id) {
+  return request({
+    url: '/etl/dictionary/' + id,
+    method: 'get'
+  })
+}
+
+// 根据key删除字典详细
+export function deleteDictionary(id) {
+  return request({
+    url: '/etl/dictionary/DeleteDictionary?id=' + id,
+    method: 'get'
+  })
+}
+
+// 新增【请填写功能名称】
+export function addDictionary(data) {
+  return request({
+    url: '/etl/dictionary',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改【请填写功能名称】
+export function updateDictionary(data) {
+  return request({
+    url: '/etl/dictionary',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除【请填写功能名称】
+export function delDictionary(id) {
+  return request({
+    url: '/etl/dictionary/' + id,
+    method: 'delete'
+  })
+}
+
+export function getDictionaryList(id) {
+  return request({
+    url: '/etl/dictionary/GetDictionaryList?dataSourceId=' + id,
+    method: 'get'
+  })
+}

src/api/etl/source.js

@@ -9,6 +9,13 @@ export function listSource(query) {
   })
 }
 
+export function statisticsInfo(){
+  return request({
+    url: '/etl/source/Statistics',
+    method: 'get'
+  })
+}
+
 export function dataAssetList(data) {
   return request({
     url: '/etl/source/DataAssetList',

src/views/etl/assets/dashboard/OverallAssetStructure.vue

@@ -69,27 +69,132 @@
         </el-table-column>
         <el-table-column prop="id" label="操作" >
           <template slot-scope="scope">
-            <el-button type="text">编辑</el-button>
+            <el-button type="text" @click="update(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
+    <el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
+      <el-form :model="form" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="名称">
+              <el-input v-model="form.name" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="注释">
+              <el-input v-model="form.comment" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否主键">
+              <el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
+                {{form.isPrimaryKey}}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="数据类型">
+              <el-input v-model="form.type" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="数据长度">
+              <el-input v-model="form.length" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="小数位">
+              <el-input v-model="form.decimalPlaces" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否为空">
+              <el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
+                {{form.isNull}}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="默认值">
+              <el-input v-model="form.defaultValue" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="映射字段">
+              <el-input v-model="form.mappingType" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否字典">
+              <el-switch
+                v-model="form.isDict"
+                active-value="Y"
+                inactive-value="N"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.isDict === 'Y'">
+          <el-col :span="24">
+            <el-form-item label="字典">
+              <el-select v-model="form.dictKey">
+                <el-option v-for="dict in dictMap" :key="dict.id" :label="dict.dictionaryName+'('+dict.dictionaryKey+')'" :value="dict.dictionaryKey"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-table :data="dictionaryDataList" striped border>
+                <el-table-column property="label" label="字典标签"/>
+                <el-table-column property="val" label="字典值"/>
+              </el-table>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="formStatus = false">取 消</el-button>
+        <el-button type="primary" @click="formStatus = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import {assetModelList} from "@/api/etl/source";
+import {getDictionaryList} from "@/api/etl/dictionary";
 
 export default {
   name: 'OverallAssetStructure',
   watch:{
     'title': {
       handler(val) {
-        console.log(val)
+        this.getDictionaryList()
         assetModelList(val).then(res => {
           this.tableData = res.data
         })
       },
       immediate: true
+    },
+    'form.dictKey':{
+      handler(val) {
+        this.dictMap.forEach(dict => {
+          if (dict.dictionaryKey === val){
+            this.dictionaryDataList = dict.dictionaryDataList
+          }
+        })
+      }
     }
   },
   props: {
@@ -98,75 +203,24 @@ export default {
   },
   data() {
     return {
-      tableData: [
+      dictionaryDataList:[],
-        {
+      form:{},
-          id: 1,
+      formStatus: false,
-          name: "id",
+      tableData: [],
-          comment: "主键",
+      dictMap: {}
-          isPrimaryKey: "Y",
-          type: "bigint",
-          mappingType: "Long",
-          length: "-",
-          decimalPlaces: "-",
-          isNull: "N",
-          defaultValue: "-",
-          isDict: "N",
-          dictKey: "-",
-        }, {
-          id: 2,
-          name: "name",
-          comment: "姓名",
-          isPrimaryKey: "N",
-          type: "varchar",
-          mappingType: "String",
-          length: "64",
-          decimalPlaces: "-",
-          isNull: "N",
-          defaultValue: "-",
-          isDict: "N",
-          dictKey: "-",
-        }, {
-          id: 3,
-          name: "sex",
-          comment: "性别",
-          isPrimaryKey: "N",
-          type: "char",
-          mappingType: "String",
-          length: "1",
-          decimalPlaces: "-",
-          isNull: "N",
-          defaultValue: "-",
-          isDict: "Y",
-          dictKey: "system_sex",
-        }, {
-          id: 4,
-          name: "price",
-          comment: "金额",
-          isPrimaryKey: "N",
-          type: "double",
-          mappingType: "BigDecimal",
-          length: "10",
-          decimalPlaces: "2",
-          isNull: "N",
-          defaultValue: "0.00",
-          isDict: "N",
-          dictKey: "-",
-        }, {
-          id: 5,
-          name: "create_time",
-          comment: "创建时间",
-          isPrimaryKey: "N",
-          type: "datetime",
-          mappingType: "Date",
-          length: "-",
-          decimalPlaces: "-",
-          isNull: "Y",
-          defaultValue: "-",
-          isDict: "N",
-          dictKey: "-",
-        }, ]
     }
   },
+  methods: {
+    getDictionaryList() {
+      getDictionaryList(this.title.dataSourceId).then(res => {
+        this.dictMap = res.data
+      })
+    },
+    update(row) {
+      this.form = row;
+      this.formStatus = true;
+    }
+  }
 }
 </script>
 <style scoped lang="scss">

src/views/etl/assets/dashboard/OverallAssets.vue

@@ -12,7 +12,7 @@
           <div class="card-panel-text">
             数据接入
           </div>
-          <count-to :duration="2600" :end-val="assetsCompute.dataSourceSum" :start-val="0" class="card-panel-num"/>
+          <count-to :duration="2600" :end-val="statisticsInfo.dataAsset" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -25,7 +25,7 @@
           <div class="card-panel-text">
             资产模型
           </div>
-          <count-to :duration="3000" :end-val="assetsCompute.assetsModuleSum" :start-val="0" class="card-panel-num"/>
+          <count-to :duration="3000" :end-val="statisticsInfo.assetModel" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -38,7 +38,7 @@
           <div class="card-panel-text">
             数据模型
           </div>
-          <count-to :duration="3200" :end-val="assetsCompute.dataModuleSum" :start-val="0" class="card-panel-num"/>
+          <count-to :duration="3200" :end-val="statisticsInfo.dataModel" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -47,22 +47,30 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import {statisticsInfo} from "@/api/etl/source";
 
 export default {
-  props: {
+
-    assetsCompute: {
-      assetsModuleSum: 0,
-      dataModuleSum: 0,
-      dataSourceSum: 0
-    }
-  },
   components: {
     CountTo
   },
+  data() {
+    return {
+      statisticsInfo: {}
+    }
+  },
   methods: {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
+    },
+    statistics(){
+      statisticsInfo().then(res => {
+        this.statisticsInfo = res.data
+      })
     }
+  },
+  created() {
+    this.statistics()
   }
 }
 </script>

src/views/etl/assets/dashboard/OverallSpecificAssets.vue

@@ -29,6 +29,90 @@
         </div>
       </div>
     </el-col>
+    <el-col :span="24">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基础字典</span>
+          <el-popover
+            placement="top-start"
+            title="基础字典"
+            width="200"
+            trigger="hover"
+            content="这个字典是数据资产项目当中的字典内容，而不是本项目当中的字典内容。主要作用为数据清洗过程中数据字典映射作用">
+            <i class="el-icon-question" slot="reference"></i>
+          </el-popover>
+          <el-popover
+            placement="right"
+            width="200px"
+            trigger="click">
+
+                <el-form :inline="true" :model="dictInfo" class="demo-form-inline">
+                  <el-form-item label="字典名称:">
+                    <el-input v-model="dictInfo.dictionaryName" style="width: 150px"></el-input>
+                  </el-form-item>
+                  <el-form-item label="字典Key:">
+                    <el-input v-model="dictInfo.dictionaryKey" style="width: 150px"></el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button @click="addDict">确定</el-button>
+                  </el-form-item>
+                </el-form>
+
+            <el-button style="float: right; padding: 3px 0" type="text" slot="reference">新增字典</el-button>
+          </el-popover>
+        </div>
+        <el-row :gutter="20">
+          <el-col v-for="dict in dictMap" :md="8" :sm="24" :xs="12">
+            <el-card class="box-card" style="height: 300px">
+              <div slot="header" class="clearfix">
+                <span>{{dict.dictionaryName+'('+dict.dictionaryKey+')'}}</span>
+                <el-button style="float: right; padding: 3px 0"
+                           type="text"
+                           @click="deleteDictionary(dict.id)"
+                >删除</el-button>
+                <el-button style="float: right; padding: 3px 0;margin-right: 8px"
+                           type="text"
+                           @click="dict.dictionaryDataList.push({ label: null, val: null, edit: true })"
+                >新增</el-button>
+              </div>
+              <el-table :data="dict.dictionaryDataList" style="width: 100%" height="280px">
+                <el-table-column prop="label" label="标签">
+                  <template slot-scope="scope">
+                    <span v-if="!scope.row.edit">{{scope.row.label}}</span>
+                    <el-input v-if="scope.row.edit" v-model="scope.row.label" size="mini"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="val" label="值">
+                  <template slot-scope="scope">
+                    <span v-if="!scope.row.edit">{{scope.row.val}}</span>
+                    <el-input v-if="scope.row.edit" v-model="scope.row.val" size="mini"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="val" label="操作">
+                  <template slot-scope="scope">
+                    <el-button
+                      v-if="!scope.row.edit"
+                      size="mini"
+                      type="text"
+                      icon="el-icon-edit"
+                      @click="scope.row.edit = true"
+                    >修改</el-button>
+                    <el-button
+                      v-if="scope.row.edit"
+                      @click="editConfirm(dict,scope.row)"
+                      size="mini"
+                      type="text"
+                      icon="el-icon-finished"
+                    >确定</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-card>
+
+    </el-col>
     <el-col :span="24">
       <el-tabs v-model="activeName" type="border-card">
         <el-tab-pane v-for="tableAsset in title.tableList" :label="tableAsset.tableName+'('+tableAsset.tableComment+')'" :name="tableAsset.tableName">
@@ -43,12 +127,14 @@
 <script>
 import CountTo from 'vue-count-to'
 import OverallAssetStructure from './OverallAssetStructure.vue'
+import {addDictionary, deleteDictionary, getDictionaryList} from "@/api/etl/dictionary";
+import {addData, updateData} from "@/api/etl/data";
 
 export default {
   watch:{
     'title':{
       handler(val){
-        console.log(val)
+        this.getDictionaryList()
         this.activeName = val.tableList[0].tableName
         this.assetModel = 0
         this.dataModel = 0
@@ -60,6 +146,7 @@ export default {
             this.assetModel = parseInt(this.assetModel) + parseInt(table.fields);
           }
         })
+
       }
     }
   },
@@ -68,6 +155,12 @@ export default {
   },
   data() {
     return {
+      dictInfo: {
+        dictionaryName: null,
+        dictionaryKey: null,
+        dataSourceId: null
+      },
+      dictMap: {},
       activeName: '',
       assetModel: 0,
       dataModel: 0
@@ -78,6 +171,51 @@ export default {
     CountTo
   },
   methods: {
+    deleteDictionary(id) {
+      deleteDictionary(id);
+      this.getDictionaryList()
+    },
+    getDictionaryList() {
+      getDictionaryList(this.title.id).then(res => {
+        this.dictMap = res.data
+        console.log(this.dictMap)
+      })
+    },
+    editConfirm(dict,row){
+      if (!row.label || !row.val) {
+        this.$message.error('字典标签或字典值，不可为空');
+        return;
+      }
+      console.log(row)
+      if (row.id) {
+        console.log('修改')
+        updateData(row)
+      }else{
+        console.log('添加')
+        row.dictionaryId=dict.id
+        addData(row)
+      }
+      row.edit = false;
+      this.getDictionaryList()
+    },
+    addDict(){
+      if (!this.dictInfo.dictionaryName){
+        this.$message.error('字典名称，不可为空');
+        return;
+      }
+      if (!this.dictInfo.dictionaryKey){
+        this.$message.error('字典Key，不可为空');
+        return;
+      }
+      this.dictInfo.dataSourceId = this.title.id
+      addDictionary(this.dictInfo)
+      this.dictInfo = {
+        dictionaryName: null,
+        dictionaryKey: null,
+        dataSourceId: null
+      }
+      this.getDictionaryList()
+    },
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     }

src/views/etl/assets/index.vue

@@ -10,7 +10,7 @@
         <el-main>
           <el-tabs v-model="activeName">
             <el-tab-pane label="资产结构" name="structure">
-              <OverallAssets v-if="showAssets == null" :assets-compute="assetsCompute"/>
+              <OverallAssets v-if="showAssets == null"/>
               <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
               <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
             </el-tab-pane>
@@ -63,7 +63,7 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {assetModelList, assetsList, dataAssetList, listSource, structureList} from "@/api/etl/source";
+import {assetModelList, assetsList, dataAssetList, listSource, statisticsInfo, structureList} from "@/api/etl/source";
 import OverallAssets from "@/views/etl/assets/dashboard/OverallAssets.vue";
 import OverallSpecificAssets from "@/views/etl/assets/dashboard/OverallSpecificAssets.vue";
 import OverallAssetStructure from "@/views/etl/assets/dashboard/OverallAssetStructure.vue";
@@ -103,7 +103,8 @@ export default {
         sourceData:{},
         source: {
           sql: ''
-        }
+        },
+        statisticsInfo:{}
       };
     },
     //计算属性 类似于data概念",
@@ -140,7 +141,6 @@ export default {
       getList() {
         listSource(this.queryParams).then(response => {
           this.sourceList = response.data.rows;
-          console.log(this.sourceList)
           this.sourceList.forEach(source => {
             if (source.type=='PostGre'){
               source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'

src/views/etl/source/index.vue

@@ -34,17 +34,6 @@
           v-hasPermi="['system:source:add']"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:source:edit']"
-        >修改</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -79,6 +68,7 @@
       <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
@@ -155,7 +145,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="PostGre" value="PostGre">PostGre</el-option>
+                  <el-option label="PostGreSql" value="PostGreSql">PostGreSql</el-option>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -165,7 +155,7 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row v-if="form.type == 'PostGre'">
+          <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="模式名称" />
@@ -493,10 +483,9 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      getSource(row.id).then(res => {
-      const id = row.id || this.ids
+        console.log(res)
-      getSource(id).then(response => {
+        this.form = res.data;
-        this.form = response.data;
         console.log(this.form)
         this.dataSourceParamList = [];
         this.form.connectionParam.split("&").forEach(param => {
@@ -508,7 +497,8 @@ export default {
         })
         this.open = true;
         this.title = "修改数据接入";
-      });
+      })
+
     },
     /** 提交按钮 */
     submitForm() {