1、axiosUtils里异常时不再抛出异常，而是输出错误信息

2、权限验证时的返回结果成功失败的判断比较改完使用logicOonfig里的_resultObj
3、提交系统图相关功能
4、代理配置中新增系统图相关配置

src/components/frame/login.vue

@@ -32,6 +32,7 @@
 import vueStore from "@/store";
 import { sessionStore } from "@/store/sessionStore";
 import { userController } from "@/controller/userController";
+import logicConfig from '@/logicConfig'
 import { Message } from "element-ui";
 
 export default {
@@ -59,7 +60,7 @@ export default {
           this.userPass
         );
 
-        if (loginResult.result != "success")
+        if (loginResult.result != logicConfig.resultObj.success)
           return (
             (this.fullscreenLoading = false),
             Message.error("登录失败，原因：" + loginResult.reason)

src/components/systemGraph/addGraph.vue

@@ -0,0 +1,205 @@
+<template>
+  <div id="divCreGraphContainer">
+    <el-dialog
+      title="新建系统图"
+      :visible="isVisible"
+      :show-close="false"
+      v-loading.fullscreen.lock="fullscreenLoading"
+    >
+      <div class="createConContainer">
+        <div>系统图名称*</div>
+        <div class="createCdCon">
+          <el-input v-model="createGraphName" placeholder="请输入"></el-input>
+        </div>
+
+        <div class="createCdTitle">项目*</div>
+        <div class="createCdCon">
+          <el-select
+            v-model="selProject"
+            value-key="id"
+            placeholder="请选择项目"
+            @change="selProjectChange"
+          >
+            <el-option
+              v-for="item in projects"
+              :key="item.id"
+              :label="item.name"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="createCdTitle">系统实例*</div>
+        <div class="createCdCon">
+          <el-cascader
+            placeholder="请选择系统图实例"
+            :options="systemInsArr"
+            :props="{ expandTrigger: 'hover' }"
+            @change="instanceChange"
+            ref="instanceCascader"
+          ></el-cascader>
+        </div>
+
+        <div class="createCdTitle">系统图模板*</div>
+        <div class="createCdCon">
+          <el-cascader
+            placeholder="请选择系统图模板"
+            :options="systemTemplateArr"
+            :props="{ expandTrigger: 'hover' }"
+            @change="templateChange"
+            ref="sysTemplateCascader"
+          ></el-cascader>
+        </div>
+
+        <div class="createFoot">
+          <el-button @click="cancelCreate">取消</el-button>
+          <el-button type="primary" @click="newOkEvent">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import { sysGraphController } from "@/controller/sysGraphController";
+
+export default {
+  props: ["isVisible"],
+  data() {
+    return {
+      fullscreenLoading: false,
+      //系统图名称，用于新建时绑定输入框
+      createGraphName: "",
+      //选择的项目，用于新建时绑定选择框
+      selProject: {},
+      //系统实例列表
+      systemInsArr: [],
+      //选择的系统实例 {label:'',code:'',value:'即ID'}
+      selSystemIns: {},
+      //系统图模板列表
+      systemTemplateArr: [],
+      //选择的系统图模板 {label:'',code:'',value:'即ID'}
+      selSystemTemplate: {},
+      //选择的系统类型 {label:'',code:'',value:'即ID'}
+      selSysType: {},
+      //选择的系统图类型 {label:'',code:'',value:'即ID'}
+      selSysGraphType: {},
+    };
+  },
+  computed: {
+    ...mapState(["projects"]),
+  },
+  methods: {
+    //取消创建
+    cancelCreate: function () {
+      window.close();
+    },
+    //选择项目后要查询该项目下的专业、系统类型、系统实例
+    selProjectChange: async function () {
+      this.fullscreenLoading = true;
+      this.systemInsArr = [];
+      try {
+        this.systemInsArr = await sysGraphController.getSysInstanceByProject(
+          this.selProject.id,
+          this.selProject.groupCode
+        );
+      } catch (error) {
+        console.error(error);
+      }
+      this.fullscreenLoading = false;
+    },
+    //系统实例选择事件
+    instanceChange: async function () {
+      this.fullscreenLoading = true;
+      try {
+        //选择的系统实例节点
+        var insNode = this.$refs.instanceCascader.getCheckedNodes()[0];
+        //系统类型节点
+        var typeNode = insNode.parent;
+
+        this.selSystemIns = insNode.data;
+        this.selSysType = typeNode.data;
+
+        //查询系统类型下的系统模版
+        var templateArr = await sysGraphController.getTemplateBySysCode(
+          this.selSysType.code
+        );
+        this.systemTemplateArr = templateArr;
+      } catch (error) {
+        console.error(error);
+      }
+      this.fullscreenLoading = false;
+    },
+    //模版选择事件
+    templateChange: function () {
+      //选择的系统图模板节点
+      var templateNode = this.$refs.sysTemplateCascader.getCheckedNodes()[0];
+      //系统图类型节点
+      var graphTypeNode = templateNode.parent;
+
+      this.selSystemTemplate = templateNode.data;
+      this.selSysGraphType = graphTypeNode.data;
+    },
+    //新增按钮事件
+    newOkEvent: async function () {
+      this.fullscreenLoading = true;
+      try {
+        var _paramObj = {
+          name: this.createGraphName,
+          //系统图类型编码
+          type: this.selSysGraphType.code,
+          //模板ID
+          templateId: this.selSystemTemplate.value,
+          //系统类型编码
+          system: this.selSysType.code,
+          //系统实例ID
+          systemId: this.selSystemIns.value,
+          projectId: this.selProject.id,
+          groupCode: this.selProject.groupCode,
+        };
+
+        //新增系统图
+        var templateArr = await sysGraphController.createSysGraph(_paramObj);
+      } catch (error) {
+        console.error(error);
+      }
+      this.fullscreenLoading = false;
+    },
+  },
+  created() {},
+
+  mounted() {},
+  components: {},
+};
+</script>
+
+<style>
+#divCreGraphContainer .createCdTitle {
+  margin-top: 16px;
+}
+
+#divCreGraphContainer .createCdCon {
+  margin-top: 8px;
+  width: 360px;
+}
+
+#divCreGraphContainer .createCdCon .el-select {
+  width: 100%;
+}
+
+#divCreGraphContainer .createConContainer {
+  margin-left: 80px;
+}
+
+#divCreGraphContainer .createFoot {
+  float: right;
+  margin-right: 73px;
+  margin-top: 80px;
+}
+
+#divCreGraphContainer .el-dialog {
+  width: 560px;
+  height: 520px;
+}
+</style>

