Bläddra i källkod

1、新增系统图编辑页面、编辑页面的路由、编辑页面的路由配置
2、修改编辑器页面
3、vuex里的项目信息内新增信息点groupCode

niuheng 3 år sedan
förälder
incheckning
313fdab3ac

BIN
public/favicon.ico


+ 1 - 1
public/systemConf.js

@@ -39,7 +39,7 @@ var __systemConf = {
       "id": "CADtuzhiguanli",
       "name": "CAD核查图纸管理",
       "orders": 7,
-      "url": "/systemGraph",
+      "url": "/systemGraph11",
       "icon": "icon-topology"
     }]
   }, {

+ 28 - 0
src/components/systemGraph/edit.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container">我是编辑器</div>
+</template>
+<script>
+import { mapState } from "vuex";
+
+export default {
+  props: [],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["projects"]),
+  },
+  methods: {},
+  created() {},
+
+  mounted() {},
+  components: {},
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+}
+</style>

+ 104 - 7
src/components/systemGraph/index.vue

@@ -1,23 +1,120 @@
 <template>
-  <div>
-      我是系统图
+  <div class="container">
+    <div class="header">
+      <div class="searchInputDiv">
+        <el-input
+          placeholder="搜索系统实例"
+          prefix-icon="el-icon-search"
+          v-model="searchVal"
+        >
+        </el-input>
+      </div>
+      <div class="addDiv">
+        <el-button type="primary" @click="createSystemGraph"
+          >新建系统图</el-button
+        >
+      </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
+        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>
 </template>
 <script>
+import { mapState } from "vuex";
+import { logicConfig } from "@/logicConfig";
+import packageConfig from "../../../package.json";
+
 export default {
   props: [],
   data() {
-    return {};
+    return {
+      //搜索关键字
+      searchVal: "",
+      tableData: [],
+      //当前页码
+      currentPage: 1,
+      //每页条数
+      pageSize: 20,
+      //总条数
+      dataCount: 0,
+    };
+  },
+  computed: {
+    ...mapState(["selectProject"]),
+  },
+  methods: {
+    //每页条数改变
+    handlePageSizeChange: function () {},
+    //页码改变
+    handleCurrentPageChange: function () {},
+    //新建系统图
+    createSystemGraph: function () {
+      window.open(
+        "/" +
+          packageConfig.name +
+          logicConfig.routerNameConfig.systemGraphEditName
+      );
+    },
   },
-  computed: {},
-  methods: {},
   created() {},
 
   mounted() {},
-  components: {
-  },
+  components: {},
 };
 </script>
 
 <style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  height: 70px;
+  line-height: 70px;
+  text-align: right;
+}
+
+.content {
+  flex: 1;
+}
+
+.searchInputDiv {
+  width: 150px;
+  height: 100%;
+  display: inline-block;
+}
+
+.addDiv {
+  width: 100px;
+  height: 100%;
+  display: inline-block;
+}
 </style>

+ 4 - 2
src/logicConfig/index.ts

@@ -13,8 +13,10 @@ export class logicConfig {
     private static _routerNameConfig={
         //登录页面路由名称
         loginRouteName:'/login',
-        //系统图编辑器路由名称
-        systemGraphName:'/systemGraph'
+        //系统图编辑器主页面路由名称
+        systemGraphName:'/systemGraph',
+        //系统图编辑页面路由名称
+        systemGraphEditName:'/systemGraphEdit'
     };
     public static get routerNameConfig() {
         return this._routerNameConfig;

+ 1 - 1
src/router/index.js

@@ -11,7 +11,7 @@ routes = routes.concat(systemRoute)
 
 const router = new Router({
   mode: 'history',
-  base: packageConfig.name,
+  base: '/' + packageConfig.name,
   routes: routes
 })
 

+ 6 - 0
src/router/system.js

@@ -4,6 +4,8 @@ import layoutMain from '@/Main.vue'
 import login from '@/components/frame/login.vue'
 //系统图
 import systemGraph from '@/components/systemGraph'
+//系统图编辑页面
+import systemGraphEdit from '@/components/systemGraph/edit'
 
 export default [{
   path: logicConfig.routerNameConfig.loginRouteName,
@@ -21,4 +23,8 @@ export default [{
     path:'/',
     component: systemGraph
   }]
+},{
+  path: logicConfig.routerNameConfig.systemGraphEditName,
+  name: '系统图编辑器',
+  component: systemGraphEdit,
 }]

+ 2 - 1
src/store/index.js

@@ -14,8 +14,9 @@ export default new Vuex.Store({
         fromPath: '',
         //面包屑{label:'',to:''}
         breadcrumbs: [],
-        //项目信息{id:'',name:''}
+        //项目信息{id:'',name:'',groupCode:''}
         projects: [],
+        //选择的项目信息
         selectProject: {}
     },
     getters: {},

+ 2 - 1
src/utils/authUtils.ts

@@ -62,7 +62,8 @@ export class authUtils {
     _userInfo.projects.forEach(_c => {
       projects.push({
         id: _c.projectLocalID,
-        name: _c.projectLocalName
+        name: _c.projectLocalName,
+        groupCode: _c.groupCode
       });
     });
     vueStore.commit("updateProjects", projects);