roleAuthSet.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  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 class="form-footer-btn">
  21. <button type="primary" :style="{background:$config('buttonColors')}" :disabled="loading" :loading="loading" @click="handleSubmit()">保存</button>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. import { getMenuList, addMenuPower } from '@/api/powerRole-md.js'
  27. export default {
  28. data() {
  29. return {
  30. id:'',
  31. menuData: {},
  32. authList: [], // app 权限菜单
  33. checkedIds: [[],[],[]], // 已选的ids
  34. loading: false
  35. }
  36. },
  37. onLoad(options) {
  38. this.id = options.id
  39. this.getMenuList()
  40. },
  41. methods: {
  42. // 获取菜单树列表
  43. getMenuList () {
  44. let _this = this
  45. getMenuList({id: this.id}).then(res => {
  46. if (res.status == 200) {
  47. _this.menuData = res.data
  48. if (_this.menuData.role.menuIds) {
  49. const arr = _this.menuData.role.menuIds.split(',')
  50. // 勾选已选的
  51. _this.findLeaf(_this.menuData.allMenuList, arr)
  52. _this.getIds(_this.menuData.allMenuList[0].children,0)
  53. _this.getIds(_this.menuData.allMenuList[1].children,1)
  54. }
  55. // app 菜单
  56. _this.authList = _this.menuData.allMenuList[2].children
  57. }
  58. console.log(_this.menuData,'_this.menuData')
  59. })
  60. },
  61. // 勾选已选的
  62. findLeaf (data, arr) {
  63. for (let i = 0; i < data.length; i++) {
  64. const node = data[i]
  65. const hasNode = this.hasSelNode(node.id, arr)
  66. this.$set(node, 'checked', !!hasNode)
  67. if (node.children){
  68. this.$set(node, 'expand', !!hasNode)
  69. this.findLeaf(node.children, arr)
  70. }
  71. }
  72. },
  73. hasSelNode (id, arr){
  74. const hasNode = arr.find(item => {
  75. return item == id
  76. })
  77. return hasNode
  78. },
  79. // 获取选中的ids, index 那个菜单
  80. getIds (data,index){
  81. let _this = this
  82. for (let i = 0; i < data.length; i++) {
  83. const node = data[i]
  84. if(node.checked){
  85. _this.checkedIds[index].push(node.id)
  86. }
  87. if (node.children){
  88. _this.getIds(node.children,index)
  89. }
  90. }
  91. },
  92. // 选择一级菜单
  93. checkParent(item){
  94. console.log(item)
  95. if(item.children){
  96. item.children.map(k=>{
  97. this.$set(k, 'checked', !item.checked)
  98. })
  99. }
  100. this.$set(item, 'checked', !item.checked)
  101. },
  102. // 选择复选框
  103. checkboxChange(e){
  104. console.log(e)
  105. let pid = e.currentTarget.dataset.pid
  106. let ids = e.detail.value
  107. let pc = this.authList.find(item=> item.id == pid)
  108. if(pc.children&&pc.children.length){
  109. pc.children.map(k=>{
  110. this.$set(k, 'checked', !!ids.find(a=>a==k.id))
  111. })
  112. }
  113. this.$set(pc, 'checked', ids.length>0)
  114. },
  115. // 保存提交
  116. handleSubmit () {
  117. const _this = this
  118. // 获取已选的项
  119. this.checkedIds[2] = []
  120. this.getIds(this.authList,2)
  121. if (this.checkedIds[2].length == 0) {
  122. uni.showToast({
  123. icon: 'none',
  124. title: '请先选择菜单'
  125. })
  126. return false
  127. }
  128. let checkeNodes = []
  129. checkeNodes = checkeNodes.concat(this.checkedIds[0])
  130. checkeNodes = checkeNodes.concat(this.checkedIds[1])
  131. checkeNodes = checkeNodes.concat(this.checkedIds[2])
  132. console.log(checkeNodes, 'checkeNodes')
  133. uni.showLoading({
  134. title: "正在提交..."
  135. })
  136. this.loading = true
  137. addMenuPower({ id: this.id, menuIds: checkeNodes.join(',') }).then(res => {
  138. console.log(res, 'res--save')
  139. uni.showToast({
  140. icon: 'none',
  141. title: res.message
  142. })
  143. if (res.status + '' === '200') {
  144. setTimeout(function () {
  145. _this.cancel()
  146. }, 300)
  147. }
  148. uni.hideLoading()
  149. this.loading = false
  150. })
  151. },
  152. cancel(){
  153. uni.navigateBack()
  154. }
  155. },
  156. }
  157. </script>
  158. <style lang="scss">
  159. page{
  160. height: 100%;
  161. background: #FFFFFF;
  162. }
  163. .auth_page{
  164. display: flex;
  165. flex-direction: column;
  166. height: 100%;
  167. .auth_list{
  168. flex-grow: 1;
  169. overflow: auto;
  170. height: 100%;
  171. .leve_0{
  172. padding:0 20upx;
  173. margin-top: 20upx;
  174. .leve_1{
  175. padding: 15upx;
  176. border-bottom: 1px solid #eee;
  177. uni-label{
  178. display: block;
  179. }
  180. }
  181. .leve_2{
  182. padding: 10upx 10upx 10upx 0;
  183. display: flex;
  184. flex-wrap: wrap;
  185. .leve_3{
  186. margin: 20upx 5%;
  187. }
  188. }
  189. }
  190. }
  191. .form-footer-btn{
  192. margin: 20upx;
  193. uni-button{
  194. font-size: 30upx;
  195. }
  196. }
  197. }
  198. </style>