src/components/systemGraph/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="divGraphEdit">
+  <div id="divGraphEdit" v-loading.fullscreen.lock="fullscreenLoading">
     <div class="firstRow">
       <div class="firstOperDivContainer">
         <img
@@ -105,79 +105,19 @@
       <div></div>
     </div>
 
-    <el-dialog title="新建系统图" :visible="operState == 2" :show-close="false">
-      <div class="createConContainer">
-        <div>系统图名称*</div>
-        <div class="createCdCon">
-          <el-input v-model="createGraphName" placeholder="请输入"></el-input>
-        </div>
-
-        <div class="createCdTitle">项目*</div>
-        <div class="createCdCon">
-          <el-select
-            v-model="selProject"
-            value-key="id"
-            placeholder="请选择项目"
-          >
-            <el-option
-              v-for="item in projects"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            >
-            </el-option>
-          </el-select>
-        </div>
-
-        <div class="createCdTitle">系统实例*</div>
-        <div class="createCdCon">
-          <el-select
-            v-model="selSystemIns"
-            value-key="id"
-            placeholder="请选择系统实例"
-          >
-            <el-option
-              v-for="item in systemInsArr"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            >
-            </el-option>
-          </el-select>
-        </div>
-
-        <div class="createCdTitle">系统图模板*</div>
-        <div class="createCdCon">
-          <el-select
-            v-model="selSystemTemplate"
-            value-key="id"
-            placeholder="请选择系统图模板"
-          >
-            <el-option
-              v-for="item in systemTemplateArr"
-              :key="item.id"
-              :label="item.name"
-              :value="item"
-            >
-            </el-option>
-          </el-select>
-        </div>
-
-        <div class="createFoot">
-          <el-button @click="cancelCreate">取消</el-button>
-          <el-button type="primary">确定</el-button>
-        </div>
-      </div>
-    </el-dialog>
+    <addGraph :isVisible="operState == 2"></addGraph>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
+import { sysGraphController } from "@/controller/sysGraphController";
+import addGraph from './addGraph.vue'
 
 export default {
   props: [],
   data() {
     return {
+      fullscreenLoading: false,
       //缩放范围
       scaleArr: [
         {
@@ -207,24 +147,6 @@ export default {
       operState: -1,
       //系统图ID
       diagramId: "",
-      //系统图名称，用于新建时绑定输入框
-      createGraphName: "",
-      //选择的项目，用于新建时绑定选择框
-      selProject: {},
-      //系统实例列表
-      systemInsArr: [
-        { id: "1", name: "实例1" },
-        { id: "2", name: "实例2" },
-      ],
-      //选择的系统实例
-      selSystemIns: {},
-      //系统图模板列表
-      systemTemplateArr: [
-        { id: "1", name: "模板1" },
-        { id: "2", name: "模板2" },
-      ],
-      //选择的系统图模板
-      selSystemTemplate: {},
     };
   },
   computed: {
@@ -235,6 +157,40 @@ export default {
     cancelCreate: function () {
       window.close();
     },
+    //选择项目后要查询该项目下的专业、系统类型、系统实例
+    selProjectChange: async function () {
+      this.fullscreenLoading = true;
+      this.systemInsArr = [];
+      try {
+        this.systemInsArr = await sysGraphController.getSysInstanceByProject(
+          this.selProject.id,
+          this.selProject.groupCode
+        );
+      } catch (error) {
+        console.error(error);
+      }
+      this.fullscreenLoading = false;
+    },
+    //系统实例选择事件
+    instanceChange: async function () {
+      this.fullscreenLoading = true;
+      try {
+        //此时的数组内为选择的最低级节点，即系统实例
+        var checkedNodes = this.$refs.instanceCascader.getCheckedNodes();
+        //系统类型
+        var typeNode = checkedNodes[0].parent;
+        //查询系统类型下的系统模版
+        var templateArr = await sysGraphController.getTemplateBySysCode(
+          typeNode.data.code
+        );
+        this.systemTemplateArr = templateArr;
+      } catch (error) {
+        console.error(error);
+      }
+      this.fullscreenLoading = false;
+    },
+    //新增按钮事件
+    
   },
   created() {
     this.operState = !this.$route.query.ost
@@ -247,7 +203,9 @@ export default {
   },
 
   mounted() {},
-  components: {},
+  components: {
+      addGraph
+  },
 };
 </script>
 
@@ -354,34 +312,6 @@ export default {
   cursor: pointer;
 }
 
-#divGraphEdit .createCdTitle {
-  margin-top: 16px;
-}
-
-#divGraphEdit .createCdCon {
-  margin-top: 8px;
-  width: 360px;
-}
-
-#divGraphEdit .createCdCon .el-select {
-  width: 100%;
-}
-
-#divGraphEdit .createConContainer {
-  margin-left: 80px;
-}
-
-#divGraphEdit .createFoot {
-  float: right;
-  margin-right: 73px;
-  margin-top: 80px;
-}
-
-#divGraphEdit .el-dialog {
-  width: 560px;
-  height: 520px;
-}
-
 #divGraphEdit .secondRow {
   flex: 1;
   display: flex;

