basicInfoModal.vue 5.6 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="80%">
  11. <a-form-model
  12. id="bulkWarehousingOrder-basicInfo-form"
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="rules"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol" >
  18. <a-form-model-item label="供应商" prop="supplierSn">
  19. <a-select
  20. placeholder="请输入名称查询,如果没有请点击 '+' 新增"
  21. allowClear
  22. v-model="form.supplierSn"
  23. :showSearch="true"
  24. option-filter-prop="children"
  25. :filter-option="filterOption"
  26. style="width: 80%;">
  27. <a-select-option v-for="item in supplierList" :key="item.supplierSn" :value="item.supplierSn" :disabled="item.enabledFlag==0">{{ item.supplierName }}</a-select-option>
  28. </a-select>
  29. <a-button icon="plus" size="small" @click="openSupplierModal=true" id="bulkWarehousingOrder-basicInfo-add-btn" style="margin-left: 10px;"></a-button>
  30. </a-form-model-item>
  31. <a-form-model-item label="散件入库类型" prop="sparePartsType">
  32. <a-select id="bulkWarehousingOrder-basicInfo-sparePartsType" placeholder="请选择散件入库类型" allowClear v-model="form.sparePartsType">
  33. <a-select-option v-for="item in sparePartsPutTypeList" :key="item.sparePartsPutTypeSn" :value="item.sparePartsPutTypeSn">{{ item.name }}</a-select-option>
  34. </a-select>
  35. </a-form-model-item>
  36. <a-form-model-item label="备注" prop="remarks">
  37. <a-textarea
  38. id="bulkWarehousingOrder-remarks"
  39. :maxLength="200"
  40. v-model="form.remarks"
  41. placeholder="请输入备注(最多200个字符)"
  42. allowClear />
  43. </a-form-model-item>
  44. </a-form-model>
  45. <div class="btn-cont">
  46. <a-button type="primary" id="bulkWarehousingOrder-basicInfo-modal-save" @click="handleSave">保存</a-button>
  47. <a-button id="bulkWarehousingOrder-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  48. </div>
  49. <!-- 供应商 -->
  50. <supplier-info-edit-modal :openModal="openSupplierModal" @close="closeSupplierModal" />
  51. </a-modal>
  52. </template>
  53. <script>
  54. import { VSelect } from '@/components'
  55. import supplierInfoEditModal from '@/views/supplierManagement/supplierInfo/editModal.vue'
  56. import { supplierAllList } from '@/api/supplier'
  57. import { sparePartsPutTypeAllList } from '@/api/sparePartsPutType'
  58. import { sparePartsPurSave } from '@/api/sparePartsPur'
  59. export default {
  60. name: 'BulkWarehousingOrderBasicInfoModal',
  61. components: { VSelect, supplierInfoEditModal },
  62. props: {
  63. openModal: { // 弹框显示状态
  64. type: Boolean,
  65. default: false
  66. }
  67. },
  68. data () {
  69. return {
  70. isShow: this.openModal, // 是否打开弹框
  71. formItemLayout: {
  72. labelCol: { span: 6 },
  73. wrapperCol: { span: 16 }
  74. },
  75. form: {
  76. supplierSn: undefined, // 供应商
  77. sparePartsType: undefined, // 散件类型
  78. remarks: '' // 备注
  79. },
  80. rules: {
  81. supplierSn: [
  82. { required: true, message: '请选择供应商', trigger: 'change' }
  83. ],
  84. sparePartsType: [
  85. { required: true, message: '请选择散件入库类型', trigger: 'change' }
  86. ]
  87. },
  88. supplierList: [], // 供应商 下拉数据
  89. sparePartsPutTypeList: [], // 散件入库类型 下拉数据
  90. openSupplierModal: false // 供应商 弹框
  91. }
  92. },
  93. methods: {
  94. // 保存
  95. handleSave () {
  96. const _this = this
  97. this.$refs.ruleForm.validate(valid => {
  98. if (valid) {
  99. const form = JSON.parse(JSON.stringify(_this.form))
  100. sparePartsPurSave(form).then(res => {
  101. if (res.status == 200) {
  102. _this.$message.success(res.message)
  103. setTimeout(() => {
  104. _this.isShow = false
  105. _this.$emit('ok', res.data)
  106. }, 1000)
  107. }
  108. })
  109. } else {
  110. console.log('error submit!!')
  111. return false
  112. }
  113. })
  114. },
  115. filterOption (input, option) {
  116. return (
  117. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  118. )
  119. },
  120. // 供应商下拉数据
  121. getSupplierList () {
  122. supplierAllList().then(res => {
  123. if (res.status == 200) {
  124. this.supplierList = res.data
  125. } else {
  126. this.supplierList = []
  127. }
  128. })
  129. },
  130. // 散件入库类型下拉数据
  131. getSparePartsPutTypeList () {
  132. sparePartsPutTypeAllList().then(res => {
  133. if (res.status == 200) {
  134. this.sparePartsPutTypeList = res.data
  135. } else {
  136. this.sparePartsPutTypeList = []
  137. }
  138. })
  139. },
  140. // 关闭供应商弹框
  141. closeSupplierModal () {
  142. this.openSupplierModal = false
  143. this.getSupplierList()
  144. }
  145. },
  146. watch: {
  147. // 父页面传过来的弹框状态
  148. openModal (newValue, oldValue) {
  149. this.isShow = newValue
  150. },
  151. // 重定义的弹框状态
  152. isShow (newValue, oldValue) {
  153. if (!newValue) {
  154. this.$emit('close')
  155. this.$refs.ruleForm.resetFields()
  156. } else {
  157. this.getSupplierList()
  158. this.getSparePartsPutTypeList()
  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>