chooseTypeModal.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseType-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择产品分类"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. width="50%">
  11. <div class="chooseType-con">
  12. <div>
  13. <a-checkbox :checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
  14. </div>
  15. <a-divider />
  16. <a-tree
  17. style="height: 400px;overflow-y: scroll;"
  18. checkable
  19. @check="onCheck"
  20. :checkStrictly="true"
  21. v-model="checkedKeys"
  22. :treeData="productTypeList"
  23. :replaceFields="replaceFields"
  24. />
  25. <!-- 按钮 -->
  26. <div class="btn-con">
  27. <a-button
  28. type="primary"
  29. id="chooseType-submit"
  30. size="large"
  31. class="button-primary"
  32. @click="handleSave"
  33. style="padding: 0 60px;">保存</a-button>
  34. <a-button
  35. id="chooseType-cancel"
  36. size="large"
  37. class="button-cancel"
  38. @click="isShow=false"
  39. style="padding: 0 60px;margin-left: 15px;">取消</a-button>
  40. </div>
  41. </div>
  42. </a-modal>
  43. </template>
  44. <script>
  45. import { productTypeQuery, productTypeQueryAll } from '@/api/productType'
  46. export default {
  47. name: 'ChooseTypeModal',
  48. props: {
  49. openModal: { // 弹框显示状态
  50. type: Boolean,
  51. default: false
  52. },
  53. chooseData: {
  54. type: Array,
  55. default: () => {
  56. return []
  57. }
  58. },
  59. type: { // 类型,促销规则promo
  60. type: String,
  61. default: ''
  62. }
  63. },
  64. data () {
  65. return {
  66. isShow: this.openModal, // 是否打开弹框
  67. checkedKeys: [], // 选中项
  68. checkedRows: [], // 选中项 整条数据
  69. checkAll: false, // 全选
  70. indeterminate: true,
  71. replaceFields: {
  72. children: 'children',
  73. title: 'productTypeName',
  74. key: 'productTypeSn'
  75. },
  76. productTypeList: []
  77. }
  78. },
  79. methods: {
  80. // 产品分类 列表
  81. getProductType () {
  82. if (this.type == 'promo') {
  83. productTypeQueryAll({}).then(res => {
  84. if (res.status == 200) {
  85. this.productTypeList = res.data
  86. } else {
  87. this.productTypeList = []
  88. }
  89. })
  90. } else {
  91. productTypeQuery({}).then(res => {
  92. if (res.status == 200) {
  93. this.productTypeList = res.data
  94. } else {
  95. this.productTypeList = []
  96. }
  97. })
  98. }
  99. },
  100. // 保存
  101. handleSave () {
  102. if (this.checkedKeys.length < 1) {
  103. this.$message.warning('请在列表勾选后再进行操作!')
  104. return
  105. }
  106. this.$emit('ok', this.checkedRows)
  107. this.isShow = false
  108. },
  109. // 全选
  110. onCheckAllChange (e) {
  111. this.checkAll = e.target.checked
  112. if (e.target.checked) {
  113. this.checkedKeys = []
  114. this.checkedRows = []
  115. this.recursionFun(this.productTypeList)
  116. } else {
  117. this.checkedKeys = []
  118. this.checkedRows = []
  119. }
  120. },
  121. // 递归函数
  122. recursionFun (data) {
  123. if (data) {
  124. data.map((item, index) => {
  125. this.checkedKeys.push(item.productTypeSn)
  126. this.checkedRows.push(item)
  127. if (item.children && item.children.length > 0) {
  128. this.recursionFun(item.children)
  129. }
  130. })
  131. }
  132. },
  133. onCheck (checkedKeys, info) {
  134. // console.log('onCheck', checkedKeys, info)
  135. // this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
  136. this.checkedKeys = checkedKeys
  137. this.checkedRows = []
  138. info.checkedNodes.map((item, index) => {
  139. this.checkedRows.push(item.data.props)
  140. })
  141. }
  142. },
  143. watch: {
  144. // 父页面传过来的弹框状态
  145. openModal (newValue, oldValue) {
  146. this.isShow = newValue
  147. },
  148. // 重定义的弹框状态
  149. isShow (newValue, oldValue) {
  150. if (!newValue) {
  151. this.$emit('close')
  152. this.checkAll = false
  153. } else {
  154. const _this = this
  155. this.checkedRows = this.chooseData
  156. this.checkedKeys = []
  157. this.chooseData.map(item => {
  158. _this.checkedKeys.push(item.goodsSn)
  159. })
  160. if (this.productTypeList.length == 0) {
  161. this.getProductType()
  162. }
  163. }
  164. }
  165. }
  166. }
  167. </script>
  168. <style lang="less" scoped>
  169. .chooseType-modal{
  170. .chooseType-con{
  171. .btn-con{
  172. text-align: center;
  173. margin: 30px 0 20px;
  174. .button-cancel{
  175. font-size: 12px;
  176. }
  177. }
  178. }
  179. }
  180. </style>