roleAuthSet.vue 4.7 KB

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