1.角色分配

loulijun2021

2023-08-24 68338b19f9dc2ad9725326b7e699a3e191030cb8

1.角色分配

 src/api/basicSettings.js

@@ -175,3 +175,30 @@
  })
}

// è§’色管理分配用户,获取已分配用户列表
export function RoleAssignedUserData(data) {
  return request({
    url: 'BasicSetting/RoleAssignedUserData',
    method: 'get',
    params: data
  })
}

//
export function RoleAssignedUserBatchCancel(data, role_code) {
  return request({
    url: 'BasicSetting/RoleAssignedUserBatchCancel?role_code=' + role_code,
    method: 'post',
    data
  })
}

//
export function RoleAssignedUserBatchAdd(data, role_code) {
  return request({
    url: 'BasicSetting/RoleAssignedUserBatchAdd?role_code=' + role_code,
    method: 'post',
    data
  })
}


 src/layout/components/Navbar.vue

@@ -265,11 +265,11 @@
  ],
  created() {
    // this.$signalr.start()
    // Vue.prototype.$ButtonData = JSON.parse(localStorage.getItem('ButtonData'))
  },
  mounted() {
    // this.getHubConnectionBuilder()

    Vue.prototype.$ButtonData = JSON.parse(localStorage.getItem('ButtonData'))
  },
  computed: {
    ...mapGetters([

 src/layout/components/Sidebar/index.vue

@@ -80,9 +80,9 @@
      // console.log(meta, path, 7)
      // if set path, the sidebar will highlight the path you set
      removeCookie('ruleCode')
      setCookie('ruleCode', meta.code)// å°†ç¼–码规则code存到cookie里面
      Vue.prototype.$buttoncode = meta.buttoncode
      Vue.prototype.$datacode = meta.datacode
      setCookie('ruleCode', meta.code) // å°†ç¼–码规则code存到cookie里面
      // Vue.prototype.$buttoncode = meta.buttoncode
      // Vue.prototype.$datacode = meta.datacode
      // setCookie('buttoncode', meta.buttoncode)//  æŒ‰é’®æƒé™
      // setCookie('datacode', meta.datacode)//  æ•°æ®æƒé™
      if (meta.activeMenu) {

 src/router/index.js

@@ -133,6 +133,14 @@
        code: '1015',
        component: () => import('@/views/basicSettings/powerDivider'),
        meta: { code: '1015', title: '权限分配', icon: '', keepAlive: true }
      },
      {
        path: 'roleDivider',
        name: 'roleDividerCancel',
        code: '1016',
        hidden: true,
        component: () => import('@/views/basicSettings/roleDivider'),
        meta: { code: '1016', title: '角色分配', icon: '', keepAlive: true }
      }

    ]

 src/store/modules/permission.js

@@ -18,7 +18,7 @@
        item.children.forEach(it => {
          if (it.flag === '0') {
            menuCode.push(it.code)
            menuNameAndCode.push({ code: it.code, name: it.name, buttoncode: it.buttoncode, datacode: it.datacode })
            menuNameAndCode.push({ code: it.code, name: it.name, hidden: it.is_show === 'N', buttoncode: it.buttoncode, datacode: it.datacode })
          }
        })
      }
@@ -38,6 +38,7 @@
          it.meta.title = t.name
          it.meta.buttoncode = t.buttoncode
          it.meta.datacode = t.datacode
          it.hidden = t.hidden
          children.push(it)
          flag = true
        }

 src/store/modules/user.js

@@ -2,6 +2,7 @@
import { getToken, removeToken, setCookie } from '@/utils/auth'
import { resetRouter } from '@/router'
import { ButtonData } from '@/api/GeneralBasicData'
import Vue from 'vue'

