shopingCatModal.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <a-drawer
  3. :zIndex="zIndex"
  4. placement="right"
  5. :visible="visible"
  6. :width="width"
  7. :get-container="false"
  8. :wrap-style="{ position: 'absolute' }"
  9. @close="onClose"
  10. wrapClassName="shopingCat-drawer jg-drawer-wrap">
  11. <div slot="title">
  12. <strong>{{ title }}</strong>
  13. <span style="color: #ed1c24;;margin-left:10px;font-size: 12px;" v-if="purchaseTargetType&&(purchaseTargetType=='DEALER_UP'||purchaseTargetType=='DEALER_SUPPLIER')">注意:仅可添加本供应商有权限的产品</span>
  14. <span style="color: #ed1c24;;margin-left:10px;font-size: 12px;" v-else-if="purchaseTargetType&&purchaseTargetType=='SUPPLIER_SYS'">注意:仅可添加本供应商有经销权且总部已上线的产品</span>
  15. </div>
  16. <shopingCat ref="shopingCat" :purchaseType="purchaseTargetType" modes="modals" @ok="handleok"></shopingCat>
  17. </a-drawer>
  18. </template>
  19. <script>
  20. import { commonMixin } from '@/utils/mixin'
  21. import shopingCat from '@/views/shoppingCarManagement/shoppingCar/list.vue'
  22. export default {
  23. name: 'ShopingCatModal',
  24. mixins: [commonMixin],
  25. components: {
  26. shopingCat
  27. },
  28. props: {
  29. showModal: {
  30. type: Boolean,
  31. default: false
  32. },
  33. width: {
  34. type: [String, Number],
  35. default: '70%'
  36. },
  37. zIndex: {
  38. type: Number,
  39. default: 100
  40. },
  41. paramsData: {
  42. type: Object
  43. },
  44. purchaseTargetType: {
  45. type: String,
  46. default: null
  47. }
  48. },
  49. watch: {
  50. showModal (newValue, oldValue) {
  51. this.visible = newValue
  52. if (newValue) {
  53. setTimeout(() => {
  54. this.$refs.shopingCat.pageInit(this.paramsData)
  55. }, 500)
  56. }
  57. }
  58. },
  59. data () {
  60. return {
  61. visible: this.showModal,
  62. title: '购物车'
  63. }
  64. },
  65. methods: {
  66. onClose () {
  67. this.$emit('close')
  68. },
  69. handleok () {
  70. this.$emit('ok')
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="less">
  76. .shopingCat-drawer {
  77. .ant-drawer-header{
  78. padding: 13px 20px;
  79. }
  80. .ant-drawer-body {
  81. padding: 0 5px;
  82. height: calc(100% - 50px);
  83. display: flex;
  84. flex-direction: column;
  85. overflow: auto;
  86. > div {
  87. height: 100%;
  88. }
  89. }
  90. }
  91. </style>