菜单授权 角色授权页面

ebc-middle-platform/src/modules/authorization/menu-authorization.scss

@@ -0,0 +1,26 @@
.authorization-container{
  display:flex;
  justify-content: center;
  margin:20px;
  .left-container{
    width:400px;
    height: 700px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    margin-right:20px;
    .title{
      padding:0 20px;
      line-height: 48px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    }
    .table-content{
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      padding:0 20px
    }
  }
  .transfer-list{
    width: 400px;
    height: 700px;
  }
}

ebc-middle-platform/src/modules/authorization/menu-authorization.vue

@@ -1,45 +1,44 @@
<template>
  <div class="authorization-container" style="display:flex;margin:20px">
    <div style="width:400px;border: 1px solid rgba(0, 0, 0, 0.09);margin-right:20px">
      <div>
  <div class="authorization-container">
    <div class="left-container">
      <div class="title">
        <div>角色列表</div>
      </div>
      <div style="flex-direction: column;
    justify-content: space-between;
    height: 100%;padding:0 20px">
      <div class="table-content">
        <t-table :data="table.data" highlight-current-row @current-change="handleCurrentChange">
          <t-table-column prop="name" label="角色名称"></t-table-column>
          <t-table-column prop="number" label="角色编码"></t-table-column>
        </t-table>
        <div>
          <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
                   :page-size.sync="table.pager.size"
                   class="px-24 pt-16 float-right"
                   show-elevator show-sizer
                   @on-size-change="onSizeChange"
                   @on-change="onPagerChange">
          </t-pager>
        </div>
        <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
                 :page-size.sync="table.pager.size"
                 class="px-24 pt-16 float-right"
                 show-elevator
                 @on-size-change="onSizeChange"
                 @on-change="onPagerChange">
        </t-pager>
      </div>
    </div>
    <div>
    <div class="transfer-container">
      <t-transfer
        ref="transfer"
        :data="dataTable"
        :selected-keys="targetKeysTable"
        :operations="['向左移动','向右移动']"
        filterable
        :operations="['← 绑定','解绑 →']"
        :titles="['已关联菜单','可关联菜单']"
        @change="changeTransfer"
      >
        <div slot="listBodyLeft" slot-scope="tableLeft">
          <t-tree :multiple="true"
          <t-tree ref="leftTree" :multiple="true"
                  :with-ancestors="true"
                  :node-data="tableLeft"
                  :with-descendants="true"
                  :node-data="tableLeft.data" @select="changeTree"
          ></t-tree>
        </div>
        <div slot="listBodyRight" slot-scope="tableRight">
          <t-tree :multiple="true"
                  :with-ancestors="true"
                  :node-data="tableRight.data"
                  :with-descendants="true"
                  :node-data="tableRight.data" @select="changeTree"
          ></t-tree>
        </div>
      </t-transfer>
@@ -47,6 +46,7 @@
  </div>
