basicInfoModal.vue 6.9 KB

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