editModal.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <a-modal
  3. centered
  4. class="purchaseBaseLimitEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑价格"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <div>
  12. <a-form-model
  13. id="purchaseBaseLimitEdit-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. </a-form-model>
  21. <div class="btn-cont">
  22. <a-button type="primary" id="purchaseBaseLimitEdit-save" @click="handleSave">保存</a-button>
  23. <a-button id="purchaseBaseLimitEdit-cancel" @click="isShow = false" style="margin-left: 100px;">取消</a-button>
  24. </div>
  25. </div>
  26. </a-modal>
  27. </template>
  28. <script>
  29. // import { dealerProductDetail } from '@/api/dealerProduct'
  30. export default {
  31. name: 'PurchaseBaseLimitEditModal',
  32. props: {
  33. openModal: { // 弹框显示状态
  34. type: Boolean,
  35. default: false
  36. },
  37. itemId: {
  38. type: [Number, String],
  39. default: ''
  40. }
  41. },
  42. computed: {
  43. productTypeName () {
  44. const productTypeName1 = this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
  45. const productTypeName2 = this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
  46. const productTypeName3 = this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
  47. return productTypeName1 + productTypeName2 + productTypeName3
  48. }
  49. },
  50. data () {
  51. return {
  52. isShow: this.openModal, // 是否打开弹框
  53. formItemLayout: {
  54. labelCol: { span: 4 },
  55. wrapperCol: { span: 16 }
  56. },
  57. detailsData: null, // 详情数据
  58. form: {
  59. storageQuantity: ''
  60. },
  61. rules: {
  62. supplierName: [
  63. { required: true, message: '请输入供应商名称', trigger: 'blur' }
  64. ]
  65. },
  66. brandData: []
  67. }
  68. },
  69. methods: {
  70. // 获取详情
  71. getDetail () {
  72. // dealerProductDetail({ id: this.itemId }).then(res => {
  73. // if (res.status == 200) {
  74. // this.detailsData = res.data
  75. // } else {
  76. // this.detailsData = null
  77. // }
  78. // })
  79. },
  80. // 保存
  81. handleSave () {
  82. }
  83. },
  84. watch: {
  85. // 父页面传过来的弹框状态
  86. openModal (newValue, oldValue) {
  87. this.isShow = newValue
  88. },
  89. // 重定义的弹框状态
  90. isShow (newValue, oldValue) {
  91. if (!newValue) {
  92. this.$emit('close')
  93. }
  94. },
  95. itemId (newValue, oldValue) {
  96. if (this.isShow && newValue) {
  97. this.getDetail()
  98. }
  99. }
  100. }
  101. }
  102. </script>
  103. <style lang="less">
  104. .purchaseBaseLimitEdit-modal{
  105. .ant-modal-body {
  106. padding: 40px 40px 24px;
  107. }
  108. .btn-cont {
  109. text-align: center;
  110. margin: 35px 0 30px;
  111. }
  112. }
  113. </style>