basicInfoModal.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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. @cancle="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. <a-select
  21. placeholder="请选择供应商"
  22. allowClear
  23. v-model="form.supplierSn"
  24. :showSearch="true"
  25. option-filter-prop="children"
  26. :filter-option="filterOption">
  27. <a-select-option v-for="item in supplierList" :key="item.supplierSn" :value="item.supplierSn" :disabled="item.enableFlag==0">{{ item.supplierName }}</a-select-option>
  28. </a-select>
  29. </a-form-model-item>
  30. <a-form-model-item label="入库类型" prop="sparePartsType">
  31. <v-select
  32. v-model="form.sparePartsType"
  33. ref="sparePartsType"
  34. id="bulkWarehousingOrder-basicInfo-sparePartsType"
  35. code="SPARE_PARTS_TYPE"
  36. placeholder="请选择入库类型"
  37. allowClear></v-select>
  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 { VSelect } from '@/components'
  65. import { supplierAllList } from '@/api/supplier'
  66. import { sparePartsSave } from '@/api/spareParts'
  67. export default {
  68. name: 'BulkWarehousingOrderBasicInfoModal',
  69. components: { VSelect },
  70. props: {
  71. openModal: { // 弹框显示状态
  72. type: Boolean,
  73. default: false
  74. }
  75. },
  76. data () {
  77. return {
  78. isShow: this.openModal, // 是否打开弹框
  79. spinning: false,
  80. formItemLayout: {
  81. labelCol: { span: 5 },
  82. wrapperCol: { span: 16 }
  83. },
  84. form: {
  85. supplierSn: undefined, // 供应商
  86. sparePartsType: undefined, // 散件类型
  87. relationNo: '', // 关联单号
  88. remark: '' // 备注
  89. },
  90. rules: {
  91. supplierSn: [
  92. { required: true, message: '请选择供应商', trigger: 'change' }
  93. ],
  94. sparePartsType: [
  95. { required: true, message: '请选择入库类型', trigger: 'change' }
  96. ]
  97. },
  98. supplierList: [] // 供应商 下拉数据
  99. }
  100. },
  101. methods: {
  102. // 保存
  103. handleSave () {
  104. const _this = this
  105. this.$refs.ruleForm.validate(valid => {
  106. if (valid) {
  107. const form = JSON.parse(JSON.stringify(_this.form))
  108. _this.spinning = true
  109. sparePartsSave(form).then(res => {
  110. if (res.status == 200) {
  111. _this.$message.success(res.message)
  112. setTimeout(() => {
  113. _this.isShow = false
  114. _this.$emit('ok', res.data)
  115. _this.spinning = false
  116. }, 1000)
  117. } else {
  118. _this.spinning = false
  119. }
  120. })
  121. } else {
  122. console.log('error submit!!')
  123. return false
  124. }
  125. })
  126. },
  127. filterOption (input, option) {
  128. return (
  129. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  130. )
  131. },
  132. // 供应商下拉数据
  133. getSupplierList (val) {
  134. supplierAllList().then(res => {
  135. if (res.status == 200) {
  136. this.supplierList = res.data
  137. if (val) { // 需将新增加的供应商回填,即不需要用户再选一下
  138. this.form.supplierSn = this.supplierList[0].supplierSn
  139. this.$refs.ruleForm.clearValidate('supplierSn')
  140. }
  141. } else {
  142. this.supplierList = []
  143. }
  144. })
  145. }
  146. },
  147. watch: {
  148. // 父页面传过来的弹框状态
  149. openModal (newValue, oldValue) {
  150. this.isShow = newValue
  151. },
  152. // 重定义的弹框状态
  153. isShow (newValue, oldValue) {
  154. if (!newValue) {
  155. this.$emit('close')
  156. this.$refs.ruleForm.resetFields()
  157. } else {
  158. this.getSupplierList()
  159. }
  160. }
  161. }
  162. }
  163. </script>
  164. <style lang="less">
  165. .bulkWarehousingOrder-basicInfo-modal{
  166. .ant-modal-body {
  167. padding: 40px 40px 24px;
  168. }
  169. .btn-cont {
  170. text-align: center;
  171. margin: 35px 0 10px;
  172. }
  173. }
  174. </style>