增加user管理页面修复了第一次登陆白屏bug

2019-10-09 18:29:48 +08:00
parent ddf879793a
commit 62cb6d7382
10 changed files with 243 additions and 100 deletions
@@ -30,7 +30,7 @@
    <el-dialog :visible.sync="dialogFormVisible" title="新增Api">
      <el-form :inline="true" :model="form" label-width="80px">
        <el-form-item label="路径">
-          <el-input autocomplete="off" @blur="autoGroup" v-model="form.path"></el-input>
+          <el-input @blur="autoGroup" autocomplete="off" v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="api分组">
          <el-input autocomplete="off" v-model="form.group"></el-input>
@@ -51,7 +51,13 @@
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成

-import { getApiById, getApiList, createApi, updataApi } from '@/api/api'
+import {
+  getApiById,
+  getApiList,
+  createApi,
+  updataApi,
+  deleteApi
+} from '@/api/api'
 import infoList from '@/view/superAdmin/mixins/infoList'

 export default {
@@ -72,7 +78,7 @@ export default {
  },
  methods: {
    // 自动设置api分组
-    autoGroup(){
+    autoGroup() {
      this.form.group = this.form.path.split('/')[1]
    },
    initForm() {
@@ -90,15 +96,34 @@ export default {
      this.type = type
      this.dialogFormVisible = true
    },
-    addApi() {
-      createApi()
-    },
    async editApi(row) {
      const res = await getApiById({ id: row.ID })
      this.form = res.data.api
      this.openDialog('edit')
    },
-    deleteApi() {},
+    async deleteApi(row) {
+      this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await deleteApi(row)
+          if (res.success) {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getTableData()
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
    async enterDialog() {
      switch (this.type) {
        case 'addApi':
@@ -141,9 +166,6 @@ export default {
          break
      }
    }
-  },
-  created() {
-    this.getTableData()
  }
 }
 </script>
@@ -4,7 +4,7 @@
      <el-button @click="addAuthority" type="primary">新增角色</el-button>
    </div>
    <el-table :data="tableData" border stripe>
-      <el-table-column label="id" min-width="180" prop="ID"></el-table-column>      
+      <el-table-column label="id" min-width="180" prop="ID"></el-table-column>
      <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="500">
@@ -45,7 +45,6 @@
    <!-- 关联menu弹窗 -->
    <el-dialog :visible.sync="menuDialogFlag" title="关联菜单">
      <el-tree
-        v-if="menuDialogFlag"
        :data="menuTreeData"
        :default-checked-keys="menuTreeIds"
        :props="menuDefaultProps"
@@ -54,6 +53,7 @@
        node-key="ID"
        ref="menuTree"
        show-checkbox
+        v-if="menuDialogFlag"
      ></el-tree>
      <div class="dialog-footer" slot="footer">
        <el-button @click="closeDialog">取 消</el-button>
@@ -61,12 +61,9 @@
      </div>
    </el-dialog>

-
-    
    <!-- 关联api弹窗 -->
    <el-dialog :visible.sync="apiDialogFlag" title="关联api">
      <el-tree
-        v-if="apiDialogFlag"
        :data="apiTreeData"
        :default-checked-keys="apiTreeIds"
        :props="apiDefaultProps"
@@ -75,6 +72,7 @@
        node-key="ID"
        ref="apiTree"
        show-checkbox
+        v-if="apiDialogFlag"
      ></el-tree>
      <div class="dialog-footer" slot="footer">
        <el-button @click="closeDialog">取 消</el-button>
@@ -93,19 +91,15 @@ import {
  createAuthority
 } from '@/api/authority'
 import { getBaseMenuTree, addMenuAuthority, getMenuAuthority } from '@/api/menu'
-import {
-  getAllApis,
-  getAuthAndApi,
-  setAuthAndApi
-} from '@/api/api'
+import { getAllApis, getAuthAndApi, setAuthAndApi } from '@/api/api'
 import infoList from '@/view/superAdmin/mixins/infoList'
 export default {
  name: 'Authority',
-  mixins:[infoList],
+  mixins: [infoList],
  data() {
    return {
      listApi: getAuthorityList,
-      listKey:'list',
+      listKey: 'list',
      activeUserId: 0,
      menuTreeData: [],
      menuTreeIds: [],
@@ -186,7 +180,7 @@ export default {
    addAuthority() {
      this.dialogFormVisible = true
    },
-    
+
    // 关联用户列表关系
    async addAuthMenu(row) {
      const res1 = await getMenuAuthority({ authorityId: row.authorityId })
@@ -194,7 +188,7 @@ export default {
      const arr = []
      menus.map(item => {
        // 防止直接选中父级造成全选
-        if(!menus.some(same=>same.parentId === item.menuId)){
+        if (!menus.some(same => same.parentId === item.menuId)) {
          arr.push(Number(item.menuId))
        }
      })
@@ -204,8 +198,7 @@ export default {
    },
    // 关联树 确认方法
    async relation() {
-      const checkArr = this.$refs.menuTree
-        .getCheckedNodes(false,true)
+      const checkArr = this.$refs.menuTree.getCheckedNodes(false, true)
      const res = await addMenuAuthority({
        menus: checkArr,
        authorityId: this.activeUserId
@@ -219,36 +212,40 @@ export default {
      this.closeDialog()
    },
    // 创建api树方法
-    buildApiTree(apis){
-      const apiObj = new Object
-      apis&&apis.map(item=>{
-        if(apiObj.hasOwnProperty(item.group)){
-          apiObj[item.group].push(item)
-        }else{
-          Object.assign(apiObj,{[item.group]:[item]})
-        }
-      })
+    buildApiTree(apis) {
+      const apiObj = new Object()
+      apis &&
+        apis.map(item => {
+          if (apiObj.hasOwnProperty(item.group)) {
+            apiObj[item.group].push(item)
+          } else {
+            Object.assign(apiObj, { [item.group]: [item] })
+          }
+        })
      const apiTree = []
-      for(const key in apiObj){
+      for (const key in apiObj) {
        const treeNode = {
-          ID:key,
-          description:key+"组",
-          children:apiObj[key]
+          ID: key,
+          description: key + '组',
+          children: apiObj[key]
        }
        apiTree.push(treeNode)
      }
      return apiTree
    },
    // 关联用户api关系
-    async addAuthApi(row){
-      const res = await getAuthAndApi({authorityId:row.authorityId})
+    async addAuthApi(row) {
+      const res = await getAuthAndApi({ authorityId: row.authorityId })
      this.activeUserId = row.authorityId
-      this.apiTreeIds = res.data.apis||[]
+      this.apiTreeIds = res.data.apis || []
      this.apiDialogFlag = true
    },
-    async authApiEnter(){
+    async authApiEnter() {
      const checkArr = this.$refs.apiTree.getCheckedKeys(true)
-       const res = await setAuthAndApi({authorityId:this.activeUserId,apiIds:checkArr})
+      const res = await setAuthAndApi({
+        authorityId: this.activeUserId,
+        apiIds: checkArr
+      })
      if (res.success) {
        this.$message({
          type: 'success',
@@ -259,7 +256,6 @@ export default {
    }
  },
  async created() {
-    this.getTableData()
    // 获取所有菜单树
    const res = await getBaseMenuTree()
    this.menuTreeData = res.data.menus
@@ -82,18 +82,24 @@
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成

-import { updataBaseMenu ,getMenuList, addBaseMenu, deleteBaseMenu, getBaseMenuById } from '@/api/menu'
+import {
+  updataBaseMenu,
+  getMenuList,
+  addBaseMenu,
+  deleteBaseMenu,
+  getBaseMenuById
+} from '@/api/menu'
 import infoList from '@/view/superAdmin/mixins/infoList'
 export default {
  name: 'Menus',
-  mixins:[infoList],
+  mixins: [infoList],
  data() {
    return {
-      listApi:getMenuList,
-      listKey:'list',
+      listApi: getMenuList,
+      listKey: 'list',
      dialogFormVisible: false,
      form: {
-        ID:0,
+        ID: 0,
        path: '',
        name: '',
        hidden: '',
@@ -104,11 +110,11 @@ export default {
          icon: ''
        }
      },
-      isEdit:false
+      isEdit: false
    }
  },
  methods: {
-    // 删除菜单 
+    // 删除菜单
    deleteMenu(ID) {
      this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
@@ -154,9 +160,9 @@ export default {
    // 添加menu
    async enterDialog() {
      let res
-      if(this.isEdit){
+      if (this.isEdit) {
        res = await updataBaseMenu(this.form)
-      }else{
+      } else {
        res = await addBaseMenu(this.form)
      }
      if (res.success) {
@@ -183,12 +189,12 @@ export default {
      this.dialogFormVisible = true
    },
    // 修改菜单方法
-    async editMenu(id){
-      const res = await getBaseMenuById({id})
+    async editMenu(id) {
+      const res = await getBaseMenuById({ id })
      this.form = res.data.menu
      this.dialogFormVisible = true
      this.isEdit = true
-   }
+    }
  }
 }
 </script>
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="button-box clearflex"></div>
+    <el-table :data="tableData" border stripe>
+      <el-table-column label="头像" min-width="50">
+        <template slot-scope="scope">
+          <img :src="scope.row.headerImg" width="50" height="50" />
+        </template>
+      </el-table-column>
+      <el-table-column label="id" min-width="60" prop="ID"></el-table-column>
+      <el-table-column label="用户名" min-width="150" prop="userName"></el-table-column>
+      <el-table-column label="昵称" min-width="150" prop="nickName"></el-table-column>
+      <el-table-column label="用户级别" min-width="150">
+        <template slot-scope="scope">
+          <div>{{scope.row.authority.authorityName}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="200">
+        <template slot-scope="scope">
+          <el-button @click="editApi(scope.row)" size="small" type="text">编辑</el-button>
+          <el-button @click="deleteApi(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>
+  </div>
+</template>
+
+
+<script>
+// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
+import { getUserList } from '@/api/user'
+import infoList from '@/view/superAdmin/mixins/infoList'
+
+export default {
+  name: 'Api',
+  mixins: [infoList],
+  data() {
+    return {
+      listApi: getUserList,
+      listKey: 'userList',
+      dialogFormVisible: false,
+      type: ''
+    }
+  },
+  methods: {
+    initForm() {
+      this.form = {
+        path: '',
+        group: '',
+        description: ''
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.button-box {
+  padding: 10px 20px;
+  .el-button {
+    float: right;
+  }
+}
+</style>