basicInfoModal.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <a-modal
  3. centered
  4. class="bulkWarehousingOrder-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增散件入库单"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="bulkWarehousingOrder-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="supplierSn">
  20. <supplier v-model="form.supplierSn" placeholder="请输入供应商名称"></supplier>
  21. </a-form-model-item>
  22. <a-form-model-item label="入库类型" prop="sparePartsType">
  23. <v-select
  24. v-model="form.sparePartsType"
  25. ref="sparePartsType"
  26. id="bulkWarehousingOrder-basicInfo-sparePartsType"
  27. code="SPARE_PARTS_TYPE"
  28. placeholder="请选择入库类型"
  29. allowClear></v-select>
  30. </a-form-model-item>
  31. <a-form-model-item label="关联单号" prop="relationNo">
  32. <a-input
  33. id="bulkWarehousingOrder-relationNo"
  34. :maxLength="30"
  35. v-model.trim="form.relationNo"
  36. placeholder="请输入关联单号(最多30个字符)"
  37. allowClear />
  38. </a-form-model-item>
  39. <a-form-model-item label="入库备注" prop="remark">
  40. <a-textarea
  41. id="bulkWarehousingOrder-remark"
  42. :maxLength="30"
  43. v-model="form.remark"
  44. placeholder="请输入备注(最多30个字符)"
  45. allowClear />
  46. </a-form-model-item>
  47. </a-form-model>
  48. <div class="btn-cont">
  49. <a-button type="primary" id="bulkWarehousingOrder-basicInfo-modal-save" @click="handleSave">保存</a-button>
  50. <a-button id="bulkWarehousingOrder-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  51. </div>
  52. </a-spin>
  53. </a-modal>
  54. </template>
  55. <script>
  56. import { commonMixin } from '@/utils/mixin'
  57. import { VSelect } from '@/components'
  58. import { sparePartsSave } from '@/api/spareParts'
  59. import supplier from '@/views/common/supplier.js'
  60. export default {
  61. name: 'BulkWarehousingOrderBasicInfoModal',
  62. mixins: [commonMixin],
  63. components: { VSelect, supplier },
  64. props: {
  65. openModal: { // 弹框显示状态
  66. type: Boolean,
  67. default: false
  68. }
  69. },
  70. data () {
  71. return {
  72. isShow: this.openModal, // 是否打开弹框
  73. spinning: false,
  74. formItemLayout: {
  75. labelCol: { span: 5 },
  76. wrapperCol: { span: 16 }
  77. },
  78. form: {
  79. supplierSn: undefined, // 供应商
  80. sparePartsType: undefined, // 散件类型
  81. relationNo: '', // 关联单号
  82. remark: '' // 备注
  83. },
  84. rules: {
  85. supplierSn: [
  86. { required: true, message: '请选择供应商', trigger: 'change' }
  87. ],
  88. sparePartsType: [
  89. { required: true, message: '请选择入库类型', trigger: 'change' }
  90. ]
  91. },
  92. supplierList: [] // 供应商 下拉数据
  93. }
  94. },
  95. methods: {
  96. // 保存
  97. handleSave () {
  98. const _this = this
  99. this.$refs.ruleForm.validate(valid => {
  100. if (valid) {
  101. const form = JSON.parse(JSON.stringify(_this.form))
  102. _this.spinning = true
  103. sparePartsSave(form).then(res => {
  104. if (res.status == 200) {
  105. _this.$message.success(res.message)
  106. setTimeout(() => {
  107. _this.isShow = false
  108. _this.$emit('ok', res.data)
  109. _this.spinning = false
  110. }, 1000)
  111. } else {
  112. _this.spinning = false
  113. }
  114. })
  115. } else {
  116. console.log('error submit!!')
  117. return false
  118. }
  119. })
  120. }
  121. },
  122. watch: {
  123. // 父页面传过来的弹框状态
  124. openModal (newValue, oldValue) {
  125. this.isShow = newValue
  126. },
  127. // 重定义的弹框状态
  128. isShow (newValue, oldValue) {
  129. if (!newValue) {
  130. this.$emit('close')
  131. this.$refs.ruleForm.resetFields()
  132. }
  133. }
  134. }
  135. }
  136. </script>
  137. <style lang="less">
  138. .bulkWarehousingOrder-basicInfo-modal{
  139. .ant-modal-body {
  140. padding: 40px 40px 24px;
  141. }
  142. .btn-cont {
  143. text-align: center;
  144. margin: 35px 0 10px;
  145. }
  146. }
  147. </style>