editModal.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <a-modal
  3. centered
  4. class="productPricingEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑价格"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <!-- 编辑价格 -->
  12. <div>
  13. <a-form-model
  14. id="productPricingEdit-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-form-model-item label="成本价" prop="supplierName">
  22. 50.00
  23. </a-form-model-item>
  24. <a-form-model-item label="省级价" prop="supplierName">
  25. <a-input-number
  26. id="productPricingEdit-storageQuantity"
  27. v-model="form.storageQuantity"
  28. :precision="2"
  29. :min="1"
  30. :max="999999"
  31. placeholder="请输入"
  32. style="width: 100%;" />
  33. </a-form-model-item>
  34. <a-form-model-item label="市级价" prop="supplierName">
  35. <a-input-number
  36. id="productPricingEdit-storageQuantity"
  37. v-model="form.storageQuantity"
  38. :precision="2"
  39. :min="1"
  40. :max="999999"
  41. placeholder="请输入"
  42. style="width: 100%;" />
  43. </a-form-model-item>
  44. <a-form-model-item label="特约价" prop="supplierName">
  45. <a-input-number
  46. id="productPricingEdit-storageQuantity"
  47. v-model="form.storageQuantity"
  48. :precision="2"
  49. :min="1"
  50. :max="999999"
  51. placeholder="请输入"
  52. style="width: 100%;" />
  53. </a-form-model-item>
  54. <a-form-model-item label="终端价" prop="supplierName">
  55. <a-input-number
  56. id="productPricingEdit-storageQuantity"
  57. v-model="form.storageQuantity"
  58. :precision="2"
  59. :min="1"
  60. :max="999999"
  61. placeholder="请输入"
  62. style="width: 100%;" />
  63. </a-form-model-item>
  64. <a-form-model-item label="车主价" prop="supplierName">
  65. <a-input-number
  66. id="productPricingEdit-storageQuantity"
  67. v-model="form.storageQuantity"
  68. :precision="2"
  69. :min="1"
  70. :max="999999"
  71. placeholder="请输入"
  72. style="width: 100%;" />
  73. </a-form-model-item>
  74. <a-form-model-item label="变更原因">
  75. <a-select placeholder="请选择" id="productPricingEdit-storageQuantity" allowClear v-model="form.storageQuantity">
  76. <a-select-option v-for="item in brandData" :key="item.salesChannelNo" :value="item.salesChannelNo">{{ item.salesChannelName }}</a-select-option>
  77. </a-select>
  78. </a-form-model-item>
  79. </a-form-model>
  80. <div class="btn-cont">
  81. <a-button type="primary" id="product-pricing-modal-save" @click="handleSave">保存</a-button>
  82. <a-button id="product-pricing-modal-cancel" @click="isShow = false" style="margin-left: 100px;">取消</a-button>
  83. </div>
  84. </div>
  85. </a-modal>
  86. </template>
  87. <script>
  88. // import { dealerProductDetail } from '@/api/dealerProduct'
  89. export default {
  90. name: 'ProductPricingEditModal',
  91. props: {
  92. openModal: { // 弹框显示状态
  93. type: Boolean,
  94. default: false
  95. },
  96. itemId: {
  97. type: [Number, String],
  98. default: ''
  99. }
  100. },
  101. computed: {
  102. productTypeName () {
  103. const productTypeName1 = this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
  104. const productTypeName2 = this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
  105. const productTypeName3 = this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
  106. return productTypeName1 + productTypeName2 + productTypeName3
  107. }
  108. },
  109. data () {
  110. return {
  111. isShow: this.openModal, // 是否打开弹框
  112. formItemLayout: {
  113. labelCol: { span: 4 },
  114. wrapperCol: { span: 16 }
  115. },
  116. detailsData: null, // 详情数据
  117. form: {
  118. storageQuantity: ''
  119. },
  120. rules: {
  121. supplierName: [
  122. { required: true, message: '请输入供应商名称', trigger: 'blur' }
  123. ]
  124. },
  125. brandData: []
  126. }
  127. },
  128. methods: {
  129. // 获取详情
  130. getDetail () {
  131. // dealerProductDetail({ id: this.itemId }).then(res => {
  132. // if (res.status == 200) {
  133. // this.detailsData = res.data
  134. // } else {
  135. // this.detailsData = null
  136. // }
  137. // })
  138. },
  139. // 保存
  140. handleSave () {
  141. }
  142. },
  143. watch: {
  144. // 父页面传过来的弹框状态
  145. openModal (newValue, oldValue) {
  146. this.isShow = newValue
  147. },
  148. // 重定义的弹框状态
  149. isShow (newValue, oldValue) {
  150. if (!newValue) {
  151. this.$emit('close')
  152. }
  153. },
  154. itemId (newValue, oldValue) {
  155. if (this.isShow && newValue) {
  156. this.getDetail()
  157. }
  158. }
  159. }
  160. }
  161. </script>
  162. <style lang="less">
  163. .productPricingEdit-modal{
  164. .ant-modal-body {
  165. padding: 40px 40px 24px;
  166. }
  167. .btn-cont {
  168. text-align: center;
  169. margin: 35px 0 30px;
  170. }
  171. }
  172. </style>