menuModal.vue 4.6 KB

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