hyyfClient/src/views/SystemAdmin/AuthAdmin.vue

<template>
  <div class="box">
    <div class="box-content">
      <!-- input + button* 2 -->
      <div style="margin-bottom: 10px">
        <el-form :inline="true" label-width="80px">
          <el-form-item>
            <el-input v-model="keyword"  placeholder="请输入权限组名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="search" type="success">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogVisible = true">新增权限组</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
            :data="tableData"
            border
            :height="590 + 'px'">
          <el-table-column
              prop="id"
              label="权限组id">
          </el-table-column>
          <el-table-column
              prop="groupName"
              label="权限组名称">
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="warning"
                  @click="handleLimits(scope.row)">权限分配</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleUser(scope.row)">用户分配</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <table-footer
            :totals="total"
            :size="size"
            @sizeChange="sizeChange"
            @pageChange="pageChange"></table-footer>
      </div>
    </div>
    <!--    // 新增-->
    <el-dialog
        :title="showType ? '编辑权限组' : '新增权限组'"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="权限组名称">
            <el-input v-model="form.groupName"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="showType" type="primary" @click="setUpdate">更 新</el-button>
                <el-button v-else type="primary" @click="onSubmit">新 增</el-button>
              </span>
    </el-dialog>
    <!-- 权限分配   -->
    <a-modal
        title="权限分配"
        :width="600"
        :visible="dialogLimits"
        @ok="limitSave"
        ok-text="确认"
        cancel-text="取消"
        @cancel="dialogLimits = false"
        :destroyOnClose="true">
      <a-tree
          v-model="checkedKeys"
          multiple
          checkable
          :auto-expand-parent="autoExpandParent"
          :expanded-keys="expandedKeys"
          :tree-data="menuTreeData"
          :selected-keys="selectedKeys"
          :replaceFields="replaceFields"
          @expand="onExpand"
          @check="onCheck"
      />
    </a-modal>
<!--    <el-dialog-->
<!--        title="权限分配"-->
<!--        :visible.sync="dialogLimits"-->
<!--        width="50%">-->
<!--      <div>-->
<!--        <el-tree-->
<!--            v-if="dialogLimits"-->
<!--            :data="limitList"-->
<!--            show-checkbox-->
<!--            node-key="id"-->
<!--            default-expand-all-->
<!--            :default-checked-keys="defaultList"-->
<!--            :props="defaultProps"-->
<!--            @check-change="handleCheckChange"-->
<!--            ref="tree">-->
<!--        </el-tree>-->
<!--      </div>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogLimits = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="limitSave">保存</el-button>-->
<!--              </span>-->
<!--    </el-dialog>-->
    <el-dialog
        title="用户分配"
        :visible.sync="dialogUsers"
        width="50%">
      <div>
        <el-table
            :data="userList"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="用户ID">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="用户姓名">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogUsers = false">取 消</el-button>
                <el-button type="primary" @click="userSave">保存</el-button>
              </span>
    </el-dialog>
  </div>
</template>

