增加了bus 增加了分块区滚动 增加了table 增加了分页 修改了某些分页接口 角色增删

QMPlusServer/controller/api/authority.go

@@ -5,10 +5,11 @@ import (
 	"github.com/gin-gonic/gin"
 	"main/controller/servers"
 	"main/model/dbModel"
+	"main/model/modelInterface"
 )
 
 type CreateAuthorityPatams struct {
-	AuthorityId   uint   `json:"authorityId"`
+	AuthorityId   string   `json:"authorityId"`
 	AuthorityName string `json:"authorityName"`
 }
 
@@ -22,7 +23,7 @@ type CreateAuthorityPatams struct {
 // @Router /authority/createAuthority [post]
 func CreateAuthority(c *gin.Context) {
 	var auth dbModel.Authority
-	_ = c.BindJSON(&auth)
+	_ = c.ShouldBind(&auth)
 	err, authBack := auth.CreateAuthority()
 	if err != nil {
 		servers.ReportFormat(c, false, fmt.Sprintf("创建失败：%v", err), gin.H{
@@ -58,3 +59,27 @@ func DeleteAuthority(c *gin.Context) {
 		servers.ReportFormat(c, true, "删除成功", gin.H{})
 	}
 }
+
+// @Tags authority
+// @Summary 分页获取角色列表
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body modelInterface.PageInfo true "分页获取用户列表"
+// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
+// @Router /authority/getAuthorityList [post]
+func GetAuthorityList(c *gin.Context){
+	var pageInfo modelInterface.PageInfo
+	_ = c.BindJSON(&pageInfo)
+	err, list, total := new(dbModel.Authority).GetInfoList(pageInfo)
+	if err != nil {
+		servers.ReportFormat(c, false, fmt.Sprintf("获取数据失败，%v", err), gin.H{})
+	} else {
+		servers.ReportFormat(c, true, "获取数据成功", gin.H{
+			"authList": list,
+			"total":    total,
+			"page":     pageInfo.Page,
+			"pageSize": pageInfo.PageSize,
+		})
+	}
+}
\ No newline at end of file

QMPlusServer/model/dbModel/authority.go

@@ -3,12 +3,14 @@ package dbModel
 import (
 	"github.com/jinzhu/gorm"
 	"github.com/pkg/errors"
+	"main/controller/servers"
 	"main/init/qmsql"
+	"main/model/modelInterface"
 )
 
 type Authority struct {
 	gorm.Model    `json:"-"`
-	AuthorityId   uint   `json:"authorityId" gorm:"not null;unique"`
+	AuthorityId   string   `json:"authorityId" gorm:"not null;unique"`
 	AuthorityName string `json:"authorityName"`
 }
 
@@ -28,3 +30,18 @@ func (a *Authority) DeleteAuthority() (err error) {
 	}
 	return err
 }
+
+
+
+// 分页获取数据  需要分页实现这个接口即可
+func (a *Authority) GetInfoList(info modelInterface.PageInfo) (err error, list interface{}, total int) {
+	// 封装分页方法 调用即可 传入 当前的结构体和分页信息
+	err, db, total := servers.PagingServer(a, info)
+	if err != nil {
+		return
+	} else {
+		var authority []Authority
+		err = db.Find(&authority).Error
+		return err, authority, total
+	}
+}
\ No newline at end of file

QMPlusServer/router/authority.go

@@ -11,5 +11,6 @@ func InitAuthorityRouter(Router *gin.Engine) {
 	{
 		AuthorityRouter.POST("createAuthority", api.CreateAuthority)
 		AuthorityRouter.POST("deleteAuthority", api.DeleteAuthority)
+		AuthorityRouter.POST("getAuthorityList",api.GetAuthorityList)
 	}
 }

QMPlusVuePage/package-lock.json

@@ -11678,6 +11678,11 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuescroll": {
+      "version": "4.14.4",
+      "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.14.4.tgz",
+      "integrity": "sha512-v+QYnoZLr1Eo93CekHOyF54e5c1Mu9s+k3G6Qaw/vRL20j1hnS/mMejW2pn60nuFinqKdXb9MghjJP4jKrc8+w=="
+    },
     "vuex": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",

QMPlusVuePage/package.json

@@ -18,6 +18,7 @@
         "vue": "^2.6.10",
         "vue-particle-line": "^0.1.4",
         "vue-router": "^3.1.3",
+        "vuescroll": "^4.14.4",
         "vuex": "^3.1.1",
         "vuex-persist": "^2.1.0"
     },

QMPlusVuePage/src/App.vue

@@ -18,6 +18,9 @@ export default {
 
 <style lang="scss">
 // 引入初始化样式
-  @import '@/style/main.scss'
-
+  @import '@/style/main.scss';
+  @import '@/style/base.scss';
+  #app{
+    background: #eee;
+  }
 </style>

QMPlusVuePage/src/api/authority.js

+import service from '@/utils/request'
+
+// @Summary 用户登录
+// @Produce  application/json
+// @Param {
+//  page     int
+//	pageSize int
+// }
+// @Router /authority/getAuthorityList [post]
+export const getAuthorityList = (data) => {
+    return service({
+        url: "/authority/getAuthorityList",
+        method: 'post',
+        data
+    })
+}
+
+
+// @Summary 删除角色
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body {authorityId uint} true "删除角色"
+// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
+// @Router /authority/deleteAuthority [post]
+export const deleteAuthority = (data) => {
+    return service({
+        url: "/authority/deleteAuthority",
+        method: 'post',
+        data
+    })
+}
+
+// @Summary 创建角色
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body api.CreateAuthorityPatams true "创建角色"
+// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
+// @Router /authority/createAuthority [post]
+export const createAuthority = (data) => {
+    return service({
+        url: "/authority/createAuthority",
+        method: 'post',
+        data
+    })
+}
\ No newline at end of file

QMPlusVuePage/src/main.js

@@ -16,6 +16,9 @@ import '@/permission'
 import { store } from '@/store/index'
 Vue.config.productionTip = false
 
+
+import Bus from '@/utils/bus.js'
+Vue.use(Bus)
 new Vue({
     render: h => h(App),
     router,

QMPlusVuePage/src/store/module/user.js

@@ -45,7 +45,7 @@ export const user = {
                     if (redirect) {
                         router.push({ path: redirect })
                     } else {
-                        router.push({ path: '/layout/dashboard' })
+                        router.push({ name: 'dashboard' })
                     }
                 }
             } catch (err) {

QMPlusVuePage/src/style/base.scss

+.clearflex {
+    *zoom: 1;
+}
+
+.clearflex:after {
+    content: '';
+    display: block;
+    height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.fl-left {
+    float: left;
+}
+
+.fl-right {
+    float: right;
+}
+
+.left-mg-xs {
+    margin-left: 6px;
+}
+
+.left-mg-sm {
+    margin-left: 10px;
+}
+
+.left-mg-md {
+    margin-left: 14px;
+}
+
+.left-mg-lg {
+    margin-left: 18px;
+}
\ No newline at end of file

QMPlusVuePage/src/utils/asyncRouter.js

 const _import = require('./_import') //获取组件的方法
 export const asyncRouterHandle = (asyncRouter) => {
     asyncRouter.map(item => {
-        item.component = _import(item.component)
+        if (item.component) {
+            item.component = _import(item.component)
+        } else {
+            delete item['component']
+        }
         if (item.children) {
             asyncRouterHandle(item.children)
         }

QMPlusVuePage/src/utils/bus.js

+const install = (Vue) => {
+    const Bus = new Vue({
+        methods: {
+            emit(event, ...args) {
+                this.$emit(event, ...args)
+            },
+            on(event, cb) {
+                this.$on(event, cb)
+            },
+            off(event, cb) {
+                this.$off(event, cb)
+            }
+        },
+    })
+    Vue.prototype.$bus = Bus
+}
+
+export default install
\ No newline at end of file

QMPlusVuePage/src/view/dashbord/index.vue

 <template>
-    <div>
-        Dashbord
+  <el-card class="box-card" shadow="hover">
+    <div class="clearfix" slot="header">
+      <span>用户信息</span>
     </div>
+    <el-row>
+      <div class="fl-left left-mg-xs">
+        <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar>
+      </div>
+      <div class="fl-left left-mg-lg">
+        <div>用户ID：{{userInfo.uuid}}</div>
+        <div>用户昵称：{{userInfo.nickName}}</div>
+        <div>用户组：{{userInfo.authority.authorityName}}</div>
+      </div>
+    </el-row>
+  </el-card>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
-    name:"Dashbord"
-    
+  name: 'Dashbord',
+  computed: {
+    ...mapGetters('user', ['userInfo'])
+  }
 }
 </script>
 
 <style scoped>
-
+.box-card{
+    width: 600px;
+}
 </style>
\ No newline at end of file

QMPlusVuePage/src/view/layout/aside/asideComponent/asyncSubmenu.vue

 <template>
   <el-submenu ref="subMenu" :index="routerInfo.name">
     <template slot="title">
-      <i class="el-icon-location"></i>
+      <i :class="'el-icon-'+routerInfo.meta.icon"></i>
       <span slot="title">{{routerInfo.meta.title}}</span>
     </template>
     <slot></slot>

QMPlusVuePage/src/view/layout/aside/asideComponent/menuItem.vue

 <template>
   <el-menu-item :index="routerInfo.name">
-    <i class="el-icon-document"></i>
+    <i :class="'el-icon-'+routerInfo.meta.icon"></i>
     <span slot="title">{{routerInfo.meta.title}}</span>
   </el-menu-item>
 </template>

QMPlusVuePage/src/view/layout/aside/index.vue

 <template>
-  <el-menu
-    :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
-    :collapse="isCollapse"
-    :default-active="active"
-    @select="selectMenuItem"
-    unique-opened
-  >
-    <aside-component :key="item.name" :routerInfo="item" v-for="item in asyncRouters[0].children" />
-  </el-menu>
+  <div>
+    <div class="menu-total">
+        <i class="el-icon-arrow-right"></i>
+    </div>
+    <vue-scroll :ops="ops">
+      <el-menu
+        :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+        :collapse="isCollapse"
+        :default-active="active"
+        @select="selectMenuItem"
+        unique-opened
+      >
+        <aside-component
+          :key="item.name"
+          :routerInfo="item"
+          v-for="item in asyncRouters[0].children"
+        />
+      </el-menu>
+    </vue-scroll>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
+import vueScroll from 'vuescroll'
+import 'vuescroll/dist/vuescroll.css'
 export default {
   name: 'Aside',
   data() {
     return {
       active: '',
-      isCollapse: true
+      isCollapse: true,
+      ops: {
+        bar: {disable:true}
+      }
     }
   },
   methods: {
-    selectMenuItem(index) {
+    selectMenuItem(index,indexList) {
       if (index === this.$route.name) return
       this.$router.push({ name: index })
     }
@@ -31,10 +47,28 @@ export default {
     ...mapGetters('router', ['asyncRouters'])
   },
   components: {
+    vueScroll,
     AsideComponent
   },
   created() {
     this.active = this.$route.name
+    this.$bus.on('totalCollapse', () => {
+      this.isCollapse = !this.isCollapse
+    })
+  },
+  beforeDestroy() {
+    this.$bus.off('totalCollapse')
   }
 }
 </script>
+
+<style lang="scss">
+.menu-info {
+  .menu-contorl {
+    line-height: 52px;
+    font-size: 20px;
+    display: table-cell;
+    vertical-align: middle;
+  }
+}
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/layout/index.vue

 <template>
   <el-container class="layout-cont">
-    <el-header class="header-cont">顶部</el-header>
+    <el-header class="header-cont">
+   
+    </el-header>
     <el-container>
       <el-aside class="main-cont main-left">
-        <Aside />
+        <Aside class="aside" />
       </el-aside>
-      <el-main class="main-cont main-right">
-        <transition name="el-fade-in-linear" mode="out-in">
-          <router-view></router-view>
-        </transition>
-      </el-main>
+      <!-- 分块滑动功能 -->
+      <vue-scroll>
+        <el-main class="main-cont main-right">
+          <!-- 当前面包屑用路由自动生成可根据需求修改 -->
+          <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item v-for="item in matched.slice(1,matched.length)" :key="item.path" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
+          </el-breadcrumb>
+          <transition mode="out-in" name="el-fade-in-linear">
+            <router-view></router-view>
+          </transition>
+        </el-main>
+      </vue-scroll>
     </el-container>
   </el-container>
 </template>
 
 <script>
 import Aside from '@/view/layout/aside'
+import vueScroll from 'vuescroll'
+import 'vuescroll/dist/vuescroll.css'
 export default {
   name: 'Layout',
   components: {
-    Aside
+    Aside,
+    vueScroll
+  },
+  methods: {
+    totalCollapse() {
+      this.$bus.emit('totalCollapse')
+    }
+  },
+  computed:{
+    title(){
+      return this.$route.meta.title||'当前页面'
+    },
+    matched(){
+      return this.$route.matched
+    }
+  },
+  created(){
+    console.log(this.$route.matched)
   }
 }
 </script>
@@ -28,17 +56,53 @@ export default {
 $headerHigh: 52px;
 $mainHight: calc(100vh - 52px);
 .layout-cont {
+  .menu-contorl {
+    line-height: 52px;
+    font-size: 20px;
+    color: #eee;
+    display: table-cell;
+    vertical-align: middle;
+  }
   .header-cont {
     height: $headerHigh !important;
     background: palevioletred;
   }
   .main-cont {
-    .el-menu-vertical {
-      min-height: $mainHight !important;
-    &.noCollapse{
-      min-height: $mainHight !important;
-      width: 250px;
+    .breadcrumb{
+      line-height: 24px;
+      padding: 6px;
+      border-bottom: 1px solid #eee;
+      margin-bottom: 6px;
+    }
+    &.el-main{
+      padding: 0px 10px;
+      margin: 0px 0px 0px 12px;
+      background: #fff;
     }
+    height: $mainHight !important;
+    overflow: visible;
+    position: relative;
+    .menu-total {
+      z-index: 5;
+      position: absolute;
+      top: 50%;
+      margin-top: -10px;
+      line-height: 20px;
+      font-size: 20px;
+      border: 0 solid #ffffff;
+      border-radius: 50%;
+      right: -10px;
+      background: #fff;
+    }
+    .aside {
+      background: #fff;
+    }
+    .el-menu-vertical {
+      height: $mainHight !important;
+      visibility: auto;
+      &.noCollapse {
+        width: 250px;
+      }
     }
     &::-webkit-scrollbar {
       display: none;
@@ -47,7 +111,6 @@ $mainHight: calc(100vh - 52px);
       width: auto !important;
     }
     background: blueviolet;
-    height: $mainHight !important;
   }
 }
 </style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/api/api.vue

+<template>
+    <div>
+        新建api
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Api",
+}
+</script>
+<style lang="scss">
+    
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/authority/authority.vue

+<template>
+  <div>
+    <div class="button-box clearflex">
+      <el-button @click="addAuthority" type="primary">新增角色</el-button>
+    </div>
+    <el-table :data="tableData" border stripe>
+      <el-table-column label="角色id" min-width="180" prop="authorityId"></el-table-column>
+      <el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :page-sizes="[10, 30, 50, 100]"
+      :style="{float:'right',padding:'20px'}"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+      hide-on-single-page
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+
+    <el-dialog :visible.sync="dialogFormVisible" title="新增角色">
+      <el-form :model="form">
+        <el-form-item label="角色ID">
+          <el-input autocomplete="off" v-model="form.authorityId"></el-input>
+        </el-form-item>
+        <el-form-item label="角色姓名">
+          <el-input autocomplete="off" v-model="form.authorityName"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button @click="enterDialog" type="primary">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAuthorityList, deleteAuthority, createAuthority } from '@/api/authority'
+export default {
+  name: 'Authority',
+  data() {
+    return {
+      page: 1,
+      total: 10,
+      pageSize: 10,
+      tableData: [],
+      dialogFormVisible: false,
+      form:{
+          authorityId:"",
+          authorityName:""
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.getAuthList()
+    },
+    handleCurrentChange(val) {
+      this.page = val
+      this.getAuthList()
+    },
+    deleteAuth(row) {
+      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          try {
+            const res = await deleteAuthority({ authorityId: row.authorityId })
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getAuthList()
+          } catch (err) {
+            this.$message({
+              type: 'error',
+              message: '删除失败!' + err
+            })
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    initForm(){
+        for(const key in this.form){
+            this.form[key] = ''
+        }
+    },
+    closeDialog(){
+        this.initForm()
+        this.dialogFormVisible = false
+    },
+    async enterDialog(){
+        const res = await createAuthority(this.form)
+        if(res.success){
+            this.$message({
+              type: 'success',
+              message: '添加成功!'
+            })
+            this.getAuthList()
+            this.closeDialog()
+        }else{
+            this.$message({
+              type: 'error',
+              message: '添加失败!'
+            })
+            this.closeDialog()
+        }
+        this.initForm()
+        this.dialogFormVisible = false
+    },
+    addAuthority() {
+        this.dialogFormVisible = true
+    },
+    async getAuthList(page = this.page, pageSize = this.pageSize) {
+      try {
+        const table = await getAuthorityList({ page, pageSize })
+        this.tableData = table.data.authList
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  },
+  created() {
+    this.getAuthList()
+  }
+}
+</script>
+<style lang="scss">
+.button-box {
+  padding: 10px 20px;
+  .el-button {
+    float: right;
+  }
+}
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/index.vue

+<template>
+    <router-view></router-view>
+</template>
+
+<script>
+export default {
+    name:"superAdmin",
+}
+</script>
+<style lang="scss">
+    
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/menu/menu.vue

+<template>
+    <div>
+        新建菜单
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Menus",
+}
+</script>
+<style lang="scss">
+    
+</style>
\ No newline at end of file