更改ER图查看方式

xzl-ui/src/views/dataGovernance/databaseManage.vue

@@ -25,7 +25,7 @@
       <el-table-column
         prop="databaseName"
         label="数据库名称"
-        width="300">
+        width="200">
       </el-table-column>
       <el-table-column
         prop="characterName"
@@ -38,9 +38,20 @@
         width="300">
       </el-table-column>
       <el-table-column
-        align="center"
-        label="操作"
+        prop="collationName"
+        label="ER图"
         width="200">
+        <template slot-scope="scope">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="getERImageUrl(scope.$index, tableData)"
+            :preview-src-list="getERImageDetailUrl(scope.$index, tableData)">
+          </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="操作">
         <template slot-scope="scope">
           <el-button
             @click.native.prevent="importBtn(scope.$index, tableData)"
@@ -56,13 +67,13 @@
           >
             查看
           </el-button>
-          <el-button
-            @click.native.prevent="showERImage(scope.$index, tableData)"
-            type="text"
-            size="small"
-          >
-            查看ER图
-          </el-button>
+<!--          <el-button-->
+<!--            @click.native.prevent="showERImage(scope.$index, tableData)"-->
+<!--            type="text"-->
+<!--            size="small"-->
+<!--          >-->
+<!--            查看ER图-->
+<!--          </el-button>-->
         </template>
       </el-table-column>
     </el-table>
@@ -92,13 +103,13 @@
       style="display: none"
       :auto-upload="false"
     ></el-upload>
-    <el-dialog
-      :title="erDialog.title"
-      :visible.sync="erDialog.show"
-      width="80%"
-      center>
-      <img :src="erDialog.erSrc" style="width: 100%;height: 100%"/>
-    </el-dialog>
+    <!--    <el-dialog-->
+    <!--      :title="erDialog.title"-->
+    <!--      :visible.sync="erDialog.show"-->
+    <!--      width="80%"-->
+    <!--      center>-->
+    <!--      <img :src="erDialog.erSrc" style="width: 100%;height: 100%"/>-->
+    <!--    </el-dialog>-->
   </div>
 </template>
 <script>
@@ -113,9 +124,9 @@ export default {
         databaseName: ""
       },
       multipleSelection: [],
-      fileList:[],
-      databaseName:"",
-      erDialog:{
+      fileList: [],
+      databaseName: "",
+      erDialog: {
         title: "",
         show: false,
         erSrc: ""
@@ -126,13 +137,19 @@ export default {
     this.initData();
   },
   methods: {
-    handleFile(file,fileList){
-      var fileNameSplit=file.name.split(".");
-      var fileNameSplitLength=fileNameSplit.length;
-      if(fileNameSplit[fileNameSplitLength-1] == "sql"){
+    getERImageUrl(index,tableData){
+      return  process.env.VUE_APP_BASE_API + '/dataGovernance/loadERImage?databaseName=' + tableData[index].databaseName;
+    },
+    getERImageDetailUrl(index,tableData){
+      return  [process.env.VUE_APP_BASE_API + '/dataGovernance/loadERImage?databaseName=' + tableData[index].databaseName];
+    },
+    handleFile(file, fileList) {
+      var fileNameSplit = file.name.split(".");
+      var fileNameSplitLength = fileNameSplit.length;
+      if (fileNameSplit[fileNameSplitLength - 1] == "sql") {
         var formData = new FormData();
-        formData.append("file",file.raw);
-        formData.append("databaseName",this.databaseName);
+        formData.append("file", file.raw);
+        formData.append("databaseName", this.databaseName);
         const t = this;
         request({
           url: "/dataGovernance/importData",
@@ -142,25 +159,25 @@ export default {
           t.$message(rs);
           this.$refs.file.clearFiles();
         })
-      }else{
+      } else {
         this.$refs.file.clearFiles();
         this.$message({
-          type:"error",
-          message:"请选择sql文件!"
+          type: "error",
+          message: "请选择sql文件!"
         });
       }
     },
-    showERImage(index,tableData){
-      var param={
-        title:tableData[index].databaseName,
-        show:false,
-        erSrc: process.env.VUE_APP_BASE_API+'/dataGovernance/loadERImage?databaseName='+tableData[index].databaseName
+    showERImage(index, tableData) {
+      var param = {
+        title: tableData[index].databaseName,
+        show: false,
+        erSrc: process.env.VUE_APP_BASE_API + '/dataGovernance/loadERImage?databaseName=' + tableData[index].databaseName
       }
-      this.erDialog=param;
-      this.erDialog.show=true;
+      this.erDialog = param;
+      this.erDialog.show = true;
     },
-    importBtn(index,tableData){
-      this.databaseName=tableData[index].databaseName;
+    importBtn(index, tableData) {
+      this.databaseName = tableData[index].databaseName;
       this.$refs.file.$children[0].$refs.input.click();
     },
     initData() {
@@ -172,13 +189,13 @@ export default {
         t.tableData = rs;
       })
     },
-    handleAdd(){
-      this.formVisible=true;
+    handleAdd() {
+      this.formVisible = true;
     },
-    handleDelete(){
-      const t=this;
-      let data=[];
-      t.multipleSelection.forEach(row=>{
+    handleDelete() {
+      const t = this;
+      let data = [];
+      t.multipleSelection.forEach(row => {
         data.push(row.databaseName);
       })
       this.$confirm('确定删除这些数据库?', '确认信息', {
@@ -199,17 +216,17 @@ export default {
       });
 
     },
-    handleSelectionChange(val){
-      this.multipleSelection=val;
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
     },
     handleClose() {
       this.formVisible = false;
-      this.form.databaseName="";
+      this.form.databaseName = "";
     },
-    handleSave(){
+    handleSave() {
       const t = this;
       request({
-        url: "/dataGovernance/createDatabase?databaseName="+t.form.databaseName,
+        url: "/dataGovernance/createDatabase?databaseName=" + t.form.databaseName,
         method: "post"
       }).then(rs => {
         t.$message(rs);
@@ -217,15 +234,13 @@ export default {
         t.initData()
       })
     },
-    view(index,table){
-      this.$tab.openPage(table[index].databaseName, '/dataGovernance/tableManage', {databaseName:table[index].databaseName})
+    view(index, table) {
+      this.$tab.openPage(table[index].databaseName, '/dataGovernance/tableManage', {databaseName: table[index].databaseName})
     }
   }
 }
 
 
-
-
 </script>
 
 <style rel="stylesheet/scss" lang="scss">