const getDefaultState = () => {
  return {
@@ -82,6 +83,8 @@
      }).then(res => {
        if (res.code === '200') {
          ButtonData().then(res2 => {
            // localStorage.setItem('buttoncode', res2.data.map(i => i.buttoncode))
            Vue.prototype.$buttoncode = res2.data.map(i => i.buttoncode)
            localStorage.setItem('ButtonData', JSON.stringify(res2.data))
          })


 src/styles/global.css

@@ -27,25 +27,27 @@
  background: #f8f8fa;
}

.el-table__body-wrapper{
.el-table__body-wrapper {
  background: #f8f8fa;
}

.el-table__body .el-table__row.hover-row td {
  background-color: #eaecef !important;
}

.body .el-input__inner{
.body .el-input__inner {
  height: 34px !important;
}

.el-dialog__body{
  padding:50px 80px !important;
.el-dialog__body {
  padding: 50px 80px !important;
}
.el-dialog__body .el-input__inner{

.el-dialog__body .el-input__inner {
  height: 34px !important;
}

.el-icon-delete,.el-icon-edit-outline{
.el-icon-delete, .el-icon-edit-outline {
  cursor: pointer;
  margin-right: 15px;
}
@@ -56,11 +58,10 @@
  align-items: center;
}

.el-message-box__btns{
.el-message-box__btns {
  display: flex;
  justify-content: flex-end;
}



/*头部按钮组样式*/
@@ -99,11 +100,11 @@
  /*cursor: pointer;*/
}

.bodyTopFormExpand:hover{
.bodyTopFormExpand:hover {
  color: #00ff8b !important;
}

.svg-icon:hover{
.svg-icon:hover {
  color: #00ff8b !important;
  /*background-color: #00ff8b !important;*/
}
@@ -114,8 +115,12 @@
  /*justify-content: space-between;*/
  /*justify-content: space-around;*/
  width: 100%;
  height:50px;
  /*min-height:42px  !important;*/
  flex-wrap: wrap;
}

.elForm .el-form-item {
  margin-bottom: 0 !important;
}

.elTableDiv {
@@ -158,9 +163,8 @@
}



.el-button{
  height: 34px ;
.el-button {
  height: 34px;
  display: flex !important;
  align-items: center;
  justify-content: center;
@@ -206,9 +210,10 @@


/*解决固定滚动条高低像素差*/
.el-table__fixed::before{
.el-table__fixed::before {
  height: 0 !important;
}
.el-table__fixed-right::before{

.el-table__fixed-right::before {
  height: 0 !important;
}

 src/views/basicSettings/groupList.vue

@@ -29,7 +29,24 @@
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>

        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">

 src/views/basicSettings/organizationList.vue

@@ -29,7 +29,24 @@
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>

        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">

 src/views/basicSettings/personList.vue

@@ -23,7 +23,7 @@
          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto;"
            :style="{height:(tableHeight+140)+'px'}"
            :style="{height:(tableHeight+180)+'px'}"
            :data="treeLeft"
            node-key="torg_code"
            highlight-current
@@ -55,6 +55,25 @@
                <el-form-item label="用户名称" style=" display: flex;">
                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item label="用户编码" style=" display: flex;">
                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">
                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />
                </el-form-item>

                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">
                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">
                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">
                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">
                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />
                </el-form-item>
              </div>
              <div
                class="bodySearchReset"
@@ -64,7 +83,23 @@
                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
              </div>
            </el-form>

            <div
              class="bodyTopFormExpand"
            >
              <svg-icon
                v-show="mouseHoverType==='mouseout'"
                style="cursor: pointer"
                :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
                @mouseenter="mouseHoverType=$event.type"
              />
              <svg-icon
                v-show="mouseHoverType==='mouseenter'"
                style="cursor: pointer"
                :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
                @click="isExpandForm=!isExpandForm"
                @mouseout="mouseHoverType=$event.type"
              />
            </div>
          </div>

          <div class="elTableDiv">
@@ -72,10 +107,10 @@
              ref="tableDataRef"
              class="tableFixed"
              :data="tableData"
              :height="tableHeight+'px'"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:tableHeight+'px',}"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"
              highlight-current-row
              :header-cell-style="this.$headerCellStyle"
              :cell-style="this.$cellStyle"
@@ -154,7 +189,16 @@
                </template>
              </el-table-column>
              <el-table-column
                prop="username"
                prop="group_name"
                label="班组"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.group_name ? row.group_name : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="createusername"
                label="创建人员"
                sortable="custom"
              />
@@ -381,6 +425,8 @@
      }
    }
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
@@ -602,7 +648,6 @@
    handleClose() {
      this.dialogForm.usercode = ''
      this.dialogForm.username = ''
      this.dialogForm.storg_code = ''
      this.dialogForm.status = 'Y'

      this.dialogForm.post_code = []
@@ -611,6 +656,8 @@
      this.dialogForm.password = '123456'
      this.dialogForm.mobile = ''
      this.dialogForm.email = ''

      // this.dialogForm.storg_code = ''

      this.$refs.cascader.checkedValue = ''
      this.$refs.dialogForm.clearValidate()
@@ -646,7 +693,7 @@
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        this.tableHeight = this.mainHeight - 295
        this.$refs.tableDataRef.doLayout()
      })
    }

 src/views/basicSettings/postList.vue

@@ -29,7 +29,24 @@
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>

        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
@@ -42,8 +59,6 @@
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          row-key="torg_code"
          default-expand-all
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
@@ -78,7 +93,11 @@
            prop="description"
            label="描述"
            sortable="custom"
          />
          >
            <template slot-scope="{row}">
              {{ row.description?row.description:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建人员"

 src/views/basicSettings/powerDivider.vue

@@ -180,12 +180,15 @@

      allButtonData: [], // æ‰€æœ‰èœå•å¯¹åº”的按钮权限加数据权限

      isScroll: 'left'
      isScroll: 'left',

      ButtonData: JSON.parse(localStorage.getItem('ButtonData'))

    }
  },

  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
@@ -200,14 +203,19 @@
      const { data: res } = await RolePermissionSearchRole()
      this.treeLeft = res

      let rolecode = ''
      if (window.location.hash.indexOf('?') !== -1) {
        rolecode = window.location.hash.split('?')[1].split('=')[1]
      }

      if (res && res.length > 0) {
        this.$nextTick(() => { // é»˜è®¤é€‰ä¸­ç¬¬ä¸€ä¸ª
          this.$refs.treeLeftRef.setCurrentKey(res[0].code) // é»˜è®¤é€‰ä¸­èŠ‚点第一个
          this.$refs.treeLeftRef.setCurrentKey(rolecode || res[0].code) // é»˜è®¤é€‰ä¸­èŠ‚点第一个
        })

        await this.getRolePermissionSearchRoleMenuButton(res[0].code)// ç”¨äºŽæ•°æ®å›žæ˜¾
        await this.getRolePermissionSearchRoleMenuButton(rolecode || res[0].code)// ç”¨äºŽæ•°æ®å›žæ˜¾

        await this.getRolePermissionSearchRoleMenu(res[0].code)// ç”¨äºŽæ¸²æŸ“页面
        await this.getRolePermissionSearchRoleMenu(rolecode || res[0].code)// ç”¨äºŽæ¸²æŸ“页面
      } else {
        this.$notify.error('请先建相对应的角色！')
      }
@@ -238,7 +246,7 @@
          item.children.forEach(it => {
            it.buttoncodelist = it.buttoncodelist !== '' && it.buttoncodelist !== null ? it.buttoncodelist.split(',') : []
            if (it.buttoncodelist && it.buttoncodelist.length > 0) {
              it.buttoncodelist = this.$ButtonData.filter(j =>
              it.buttoncodelist = this.ButtonData.filter(j =>
                it.buttoncodelist.includes(j.buttoncode)
              )

@@ -265,7 +273,7 @@
            let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : []
            temp = temp.length > 0 ? temp.split(',') : []
            it.buttonChecked = [] // æ•°æ®å›žæ˜¾
            this.$ButtonData.forEach(j => {
            this.ButtonData.forEach(j => {
              if (temp.includes(j.buttoncode)) {
                it.buttonChecked.push(j.buttonname)
              }
@@ -419,7 +427,7 @@
          item.children.forEach(it => {
            if (menuKeyArr.includes(it.menucode)) {
              if (it.buttonChecked && it.buttonChecked.length > 0) { // å·²é€‰èœå•
                it.buttonCheckedCode = this.$ButtonData.filter(i =>
                it.buttonCheckedCode = this.ButtonData.filter(i =>
                  it.buttonChecked.includes(i.buttonname)
                ).map(i => i.buttoncode)
              }

 src/views/basicSettings/roleDivider.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,541 @@
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button v-waves type="danger" icon="el-icon-error" @click="batchCancel">批量取消授权</el-button>
        <!--        <el-button v-waves type="warning" icon="el-icon-close">关闭</el-button>-->
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="角色编码" style=" display: flex;">
              <el-select
                v-model="form.role_code"
                style="width:200px"
                placeholder="请选择"
                @change="roleChange"
              >
                <el-option
                  v-for="item in roleArr"
                  :key="item.rolecode"
                  :label="item.rolename"
                  :value="item.rolecode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="用户编码" style=" display: flex;">
              <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="用户名称" style=" display: flex;">
              <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />
            </el-form-item>

            <el-form-item label="组织编码" style=" display: flex;">
              <el-cascader
                ref="cascader"
                v-model="form.storg_code"
                :options="cascaderOptions"
                filterable
                :props="defaultProps"
                :show-all-levels="false"
              />
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="岗位名称" style=" display: flex;">
              <el-select
                v-model="form.post_code"
                style="width:200px"
                multiple
                collapse-tags
                placeholder="请选择"
              >
                <el-option
                  v-for="item in postArr"
                  :key="item.postcode"
                  :label="item.postname"
                  :value="item.postcode"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="班组编码" style=" display: flex;">
              <el-select
                v-model="form.group_code"
                style="width:200px"
                multiple
                collapse-tags
                placeholder="请选择"
              >
                <el-option
                  v-for="item in groupArr"
                  :key="item.usergroupcode"
                  :label="item.usergroupname"
                  :value="item.usergroupcode"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getRoleAssignedUserData">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        >
          <svg-icon
            v-show="mouseHoverType==='mouseout'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
            @mouseenter="mouseHoverType=$event.type"
          />
          <svg-icon
            v-show="mouseHoverType==='mouseenter'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
            @click="isExpandForm=!isExpandForm"
            @mouseout="mouseHoverType=$event.type"
          />
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"
          highlight-current-row
          :row-key="getRowKey"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @selection-change="handleSelectionChange"
          @sort-change="sortChange"
        >
          <el-table-column
            type="selection"
            width="50"
            :reserve-selection="true"
            fixed
          />
          <el-table-column
            prop="rowNum"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="usercode"
            label="用户编码"
            sortable="custom"
          />
          <el-table-column
            prop="username"
            label="用户名称"
            sortable="custom"
          />
          <el-table-column
            prop="storg_name"
            label="所属组织"
            sortable="custom"
          />
          <el-table-column
            prop="rolename"
            label="角色"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.rolename ? row.rolename : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="postname"
            label="岗位"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.postname ? row.postname : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="group_name"
            label="班组"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.group_name ? row.group_name : '/' }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="200"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-button
                  type="text"
                  style="cursor: pointer;font-size: 14px"
                  @click="cancel(row.usercode)"
                >取消授权
                </el-button>

              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getRoleAssignedUserData"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <div>
        <el-table
          ref="tableDataDialogRef"
          class="tableFixed"
          :data="tableDataDialog"
          height="400"
          border
          :style="{width: 100+'%',height:'400px',}"
          highlight-current-row
          :row-key="getRowKey"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @selection-change="handleDialogSelectionChange"
        >
          <el-table-column
            type="selection"
            width="50"
            :reserve-selection="true"
            fixed
          />
          <el-table-column
            prop="rowNum"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="usercode"
            label="用户编码"
          />
          <el-table-column
            prop="username"
            label="用户名称"
          />
          <el-table-column
            prop="storg_name"
            label="所属组织"
          />
          <el-table-column
            prop="rolename"
            label="角色"
          >
            <template slot-scope="{row}">
              {{ row.rolename?row.rolename:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="postname"
            label="岗位"
          >
            <template slot-scope="{row}">
              {{ row.postname?row.postname:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="group_name"
            label="班组"
          >
            <template slot-scope="{row}">
              {{ row.group_name?row.group_name:'/' }}
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination
          :total="totalDialog"
          :page.sync="dialogForm.page"
          :limit.sync="dialogForm.rows"
          align="right"
          style="margin-top: 10px;"
          layout="total,prev, pager, next,sizes,jumper"
          popper-class="select_bottom"
          @pagination="add"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button
            v-waves
            @click="dialogVisibleCancel"
          >取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  AddUpdatePost, RoleAssignedUserBatchAdd,
  RoleAssignedUserBatchCancel,
  RoleAssignedUserData

} from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import arrayToTree from 'array-to-tree'
import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'

export default {
  name: 'Zzjg',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        flag: 'TRUE', // TRUE(已关联) FALSE(未关联)
        role_code: '', // è§’色编码
        usercode: '', // ç”¨æˆ·ç¼–码
        username: '', // ç”¨æˆ·åç§°
        storg_code: [], //
        post_code: [], //
        group_code: [], //
        prop: 'lm_date', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: 1, // ç¬¬å‡ é¡µ
        rows: 20 // æ¯é¡µå¤šå°‘条
      },
      total: 10,
      tableData: [],

      cascaderOptions: [],
      defaultProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'torg_code',
        label: 'torg_name'
      },
      roleArr: [],
      postArr: [],
      groupArr: [],

      dialogVisible: false,
      dialogForm: {
        page: 1, // ç¬¬å‡ é¡µ
        rows: 20 // æ¯é¡µå¤šå°‘条
      },
      tableDataDialog: [],
      totalDialog: 10,

      batchRoleCode: [],
      batchDialogRoleCode: []

    }
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getAllSelectData()
    this.getPrentOrganization()
  },
  methods: {
    // ç»„织架构大列表查询
    async getRoleAssignedUserData() {
      if (!this.form.role_code) {
        this.form.role_code = this.roleArr[0].rolecode
      }

      this.form.storg_code = this.form.storg_code ? this.form.storg_code[this.form.storg_code.length - 1] : ''
      this.form.post_code = this.form.post_code ? this.form.post_code.join(',') : ''
      this.form.group_code = this.form.group_code ? this.form.group_code.join(',') : ''

      const res = await RoleAssignedUserData(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    async getPrentOrganization() {
      const { data: res } = await PrentOrganization()
      this.cascaderOptions = arrayToTree(res, {
        parentProperty: 'parent_id',
        customID: 'torg_code',
        childrenProperty: 'children'
      })
    },
    // å²—位 è§’色 ç­ç»„
    async getAllSelectData() {
      const { data: res2 } = await RolePermissions()
      this.roleArr = res2
      await this.getRoleAssignedUserData()

      const { data: res1 } = await PostPermissions()
      this.postArr = res1

      const { data: res3 } = await GroupsPermissions()
      this.groupArr = res3
    },
    // æŽ’序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getRoleAssignedUserData()
    },
    // é‡ç½®
    reset() {
      this.form.usercode = ''
      this.form.username = ''

      this.form.storg_code = []
      this.form.post_code = []
      this.form.group_code = []
      this.getRoleAssignedUserData()
    },
    roleChange(val) {
      this.getRoleAssignedUserData()
      this.batchRoleCode = []
      this.$refs.tableDataRef.clearSelection()
    },

    async cancel(code) {
      const res = await RoleAssignedUserBatchCancel([code], this.form.role_code)
      if (res.code === '200') {
        this.$notify.success('取消授权成功！')
        await this.getRoleAssignedUserData()
      } else {
        this.$notify.error('取消授权失败！')
      }
    },

    async batchCancel() {
      const res = await RoleAssignedUserBatchCancel(this.batchRoleCode, this.form.role_code)
      if (res.code === '200') {
        this.$notify.success(this.batchRoleCode.length + '个用户取消授权成功！')
        await this.getRoleAssignedUserData()
        this.batchRoleCode = []
        this.$refs.tableDataRef.clearSelection()
      } else {
        this.$notify.error(this.batchRoleCode.length + '个用户取消授权失败！')
      }
    },

    // æ–°å¢žæŒ‰é’®
    async add() {
      this.dialogVisible = true

      const data = {
        flag: 'FALSE', // TRUE(已关联) FALSE(未关联)
        role_code: this.form.role_code, // è§’色编码
        usercode: '', // ç”¨æˆ·ç¼–码
        username: '', // ç”¨æˆ·åç§°
        storg_code: '', //
        post_code: '', //
        group_code: '', //
        prop: 'lm_date', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: this.dialogForm.page, // ç¬¬å‡ é¡µ
        rows: this.dialogForm.rows // æ¯é¡µå¤šå°‘条
      }
      const res = await RoleAssignedUserData(data)
      this.tableDataDialog = res.data
      this.totalDialog = res.count
    },

    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      // this.form.flag = 'TRUE'
    },
    getRowKey(row) {
      return row.usercode
    },
    handleSelectionChange(rows) {
      this.batchRoleCode = rows.map(i => i.usercode)
    },
    handleDialogSelectionChange(rows) {
      this.batchDialogRoleCode = rows.map(i => i.usercode)
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // å¯¹è¯æ¡†ç¡®è®¤
    async  dialogVisibleConfirm() {
      const res = await RoleAssignedUserBatchAdd(this.batchDialogRoleCode, this.form.role_code)
      if (res.code === '200') {
        this.$notify.success(this.batchDialogRoleCode.length + '个用户新增授权成功！')
        await this.getRoleAssignedUserData()
        this.batchDialogRoleCode = []
        this.$refs.tableDataDialogRef.clearSelection()
        this.dialogVisible = false
      } else {
        this.$notify.error(this.batchDialogRoleCode.length + '个用户新增授权失败！')
      }
    },
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 255
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/basicSettings/roleList.vue

@@ -29,7 +29,24 @@
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>

        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
@@ -81,7 +98,11 @@
            prop="description"
            label="备注"
            sortable="custom"
          />
          >
            <template slot-scope="{row}">
              {{ row.description?row.description:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建人员"
@@ -131,7 +152,7 @@
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-circle-check" command="menuPower">菜单权限</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-user" command="divideUser">分配用户</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-download" command="downloadMenu">导出菜单</el-dropdown-item>
                    <!--                    <el-dropdown-item icon="el-icon-download" command="downloadMenu">导出菜单</el-dropdown-item>-->
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
@@ -439,7 +460,10 @@
    handleCommand(command, row) {
      console.log(command, row)
      if (command === 'menuPower') {
        this.$router.push('./roleList?powerId=' + row.id)// demo
        this.$router.push('./powerDivider?rolecode=' + row.rolecode)
      }
      if (command === 'divideUser') {
        this.$router.push('./roleDivider?rolecode=' + row.rolecode)
      }
    },
    // èŽ·å–页面高度

 src/views/systemSetting/encodingRules.vue

@@ -36,6 +36,24 @@
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
@@ -308,7 +326,6 @@
    this.getHeight()

    this.getCodeMenuSelect()
    console.log(this.$buttoncode)
  },
  methods: {
    async getCodeMenuSelect() {