界面更新优化

src/application/index.js

@@ -5,7 +5,7 @@ import mk from './mk'
 export default {
   install(Vue) {
 
-
+    Vue.component("mk-toolbar",mk.toolbar);
     Vue.prototype.$mk = mk; 
 
   } 

src/application/mk/components/toolbar/toolbar.vue

@@ -0,0 +1,56 @@
+<template>
+
+<div class="mk-toolbar mk-toolbar-right">
+
+    <a-tooltip placement="topRight" title="日志" v-if="isShowLog">
+      <a class="iconlink" @click="toolbarClick({name:'log'})"> <a-icon type="file-text"></a-icon></a>
+    </a-tooltip>
+    <a-tooltip placement="topRight" title="设置"  v-if="isShowSetting">
+      <a class="iconlink" title="设置" @click="toolbarClick({name:'setting'})"> <a-icon type="setting"></a-icon></a> 
+    </a-tooltip>
+
+    <a-button type="primary" @click="toolbarClick({name:'add'})">
+      新增
+    </a-button> 
+</div>
+
+</template>
+<script>
+
+export default {
+  name: "mktoolbar",
+  props: {
+    isShowLog : {
+      type: Boolean, 
+      default: true
+    }, 
+
+    isShowSetting : {
+      type: Boolean, 
+      default: true
+    }, 
+
+  },
+  data() {
+    return { 
+    };
+  },
+  methods: {
+    toolbarClick(e){
+      this.$emit("toolbarClick",e);
+    },
+
+    gotoLog(){
+
+    },
+
+    gotoSetting(){
+      
+    }
+
+
+   
+  },
+};
+</script>
+  

src/application/mk/config/index.js

@@ -35,6 +35,7 @@ export default {
 			checkboxConfig: {
 				reserve: true,
 				highlight: true,
+				trigger:'row',
 				range: true
 			}
 		},

src/application/mk/index.js

@@ -12,7 +12,9 @@ var mk = {
 
 	config: config,   
 
-	dialog: dialog
+	dialog: dialog,
+
+	toolbar :()=>import("./components/toolbar/toolbar")
 };
 
 export default mk; 

src/application/mk/style/main.css

@@ -16,3 +16,28 @@
     text-align: center;
     cursor: pointer;
 }
+
+
+.mk-toolbar-right{
+    display: flex;
+    flex-direction: row-reverse;
+}
+.mk-toolbar-right .iconlink{
+    margin: 10px 6px;
+}
+.mk-toolbar-right .iconlink a-icon{
+    font-size: 18px;
+}
+
+.vxe-form .vxe-form--gather .ant-form-item{
+    margin-bottom: 0;
+}
+
+.footerbar{
+    margin-top: 4px;
+    padding-left: 8px;
+}
+
+.oplinks a{
+    margin-right: 8px;
+}

src/layouts/PageLayout.vue

@@ -24,6 +24,7 @@ import PageHeader from '@/components/page/header/PageHeader' // 加载头部组
 import {mapState, mapMutations} from 'vuex' // 加载vuex
 import {getI18nKey} from '@/utils/routerUtil' // 加载路由工具
  
