用户权限界面提交

whyczyk

2021-05-14 8dba506fd242c4f1e5ea5e39c1348c9c96f344ec

用户权限界面提交

 src/components/PageMenu.vue

@@ -1,46 +1,7 @@
<template>
    <!-- <el-menu :default-active="acTabs" class="pageMenu" :collapse="false">
        <template v-for="menu in menus">
            <el-submenu v-if="menu.subMenus" :key="menu.id" :index="menu.id.toString()">
                <template slot="title">
                    <div @click="select(menu)">
                        <i v-if="menu.icon" :class="menu.icon"></i>
                        <span>{{ menu.name }}</span>
                    </div>
                </template>
                <div v-for="child in menu.subMenus" :key="child.id" :index="child.id.toString()">
                    <el-submenu v-if="child.subMenus" :key="child.id" :index="child.id.toString()" class="el-submenu">
                        <template slot="title">
                            <i v-if="child.icon" :class="child.icon"></i>
                            <span>{{ child.name }}</span>
                        </template>
                        <el-menu-item v-for="threeChild in child.subMenus" :key="threeChild.id"
                            :index="threeChild.id.toString()" @click="select(threeChild)">
                            <i v-if="threeChild.icon" :class="threeChild.icon"></i>
                            <span class="text">{{ threeChild.name }}</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu v-else :index="child.id.toString()" :key="child.id" class="el-submenu">
                        <template slot="title">
                            <div @click="select(child)">
                                <i v-if="child.icon" :class="child.icon"></i>
                                <span>{{ child.name }}</span>
                            </div>
                        </template>
                    </el-submenu>
                </div>
            </el-submenu>
            <el-submenu v-else :index="menu.id.toString()" class="el-submenu" :key="menu.id" @click="select(menu)">
                <template slot="title">
                    <i v-if="menu.icon" :class="menu.icon"></i>
                    <span>{{ menu.name }}</span>
                </template>
            </el-submenu>
        </template>
    </el-menu> -->
    <div class="zykMenu pageMenu">
        <div class="menu-one" v-for="(oneMenu,i) in menus" :key="i">
            <div class="menu-title" @click="select(oneMenu)">
            <div class="menu-title" @click="select(oneMenu)" :class="{'active':oneMenu.active}">
                <div class="left">
                    <i v-if="oneMenu.icon" :class="oneMenu.icon"></i>
                    <span class="text">{{ oneMenu.name }}</span>
@@ -48,8 +9,8 @@
                <i class="el-icon-arrow-up" v-if="oneMenu.subMenus"></i>
            </div>
            <div class="menu-two-con" v-if="oneMenu.subMenus">
                <div class="menu-two" :class="{'active':twoMenu.show}" v-for="(twoMenu,j) in oneMenu.subMenus" :key="j">
                    <div class="menu-title" @click="select(twoMenu)">
                <div class="menu-two" v-for="(twoMenu,j) in oneMenu.subMenus" :key="j">
                    <div class="menu-title" @click="select(twoMenu)" :class="{'active':twoMenu.active}">
                        <div class="left">
                            <i v-if="twoMenu.icon" :class="twoMenu.icon"></i>
                            <span class="text">{{ twoMenu.name }}</span>
@@ -58,8 +19,8 @@
                    </div>
                    <transition name="el-zoom-in-center">
                        <div class="menu-three-con" v-if="twoMenu.subMenus">
                            <div class="menu-three" v-for="(threeMenu,j) in twoMenu.subMenus" :key="j">
                                <div class="menu-title" @click="select(threeMenu)">
                            <div class="menu-three" v-for="(threeMenu,k) in twoMenu.subMenus" :key="k">
                                <div class="menu-title" @click="select(threeMenu)" :class="{'active':threeMenu.active}">
                                    <div class="left">
                                        <i v-if="threeMenu.icon" :class="threeMenu.icon"></i>
                                        <span class="text">{{ threeMenu.name }}</span>
