settingCost.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  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. @cancel="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 style="margin-bottom:10px;" label="产品名称">
  21. <div style="line-height:normal;padding-top:11px;">{{ productName }}</div>
  22. </a-form-model-item>
  23. <a-form-model-item style="margin-bottom:10px;" 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. ref="cost"
  35. @keyup.enter.native="onSubmit"
  36. style="width: 100%;" />
  37. </a-form-model-item>
  38. <div style="display: flex;justify-content: center;padding: 30px 0;">
  39. <a-button type="primary" @click="onSubmit">
  40. 确定
  41. </a-button>
  42. <a-button style="margin-left: 15px;" @click="cansel">
  43. 取消
  44. </a-button>
  45. </div>
  46. </a-form-model></a-spin>
  47. </a-form-model>
  48. </div>
  49. </a-modal>
  50. </template>
  51. <script>
  52. import { commonMixin } from '@/utils/mixin'
  53. import { VSelect } from '@/components'
  54. import { settingCost } from '@/api/supplier'
  55. export default {
  56. name: 'SettingCost',
  57. mixins: [commonMixin],
  58. components: { VSelect },
  59. props: {
  60. openModal: { // 弹框显示状态
  61. type: Boolean,
  62. default: false
  63. }
  64. },
  65. data () {
  66. return {
  67. isShow: this.openModal, // 是否打开弹框
  68. spinning: false,
  69. title: '设置成本价',
  70. labelCol: { span: 4 },
  71. wrapperCol: { span: 18 },
  72. productName: '',
  73. productCode: '',
  74. form: {
  75. supplierSn: '',
  76. supplierProductSn: '',
  77. cost: ''
  78. },
  79. rules: {
  80. cost: [
  81. { required: true, message: '请输入成本价', trigger: 'change' }
  82. ]
  83. }
  84. }
  85. },
  86. methods: {
  87. setData (row) {
  88. this.form.supplierSn = row.supplierSn
  89. this.form.supplierProductSn = row.supplierProductSn
  90. this.form.cost = row.cost
  91. this.productName = row.product.name
  92. this.productCode = row.product.code
  93. },
  94. onSubmit () {
  95. const _this = this
  96. this.$refs.ruleForm.validate(valid => {
  97. if (valid) {
  98. const params = JSON.parse(JSON.stringify(_this.form))
  99. _this.spinning = true
  100. settingCost(params).then(res => {
  101. if (res.status == 200) {
  102. _this.$message.success(res.message)
  103. _this.$emit('ok')
  104. _this.cansel()
  105. _this.spinning = false
  106. } else {
  107. _this.spinning = false
  108. }
  109. })
  110. } else {
  111. return false
  112. }
  113. })
  114. },
  115. cansel () {
  116. this.$emit('close')
  117. this.productName = ''
  118. this.productCode = ''
  119. this.$refs.ruleForm.resetFields()
  120. }
  121. },
  122. watch: {
  123. // 父页面传过来的弹框状态
  124. openModal (newValue, oldValue) {
  125. this.isShow = newValue
  126. if (newValue) {
  127. // 默认首项获取焦点
  128. const _this = this
  129. setTimeout(() => {
  130. if (_this.$refs['cost']) {
  131. _this.$refs['cost'].focus()
  132. }
  133. }, 300)
  134. }
  135. },
  136. // 重定义的弹框状态
  137. isShow (newValue, oldValue) {
  138. if (!newValue) {
  139. this.$emit('close')
  140. }
  141. }
  142. }
  143. }
  144. </script>
  145. <style lang="less">
  146. .merchantInfoManagement-modal{
  147. .ant-modal-body {
  148. padding: 40px 40px 24px;
  149. }
  150. }
  151. </style>