chooseProduct.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <a-drawer
  3. :zIndex="zIndex"
  4. title="选择产品"
  5. placement="right"
  6. :visible="isShow"
  7. width="80%"
  8. :get-container="false"
  9. :wrap-style="{ position: 'absolute' }"
  10. :headerStyle="{ padding: '10px' }"
  11. @close="onClose"
  12. wrapClassName="chooseProducts-modal">
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <div class="products-con">
  15. <div>
  16. <!-- 查询配件列表 -->
  17. <queryPart v-if="cptype==0" ref="partQuery" :newLoading="isInster" @add="insterProduct"></queryPart>
  18. <activeQueryPart v-if="cptype==1" ref="partQuery" :newLoading="isInster" @add="insterProduct"></activeQueryPart>
  19. </div>
  20. </div>
  21. </a-spin>
  22. </a-drawer>
  23. </template>
  24. <script>
  25. import queryPart from './queryPart.vue'
  26. import activeQueryPart from './activeQueryPart.vue'
  27. export default {
  28. name: 'ChooseProductsModal',
  29. components: { queryPart, activeQueryPart },
  30. props: {
  31. openModal: { // 弹框显示状态
  32. type: Boolean,
  33. default: false
  34. },
  35. chooseData: {
  36. type: Array,
  37. default: () => {
  38. return []
  39. }
  40. },
  41. isInster: { // 弹框显示状态
  42. type: Boolean,
  43. default: false
  44. },
  45. zIndex:{
  46. type: [String,Number],
  47. default: 1000
  48. }
  49. },
  50. data () {
  51. return {
  52. spinning: false,
  53. cptype: 3,
  54. isShow: this.openModal, // 是否打开弹框
  55. orderData: null
  56. }
  57. },
  58. methods: {
  59. onClose () {
  60. this.$emit('close')
  61. },
  62. // 添加产品
  63. insterProduct (row, promotionFlag, promoProductClz) {
  64. this.$emit('addProduct', row, promotionFlag, promoProductClz)
  65. },
  66. pageInit(data, promo, type){
  67. console.log(data, promo, type)
  68. this.cptype = type
  69. this.orderData = data
  70. this.$nextTick(()=>{
  71. this.$refs.partQuery.pageInit(data, promo)
  72. })
  73. }
  74. },
  75. watch: {
  76. // 父页面传过来的弹框状态
  77. openModal (newValue, oldValue) {
  78. this.isShow = newValue
  79. },
  80. // 重定义的弹框状态
  81. isShow (newValue, oldValue) {
  82. if (!newValue) {
  83. this.$emit('close',this.cptype)
  84. this.cptype = 3
  85. }
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="less" scoped>
  91. .chooseProducts-modal{
  92. .products-con{
  93. .btn-con{
  94. text-align: center;
  95. margin: 30px 0 20px;
  96. .button-cancel{
  97. font-size: 12px;
  98. }
  99. }
  100. }
  101. }
  102. </style>