v-if无法渲染

src/api/dataSource/dictionary.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function getDictionaryRespByDataSourceId(id) {
+  return request({
+    url: '/data/dict/getDictionaryRespByDataSourceId?dataSourceId='+id,
+    method: 'get'
+  })
+}
+
+export function insertDictionary(dictionary) {
+  return request({
+    url: '/data/dict/insertDictionary',
+    method: 'post',
+    data: dictionary
+  })
+}
+
+export function insertDictionaryInfo(dictionaryInfo) {
+  return request({
+    url: '/data/dict/insertDictionaryInfo',
+    method: 'post',
+    data: dictionaryInfo
+  })
+}

src/views/dataAssets/assetStructure/dashboard/OverallSpecificAssets.vue

@@ -47,7 +47,7 @@
             trigger="click">
             <el-row :gutter="20">
               <el-col :span="18">
-                <el-input v-model="dictAddName"></el-input>
+                <el-input v-model="dictionary.dictionaryName"></el-input>
               </el-col>
               <el-col :span="6">
                 <el-button @click="addDict">确定</el-button>
@@ -57,36 +57,37 @@
           </el-popover>
         </div>
         <el-row :gutter="20">
-          <el-col v-for="(val,key) in dictMap" :md="8" :sm="24" :xs="12">
+          <el-col v-for="dictionaryInfoResp in dictionaryInfoRespList" :md="8" :sm="24" :xs="12">
             <el-card class="box-card" style="height: 300px">
               <div slot="header" class="clearfix">
-                <span>{{key}}</span>
+                <span>{{dictionaryInfoResp.dictionary.dictionaryName}}</span>
                 <el-button style="float: right; padding: 3px 0"
                            type="text"
-                           @click="val.push({ label: null, val: null, isEdit: true })"
+                           @click="dictionaryInfoResp.dictionaryInfoList.push({ dictionaryInfoTag: null, dictionaryInfoValue: null, isEdit: true })"
                 >新增</el-button>
               </div>
-              <el-table :data="val" style="width: 100%" height="280px">
+              <el-table :data="dictionaryInfoResp.dictionaryInfoList" style="width: 100%" height="280px">
-                <el-table-column prop="label" label="标签">
+                <el-table-column label="标签">
                   <template slot-scope="scope">
-                    <span v-if="!scope.row.isEdit">{{scope.row.label}}</span>
+                    <span v-if="!scope.row.isEdit">{{scope.row.dictionaryInfoTag}}</span>
-                    <el-input v-if="scope.row.isEdit" v-model="scope.row.label" size="mini"></el-input>
+                    <el-input v-if="scope.row.isEdit" v-model="scope.row.dictionaryInfoTag" size="mini"></el-input>
                   </template>
                 </el-table-column>
-                <el-table-column prop="val" label="值">
+                <el-table-column label="值">
                   <template slot-scope="scope">
-                    <span v-if="!scope.row.isEdit">{{scope.row.val}}</span>
+                    <span v-if="!scope.row.isEdit">{{scope.row.dictionaryInfoValue}}</span>
-                    <el-input v-if="scope.row.isEdit" v-model="scope.row.val" size="mini"></el-input>
+                    <el-input v-if="scope.row.isEdit" v-model="scope.row.dictionaryInfoValue" size="mini"></el-input>
                   </template>
                 </el-table-column>
-                <el-table-column prop="val" label="操作">
+                <el-table-column label="操作">
                   <template slot-scope="scope">
                     <el-button
                       v-if="!scope.row.isEdit"
                       size="mini"
                       type="text"
                       icon="el-icon-edit"
-                      @click="scope.row.isEdit = true"
+                      @click="updateEdit(scope.row.id)"
+                      :key="scope.row.id + this.nowTime"
                     >修改</el-button>
                     <el-button
                       v-if="scope.row.isEdit"
@@ -118,31 +119,46 @@
 <script>
 import CountTo from 'vue-count-to'
 import OverallAssetStructure from './OverallAssetStructure.vue'
