settingCost.vue 4.1 KB

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