basicInfoModal.vue 4.8 KB

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