wms / wms4 · Files

<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width=650
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">

    <a-tabs v-model="activeKey">

      <a-tab-pane key="1" tab="菜单权限">
        <a-form>
          <a-form-item label='所拥有的权限'>
            <a-tree
              checkable
              @check="onCheck"
              :checkedKeys="checkedKeys"
              :treeData="treeData"
              @expand="onExpand"
              @select="onTreeNodeSelect"
              :selectedKeys="selectedKeys"

              :expandedKeys="expandedKeys"

              :checkStrictly="checkStrictly">
              <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">

                {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>

              </span>
            </a-tree>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="数据权限" force-render>
        <a-form>
          <a-form-item label='所拥有的权限'>
            <a-tree
              checkable

              @check="dataOnCheck"
              :checkedKeys="dataCheckedKeys"
              :treeData="dataTreeData"
              @expand="dataOnExpand"
              :selectedKeys="dataSelectedKeys"
              :expandedKeys="dataExpandedKeys"
              :checkStrictly="dataCheckStrictly">

              <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
                {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
              </span>
            </a-tree>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>

    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>

          树操作

          <a-icon type="up" />

        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>

      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存
      </a-button>

      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
    </div>

    <role-datarule-modal ref="datarule"></role-datarule-modal>

  </a-drawer>

</template>
<script>

import { queryRolePermission, queryTreeListForRole, saveRolePermission } from '@/api/api'

import RoleDataruleModal from './RoleDataruleModal.vue'

export default {

  name: 'RoleModal',

  components: {
    RoleDataruleModal
  },
  data() {
    return {

      roleId: '',

      title: '角色权限配置',
      visible: false,
      loading: false,
      activeKey: '1',

      treeData: [],
      defaultCheckedKeys: [],

      selectedKeys: [],

      checkedKeys: [],

      expandedKeys: [],

      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,

      dataTreeData: [],
      dataDefaultCheckedKeys: [],
      dataSelectedKeys: [],
      dataCheckedKeys: [],
      dataExpandedKeys: [],
      dataAllTreeKeys: [],
      dataAutoExpandParent: true,
      dataCheckStrictly: true,

    }
  },
  methods: {
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
      this.$refs.datarule.show(this.selectedKeys[0], this.roleId)

    },

    onCheck(o) {
      if (this.checkStrictly) {

        this.checkedKeys = o.checked

      } else {
        this.checkedKeys = o

      }
    },

    dataOnCheck(o) {
      if (this.dataCheckStrictly) {
        this.dataCheckedKeys = o.checked

      } else {

        this.dataCheckedKeys = o

      }
    },

    show(roleId) {
      this.roleId = roleId

      this.visible = true

    },
    close() {
      this.reset()

      this.$emit('close')
      this.visible = false

    },
    onExpand(expandedKeys) {

      this.expandedKeys = expandedKeys

      this.autoExpandParent = false
    },

    dataOnExpand(expandedKeys) {
      this.dataExpandedKeys = expandedKeys
      this.dataAutoExpandParent = false

    },

    reset() {

      this.expandedKeys = []
      this.dataExpandedKeys = []

      this.checkedKeys = []

      this.dataCheckedKeys = []

      this.defaultCheckedKeys = []

      this.dataDefaultCheckedKeys = []

      this.loading = false
    },
    expandAll() {

      let activeKey = this.activeKey
      if (activeKey === '1') {

        this.expandedKeys = this.allTreeKeys

      } else if (activeKey === '2') {

        this.dataExpandedKeys = this.dataAllTreeKeys

      }

    },
    closeAll() {

      let activeKey = this.activeKey
      if (activeKey === '1') {

        this.expandedKeys = []

      } else if (activeKey === '2') {

        this.dataExpandedKeys = []

      }

    },
    checkALL() {

      let activeKey = this.activeKey
      if (activeKey === '1') {
        this.checkedKeys = this.allTreeKeys
      } else if (activeKey === '2') {

        this.dataCheckedKeys = this.dataAllTreeKeys

      }

    },
    cancelCheckALL() {

      let activeKey = this.activeKey
      if (activeKey === '1') {
        this.checkedKeys = []
      } else if (activeKey === '2') {

        this.dataCheckedKeys = []

      }

    },
    switchCheckStrictly(v) {

      let activeKey = this.activeKey

      if (v === 1) {

        if (activeKey === '1') {
          this.checkStrictly = false
        } else if (activeKey === '2') {

          this.dataCheckStrictly = false

        }

      } else if (v === 2) {

        if (activeKey === '1') {
          this.checkStrictly = true
        } else if (activeKey === '2') {

          this.dataCheckStrictly = true

        }

      }
    },

    handleCancel() {
      this.close()
    },
    handleSubmit(exit) {

      let that = this

      let params = {
        roleId: that.roleId,

        permissionIds: that.checkedKeys.join(','),

        lastPermissionIds: that.defaultCheckedKeys.join(','),
        dataPermissionIds: that.dataCheckedKeys.join(','),
        dataLastPermissionIds: that.dataDefaultCheckedKeys.join(',')

      }
      that.loading = true

      saveRolePermission(params).then((res) => {
        if (res.success) {

          that.$message.success(res.message)
          that.loading = false

          if (exit) {
            that.close()
          }
        } else {

          that.$message.error(res.message)
          that.loading = false

          if (exit) {
            that.close()
          }
        }

        this.loadData()

      })
    },
    loadData() {
      queryTreeListForRole().then((res) => {
        this.treeData = res.result.treeList

        this.dataTreeData = res.result.dataTreeList

        this.allTreeKeys = res.result.ids

        this.dataAllTreeKeys = res.result.dataIds

        queryRolePermission({ roleId: this.roleId }).then((res) => {

          this.checkedKeys = [...res.result.permissionIds]
          this.defaultCheckedKeys = [...res.result.permissionIds]

          this.dataCheckedKeys = [...res.result.dataPermissionIds]
          this.dataDefaultCheckedKeys = [...res.result.dataPermissionIds]
          //this.expandedKeys = this.allTreeKeys 注释为了加载数据后，控件不展开

        })
      })

      /*queryDataTreeListForRole().then((res) => {

        this.dataTreeData = res.result.treeList
        this.dataAllTreeKeys = res.result.ids

        queryRoleDataPermission({ roleId: this.roleId }).then((res) => {

          this.dataCheckedKeys = [...res.result]
          this.dataDefaultCheckedKeys = [...res.result]
          //this.expandedKeys = this.dataAllTreeKeys 注释为了加载数据后，控件不展开

        })
      })*/

    }
  },

  watch: {

    visible() {

      if (this.visible) {

        this.loadData()

      }
    }
  }

}

</script>
<style lang="less" scoped>

.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

</style>