dy-admin-manager/src/views/categroyManager/insideSetting/adminOperation.vue

<template>
  <div class='m-container'>
    <h2>
      <el-page-header @back="onCancel"
                      :content="(pageType == 'create' ? '添加' : '修改') + '角色'"></el-page-header>
    </h2>
    <div class="m-core">
      <el-form ref="form"
               label-width="120px"
               style="width: 500px">
        <el-form-item label="角色名称"
                      prop="roleName">
          <el-input v-model.trim="result.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input type="textarea"
                    v-model.trim="result.roleDesc"></el-input>
        </el-form-item>
        <el-form-item label="搜索">
          <el-input style="width:210px"
                    v-model.trim="seachRoleValue"></el-input>
          <el-button style="margin-left: 10px"
                     type="danger"
                     @click="seachRoles">搜索</el-button>
          <el-button type="primary"
                     @click="onReSetRole">重置</el-button>
        </el-form-item>
        <el-form-item label="基本权限">
          <el-checkbox :indeterminate="isIndeterminate"
                       @change="onCheckAll"
                       v-model.trim="checkAll">全选</el-checkbox>

          <el-tree :data="data"
                   show-checkbox
                   node-key="id"
                   @check="onTreeCheck"
                   :filter-node-method="filterNode"
                   ref="tree"
                   accordion
                   highlight-current
                   :default-checked-keys="result.menuIds"
                   :props="defaultProps">
            <div slot-scope="{ node, data }">
              {{ node.label }}
              <el-tag v-if="data.type == 1"
                      size="mini"
                      effect="dark">按钮</el-tag>
            </div>
          </el-tree>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit"
                     type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
          <el-button @click="onReSet('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getUserRole } from '@/api/systemManage'
import store from '@/store'
import { getSilder } from '@/api/silder'
import { roleGetMenus, getRoleInfo, roleUpdate, roleAdd } from '@/api/systemManage'
export default {
  name: 'adminOperation',
  data () {
    return {
      organId: null,
      pageType: null,
      id: null,
      page: null,
      isIndeterminate: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      result: {
        roleName: null,
        roleDesc: null,
      },
      checkAll: false,
      splice: [],
      silderList: [],
      allChildIds: [], // 所有子编号
      slideCount: 0,
      seachRoleValue: '' //权限搜索字段
    }
  },
  mounted () {
    this.onReSet()
    this.init()
  },
  activated () {
    this.onReSet()
    this.init()
  },
  methods: {
    init () {
      this.pageType = this.$route.query.type
      this.id = this.$route.query.id
      this.page = this.$route.query.page
      if (this.pageType == 'create') {

      }
      this.lookSilder()
    },
    onSubmit () {
      let tempIds = this.$refs.tree.getCheckedKeys()
      let halfIds = this.$refs.tree.getHalfCheckedKeys()
      let allIds = [...tempIds, ...halfIds]
      if (this.pageType == 'update') {
        roleUpdate({
          id: this.id,
          organId: this.organId,
          roleDesc: this.result.roleDesc,
          roleName: this.result.roleName,
          menuIds: allIds
        }).then(res => {
          this.messageTips('修改', res)
        })
      } else if (this.pageType == 'create') {
        roleAdd({
          organId: this.organId,
          roleDesc: this.result.roleDesc,
          roleName: this.result.roleName,
          menuIds: allIds
        }).then(res => {
          this.messageTips('添加', res)
        })
      }
    },
    messageTips (title, res) {
      if (res.code == 200) {
        this.$message.success('修改成功')
        this.$router.push({ path: '/specialSetup/adminManager', query: { page: this.page } })
      } else {
        this.$message.error(res.msg)
      }
    },
    async lookSilder () {
      let silderList = await getSilder({ hid: 0 })
      let tempData = []
      if (silderList.code == 200) {
        this.silderList = silderList.data
        tempData = this.setTableData(silderList.data)

        this.data = tempData
        console.log(this.data)
      }
      // console.log(this.pageType)
      if (this.pageType == 'update') {
        let roleInfo = await getRoleInfo({ id: this.id })
        if (roleInfo.code == 200) {
          let roleData = roleInfo.data
          // 是否是全部选中
          this.checkAll = roleData.menuIds.length >= this.slideCount
          // 是否是半选
          this.isIndeterminate = roleData.menuIds.length > 0 && roleData.menuIds.length < this.slideCount
          let tSplice = this.getParent(roleData.menuIds, tempData)
          roleData.menuIds = tSplice
          this.result = roleData
        }
      } else {
        this.onReSet()
      }
    },
    onTreeCheck () {
      let checkTree = this.$refs.tree.getCheckedKeys()
      this.checkAll = checkTree.length >= this.slideCount
      this.isIndeterminate = checkTree.length > 0 && checkTree.length < this.slideCount
    },
    onCheckAll (val) {
      if (val) {
        // 先去掉半选
        this.isIndeterminate = false
        this.$refs.tree.setCheckedNodes(this.data)
      } else {
        this.$refs.tree.setCheckedNodes([])
      }
    },

    //递归获取到所有的为子级的ID
    getParent (checkIds, data) {
      let removeIds = JSON.parse(JSON.stringify(checkIds))
      this.getAllChildIds(data)
      let tempAllChildIds = this.allChildIds
      for (let i = checkIds.length; i > 0; i--) {
        if (!tempAllChildIds.includes(checkIds[i - 1])) {
          removeIds.splice(i - 1, 1)
        }
      }
      return removeIds
    },
    getAllChildIds (data) {
      // 获取所有最子集编号
      let child = this.allChildIds
      let tempList = []
      data.forEach((item, index) => {
        let temp = []
        if (item.children && item.children.length > 0) {
          temp = this.getAllChildIds(item.children)
        } else {
          child.push(item.id)
        }
      })
    },
    setTableData (result) {
      let list = []
      list = result.map(res => {
        let tempList = {}
        tempList = {
          id: res.id,
          name: res.name,
          label: res.name,
          type: res.type,
          path: res.path,
          permission: res.permission,
          icon: res.icon,
          parentId: res.parentId
        }
        this.slideCount++
        if (res.sysMenus && res.sysMenus.length > 0) {
          tempList.children = this.setTableData(res.sysMenus)
        }
        return tempList
      })
      return list
    },
    onReSet () {
      this.$refs.tree.setCheckedNodes([])
      this.result = {
        roleName: null,
        roleDesc: null,
      }
      this.checkAll = false
    },
    onCancel () {
      this.$router.push({
        path: '/specialSetup/adminManager',
        query: {
          page: this.$route.query.page
        }
      })
    },
    seachRoles () {
       this.$refs.tree.filter(this.seachRoleValue);
    },
    filterNode(value, data) {
      console.log(data)
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
    onReSetRole () {
      this.seachRoleValue = ''
      this.data = this.setTableData(this.silderList)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
.el-row {
  margin-top: 40px;
}
.el-col {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-right: 50%;
}
.el-input-group {
  width: 200px;
  margin: 0 20px;
}
/deep/.el-tree-node__content {
  height: 40px !important;
}
</style>