apt-nl-new/src/pages/modules/systemmanage/role.vue

<template>
<div class="main-container">
  <div class="right_side">
    <div class="buttons_wrapper">
      <div class="row">
        <button class="button button--primary" @click="showDialog('1')">新增角色</button>
      </div>
    </div>
    <div class="row_2">
      <div class="grid_wrapper">
        <table>
          <tr>
            <!-- <th>选中</th> -->
            <th width="20%">角色名称</th>
            <th width="20%">描述</th>
            <th width="30%">创建日期</th>
            <th width="30%">操作</th>
          </tr>
          <tr v-for="(e, i) in datalist" :key="i" :class="{'tr_selected': pkId === e.roleId}" @click="toCheck(e)">
            <!-- <td>
              <div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
            </td> -->
            <td>{{ e.name }}</td>
            <td>{{ e.remark }}</td>
            <td>{{ e.createTime }}</td>
            <td>
              <div class="row">
                <button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
                <button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="tree_wrapper">
        <div class="tree_header">
          <span>角色名称</span>
          <button class="button button--primary grid_button button1" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave">保存</button>
        </div>
        <div class="tree_body_container">
          <el-tree
            :data="tree"
            show-checkbox
            default-expand-all
            node-key="menuId"
            :default-checked-keys=checkedKeys
            ref="tree"
            highlight-current
            :props="defaultProps">
          </el-tree>
        </div>
      </div>
    </div>
    <!-- <div class="row_2">
      <div v-for="e in tree" :key="e.menuId">
        <div>{{e.title+e.menuId}}</div>
        <div v-for="el in e.children" :key="el.menuId">
          <div>{{el.title+el.menuId}}</div>
          <div v-for="ell in el.children" :key="ell.menuId">
            <div>{{ell.title+ell.menuId}}</div>
          </div>
        </div>
      </div>
    </div> -->
    <jxDialog
    ref="child"
    :title="title"
    :type="type"
    :unclick="unclick"
    @toSure="toSureDialog"
    @toCancle="toCancle"
    >
    <div v-if="type === '1' || type === '2'" class="form_wraper">
      <div class="form">
        <div class="form_item">
          <div class="form_item__label"><i>*</i>角色名称</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal">
          </div>
        </div>
      </div>
      <div class="form">
        <div class="form_item allwidth">
          <div class="form_item__label">备注</div>
          <div class="form_item__content">
            <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
          </div>
        </div>
      </div>
    </div>
    <div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
    </jxDialog>
  </div>
  <vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
</div>
</template>

