数据存储

src/assets/iconfont/demo_index.html

@@ -54,6 +54,48 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe651;</span>
+                <div class="name">WFS</div>
+                <div class="code-name">&amp;#xe651;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64d;</span>
+                <div class="name">WMS</div>
+                <div class="code-name">&amp;#xe64d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64e;</span>
+                <div class="name">WCS</div>
+                <div class="code-name">&amp;#xe64e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64f;</span>
+                <div class="name">WMTS</div>
+                <div class="code-name">&amp;#xe64f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67d;</span>
+                <div class="name">地图服务管理</div>
+                <div class="code-name">&amp;#xe67d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6db;</span>
+                <div class="name">导入矢量</div>
+                <div class="code-name">&amp;#xe6db;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeda0;</span>
+                <div class="name">导入栅格文件</div>
+                <div class="code-name">&amp;#xeda0;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe630;</span>
                 <div class="name">rasterLayer</div>
@@ -186,9 +228,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1639377062104') format('woff2'),
-       url('iconfont.woff?t=1639377062104') format('woff'),
-       url('iconfont.ttf?t=1639377062104') format('truetype');
+  src: url('iconfont.woff2?t=1639451880378') format('woff2'),
+       url('iconfont.woff?t=1639451880378') format('woff'),
+       url('iconfont.ttf?t=1639451880378') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -214,6 +256,69 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-WFS"></span>
+            <div class="name">
+              WFS
+            </div>
+            <div class="code-name">.icon-WFS
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-WMS"></span>
+            <div class="name">
+              WMS
+            </div>
+            <div class="code-name">.icon-WMS
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-WCS"></span>
+            <div class="name">
+              WCS
+            </div>
+            <div class="code-name">.icon-WCS
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-WMTS"></span>
+            <div class="name">
+              WMTS
+            </div>
+            <div class="code-name">.icon-WMTS
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fuwu"></span>
+            <div class="name">
+              地图服务管理
+            </div>
+            <div class="code-name">.icon-fuwu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shiliang"></span>
+            <div class="name">
+              导入矢量
+            </div>
+            <div class="code-name">.icon-shiliang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shange"></span>
+            <div class="name">
+              导入栅格文件
+            </div>
+            <div class="code-name">.icon-shange
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-Raster"></span>
             <div class="name">
