shopingCatModal.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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">
  11. <div slot="title">
  12. <strong>{{title}}</strong>
  13. <span style="color: #ed1c24;;margin-left:10px;font-size: 12px;">注意:仅可添加本供应商有经销权且总部已上线的产品</span>
  14. </div>
  15. <shopingCat ref="shopingCat" modes="modals" @ok="handleok"></shopingCat>
  16. </a-drawer>
  17. </template>
  18. <script>
  19. import { commonMixin } from '@/utils/mixin'
  20. import shopingCat from '@/views/shoppingCarManagement/shoppingCar/list.vue'
  21. export default {
  22. name:"shopingCatModal",
  23. mixins: [commonMixin],
  24. components: {
  25. shopingCat
  26. },
  27. props: {
  28. showModal: {
  29. type: Boolean,
  30. default: false
  31. },
  32. width: {
  33. type: [String, Number],
  34. default: '70%'
  35. },
  36. zIndex: {
  37. type: Number,
  38. default: 100
  39. },
  40. paramsData: {
  41. type: Object
  42. }
  43. },
  44. watch: {
  45. showModal (newValue, oldValue) {
  46. this.visible = newValue
  47. if (newValue) {
  48. setTimeout(()=>{
  49. this.$refs.shopingCat.pageInit(this.paramsData)
  50. },500)
  51. }
  52. },
  53. },
  54. data () {
  55. return {
  56. visible: this.showModal,
  57. title: '购物车',
  58. }
  59. },
  60. methods: {
  61. onClose () {
  62. this.$emit('close')
  63. },
  64. handleok () {
  65. this.$emit('ok')
  66. },
  67. }
  68. }
  69. </script>
  70. <style lang="less">
  71. .shopingCat-drawer {
  72. .ant-drawer-header{
  73. padding: 13px 20px;
  74. }
  75. .ant-drawer-body {
  76. padding: 0 5px;
  77. height: calc(100% - 50px);
  78. display: flex;
  79. flex-direction: column;
  80. overflow: auto;
  81. > div {
  82. height: 100%;
  83. }
  84. }
  85. .table-page-search-wrapper{
  86. .ant-form.ant-form-inline .ant-form-item .ant-input, .ant-form.ant-form-inline .ant-form-item .ant-select-selection{
  87. border:0;
  88. }
  89. .ant-form.ant-form-inline .ant-form-item{
  90. border:1px solid #dadada;
  91. border-radius: 3px;
  92. .ant-form-item-label{
  93. padding-left: 11px;
  94. padding-right: 0!important;
  95. }
  96. }
  97. }
  98. }
  99. </style>