setModal.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <a-modal
  3. centered
  4. class="customerTypeEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <!-- 表单 -->
  12. <div>
  13. <a-form-model
  14. id="customerTypeEdit-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-tree
  22. checkable
  23. @check="onCheck"
  24. @expand="onExpand"
  25. :expandedKeys="expandedKeys"
  26. :autoExpandParent="autoExpandParent"
  27. v-model="checkedKeys"
  28. :treeData="treeData"
  29. />
  30. </a-form-model>
  31. <div class="btn-cont">
  32. <a-button type="primary" id="customer-type-edit-modal-save" @click="handleSave">保存</a-button>
  33. <a-button id="customer-type-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
  34. </div>
  35. </div>
  36. </a-modal>
  37. </template>
  38. <script>
  39. import { findMouldMenuDetail, findMouldMenuSave } from '@/api/mould'
  40. export default {
  41. name: 'MenuMouldSetModal',
  42. props: {
  43. openModal: { // 弹框显示状态
  44. type: Boolean,
  45. default: false
  46. },
  47. itemId: {
  48. type: [Number, String],
  49. default: ''
  50. },
  51. nowData: {
  52. type: Object,
  53. default: null
  54. }
  55. },
  56. computed: {
  57. modalTit () {
  58. return '分配权限(' + (this.nowData && this.nowData.name ? this.nowData.name : '--') + ')'
  59. }
  60. },
  61. data () {
  62. return {
  63. isShow: this.openModal, // 是否打开弹框
  64. detailData: null, // 数据
  65. formItemLayout: {
  66. labelCol: { span: 6 },
  67. wrapperCol: { span: 16 }
  68. },
  69. form: {},
  70. rules: {},
  71. treeData: [],
  72. expandedKeys: [],
  73. autoExpandParent: true,
  74. checkedKeys: [],
  75. checkedData: []
  76. }
  77. },
  78. methods: {
  79. onExpand (expandedKeys) {
  80. this.expandedKeys = expandedKeys
  81. this.autoExpandParent = false
  82. },
  83. onCheck (checkedKeys, info) {
  84. this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
  85. this.checkedKeys = checkedKeys
  86. },
  87. // 保存
  88. handleSave () {
  89. const _this = this
  90. if (this.checkedData.length == 0) {
  91. return this.$message.warning('请先选择菜单')
  92. }
  93. this.$refs.ruleForm.validate(valid => {
  94. if (valid) {
  95. const arr = _this.checkedData.join(',')
  96. findMouldMenuSave({ id: _this.itemId, menuIds: arr }).then(res => {
  97. if (res.status == 200) {
  98. _this.$message.success(res.message)
  99. _this.isShow = false
  100. }
  101. })
  102. } else {
  103. console.log('error submit!!')
  104. return false
  105. }
  106. })
  107. },
  108. // 详情
  109. getDetail () {
  110. findMouldMenuDetail({ id: this.itemId, appType: 2 }).then(res => {
  111. if (res.status == 200) {
  112. this.treeData = res.data.menuList
  113. if (res.data.mould.menuIds) {
  114. const arr = res.data.mould.menuIds.split(',')
  115. this.checkedData = arr
  116. // 找出叶子节点
  117. this.findLeaf(this.treeData, arr)
  118. }
  119. }
  120. })
  121. },
  122. // 查找叶子节点
  123. findLeaf (data, arr) {
  124. for (let i = 0; i < data.length; i++) {
  125. const node = data[i]
  126. if (node.children) {
  127. this.findLeaf(node.children, arr)
  128. } else {
  129. const hasNode = arr.find(item => {
  130. return item == node.id
  131. })
  132. if (hasNode) {
  133. this.expandedKeys.push(node.id)
  134. this.checkedKeys.push(node.id)
  135. }
  136. }
  137. }
  138. }
  139. },
  140. watch: {
  141. // 父页面传过来的弹框状态
  142. openModal (newValue, oldValue) {
  143. this.isShow = newValue
  144. },
  145. // 重定义的弹框状态
  146. isShow (newValue, oldValue) {
  147. if (!newValue) {
  148. this.$emit('close')
  149. this.$refs.ruleForm.resetFields()
  150. this.checkedKeys = []
  151. this.expandedKeys = []
  152. }
  153. },
  154. itemId (newValue, oldValue) {
  155. if (this.isShow && newValue) {
  156. this.getDetail()
  157. }
  158. }
  159. }
  160. }
  161. </script>
  162. <style lang="less">
  163. .customerTypeEdit-modal{
  164. .ant-modal-body {
  165. padding: 40px 40px 24px;
  166. }
  167. .btn-cont {
  168. text-align: center;
  169. margin: 35px 0 10px;
  170. }
  171. }
  172. </style>