menuModal.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <a-modal
  3. centered
  4. class="modalBox"
  5. :title="roleName"
  6. v-model="isshow"
  7. @cancel="cancel"
  8. :maskClosable="false">
  9. <div style="min-height: 100px;">
  10. <a-spin :spinning="spinning" tip="Loading...">
  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-spin>
  31. </div>
  32. </a-modal>
  33. </template>
  34. <script>
  35. import { STable, VSelect } from '@/components'
  36. import { addMenuPower, getMenuList } from '@/api/powerRole-md.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. },
  48. data () {
  49. return {
  50. spinning: false,
  51. treeData: [],
  52. menuData: null,
  53. roleName: '',
  54. expandedKeys: [],
  55. autoExpandParent: true,
  56. checkedKeys: [],
  57. checkedData: [],
  58. isshow: this.visible,
  59. formLayout: 'horizontal',
  60. form: this.$form.createForm(this, { name: 'menuModal' }),
  61. id: '' // 角色id
  62. }
  63. },
  64. methods: {
  65. onExpand (expandedKeys) {
  66. this.expandedKeys = expandedKeys
  67. this.autoExpandParent = false
  68. },
  69. onCheck (checkedKeys, info) {
  70. this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
  71. this.checkedKeys = checkedKeys
  72. },
  73. cancel (e) {
  74. this.clear()
  75. this.$emit('close')
  76. },
  77. // 保存提交
  78. handleSubmit () {
  79. const _this = this
  80. this.form.validateFields((err, values) => {
  81. if (!err) {
  82. if (this.checkedData.length == 0) {
  83. return this.$message.warning('请先选择菜单')
  84. }
  85. const arr = this.checkedData.join(',')
  86. _this.spinning = true
  87. addMenuPower({ id: this.id, menuIds: arr }).then(res => {
  88. if (res.status == 200) {
  89. this.$message.success(res.message ? res.message : '保存成功')
  90. this.$emit('refresh')
  91. setTimeout(function () {
  92. _this.cancel()
  93. _this.spinning = false
  94. }, 300)
  95. } else {
  96. _this.spinning = false
  97. // this.$message.error(res.message)
  98. }
  99. })
  100. }
  101. })
  102. },
  103. clear () {
  104. this.form.resetFields()
  105. this.roleName = ''
  106. this.id = ''
  107. this.checkedKeys = []
  108. this.expandedKeys = []
  109. },
  110. // 查找叶子节点
  111. findLeaf (data, arr) {
  112. for (let i = 0; i < data.length; i++) {
  113. const node = data[i]
  114. if (node.children) {
  115. this.findLeaf(node.children, arr)
  116. } else {
  117. const hasNode = arr.find(item => {
  118. return item == node.id
  119. })
  120. if (hasNode) {
  121. this.expandedKeys.push(node.id)
  122. this.checkedKeys.push(node.id)
  123. }
  124. }
  125. }
  126. },
  127. getmenuData (id) {
  128. this.spinning = true
  129. getMenuList({
  130. id: id
  131. }).then(res => {
  132. if (res.status == 200) {
  133. if (res.data.role) {
  134. this.setmenuData(res.data)
  135. } else {
  136. this.$message.error('获取数据失败,请重试!')
  137. this.isshow = false
  138. }
  139. }
  140. this.spinning = false
  141. })
  142. },
  143. setmenuData (newValue) {
  144. this.menuData = newValue
  145. console.log(this.menuData)
  146. if (newValue) { // 编辑
  147. if (this.$store.state.user.dealerLevel == 'SPECIAL') { // 特约经销商
  148. this.treeData = this.filterTree(newValue.allMenuList)
  149. } else {
  150. this.treeData = this.menuData.allMenuList
  151. }
  152. this.id = this.menuData.role.id
  153. this.roleName = '分配权限' + '(' + this.menuData.role.name + ')'
  154. if (this.menuData.role.menuIds) {
  155. const arr = this.menuData.role.menuIds.split(',')
  156. this.checkedData = arr
  157. // 找出叶子节点
  158. this.findLeaf(this.treeData, arr)
  159. }
  160. }
  161. },
  162. // 筛选子级中的不含市级价的树
  163. filterTree (tree) {
  164. return tree.map(node => {
  165. // 创建当前节点的副本,避免直接修改原节点
  166. const newNode = { ...node }
  167. // 递归删除子节点中 name 等于 '市级价' 的节点
  168. if (newNode.children) {
  169. newNode.children = newNode.children.filter(child => {
  170. // 如果子节点有子级,则递归处理
  171. if (child.children && child.children.length > 0) {
  172. child.children = this.filterTree(child.children)
  173. }
  174. // 返回不符合删除条件的子节点
  175. return child.name != '市级价'
  176. })
  177. }
  178. // 返回处理后的节点
  179. return newNode
  180. })
  181. }
  182. },
  183. beforeCreate () {
  184. this.form = this.$form.createForm(this, { name: 'menuModal' })
  185. },
  186. watch: {
  187. visible (newValue, oldValue) {
  188. this.isshow = newValue
  189. },
  190. isshow (newValue, oldValue) {
  191. if (!newValue) {
  192. this.cancel()
  193. }
  194. }
  195. }
  196. }
  197. </script>
  198. <style >
  199. .ant-modal-title{
  200. padding-right: 30px;
  201. }
  202. .ant-modal-footer {
  203. display: none;
  204. }
  205. .form-box {
  206. max-height: 600px !important;
  207. overflow: auto;
  208. }
  209. .form-box::-webkit-scrollbar{
  210. width: 6px;
  211. height: 6px ;
  212. }
  213. .form-box::-webkit-scrollbar-thumb{
  214. width: 6px;
  215. height: 6px ;
  216. border-radius: 4px;
  217. -webkit-box-shadow: inset 0 0 2px #d1d1d1;
  218. background: #e4e4e4;
  219. }
  220. </style>