settingCost.vue 4.7 KB

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