<script>
import { Tree } from 'ant-design-vue';
import TableFooter from "../../components/TableFooter";
import { getMenu, getAuth, delAuth, addAuth, editAuth, getMenuByGroup, saveGroupMenu, getAcountByGroup, saveAccountGroup, getUserList } from '../../utils/api';
export default {
  name: "AuthAdmin",
  components: {
    TableFooter,
    ATree: Tree
  },
  data() {
    return {
      tableData: [],
      showType: false,
      dialogVisible: false,
      form: {
        id: '',
        groupName: '',
        remark: '',
      },
      dialogLimits: false,
      // 权限分配list
      limitList: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      autoExpandParent: true,
      // 默认选择的参数
      defaultList: [],
      expandedKeys: [],
      checkedKeys: [],
      replaceFields: {
        key: 'id'
      },
      keyword: '',
      total: 0,
      size: 20,
      pageNum: 1,
      selectId: '',
      // 用户列表
      userList: [],
      dialogUsers: false,
      userSelect: [],
      leastChilds: [],
      commitKeys: [],
      selectedKeys: [],
      menuTreeData: [],
    }
  },
  methods: {
    // 搜索
    search() {
      this.init();
    },
    // 修改size
    sizeChange(val) {
      this.size = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum= val;
      this.init();
    },
    handleEdit(data) {
      this.showType = true;
      this.dialogVisible = true;
      this.form.remark = data.remark;
      this.form.groupName = data.groupName;
      this.form.id = data.id;
    },
    // 用户分配
    handleUser(data) {
      this.dialogUsers = true;
      this.selectId = data.id;
      getAcountByGroup({groupId: data.id})
          .then(res => {
            if(res.code === 10006) {
              this.userSelect = [];
              this.$nextTick(() => {
                this.$refs.multipleTable.clearSelection();
                this.$forceUpdate();
              });
            } else {
              let arr = res.data.split(',');
              console.log(arr);
              this.$nextTick(() => {
                this.$refs.multipleTable.clearSelection();
                for (let key in this.userList) {
                  for(let i in arr) {
                    if(this.userList[key]['id'] == arr[i]) {
                      this.$refs.multipleTable.toggleRowSelection(this.userList[key], true);
                    }
                  }
                }
              })
            }
          })
    },
    // 用户分配选择
    handleSelectionChange(val) {
      this.userSelect = val;
    },
    // 用户分配保存
    userSave() {
      let users = [];
      this.userSelect.forEach(item => {
        users.push(item.id);
      });
      let str = users.join(',');
      saveAccountGroup({accountId: str, groupIds: this.selectId})
          .then(res => {
            if(res.code === 10001) {
              this.$message.success(res.message);
            } else {
              this.userSelect = [];
              this.selectId = '';
              this.$message(res.message);
            }
          });
      this.dialogUsers = false;
    },
    // 新增角色
    onSubmit() {
      let params = {
        groupName: this.form.groupName,
        remark: this.form.remark
      };
      addAuth(params)
          .then(res => {
            if(res.code === 10000) {
              this.init();
              this.$message.success(res.message);
            } else {
              this.$message.error(res.message);
            }
            this.dialogVisible = false;
            this.reset();
          })
    },
    // handleCheckChange() {
    //   // console.log(data, ls, lg)
    //   this.selectList = [];
    //   console.log(this.$refs.tree.getCheckedKeys());
    //   this.selectList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
    // },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    onCheck(checkedKeys, info) {
      this.checkedKeys = checkedKeys;
      this.commitKeys = checkedKeys.concat(info.halfCheckedKeys)
      console.log(this.commitKeys);
    },
    pickCheckedKeys(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.leastChilds.includes(data[i])) {
          this.checkedKeys.push(data[i])
        }
      }
    },
    onSelect(selectedKeys) {
      this.selectedKeys = selectedKeys
    },
    // 权限分配
    handleLimits(data) {
      this.dialogLimits = true;
      this.selectId = data.id;
      this.defaultList = [];
      getMenuByGroup({groupId: data.id})
          .then(res => {
            let arr;
            if(res.code === 10005) {
              arr = [];
            } else {
              arr = res.data.split(',');
            }
            this.defaultList = arr.map(Number);
            this.pickCheckedKeys(this.defaultList);
            this.selectList = this.defaultList;
          })
    },
    // 权限分配保存
    limitSave() {
      // this.selectList = this.$refs.tree.getCheckedKeys();
      let menuIds;
      if(this.commitKeys.length > 0) {
        menuIds = this.commitKeys.join(',');
      } else {
        menuIds = '';
      }
      saveGroupMenu( {groupId: this.selectId, menuIds: menuIds})
          .then(res => {
            if(res.code === 10001) {
              this.$message.success(res.message);
            }
            this.selectId = '';
            this.dialogLimits = false;
            this.selectList = [];
          });
    },
    init() {
      // 后端分页
      let params = {
        pageNum: this.pageNum,
        pageSize: this.size,
        searchStr: this.keyword
      };
      getAuth(params)
          .then(res => {
            this.tableData = res.records;
            this.total = res.total;
          })
    },
    // 重置
    reset(){
      this.form.id = '';
      this.form.groupName = '';
      this.form.remark = '';
      this.pageNum = 1;
      this.keyword = '';
      this.showType = false;
    },
    // 更新
    setUpdate() {
      let params = {
        groupName: this.form.groupName,
        remark: this.form.remark,
        id: this.form.id
      };
      editAuth(params)
          .then(res => {
            if(res.code ===  10000) {
              this.init();
              this.$message.success(res.message);
            }
            this.dialogVisible = false;
            this.reset();
          });
    },
    // 删除
    del(data) {
      this.$confirm('此操作将永久删除批量删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAuth({groupId: data.id})
            .then(res => {
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message);
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 菜单列表
    authInit() {
      getMenu().then(res => {
            if(res.code === 10000) {
              this.menuTreeData = res.data;
              this.getLeastChilds(res.data)
              this.menuTreeData.forEach(item => {
                this.expandedKeys.push(item.id)
              })
              // this.expandedMenuKeys(this.roleEntity)
            }
          })
    },
    getLeastChilds(data) {
      for (let i = 0; i < data.length; i++) {
        this.pushLeastChilds(data[i])
      }
    },
    pushLeastChilds(e) {
      if (e.children.length > 0) {
        this.getLeastChilds(e.children)
        return
      }
      this.leastChilds.push(e.id)
    },
    // 用户列表
    userInit() {
      let params = {
        pageNum: 1,
        pageSize: 200,
        searchStr: ''
      };
      getUserList(params)
          .then(res => {
            if(res.code === 10001) {
              this.userList = res.data;
            }
          });
    }
  },
  mounted() {
    this.init();
    this.authInit();
    this.userInit();
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>