@@ -412,6 +517,62 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-WFS"></use>
+                </svg>
+                <div class="name">WFS</div>
+                <div class="code-name">#icon-WFS</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-WMS"></use>
+                </svg>
+                <div class="name">WMS</div>
+                <div class="code-name">#icon-WMS</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-WCS"></use>
+                </svg>
+                <div class="name">WCS</div>
+                <div class="code-name">#icon-WCS</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-WMTS"></use>
+                </svg>
+                <div class="name">WMTS</div>
+                <div class="code-name">#icon-WMTS</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fuwu"></use>
+                </svg>
+                <div class="name">地图服务管理</div>
+                <div class="code-name">#icon-fuwu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shiliang"></use>
+                </svg>
+                <div class="name">导入矢量</div>
+                <div class="code-name">#icon-shiliang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shange"></use>
+                </svg>
+                <div class="name">导入栅格文件</div>
+                <div class="code-name">#icon-shange</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-Raster"></use>

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2992017 */
-  src: url('iconfont.woff2?t=1639377062104') format('woff2'),
-       url('iconfont.woff?t=1639377062104') format('woff'),
-       url('iconfont.ttf?t=1639377062104') format('truetype');
+  src: url('iconfont.woff2?t=1639451880378') format('woff2'),
+       url('iconfont.woff?t=1639451880378') format('woff'),
+       url('iconfont.ttf?t=1639451880378') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-WFS:before {
+  content: "\e651";
+}
+
+.icon-WMS:before {
+  content: "\e64d";
+}
+
+.icon-WCS:before {
+  content: "\e64e";
+}
+
+.icon-WMTS:before {
+  content: "\e64f";
+}
+
+.icon-fuwu:before {
+  content: "\e67d";
+}
+
+.icon-shiliang:before {
+  content: "\e6db";
+}
+
+.icon-shange:before {
+  content: "\eda0";
+}
+
 .icon-Raster:before {
   content: "\e630";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,55 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "26452386",
+      "name": "WFS",
+      "font_class": "WFS",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "26452383",
+      "name": "WMS",
+      "font_class": "WMS",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "26452384",
+      "name": "WCS",
+      "font_class": "WCS",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "26452385",
+      "name": "WMTS",
+      "font_class": "WMTS",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "10800034",
+      "name": "地图服务管理",
+      "font_class": "fuwu",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "14020320",
+      "name": "导入矢量",
+      "font_class": "shiliang",
+      "unicode": "e6db",
+      "unicode_decimal": 59099
+    },
+    {
+      "icon_id": "22376289",
+      "name": "导入栅格文件",
+      "font_class": "shange",
+      "unicode": "eda0",
+      "unicode_decimal": 60832
+    },
     {
       "icon_id": "19908872",
       "name": "rasterLayer",

src/router/index.js

@@ -3,8 +3,8 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
-import {constantRoutes,sysRoutes} from './router.config'
-const routerMap = constantRoutes.concat(sysRoutes)
+import { constantRoutes, sysRoutes, subRoutes } from './router.config'
+const routerMap = constantRoutes.concat(sysRoutes).concat(subRoutes)
 
 const createRouter = () => new Router({
   // mode: 'history', // 控制url地址中是否显示#

src/router/router.config.js

@@ -46,7 +46,7 @@ export const constantRoutes = [
 ]
 
 // 路由菜单
-export const sysRoutes=[
+export const sysRoutes = [
     {
         path: '/aboutandstatus',
         type: 'sys',
@@ -62,7 +62,7 @@ export const sysRoutes=[
             component: () =>
                 import('@/views/system/aboutandstatus/serverstatus/index'),
             label: '服务器状态',
-            meta: { title: '服务器状态',icon: 'iconfont icon-fuwuqi' }
+            meta: { title: '服务器状态', icon: 'iconfont icon-fuwuqi' }
         },
         {
             path: '/serverlogs',
@@ -71,7 +71,7 @@ export const sysRoutes=[
             component: () =>
                 import('@/views/system/aboutandstatus/serverlogs/index'),
             label: 'toflyServer日志',
-            meta: { title: 'toflyServer日志',icon: 'iconfont icon-rizhi' }
+            meta: { title: 'toflyServer日志', icon: 'iconfont icon-rizhi' }
         },
         {
             path: '/about',
@@ -80,7 +80,7 @@ export const sysRoutes=[
             component: () =>
                 import('@/views/system/aboutandstatus/about/index'),
             label: '关于toflyServer',
-            meta: { title: '关于toflyServer',icon: 'iconfont icon-guanyu' }
+            meta: { title: '关于toflyServer', icon: 'iconfont icon-guanyu' }
         }]
     },
     {
@@ -145,6 +145,81 @@ export const sysRoutes=[
             label: '样式',
             meta: { title: '样式', icon: "iconfont icon-yangshi" }
         }]
+    },
+    {
+        path: '/service',
+        type: 'sys',
+        component: Layout,
+        alwaysShow: false,
+        widgetid: '',
+        label: 'OGC服务',
+        meta: { title: 'OGC服务', icon: "iconfont icon-fuwu" },
+        children: [{
+            path: '/WMTS',
+            name: 'WMTS',
+            type: 'sys',
+            component: () =>
+                import('@/views/system/data/previewlayer/index'),
+            label: 'WMTS',
+            meta: { title: 'WMTS', icon: "iconfont icon-WMTS" }
+        },
+        {
+            path: '/WCS',
+            name: 'WCS',
+            type: 'sys',
+            component: () =>
+                import('@/views/system/data/workspace/index'),
+            label: 'WCS',
+            meta: { title: 'WCS', icon: "iconfont icon-WCS" }
+        },
+        {
+            path: '/WFS',
+            name: 'WFS',
+            type: 'sys',
+            component: () =>
+                import('@/views/system/data/datastore/index'),
+            label: 'WFS',
+            meta: { title: 'WFS', icon: "iconfont icon-WFS" }
+        },
+        {
+            path: '/WMS',
+            name: 'WMS',
+            type: 'sys',
+            component: () =>
+                import('@/views/system/data/layers/index'),
+            label: 'WMS',
+            meta: { title: 'WMS', icon: "iconfont icon-WMS" }
+        }]
+    }
+]
+
+/**其他子页面，不显示在左侧菜单 */
+export const subRoutes = [
+    {
+        path: '/data',
+        type: 'sys',
+        component: Layout,
+        alwaysShow: false,
+        widgetid: '',
+        label: '数据',
+        meta: { title: '数据', icon: "iconfont icon-shujuku" },
+        children: [{
+            path: '/configureworkspace/:page',
+            name: 'configureworkspace',
+            type: 'sys',
+            component: () =>
+                import('@/views/system/data/workspace/configureworkspace/index'),
+            label: '配置工作空间',
+            meta: { title: '配置工作空间' }
+        },{
+            path: '/datastore/shapefiledirectory/:page',
+            name: 'shapefiledirectory',
+            type: 'sys',
+            component: () =>
+                import('@/views/system/data/datastore/shapefiledirectory/index'),
+            label: 'shapefile文件目录',
+            meta: { title: 'shapefile文件目录' }
+        }]
     }
 ]
 

src/styles/base.scss

@@ -351,9 +351,6 @@ div:focus {
     .el-table thead {
       color: #4e4e4e;
     }
-    .tofly-pagination{
-      margin-top: 15px;
-    }
   }
   .link-btn{
     color:#409EFF;
@@ -372,6 +369,20 @@ div:focus {
   font-size: 14px;
   margin-bottom: 10px;
 }
+.tofly-pagination{
+  margin-top: 15px;
+}
+.el-table.tofly-table{
+  thead {
+    color: #4e4e4e;
+  }
+  td{
+    padding: 8px 0;
+  }
+  td, th {
+    text-align: center;
+  }
+} 
 .el-dialog.tofly-dialog{
   .el-dialog__header{
     background-color: #3c8dbc;
@@ -382,16 +393,4 @@ div:focus {
       color: #aae0ff;
     }
   }
-  .el-table td{
-    padding: 8px 0;
-  }
-  .el-table td, .el-table th {
-    text-align: center;
-  }
-  .el-table thead {
-    color: #4e4e4e;
-  }
-  .tofly-pagination{
-    margin-top: 15px;
-  }
 }

src/views/system/aboutandstatus/serverstatus/index.vue

@@ -7,7 +7,7 @@
     <div class="tofly-body">
       <el-tabs v-model="activeName">
         <el-tab-pane label="状态" name="first">
-          <el-table :data="tableData" style="width: 100%">
+          <el-table class="tofly-table" :data="tableData" style="width: 100%">
             <el-table-column prop="name" label="名称"></el-table-column>
             <el-table-column prop="value" label="值"></el-table-column>
             <el-table-column label="操作">
@@ -18,7 +18,7 @@
           </el-table>
         </el-tab-pane>
         <el-tab-pane label="模块" name="second">
-          <el-table :data="tableData2" style="width: 100%">
+          <el-table class="tofly-table" :data="tableData2" style="width: 100%">
             <el-table-column prop="moduleName" label="模块名称">
               <template slot-scope="scope">
                 <span class="link-btn">{{scope.row.moduleName}}</span>
@@ -43,7 +43,7 @@
         </el-tab-pane>
         <el-tab-pane label="系统状态" name="third">
           <div class="update-time">{{updateTime}}</div>
-          <el-table :data="tableData3" style="width: 100%">
+          <el-table class="tofly-table" :data="tableData3" style="width: 100%">
             <el-table-column prop="name" label="信息"></el-table-column>
             <el-table-column prop="value" label="值"></el-table-column>
           </el-table>

src/views/system/data/datastore/datasouce.js

@@ -0,0 +1,89 @@
+export default [
+    {
+        name:'矢量数据源',
+        list:[
+            {
+                name:'shapefile文件目录',
+                type:'Shapefile',
+                description:'将一个包含shapefile文件的目录作为数据源',
+                path:'/datastore/shapefiledirectory'
+            },
+            {
+                name:'shapefile',
+                type:'Shapefile',
+                description:'ESRI Shapefile(*.shp)文件',
+                path:''
+            },
+            {
+                name:'GeoPackage',
+                description:'GeoPackage地理数据库',
+                path:''
+            },
+            {
+                name:'PostGIS',
+                description:'PostGIS数据库',
+                path:''
+            },
+            {
+                name:'PostGIS(JNDI)',
+                description:'PostGIS数据库，使用JDNI数据源连接池',
+                path:''
+            },
+            {
+                name:'Properties',
+                description:'包含要素信息的JAVA属性文件',
+                path:''
+            },
+            {
+                name:'Web Feature Server(NG)',
+                description:'将一个shapefile目录作为数据源',
+                path:''
+            }
+        ]
+    },
+    {
+        name:'栅格数据源',
+        list:[
+            {
+                name:'ArcGrid',
+                description:'ESRI创建的覆盖文件格式',
+                path:''
+            },
+            {
+                name:'GeoPackage(mosaic)',
+                description:'GeoPackage光栅数据',
+                path:''
+            },
+            {
+                name:'GeoTIFF',
+                description:'包含地理信息的TIF图像文件',
+                path:''
+            },
+            {
+                name:'ImageMosaic',
+                description:'将一个包含栅格数据的文件目录作为数据源',
+                path:''
+            },
+            {
+                name:'WorldImage',
+                description:'对栅格地图图像进行地理配准的纯文本文件',
+                path:''
+            }
+        ]
+    },
+    {
+        name:'其他数据源',
+        list:[
+            {
+                name:'WMS',
+                description:'远程Web地图服务',
+                path:''
+            },
+            {
+                name:'WMTS',
+                description:'远程Web地图切片服务',
+                path:''
+            }
+        ]
+    }
+]

src/views/system/data/datastore/index.vue

@@ -11,13 +11,21 @@
         <el-input placeholder="请输入关键字" size="small" prefix-icon="el-icon-search" v-model="input1" style="width:230px;margin-left:10px">
         </el-input>
       </div>
-      <el-table :data="tableData" style="width: 100%">
+      <el-table class="tofly-table" :data="tableData" style="width: 100%">
         <el-table-column type="selection" width="100"></el-table-column>
-        <el-table-column label="数据类型"> </el-table-column>
-        <el-table-column label="工作区"></el-table-column>
-        <el-table-column label="数据存储名称"></el-table-column>
-        <el-table-column label="类型"></el-table-column>
-        <el-table-column label="是否启用">
+        <el-table-column prop="dataType" label="数据类型" width="100"></el-table-column>
+        <el-table-column prop="workspace" label="工作区">
+          <template slot-scope="scope">
+            <span class="link-btn" v-text="scope.row.workspace" @click="editWorkspace(scope.row.workspace)"></span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="数据存储名称">
+          <template slot-scope="scope">
+            <span class="link-btn" v-text="scope.row.name" @click="editdatasource(scope.row.name)"></span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型"></el-table-column>
+        <el-table-column prop="enabled" label="是否启用">
           <template slot-scope="scope">
             <span v-if="scope.row.enabled" class="iconfont icon-gou" style="color:#67C23A;font-size:12px"></span>
             <span v-else class="iconfont icon-chacha" style="color:#f56c6c;font-size:12px"></span>
@@ -25,23 +33,97 @@
         </el-table-column>
       </el-table>
       <div class="tofly-pagination">
-        <el-pagination small @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="20"
-                       layout="total, prev, pager, next, jumper" :total="400">
+        <el-pagination small :current-page="1" :page-size="20" layout="total, prev, pager, next, jumper" :total="400">
         </el-pagination>
       </div>
     </div>
+
+    <!-- 选择数据源类型 -->
+    <el-dialog custom-class="tofly-dialog" title="新建数据源" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
+      <div class="dialog-body">
+        <div v-for="(item,index) in datasouce" :key="index">
+          <p class="data-souce-type">{{item.name}}</p>
+          <ul>
+            <li v-for="(souceType,n) in item.list" :key="n">
+              <span class="link-btn" @click="adddatasource(souceType)">{{souceType.name}}</span>
+              <span>{{souceType.description}}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import datasouce from '@/views/system/data/datastore/datasouce'
 export default {
   data() {
     return {
+      datasouce: datasouce,
+      dialogVisible: false,
       tableData: []
     }
+  },
+  mounted() {
+    for (let index = 0; index < 10; index++) {
+      this.tableData.push({
+        dataType: '',
+        workspace: 'test' + index,
+        name: 'test' + index,
+        type: 'Shapefile',
+        enabled: index != 0 && index % 3 == 0 ? true : false,
+      })
+    }
+  },
+  methods: {
+    /**
+     * 编辑工作空间
+     */
+    editWorkspace(name) {
+      this.$router.push({
+        path: './configureworkspace/editworkspace',
+        query: {
+          name: name
+        }
+      })
+    },
+    adddatasource(souceType) {
+      this.$router.push({
+        path: souceType.path + '/adddatasource'
+      })
+    },
+    editdatasource(name) {
+      this.$router.push({
+        path: souceType.path + '/editdatasource',
+        query: {
+          name: name
+        }
+      })
+    },
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.dialog-body {
+  max-height: 480px;
+  p.data-souce-type {
+    font-size: 16px;
+    color: #3375a1;
+  }
+  ul {
+    padding: 0 20px;
+    list-style: none;
+    li {
+      margin-bottom: 10px;
+      span {
+        &:nth-child(2) {
+          margin-left: 10px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/system/data/datastore/shapefiledirectory/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="tofly-page">
+    <div class="tofly-header">
+      <div class="title">新建矢量数据源-shapefile文件目录</div>
+      <div class="describe">将一个包含shapefile文件的目录作为数据源</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+</style>

src/views/system/data/previewlayer/index.vue

@@ -8,7 +8,7 @@
       <div class="tofly-nav">
         <el-input placeholder="请输入标题关键字" size="small" prefix-icon="el-icon-search" v-model="input1" style="width:230px"></el-input>
       </div>
-      <el-table :data="tableData" style="width: 100%">
+      <el-table class="tofly-table" :data="tableData" style="width: 100%">
         <el-table-column label="类型" width="150">
           <template slot-scope="scope">
             <span :class="['iconfont','icon-'+scope.row.type]" style="color:#3c8dbc"></span>

src/views/system/data/workspace/configureworkspace/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="tofly-page">
+    <div class="tofly-header" v-if="$route.params.page=='editworkspace'">
+      <div class="title">编辑工作空间</div>
+      <div class="describe">编辑现有的工作空间</div>
+    </div>
+    <div class="tofly-header" v-else>
+      <div class="title">添加工作空间</div>
+      <div class="describe">添加配置一个新的工作空间</div>
+    </div>
+    <div class="tofly-body">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="信息配置" name="first">
+          <el-form ref="form" :rules="roules" label-width="auto">
+            <el-form-item label="工作空间名称" prop="name">
+              <el-input size="small" v-model="form.name" placeholder="请输入工作空间名称" style="width:300px"></el-input>
+            </el-form-item>
+            <el-form-item label="命名空间URI" prop="uri">
+              <el-input size="small" v-model="form.uri" placeholder="请输入命名空间URI" style="width:400px"></el-input>
+              <el-tooltip class="item" effect="dark" content="命名空间URI与这个工作区关联" placement="right">
+                <span class="el-icon-info"></span>
+              </el-tooltip>
+            </el-form-item>
+            <el-checkbox label="默认工作空间" style="display:block;margin-bottom:22px"></el-checkbox>
+            <el-checkbox label="独立工作空间" style="display:block;margin-bottom:22px"></el-checkbox>
+          </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="安全配置" name="second">
+          <div class="tofly-nav">
+            <el-checkbox label="授权所有权限"></el-checkbox>
+          </div>
+          <el-table class="tofly-table" :data="tableData2" style="width: 100%">
+            <el-table-column prop="role" label="可用角色"></el-table-column>
+            <el-table-column label="读取权限">
+              <template slot-scope="scope">
+                <el-checkbox v-model="scope.row.read"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="写入权限">
+              <template slot-scope="scope">
+                <el-checkbox v-model="scope.row.write"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="管理权限">
+              <template slot-scope="scope">
+                <el-checkbox v-model="scope.row.admin"></el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'first',
+      dialogVisible: false,
+      tableData: [],
+      tableData2: [{
+        role: 'ROLE_AUTHENTICATED',
+        read: false,
+        write: false,
+        admin: false
+      }, {
+        role: 'GROUP_ADMIN',
+        read: false,
+        write: false,
+        admin: false
+      }, {
+        role: 'ADMIN',
+        read: false,
+        write: false,
+        admin: false
+      }, {
+        role: 'ROLE_ANONYMOUS',
+        read: false,
+        write: false,
+        admin: false
+      }],
+      form: {},
+      roules: {
+        name: [
+          { required: true, message: '请输入工作空间名称', trigger: 'blur' }
+        ],
+        uri: [
+          { required: true, message: '请输入工作空间URI', trigger: 'blur' }
+        ],
+      }
+    }
+  },
+}
+</script>
+
+<style>
+</style>

src/views/system/data/workspace/index.vue

@@ -6,16 +6,16 @@
     </div>
     <div class="tofly-body">
       <div class="tofly-nav">
-        <el-button size="small" icon="el-icon-circle-plus-outline" type="primary" @click="dialogVisible=true">添 加</el-button>
+        <el-button size="small" icon="el-icon-circle-plus-outline" type="primary" @click="addWorksapce">添 加</el-button>
         <el-button size="small" icon="el-icon-remove-outline" type="danger">删 除</el-button>
         <el-input placeholder="请输入关键字" size="small" prefix-icon="el-icon-search" v-model="input1" style="width:230px;margin-left:10px">
         </el-input>
       </div>
-      <el-table :data="tableData" style="width: 100%">
+      <el-table class="tofly-table" :data="tableData" style="width: 100%">
         <el-table-column type="selection" width="100"></el-table-column>
         <el-table-column label="工作空间名称">
           <template slot-scope="scope">
-            <span class="link-btn" v-text="scope.row.name" @click="dialogVisible=true"></span>
+            <span class="link-btn" v-text="scope.row.name" @click="editWorkspace(scope.row.name)"></span>
           </template>
         </el-table-column>
         <el-table-column label="默认">
@@ -30,63 +30,10 @@
         </el-table-column>
       </el-table>
       <div class="tofly-pagination">
-        <el-pagination small @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="20"
-                       layout="total, prev, pager, next, jumper" :total="400">
+        <el-pagination small :current-page="1" :page-size="20" layout="total, prev, pager, next, jumper" :total="400">
         </el-pagination>
       </div>
     </div>
-
-    <!-- 新增编辑对话框 -->
-    <el-dialog custom-class="tofly-dialog" title="添加工作空间" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
-               :show-close="false">
-      <div style="width:100%;height:450px">
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="信息配置" name="first">
-            <el-form ref="form" :rules="roules" label-width="auto">
-              <el-form-item label="工作空间名称" prop="name">
-                <el-input size="small" v-model="form.name" placeholder="请输入工作空间名称" style="width:300px"></el-input>
-              </el-form-item>
-              <el-form-item label="命名空间URI" prop="uri">
-                <el-input size="small" v-model="form.uri" placeholder="请输入命名空间URI" style="width:400px"></el-input>
-                <el-tooltip class="item" effect="dark" content="命名空间URI与这个工作区关联" placement="right">
-                  <span class="el-icon-info"></span>
-                </el-tooltip>
-              </el-form-item>
-              <el-checkbox label="默认工作空间" style="display:block;margin-bottom:22px"></el-checkbox>
-              <el-checkbox label="独立工作空间" style="display:block;margin-bottom:22px"></el-checkbox>
-            </el-form>
-          </el-tab-pane>
-
-          <el-tab-pane label="安全配置" name="second">
-            <div class="tofly-nav">
-              <el-checkbox label="授权所有权限"></el-checkbox>
-            </div>
-            <el-table :data="tableData2" style="width: 100%" height="100%">
-              <el-table-column prop="role" label="可用角色"></el-table-column>
-              <el-table-column label="读取权限">
-                <template slot-scope="scope">
-                  <el-checkbox v-model="scope.row.read"></el-checkbox>
-                </template>
-              </el-table-column>
-              <el-table-column label="写入权限">
-                <template slot-scope="scope">
-                  <el-checkbox v-model="scope.row.write"></el-checkbox>
-                </template>
-              </el-table-column>
-              <el-table-column label="管理权限">
-                <template slot-scope="scope">
-                  <el-checkbox v-model="scope.row.admin"></el-checkbox>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-      <div slot="footer">
-        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -94,39 +41,7 @@
 export default {
   data() {
     return {
-      activeName: 'first',
-      dialogVisible: false,
-      tableData: [],
-      tableData2: [{
-        role: 'ROLE_AUTHENTICATED',
-        read: false,
-        write: false,
-        admin: false
-      }, {
-        role: 'GROUP_ADMIN',
-        read: false,
-        write: false,
-        admin: false
-      }, {
-        role: 'ADMIN',
-        read: false,
-        write: false,
-        admin: false
-      }, {
-        role: 'ROLE_ANONYMOUS',
-        read: false,
-        write: false,
-        admin: false
-      }],
-      form: {},
-      roules: {
-        name: [
-          { required: true, message: '请输入工作空间名称', trigger: 'blur' }
-        ],
-        uri: [
-          { required: true, message: '请输入工作空间URI', trigger: 'blur' }
-        ],
-      }
+      tableData: []
     }
   },
   mounted() {
@@ -137,6 +52,25 @@ export default {
         isolated: false,
       })
     }
+  },
+  methods: {
+    /**
+     *新增工作空间
+     */
+    addWorksapce() {
+      this.$router.push({
+        path: './configureworkspace/addworkspace'
+      })
+    },
+    /**
+     * 编辑工作空间
+     */
+    editWorkspace(name) {
+      this.$router.push({
+        path: './configureworkspace/editworkspace',
+        query: { name: name }
+      })
+    }
   }
 }
 </script>