zfire-newmall-admin/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">
              </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="name"></el-table-column>
                <el-table-column align="center" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" @click="setMenuRole(scope.row.adminRoleId)">设置权限</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" :rules="addFormRules" label-position="left" label-width="100px">
          <el-form-item label="角色名" prop="name">
            <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <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;">
        <zj-tree :data="menuRoleList" show-checkbox :default-expand-all="true" node-key="moduleId" ref="tree"
          highlight-current :props="defaultProps">
        </zj-tree>
        <div slot="footer" class="dialog-footer">
          <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 } 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',
      addForm: {
        name: '', // 角色名
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入角色名', trigger: 'blur' }
        ],
      },
      menuRoleList: [],
      defaultProps: {
        children: 'children',
        label: 'moduleName'
      }
    }
  },
  computed: {
    ...mapGetters([
      'userid',
      'name'
    ])
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      getRoleList(params).then(res => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      })
    },

    // 更改每页数量
    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 = {
                name: res.data.name
              }
            })
          }
        },
        closeEvent: () => {
        }
      })
    },

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

    // 设置权限 - 获取列表
    setMenuRole(id) {
      this.$refs.tabPage.addTab({
        activeKey: "detail",
        key: "detail",
        label: "设置权限",
        triggerEvent: () => {
          this.$nextTick(() => {
            this.editId = id;
            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 }).then(res => {
              aaa(res.data);
              this.menuRoleList = res.data
            })
            getMenuRoleIds({ adminRoleId: id }).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;
      }
    }
  }
}
</style>