jsm-mall-front/src/views/setting/role/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: 'hidden'
        }"
      >
        <div class="app-container">
          <div class="setting_title">权限管理</div>
          <el-divider></el-divider>
          <div class="mymain-container">
            <div class="btn-group clearfix">
              <div class="fl">
                <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')"
                  >新增角色</el-button
                >
              </div>
              <div class="fr">
                <el-input
                  placeholder="商户名称"
                  v-model="screenForm.companyWechatName"
                  size="small"
                  style="width: 300px"
                >
                  <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
                </el-input>
                <el-button
                  size="small"
                  @click="
                    screenForm.companyWechatName = ''
                    getListByScreen()
                  "
                  >清空</el-button
                >
              </div>
            </div>
            <div class="table">
              <el-table
                v-loading="listLoading"
                :data="dataList"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                stripe
              >
                <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
                <el-table-column align="center" label="商户" prop="companyName"></el-table-column>
                <el-table-column align="center" label="父级" prop="parentRoleName"></el-table-column>
                <el-table-column align="center" label="角色" prop="name"></el-table-column>
                <el-table-column align="center" label="适用机构" prop="type">
                  <template slot-scope="scope">
                    {{ ['网点', '商户', '平台'][scope.row.type] }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="级别" prop="level">
                  <template slot-scope="scope">
                    {{ { 0: '无', 1: '一级网点', 2: '二级网点', 100: '通用' }[scope.row.level] }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" @click="setMenuRole(scope.row)">设置权限</el-button>
                    <el-button
                      type="text"
                      @click="addOrEdit('edit', scope.row.adminRoleId)"
                      v-if="scope.row.adminRoleId != 1"
                      >编辑</el-button
                    >
                    <el-popconfirm
                      style="margin-left: 10px"
                      title="确定删除吗？"
                      @confirm="handleDelete(scope.row.adminRoleId)"
                      v-if="scope.row.adminRoleId != 1"
                    >
                      <el-button slot="reference" type="text">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination clearfix">
              <div class="fr">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="listTotal"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <el-form
          ref="addForm"
          :model="addForm"
          :inline="true"
          :rules="addFormRules"
          label-position="left"
          label-width="100px"
        >
          <el-form-item label="父级" prop="parentRoleId">
            <el-select
              v-model="addForm.parentRoleId"
              placeholder="请选择"
              @change="
                v => {
                  if (v && dataList22.find(item => item.adminRoleId == v)) {
                    addForm.parentRoleName = dataList22.find(item => item.adminRoleId == v).name
                  } else {
                    addForm.parentRoleName = ''
                  }
                }
              "
            >
              <el-option
                v-for="item in (dataList22 || []).filter(a => a.adminRoleId != addForm.adminRoleId)"
                :key="item.adminRoleId"
                :label="item.name"
                :value="item.adminRoleId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="角色名" prop="name">
            <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
          </el-form-item>
          <el-form-item label="适用机构" prop="type">
            <el-select
              v-model="addForm.type"
              placeholder="请选择"
              @change="
                v => {
                  addForm.level = v == 1 ? 0 : ''
                }
              "
            >
              <el-option v-for="item in adminRoleGetRoleType" :key="item.code" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="级别" prop="level" v-if="[0, 1].includes(addForm.type)">
            <el-select v-model="addForm.level" placeholder="请选择">
              <el-option label="无" :value="0" v-if="[1].includes(addForm.type)" />
              <el-option label="一级网点" :value="1" />
              <el-option label="二级网点" :value="2" />
              <el-option label="通用" :value="100" v-if="[0].includes(addForm.type)" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button size="mini" @click="data.removeTab()">取 消</el-button>
          <el-button size="mini" type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
        </div>
      </div>
      <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <div>
          <span class="custom-tree-node">
            <span>菜单</span>
            <span>
              <el-button type="text" size="mini" @click.stop="quanbugouxuan(null, { children: menuRoleList })"
                >全部勾选</el-button
              >
              <el-button type="text" size="mini" @click.stop="quxiaogouxuan(null, { children: menuRoleList })"
                >取消勾选</el-button
              >
            </span>
          </span>
        </div>
        <zj-tree
          :data="menuRoleList"
          show-checkbox
          :default-expand-all="true"
          node-key="moduleId"
          ref="tree"
          highlight-current
          :props="defaultProps"
          :check-strictly="true"
          :expand-on-click-node="true"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span v-if="[1, 2].includes(data.type)">
              <el-button type="text" size="mini" @click.stop="quanbugouxuan(node, data)">全部勾选</el-button>
              <el-button type="text" size="mini" @click.stop="quxiaogouxuan(node, data)">取消勾选</el-button>
            </span>
          </span>
        </zj-tree>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button size="mini" @click="data.removeTab()">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
          <el-button size="mini" type="primary" @click="submitRoleForm(data.removeTab)" v-if="editId != 1"
            >确 定</el-button
          >
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getRoleList,
  addRole,
  editRole,
  getRoleDetail,
  deleteRole,
  getMenuList,
  getMenuRoleIds,
  setMenuRole,
  adminRoleGetRoleType
} from '@/api/setting'

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      editId: null,
      addFormType: 'add',
      screenForm: {
        companyWechatName: ''
      },
      addForm: {
        name: '', // 角色名
        type: '',
        level: '',
        parentRoleId: '',
        parentRoleName: ''
      },
      addFormRules: {
        name: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
        type: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
        level: [{ required: true, message: '请输入角色名', trigger: 'blur' }]
      },
      menuRoleList: [],
      defaultProps: {
        children: 'children',
        label: 'moduleName'
      },
      adminRoleGetRoleType: [],
      dataList22: []
    }
  },
  computed: {
    ...mapGetters(['userid', 'name'])
  },
  created() {
    this.getList()
    getRoleList({
      pageNum: 1,
      pageSize: -1
    }).then(res => {
      this.dataList22 = res.data.records
    })
    adminRoleGetRoleType().then(res => {
      this.adminRoleGetRoleType = res.data
    })
  },
  methods: {
    diguichazhaoid(arr, ids) {
      for (var item of arr) {
        ids.push(item.moduleId)
        if (item.children && item.children.length) {
          this.diguichazhaoid(item.children, ids)
        }
      }
    },
    zhaofuji(data, arr) {
      if (data.parent) {
        arr.push(data.data.moduleId)
        this.zhaofuji(data.parent, arr)
      }
    },
    quanbugouxuan(node, data) {
      let nowChecked = this.$refs.tree.getCheckedKeys()
      let thisId = data.moduleId
      let childId = []
      if (data.children.length) {
        childId = this.familyTree(data.children)
      }

      var parentId = []
      this.zhaofuji(node, parentId)
      let setChecked = nowChecked.concat([thisId]).concat(childId).concat(parentId)

      this.$refs.tree.setCheckedKeys(setChecked)

      // var ids = []
      // this.diguichazhaoid(data.children, ids)
      // this.$refs.tree.setCheckedKeys([data?.moduleId || '', ...ids, ...this.$refs.tree.getCheckedKeys()])
    },
    quxiaogouxuan(node, data) {
      let nowChecked = this.$refs.tree.getCheckedKeys()
      let thisId = data.moduleId
      let childId = []
      if (data.children.length) {
        childId = this.familyTree(data.children)
      }

      let setChecked = nowChecked
      if (setChecked.indexOf(thisId) >= 0) {
        setChecked.splice(setChecked.indexOf(thisId), 1)
      }

      if (childId.length) {
        for (var i = 0; i < childId.length; i++) {
          if (setChecked.indexOf(childId[i]) >= 0) {
            setChecked.splice(setChecked.indexOf(childId[i]), 1)
          }
        }
      }

      this.$refs.tree.setCheckedKeys(setChecked)

      // var ids = []
      // this.diguichazhaoid(data.children, ids)
      // var keyIds = [data?.moduleId || '', ...ids]
      // var keys = this.$refs.tree.getCheckedKeys().filter(k => !keyIds.includes(k))
      // this.$refs.tree.setCheckedKeys(keys)
    },

    // 递归子id
    familyTree(arr) {
      var temp = []
      var forFn = function (list) {
        for (var i = 0; i < list.length; i++) {
          var item = list[i]
          if (item.children) {
            temp.push(item.moduleId)
            forFn(item.children)
          }
        }
      }
      forFn(arr)
      return temp
    },

    getList() {
      this.listLoading = true
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        companyWechatName: this.screenForm.companyWechatName
      }
      getRoleList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1
      this.getList()
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteRole({ adminRoleId: id }).then(res => {
        this.getList()
        this.$successMsg()
      })
    },

    // 新增编辑
    addOrEdit(type, id) {
      this.$refs.tabPage.addTab({
        activeKey: type,
        key: type,
        label: { add: '新增', edit: '编辑' }[type],
        triggerEvent: () => {
          this.$refs?.addForm?.resetFields()
          this.$data.addForm = this.$options.data().addForm
          this.addFormType = type
          if (type == 'edit') {
            this.editId = id
            getRoleDetail({ adminRoleId: id }).then(res => {
              this.addForm = {
                ...res.data
              }
            })
          }
        },
        closeEvent: () => {}
      })
    },

    // 提交 新增编辑
    submitAddForm(removeTab) {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          let params = {
            ...this.addForm
          }
          if (this.addFormType == 'edit') {
            params.adminRoleId = this.editId
            editRole(params).then(res => {
              removeTab('list')
              this.getList()
              this.$successMsg('编辑成功')
              getRoleList({
                pageNum: 1,
                pageSize: -1
              }).then(res => {
                this.dataList22 = res.data.records
              })
            })
          } else {
            addRole(params).then(res => {
              removeTab('list')
              this.getList()
              this.$successMsg('新增成功')
              getRoleList({
                pageNum: 1,
                pageSize: -1
              }).then(res => {
                this.dataList22 = res.data.records
              })
            })
          }
        }
      })
    },

    // 设置权限 - 获取列表
    setMenuRole(row) {
      console.log(row)
      this.$refs.tabPage.addTab({
        activeKey: 'detail',
        key: 'detail',
        label: '设置权限',
        triggerEvent: () => {
          this.$nextTick(() => {
            this.editId = row.adminRoleId
            function aaa(list) {
              for (var item of list) {
                if (item.type == 3) {
                  item.tiling = true
                  item.labelWidthNum = 115
                }
                if (item.children && item.children.length) {
                  aaa(item.children)
                }
              }
            }
            getMenuList({
              adminUserId: this.userid,
              parentAdminRoleId: row.parentRoleId
            }).then(res => {
              aaa(res.data)
              this.menuRoleList = res.data
            })
            getMenuRoleIds({ adminRoleId: row.adminRoleId }).then(res => {
              this.$refs.tree.setCheckedKeys(res.data)
            })
          })
        },
        closeEvent: () => {}
      })
    },

    // 设置权限 - 提交数据
    submitRoleForm(removeTab) {
      let params = {
        adminModuleIds: this.$refs.tree.getCheckedKeys(),
        adminModuleIds2: this.$refs.tree.getHalfCheckedKeys(),
        adminRoleId: this.editId
      }
      setMenuRole(params).then(res => {
        removeTab('list')
        this.getList()
        this.$successMsg()
      })
    }
  }
}
</script>

<style lang="scss">
.tree-dialog {
  .el-dialog__body {
    padding: 20px;

    .el-tree {
      max-height: calc(100vh - 140px - 54px - 70px);
      overflow-y: scroll;
      padding: 0 30px;

      > .el-tree-node {
        padding: 15px 0;
        border: 1px dashed #ddd;
        margin-bottom: 15px;
        border-radius: 10px;
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>