init

2023-10-18 14:44:29 +08:00
commit e6aabd4da9
153 changed files with 20976 additions and 0 deletions
--- a/src/pages/modules/systemmanage/role.vue
+++ b/src/pages/modules/systemmanage/role.vue
@@ -0,0 +1,384 @@
+<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()
+  },
+  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>