+import {getDictionaryRespByDataSourceId} from "@/api/dataSource/dictionary";
 
 export default {
+  watch:{
+    dataSourceId:{
+      // 此处监听variable变量，当期有变化时执行
+      handler(item1,item2){
+        console.log("新值",item1)
+        console.log("旧址",item2)
+        getDictionaryRespByDataSourceId(item1).then(
+          res => {
+            console.log("字典表响应对象:",res.data)
+            this.dictionaryInfoRespList = res.data
+            this.dictionaryInfoRespList.forEach(dictionaryInfoResp => {
+              dictionaryInfoResp.dictionaryInfoList.forEach(dictionaryInfo => {
+                dictionaryInfo.isEdit = false;
+              })
+            })
+          }
+        )
+      }
+    }
+  },
   props: {
+    assetsModelRespArrayList: {
+      type: Array
+    },
     dataSourceObj: {
       type: Object
     },
-    assetsModelRespArrayList: {
+    dataSourceId: {
-      type: Array
+      type: Number,
     }
   },
   data() {
     return {
-      dictAddName: null,
+      nowTime: null,
-      dictMap: {
+      dictionaryInfoRespList: [],
-        "性别(system_sex)": [
-          { label: '男', val: '1', isEdit: false },
-          { label: '女', val: '2', isEdit: false },
-          { label: '未知', val: '0', isEdit: false },
-        ],
-        "开关(system_y_n)": [
-          { label: '是', val: '1', isEdit: false },
-          { label: '否', val: '0', isEdit: false }
-        ],
-      },
       activeName: 'first',
+      dictionary: {}
     }
   },
   components: {
@@ -150,16 +166,35 @@ export default {
     CountTo
   },
   methods: {
+    updateEdit(row) {
+      console.log("行对象:"+row)
+      this.dictionaryInfoRespList.forEach(dictionaryInfoResp => {
+        dictionaryInfoResp.dictionaryInfoList.forEach(dictionaryInfo => {
+          if (dictionaryInfo.id == row){
+            console.log("进来了",dictionaryInfo.isEdit)
+            dictionaryInfo.isEdit = true
+          }
+        })
+      })
+      this.$forceUpdate()
+      this.nowTime = new Date()
+    },
+    editConfirm(row){
+      if (!row.dictionaryInfoTag || !row.dictionaryInfoValue) {
+        this.$message.error('字典标签或字典值，不可为空');
+        return;
+      }
+      row.isEdit = false;
+    },
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     },
     addDict(){
-      if (!this.dictAddName){
+      if (!this.dictionary.dictionaryName){
         this.$message.error('数据字典，不可为空');
         return;
       }
-      this.dictMap[this.dictAddName] = []
+      console.log(this.dictionary.dictionaryName)
-      this.dictAddName = null
     },
   }
 }

src/views/dataAssets/assetStructure/index.vue

@@ -16,7 +16,7 @@
     <el-container>
       <el-main>
         <OverallAssets :dataSourceCount="dataSourceCount" :allTableCount="allTableCount" :allDataModelCount="allDataModelCount" v-if="showAssets == null"/>
-        <overall-specific-assets :dataSourceObj="dataSourceObj"  :assetsModelRespArrayList="assetsModelRespArrayList" v-if="showAssets === 'dataSource'" :title="title"/>
+        <overall-specific-assets :dataSourceId="dataSourceId" :dataSourceObj="dataSourceObj"  :assetsModelRespArrayList="assetsModelRespArrayList" v-if="showAssets === 'dataSource'" :title="title"/>
         <overall-asset-structure :tableInfo="tableInfo" :assetsModelList="assetsModelList" v-if="showAssets === 'dataTable'" :title="title"/>
       </el-main>
     </el-container>
@@ -26,14 +26,16 @@
 import OverallAssets from './dashboard/OverallAssets.vue'
 import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
 import OverallAssetStructure from './dashboard/OverallAssetStructure.vue'
-import {queryBigStructure, queryTableStructure} from "@/api/data";
+import {queryBigStructure, queryTableStructure} from "@/api/dataSource/data";
-import {getAssetsModelByDataTableId, getAssetsModelListByTableIds} from "@/api/assets";
+import {getAssetsModelByDataTableId, getAssetsModelListByTableIds} from "@/api/dataSource/assets";
+import {getDictionaryRespByDataSourceId} from "@/api/dataSource/dictionary";
 
 export default {
   name: 'assetStructure',
   components: { OverallAssetStructure, OverallSpecificAssets, OverallAssets },
   data() {
     return {
+      dataSourceId: null,
       tableInfo: {},
       assetsModelList: [],
       dataSourceObj: null,
@@ -54,7 +56,8 @@ export default {
       showAssets: null,
       title: null,
       tableIds: [],
-      assetsModelRespArrayList: []
+      assetsModelRespArrayList: [],
+      dictionaryInfoRespList: []
     }
   },
   methods: {
@@ -68,6 +71,8 @@ export default {
           console.log("this.assetsModelRespArrayList",this.assetsModelRespArrayList)
         }
       )
+
+      this.dataSourceId = data.dataSource.id
       this.dataSourceObj = data
     },
     getTableStructure(data) {

src/views/dataAssets/dataAccess/index.vue

@@ -281,7 +281,7 @@ import {
   insertDataSource,
   queryStructure,
   testConnect
-} from "@/api/data";
+} from "@/api/dataSource/data";
 
 export default {
   name: "Access",