</template>
<script>
import './menu-authorization.scss'
export default {
  data() {
    return {
@@ -71,38 +71,188 @@ export default {
          total: 0
        }
      },
      dataTable: this.getMockData(),
      targetKeysTable: []
      dataTable: [
        {
          key: '1',
          label: '地图监控',
          title: '地图监控',
          id: '1'
        },
        {
          key: '2',
          label: '智能报警',
          title: '智能报警',
          value: 'node_2',
          id: '2'
        },
        {
          key: '3',
          label: '统计报表',
          title: '统计报表',
          value: 'node_5',
          id: '3'
        },
        {
          key: '4',
          label: '轨迹分析',
          title: '轨迹分析',
          value: 'node_3',
          id: '4',
          pid: '3'
        },
        {
          key: '5',
          label: '作业考勤',
          title: '作业考勤',
          value: 'node_4',
          id: '5',
          pid: '3'
        },
        {
          key: '6',
          label: '系统管理',
          title: '系统管理',
          id: '6'
        },
        {
          key: '7',
          label: '终端管理',
          title: '终端管理',
          id: '7',
          pid: '6'
        },
        {
          key: '8',
          label: '地图标记',
          title: '地图标记',
          pid: '3',
          id: '8'
        }
      ],
      targetKeysTable: [],
      copyData: [],
      removeData: []
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
    },
    getMockData: function() {
      let mockData = []
      for (let i = 0; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: '内容' + i,
          description: '描述' + i,
          disabled: Math.random() * 3 < 1
    changeTransfer(targetKeys, direction, moveKeys) {
      console.log('change', targetKeys, direction, moveKeys)
      if (this.copyData.length > 0) {
        // this.dataTable = this.dataTable.concat(this.copyData)
        // this.targetKeysTable.push(this.copyData.id)
        this.copyData.forEach(element => {
          this.dataTable.splice(element.index, 0, element)
        })
        this.copyData = []
      }
      if (this.removeData.length > 0) {
        console.log(this.removeData)
        this.removeData.forEach(element => {
          this.dataTable.splice(element.index, 1)
        })
        this.removeData = []
      }
      return mockData
      console.log(this.dataTable)
    },
    $_onCheckboxChange(selection) {
      let keysArray = []
      selection.forEach(item => {
        keysArray.push(item.key)
    changeTree(ids) {
      console.log(ids)
      var transferId = []
      ids.forEach(id => {
        console.log(this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children))
        if (this.$refs.leftTree.getNodeStateById(id).children && this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children)) {
          // 修改子节点的pid
          var includeFlag = true
          this.$refs.leftTree.getNodeStateById(id).children.forEach(elementChild => {
            // 不含在选中的ids
            if (ids.indexOf(elementChild) === -1) {
              includeFlag = false
              this.dataTable.forEach(elementChildTable => {
                if (elementChildTable.id === elementChild) {
                  if (elementChildTable.pid.indexOf('copy') === -1) {
                    elementChildTable.pid = 'copy' + elementChildTable.pid
                  }
                }
              })
            } else {
              this.dataTable.forEach(elementChildTable => {
                if (elementChildTable.id === elementChild) {
                  if (elementChildTable.pid.indexOf('copy') !== -1) {
                    elementChildTable.pid = elementChildTable.pid.slice(4)
                  }
                }
              })
            }
          })
          if (id.indexOf('copy') === -1) {
            var flag = false
            this.copyData.forEach(element => {
              if (element.id === 'copy' + id) {
                flag = true
              }
            })
            if (!flag) {
              var dataIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
                  dataIndex = index
                }
              })
              this.copyData.push({
                key: 'copy' + id,
                label: this.$refs.leftTree.getNodeStateById(id).label,
                title: this.$refs.leftTree.getNodeStateById(id).title,
                id: 'copy' + id,
                index: dataIndex
              })
            }
          } else {
            if (!includeFlag) {
              var includeIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
                  includeIndex = index
                }
              })
              this.removeData.push({
                key: id,
                label: this.$refs.leftTree.getNodeStateById(id).label,
                title: this.$refs.leftTree.getNodeStateById(id).title,
                id: id,
                index: includeIndex
              })
            }
          }
        }
        if (id.indexOf('copy') === -1) {
          transferId.push(id)
        } else {
          console.log(this.$refs.leftTree.getNodeStateById(id).children)
          if (!this.$refs.leftTree.getNodeStateById(id).children) {
            console.log(123213, id)
          }
        }
      })
      this.targetKeysTable = keysArray
      console.log(transferId)
      this.targetKeysTable = transferId
    },
    onPagerChange(page) {
    },
    onSizeChange(number) {
    },
    isContained (a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false
      // if (a.length < b.length) return false
      var aStr = a.toString()
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) !== -1) return true
      }
      return false
    }
  }
}

ebc-middle-platform/src/modules/authorization/role-authorization.vue

