editHwModal.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <a-modal
  3. centered
  4. class="shelfSet-newHw-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="600">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="shelfSet-newHw-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol">
  19. <a-form-model-item label="产品编码">{{ nowData&&nowData.productVO.code || '--' }}</a-form-model-item>
  20. <a-form-model-item label="产品名称">{{ nowData&&nowData.productVO.name || '--' }}</a-form-model-item>
  21. <a-form-model-item label="货位编号" prop="stackPlaceCode">
  22. <a-input v-model="form.stackPlaceCode" placeholder="请输入货位编号(最多10个字符)"></a-input>
  23. </a-form-model-item>
  24. </a-form-model>
  25. <div class="btn-cont">
  26. <a-button type="primary" id="shelfSet-newHw-modal-save" @click="handleSave">保存</a-button>
  27. <a-button id="shelfSet-newHw-modal-back" @click="isShow=false" style="margin-left: 15px;">取消</a-button>
  28. </div>
  29. </a-spin>
  30. </a-modal>
  31. </template>
  32. <script>
  33. import { commonMixin } from '@/utils/mixin'
  34. import { stackPlaceSave } from '@/api/product'
  35. export default {
  36. name: 'EditHwModal',
  37. mixins: [commonMixin],
  38. props: {
  39. openModal: { // 弹框显示状态
  40. type: Boolean,
  41. default: false
  42. },
  43. type: {
  44. type: String,
  45. default: 'edit'
  46. },
  47. nowData: {
  48. type: Object,
  49. default: () => {
  50. return {}
  51. }
  52. }
  53. },
  54. data () {
  55. return {
  56. spinning: false,
  57. isShow: this.openModal, // 是否打开弹框
  58. formItemLayout: {
  59. labelCol: { span: 4 },
  60. wrapperCol: { span: 18 }
  61. },
  62. form: {
  63. shelfPlaceCode: '',
  64. productSn: undefined,
  65. productCode: undefined,
  66. price: '',
  67. cost: '',
  68. maxQty: ''
  69. },
  70. rules: {
  71. shelfPlaceCode: [
  72. { required: true, message: '请输入货位编号', trigger: 'blur' }
  73. ]
  74. },
  75. productName: ''
  76. }
  77. },
  78. methods: {
  79. // 保存
  80. handleSave () {
  81. const _this = this
  82. this.$refs.ruleForm.validate(valid => {
  83. if (valid) {
  84. const form = JSON.parse(JSON.stringify(_this.form))
  85. const params = {
  86. 'stackPlaceCode': form.stackPlaceCode,
  87. 'product': {
  88. 'productSn': _this.nowData.productVO.productSn
  89. }
  90. }
  91. // 开始提交数据
  92. _this.spinning = true
  93. stackPlaceSave(params).then(res => {
  94. if (res.status == 200) {
  95. _this.$message.success(res.message)
  96. _this.isShow = false
  97. _this.$emit('ok', res.data)
  98. _this.spinning = false
  99. } else {
  100. _this.spinning = false
  101. }
  102. })
  103. } else {
  104. return false
  105. }
  106. })
  107. },
  108. resetData () {
  109. this.form.stackPlaceCode = undefined
  110. this.$refs.ruleForm.resetFields()
  111. }
  112. },
  113. watch: {
  114. // 父页面传过来的弹框状态
  115. openModal (newValue, oldValue) {
  116. this.isShow = newValue
  117. },
  118. // 重定义的弹框状态
  119. isShow (newValue, oldValue) {
  120. if (!newValue) {
  121. this.$emit('close')
  122. this.resetData()
  123. } else {
  124. if (this.type == 'edit') {
  125. this.form.stackPlaceCode = this.nowData.stackPlaceCode
  126. }
  127. }
  128. }
  129. }
  130. }
  131. </script>
  132. <style lang="less">
  133. .shelfSet-newHw-modal {
  134. .ant-modal-body {
  135. padding: 40px 40px 24px;
  136. }
  137. .ant-form-item{
  138. margin-bottom: 15px;
  139. }
  140. .btn-cont {
  141. text-align: center;
  142. margin: 35px 0 10px;
  143. }
  144. }
  145. </style>