menuModal.vue 4.7 KB

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