basicInfoModal.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <a-modal
  3. centered
  4. class="allocateBill-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="allocateBill-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="调拨退货对象" prop="targetType">
  21. <v-select
  22. code="TARGET_TYPE"
  23. showType="radio"
  24. id="allocateBill-basicInfo-targetType"
  25. v-model="form.targetType"
  26. @change="targetTypeChange"
  27. allowClear
  28. placeholder="请选择调拨退货对象"></v-select>
  29. </a-form-model-item>
  30. <a-form-model-item label="调拨退货对象名称" :prop="isDealer ? 'targetSn' : 'targetName'">
  31. <a-select
  32. v-if="isDealer"
  33. show-search
  34. id="allocateBill-basicInfo-dealerName"
  35. v-model="form.targetSn"
  36. placeholder="请输入名称搜索经销商"
  37. :filter-option="false"
  38. :not-found-content="fetching ? undefined : null"
  39. @search="fetchUser"
  40. @change="handleChange"
  41. >
  42. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  43. <a-select-option v-for="item in dealerData" :key="item.dealerSn" :value="item.dealerSn">{{ item.dealerName }}</a-select-option>
  44. </a-select>
  45. <a-input v-if="!isDealer" v-model.trim="form.targetName" placeholder="请输入调拨退货对象名称(最多30个字符)" allowClear :maxLength="30" />
  46. </a-form-model-item>
  47. <a-form-model-item label="调拨退货类型" prop="allocateReturnTypeSn">
  48. <a-select id="allocateBill-basicInfo-allocateReturnTypeSn" v-model="form.allocateReturnTypeSn" placeholder="请选择调拨退货类型" allowClear >
  49. <a-select-option v-for="item in allocateTypeList" :key="item.allocateTypeSn" :value="item.allocateTypeSn">{{ item.name }}</a-select-option>
  50. </a-select>
  51. </a-form-model-item>
  52. <a-form-model-item label="是否抓单" prop="grabFlag">
  53. <v-select
  54. code="FLAG"
  55. showType="radio"
  56. :disabled="form.targetType !== 'DEALER'"
  57. id="allocateBill-basicInfo-grabFlag"
  58. v-model="form.grabFlag"
  59. allowClear
  60. placeholder="请选择"></v-select>
  61. </a-form-model-item>
  62. <a-form-model-item label="备注" prop="remark">
  63. <a-textarea id="allocateBill-basicInfo-remark" :maxLength="120" v-model="form.remarks" placeholder="请输入备注(最多120个字符)" allowClear />
  64. </a-form-model-item>
  65. </a-form-model>
  66. <div class="btn-cont">
  67. <a-button type="primary" id="allocateBill-basicInfo-modal-save" @click="handleSave">保存</a-button>
  68. <a-button id="allocateBill-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  69. </div>
  70. </a-spin>
  71. </a-modal>
  72. </template>
  73. <script>
  74. import debounce from 'lodash/debounce'
  75. import { VSelect } from '@/components'
  76. import { allocateReturnSave } from '@/api/allocateReturn'
  77. import { dealerSubareaScopeList } from '@/api/dealer'
  78. import { allocateTypeAllList } from '@/api/allocateType'
  79. export default {
  80. name: 'StoreTransferOutBasicInfoModal',
  81. components: { VSelect },
  82. props: {
  83. openModal: {
  84. // 弹框显示状态
  85. type: Boolean,
  86. default: false
  87. }
  88. },
  89. data () {
  90. this.fetchUser = debounce(this.fetchUser, 800)
  91. return {
  92. isShow: this.openModal, // 是否打开弹框
  93. spinning: false,
  94. formItemLayout: {
  95. labelCol: { span: 4 },
  96. wrapperCol: { span: 20 }
  97. },
  98. form: {
  99. targetType: 'DEALER',
  100. targetSn: undefined,
  101. targetName: '',
  102. allocateReturnTypeSn: undefined,
  103. grabFlag: '1',
  104. remarks: ''
  105. },
  106. rules: {
  107. targetType: [{ required: true, message: '请选择调往对象', trigger: 'change' }],
  108. targetSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }],
  109. targetName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }],
  110. allocateReturnTypeSn: [{ required: true, message: '请选择调拨类型', trigger: 'change' }],
  111. grabFlag: [{ required: true, message: '请选择是否抓单', trigger: 'change' }]
  112. },
  113. fetching: false,
  114. dealerData: [], // 经销商 下拉数据
  115. allocateTypeList: [] // 调拨类型
  116. }
  117. },
  118. computed: {
  119. // 当前所选调往对象是否为经销商
  120. isDealer () {
  121. return this.form.targetType == 'DEALER'
  122. }
  123. },
  124. methods: {
  125. // 搜索经销商
  126. fetchUser (value) {
  127. console.log('fetching user', value)
  128. this.fetching = true
  129. dealerSubareaScopeList({ nameLike: value, pageNo: 1, pageSize: 20 }).then(res => {
  130. if (res.status == 200) {
  131. this.dealerData = res.data && res.data.list ? res.data.list : []
  132. this.fetching = false
  133. } else {
  134. this.dealerData = []
  135. this.fetching = false
  136. }
  137. })
  138. },
  139. // 调往对象名称 change
  140. handleChange (value) {
  141. const ind = this.dealerData.findIndex(item => item.dealerSn == value)
  142. this.form.targetName = this.dealerData[ind].dealerName
  143. },
  144. // 保存
  145. handleSave () {
  146. const _this = this
  147. this.$refs.ruleForm.validate(valid => {
  148. if (valid) {
  149. const form = JSON.parse(JSON.stringify(_this.form))
  150. _this.spinning = true
  151. allocateReturnSave(form).then(res => {
  152. if (res.status == 200) {
  153. _this.$message.success(res.message)
  154. setTimeout(() => {
  155. _this.isShow = false
  156. _this.$emit('ok', res.data)
  157. _this.spinning = false
  158. }, 1000)
  159. } else {
  160. _this.spinning = false
  161. }
  162. })
  163. } else {
  164. console.log('error submit!!')
  165. return false
  166. }
  167. })
  168. },
  169. // 调往对象 change
  170. targetTypeChange (val) {
  171. console.log(val)
  172. this.$refs.ruleForm.resetFields()
  173. this.form.targetSn = undefined
  174. this.form.targetName = ''
  175. this.form.targetType = val
  176. if (val !== 'DEALER') {
  177. this.form.grabFlag = '0'
  178. }
  179. },
  180. // 调拨类型
  181. getAllocateTypeAllList () {
  182. allocateTypeAllList().then(res => {
  183. if (res.status == 200) {
  184. this.allocateTypeList = res.data
  185. } else {
  186. this.allocateTypeList = []
  187. }
  188. })
  189. }
  190. },
  191. watch: {
  192. // 父页面传过来的弹框状态
  193. openModal (newValue, oldValue) {
  194. this.isShow = newValue
  195. },
  196. // 重定义的弹框状态
  197. isShow (newValue, oldValue) {
  198. if (!newValue) {
  199. this.$emit('close')
  200. this.$refs.ruleForm.resetFields()
  201. } else {
  202. this.getAllocateTypeAllList()
  203. }
  204. }
  205. }
  206. }
  207. </script>
  208. <style lang="less">
  209. .allocateBill-basicInfo-modal {
  210. .ant-modal-body {
  211. padding: 40px 40px 24px;
  212. }
  213. .btn-cont {
  214. text-align: center;
  215. margin: 35px 0 10px;
  216. }
  217. }
  218. </style>