<script>
import jxDialog from '@components/dialog.vue'
import { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
export default {
  components: {
    jxDialog
  },
  data () {
    return {
      datalist: [],
      active: false,
      type: '',
      title: '',
      rolename: '',
      remark: '',
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      checkedKeys: [],
      pkObj: {},
      pkId: '',
      unclick: false,
      disabled: false,
      visible: false,
      layout: 'normal',
      input: null,
      keyoptions: {
        useKbEvents: false,
        preventClickEvent: false
      }
    }
  },
  watch: {
    type (val) {
      switch (val) {
        case '1':
          this.title = '添加角色'
          break
        case '2':
          this.title = '修改角色'
          break
        case '3':
          this.title = ''
          break
        default:
          this.title = ''
      }
    },
    rolename (val) {
      if ((this.type === '1' || this.type === '2') && val === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    }
  },
  created () {
    this._sysRoleQuery()
    this._menuQuery()
  },
  mounted () {
    // document.getElementById('body-conatiner').style.backgroundImage = '../../../images/new/bg.png'
    document.getElementById('body-conatiner').style.marginTop = '10px'
  },
  methods: {
    async _sysRoleQuery () {
      let res = await sysRoleQuery('0', '100')
      this.pkId = ''
      this.pkObj = {}
      this.datalist = [...res]
    },
    async _menuQuery () {
      let res = await menuQuery()
      this.tree = [...res]
    },
    showDialog (type, e) {
      this.type = type
      this.$refs.child.active = true
      switch (type) {
        case '1':
          this.rolename = ''
          this.remark = ''
          this.unclick = true
          break
        case '2':
          this.pkObj = e
          this.rolename = e.name
          this.remark = e.remark
          if (this.rolename === '') {
            this.unclick = true
          } else {
            this.unclick = false
          }
          break
        case '3':
          this.pkObj = e
          this.unclick = false
          break
      }
    },
    toSureDialog (type) {
      switch (type) {
        case '1':
          this._sysRoleAdd()
          break
        case '2':
          this._sysRoleEdit()
          break
        case '3':
          this._sysRoleDelete()
          break
      }
      this.hide()
    },
    toCancle () {
      this.hide()
    },
    async _sysRoleAdd () {
      this.$refs.child.disabled = true
      if (!this.rolename) {
        this.toast('角色名称不能为空')
        this.$refs.child.disabled = false
        return
      }
      try {
        let res = await sysRoleAdd(this.rolename, this.remark)
        if (res.code === '1') {
          this._sysRoleQuery()
        }
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _sysRoleEdit () {
      this.$refs.child.disabled = true
      if (!this.rolename) {
        this.toast('角色名称不能为空')
        this.$refs.child.disabled = false
        return
      }
      try {
        let res = await sysRoleEdit(this.pkObj.roleId, this.rolename, this.remark)
        if (res.code === '1') {
          this._sysRoleQuery()
        }
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _sysRoleDelete () {
      this.$refs.child.disabled = true
      try {
        let res = await sysRoleDelete([this.pkObj.roleId])
        if (res.code === '1') {
          this._sysRoleQuery()
        }
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _sysRoleMenu (arr, arr1) {
      this.disabled = true
      try {
        let res = await sysRoleMenu(this.pkId, arr, arr1)
        if (res.code === '1') {
          this.toast(res.desc)
          this.pkId = ''
          this.checkedKeys = []
          this.tree.map(e => {
            this.$refs.tree.setChecked(e, false, true)
          })
          this._sysRoleQuery()
        } else {
          this.toast(res.desc)
        }
        this.disabled = false
      } catch (e) {
        this.disabled = false
      }
    },
    toSave () {
      if (!this.pkId) {
        return
      }
      let arr1 = this.$refs.tree.getCheckedKeys()
      let arr2 = this.$refs.tree.getHalfCheckedKeys()
      arr2.map((e, i) => {
        if (e === this.tree[0].menuId) {
          arr2.splice(i, 1)
        }
      })
      if (arr1.length === 0) {
        return
      }
      let arr3 = arr2.concat(arr1)
      let arr4 = []
      arr3.map(el => {
        arr4.push({menuId: el})
      })
      this._sysRoleMenu(arr4, arr1)
    },
    toCheck (e) {
      this.pkId = this.pkId === e.roleId ? '' : e.roleId
      this.checkedKeys = this.pkId === e.roleId ? e.menus1 : []
      this.tree.map(e => {
        this.$refs.tree.setChecked(e, false, true)
      })
      if (this.pkId === e.roleId) {
        this.checkedKeys = e.menus1
      } else {
        this.checkedKeys = []
      }
    },
    show (e) {
      this.input = e.target
      this.layout = e.target.dataset.layout
      if (!this.visible) {
        this.visible = true
      }
    },
    hide () {
      this.visible = false
    },
    accept () {
      this.hide()
    },
    next () {
      let inputs = document.querySelectorAll('input')
      let found = false;
      [].forEach.call(inputs, (item, i) => {
        if (!found && item === this.input && i < inputs.length - 1) {
          found = true
          this.$nextTick(() => {
            inputs[i + 1].focus()
          })
        }
      })
      if (!found) {
        this.input.blur()
        this.hide()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.row_2
  _fj()
  _wh(100%, calc(100% - 50px))
.grid_wrapper
  _wh(calc(50% - 10px), 100%)
  overflow-y auto
.grid_wrapper table td
  white-space normal
.tree_wrapper
  _wh(calc(50% - 10px), 100%)
  overflow-y auto
.tree_header
  position sticky
  top -1px
  z-index 99
  background #d7d7d7
  _font(14px, 23px, #323232, bold, center)
  padding 12px 10px
.button1
  position absolute
  right 10px
  top 50%
  transform translateY(-50%)
.tree_body_container
  height calc(100% - 47px)
  padding 12px 10px
.grid_wrapper table .row .button
  margin 5px
</style>