roleAuthSet.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <view class="auth_page">
  3. <view class="auth_list">
  4. <view class="leve_0" v-if="authList.length" v-for="(item,index) in authList" :key="item.id">
  5. <view class="leve_1">
  6. <label @click="checkParent(item)">
  7. <checkbox :value="String(item.id)" :checked="item.checked" /> {{item.name}}
  8. </label>
  9. </view>
  10. <view>
  11. <checkbox-group :data-pid="String(item.id)" class="leve_2" @change="checkboxChange">
  12. <label class="leve_3" v-for="citem in item.children" :key="citem.id">
  13. <checkbox :value="String(citem.id)" :checked="citem.checked" />
  14. {{citem.name}}
  15. </label>
  16. </checkbox-group>
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import { getMenuList, addMenuPower } from '@/api/powerRole-md.js'
  24. export default {
  25. data() {
  26. return {
  27. id:'',
  28. menuData: {},
  29. authList: [], // app 权限菜单
  30. checkedIds: [[],[],[]], // 已选的ids
  31. loading: false
  32. }
  33. },
  34. methods: {
  35. // 获取菜单树列表
  36. getMenuList (id) {
  37. let _this = this
  38. this.id = id || '1'
  39. getMenuList({id: this.id}).then(res => {
  40. if (res.status == 200) {
  41. _this.menuData = res.data
  42. if (_this.menuData.role&&_this.menuData.role.menuIds) {
  43. const arr = _this.menuData.role.menuIds.split(',')
  44. // 勾选已选的
  45. _this.findLeaf(_this.menuData.allMenuList, arr)
  46. _this.getIds(_this.menuData.allMenuList[0].children,0)
  47. }
  48. // app 菜单
  49. _this.authList = _this.menuData.allMenuList[0].children
  50. }
  51. console.log(_this.menuData,'_this.menuData')
  52. })
  53. },
  54. // 勾选已选的
  55. findLeaf (data, arr) {
  56. for (let i = 0; i < data.length; i++) {
  57. const node = data[i]
  58. const hasNode = this.hasSelNode(node.id, arr)
  59. this.$set(node, 'checked', !!hasNode)
  60. if (node.children){
  61. this.$set(node, 'expand', !!hasNode)
  62. this.findLeaf(node.children, arr)
  63. }
  64. }
  65. },
  66. hasSelNode (id, arr){
  67. const hasNode = arr.find(item => {
  68. return item == id
  69. })
  70. return hasNode
  71. },
  72. // 获取选中的ids, index 那个菜单
  73. getIds (data,index){
  74. let _this = this
  75. for (let i = 0; i < data.length; i++) {
  76. const node = data[i]
  77. if(node.checked){
  78. _this.checkedIds[index].push(node.id)
  79. }
  80. if (node.children){
  81. _this.getIds(node.children,index)
  82. }
  83. }
  84. },
  85. // 选择一级菜单
  86. checkParent(item){
  87. console.log(item)
  88. if(item.children){
  89. item.children.map(k=>{
  90. this.$set(k, 'checked', !item.checked)
  91. })
  92. }
  93. this.$set(item, 'checked', !item.checked)
  94. },
  95. // 选择复选框
  96. checkboxChange(e){
  97. console.log(e)
  98. let pid = e.currentTarget.dataset.pid
  99. let ids = e.detail.value
  100. let pc = this.authList.find(item=> item.id == pid)
  101. if(pc.children&&pc.children.length){
  102. pc.children.map(k=>{
  103. this.$set(k, 'checked', !!ids.find(a=>a==k.id))
  104. })
  105. }
  106. this.$set(pc, 'checked', ids.length>0)
  107. },
  108. // 保存提交
  109. getSelMenu () {
  110. const _this = this
  111. // 获取已选的项
  112. this.checkedIds[0] = []
  113. this.getIds(this.authList,0)
  114. if (this.checkedIds[0].length == 0) {
  115. uni.showToast({
  116. icon: 'none',
  117. title: '请先选择权限'
  118. })
  119. return false
  120. }
  121. let checkeNodes = []
  122. checkeNodes = checkeNodes.concat(this.checkedIds[0])
  123. checkeNodes = checkeNodes.concat(this.checkedIds[1])
  124. checkeNodes = checkeNodes.concat(this.checkedIds[2])
  125. console.log(checkeNodes, 'checkeNodes')
  126. return {menuIds: checkeNodes.join(',')}
  127. },
  128. },
  129. }
  130. </script>
  131. <style lang="scss">
  132. .auth_page{
  133. display: flex;
  134. flex-direction: column;
  135. height: 100%;
  136. .auth_list{
  137. flex-grow: 1;
  138. overflow: auto;
  139. height: 100%;
  140. .leve_0{
  141. padding:0 20upx;
  142. margin-top: 20upx;
  143. .leve_1{
  144. padding: 15upx;
  145. border-bottom: 1px solid #eee;
  146. uni-label{
  147. display: block;
  148. }
  149. }
  150. .leve_2{
  151. padding: 10upx 10upx 10upx 0;
  152. display: flex;
  153. flex-wrap: wrap;
  154. .leve_3{
  155. margin: 20upx 5%;
  156. }
  157. }
  158. }
  159. }
  160. }
  161. </style>