menuModal.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <div>
  3. <a-modal
  4. centered
  5. class="modalBox"
  6. :title="roleName"
  7. v-model="isshow"
  8. @cancle="cancel"
  9. :maskClosable="false">
  10. <a-form class="form-box" style="max-height: 600px;" :form="form" @submit="handleSubmit">
  11. <a-tree
  12. checkable
  13. @check="onCheck"
  14. @expand="onExpand"
  15. :expandedKeys="expandedKeys"
  16. :autoExpandParent="autoExpandParent"
  17. v-model="checkedKeys"
  18. :treeData="treeData"
  19. />
  20. </a-form>
  21. <a-form-item :wrapper-col="{ offset: 15 }">
  22. <a-button type="primary" @click="handleSubmit()" id="menuModal-handleSubmit">
  23. 保存
  24. </a-button>
  25. <a-button :style="{ marginLeft: '8px' }" @click="cancel" id="menuModal-handleCancel">
  26. 取消
  27. </a-button>
  28. </a-form-item>
  29. </a-modal>
  30. </div>
  31. </template>
  32. <script>
  33. import { STable, VSelect } from '@/components'
  34. import { addMenuPower } from '@/api/power-role.js'
  35. export default {
  36. name: 'RoleModal',
  37. components: {
  38. STable, VSelect
  39. },
  40. props: {
  41. visible: {
  42. type: Boolean,
  43. default: false
  44. },
  45. data: {
  46. type: Object,
  47. default: function () {
  48. return {}
  49. }
  50. }
  51. },
  52. data () {
  53. return {
  54. treeData: [],
  55. roleName: '',
  56. expandedKeys: [],
  57. autoExpandParent: true,
  58. checkedKeys: [],
  59. checkedData: [],
  60. isshow: this.visible,
  61. formLayout: 'horizontal',
  62. form: this.$form.createForm(this, { name: 'menuModal' }),
  63. id: '' // 角色id
  64. }
  65. },
  66. methods: {
  67. onExpand (expandedKeys) {
  68. this.expandedKeys = expandedKeys
  69. this.autoExpandParent = false
  70. },
  71. onCheck (checkedKeys, info) {
  72. this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
  73. this.checkedKeys = checkedKeys
  74. },
  75. cancel (e) {
  76. this.clear()
  77. this.$emit('close')
  78. },
  79. // 保存提交
  80. handleSubmit () {
  81. const _this = this
  82. this.form.validateFields((err, values) => {
  83. if (!err) {
  84. console.log(this.checkedData)
  85. if (this.checkedData.length == 0) {
  86. return this.$message.warning('请先选择菜单')
  87. }
  88. const arr = this.checkedData.join(',')
  89. console.log({ id: this.id, menuIds: arr })
  90. addMenuPower({ id: this.id, menuIds: arr }).then(res => {
  91. console.log(res, 'res--save')
  92. if (res.status + '' === '200') {
  93. this.$message.success(res.message ? res.message : '保存成功')
  94. this.$emit('refresh')
  95. setTimeout(function () {
  96. _this.cancel()
  97. }, 300)
  98. } else {
  99. // this.$message.error(res.message)
  100. }
  101. })
  102. }
  103. })
  104. },
  105. clear () {
  106. this.form.resetFields()
  107. this.roleName = ''
  108. this.id = ''
  109. this.checkedKeys = []
  110. this.expandedKeys = []
  111. },
  112. // 查找叶子节点
  113. findLeaf (data, arr) {
  114. for (let i = 0; i < data.length; i++) {
  115. const node = data[i]
  116. if (node.children) {
  117. this.findLeaf(node.children, arr)
  118. } else {
  119. const hasNode = arr.find(item => {
  120. return item == node.id
  121. })
  122. if (hasNode) {
  123. this.expandedKeys.push(node.id)
  124. this.checkedKeys.push(node.id)
  125. }
  126. }
  127. }
  128. }
  129. },
  130. beforeCreate () {
  131. this.form = this.$form.createForm(this, { name: 'menuModal' })
  132. },
  133. watch: {
  134. visible (newValue, oldValue) {
  135. this.isshow = newValue
  136. },
  137. isshow (newValue, oldValue) {
  138. if (newValue) {
  139. if (this.data) { // 编辑
  140. this.treeData = this.data.allMenuList
  141. this.id = this.data.role.id
  142. this.roleName = '分配权限' + '(' + this.data.role.name + ')'
  143. if (this.data.role.menuIds) {
  144. const arr = this.data.role.menuIds.split(',')
  145. this.checkedData = arr
  146. // 找出叶子节点
  147. this.findLeaf(this.treeData, arr)
  148. }
  149. }
  150. } else {
  151. this.cancel()
  152. }
  153. }
  154. }
  155. }
  156. </script>
  157. <style >
  158. .ant-modal-title{
  159. padding-right: 30px;
  160. }
  161. .ant-modal-footer {
  162. display: none;
  163. }
  164. .form-box {
  165. max-height: 600px !important;
  166. overflow: auto;
  167. }
  168. .form-box::-webkit-scrollbar{
  169. width: 6px;
  170. height: 6px ;
  171. }
  172. .form-box::-webkit-scrollbar-thumb{
  173. width: 6px;
  174. height: 6px ;
  175. border-radius: 4px;
  176. -webkit-box-shadow: inset 0 0 2px #d1d1d1;
  177. background: #e4e4e4;
  178. }
  179. </style>