chooseBrandModal.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseBrand-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择产品品牌"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <div class="chooseBrand-con">
  12. <a-row style="height: 400px;overflow-y: scroll;">
  13. <a-col :span="6" v-for="(item,index) in brandList" :key="item.brandSn">
  14. <a-checkbox :checked="item.checked" :disabled="item.isDisabled" @change="e=>onChange(e,index)">
  15. {{ item.brandName }}
  16. </a-checkbox>
  17. </a-col>
  18. </a-row>
  19. <!-- 按钮 -->
  20. <div class="btn-con">
  21. <a-button
  22. id="chooseBrand-cancel"
  23. class="button-cancel"
  24. @click="isShow=false"
  25. style="padding: 0 30px;">取消</a-button>
  26. <a-button
  27. type="primary"
  28. id="chooseBrand-submit"
  29. @click="handleSave"
  30. style="padding: 0 30px;margin-left: 15px;">保存</a-button>
  31. </div>
  32. </div>
  33. </a-modal>
  34. </template>
  35. <script>
  36. import { productBrandQuery } from '@/api/productBrand'
  37. export default {
  38. name: 'ChooseBrandModal',
  39. props: {
  40. openModal: { // 弹框显示状态
  41. type: Boolean,
  42. default: false
  43. },
  44. chooseData: {
  45. type: Array,
  46. default: () => {
  47. return []
  48. }
  49. }
  50. },
  51. data () {
  52. return {
  53. isShow: this.openModal, // 是否打开弹框
  54. brandList: [] // 品牌数据
  55. }
  56. },
  57. methods: {
  58. // 保存
  59. handleSave () {
  60. const _this = this
  61. const checkedRowList = _this.brandList.filter(item => item.checked)
  62. if (checkedRowList.length < 1) {
  63. _this.$message.warning('请在列表勾选后再进行操作!')
  64. return
  65. }
  66. _this.$emit('ok', checkedRowList)
  67. _this.isShow = false
  68. },
  69. // change
  70. onChange (e, pos) {
  71. this.brandList.map(item => {
  72. item.checked = false
  73. return item
  74. })
  75. this.brandList[pos].checked = e.target.checked
  76. this.$forceUpdate()
  77. },
  78. // 获取品牌数据
  79. getBrandList () {
  80. const _this = this
  81. productBrandQuery({}).then(res => {
  82. if (res.status == 200) {
  83. if (_this.chooseData && _this.chooseData.length > 0) {
  84. const checkedList = _this.chooseData.map(item => item.dataSn)
  85. res.data.map(item => {
  86. item.checked = checkedList.includes(item.brandSn)
  87. })
  88. }
  89. _this.brandList = res.data
  90. } else {
  91. _this.brandList = []
  92. }
  93. })
  94. }
  95. },
  96. watch: {
  97. // 父页面传过来的弹框状态
  98. openModal (newValue, oldValue) {
  99. this.isShow = newValue
  100. },
  101. // 重定义的弹框状态
  102. isShow (newValue, oldValue) {
  103. if (!newValue) {
  104. this.$emit('close')
  105. } else {
  106. const _this = this
  107. _this.getBrandList()
  108. }
  109. }
  110. }
  111. }
  112. </script>
  113. <style lang="less" scoped>
  114. .chooseBrand-modal{
  115. .chooseBrand-con{
  116. .btn-con{
  117. text-align: center;
  118. margin: 30px 0 20px;
  119. .button-cancel{
  120. font-size: 12px;
  121. }
  122. }
  123. }
  124. }
  125. </style>