1、修改框架样式

2、完善系统图编辑工具首页

public/systemConf.js

@@ -2,7 +2,7 @@ var __systemConf = {
   //基础数据根域名
   baseServiceUrl: '/api',
   //系统图服务域名
-  sysGraphServiceUrl: 'http://127.0.0.1',
+  sysGraphServiceUrl: '/sysGraphService',
   //导航菜单
   menus: [{
     "id": "ready",

src/Main.vue

@@ -39,8 +39,10 @@ export default {
 
 .leftRegion {
   width: 235px;
+  height: 100%;
 }
 .rightRegion {
   flex: 1;
+  height: 100%;
 }
 </style>

src/assets/style/main.less

@@ -6,6 +6,7 @@ body {
     width: 100%;
     height: 100%;
     background: #f2f2f2;
+    overflow: hidden;
 }
 
 /*---滚动条默认显示样式--*/

src/components/frame/pageLeft.vue

@@ -72,6 +72,7 @@ export default {
 .menuDiv {
   flex: 1;
   background: #364150;
+  overflow: auto;
 }
 
 .logoImg {

src/components/frame/pageRight.vue

@@ -102,6 +102,12 @@ export default {
 .contentContainer {
   flex: 1;
   margin: 0 10px 10px 10px;
+  overflow: hidden;
+}
+
+.contentContainer >div:first-child{
+  height: 100%;
+  overflow: hidden;
 }
 
 .headerContainer {

src/components/systemGraph/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="container">
+  <div class="container" v-loading.fullscreen.lock="fullscreenLoading">
     <div class="header">
       <div class="searchInputDiv">
         <el-input
           placeholder="搜索系统实例"
           prefix-icon="el-icon-search"
           v-model="searchVal"
+          @input="searchInputChange"
         >
         </el-input>
       </div>
@@ -16,34 +17,40 @@
       </div>
     </div>
     <div class="content">
-      <el-table :data="tableData" border style="width: 100%">
-        <el-table-column prop="name" label="系统图名称"> </el-table-column>
-        <el-table-column prop="type" label="系统类"> </el-table-column>
-        <el-table-column prop="instanceName" label="系统实例名称">
-        </el-table-column>
-        <el-table-column prop="templateName" label="系统图模版">
-        </el-table-column>
-        <el-table-column prop="state" label="状态"> </el-table-column>
-        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
-        <el-table-column label="操作" width="100">
-          <template>
-            <el-button type="text" size="small">预览</el-button>
-            <el-button type="text" size="small">编辑</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination
-        background
-        v-if="dataCount > 0"
-        @size-change="handlePageSizeChange"
-        @current-change="handleCurrentPageChange"
-        :current-page="currentPage"
-        :page-sizes="[20, 30, 50, 100]"
-        :page-size="pageSize"
-        layout="total, prev, pager, next, sizes"
-        :total="dataCount"
-      >
-      </el-pagination>
+      <div class="tableContainer">
+        <el-table :data="graphArr" border style="width: 100%">
+          <el-table-column prop="name" label="系统图名称"> </el-table-column>
+          <el-table-column prop="sysType" label="系统类"> </el-table-column>
+          <el-table-column prop="sysInstance" label="系统实例名称">
+          </el-table-column>
+          <el-table-column prop="sysTemplate" label="系统图模版">
+          </el-table-column>
+          <el-table-column prop="stateName" label="状态"> </el-table-column>
+          <el-table-column prop="createTime" label="创建时间">
+          </el-table-column>
+          <el-table-column label="操作" width="100">
+            <template>
+              <el-button type="text" size="small">预览</el-button>
+              <el-button type="text" size="small">编辑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pageContainer">
+        <el-pagination
+          background
+          v-if="dataCount > 0"
+          @size-change="handlePageSizeChange"
+          @current-change="handleCurrentPageChange"
+          :current-page="currentPage"
+          :page-sizes="[20, 30, 50, 100]"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, sizes"
+          :total="dataCount"
+        >
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -51,6 +58,7 @@
 import { mapState } from "vuex";
 import { logicConfig } from "@/logicConfig";
 import packageConfig from "../../../package.json";
+import { sysGraphController } from "@/controller/sysGraphController";
 
 export default {
   props: [],
@@ -58,7 +66,10 @@ export default {
     return {
       //搜索关键字
       searchVal: "",
-      tableData: [],
+      //后台返回的所有的数据
+      allGraphArr: [],
+      //用于表格内绑定
+      graphArr: [],
       //当前页码
       currentPage: 1,
       //每页条数
@@ -67,8 +78,9 @@ export default {
       dataCount: 0,
       //进入编辑页面时的状态 0 预览； 1 编辑；  2 新建
       state: 0,
-      //系统图ID
-      diagramId: "",
+      //选择的某一个系统图
+      selDiagram: {},
+      fullscreenLoading: true,
     };
   },
   computed: {
@@ -76,9 +88,16 @@ export default {
   },
   methods: {
     //每页条数改变
-    handlePageSizeChange: function () {},
+    handlePageSizeChange: function (pageSize) {
+      this.currentPage = 1;
+      this.pageSize = pageSize;
+      this.getCurrPageData();
+    },
     //页码改变
-    handleCurrentPageChange: function () {},
+    handleCurrentPageChange: function (currentPage) {
+      this.currentPage = currentPage;
+      this.getCurrPageData();
+    },
     //新建系统图
     createSystemGraph: function () {
       this.state = 2;
@@ -89,12 +108,40 @@ export default {
           "?ost=" +
           this.state +
           "&did=" +
-          this.diagramId
+          (this.selDiagram.id || "")
       );
     },
-  },
-  created() {},
+    //从allGraphArr中取出对应页数的数据
+    getCurrPageData: function () {
+      var startIndex = (this.currentPage - 1) * this.pageSize;
+      var endIndex = startIndex + this.pageSize;
+      this.graphArr = this.allGraphArr.slice(startIndex, endIndex);
+    },
+    //关键词输入框输入改变事件
+    searchInputChange: function () {
+      this.currentPage = 1;
+      this.getData();
+    },
+    //查询数据
+    getData: async function () {
+      try {
+        this.allGraphArr = await sysGraphController.getDiagrams(this.searchVal);
+        this.dataCount = this.allGraphArr.length;
+        this.getCurrPageData();
 
+        this.fullscreenLoading = false;
+      } catch (error) {
+        console.error(error);
+        this.allGraphArr = [];
+        this.graphArr = [];
+        this.dataCount = 0;
+        this.fullscreenLoading = false;
+      }
+    },
+  },
+  created() {
+    this.getData();
+  },
   mounted() {},
   components: {},
 };
@@ -104,6 +151,7 @@ export default {
 .container {
   display: flex;
   flex-direction: column;
+  background: #ffffff;
 }
 
 .header {
@@ -114,6 +162,7 @@ export default {
 
 .content {
   flex: 1;
+  overflow: hidden;
 }
 
 .searchInputDiv {
@@ -127,4 +176,14 @@ export default {
   height: 100%;
   display: inline-block;
 }
+
+.tableContainer {
+  height: calc(100% - 148px);
+  overflow: auto;
+}
+
+.pageContainer {
+  margin-top: 66px;
+  margin-bottom: 50px;
+}
 </style>

src/controller/sysGraphController.ts

@@ -1,6 +1,20 @@
 import { sysGraphHttpUtils } from "@/utils/http/sysGraphHttpUtils";
 
 export class sysGraphController { 
-    //查询系统图列表
-    async getDiagrams(){}
+    private static sysGraphHttpUtilsInstance = new sysGraphHttpUtils();
+    /**
+     * 查询系统图列表
+     * @param grpphName 系统图名称
+     */
+    static async getDiagrams(grpphName: string) { 
+        var resultObj = await this.sysGraphHttpUtilsInstance.postRequest('/diagram/getDiagrams', { name: grpphName });
+        if(resultObj.result!='success')
+            console.error(resultObj.reason);
+        var dataArr = resultObj.data || [];
+        dataArr.forEach(_c => { 
+            //图状态（Draft: 未发布, WaitCheck: 待审核, Checked: 审核完成, Recyle: 回收站, Publish: 发布）
+            _c.stateName = _c.state == 'Draft' ? '草稿' : _c.state == 'Publish' ? '上架' : _c.state == 'Recyle' ? '下架' : '';
+        });
+        return dataArr;
+    }
 }