basicInfoModal.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <a-modal
  3. centered
  4. class="warehouseAllocation-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增散件入库单"
  8. v-model="isShow"
  9. @cancle="isShow = false"
  10. width="80%">
  11. <a-form-model
  12. id="warehouseAllocation-basicInfo-form"
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="rules"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol"
  18. >
  19. <a-form-model-item required label="调出仓库" prop="outWarehouseSn">
  20. <a-select
  21. id="warehouseAllocation-basicInfo-outWarehouseSn"
  22. allowClear
  23. placeholder="请选择调出仓库"
  24. v-model="form.outWarehouseSn"
  25. >
  26. <a-select-option v-for="item in warehouseList" :value="item.warehouseSn">
  27. {{ item.name }}
  28. </a-select-option>
  29. </a-select>
  30. </a-form-model-item>
  31. <a-form-model-item required label="调入仓库" prop="putWarehouseSn">
  32. <a-select
  33. id="warehouseAllocation-basicInfo-putWarehouseSn"
  34. allowClear
  35. placeholder="请选择调入仓库"
  36. v-model="form.putWarehouseSn"
  37. >
  38. <a-select-option v-for="item in warehouseList" :value="item.warehouseSn">
  39. {{ item.name }}
  40. </a-select-option>
  41. </a-select>
  42. </a-form-model-item>
  43. <a-form-model-item label="关联单号" prop="relevanceNo">
  44. <a-input id="warehouseAllocation-basicInfo-relevanceNo" :maxLength="120" v-model="form.relevanceNo" placeholder="请输入关联单号(最多120个字符)" allowClear />
  45. </a-form-model-item>
  46. <a-form-model-item label="备注" prop="remark">
  47. <a-textarea id="warehouseAllocation-basicInfo-remark" :maxLength="120" v-model="form.remark" placeholder="请输入备注(最多120个字符)" allowClear />
  48. </a-form-model-item>
  49. </a-form-model>
  50. <div class="btn-cont">
  51. <a-button type="primary" id="warehouseAllocation-basicInfo-modal-save" @click="handleSave">保存</a-button>
  52. <a-button id="warehouseAllocation-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  53. </div>
  54. </a-modal>
  55. </template>
  56. <script>
  57. import { VSelect } from '@/components'
  58. import { warehouseAllList } from '@/api/warehouse.js'
  59. import { allocWarehouseSave } from '@/api/allocWarehouse.js'
  60. export default {
  61. name: 'WarehouseAllocationBasicInfoModal',
  62. components: { VSelect },
  63. props: {
  64. openModal: {
  65. // 弹框显示状态
  66. type: Boolean,
  67. default: false
  68. }
  69. },
  70. watch: {
  71. // 父页面传过来的弹框状态
  72. openModal (newValue, oldValue) {
  73. this.isShow = newValue
  74. },
  75. // 重定义的弹框状态
  76. isShow (newValue, oldValue) {
  77. if (!newValue) {
  78. this.$emit('close')
  79. } else {
  80. this.getWarehouseList()
  81. }
  82. }
  83. },
  84. data () {
  85. return {
  86. isShow: this.openModal, // 是否打开弹框
  87. formItemLayout: {
  88. labelCol: { span: 6 },
  89. wrapperCol: { span: 16 }
  90. },
  91. form: {
  92. outWarehouseSn: undefined, // 调出仓库
  93. putWarehouseSn: undefined, // 调入仓库
  94. relevanceNo: '', // 关联单据号
  95. remark: '' // 备注
  96. },
  97. rules: {
  98. putWarehouseSn: [{ required: true, message: '请选择调入仓库', trigger: 'blur' }],
  99. outWarehouseSn: [{ required: true, message: '请选择调出仓库', trigger: 'blur' }]
  100. },
  101. warehouseList: [], // 仓库列表
  102. brandData: [] // 供应商 下拉数据
  103. }
  104. },
  105. methods: {
  106. // 获取仓库列表
  107. getWarehouseList () {
  108. warehouseAllList({}).then(res => {
  109. console.log(res, '-----仓库----')
  110. if (res.status == 200) {
  111. this.warehouseList = res.data || []
  112. } else {
  113. this.warehouseList = []
  114. }
  115. })
  116. },
  117. // 保存
  118. handleSave () {
  119. this.$refs['ruleForm'].validate(valid => {
  120. if (valid) {
  121. allocWarehouseSave(this.form).then(res => {
  122. if (res.status == 200) {
  123. this.isShow = false
  124. this.$emit('ok', res.data)
  125. }
  126. })
  127. } else {
  128. console.log('error submit!!')
  129. return false
  130. }
  131. })
  132. },
  133. filterOption (input, option) {
  134. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="less">
  140. .warehouseAllocation-basicInfo-modal {
  141. .ant-modal-body {
  142. padding: 40px 40px 24px;
  143. }
  144. .btn-cont {
  145. text-align: center;
  146. margin: 35px 0 10px;
  147. }
  148. }
  149. </style>