+
 export default {
   name: 'PageLayout', // 组件名称
   components: {PageHeader}, // 注册组件
@@ -55,6 +56,7 @@ export default {
   },
   created() { // 创建
     this.page = this.$route.meta.page // 获取页面数据
+ 
   },
   beforeDestroy() { // 销毁前
     this.updatePageHeight(0) // 更新页面高度

src/pages/Middle/Admin/AdminUser/UserList.vue

@@ -2,22 +2,7 @@
   <div class="page-body">
 
     <!-- 工具条 -->
-    <div class="mk-toolbar">
+    <mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
-      <a-button type="primary" @click="pageAdd">
-        新增
-      </a-button>
-      <a-button @click="pageEdit">编辑</a-button>
-      <a-dropdown>
-        <a-menu slot="overlay" @click="handleMenuClick">
-          <a-menu-item key="delete">
-            删除
-          </a-menu-item>
-        </a-menu>
-        <a-button> 操作
-          <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
 
 
 
@@ -36,10 +21,25 @@
       </template>
     </vxe-form>
 
-
+    <vxe-toolbar ref="xToolbar" custom>
+      <template #buttons>
+        <a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
+      </template>
+    </vxe-toolbar>
     <!-- 表格区 -->
-    <vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
+    <div class="gridPanel">
+      <vxe-grid ref='xGrid' v-bind="gridOptions">
       
+
+        <template #op="{ row }">
+            <div class="oplinks">
+            <a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
+            <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a> 
+          </div>
+          </template> 
+        
+      </vxe-grid>
+    </div>
   </div>
 </template>
 
@@ -94,7 +94,7 @@ export default {
 
       //数据区
       gridOptions: {
-        height: 600,
+        height: '100%',
         id: 'datagrid_1',
 
         proxyConfig: {
@@ -129,6 +129,7 @@ export default {
         columns: [
           { type: 'checkbox', width: 50 },
           { type: 'seq', width: 50 },
+          { title: '操作', slots: { default: 'op' },width:100 },
           { field: 'name', sortable: true, title: '名称' },
           { field: 'nick_name', sortable: true, title: '昵称', showHeaderOverflow: true },
           { field: 'email', sortable: true, title: 'email', showHeaderOverflow: true },
@@ -141,6 +142,17 @@ export default {
 
     return pageData;
   },
+  computed: {
+    desc() {
+      return this.$t('pageDesc')
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      // 将表格和工具栏进行关联 
+      this.$refs.xGrid.connect(this.$refs.xToolbar)
+    });
+  },
   // 监听 - 页面每次【加载时】执行 
   onLoad() {
 
@@ -199,7 +211,10 @@ export default {
       return this.$mk.getPagedData({ url: this.actions.getList, data: params });
     },
 
-    pageAdd() {
+
+    //add / log / setting
+    toolbarClick(e) {
+      if (e.name == "add") {
         this.$mk.dialog.open({
           page: editPage,
           title: "新增用户信息",
@@ -209,10 +224,11 @@ export default {
             success && this.$refs.xGrid.commitProxy('query')
           }
         })
+      }
     },
 
-    pageEdit() {
+
-      let row = this.getSelectdRow();
+    pageEdit(row) {
       if (!row) {
         this.$mk.msg("请选择行");
         return;
@@ -228,16 +244,16 @@ export default {
       })
     },
 
-    handleMenuClick(e) {
+    pageDelete(row) {
-      if (e.key == "delete") {
 
-        let rows = this.$refs.xGrid.getCheckboxRecords();
+
+      let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
       let ids = [];
       rows.forEach((row) => {
         ids.push(row[this.keyName]);
 
       });
-
+      console.log(rows);
       if (!ids.length) {
         this.$mk.error("请选择行");
         return;
@@ -261,7 +277,6 @@ export default {
       });
 
 
-      }
     },
     onSearch() {
       this.$refs.xGrid.commitProxy('query')
@@ -279,4 +294,7 @@ export default {
   padding: 10px 10px;
   background: white;
 }
+.gridPanel{ 
+  height: calc(100vh - 430px); 
+}
 </style> 

src/pages/Middle/Admin/AdminUser/i18n.js

@@ -1,6 +1,7 @@
 module.exports = {
     messages: {
       CN: { 
+        pageDesc:'管理用户账号'
       },
       HK: {
         

src/pages/Middle/Base/BaseAgent/edit.vue

@@ -4,7 +4,16 @@
     <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
       :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
       <template #auth_stop_date="{}">
-        <a-date-picker v-model="auth_stop_date" />
+        <a-date-picker placeholder="请选择日期" style="width:100%;"  v-model="auth_stop_date" />
+      </template>
+      
+
+      <template #company_type="{data}">
+        <a-select :default-value="companyTypeData[0]" v-model="data.company_type" style="width: 100%" >
+          <a-select-option v-for="companyType in companyTypeData" :key="companyType">
+            {{ companyType }}
+          </a-select-option>
+        </a-select>
       </template>
     </vxe-form>
 
@@ -38,14 +47,14 @@ export default {
     // 页面数据变量
     var pageData = {
 
-
+      companyTypeData : ['普通', '星级','特星级'],
       actions: {
         create: `${BASE_URL.BASE_URL}/BaseAgent/v1/create`,
         update: `${BASE_URL.BASE_URL}/BaseAgent/v1/update`,
         get: `${BASE_URL.BASE_URL}/BaseAgent/v1/detail`
       },
 
-      auth_stop_date:'',
+      auth_stop_date:'2030-01-01',
 
       formOptions: {
         data: { 
@@ -53,7 +62,7 @@ export default {
           "short_name": "",
           "logo": "",
           "desc": "",
-          "company_type": "",
+          "company_type": "普通",
           "auth_stop_date": new Date("2080-01-01").getTime() /1000,
           "status": 1,
           "token": ""
@@ -66,9 +75,6 @@ export default {
           title: [
             { required: true, message: '请输入名称' }
           ], 
-          company_type: [
-            { required: true, message: '请输入代理商类型' }
-          ],
           
         },
 
@@ -78,7 +84,7 @@ export default {
             children: [
               { field: 'title', title: '代理商名称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商名称' } } },
               { field: 'short_name', title: '代理商简写', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商简写' } } },
-              { field: 'company_type', title: '代理商类型', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商类型' } } }, 
+              { title: '代理商类型', span: 24, slots: { default: 'company_type' }      }, 
               
               { title: '截止时间', span: 24, slots: { default: 'auth_stop_date' } },
               { field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },

src/pages/Middle/Base/BaseAgent/i18n.js

@@ -0,0 +1,14 @@
+module.exports = {
+    messages: {
+      CN: { 
+        pageDesc:'管理代理商'
+      },
+      HK: {
+        
+      },
+      US: {
+         
+      }
+    }
+  }
+  

src/pages/Middle/Base/BaseAgent/list.vue

@@ -2,43 +2,42 @@
   <div class="page-body">
 
     <!-- 工具条 -->
-    <div class="mk-toolbar">
+    <mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
-      <a-button type="primary" @click="pageAdd">
-        新增
-      </a-button>
-      <a-button @click="pageEdit">编辑</a-button>
-      <a-dropdown>
-        <a-menu slot="overlay" @click="handleMenuClick">
-          <a-menu-item key="delete">
-            删除
-          </a-menu-item>
-        </a-menu>
-        <a-button> 操作
-          <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
 
 
 
     <!-- 搜索区 -->
     <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
       <template #date="{}"> 
-     
         <a-form-item label="创建时间"  :style="{ display: 'inline-block',width:120 }">
         </a-form-item>
         <a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
           <a-range-picker @change="onDateChange" />
         </a-form-item> 
-     
-
-
       </template>
+
     </vxe-form>
 
-
+    <vxe-toolbar ref="xToolbar" custom>
+      <template #buttons>
+        <a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
+      </template>
+    </vxe-toolbar>
     <!-- 表格区 -->
-    <vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
+    <div class="gridPanel">
+      <vxe-grid ref='xGrid' v-bind="gridOptions">
+          <template #status="{ row }">
+            <a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
+          </template>
+          <template #op="{ row }">
+            <div class="oplinks">
+            <a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
+            <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a> 
+          </div>
+          </template> awS QSE8WQE
+    </vxe-grid>
+    </div>
+   
 
   </div>
 </template>
@@ -50,6 +49,13 @@ let editPage = () => import("./edit");
 
 export default {
   name: 'BaseAgentList', 
+  i18n: require('./i18n'),
+  props: {
+    pageMode: {
+      type: String,
+      default: "edit"
+    }
+  },
   data() {
 
     // 页面数据变量
@@ -83,6 +89,7 @@ export default {
           children: [
             { field: 'title', title: '代理商名称', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
             { field: 'short_name', title: '代理商简写', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
+
             { span: 10, slots: { default: 'date' } }
           ]
         },
@@ -93,7 +100,7 @@ export default {
 
       //数据区
       gridOptions: {
-        height: 600,
+        height: '100%',
         id: 'datagrid_1',
 
         proxyConfig: {
@@ -128,8 +135,10 @@ export default {
         columns: [
           { type: 'checkbox', width: 50 },
           { type: 'seq', width: 50 },
+          { title: '操作', slots: { default: 'op' },width:100 },
           { field: 'title', sortable: true, title: '代理商名称' },
           { field: 'short_name', sortable: true, title: '代理商简写', showHeaderOverflow: true },
+          { field: 'company_type', sortable: true, title: '代理商类型', showHeaderOverflow: true },
           { field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true } 
         ]
       }
@@ -139,7 +148,17 @@ export default {
 
     return pageData;
   },
-  // 监听 - 页面每次【加载时】执行 
+  computed: {
+    desc() {
+      return this.$t('pageDesc')
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      // 将表格和工具栏进行关联 
+      this.$refs.xGrid.connect(this.$refs.xToolbar)
+    });
+  },
   onLoad() {
 
   },
@@ -197,7 +216,9 @@ export default {
       return this.$mk.getPagedData({ url: this.actions.getList, data: params });
     },
 
-    pageAdd() {
+    //add / log / setting
+    toolbarClick(e) {
+      if (e.name == "add") {
         this.$mk.dialog.open({
         page: editPage,
         title: "新增代理商信息",
@@ -207,10 +228,10 @@ export default {
           success && this.$refs.xGrid.commitProxy('query')
         }
       })
+      } 
     }, 
 
-    pageEdit() {
+    pageEdit(row) {
-      let row = this.getSelectdRow();
       if (!row) {
         this.$mk.msg("请选择行");
         return;
@@ -226,10 +247,10 @@ export default {
       })
     },
 
-    handleMenuClick(e) {
+    pageDelete(row) {
-      if (e.key == "delete") {
 
-        let rows = this.$refs.xGrid.getCheckboxRecords();
+
+      let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
         let ids = [];
         rows.forEach((row) => {
           ids.push(row[this.keyName]);
@@ -259,7 +280,7 @@ export default {
         });
 
 
-      }
+      
     },
     onSearch() {
       this.$refs.xGrid.commitProxy('query')
@@ -277,4 +298,7 @@ export default {
   padding: 10px 10px;
   background: white;
 }
+.gridPanel{ 
+  height: calc(100vh - 400px); 
+}
 </style> 

src/pages/Middle/Base/BaseCompany/edit.vue

@@ -1,28 +1,62 @@
 <template>
+  <page-layout :desc="desc">
     <div class="page-body">
 
       <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
         :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
-      <template #myregion="{}">
+
-        <a-input-search placeholder="input search text" enter-button />
+        <template #company_type="{ data }">
+          <a-select :default-value="companyTypeData[0]" v-model="data.company_type" style="width: 100%">
+            <a-select-option v-for="companyType in companyTypeData" :key="companyType">
+              {{ companyType }}
+            </a-select-option>
+          </a-select>
         </template>
+        <template #beid="{ data }">
+          <a-select v-model="data.beid" style="width: 100%">
+            <a-select-option v-for=" item  in config_list"  :key="item.id" :value="item.id">
+              {{ item.title }}
+            </a-select-option>
+          </a-select>
+        </template>
+
       </vxe-form> 
 
+      <div class="mk-toolbar" v-if="isEdit">
+            <a-button type="primary" @click="pageAdd">增加服务</a-button>
+            <a-button @click="pageDel">删除服务</a-button>
+          </div>
+          <div class="gridPanel" v-if="isEdit">
+            <vxe-grid ref='gridService' v-bind="gridServiceOptions">
+              <template #status="{ row }">
+                <a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
+              </template>
 
-    <div>
+            </vxe-grid>
+          </div>
+
+
+      <div class="footerbar">
         <a-button type="primary" @click="ok">确定</a-button>
         <a-button @click="cancel">取消</a-button>
       </div>
 
     </div>
+  </page-layout>
 </template>
 
 <script>
 import BASE_URL from '@/services/base/api.js';
+import PageLayout from '@/layouts/PageLayout'
+
+
+let serviceListPage = () => import("../BaseService/list");
 
 export default {
-  name: 'BaseCompanyEdit', 
 
+  name: 'BaseCompanyUpdate',
+  i18n: require('./i18n'),
+  components: { PageLayout },
   props: {
     pageMode: {
       type: String,
@@ -38,90 +72,240 @@ export default {
     // 页面数据变量
     var pageData = {
 
+      companyTypeData: ['普通', '星级', '特星级'],
+      config_list: [],
+      currentBeid : 0,
+
       actions: {
         create: `${BASE_URL.BASE_URL}/BaseCompany/v1/create`,
         update: `${BASE_URL.BASE_URL}/BaseCompany/v1/update`,
-        get: `${BASE_URL.BASE_URL}/BaseCompany/v1/detail`
+        get: `${BASE_URL.BASE_URL}/BaseCompany/v1/detail`,
+        configList: `${BASE_URL.BASE_URL}/BaseConfig/v1/list`,
+        serviceList: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/list`,
+        serviceAdd: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/add`,
+        serviceDel: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/detele`,
+        serviceOpen: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/open`,
+        serviceClose: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/close`
       },
 
+      keyName: 'id',
+      isEdit: false,
       formOptions: {
         data: { 
-          "name": "",
+            "beid": 0,
-          "nick_name": "",
+            "ptyid": 0,
-          "avatar": "",
+            "title": "",
-          "email": "",
+            "agentid": 0,
-          "mobile": "",
+            "logo": "",
-          "password": "",
+            "desc": "",
+            "domain": "",
+            "devdomain": "",
+            "company_type": "",
+            "address": "",
+            "longitude": "",
+            "latitude": "",
+            "appid": "",
+            "appsecret": "",
+            "is_private_cloud": 0,
+            "auth_stop_date": 0,
             "status": 1,
-          "is_super": 0,
+            "short_title": "",
-          "level": 1,
+            "token": "",
-          "token": ""
+            "admin_count": 0,
+            "staff_count": 0,
+            "store_count": 0
         },
 
         titleWidth: 100,
         titleAlign: 'right',
 
         rules: {
-          name: [
+          title: [
-            { required: true, message: '请输入名称' } 
+            { required: true, message: '请输入标题' }
-          ] 
+          ],
+          desc: [
+            { required: true, message: '请输入描述' }
+          ],
         },
 
         items: [
           {
             title: '左侧',
             children: [
-              { field: 'name', title: '名称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
+              { field: 'title', title: '公司名', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入公司名' } } },
-              { field: 'mobile', title: '联系电话', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入联系电话' } } },
+              { title: '归属项目', span: 6, slots: { default: 'beid' } },
-              { field: 'nick_name', title: '昵称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
+              { title: '公司类型', span: 6, slots: { default: 'company_type' } },
-              { field: 'email', title: 'email', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入email' } } }
+              { field: 'logo', title: 'logo', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } },
+              { field: 'domain', title: 'domain', span: 6, itemRender: { name: '$input' } },
+              { field: 'devdomain', title: 'devdomain', span: 6, itemRender: { name: '$input' } },
+              { field: 'desc', title: '描述', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
+              { field: 'appid', title: 'appid', span: 6, itemRender: { name: '$input' } },
+              { field: 'appsecret', title: 'appsecret', span: 6, itemRender: { name: '$input' } },
+              { field: 'token', title: 'token', span: 6, itemRender: { name: '$input' } }
             ]
           }
         ]
+      },
+
+
+      //服务管理 - 数据区
+      gridServiceOptions: {
+        height: '110%',
+        id: 'datagrid_service_1',
+
+        proxyConfig: {
+          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
+          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为 
+          props: {
+            result: 'list', // 配置响应结果列表字段
+            total: 'total' // 配置响应结果总页数字段
+          },
+          // 接收Promise
+          ajax: {
+            // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
+            query: (options) => {
+              const { page, sorts } = options;
+              var params = {};
+              params.page = page.currentPage;
+              params.limit = page.pageSize;
+              params.order_bys = [];
+              params.search_rules = [];
+              if (sorts) {
+                sorts.forEach((v) => {
+                  params.order_bys.push({
+                    column: v.property,
+                    order: v.order
+                  })
+                });
+              }
+              return this.loadDetailData1({ params });
+            }
+          }
+        },
+        columns: [
+          { type: 'checkbox', width: 50 },
+          { type: 'seq', width: 50 },
+          { field: 'name', sortable: true, title: '服务名' },
+          { field: 'title', sortable: true, title: '标题', showHeaderOverflow: true },
+          { field: 'port', sortable: true, title: '端口', showHeaderOverflow: true },
+          { field: 'status', sortable: true, title: '是否启用', slots: { default: 'status' } }
+        ]
       }
 
     };
-
+    pageData.gridServiceOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridServiceOptions);
     pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
 
     return pageData;
   },
+  computed: {
+    desc() {
+      return this.$t('editPageDesc')
+    }
+  },
   created() {
-    if (this.dataId) {
+
+    let dataId = this.getDataId();
+    if (dataId) {
       this.$mk.post({
         url: this.actions.get,
         loading: "加载中...",
         data: {
-          id: this.dataId
+          id: parseInt(dataId)
         }
       }).then(a => {
         this.formOptions.data = a.data.BaseCompany;
+        this.currentBeid = this.formOptions.data.beid;
+        console.log(this.currentBeid)
       }).catch((a) => {
         this.$mk.error(a.data.msg);
       });
+
+      this.isEdit = true;
     }
 
+
+    this.$mk.getPagedData({
+      url: this.actions.configList, data: {
+        "page": 0,
+        "limit": 0,
+        "start_time": 0,
+        "end_time": 0,
+        "search_rules": [
+        ],
+        "order_bys": [
+        ]
+      }
+    }).then(r => {
+      this.config_list = r.list;
+
+      this.config_list.splice(0,0,{id:0,title:"请选择"})
+    });
+
   },
   // 函数
   methods: {
 
 
-    loadData() {
+    onSwitch(row) {
-    },
+      row.status = row.status ? 0 : 1;
+      this.$mk.post({
+        url: row.status ? this.actions.serviceOpen : this.actions.serviceClose,
+        data: { id: row.id },
+      }).then(() => {
+        this.$mk.msg(row.status ? "开启服务完成" : "停止服务完成");
+        this.$emit("callback", { success: true });
+      }).catch((a) => {
+        this.$mk.error(a.data.msg);
+      });
 
+    },
+    getDataId() {
+
+      let dataId = this.dataId;
+      if (this.$route.params.id) {
+        dataId = this.$route.params.id;
+      }
+      return parseInt(dataId || 0);
+    },
+    loadDetailData1({ params }) {
+
+
+      params.start_time = 0;
+      params.end_time = 0;
+      params.beid = this.getDataId();
+
+      return this.$mk.getPagedData({ url: this.actions.serviceList, data: params });
+    },
+    back() {
+      if (!this.isEdit) {
+        this.$closePage({
+          closeRoute: "/BaseCompany/BaseCompanyAdd"
+        });
+      } else {
+        this.$closePage({
+          closeRoute: "/BaseCompany/BaseCompanyUpdate"
+        });
+      }
+      this.$openPage('/BaseCompany/BaseCompanyList')
+    },
     ok() {
 
       let save = () => {
-        let action = this.pageMode == "add" ? this.actions.create : this.actions.update;
+        let action = !this.isEdit ? this.actions.create : this.actions.update;
-        let postdata = this.pageMode == "add" ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
+        let postdata = !this.isEdit ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
- 
+        if (this.isEdit) {
+         // postdata = { BaseCompany: postdata }
+        }
         this.$mk.post({
           url: action,
           loading: "保存中...",
-          data: postdata
+          data: postdata,
         }).then(() => {
           this.$mk.success("保存成功");
-            this.$emit("callback", { success: true });
+          if (!this.isEdit) {
+            this.back();
+          }
         }).catch((a) => {
           this.$mk.error(a.data.msg);
         });
@@ -143,9 +327,69 @@ export default {
 
 
     },
+    pageDel() {
+      let rows = this.$refs.gridService.getCheckboxRecords();
+      let ids = [];
+      rows.forEach((row) => {
+        ids.push(row[this.keyName]);
 
+      });
+
+      if (!ids.length) {
+        this.$mk.error("请选择行");
+        return;
+      }
+
+      this.$mk.confirm('您确定要移除服务吗？').then(type => {
+        if (type == 'confirm') {
+          this.$mk.post({
+            url: this.actions.serviceDel,
+            loading: "移除服务中...",
+            data: {
+              ids: ids
+            }
+          }).then(() => {
+            this.$mk.success("移除服务成功");
+            this.$refs.gridService.commitProxy('query')
+          }).catch((a) => {
+            this.$mk.error(a.data.msg);
+          });
+        }
+      });
+
+    },
+    pageAdd() {
+      this.$mk.dialog.open({
+        page: serviceListPage,
+        title: "选择要添加的服务",
+        pageMode: "select",
+        pageOptions:{
+           config_id : this.currentBeid
+        },
+        width: 1000,
+        height: 870,
+        dataId: 0,
+        callback: ({ data }) => {
+
+          this.$mk.post({
+            url: this.actions.serviceAdd,
+            loading: "添加中...",
+            data: {
+              "beid": this.getDataId(),
+              "service_id": data.ids
+            },
+          }).then(() => {
+            this.$mk.success("添加成功");
+
+            this.$refs.gridService.commitProxy('query')
+          }).catch((a) => {
+            this.$mk.error(a.data.msg);
+          });
+        }
+      });
+    },
     cancel() {
-      this.$emit("callback", {});
+      this.back();
     }
   },
   // 监听属性
@@ -156,5 +400,21 @@ export default {
 
 </script>
 <style>
+.page-body {
+  background: white;
+  padding: 10px;
+}
 
+.formtabs .ant-tabs-tabpane {
+  background: white;
+  padding: 12px;
+}
+
+.gridPanel {
+  height: calc(100vh - 600px);
+}
+
+.footerbar {
+  padding-left: 10px;
+}
 </style>

src/pages/Middle/Base/BaseCompany/i18n.js

@@ -0,0 +1,16 @@
+module.exports = {
+    messages: {
+      CN: { 
+        pageDesc:'管理公司',
+        
+        editPageDesc:'编辑更新公司'
+      },
+      HK: {
+        
+      },
+      US: {
+         
+      }
+    }
+  }
+  

src/pages/Middle/Base/BaseCompany/list.vue

@@ -2,22 +2,8 @@
   <div class="page-body">
 
     <!-- 工具条 -->
-    <div class="mk-toolbar">
+    <mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
-      <a-button type="primary" @click="pageAdd">
+
-        新增
-      </a-button>
-      <a-button @click="pageEdit">编辑</a-button>
-      <a-dropdown>
-        <a-menu slot="overlay" @click="handleMenuClick">
-          <a-menu-item key="delete">
-            删除
-          </a-menu-item>
-        </a-menu>
-        <a-button> 操作
-          <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
 
 
 
@@ -36,9 +22,26 @@
       </template>
     </vxe-form>
 
-
+    <vxe-toolbar ref="xToolbar" custom>
+      <template #buttons>
+        <a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
+      </template>
+    </vxe-toolbar>
     <!-- 表格区 -->
-    <vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
+    <div class="gridPanel">
+      <vxe-grid ref='xGrid' v-bind="gridOptions">
+          <template #status="{ row }">
+            <a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
+          </template>
+          <template #op="{ row }">
+            <div class="oplinks">
+            <a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
+            <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a> 
+          </div>
+          </template> 
+    </vxe-grid>
+    </div>
+
 
   </div>
 </template>
@@ -46,10 +49,15 @@
 <script>
 import BASE_URL from '@/services/base/api.js';
  
-let editPage = () => import("./edit");
-
 export default {
-  name: 'BaseCompanyList', 
+  name: 'BaseConfigList',
+  i18n: require('./i18n'),
+  props: {
+    pageMode: {
+      type: String,
+      default: "edit"
+    }
+  },
   data() {
 
     // 页面数据变量
@@ -66,12 +74,12 @@ export default {
 
       //搜索区
       searchFormData: {
-        name: '',
+        title: '',
-        nick_name: '',
+        desc: '',
       },
       searchRules: [
-        { key: "name", mode: "like" },
+        { key: "title", mode: "like" },
-        { key: "nick_name", mode: "like" }
+        { key: "desc", mode: "like" }
       ],
 
 
@@ -81,8 +89,8 @@ export default {
           title: '左侧',
           span: 20,
           children: [
-            { field: 'name', title: '名称', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
+            { field: 'title', title: '标题', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入标题' } } },
-            { field: 'nick_name', title: '昵称', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
+            { field: 'desc', title: '描述', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
             { span: 10, slots: { default: 'date' } }
           ]
         },
@@ -93,7 +101,7 @@ export default {
 
       //数据区
       gridOptions: {
-        height: 600,
+        height: '100%',
         id: 'datagrid_1',
 
         proxyConfig: {
@@ -128,10 +136,13 @@ export default {
         columns: [
           { type: 'checkbox', width: 50 },
           { type: 'seq', width: 50 },
-          { field: 'name', sortable: true, title: '名称' },
+          { title: '操作', slots: { default: 'op' },width:100 },
-          { field: 'nick_name', sortable: true, title: '昵称', showHeaderOverflow: true },
+          { field: 'title', sortable: true, title: '标题' },
-          { field: 'email', sortable: true, title: 'email', showHeaderOverflow: true },
+          { field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
-          { field: 'mobile', sortable: true, title: '电话', showHeaderOverflow: true }
+          { field: 'logo', sortable: true, title: 'logo', showHeaderOverflow: true },
+          { field: 'domain', sortable: true, title: 'domain', showHeaderOverflow: true },
+          { field: 'devdomain', sortable: true, title: 'devdomain', showHeaderOverflow: true },
+          { field: 'token', sortable: true, title: 'token', showHeaderOverflow: true }
         ]
       }
     };
@@ -140,12 +151,24 @@ export default {
 
     return pageData;
   },
-  // 监听 - 页面每次【加载时】执行 
+  computed: {
+    desc() {
+      return this.$t('pageDesc')
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      // 将表格和工具栏进行关联 
+      this.$refs.xGrid.connect(this.$refs.xToolbar)
+    });
+  },
   onLoad() {
 
   },
   // 函数
   methods: {
+
+ 
     onDateChange(date) {
       if (date && date.length) {
         this.start_time = parseInt(date[0]._d.getTime() / 1000);
@@ -198,39 +221,30 @@ export default {
       return this.$mk.getPagedData({ url: this.actions.getList, data: params });
     },
 
-    pageAdd() {
+     //add / log / setting
-      this.$mk.dialog.open({
+    toolbarClick(e) {
-        page: editPage,
+      if (e.name == "add") {
-        title: "新增公司信息",
+
-        pageMode: "add",
+      this.$openPage("/BaseCompany/BaseCompanyAdd");
-        dataId: 0,
-        callback: ({ success }) => {
-          success && this.$refs.xGrid.commitProxy('query')
 }
-      })
     },
 
-    pageEdit() {
+    pageEdit(row) {
-      let row = this.getSelectdRow();
+ 
       if (!row) {
         this.$mk.msg("请选择行");
         return;
       }
-      this.$mk.dialog.open({
+
-        page: editPage,
+      this.$openPage("/BaseCompany/BaseCompanyUpdate/" + row[this.keyName]);
-        title: "编辑公司信息",
+
-        pageMode: "edit",
-        dataId: row[this.keyName],
-        callback: ({ success }) => {
-          success && this.$refs.xGrid.commitProxy('query')
-        }
-      })
     },
 
-    handleMenuClick(e) {
+    pageDelete(row) {
-      if (e.key == "delete") {
+
+
+      let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
 
-        let rows = this.$refs.xGrid.getCheckboxRecords();
         let ids = [];
         rows.forEach((row) => {
           ids.push(row[this.keyName]);
@@ -260,7 +274,7 @@ export default {
         });
 
 
-      }
+      
     },
     onSearch() {
       this.$refs.xGrid.commitProxy('query')
@@ -278,4 +292,7 @@ export default {
   padding: 10px 10px;
   background: white;
 }
+.gridPanel{ 
+  height: calc(100vh - 400px); 
+}
 </style> 

src/pages/Middle/Base/BaseConfig/edit.vue

@@ -1,53 +1,55 @@
 <template>
+  <page-layout :desc="desc">
     <div class="page-body">
 
-    <a-tabs default-active-key="1" class="formtabs">
-      <a-tab-pane key="1" tab="基本信息">
-
-
       <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
         :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
-          <template #myregion="{}">
-            <a-input-search placeholder="input search text" enter-button />
-          </template>
       </vxe-form>
 
-        <div>
-          <a-button type="primary" @click="ok">确定</a-button>
-          <a-button @click="cancel">取消</a-button>
-        </div>
 
-
+      <a-tabs default-active-key="1" class="formtabs" v-if="isEdit">
-      </a-tab-pane>
+        <a-tab-pane key="1" tab="服务管理">
-      <a-tab-pane key="2" tab="服务管理" force-render v-if="isEdit">
 
           <div class="mk-toolbar">
             <a-button type="primary" @click="pageAdd">增加服务</a-button>
             <a-button @click="pageDel">删除服务</a-button>
           </div>
+          <div class="gridPanel">
             <vxe-grid ref='gridService' v-bind="gridServiceOptions">
               <template #status="{ row }">
                 <a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
               </template>
             </vxe-grid>
-
+          </div>
         </a-tab-pane>
 
       </a-tabs>
 
 
 
+
+
+      <div class="footerbar">
+        <a-button type="primary" @click="ok">确定</a-button>
+        <a-button @click="cancel">取消</a-button>
       </div>
+
+    </div>
+  </page-layout>
 </template>
 
 <script>
 import BASE_URL from '@/services/base/api.js';
+import PageLayout from '@/layouts/PageLayout'
 
 
 let serviceListPage = () => import("../BaseService/list");
 
 export default {
 
+  name: 'BaseConfigUpdate',
+  i18n: require('./i18n'),
+  components: { PageLayout },
   props: {
     pageMode: {
       type: String,
@@ -83,11 +85,17 @@ export default {
           "logo": "",
           "domain": "",
           "devdomain": "",
-          "appid": "0",
+          "appid": "",
           "appsecret": "",
-          "token": "1",
+          "token": "",
           "status": 1,
-          "accessexpire": 0
+          "accessexpire": 73,
+          "en_title": "",
+          "en_desc": "",
+          "sub_title": "",
+          "en_sub_title": "",
+          "copy_right": "",
+          "en_copy_right": ""
         },
 
         titleWidth: 100,
@@ -106,14 +114,14 @@ export default {
           {
             title: '左侧',
             children: [
-              { field: 'title', title: '项目名', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
+              { field: 'title', title: '项目名', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
-              { field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
+              { field: 'logo', title: 'logo', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } },
-              { field: 'logo', title: 'logo', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } },
+              { field: 'domain', title: 'domain', span: 6, itemRender: { name: '$input' } },
-              { field: 'domain', title: 'domain', span: 24, itemRender: { name: '$input' } },
+              { field: 'devdomain', title: 'devdomain', span: 6, itemRender: { name: '$input' } },
-              { field: 'devdomain', title: 'devdomain', span: 24, itemRender: { name: '$input' } },
+              { field: 'desc', title: '描述', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
-              { field: 'appid', title: 'appid', span: 24, itemRender: { name: '$input' } },
+              { field: 'appid', title: 'appid', span: 6, itemRender: { name: '$input' } },
-              { field: 'appsecret', title: 'appsecret', span: 24, itemRender: { name: '$input' } },
+              { field: 'appsecret', title: 'appsecret', span: 6, itemRender: { name: '$input' } },
-              { field: 'token', title: 'token', span: 24, itemRender: { name: '$input' } }
+              { field: 'token', title: 'token', span: 6, itemRender: { name: '$input' } }
             ]
           }
         ]
@@ -122,7 +130,7 @@ export default {
 
       //服务管理 - 数据区
       gridServiceOptions: {
-        height: 600,
+        height: '110%',
         id: 'datagrid_service_1',
 
         proxyConfig: {
@@ -170,6 +178,11 @@ export default {
 
     return pageData;
   },
+  computed: {
+    desc() {
+      return this.$t('editPageDesc')
+    }
+  },
   created() {
 
     let dataId = this.getDataId();
@@ -344,8 +357,20 @@ export default {
 
 </script>
 <style>
+.page-body {
+  background: white;
+}
+
 .formtabs .ant-tabs-tabpane {
   background: white;
   padding: 12px;
 }
+
+.gridPanel {
+  height: calc(100vh - 580px);
+}
+
+.footerbar {
+  padding-left: 10px;
+}
 </style>

src/pages/Middle/Base/BaseConfig/i18n.js

@@ -0,0 +1,16 @@
+module.exports = {
+    messages: {
+      CN: { 
+        pageDesc:'管理项目',
+        
+        editPageDesc:'编辑更新项目'
+      },
+      HK: {
+        
+      },
+      US: {
+         
+      }
+    }
+  }
+  

src/pages/Middle/Base/BaseConfig/list.vue

@@ -2,27 +2,10 @@
   <div class="page-body">
 
     <!-- 工具条 -->
-    <div class="mk-toolbar">
+    <mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
-      <a-button type="primary" @click="pageAdd">
-        新增
-      </a-button>
-      <a-button @click="pageEdit">编辑</a-button> 
-      <a-dropdown>
-        <a-menu slot="overlay" @click="handleMenuClick">
-          <a-menu-item key="delete">
-            删除
-          </a-menu-item>
-        </a-menu>
 
 
 
-        <a-button> 操作
-          <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
-
-
 
     <!-- 搜索区 -->
     <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
@@ -39,12 +22,25 @@
       </template>
     </vxe-form>
 
-
+    <vxe-toolbar ref="xToolbar" custom>
+      <template #buttons>
+        <a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
+      </template>
+    </vxe-toolbar>
     <!-- 表格区 -->
-    <vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
+    <div class="gridPanel">
-
+      <vxe-grid ref='xGrid' v-bind="gridOptions">
-
+          <template #status="{ row }">
-
+            <a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
+          </template>
+          <template #op="{ row }">
+            <div class="oplinks">
+            <a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
+            <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a> 
+          </div>
+          </template> 
+    </vxe-grid>
+    </div>
 
 
   </div>
@@ -55,8 +51,13 @@ import BASE_URL from '@/services/base/api.js';
  
 export default {
   name: 'BaseConfigList',
-
+  i18n: require('./i18n'),
-  
+  props: {
+    pageMode: {
+      type: String,
+      default: "edit"
+    }
+  },
   data() {
 
     // 页面数据变量
@@ -73,8 +74,8 @@ export default {
 
       //搜索区
       searchFormData: {
-        name: '',
+        title: '',
-        nick_name: '',
+        desc: '',
       },
       searchRules: [
         { key: "title", mode: "like" },
@@ -100,7 +101,7 @@ export default {
 
       //数据区
       gridOptions: {
-        height: 600,
+        height: '100%',
         id: 'datagrid_1',
 
         proxyConfig: {
@@ -135,6 +136,7 @@ export default {
         columns: [
           { type: 'checkbox', width: 50 },
           { type: 'seq', width: 50 },
+          { title: '操作', slots: { default: 'op' },width:100 },
           { field: 'title', sortable: true, title: '标题' },
           { field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
           { field: 'logo', sortable: true, title: 'logo', showHeaderOverflow: true },
@@ -145,11 +147,21 @@ export default {
       }
     };
 
-    pageData.gridOptions = Object.assign(this.$mk.config.defaults.gridOptions, pageData.gridOptions);
+    pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);
 
     return pageData;
   },
-  // 监听 - 页面每次【加载时】执行 
+  computed: {
+    desc() {
+      return this.$t('pageDesc')
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      // 将表格和工具栏进行关联 
+      this.$refs.xGrid.connect(this.$refs.xToolbar)
+    });
+  },
   onLoad() {
 
   },
@@ -209,14 +221,16 @@ export default {
       return this.$mk.getPagedData({ url: this.actions.getList, data: params });
     },
 
-    pageAdd() {
+     //add / log / setting
+    toolbarClick(e) {
+      if (e.name == "add") {
 
       this.$openPage("/BaseConfig/BaseConfigAdd");
-
+}
     },
 
-    pageEdit() {
+    pageEdit(row) {
-      let row = this.getSelectdRow();
+ 
       if (!row) {
         this.$mk.msg("请选择行");
         return;
@@ -226,10 +240,11 @@ export default {
 
     },
 
-    handleMenuClick(e) {
+    pageDelete(row) {
-      if (e.key == "delete") {
+
+
+      let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
 
-        let rows = this.$refs.xGrid.getCheckboxRecords();
         let ids = [];
         rows.forEach((row) => {
           ids.push(row[this.keyName]);
@@ -259,7 +274,7 @@ export default {
         });
 
 
-      }
+      
     },
     onSearch() {
       this.$refs.xGrid.commitProxy('query')
@@ -277,4 +292,7 @@ export default {
   padding: 10px 10px;
   background: white;
 }
+.gridPanel{ 
+  height: calc(100vh - 400px); 
+}
 </style> 

src/pages/Middle/Base/BasePermission/i18n.js

@@ -0,0 +1,14 @@
+module.exports = {
+    messages: {
+      CN: { 
+        pageDesc:'管理用户账号'
+      },
+      HK: {
+        
+      },
+      US: {
+         
+      }
+    }
+  }
+  

src/pages/Middle/Base/BaseService/edit.vue

@@ -1,38 +1,47 @@
 <template> 
+  <page-layout :desc="desc" >
   <div class="page-body">
 
 
 
-
-    <a-tabs default-active-key="1" class="formtabs">
-      <a-tab-pane key="1" tab="基本信息">
-
-
     <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
           :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
-          <template #myregion="{}">
+   
-            <a-input-search placeholder="input search text" enter-button />
-          </template>
         </vxe-form>
 
-        <div>
-          <a-button type="primary" @click="ok">确定</a-button>
-          <a-button @click="cancel">取消</a-button>
-        </div>
 
-
+    <a-tabs default-active-key="1" class="formtabs">
-      </a-tab-pane>
+      <a-tab-pane key="1" tab="路由管理" v-if="isEdit">
-      <a-tab-pane key="2" tab="路由管理" force-render v-if="isEdit">
 
         <div class="mk-toolbar">
           <a-button type="primary" @click="pageAdd">增加路由</a-button>
         </div>
+        <div class="gridPanel">
           <vxe-grid ref='gridRouter' v-bind="gridRouterOptions">
           <template #op="{ row }">
             <vxe-button status="primary" icon="vxe-icon-edit" @click="pageEdit(row)">编辑</vxe-button>
             <vxe-button icon="vxe-icon-delete" @click="pageDel(row)">删除</vxe-button>
           </template>
         </vxe-grid>
+        </div>
+      
+
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="权限管理" force-render v-if="isEdit">
+
+        <div class="mk-toolbar">
+          <a-button type="primary" @click="pageAdd2">增加权限</a-button>
+        </div>
+        <div class="gridPanel">
+          <vxe-grid ref='gridPermission' v-bind="gridPermissionOptions">
+          <template #op="{ row }">
+            <vxe-button status="primary" icon="vxe-icon-edit" @click="pageEdit2(row)">编辑</vxe-button>
+            <vxe-button icon="vxe-icon-delete" @click="pageDel2(row)">删除</vxe-button>
+          </template>
+        </vxe-grid>
+
+          </div>
+
 
       </a-tab-pane>
 
@@ -40,17 +49,29 @@
 
 
 
+     
+
+    <div class="footerbar">
+          <a-button type="primary" @click="ok">确定</a-button>
+          <a-button @click="cancel">取消</a-button>
         </div>
+
+  </div> 
+</page-layout>
 </template>
 
 <script>
 import BASE_URL from '@/services/base/api.js';
+import PageLayout from '@/layouts/PageLayout'
 
 
-let routerEditPage = () => import("./routerEdit");
+const routerEditPage = () => import("./routerEdit");
-
+const permissionEditPage = () =>import("./permissionEdit");
 export default {
 
+  name: 'BaseServiceUpdate',
+  i18n: require('./i18n'),
+  components: {PageLayout},
   props: {
     pageMode: {
       type: String,
@@ -72,6 +93,8 @@ export default {
         get: `${BASE_URL.BASE_URL}/BaseService/v1/detail`,
         routerList: `${BASE_URL.BASE_URL}/BaseService/v1/router/list`,
         routerDel: `${BASE_URL.BASE_URL}/BaseService/v1/router/batchDelete`,
+        permissionList:`${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/list`,
+        permissionDel: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/batchDelete`,
       },
 
       keyName: 'id',
@@ -105,11 +128,11 @@ export default {
           {
             title: '左侧',
             children: [
-              { field: 'name', title: '服务名', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入服务名' } } },
+              { field: 'name', title: '服务名', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入服务名' } } },
-              { field: 'title', title: '服务标题', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入服务标题' } } },
+              { field: 'title', title: '服务标题', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入服务标题' } } },
-              { field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
+              { field: 'port', title: '端口', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入端口' } } },
-              { field: 'port', title: '端口', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入端口' } } },
+              { field: 'desc', title: '描述', span: 16, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
-              { field: 'version', title: '版本号', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入版本号' } } }
+              { field: 'version', title: '版本号', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入版本号' } } }
             ]
           }
         ]
@@ -119,7 +142,7 @@ export default {
 
       //路由管理 - 数据区
       gridRouterOptions: {
-        height: 600,
+        height: '110%', 
         id: 'datagrid_router_1',
 
         proxyConfig: {
@@ -168,14 +191,73 @@ export default {
           { field: 'parent_router.name', sortable: true, title: '上级路由', showHeaderOverflow: true },
           { title: '操作', slots: { default: 'op' } }
         ]
+      },
+
+       //路由管理 - 数据区
+       gridPermissionOptions: {
+        height: '110%', 
+        id: 'datagrid_permission_1',
+
+        proxyConfig: {
+          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
+          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为 
+          props: {
+            result: 'BasePermission', // 配置响应结果列表字段
+            total: 'total' // 配置响应结果总页数字段
+          },
+          // 接收Promise
+          ajax: {
+            // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
+            query: (options) => {
+              const { page, sorts } = options;
+              var params = {};
+              params.page = page.currentPage;
+              params.limit = page.pageSize;
+              params.order_bys = [];
+              params.search_rules = [];
+              if (sorts) {
+                sorts.forEach((v) => {
+                  params.order_bys.push({
+                    column: v.property,
+                    order: v.order
+                  })
+                });
+              }
+              return this.loadDetailData2({ params });
+            }
+          }
+        },
+        treeConfig: {
+          transform: true,
+          expandAll: true,
+          rowField: 'id',
+          parentField: 'parent_id'
+        },
+        checkboxConfig: {
+          reserve: true,
+          highlight: true
+        },
+        columns: [
+        { field: 'title', sortable: true, title: '权限名' },
+          { field: 'permission_code', sortable: true, title: '编号', showHeaderOverflow: true }, 
+          { field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
+          { title: '操作', slots: { default: 'op' } }
+        ]
       }
 
     };
+
+    pageData.gridPermissionOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridPermissionOptions);
     pageData.gridRouterOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridRouterOptions);
     pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
 
     return pageData;
   },
+  computed: {
+    desc() {
+      return this.$t('editPageDesc')
+    }
+  },
   created() {
     let dataId = this.getDataId();
 
@@ -226,6 +308,17 @@ export default {
         }
       });
     },
+    loadDetailData2({ params }) {
+
+
+      params.start_time = 0;
+      params.end_time = 0;
+      params.service_id = this.getDataId();
+
+      return this.$mk.getPagedData({
+        url: this.actions.permissionList, data: params
+      });
+    },
     back() {
       if (!this.isEdit) {
         this.$closePage({
@@ -298,6 +391,27 @@ export default {
         }
       });
 
+    },
+    pageDel2(row) {
+      let ids = [row.id];
+
+      this.$mk.confirm('您确定要移除权限吗？').then(type => {
+        if (type == 'confirm') {
+          this.$mk.post({
+            url: this.actions.permissionDel,
+            loading: "移除权限中...",
+            data: {
+              ids: ids
+            }
+          }).then(() => {
+            this.$mk.success("移除权限成功");
+            this.$refs.gridPermission.commitProxy('query')
+          }).catch((a) => {
+            this.$mk.error(a.data.msg);
+          });
+        }
+      });
+
     },
     pageAdd() {
       this.$mk.dialog.open({
@@ -317,7 +431,25 @@ export default {
         }
       });
     },
-
+    pageAdd2() {
+      this.$mk.dialog.open({
+        page: permissionEditPage,
+        title: "添加权限",
+        pageMode: "add",
+        pageOptions: {
+          service_id: this.getDataId(),
+          service :  this.formOptions.data.name
+        },
+        width: 800,
+        height: 600,
+        dataId: 0,
+        callback: ({ success }) => {
+          if (success) {
+            this.$refs.gridPermission.commitProxy('query')
+          }
+        }
+      });
+    },
     getSelectdRow(grid) {
       let row = grid.getCurrentRecord();
       if (!row) {
@@ -345,6 +477,25 @@ export default {
         }
       });
     },
+    pageEdit2(row) {
+      this.$mk.dialog.open({
+        page: permissionEditPage,
+        title: "编辑权限",
+        pageMode: "edit",
+        pageOptions: {
+          service_id: this.getDataId(),
+          service :  this.formOptions.data.name
+        },
+        width: 800,
+        height: 600,
+        dataId: row.id,
+        callback: ({ success }) => {
+          if (success) {
+            this.$refs.gridPermission.commitProxy('query')
+          }
+        }
+      });
+    },
     
     cancel() {
       this.back();
@@ -358,8 +509,16 @@ export default {
 
 </script>
 <style>
+.page-body{
+  background: white;
+}
 .formtabs .ant-tabs-tabpane {
   background: white;
   padding: 12px;
 }
+
+.gridPanel{ 
+  height: calc(100vh - 580px);   
+}
+
 </style>

src/pages/Middle/Base/BaseService/i18n.js

@@ -0,0 +1,16 @@
+module.exports = {
+    messages: {
+      CN: { 
+        pageDesc:'管理服务，包括路由和权限',
+        
+        editPageDesc:'编辑更新服务，包括路由和权限'
+      },
+      HK: {
+        
+      },
+      US: {
+         
+      }
+    }
+  }
+  

src/pages/Middle/Base/BaseService/list.vue

@@ -2,47 +2,43 @@
   <div class="page-body">
 
     <!-- 工具条 -->
-    <div class="mk-toolbar" v-if="pageMode != 'select'">
+    <mk-toolbar v-if="pageMode != 'select'" @toolbarClick="toolbarClick"></mk-toolbar>
-      <a-button type="primary" @click="pageAdd">
-        新增
-      </a-button>
-      <a-button @click="pageEdit">编辑</a-button>
-      <a-dropdown>
-        <a-menu slot="overlay" @click="handleMenuClick">
-          <a-menu-item key="delete">
-            删除
-          </a-menu-item>
-        </a-menu>
-        <a-button> 操作 
-          <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
 
     <div class="mk-toolbar" v-if="pageMode == 'select'">
-      <a-button type="primary" @click="pageSelect">
+      <a-button type="primary" @click="pageSelect">选择</a-button>
-        选择
-      </a-button> 
     </div>
 
     <!-- 搜索区 -->
     <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
       <template #date="{}">
-     
         <a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
         </a-form-item>
         <a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
           <a-range-picker @change="onDateChange" />
         </a-form-item>
-     
-
-
       </template>
     </vxe-form>
 
-
+    <vxe-toolbar ref="xToolbar" custom>
+      <template #buttons>
+        <a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
+      </template>
+    </vxe-toolbar>
     <!-- 表格区 -->
-    <vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
+    <div class="gridPanel">
+      <vxe-grid ref='xGrid' v-bind="gridOptions">
+          <template #status="{ row }">
+            <a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
+          </template>
+          <template #op="{ row }">
+            <div class="oplinks">
+            <a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
+            <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a> 
+          </div>
+          </template> 
+    </vxe-grid>
+    </div>
+   
 
   </div>
 </template>
@@ -51,12 +47,17 @@
 import BASE_URL from '@/services/base/api.js';
 export default {
   name: 'BaseServiceList',
+  i18n: require('./i18n'),
 
   props: {
     pageMode: {
       type: String,
       default: "edit"
-    } 
+    },
+
+    pageOptions: {
+      type: Object 
+    },
   },
 
   data() {
@@ -67,7 +68,10 @@ export default {
       keyName: 'id',
       actions: {
         getList: `${BASE_URL.BASE_URL}/BaseService/v1/list`,
-        delete: `${BASE_URL.BASE_URL}/BaseService/v1/batchDelete`
+        delete: `${BASE_URL.BASE_URL}/BaseService/v1/batchDelete`,
+        serviceOpen: `${BASE_URL.BASE_URL}/BaseService/v1/open`,
+        serviceClose: `${BASE_URL.BASE_URL}/BaseService/v1/close`,
+        getConfigServiceList: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/list`,
       },
 
       start_time: 0,
@@ -102,7 +106,7 @@ export default {
 
       //数据区
       gridOptions: {
-        height: 600,
+        height: '100%',
         id: 'datagrid_1',
 
         proxyConfig: {
@@ -137,25 +141,56 @@ export default {
         columns: [
           { type: 'checkbox', width: 50 },
           { type: 'seq', width: 50 },
-          { field: 'name', sortable: true, title: '名称' },
+          { title: '操作', slots: { default: 'op' },width:100 },
-          { field: 'title', sortable: true, title: '标题', showHeaderOverflow: true },
+          { field: 'name', sortable: true, title: '名称' ,width:180},
-          { field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
+          { field: 'title', sortable: true, title: '标题', showHeaderOverflow: true  ,width:180},
-          { field: 'port', sortable: true, title: '端口', showHeaderOverflow: true },
+          { field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true  ,width:180},
-          { field: 'version', sortable: true, title: '版本', showHeaderOverflow: true }
+          { field: 'port', sortable: true, title: '端口', showHeaderOverflow: true ,width:100 },
+          { field: 'version', sortable: true, title: '版本', showHeaderOverflow: true ,width:100 },
+          { field: 'status', sortable: true, title: '是否启用', slots: { default: 'status' } ,width:100 }
         ]
       }
     };
 
-    pageData.gridOptions = Object.assign(this.$mk.config.defaults.gridOptions, pageData.gridOptions);
+    for(let i = 0;i<20;i++){
+      pageData.gridOptions.columns.push({title:'列'+i,width: 100});
+    }
+
+    pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);
 
     return pageData;
   },
-  // 监听 - 页面每次【加载时】执行 
+  computed: {
+    desc() {
+      return this.$t('pageDesc')
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      // 将表格和工具栏进行关联 
+      this.$refs.xGrid.connect(this.$refs.xToolbar)
+    });
+ 
+  },
   onLoad() {
 
   },
   // 函数
   methods: {
+
+    onSwitch(row) {
+      row.status = row.status ? 0 : 1;
+      this.$mk.post({
+        url: row.status ? this.actions.serviceOpen : this.actions.serviceClose,
+        data: { service_id: row.id },
+      }).then(() => {
+        this.$mk.msg(row.status ? "开启服务完成" : "停止服务完成");
+        this.$emit("callback", { success: true });
+      }).catch((a) => {
+        this.$mk.error(a.data.msg);
+      });
+
+    },
     onDateChange(date) {
       if (date && date.length) {
         this.start_time = parseInt(date[0]._d.getTime() / 1000);
@@ -203,23 +238,22 @@ export default {
 
       params.start_time = this.start_time;
       params.end_time = this.end_time;
-
+      if(this.pageOptions && this.pageOptions.config_id){
+        params.beid = this.pageOptions.config_id;
+        return this.$mk.getPagedData({ url: this.actions.getConfigServiceList, data: params });
+      }
 
       return this.$mk.getPagedData({ url: this.actions.getList, data: params });
     },
 
-    pageAdd() {
+    //add / log / setting
-
+    toolbarClick(e) {
-
+      if (e.name == "add") {
         this.$openPage("/BaseService/BaseServiceAdd");
+      } 
     },
 
-    pageEdit() {
+    pageEdit(row) {
-      let row = this.getSelectdRow();
-      if (!row) {
-        this.$mk.msg("请选择行");
-        return;
-      }
       this.$openPage("/BaseService/BaseServiceUpdate/" + row[this.keyName]);
     },
 
@@ -239,10 +273,10 @@ export default {
 
     },
 
-    handleMenuClick(e) {
+    pageDelete(row) {
-      if (e.key == "delete") {
 
-        let rows = this.$refs.xGrid.getCheckboxRecords();
+
+      let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
       let ids = [];
       rows.forEach((row) => {
         ids.push(row[this.keyName]);
@@ -272,7 +306,6 @@ export default {
       });
 
 
-      }
     },
     onSearch() {
       this.$refs.xGrid.commitProxy('query')
@@ -290,4 +323,7 @@ export default {
   padding: 10px 10px;
   background: white;
 }
+.gridPanel{ 
+  height: calc(100vh - 400px); 
+}
 </style> 

src/pages/Middle/Base/BaseService/permissionEdit.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="page-body router-edit-page">
+
+    <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
+      :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
+
+    </vxe-form>
+
+
+    <div>
+      <a-button type="primary" @click="ok">确定</a-button>
+      <a-button @click="cancel">取消</a-button>
+    </div>
+
+  </div>
+</template>
+ 
+<script>
+import BASE_URL from '@/services/base/api.js';
+
+export default {
+
+  props: {
+    pageMode: {
+      type: String,
+      default: "edit"
+    },
+    pageOptions: {
+      type: Object
+    },
+    dataId: {
+    }
+
+  },
+
+  data() {
+
+    // 页面数据变量
+    var pageData = {
+
+      actions: {
+        create: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/create`,
+        update: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/update`,
+        get: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/detail`,
+        list: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/list`
+      },
+
+      service_id: 0,
+      service: '',
+      parentName: '',
+
+      formOptions: {
+        data: {
+          "title": "",
+          "service_id": 0,
+          "service": "",
+          "permission_code": "",
+          "desc": ""
+        },
+
+        titleWidth: 100,
+        titleAlign: 'right',
+
+        rules: {
+          title: [
+            { required: true, message: '请输入标题' }
+          ], 
+          permission_code: [
+            { required: true, message: '请输入权限编号' }
+          ], 
+        },
+
+        items: [
+          {
+            title: '左侧',
+            children: [
+              { field: 'title', title: '权限标题', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入权限标题' } } },
+              { field: 'permission_code', title: '权限编号', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入权限编号' } } },
+              { field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } }
+            ]
+          }
+        ]
+      }
+
+    };
+    pageData.formOptions = Object.assign({},this.$mk.config.defaults.formOptions, pageData.formOptions);
+
+    return pageData;
+  },
+  created() {
+
+    this.service_id = this.pageOptions.service_id;
+    this.service = this.pageOptions.service;
+
+    if (this.dataId) {
+      this.$mk.post({
+        url: this.actions.get,
+        loading: "加载中...",
+        data: {
+          id: this.dataId
+        }
+      }).then(a => {
+        this.formOptions.data = a.data.router;
+        if (this.formOptions.data.parent_router) {
+          this.parentName = this.formOptions.data.parent_router.name;
+        }
+
+      }).catch((a) => {
+        this.$mk.error(a.data.msg);
+      });
+
+
+    }
+
+  },
+  // 函数
+  methods: {
+
+
+    loadData() {
+    },
+
+    loadParentGrid({ params }) {
+
+
+      params.start_time = 0;
+      params.end_time = 0;
+      params.service_id = this.service_id;
+
+      return this.$mk.getPagedData({ url: this.actions.list, data: params });
+    },
+
+    ok() {
+
+      let save = () => {
+        let action = this.pageMode == "add" ? this.actions.create : this.actions.update;
+        let postdata = this.pageMode == "add" ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
+
+        postdata.service_id = this.service_id;
+        postdata.service = this.service;
+        if (this.pageMode != "add") {
+          //postdata =  { BaseService:postdata}
+        }
+        this.$mk.post({
+          url: action,
+          loading: "保存中...",
+          data: postdata,
+        }).then(() => {
+          this.$mk.success("保存成功");
+          this.$emit("callback", { success: true });
+        }).catch((a) => {
+          this.$mk.error(a.data.msg);
+        });
+      };
+
+      this.$refs.xForm.validate((a) => {
+
+        if (a) {
+          let count = 0;
+          for (let name in a) {
+            a[name];
+            count++;
+          }
+          this.$mk.error(`存在${count}项错误，请检查`);
+        } else {
+          save();
+        }
+      });
+
+
+    },
+
+    cancel() {
+      this.$emit("callback", {});
+    },
+
+
+
+  },
+  // 监听属性
+  watch: {
+
+  }
+};
+
+</script>
+<style>
+.router-edit-page .vxe-pulldown {
+  width: 100%;
+}
+</style>

src/pages/Middle/Base/BaseService/routerEdit.vue

@@ -167,7 +167,7 @@ export default {
 
     };
     pageData.gridRouterParentOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridRouterParentOptions);
-    pageData.formOptions = Object.assign(this.$mk.config.defaults.formOptions, pageData.formOptions);
+    pageData.formOptions = Object.assign({},this.$mk.config.defaults.formOptions, pageData.formOptions);
 
     return pageData;
   },

src/pages/login/Login.vue

@@ -91,7 +91,7 @@ export default {
       error: '',
       form: this.$form.createForm(this),
       user: {
-        mobile: '18678390480',
+        mobile: '18192398883',
         password: '888888'
       },
       Project: [],

src/router/Middle/Base/BasePermission/router.map.js

@@ -16,6 +16,7 @@ const BasePermissionRouterMap = {
     icon: 'idcard',
     component: view.page,
     meta: {
+      invisible: true,
     },
     authority: {
       permission: [],
@@ -26,6 +27,9 @@ const BasePermissionRouterMap = {
     icon: 'idcard',
     path: '/BasePermission/BasePermissionList',
     component: () => import('@/pages/Middle/Base/BasePermission/list'),
+    meta: {
+      invisible: true,
+    },
     authority: {
       permission: [],
     }