settingCost.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <a-modal
  3. centered
  4. class="merchantInfoManagement-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="title"
  8. v-model="isShow"
  9. @cancle="cansel"
  10. :width="600">
  11. <div>
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="labelCol"
  18. :wrapper-col="wrapperCol"
  19. >
  20. <a-form-model-item label="产品名称">
  21. {{ productName }}
  22. </a-form-model-item>
  23. <a-form-model-item label="产品编码">
  24. {{ productCode }}
  25. </a-form-model-item>
  26. <a-form-model-item label="成本价" prop="cost">
  27. <a-input-number
  28. id="setting-cost"
  29. v-model="form.cost"
  30. :precision="2"
  31. :min="0"
  32. :max="999999"
  33. placeholder="请输入"
  34. style="width: 100%;" />
  35. </a-form-model-item>
  36. <div style="display: flex;justify-content: center;padding: 30px 0;">
  37. <a-button type="primary" @click="onSubmit">
  38. 确定
  39. </a-button>
  40. <a-button style="margin-left: 15px;" @click="cansel">
  41. 取消
  42. </a-button>
  43. </div>
  44. </a-form-model></a-spin>
  45. </a-form-model>
  46. </div>
  47. </a-modal>
  48. </template>
  49. <script>
  50. import { VSelect } from '@/components'
  51. import { settingCost } from '@/api/supplier'
  52. export default {
  53. name: 'SettingCost',
  54. components: { VSelect },
  55. props: {
  56. openModal: { // 弹框显示状态
  57. type: Boolean,
  58. default: false
  59. }
  60. },
  61. data () {
  62. return {
  63. isShow: this.openModal, // 是否打开弹框
  64. spinning: false,
  65. title: '设置成本价',
  66. labelCol: { span: 4 },
  67. wrapperCol: { span: 18 },
  68. productName: '',
  69. productCode: '',
  70. form: {
  71. supplierSn: '',
  72. supplierProductSn: '',
  73. cost: ''
  74. },
  75. rules: {
  76. cost: [
  77. { required: true, message: '请输入成本价', trigger: 'change' }
  78. ]
  79. }
  80. }
  81. },
  82. methods: {
  83. setData (row) {
  84. this.form.supplierSn = row.supplierSn
  85. this.form.supplierProductSn = row.supplierProductSn
  86. this.form.cost = row.cost
  87. this.productName = row.product.name
  88. this.productCode = row.product.code
  89. },
  90. onSubmit () {
  91. const _this = this
  92. this.$refs.ruleForm.validate(valid => {
  93. if (valid) {
  94. const params = JSON.parse(JSON.stringify(_this.form))
  95. _this.spinning = true
  96. settingCost(params).then(res => {
  97. if (res.status == 200) {
  98. _this.$message.success(res.message)
  99. _this.$emit('ok')
  100. _this.cansel()
  101. _this.spinning = false
  102. } else {
  103. _this.spinning = false
  104. }
  105. })
  106. } else {
  107. return false
  108. }
  109. })
  110. },
  111. cansel () {
  112. this.$emit('close')
  113. this.productName = ''
  114. this.productCode = ''
  115. this.$refs.ruleForm.resetFields()
  116. }
  117. },
  118. watch: {
  119. // 父页面传过来的弹框状态
  120. openModal (newValue, oldValue) {
  121. this.isShow = newValue
  122. },
  123. // 重定义的弹框状态
  124. isShow (newValue, oldValue) {
  125. if (!newValue) {
  126. this.$emit('close')
  127. }
  128. }
  129. }
  130. }
  131. </script>
  132. <style lang="less">
  133. .merchantInfoManagement-modal{
  134. .ant-modal-body {
  135. padding: 40px 40px 24px;
  136. }
  137. }
  138. </style>