chooseClassifyModal.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseClassify-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择产品分类"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="680">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="checkboxAllBtn">
  13. <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
  14. 全选
  15. </a-checkbox>
  16. </div>
  17. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  18. <div class="btn-cont">
  19. <a-button type="primary" id="product-category-edit-modal-save" @click="handleSave">保存</a-button>
  20. <a-button id="product-category-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  21. </div>
  22. </a-spin>
  23. </a-modal>
  24. </template>
  25. <script>
  26. import { commonMixin } from '@/utils/mixin'
  27. import { bindRelation } from '@/api/dealerRelation'
  28. export default {
  29. name: 'ChooseClassifyModal',
  30. mixins: [commonMixin],
  31. props: {
  32. openModal: { // 弹框显示状态
  33. type: Boolean,
  34. default: false
  35. }
  36. },
  37. data () {
  38. return {
  39. isShow: this.openModal, // 是否打开弹框
  40. spinning: false,
  41. checkedList: [],
  42. plainOptions: ['欧司朗', '优志旺', '阪东BANDO', '东洋', '盖达', '欧皮特(Optibelt)'],
  43. checkAll: false,
  44. indeterminate: false
  45. }
  46. },
  47. methods: {
  48. getData () {
  49. },
  50. onChange () {
  51. this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
  52. this.checkAll = this.checkedList.length === this.plainOptions.length
  53. },
  54. onCheckAllChange (e) {
  55. Object.assign(this, {
  56. checkedList: e.target.checked ? this.plainOptions : [],
  57. indeterminate: false,
  58. checkAll: e.target.checked
  59. })
  60. },
  61. // 保存
  62. handleSave () {
  63. const _this = this
  64. _this.$emit('ok', _this.checkedList)
  65. }
  66. },
  67. watch: {
  68. // 父页面传过来的弹框状态
  69. openModal (newValue, oldValue) {
  70. this.isShow = newValue
  71. },
  72. // 重定义的弹框状态
  73. isShow (newValue, oldValue) {
  74. if (!newValue) {
  75. this.$emit('close')
  76. this.indeterminate = false
  77. this.checkAll = false
  78. this.checkedList = []
  79. } else {
  80. this.getData()
  81. }
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="less">
  87. .chooseClassify-modal{
  88. .ant-modal-body {
  89. padding: 20px 30px;
  90. .checkboxAllBtn{
  91. border-bottom:1px solid #E9E9E9;
  92. padding-bottom:20px;
  93. margin-bottom:20px;
  94. }
  95. }
  96. .btn-cont {
  97. text-align: center;
  98. margin: 35px 0 10px;
  99. }
  100. }
  101. </style>