basicInfoModal.vue 5.0 KB

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