basicInfoModal.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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" :pyCode="item.pyCode" :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="remark">
  39. <a-textarea id="bulkReturnGoods-basicInfo-remark" :maxLength="120" v-model="form.remark" 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 { commonMixin } from '@/utils/mixin'
  53. import { VSelect } from '@/components'
  54. import supplierInfoEditModal from '@/views/supplierManagement/supplierInfo/editModal.vue'
  55. import { supplierAllList } from '@/api/supplier'
  56. import { sparePartsRetSave } from '@/api/sparePartsRet'
  57. export default {
  58. name: 'BulkReturnGoodsBasicInfoModal',
  59. components: { VSelect, supplierInfoEditModal },
  60. mixins: [commonMixin],
  61. props: {
  62. openModal: {
  63. // 弹框显示状态
  64. type: Boolean,
  65. default: false
  66. }
  67. },
  68. data () {
  69. return {
  70. spinning: false,
  71. isShow: this.openModal, // 是否打开弹框
  72. formItemLayout: {
  73. labelCol: { span: 4 },
  74. wrapperCol: { span: 18 }
  75. },
  76. form: {
  77. supplierSn: undefined,
  78. isGrab: '1',
  79. remark: ''
  80. },
  81. rules: {
  82. supplierSn: [ { required: true, message: '请选择供应商', trigger: 'change' } ],
  83. isGrab: [ { required: true, message: '请选择是否抓单', trigger: 'change' } ]
  84. },
  85. supplierList: [], // 供应商 下拉数据
  86. openSupplierModal: false // 供应商 弹框
  87. }
  88. },
  89. methods: {
  90. // 保存
  91. handleSave () {
  92. const _this = this
  93. this.$refs.ruleForm.validate(valid => {
  94. if (valid) {
  95. const form = JSON.parse(JSON.stringify(_this.form))
  96. _this.spinning = true
  97. sparePartsRetSave(form).then(res => {
  98. if (res.status == 200) {
  99. _this.$message.success(res.message)
  100. setTimeout(() => {
  101. _this.isShow = false
  102. _this.$emit('ok', res.data)
  103. _this.spinning = false
  104. }, 1000)
  105. } else {
  106. _this.spinning = false
  107. }
  108. })
  109. } else {
  110. console.log('error submit!!')
  111. return false
  112. }
  113. })
  114. },
  115. filterOption (input, option) {
  116. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
  117. option.data.attrs.pyCode.toLowerCase().indexOf(input.toLowerCase()) >= 0
  118. },
  119. // 新增供应商 成功
  120. handleOk () {
  121. // 获取供应商数据列表,并赋值
  122. this.getSupplierList('val')
  123. },
  124. // 关闭供应商弹框
  125. closeSupplierModal () {
  126. this.openSupplierModal = false
  127. },
  128. // 供应商下拉数据
  129. getSupplierList (val) {
  130. supplierAllList().then(res => {
  131. if (res.status == 200) {
  132. this.supplierList = res.data
  133. if (val) { // 需将新增加的供应商回填,即不需要用户再选一下
  134. this.form.supplierSn = this.supplierList[0].supplierSn
  135. this.$refs.ruleForm.clearValidate('supplierSn')
  136. }
  137. } else {
  138. this.supplierList = []
  139. }
  140. })
  141. }
  142. },
  143. watch: {
  144. // 父页面传过来的弹框状态
  145. openModal (newValue, oldValue) {
  146. this.isShow = newValue
  147. },
  148. // 重定义的弹框状态
  149. isShow (newValue, oldValue) {
  150. if (!newValue) {
  151. this.$emit('close')
  152. this.$refs.ruleForm.resetFields()
  153. } else {
  154. this.getSupplierList()
  155. }
  156. }
  157. }
  158. }
  159. </script>
  160. <style lang="less">
  161. .bulkReturnGoods-basicInfo-modal {
  162. .ant-modal-body {
  163. padding: 40px 40px 24px;
  164. }
  165. .btn-cont {
  166. text-align: center;
  167. margin: 35px 0 10px;
  168. }
  169. }
  170. </style>