[Update] 修改detail page

src/components/ActionsGroup/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="grouped ? 'el-button-group' : ''">
-    <el-button v-for="item in actions" :key="item.name" :type="item.type" :size="size" :icon="item.icon" @click="handleClick(item.name)">{{ item.title }}</el-button>
+    <el-button v-for="item in actions" :key="item.name" :type="item.type" :size="size" :disabled="item.disabled" :icon="item.icon" @click="handleClick(item.name)">{{ item.title }}</el-button>
     <el-dropdown v-if="moreActions.length > 0">
       <el-button :size="size" class="btn-more-actions">
         更多操作<i class="el-icon-arrow-down el-icon--right" />
@@ -18,7 +18,7 @@ export default {
   props: {
     grouped: {
       type: Boolean,
-      default: true
+      default: false
     },
     size: {
       type: String,

src/components/ListTables/table.vue

@@ -62,7 +62,8 @@
         :page-sizes="[10, 20, 50, 100]"
         :page-size="page_size"
         :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
+        :pager-count="5"
+        layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
@@ -115,7 +116,7 @@ export default {
     return {
       tabledata: [],
       loading: false,
-      page_size: 10,
+      page_size: 20,
       current_page: 1,
       total: 0,
       offset: 0,

src/layout/components/BaseDetail/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <Page>
-    <span slot="title">
-      <slot name="name" />
-    </span>
-    <div slot="content" class="tabs-view">
-      <slot name="content" />
-    </div>
-  </Page>
-</template>
-
-<script>
-import Page from '../Page/'
-export default {
-  name: 'BaseDetail',
-  components: {
-    Page
-  }
-}
-</script>
-
-<style scoped>
-  .tabs-view {
-    /*background-color: white;*/
-    margin-top: -30px;
-  }
-
-  .tabs-view >>> .el-tabs__header {
-    background-color: white;
-    margin-left: -25px;
-    margin-right: -25px;
-    padding: 0 0 0 25px;
-  }
-
-  .header {
-    padding: 10px 20px;
-    background-color: white;
-  }
-
-  .tabs-view >>> .el-tabs__nav div.el-tabs__item {
-    /*margin-left: 10px;*/
-  }
-</style>

src/layout/components/BaseDetailPage/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <Page>
+    <span slot="title">
+      {{ title }}
+    </span>
+    <span slot="headingRightSide">
+      <ActionsGroup slot="headingRightSide" :actions="pageActions"></ActionsGroup>
+    </span>
+
+    <div slot="content">
+      <el-tabs v-if="submenu.length > 0" slot="submenu" v-model="activeName" class="page-submenu">
+        <el-tab-pane v-for="item in submenu" :key="item.name" :label="item.title" :name="item.name">
+          <slot :name="item.name">
+            <pre>
+              使用 slot 为我填充
+            </pre>
+          </slot>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </Page>
+</template>
+
+<script>
+import Page from '../Page/'
+import ActionsGroup from '@/components/ActionsGroup'
+export default {
+  name: 'BaseDetailPage',
+  components: {
+    Page,
+    ActionsGroup
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    submenu: {
+      type: Array,
+      default: () => []
+    },
+    activeMenu: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      activeName: this.activeMenu || null,
+      pageActions: [
+        {
+          name: 'Update',
+          title: this.$tc('Update')
+        },
+        {
+          name: 'delete',
+          title: this.$tc('Delete')
+        }
+      ]
+    }
+  },
+}
+</script>
+
+<style scoped>
+  .page-submenu >>> .el-tabs__header {
+    background-color: white;
+    margin-left: -25px;
+    padding-left: 25px;
+    margin-right: -25px;
+    padding-right: 25px;
+    margin-top: -30px;
+    /*margin: 0;*/
+    /*background-color: #f3f3f4;*/
+  }
+</style>

src/layout/components/index.js

@@ -3,7 +3,7 @@ export { default as NavHeader } from './NavHeader'
 export { default as AppMain } from './AppMain'
 export { default as Page } from './Page'
 export { default as TagsView } from './TagsView'
-export { default as BaseDetail } from './BaseDetail'
+export { default as BaseDetailPage } from './BaseDetailPage'
 export { default as SubMenuPage } from './SubMenuPage'
 export { default as Footer } from './Footer'
 export { default as IBox } from './IBox'

src/views/users/UserGroupDetail/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <SubMenuPage :submenu="submenu" :active-menu="activeSubMenu">
-    <span slot="title">{{ $t('users.userGroup') }}: {{ group.name }}</span>
-    <ActionsGroup slot="headingRightSide" :actions="pageActions"></ActionsGroup>
-
+  <BaseDetailPage :submenu="submenu" :active-menu="activeSubMenu" :title="title">
     <div slot="info">
       <el-row :gutter="20">
         <el-col :span="10">
@@ -10,31 +7,24 @@
         </el-col>
       </el-row>
     </div>
-  </SubMenuPage>
+  </BaseDetailPage>
 </template>
 
 <script>
 import { getUserGroup } from '@/api/user'
-import { SubMenuPage } from '@/layout/components'
-import ActionsGroup from '@/components/ActionsGroup'
+import { BaseDetailPage } from '@/layout/components'
 import DetailCard from '@/components/DetailCard'
 
 export default {
   components: {
-    SubMenuPage,
-    ActionsGroup,
+    BaseDetailPage,
     DetailCard
   },
   data() {
     return {
       activeSubMenu: 'info',
       group: { name: '' },
-      pageActions: [
-        {
-          name: 'Update',
-          title: this.$tc('Update')
-        }
-      ],
+
       submenu: [
         {
           title: this.$tc('baseInfo'),
@@ -70,6 +60,11 @@ export default {
       ]
     }
   },
+  computed: {
+    title() {
+      return this.$t('users.userGroup') + ': ' + this.group.name
+    }
+  },
   mounted() {
     this.getGroupDetail()
   },

src/views/users/UserGroupList.vue

@@ -2,7 +2,7 @@
   <Page>
     <template slot="content">
       <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
+      <el-card >
         <tables v-bind="tableConfig" />
       </el-card>
     </template>
@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { IBox, Page } from '@/layout/components'
+import { Page } from '@/layout/components'
 import Tables from '@/components/ListTables/table'
 import { getUserGroupList } from '@/api/user'
 export default {
   components: {
     Page,
-    Tables,
+    Tables
   },
   data() {
     return {
@@ -28,7 +28,7 @@ export default {
             prop: 'name',
             label: this.$t('usergroup.name'),
             key: 'name',
-            link: 'UserDetail',
+            link: 'UserGroupDetail',
             sortable: true
           },
           {