basicInfoModal.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <a-modal
  3. centered
  4. class="shelfSet-basicInfo-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-basicInfo-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="货架名称" prop="shelfSn">
  20. <shelfSList v-model="form.shelfSn" @change="shelfChange"></shelfSList>
  21. </a-form-model-item>
  22. </a-form-model>
  23. <div class="btn-cont">
  24. <a-button type="primary" id="importGuide-nextStep" @click="handlerNextStep">下一步</a-button>
  25. <a-button id="shelfSet-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  26. </div>
  27. </a-spin>
  28. <!-- 新增回调单(实现新增) -->
  29. <add-recall-bill-modal :recallBillInfo="detailObj" :openModal="showRecallBill" @ok="handleInfoOk" @close="showRecallBill=false"></add-recall-bill-modal>
  30. </a-modal>
  31. </template>
  32. <script>
  33. import { commonMixin } from '@/utils/mixin'
  34. import { VSelect } from '@/components'
  35. import custList from '@/views/common/custList.vue'
  36. import shelfSList from '@/views/common/shelfList'
  37. import addRecallBillModal from './addRecallBillModal.vue'
  38. export default {
  39. name: 'ShelfSetBasicInfoModal',
  40. components: { VSelect, custList, shelfSList, addRecallBillModal },
  41. mixins: [commonMixin],
  42. props: {
  43. openModal: { // 弹框显示状态
  44. type: Boolean,
  45. default: false
  46. },
  47. nowData: {
  48. type: Object,
  49. default: () => {
  50. return {}
  51. }
  52. },
  53. type: {
  54. type: [String, Number],
  55. default: '1'
  56. }
  57. },
  58. data () {
  59. return {
  60. spinning: false,
  61. isShow: this.openModal, // 是否打开弹框
  62. formItemLayout: {
  63. labelCol: { span: 5 },
  64. wrapperCol: { span: 17 }
  65. },
  66. form: {
  67. shelfSn: undefined
  68. },
  69. rules: {
  70. shelfSn: [{ required: true, message: '请选择需要调回产品货架', trigger: 'change' }]
  71. },
  72. showRecallBill: false, // 显示选择货架弹窗
  73. detailObj: {
  74. shelfName: '',
  75. shelfSn: ''
  76. }
  77. }
  78. },
  79. methods: {
  80. shelfChange (v, row) {
  81. this.detailObj.shelfName = row ? row.shelfName : ''
  82. },
  83. // 下一步 保存货架信息
  84. handlerNextStep () {
  85. this.$refs.ruleForm.validate(valid => {
  86. if (valid) {
  87. this.detailObj.shelfSn = this.form.shelfSn
  88. this.showRecallBill = true
  89. } else {
  90. console.log('error submit!!')
  91. return false
  92. }
  93. })
  94. },
  95. // 新增调货单成功
  96. handleInfoOk () {
  97. this.$emit('ok')
  98. this.isShow = false
  99. }
  100. },
  101. watch: {
  102. // 父页面传过来的弹框状态
  103. openModal (newValue, oldValue) {
  104. this.isShow = newValue
  105. },
  106. // 重定义的弹框状态
  107. isShow (newValue, oldValue) {
  108. if (!newValue) {
  109. this.$emit('close')
  110. this.$refs.ruleForm.resetFields()
  111. }
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="less">
  117. .shelfSet-basicInfo-modal {
  118. .ant-modal-body {
  119. padding: 40px 40px 24px;
  120. }
  121. .ant-form-item{
  122. margin-bottom: 15px;
  123. }
  124. .btn-cont {
  125. text-align: center;
  126. margin: 35px 0 10px;
  127. }
  128. }
  129. </style>