menusAuth.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <div>
  3. <a-form class="form-box" style="height: 500px;overflow: auto;margin-bottom: 15px;" :form="form" @submit="handleSubmit">
  4. <a-tree
  5. checkable
  6. @check="onCheck"
  7. @expand="onExpand"
  8. :autoExpandParent="autoExpandParent"
  9. v-model="checkedKeys"
  10. :treeData="treeData"
  11. />
  12. </a-form>
  13. <a-form-item :wrapper-col="{ offset: 3 }">
  14. <a-button type="primary" @click="handleSubmit()">
  15. 保存
  16. </a-button>
  17. </a-form-item>
  18. </div>
  19. </template>
  20. <script>
  21. import { findLsMenu, saveLsMouldMenu, findDdMenu, saveDdMouldMenu } from '@/api/menuSet'
  22. export default {
  23. name: 'MenusAuth',
  24. props: {
  25. types: {
  26. type: String,
  27. default: 'dd'
  28. }
  29. },
  30. data () {
  31. return {
  32. menuIds: '',
  33. treeData: [],
  34. expandedKeys: [],
  35. autoExpandParent: false,
  36. checkedKeys: [],
  37. checkedData: [],
  38. formLayout: 'horizontal',
  39. form: this.$form.createForm(this, { name: 'menuModal' })
  40. }
  41. },
  42. methods: {
  43. tabChange (v) {
  44. console.log(v)
  45. },
  46. // 初始化树
  47. treeInit (dr) {
  48. this.treeData = dr.menuList
  49. this.menuIds = dr.mould.menuIds
  50. if (this.menuIds) {
  51. const arr = this.menuIds.split(',')
  52. const temp = []
  53. arr.map(item => {
  54. temp.push(Number(item))
  55. })
  56. this.checkedData = temp
  57. this.expandedKeys = temp
  58. // 找出叶子节点
  59. this.findLeaf(this.treeData, temp)
  60. }
  61. },
  62. // 获取连锁树数据
  63. getfindLsMenu () {
  64. findLsMenu().then(res => {
  65. console.log(res, '+++++++++连锁+++++++++')
  66. if (res.status == 200) {
  67. this.treeInit(res.data)
  68. }
  69. })
  70. },
  71. // 获取单店树数据
  72. getfindDdMenu () {
  73. findDdMenu().then(res => {
  74. console.log(res, '+++++++++单店+++++++++')
  75. if (res.status == 200) {
  76. this.treeInit(res.data)
  77. }
  78. })
  79. },
  80. onExpand (expandedKeys) {
  81. console.log('onExpand', expandedKeys)
  82. this.expandedKeys = expandedKeys
  83. this.autoExpandParent = false
  84. },
  85. onCheck (checkedKeys, info) {
  86. this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
  87. this.checkedKeys = checkedKeys
  88. },
  89. // 勾选已选的菜单
  90. findLeaf (data, arr) {
  91. for (let i = 0; i < data.length; i++) {
  92. const node = data[i]
  93. if (node.children) {
  94. this.findLeaf(node.children, arr)
  95. } else {
  96. const hasNode = arr.find(item => {
  97. return item == node.id
  98. })
  99. if (hasNode) {
  100. this.checkedKeys.push(node.id)
  101. }
  102. }
  103. }
  104. },
  105. // 保存提交
  106. handleSubmit () {
  107. const _this = this
  108. this.form.validateFields((err, values) => {
  109. if (!err) {
  110. // console.log(this.checkedData)
  111. if (this.checkedData.length == 0) {
  112. return this.$message.warning('请先选择菜单')
  113. }
  114. const arr = this.checkedData.join(',')
  115. if (this.types == 'dd') {
  116. this.ddSave({ menuIds: arr })
  117. } else {
  118. this.lsSave({ menuIds: arr })
  119. }
  120. }
  121. })
  122. },
  123. // 保存单店
  124. ddSave (pars) {
  125. saveDdMouldMenu(pars).then(res => {
  126. console.log(res, 'res--save')
  127. if (res.status + '' === '200') {
  128. this.$message.success(res.message ? res.message : '保存成功')
  129. } else {
  130. // this.$message.warning(res.message)
  131. }
  132. })
  133. },
  134. // 保存连锁
  135. lsSave (pars) {
  136. saveLsMouldMenu(pars).then(res => {
  137. console.log(res, 'res--save')
  138. if (res.status + '' === '200') {
  139. this.$message.success(res.message ? res.message : '保存成功')
  140. } else {
  141. // this.$message.warning(res.message)
  142. }
  143. })
  144. }
  145. },
  146. mounted () {
  147. // 单店
  148. if (this.types == 'dd') {
  149. this.getfindDdMenu()
  150. } else {
  151. this.getfindLsMenu()
  152. }
  153. },
  154. beforeCreate () {
  155. this.form = this.$form.createForm(this, { name: 'menu' })
  156. }
  157. }
  158. </script>
  159. <style>
  160. </style>