src/controller/sysGraphController.ts

@@ -1,20 +1,118 @@
 import { sysGraphHttpUtils } from "@/utils/http/sysGraphHttpUtils";
+import { logicConfig } from "@/logicConfig";
 
-export class sysGraphController { 
+export class sysGraphController {
     private static sysGraphHttpUtilsInstance = new sysGraphHttpUtils();
     /**
      * 查询系统图列表
      * @param grpphName 系统图名称
      */
-    static async getDiagrams(grpphName: string) { 
+    static async getDiagrams(grpphName: string) {
         var resultObj = await this.sysGraphHttpUtilsInstance.postRequest('/diagram/getDiagrams', { name: grpphName });
-        if(resultObj.result!='success')
+        if (resultObj.result != logicConfig.resultObj.success)
             console.error(resultObj.reason);
+        var newDataArr = [];
         var dataArr = resultObj.data || [];
-        dataArr.forEach(_c => { 
+        dataArr.forEach(_c => {
             //图状态（Draft: 未发布, WaitCheck: 待审核, Checked: 审核完成, Recyle: 回收站, Publish: 发布）
             _c.stateName = _c.state == 'Draft' ? '草稿' : _c.state == 'Publish' ? '上架' : _c.state == 'Recyle' ? '下架' : '';
+            newDataArr.push({
+                id: _c.id,
+                name: _c.name,
+                sysType: _c.system,
+                sysInstance: _c.systemId,
+                sysTemplate: _c.templateId,
+                //state: i % 3 == 1 ? 'Publish' : i % 3 == 2 ? 'Draft' : 'Recyle',
+                createTime: '2021/12/27 13:13'
+            });
         });
-        return dataArr;
+        return newDataArr;
+    }
+
+    /**
+     * 根据项目查询该项目下的专业>系统类型>系统实例
+     * @param projectId 项目ID
+     * @param groupCode 集团编码
+     */
+    static async getSysInstanceByProject(projectId: string, groupCode: string) {
+        var url = '/diagram/major/system/instance?projectId=' + projectId + '&groupCode=' + groupCode;
+        var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, {});
+        if (resultObj.result != logicConfig.resultObj.success)
+            console.error(resultObj.reason);
+        var dataArr = resultObj.data || [];
+        var newDataArr = [];
+
+        dataArr.forEach(_c => {
+            //_c为专业
+            let zhuanye = { value: _c.id, label: _c.label, code: _c.code, children: [] };
+            let sysTypeArr = [];
+            (_c.children || []).forEach(_c2 => {
+                //_c2为系统类型
+                let sysType = { value: _c2.id, label: _c2.aliasName, code: _c2.code, children: [] };
+                let sysInstanceArr = [];
+                (_c2.children || []).forEach(_c3 => {
+                    //_c3为系统实例
+                    sysInstanceArr.push({ value: _c3.id, label: _c3.name, code: _c3.code });
+                });
+                sysType.children = sysInstanceArr;
+                sysTypeArr.push(sysType);
+            });
+            zhuanye.children = sysTypeArr;
+            newDataArr.push(zhuanye);
+        });
+        return newDataArr;
+    }
+
+    /**
+     * 根据系统类型查询系统图模板，数据结构：系统图类型 ->  系统图模版
+     * @param sysCode 系统类型编码
+     */
+    static async getTemplateBySysCode(sysCode: string) {
+        var url = '/diagram/systemType/template';
+        var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, { system: sysCode });
+        if (resultObj.result != logicConfig.resultObj.success)
+            console.error(resultObj.reason);
+        var dataArr = resultObj.data || [];
+        var newDataArr = [];
+
+        dataArr.forEach(_sysGraphType => {
+            //_sysGraphType为系统图类型
+            let sysGraphType = { value: _sysGraphType.id, label: _sysGraphType.name, code: _sysGraphType.code, children: [] };
+            let templateArr = [];
+            (_sysGraphType.children || []).forEach(_template => {
+                //_template为系统类型
+                let template = { value: _template.id, label: _template.name, code: _template.code };
+                templateArr.push(template);
+            });
+            sysGraphType.children = templateArr;
+            newDataArr.push(sysGraphType);
+        });
+        return newDataArr;
+    }
+
+    /**
+     * 新增系统图
+     * @param _paramObj {name:'系统图名称',type:'系统图类型编码',templateId:'引用的模板id',system:'所属的系统类型',projectId:'项目id',systemId:'对应的系统实例id',groupCode:'集团编码',}
+     */
+    static async createSysGraph(_paramObj: any) {
+        var url = '/diagram/newDiagram';
+        var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, _paramObj);
+        if (resultObj.result != logicConfig.resultObj.success) {
+            console.error(resultObj.reason);
+            return resultObj;
+        }
+
+        var dataObj = resultObj.data || {};
+        if (!dataObj.id)
+            return { result: logicConfig.resultObj.failure, reason: '确实系统图ID' };
+
+        //新增成功后，要加载数据
+        var loadDataUrl = '/diagram/loadData';
+        var loadResultObj = await this.sysGraphHttpUtilsInstance.postRequest(loadDataUrl, { id: dataObj.id });
+        if(loadResultObj.result!=logicConfig.resultObj.success){
+            return { result: logicConfig.resultObj.failure, reason: '加载模板数据失败，原因：' + loadResultObj.reason };
+        }
+console.log(loadResultObj.data);
+        return loadResultObj.data;
     }
 }

src/logicConfig/index.ts

@@ -21,4 +21,13 @@ export class logicConfig {
     public static get routerNameConfig() {
         return this._routerNameConfig;
     }
+
+    //后台返回结果中，成功的定义和失败的定义
+    private static _resultObj = {
+        success: 'success',
+        failure: 'failure'
+    };
+    public static get resultObj() {
+        return this._resultObj;
+    }
 }

src/utils/authUtils.ts

@@ -36,7 +36,7 @@ export class authUtils {
     let userControllerInstance = new userController();
     let userInfoResult = await userControllerInstance.getUserInfoById();
 
-    if (userInfoResult.result != "success") {
+    if (userInfoResult.result != logicConfig.resultObj.success) {
       console.error("获取用户信息失败，原因：" + userInfoResult.reason);
       return next({ path: logicConfig.routerNameConfig.loginRouteName });
     }

src/utils/http/axiosUtils.ts

@@ -5,6 +5,7 @@
 
 import axios from "axios";
 import vueStore from "@/store";
+import { logicConfig } from "@/logicConfig";
 
 var CancelToken = axios.CancelToken;
 var cancel;
@@ -48,7 +49,18 @@ export class axiosUtils {
    */
   protected async getRequest(url: string, data: any) {
     try {
-      let response = await this.customRequest(url, {}, data, "get");
+      var urlArr = url.split("?");
+      var urlPrefix = urlArr[0];
+      var urlParamStr = urlArr[1] || "";
+
+      var paramKeyArr = Object.keys(data || {});
+      paramKeyArr.forEach(_key => { 
+        urlParamStr = _key + '=' + data[_key] + '&' + urlParamStr;
+      });
+
+      var newUrl = urlPrefix + '?' + urlParamStr;
+
+      let response = await this.customRequest(newUrl, {}, {}, "get");
       return response;
     } catch (err) {
       throw err;
@@ -117,7 +129,12 @@ export class axiosUtils {
       });
       return response.data;
     } catch (err) {
-      throw err;
+      // throw err;
+      console.error(err);
+      return {
+        result: logicConfig.resultObj.failure,
+        reason: '请求异常'
+      };
     }
   }
 }

vue.config.js

@@ -20,6 +20,16 @@ module.exports = {
           '^/baseService': ''
         }
       },
+      '/sysGraphService': {
+        // 此处的写法，目的是为了 将 /2dapi/jsonz 替换target的值
+        target: 'http://127.0.0.1:8833',
+        // target: 'http://develop.ysbdtp.com/adm-diagram',
+        // 允许跨域
+        changeOrigin: true,
+        pathRewrite: {
+          '^/sysGraphService': ''
+        }
+      },
     }
   },
   pages: {