chooseBrandModal.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseBrand-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择产品品牌"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <div class="chooseBrand-con">
  12. <div>
  13. <a-checkbox :checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
  14. </div>
  15. <a-divider />
  16. <a-checkbox-group v-model="checkedList" @change="onChange" style="width: 100%;">
  17. <a-row style="height: 400px;overflow-y: scroll;">
  18. <a-col :span="6" v-for="item in brandList" :key="item.brandSn">
  19. <a-checkbox :value="item.brandSn">
  20. {{ item.brandName }}
  21. </a-checkbox>
  22. </a-col>
  23. </a-row>
  24. </a-checkbox-group>
  25. <!-- 按钮 -->
  26. <div class="btn-con">
  27. <a-button
  28. type="primary"
  29. id="chooseBrand-submit"
  30. size="large"
  31. class="button-primary"
  32. @click="handleSave"
  33. style="padding: 0 60px;">保存</a-button>
  34. <a-button
  35. id="chooseBrand-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 { productBrandQuery } from '@/api/productBrand'
  46. export default {
  47. name: 'ChooseBrandModal',
  48. props: {
  49. openModal: { // 弹框显示状态
  50. type: Boolean,
  51. default: false
  52. },
  53. chooseData: {
  54. type: Array,
  55. default: () => {
  56. return []
  57. }
  58. }
  59. },
  60. data () {
  61. return {
  62. isShow: this.openModal, // 是否打开弹框
  63. checkAll: false, // 全选
  64. checkedList: [], // 选中项
  65. checkedRowList: [], // 选中项
  66. brandList: [] // 品牌数据
  67. }
  68. },
  69. methods: {
  70. // 保存
  71. handleSave () {
  72. const _this = this
  73. if (this.checkedList.length < 1) {
  74. this.$message.warning('请在列表勾选后再进行操作!')
  75. return
  76. }
  77. this.checkedRowList = []
  78. _this.brandList.map(item => {
  79. if (_this.checkedList.indexOf(item.brandSn) != -1) {
  80. _this.checkedRowList.push(item)
  81. }
  82. })
  83. this.$emit('ok', this.checkedRowList)
  84. this.isShow = false
  85. },
  86. // change
  87. onChange (checkedList) {
  88. const _this = this
  89. this.checkAll = checkedList.length === this.brandList.length
  90. this.brandList.map(item => {
  91. if (_this.checkedList.indexOf(item.brandSn) != -1) {
  92. _this.checkedRowList.push(item)
  93. }
  94. })
  95. },
  96. // 全选
  97. onCheckAllChange (e) {
  98. const _this = this
  99. this.checkAll = e.target.checked
  100. if (e.target.checked) {
  101. this.checkedList = []
  102. this.checkedRowList = []
  103. this.brandList.map(item => {
  104. _this.checkedList.push(item.brandSn)
  105. _this.checkedRowList.push(item)
  106. })
  107. } else {
  108. this.checkedList = []
  109. this.checkedRowList = []
  110. }
  111. },
  112. // 获取品牌数据
  113. getBrandList () {
  114. productBrandQuery({}).then(res => {
  115. if (res.status == 200) {
  116. this.brandList = res.data
  117. } else {
  118. this.brandList = []
  119. }
  120. })
  121. }
  122. },
  123. watch: {
  124. // 父页面传过来的弹框状态
  125. openModal (newValue, oldValue) {
  126. this.isShow = newValue
  127. },
  128. // 重定义的弹框状态
  129. isShow (newValue, oldValue) {
  130. if (!newValue) {
  131. this.$emit('close')
  132. this.checkAll = false
  133. } else {
  134. const _this = this
  135. this.checkedRowList = this.chooseData
  136. this.checkedList = []
  137. this.chooseData.map(item => {
  138. _this.checkedList.push(item.goodsSn)
  139. })
  140. if (this.brandList.length == 0) {
  141. this.getBrandList()
  142. }
  143. }
  144. }
  145. }
  146. }
  147. </script>
  148. <style lang="less" scoped>
  149. .chooseBrand-modal{
  150. .chooseBrand-con{
  151. .btn-con{
  152. text-align: center;
  153. margin: 30px 0 20px;
  154. .button-cancel{
  155. font-size: 12px;
  156. }
  157. }
  158. }
  159. }
  160. </style>