basicInfoModal.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  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. @cancel="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. <department v-else-if="isDepartment" style="width: 100%;" placeholder="请选择部门" @change="departementChange" v-model="form.targetSn"></department>
  46. <a-input v-else v-model.trim="form.targetName" placeholder="请输入调拨退货对象名称(最多30个字符)" allowClear :maxLength="30" />
  47. </a-form-model-item>
  48. <a-form-model-item label="费用/调拨退货类型" prop="costTypeSn">
  49. <AllocateType id="allocateBill-basicInfo-allocateTypeSn" v-model="allocateTypeVal" placeholder="请选择费用/调拨退货类型" @change="allocateTypeChange"></AllocateType>
  50. </a-form-model-item>
  51. <a-form-model-item label="是否抓单" prop="grabFlag">
  52. <v-select
  53. code="FLAG"
  54. showType="radio"
  55. :disabled="form.targetType !== 'DEALER'"
  56. id="allocateBill-basicInfo-grabFlag"
  57. v-model="form.grabFlag"
  58. allowClear
  59. placeholder="请选择"></v-select>
  60. </a-form-model-item>
  61. <a-form-model-item label="备注" prop="remark">
  62. <a-textarea id="allocateBill-basicInfo-remark" :maxLength="120" v-model="form.remarks" placeholder="请输入备注(最多120个字符)" allowClear />
  63. </a-form-model-item>
  64. </a-form-model>
  65. <div class="btn-cont">
  66. <a-button type="primary" id="allocateBill-basicInfo-modal-save" @click="handleSave">保存</a-button>
  67. <a-button id="allocateBill-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  68. </div>
  69. </a-spin>
  70. </a-modal>
  71. </template>
  72. <script>
  73. import { commonMixin } from '@/utils/mixin'
  74. import debounce from 'lodash/debounce'
  75. import { VSelect } from '@/components'
  76. import { allocateReturnSave, allocateReturnQueryBySn } from '@/api/allocateReturn'
  77. import department from '@/views/expenseManagement/expenseReimbursement/department.js'
  78. import { dealerSubareaScopeList } from '@/api/dealer'
  79. import AllocateType from '@/views/common/allocateType.js'
  80. export default {
  81. name: 'TransferOutBasicInfoModal',
  82. components: { VSelect, AllocateType, department },
  83. mixins: [commonMixin],
  84. props: {
  85. openModal: {
  86. // 弹框显示状态
  87. type: Boolean,
  88. default: false
  89. }
  90. },
  91. data () {
  92. this.fetchUser = debounce(this.fetchUser, 800)
  93. return {
  94. isShow: this.openModal, // 是否打开弹框
  95. spinning: false,
  96. formItemLayout: {
  97. labelCol: { span: 4 },
  98. wrapperCol: { span: 20 }
  99. },
  100. allocateTypeVal: [],
  101. form: {
  102. targetType: 'DEALER',
  103. targetSn: undefined,
  104. targetName: '',
  105. costTypeSn: undefined,
  106. allocateSortSn: undefined,
  107. allocateReturnTypeSn: undefined,
  108. grabFlag: '1',
  109. remarks: ''
  110. },
  111. rules: {
  112. targetType: [{ required: true, message: '请选择调往对象', trigger: 'change' }],
  113. targetSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }],
  114. targetName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }],
  115. costTypeSn: [{ required: true, message: '请选择费用/调拨退货类型', trigger: 'change' }],
  116. grabFlag: [{ required: true, message: '请选择是否抓单', trigger: 'change' }]
  117. },
  118. fetching: false,
  119. dealerData: [] // 经销商 下拉数据
  120. }
  121. },
  122. computed: {
  123. // 当前所选调往对象是否为经销商
  124. isDealer () {
  125. return this.form.targetType == 'DEALER'
  126. },
  127. isDepartment () {
  128. return this.form.targetType == 'DEPARTMENT'
  129. }
  130. },
  131. methods: {
  132. // 搜索经销商
  133. fetchUser (value) {
  134. console.log('fetching user', value)
  135. this.fetching = true
  136. dealerSubareaScopeList({ nameLike: value, pageNo: 1, pageSize: 20 }).then(res => {
  137. if (res.status == 200) {
  138. this.dealerData = res.data && res.data.list ? res.data.list : []
  139. this.fetching = false
  140. } else {
  141. this.dealerData = []
  142. this.fetching = false
  143. }
  144. })
  145. },
  146. // 调往对象名称 change
  147. handleChange (value) {
  148. const ind = this.dealerData.findIndex(item => item.dealerSn == value)
  149. this.form.targetName = this.dealerData[ind].dealerName
  150. },
  151. departementChange (v, row) {
  152. console.log(v,row)
  153. this.form.targetName = row.name
  154. },
  155. // 调拨类别 change
  156. allocateTypeChange (val, opt) {
  157. console.log(val, opt, '------------')
  158. this.allocateTypeVal = val
  159. this.form.costTypeSn = val[0] ? val[0] : ''
  160. this.form.allocateSortSn = val[1] ? val[1] : ''
  161. this.form.allocateReturnTypeSn = val[2] ? val[2] : ''
  162. // 名称
  163. this.form.costTypeName = opt[0] ? opt[0].name : ''
  164. this.form.allocateSortName = opt[1] ? opt[1].name : ''
  165. this.form.allocateReturnTypeName = opt[2] ? opt[2].name : ''
  166. },
  167. // 基本信息
  168. getDetail (data, flag) {
  169. const _this = this
  170. this.spinning = true
  171. allocateReturnQueryBySn({ allocateReturnSn: data.allocateReturnSn }).then(res => {
  172. if (res.status == 200) {
  173. if (flag) {
  174. _this.isShow = false
  175. _this.$emit('ok', res.data)
  176. }
  177. }
  178. this.spinning = false
  179. })
  180. },
  181. // 保存
  182. handleSave () {
  183. const _this = this
  184. this.$refs.ruleForm.validate(valid => {
  185. if (valid) {
  186. const form = JSON.parse(JSON.stringify(_this.form))
  187. _this.spinning = true
  188. allocateReturnSave(form).then(res => {
  189. if (res.status == 200) {
  190. _this.$message.success(res.message)
  191. _this.getDetail(res.data, true)
  192. } else {
  193. _this.spinning = false
  194. }
  195. })
  196. } else {
  197. console.log('error submit!!')
  198. return false
  199. }
  200. })
  201. },
  202. // 调往对象 change
  203. targetTypeChange (val) {
  204. console.log(val)
  205. this.$refs.ruleForm.resetFields()
  206. this.form.targetSn = undefined
  207. this.form.targetName = ''
  208. this.form.targetType = val
  209. if (val !== 'DEALER') {
  210. this.form.grabFlag = '0'
  211. }
  212. },
  213. resetForm () {
  214. this.$refs.ruleForm.resetFields()
  215. this.form = {
  216. targetType: 'DEALER',
  217. targetSn: undefined,
  218. targetName: '',
  219. costTypeSn: undefined,
  220. allocateTypeSn: undefined,
  221. allocateReturnTypeSn: undefined,
  222. grabFlag: '1',
  223. remarks: ''
  224. }
  225. this.allocateTypeVal = []
  226. }
  227. },
  228. watch: {
  229. // 父页面传过来的弹框状态
  230. openModal (newValue, oldValue) {
  231. this.isShow = newValue
  232. },
  233. // 重定义的弹框状态
  234. isShow (newValue, oldValue) {
  235. if (!newValue) {
  236. this.resetForm()
  237. this.$emit('close')
  238. }
  239. }
  240. }
  241. }
  242. </script>
  243. <style lang="less">
  244. .allocateBill-basicInfo-modal {
  245. .ant-modal-body {
  246. padding: 40px 40px 24px;
  247. }
  248. .btn-cont {
  249. text-align: center;
  250. margin: 35px 0 10px;
  251. }
  252. }
  253. </style>