basicInfoModal.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <a-modal
  3. centered
  4. class="bulkReturnGoods-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="bulkReturnGoods-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. style="width: 80%;">
  28. <a-select-option v-for="item in supplierList" :key="item.supplierSn" :value="item.supplierSn" :disabled="item.enabledFlag==0">{{ item.supplierName }}</a-select-option>
  29. </a-select>
  30. <a-button icon="plus" size="small" @click="openSupplierModal=true" id="bulkWarehousingOrder-basicInfo-add-btn" style="margin-left: 10px;"></a-button>
  31. </a-form-model-item>
  32. <a-form-model-item label="是否抓单" prop="isGrab">
  33. <a-radio-group v-model="form.isGrab">
  34. <a-radio value="1">是</a-radio>
  35. <a-radio value="0">否</a-radio>
  36. </a-radio-group>
  37. </a-form-model-item>
  38. <a-form-model-item label="备注" prop="remarks">
  39. <a-textarea id="bulkReturnGoods-basicInfo-remarks" :maxLength="120" v-model="form.remarks" placeholder="请输入备注(最多120个字符)" allowClear />
  40. </a-form-model-item>
  41. </a-form-model>
  42. <div class="btn-cont">
  43. <a-button type="primary" id="bulkReturnGoods-basicInfo-modal-save" @click="handleSave">保存</a-button>
  44. <a-button id="bulkReturnGoods-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  45. </div>
  46. </a-spin>
  47. <!-- 供应商 -->
  48. <supplier-info-edit-modal :openModal="openSupplierModal" @close="closeSupplierModal" @ok="handleOk" :isState="false" />
  49. </a-modal>
  50. </template>
  51. <script>
  52. import { VSelect } from '@/components'
  53. import supplierInfoEditModal from '@/views/supplierManagement/supplierInfo/editModal.vue'
  54. import { supplierAllList } from '@/api/supplier'
  55. import { sparePartsRetSave } from '@/api/sparePartsRet'
  56. export default {
  57. name: 'BulkReturnGoodsBasicInfoModal',
  58. components: { VSelect, supplierInfoEditModal },
  59. props: {
  60. openModal: {
  61. // 弹框显示状态
  62. type: Boolean,
  63. default: false
  64. }
  65. },
  66. data () {
  67. return {
  68. spinning: false,
  69. isShow: this.openModal, // 是否打开弹框
  70. formItemLayout: {
  71. labelCol: { span: 4 },
  72. wrapperCol: { span: 18 }
  73. },
  74. form: {
  75. supplierSn: undefined,
  76. isGrab: '1',
  77. remarks: ''
  78. },
  79. rules: {
  80. supplierSn: [ { required: true, message: '请选择供应商', trigger: 'change' } ],
  81. isGrab: [ { required: true, message: '请选择是否抓单', trigger: 'change' } ]
  82. },
  83. supplierList: [], // 供应商 下拉数据
  84. openSupplierModal: false // 供应商 弹框
  85. }
  86. },
  87. methods: {
  88. // 保存
  89. handleSave () {
  90. const _this = this
  91. this.$refs.ruleForm.validate(valid => {
  92. if (valid) {
  93. const form = JSON.parse(JSON.stringify(_this.form))
  94. _this.spinning = true
  95. sparePartsRetSave(form).then(res => {
  96. if (res.status == 200) {
  97. _this.$message.success(res.message)
  98. setTimeout(() => {
  99. _this.isShow = false
  100. _this.$emit('ok', res.data)
  101. _this.spinning = false
  102. }, 1000)
  103. } else {
  104. _this.spinning = false
  105. }
  106. })
  107. } else {
  108. console.log('error submit!!')
  109. return false
  110. }
  111. })
  112. },
  113. filterOption (input, option) {
  114. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  115. },
  116. // 新增供应商 成功
  117. handleOk () {
  118. // 获取供应商数据列表,并赋值
  119. this.getSupplierList('val')
  120. },
  121. // 关闭供应商弹框
  122. closeSupplierModal () {
  123. this.openSupplierModal = false
  124. },
  125. // 供应商下拉数据
  126. getSupplierList (val) {
  127. supplierAllList().then(res => {
  128. if (res.status == 200) {
  129. this.supplierList = res.data
  130. if (val) { // 需将新增加的供应商回填,即不需要用户再选一下
  131. this.form.supplierSn = this.supplierList[0].supplierSn
  132. this.$refs.ruleForm.clearValidate('supplierSn')
  133. }
  134. } else {
  135. this.supplierList = []
  136. }
  137. })
  138. }
  139. },
  140. watch: {
  141. // 父页面传过来的弹框状态
  142. openModal (newValue, oldValue) {
  143. this.isShow = newValue
  144. },
  145. // 重定义的弹框状态
  146. isShow (newValue, oldValue) {
  147. if (!newValue) {
  148. this.$emit('close')
  149. this.$refs.ruleForm.resetFields()
  150. } else {
  151. this.getSupplierList()
  152. }
  153. }
  154. }
  155. }
  156. </script>
  157. <style lang="less">
  158. .bulkReturnGoods-basicInfo-modal {
  159. .ant-modal-body {
  160. padding: 40px 40px 24px;
  161. }
  162. .btn-cont {
  163. text-align: center;
  164. margin: 35px 0 10px;
  165. }
  166. }
  167. </style>