@@ -0,0 +1,159 @@
<template>
  <div class="authorization-container">
    <div class="left-container">
      <div class="title">
        <div>用户列表</div>
      </div>
      <div class="table-content">
        <t-table :data="table.data" highlight-current-row @current-change="handleCurrentChange">
          <t-table-column prop="name" label="姓名"></t-table-column>
          <t-table-column prop="number" label="员工编号"></t-table-column>
        </t-table>
        <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
                 :page-size.sync="table.pager.size"
                 class="px-24 pt-16 float-right"
                 show-elevator
                 @on-size-change="onSizeChange"
                 @on-change="onPagerChange">
        </t-pager>
      </div>
    </div>
    <div class="transfer-container">
      <t-transfer
        ref="transfer"
        :data="dataTable"
        :selected-keys="targetKeysTable"
        :operations="['← 绑定','解绑 →']"
        :titles="['已关联角色','可关联角色']"
        @change="changeTransfer"
      >
        <div slot="listBodyLeft" slot-scope="tableLeft">
          <t-table :data="tableLeft.data" size="sm" @selection-change="changeTable">
            <t-table-column type="selection" width="50"></t-table-column>
            <t-table-column prop="label" width="70" label="角色名称"></t-table-column>
            <t-table-column prop="description" width="70" label="角色编码"></t-table-column>
            <div slot="empty"></div>
          </t-table>
        </div>
        <div slot="listBodyRight" slot-scope="tableRight">
          <t-table :data="tableRight.data" size="sm" @selection-change="changeTable">
            <t-table-column type="selection" width="50"></t-table-column>
            <t-table-column prop="label" width="70" label="角色名称"></t-table-column>
            <t-table-column prop="description" width="70" label="角色编码"></t-table-column>
            <div slot="empty"></div>
          </t-table>
        </div>
      </t-transfer>
    </div>
  </div>
</template>
<script>
import './menu-authorization.scss'
export default {
  data() {
    return {
      table: {
        data: [
          {
            name: '张三',
            number: '108373'
          },
          {
            name: '张三',
            number: '108373'
          },
          {
            name: '张三',
            number: '108373'
          }
        ],
        pager: {
          currentPage: 1,
          size: 10,
          total: 0
        }
      },
      dataTable: [
        {
          key: '1',
          label: '超级管理员',
          description: 'superadmin'
        },
        {
          key: '2',
          label: '管理员1',
          description: 'admin1'
        },
        {
          key: '3',
          label: '管理员2',
          description: 'admin2'
        },
        {
          key: '4',
          label: '管理员3',
          description: 'admin3'
        },
        {
          key: '5',
          label: '运维人员1',
          description: 'operator1'
        },
        {
          key: '6',
          label: '运维人员2',
          description: 'operator2'
        },
        {
          key: '7',
          label: '检修人员',
          description: 'maintainer'
        },
        {
          key: '8',
          label: '救援人员1',
          description: 'rescuer1'
        },
        {
          key: '9',
          label: '救援人员2',
          description: 'rescuer2'
        }
      ],
      targetKeysTable: [],
      copyData: []
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
    },
    changeTransfer(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
    },
    changeTable(elements) {
      var ids = []
      elements.forEach(element => {
        ids.push(element.key)
      })
      console.log(ids)
      this.targetKeysTable = ids
    },
    onPagerChange(page) {
    },
    onSizeChange(number) {
    },
    isContained (a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false
      if (a.length < b.length) return false
      var aStr = a.toString()
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) == -1) return false
      }
      return true
    }
  }
}
</script>

ebc-middle-platform/static/conf/defaultConfig.js

@@ -11,7 +11,7 @@
const APP_DEFAULT_CONFIG = {
  primaryColor: '#147BD1', // primary color of ant design
  navTheme: 'dark', // theme for nav menu
  layout: 'sidemenu',
  layout: 'topmenu',
  sidebarOpen: true,
  fixedHeader: false,
  scrollHideHeader: false,