@@ -85,6 +46,7 @@
        },
        methods: {
            select(data) {
                data.active = true;
                if (data.url) {
                    this.$router.push({
                        path: `/index/${data.url}`,
@@ -104,20 +66,26 @@
            let pageMenu = JSON.parse(sessionStorage.getItem('pageMenu'));
            pageMenu.map(item => {
                if (item.level == '1') {
                    item.active = false;
                    this.menus.push(item)
                }
            })
            this.menus.map(item => {
                item.subMenus.map(ktem => {
                    ktem.active = false;
                    pageMenu.map(jtem => {
                        if (jtem.level == '2') {
                            if (ktem.id == jtem.id) {
                                jtem.subMenus.map(etem => {
                                    etem.active = false
                                })
                                ktem.subMenus = jtem.subMenus;
                            }
                        }
                    })
                })
            })
            console.log(this.menus)
        },
    }
</script>

 src/pages/user/authority.vue

@@ -41,6 +41,9 @@
          <el-table-column prop="label" :min-width="160" align="center" :resizable="false" label="角色名称">
          </el-table-column>
          <el-table-column prop="userCount" :min-width="120" align="center" :resizable="false" label="权限人员">
            <template slot-scope="scope">
              <span class="num" @click="showUser(scope.row)">{{scope.row.userCount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" :min-width="200" align="center" :resizable="false" label="权限描述">
          </el-table-column>
@@ -52,10 +55,10 @@
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300" align="center">
          <el-table-column fixed="right" label="操作" width="340" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="edit(scope.row)">添加人员</el-button>
              <el-button type="warning" size="mini" @click="remove(scope.row)">设置权限</el-button>
              <el-button type="success" size="mini" @click="addUser(scope.row)">添加人员</el-button>
              <el-button type="warning" size="mini" @click="editAuthority(scope.row)">设置权限</el-button>
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
            </template>
@@ -70,9 +73,28 @@
    </flex-layout>

    <!-- 添加用户 -->
    <el-dialog :title="dialogTitle" width="400px" :visible.sync="addDialog" :close-on-click-modal="false"
    <el-dialog :title="dialogTitle" width="400px" top="0" :visible.sync="addDialog" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <add-authority v-if="addDialog" :userInfo="userInfo" @success="addSuccess"></add-authority>
    </el-dialog>

    <!-- 权限设置 -->
    <el-dialog title="权限设置" width="800px" top="0" :visible.sync="authorityDialog" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <edit-authority v-if="authorityDialog" :authorityId="authorityId" @success="addSuccess"></edit-authority>
    </el-dialog>

    <!-- 权限人员列表 -->
    <el-dialog title="权限人员列表" width="800px" top="0" :visible.sync="userListDialog" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <authority-user v-if="userListDialog" :authorityId="authorityId"></authority-user>
    </el-dialog>

    <!-- 权限人员列表 -->
    <el-dialog title="添加人员" width="auto" top="0" :visible.sync="addUserDialog" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <add-authority-user v-if="addUserDialog" :authorityId="authorityId" @success="addSuccess">
      </add-authority-user>
    </el-dialog>
  </div>
</template>
@@ -83,16 +105,23 @@
    roleAll,
    roleSearch,
    roleUpdateRoleState,
    delUser
    deleteRole
  } from './js/api';
  import AddAuthority from './dialog/addAuthority.vue';
  import EditAuthority from './dialog/editAuthority.vue';
  import AuthorityUser from './dialog/authorityUser.vue';
  import AddAuthorityUser from './dialog/addAuthorityUser.vue';

  export default {
    data() {
      return {
        authorityId: '',
        userInfo: {},
        dialogTitle: '',
        addDialog: false,
        authorityDialog: false,
        userListDialog: false,
        addUserDialog: false,
        keyword: '',
        jobs: [],
        depts: [],
@@ -112,7 +141,10 @@
    },
    components: {
      pagePanel,
      AddAuthority
      AddAuthority,
      EditAuthority,
      AuthorityUser,
      AddAuthorityUser
    },
    methods: {
      // 查询用户列表
@@ -155,27 +187,42 @@
      resetParams() {

      },
      //打开添加用户
      //打开添加角色
      add() {
        this.dialogTitle = '添加权限';
        this.userInfo = {};
        this.addDialog = true;
      },
      //打开编辑用户
      //打开编辑角色
      edit(row) {
        this.dialogTitle = '编辑权限';
        this.userInfo = row;
        this.addDialog = true;
      },
      editAuthority(row) {
        this.authorityId = row.id;
        this.authorityDialog = true;
      },
      //角色添加用户
      addUser(row) {
        this.authorityId = row.id;
        this.addUserDialog = true;
      },
      //查看角色用户
      showUser(row) {
        this.authorityId = row.id;
        this.userListDialog = true;
      },
      //移除角色
      remove(row) {
        this.$confirm("确认删除该用户吗？", '系统提示', {
        this.$confirm("确认删除该角色吗？", '系统提示', {
          type: 'warning',
        }).then(() => {
          // console.log(row)
          let postData = {
            id: row.id
            roleId: row.id
          }
          delUser(postData).then((res) => {
          deleteRole(postData).then((res) => {
            if (res.data.code == 1) {
              this.$message({
                message: '删除成功！',
@@ -224,9 +271,11 @@
      addSuccess() {
        // 关闭弹出面板
        this.addDialog = false
        this.authorityDialog = false
        this.addUserDialog = false
        // 从新查询数据
        this.getList();
      }
      },
    },
    mounted() {
      this.roleAll();
@@ -246,4 +295,9 @@
  .page-list-banner {
    margin-bottom: 10px;
  }

  .num {
    cursor: pointer;
    color: aqua;
  }
</style>

 src/pages/user/dialog/addAuthorityUser.vue

New file
@@ -0,0 +1,179 @@
<template>
  <div class="params-container">
    <div class="params-dialog">
      <el-transfer filterable v-model="value" :data="data" :titles='title'>
      </el-transfer>
      <div class="form-footer">
        <three-btn @click="addUser">添加</three-btn>
      </div>
    </div>

  </div>
</template>

<script>
  import ThreeBtn from '@/components/ThreeBtn.vue'
  import {
    getUsersByRoleId,
    updateRoleUser
  } from '../js/api';
  export default {
    props: ["authorityId"],
    components: {
      ThreeBtn
    },
    data() {
      return {
        data: [],
        value: [],
        title: ['选择员工', '已选']
      }
    },
    methods: {
      // change(data, type, key) {
      //   if (type == 'right') {
      //     this.data.map(item => {
      //       key.map(jtem => {
      //         if (item.id == jtem) {
      //           item.selected = true
      //         }
      //       })
      //     })
      //   } else {
      //     this.data.map(item => {
      //       key.map(jtem => {
      //         if (item.id == jtem) {
      //           item.selected = false
      //         }
      //       })
      //     })
      //   }
      // },
      addUser() {
        let params = {
          roleId: this.authorityId
        }
        let postData = this.value;
        updateRoleUser(params, postData).then((res) => {
          if (res.data.code == 1) {
            this.$message.success("添加成功！")
            this.$emit("success", false)
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      loadUser() {
        let postData = {
          roleId: this.authorityId
        }
        getUsersByRoleId(postData).then((res) => {
          if (res.data.code == 1) {
            res.data.data.map(item => {
              item.label = item.realName;
              item.key = item.id;
              if (item.selected) {
                this.value.push(item.id)
              }
            })
            this.data = res.data.data;
          }
        }).catch((err) => {
          console.log(err)
        });
      }
    },
    mounted() {
      this.loadUser()
    }
  }
</script>

<style scoped>
  .params-container {
    width: 100%;
    background-color: #ececec;
  }

  .table-layout {
    margin-top: 16px;
  }

  .bg-white .table-cell {
    color: #000000;
  }

  .el-form-item.inline {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin: 15px 4px 8px;
  }

  .el-form-item.inline /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input {
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input:first-of-type {
    margin-left: 0;
  }

  .el-form-item.inline /deep/ .el-form-item__label {
    width: 110px;
    white-space: nowrap;
    text-align: right;
    padding-right: 8px;
  }

  .params-container /deep/ .el-radio__label {
    color: #333333;
  }

  .params-container /deep/ .el-transfer-panel {
    border: 0.05rem solid #EBEEF5;
    border-radius: 0.2rem;
    overflow: hidden;
    background: #FFF;
    display: inline-block;
    vertical-align: middle;
    width: 10rem;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }

  .params-container /deep/ .el-transfer-panel .el-transfer-panel__header {
    height: 2rem;
    line-height: 2rem;
    background: #F5F7FA;
    margin: 0;
    padding-left: 0.75rem;
    border-bottom: 0.05rem solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
  }

  .params-container /deep/ .el-transfer-panel__item.el-checkbox {
    color: #606266;
  }

  .params-container /deep/ .el-transfer-panel .el-transfer-panel__header {
    background: #F5F7FA;
    border-bottom: 0.05rem solid #EBEEF5;
    color: #000;
  }

  .params-container /deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    color: #303133;
  }
</style>

 src/pages/user/dialog/authorityUser.vue

New file
@@ -0,0 +1,177 @@
<template>
  <div class="params-container">
    <div class="tableCon">
      <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
        v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="(item,index) in table.headers"
          :key="index">
        </el-table-column>
      </el-table>
    </div>
    <div class="flex-page-footer" slot="footer">
      <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
        @current-change="currentChange" @size-change="sizeChange"></el-pagination>
    </div>
  </div>
</template>

<script>
  import ThreeBtn from '@/components/ThreeBtn.vue'
  import {
    getUserByRoleId
  } from '../js/api';
  export default {
    props: ["authorityId"],
    components: {
      ThreeBtn
    },
    data() {
      return {
        table: {
          loading: false,
          headers: [{
              prop: "realName",
              label: "姓名",
            }, {
              prop: "name",
              label: "账号名称",
            }, {
              prop: "phone",
              label: "手机号码",
            },
            {
              prop: "email",
              label: "邮箱地址",
            },
            {
              prop: "dept",
              label: "部门",
            },
          ],
          datas: []
        },
        page: {
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        }
      }
    },
    methods: {
      loadGetUser(id) {
        let postData = {
          roleId: id,
          pageNum: this.page.pageCurr,
          pageSize: this.page.pageSize
        }
        getUserByRoleId(postData).then((res) => {
          if (res.data.code == 1) {
            this.table.datas = res.data.data.list;
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      currentChange(value) {
        this.page.pageCurr = value;
        this.loadGetUser(this.authorityId);
      },
      sizeChange(value) {
        this.page.pageCurr = 1;
        this.page.pageSize = value;
        this.loadGetUser(this.authorityId);
      },
    },
    mounted() {
      this.loadGetUser(this.authorityId);
    }
  }
</script>

<style scoped>
  .params-container {
    padding: 10px;
    background-color: #222767;
    width: 100%;
  }

  .table-layout {
    margin-top: 16px;
  }

  .bg-white .table-cell {
    color: #000000;
  }

  .el-form-item.inline {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin: 15px 4px 8px;
  }

  .el-form-item.inline /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input {
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input:first-of-type {
    margin-left: 0;
  }

  .el-form-item.inline /deep/ .el-form-item__label {
    width: 110px;
    white-space: nowrap;
  }

  .el-science-blue .maintenanceCodeDialog /deep/ .el-tabs--border-card>.el-tabs__header {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 1px solid #dddddd;
  }

  .el-science-blue .maintenanceCodeDialog /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item {
    color: #666666;
    outline: none;
  }

  .el-science-blue .maintenanceCodeDialog /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #cccccc;
    border: none;
    color: #042271;
  }

  .el-science-blue .maintenanceCodeDialog .params-dialog /deep/ .el-form-item.nobg .el-input__inner[readonly=readonly] {
    background-color: transparent;
    border: none;
  }

  .el-science-blue .maintenanceCodeDialog /deep/ .el-table th {
    background-color: #d8d8d8;
    color: #042271;
  }

  .el-science-blue .maintenanceCodeDialog /deep/ .el-table td {
    background-color: #F5F7FA;
    color: #666666;
  }

  .el-science-blue .maintenanceCodeDialog /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #e4ebf1;
  }

  .el-science-blue .maintenanceCodeDialog /deep/ .el-table tr {
    background-color: #FFFFFF;
  }

  .tableCon {
    width: 100%;
    height: 400px;
  }
</style>

 src/pages/user/dialog/editAuthority.vue

New file
@@ -0,0 +1,147 @@
<template>
  <div class="params-container">
    <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
      :props="defaultProps" :check-strictly="true" :default-checked-keys="select" @check="checkeTree">
    </el-tree>
    <div class="form-footer">
      <three-btn @click="undateMenu">完成</three-btn>
    </div>
  </div>
</template>

<script>
  import ThreeBtn from '@/components/ThreeBtn.vue'
  import {
    searchRoleMenu,
    updateRoleMenu
  } from '../js/api';
  export default {
    props: ["authorityId"],
    components: {
      ThreeBtn
    },
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'subMenus',
          label: 'name'
        },
        select: []
      }
    },
    methods: {
      // 选中子节点，默认选中父节点
      checkeTree(data) {
        let thisNode = this.$refs.tree.getNode(data.id) // 获取当前节点
        const keys = this.$refs.tree.getCheckedKeys() // 获取已勾选节点的key值
        if (thisNode.checked) { // 当前节点若被选中
          for (let i = thisNode.level; i > 1; i--) { // 判断是否有父级节点
            if (!thisNode.parent.checked) { // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
              thisNode = thisNode.parent
              keys.push(thisNode.data.id)
            }
          }
        }
        this.$refs.tree.setCheckedKeys(keys) // 将所有keys数组的节点全选中
      },
      undateMenu() {
        let params = {
          roleId: this.authorityId
        }
        let postData = this.$refs.tree.getCheckedKeys();
        updateRoleMenu(params, postData).then((res) => {
          if (res.data.code == 1) {
            this.$message.success("添加成功！")
            this.$emit("success", false)
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      loadRoleMenu(id) {
        let postData = {
          roleId: id
        }
        searchRoleMenu(postData).then((res) => {
          this.data = res.data;
          this.data.map(item => {
            if (item.selected) {
              this.select.push(item.id)
            }
            if (item.subMenus && item.subMenus.length > 0) {
              item.subMenus.map(jtem => {
                if (jtem.selected) {
                  this.select.push(jtem.id)
                }
                if (jtem.subMenus && jtem.subMenus.length > 0) {
                  jtem.subMenus.map(ktem => {
                    if (ktem.selected) {
                      this.select.push(ktem.id)
                    }
                  })
                }
              })
            }
          })
        }).catch((err) => {
          console.log(err)
        });
      }
    },
    mounted() {
      this.loadRoleMenu(this.authorityId);
    }
  }
</script>

<style scoped>
  .params-container {
    width: 100%;
    background-color: #222767;
    max-height: 600px;
    overflow-y: auto;
  }

  .table-layout {
    margin-top: 16px;
  }

  .bg-white .table-cell {
    color: #000000;
  }

  .el-form-item.inline {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin: 15px 4px 8px;
  }

  .el-form-item.inline /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input {
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input:first-of-type {
    margin-left: 0;
  }

  .el-form-item.inline /deep/ .el-form-item__label {
    width: 110px;
    white-space: nowrap;
    text-align: right;
    padding-right: 8px;
  }

  .params-container /deep/ .el-radio__label {
    color: #333333;
  }
</style>

 src/pages/user/js/api.js

@@ -147,12 +147,81 @@
}

/**
 * 删除角色
 */
export const deleteRole = (data) => {
  return axios({
    method: "DELETE",
    url: "/role/deleteRole",
    params: data,
  });
}

/**
 * 编辑角色
 */
export const updateRole = (data) => {
  return axios({
    method: "PUT",
    url: "/role",
    url: "/role/updateRole",
    data
  });
}

/**
 * 通过角色id获取用户信息
 */
export const getUserByRoleId = (data) => {
  return axios({
    method: "GET",
    url: "/role/getUserByRoleId",
    params: data,
  });
}

/**
 * 通过角色id获取角色用户信息
 */
export const getUsersByRoleId = (data) => {
  return axios({
    method: "GET",
    url: "/role/getUsersByRoleId",
    params: data,
  });
}

/**
 * 通过角色id更新角色用户信息
 */
export const updateRoleUser = (params, data) => {
  return axios({
    method: "PUT",
    url: "/role/updateRoleUser",
    params: params,
    data: data,
  });
}


/**
 * 获取角色所有菜单
 */
export const searchRoleMenu = (data) => {
  return axios({
    method: "GET",
    url: "/role/roleMenu",
    params: data,
  });
}

/**
 * 更新角色菜单
 */
export const updateRoleMenu = (params, data) => {
  return axios({
    method: "PUT",
    url: "/role/updateRoleMenu",
    params: params,
    data: data,
  });
}

 src/pages/user/list.vue

@@ -56,7 +56,7 @@
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="140" align="center">
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
@@ -72,7 +72,7 @@
    </flex-layout>

    <!-- 添加用户 -->
    <el-dialog :title="dialogTitle" width="800px" :visible.sync="addDialog" :close-on-click-modal="false"
    <el-dialog :title="dialogTitle" width="auto" top="0" :visible.sync="addDialog" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <add-user v-if="addDialog" :userInfo="userInfo" @success="addSuccess"></add-user>
    </el-dialog>