fcDetailModal.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. width="60%"
  8. :footer="null"
  9. @cancel="cancel"
  10. >
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="rules"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol">
  18. <a-row>
  19. <a-col :span="12">
  20. <a-form-model-item style="margin-bottom:5px;" label="收款日期" prop="receiptDate">
  21. <a-date-picker inputReadOnly style="width:100%" format="YYYY-MM-DD" v-model="form.receiptDate" placeholder="请选择收款日期" />
  22. </a-form-model-item>
  23. </a-col>
  24. <a-col :span="12">
  25. <a-form-model-item style="margin-bottom:5px;" label="付款方类型" prop="payerType">
  26. <v-select
  27. v-model="form.payerType"
  28. showType="radio"
  29. code="PAYER_TYPE"
  30. placeholder="请选择付款方类型"
  31. @change="payerTypeChange"
  32. ></v-select>
  33. </a-form-model-item>
  34. </a-col>
  35. </a-row>
  36. <!-- 经销售 -->
  37. <a-row v-if="form.payerType=='DEALER'" >
  38. <a-col :span="12">
  39. <a-form-model-item style="margin-bottom:5px;" label="付款方" prop="dealerSn">
  40. <dealerSubareaScopeList ref="settleClientName" @change="custChange" />
  41. </a-form-model-item>
  42. </a-col>
  43. <a-col :span="12">
  44. <a-form-model-item style="margin-bottom:5px;" label="付款账户类型" prop="payerAccountType">
  45. <v-select
  46. v-model="form.payerAccountType"
  47. showType="radio"
  48. code="PAYER_ACCOUNT_TYPE"
  49. placeholder="请选择付款账户类型"
  50. @change="accountTypeChange"
  51. ></v-select>
  52. </a-form-model-item>
  53. </a-col>
  54. </a-row>
  55. <a-row v-if="form.payerType=='DEALER'" >
  56. <!-- 公户 -->
  57. <a-col :span="12" v-if="form.payerAccountType=='PUBLIC'">
  58. <a-form-model-item style="margin-bottom:5px;" label="营业执照名称">
  59. <a-input :maxLength="30" placeholder="请输入营业执照名称" v-model="form.payerAccountInfo"></a-input>
  60. </a-form-model-item>
  61. </a-col>
  62. <!-- 私户 -->
  63. <a-col :span="12" v-if="form.payerAccountType=='PRIVATE'">
  64. <a-form-model-item style="margin-bottom:5px;" label="付款账户">
  65. <a-input :maxLength="30" placeholder="付款账户" v-model="form.payerAccountInfo"></a-input>
  66. </a-form-model-item>
  67. </a-col>
  68. <a-col :span="12">
  69. <a-form-model-item style="margin-bottom:5px;" label="财务编码">
  70. {{ form.dealerCode||'--' }}
  71. </a-form-model-item>
  72. </a-col>
  73. </a-row>
  74. <!-- 部门或其它 -->
  75. <a-row v-if="form.payerType=='DEPT'" >
  76. <a-col :span="12">
  77. <a-form-model-item style="margin-bottom:5px;" label="付款方" prop="payerName">
  78. <a-input :maxLength="30" placeholder="请输入付款方名称" v-model="form.payerName"></a-input>
  79. </a-form-model-item>
  80. </a-col>
  81. <a-col :span="12">
  82. <a-form-model-item style="margin-bottom:5px;" label="付款账户">
  83. <a-input :maxLength="30" placeholder="付款账户" v-model="form.payerAccountInfo"></a-input>
  84. </a-form-model-item>
  85. </a-col>
  86. </a-row>
  87. <a-divider />
  88. <a-row>
  89. <a-col :span="12">
  90. <a-form-model-item style="margin-bottom:5px;" label="订单金额">
  91. <a-input-number
  92. style="width:100%"
  93. :min="0"
  94. :max="999999"
  95. :precision="2"
  96. placeholder="请输入订单金额"
  97. v-model="form.orderAmount"></a-input-number>
  98. </a-form-model-item>
  99. </a-col>
  100. <a-col :span="12">
  101. <a-form-model-item style="margin-bottom:5px;" label="收款金额">
  102. <a-input-number
  103. style="width:100%"
  104. :min="0"
  105. :max="999999"
  106. :precision="2"
  107. placeholder="请输入收款金额"
  108. v-model="form.receiptAmount"></a-input-number>
  109. </a-form-model-item>
  110. </a-col>
  111. <a-col :span="12">
  112. <a-form-model-item style="margin-bottom:5px;" label="使用授信">
  113. <a-checkbox v-model="form.useCreditFlag" @change="form.detailItemUseList=[]">是</a-checkbox>
  114. <span v-if="form.useCreditFlag">合计: {{ useTotalAmount||'--' }}</span>
  115. </a-form-model-item>
  116. </a-col>
  117. <a-col :span="12">
  118. <a-form-model-item style="margin-bottom:5px;" label="授信还款">
  119. <a-checkbox v-model="form.payCreditFlag" @change="form.detailItemPayList=[]">是</a-checkbox>
  120. <span v-if="form.payCreditFlag">合计: {{ payTotalAmount||'--' }}</span>
  121. </a-form-model-item>
  122. </a-col>
  123. <a-col :span="12">
  124. <a-form-model-item style="margin-bottom:5px;" label="余款抵扣">
  125. <a-input-number
  126. style="width:100%"
  127. :min="0"
  128. :max="999999"
  129. :precision="2"
  130. placeholder="请输入余款抵扣"
  131. v-model="form.balanceAmount"></a-input-number>
  132. </a-form-model-item>
  133. </a-col>
  134. <a-col :span="12">
  135. <a-form-model-item style="margin-bottom:5px;" label="跨月打款">
  136. <a-input-number
  137. style="width:100%"
  138. :min="0"
  139. :max="999999"
  140. :precision="2"
  141. placeholder="请输入跨月打款金额"
  142. v-model="form.nextMonthAmount"></a-input-number>
  143. </a-form-model-item>
  144. </a-col>
  145. <a-col :span="12">
  146. <a-form-model-item style="margin-bottom:5px;" label="户名">
  147. <a-select placeholder="请选择户名" v-model="form.bankAccount" style="width: 100%" @change="handleChange">
  148. <a-select-option v-for="item in bankList" :value="item.bankAccount">
  149. {{ item.bankAccount }}
  150. </a-select-option>
  151. </a-select>
  152. </a-form-model-item>
  153. </a-col>
  154. <a-col :span="12">
  155. <a-form-model-item style="margin-bottom:5px;" label="汇入银行">
  156. <a-select placeholder="请选择汇入银行" v-model="form.bankName" style="width: 100%">
  157. <a-select-option v-for="item in bankNameList" :value="item">
  158. {{ item }}
  159. </a-select-option>
  160. </a-select>
  161. </a-form-model-item>
  162. </a-col>
  163. <a-col :span="12">
  164. <a-form-model-item style="margin-bottom:5px;" label="足额打款">
  165. <v-select
  166. v-model="form.fullPaymentFlag"
  167. code="FLAG"
  168. placeholder="请选择是否足额打款"
  169. allowClear></v-select>
  170. </a-form-model-item>
  171. </a-col>
  172. <a-col :span="24">
  173. <a-form-model-item style="margin-bottom:5px;" label="备注" :labelCol="{span:3}" :wrapper-col="{ span: 20 }">
  174. <a-textarea :rows="2" :maxLength="500" placeholder="请输入备注(最多500个字符)" v-model="form.remarks"></a-textarea>
  175. </a-form-model-item>
  176. </a-col>
  177. <!-- 使用授信列表 -->
  178. <a-col :span="22" :offset="1" v-if="form.useCreditFlag">
  179. <div style="padding:10px 0">使用授信项目:</div>
  180. <fcDetailSxItem title="使用授信" @updateItemAmount="updateUseAmount" :list="form.detailItemUseList" ref="useCreditItem"></fcDetailSxItem>
  181. </a-col>
  182. <!-- 授信还款列表 -->
  183. <a-col :span="22" :offset="1" v-if="form.payCreditFlag">
  184. <div style="padding:10px 0">授信还款项目:</div>
  185. <fcDetailSxItem title="授信还款" @updateItemAmount="updatePayAmount" :list="form.detailItemPayList" ref="payCreditItem"></fcDetailSxItem>
  186. </a-col>
  187. <a-col :span="24">
  188. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
  189. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  190. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  191. </a-form-model-item>
  192. </a-col>
  193. </a-row>
  194. </a-form-model>
  195. </a-spin>
  196. </a-modal>
  197. </template>
  198. <script>
  199. import moment from 'moment'
  200. import { commonMixin } from '@/utils/mixin'
  201. import { VSelect, Upload } from '@/components'
  202. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  203. import fcDetailSxItem from './fcDetailSxItem.vue'
  204. import { financeBookDetailSave, financeBookDetailQueryBySn, lastPayerAccountInfo } from '@/api/financeBook.js'
  205. export default {
  206. name: 'FcDetailModal',
  207. mixins: [commonMixin],
  208. components: { VSelect, Upload, dealerSubareaScopeList, fcDetailSxItem },
  209. props: {
  210. show: {
  211. type: [Boolean],
  212. default: false
  213. },
  214. bookSn: {
  215. type: String,
  216. default: ''
  217. },
  218. bookNo: {
  219. type: String,
  220. default: ''
  221. }
  222. },
  223. data () {
  224. return {
  225. opened: this.show,
  226. spinning: false,
  227. disabled: false,
  228. title: '新增收款明细',
  229. confirmLoading: false,
  230. bookDetailSn: '',
  231. formItemLayout: {
  232. labelCol: { span: 6 },
  233. wrapperCol: { span: 16 }
  234. },
  235. form: {
  236. payerType: 'DEALER',
  237. payerAccountType: 'PUBLIC',
  238. dealerSn: undefined,
  239. payerName: '',
  240. payerAccountInfo: '',
  241. licenseName: '',
  242. receiptDate: moment(),
  243. dealerCode: '',
  244. orderAmount: '',
  245. receiptAmount: '',
  246. useCreditFlag: false,
  247. detailItemUseList: [],
  248. payCreditFlag: false,
  249. detailItemPayList: [],
  250. balanceAmount: '',
  251. nextMonthAmount: '',
  252. bankAccount: undefined,
  253. bankName: undefined,
  254. fullPaymentFlag: undefined,
  255. remarks: ''
  256. },
  257. rules: {
  258. receiptDate: [ { required: true, message: '请选择收款日期', trigger: ['change', 'blur'] } ],
  259. payerType: [ { required: true, message: '请选择付款方类型', trigger: ['change', 'blur'] } ],
  260. dealerSn: [ { required: true, message: '请选择付款方', trigger: ['change', 'blur'] } ],
  261. payerName: [ { required: true, message: '请输入付款方名称', trigger: ['change', 'blur'] } ],
  262. payerAccountType: [ { required: true, message: '请选择付款账户类型', trigger: ['change', 'blur'] } ]
  263. },
  264. useTotalAmount: '',
  265. payTotalAmount: '',
  266. bankList: [
  267. {
  268. bankAccount: '张丽友',
  269. bankName: ['建设银行', '微信收款']
  270. },
  271. {
  272. bankAccount: '张丽添',
  273. bankName: ['农业银行']
  274. },
  275. {
  276. bankAccount: '东莞箭冠',
  277. bankName: ['东莞银行']
  278. },
  279. {
  280. bankAccount: '江西箭冠',
  281. bankName: ['九江银行']
  282. }
  283. ],
  284. bankNameList: []
  285. }
  286. },
  287. methods: {
  288. payerTypeChange (v) {
  289. this.$refs.ruleForm.clearValidate()
  290. // 重置数据
  291. this.form.dealerSn = ''
  292. this.form.dealerCode = ''
  293. this.form.licenseName = ''
  294. this.form.payerAccountType = 'PUBLIC'
  295. this.form.payerAccountInfo = ''
  296. this.form.payerName = ''
  297. },
  298. accountTypeChange (v) {
  299. this.$refs.ruleForm.clearValidate()
  300. // 已选经销商
  301. if (this.form.dealerSn) {
  302. // 查询账户信息
  303. this.getLastPayerAccount()
  304. } else {
  305. this.form.licenseName = ''
  306. this.form.payerAccountInfo = ''
  307. }
  308. },
  309. handleChange (v) {
  310. console.log(v)
  311. const row = this.bankList.find(item => item.bankAccount == v)
  312. this.bankNameList = row.bankName
  313. this.form.bankName = undefined
  314. },
  315. getLastPayerAccount () {
  316. this.spinning = true
  317. this.confirmLoading = true
  318. lastPayerAccountInfo({
  319. payerAccountType: this.form.payerAccountType,
  320. dealerSn: this.form.dealerSn
  321. }).then(res => {
  322. this.spinning = false
  323. this.confirmLoading = false
  324. this.form.payerAccountInfo = res.data || ''
  325. })
  326. },
  327. // 客户
  328. custChange (v) {
  329. console.log(v)
  330. if (v && v.key) {
  331. this.form.dealerSn = v.key
  332. this.form.payerName = v.row ? v.row.dealerName : ''
  333. this.form.dealerCode = v.row ? v.row.kdMidCustomerFnumber : ''
  334. this.form.licenseName = v.row ? v.row.licenseName : ''
  335. // 查询账户信息
  336. this.getLastPayerAccount()
  337. } else {
  338. this.form.dealerSn = ''
  339. this.form.payerName = ''
  340. this.form.dealerCode = ''
  341. this.form.licenseName = ''
  342. this.form.payerAccountInfo = ''
  343. }
  344. },
  345. updateUseAmount (v) {
  346. this.useTotalAmount = v
  347. },
  348. updatePayAmount (v) {
  349. this.payTotalAmount = v
  350. },
  351. // 保存
  352. handleSubmit (e) {
  353. e.preventDefault()
  354. const _this = this
  355. this.$refs.ruleForm.validate(valid => {
  356. if (valid) {
  357. _this.salesSaveFun()
  358. } else {
  359. return false
  360. }
  361. })
  362. },
  363. validItem (data) {
  364. return data.find(item => !item.itemName || !item.itemAmount)
  365. },
  366. // 新建或编辑销售单
  367. salesSaveFun () {
  368. const _this = this
  369. const form = JSON.parse(JSON.stringify(_this.form))
  370. form.receiptDate = moment(form.receiptDate).format('YYYY-MM-DD')
  371. form.payCreditFlag = form.payCreditFlag ? 1 : 0
  372. form.useCreditFlag = form.useCreditFlag ? 1 : 0
  373. form.bookSn = this.bookSn
  374. form.bookNo = this.bookNo
  375. delete form.dealerCode
  376. if (form.payerType == 'DEPT') {
  377. delete form.payerAccountType
  378. }
  379. console.log(form)
  380. if ((form.useCreditFlag && form.detailItemUseList.length == 0) || this.validItem(form.detailItemUseList)) {
  381. this.$message.info('使用授信项目不能为空')
  382. return
  383. }
  384. if ((form.payCreditFlag && form.detailItemPayList.length == 0) || this.validItem(form.detailItemPayList)) {
  385. this.$message.info('授信还款项目不能为空')
  386. return
  387. }
  388. _this.spinning = true
  389. financeBookDetailSave(form).then(res => {
  390. if (res.status == 200) {
  391. _this.$message.success(res.message)
  392. _this.$emit('refashData')
  393. _this.cancel()
  394. _this.spinning = false
  395. } else {
  396. _this.spinning = false
  397. }
  398. })
  399. },
  400. // 详情
  401. getDetail (bookDetailSn) {
  402. this.spinning = true
  403. this.confirmLoading = true
  404. this.title = '编辑收款明细'
  405. this.bookDetailSn = bookDetailSn
  406. financeBookDetailQueryBySn({ bookDetailSn: this.bookDetailSn }).then(res => {
  407. if (res.status == 200) {
  408. const data = res.data
  409. this.form = Object.assign(this.form, data)
  410. this.form.receiptDate = moment(this.form.receiptDate).format('YYYY-MM-DD')
  411. this.form.payCreditFlag = this.form.payCreditFlag == 1
  412. this.form.useCreditFlag = this.form.useCreditFlag == 1
  413. // 回显客户
  414. if (this.form.dealerSn && this.form.payerType == 'DEALER') {
  415. this.$nextTick(() => {
  416. this.$refs.settleClientName.getDetail(this.form.dealerSn)
  417. })
  418. }
  419. }
  420. this.spinning = false
  421. this.confirmLoading = false
  422. })
  423. },
  424. cancel () {
  425. this.opened = false
  426. this.$emit('cancel')
  427. this.pageInit()
  428. },
  429. pageInit () {
  430. this.$nextTick(() => {
  431. this.title = '新增收款明细'
  432. if (this.$refs.settleClientName) {
  433. this.$refs.settleClientName.resetForm()
  434. }
  435. })
  436. this.bankNameList = []
  437. this.form = {
  438. payerType: 'DEALER',
  439. payerAccountType: 'PUBLIC',
  440. dealerSn: undefined,
  441. payerName: '',
  442. payerAccountInfo: '',
  443. licenseName: '',
  444. receiptDate: moment(),
  445. dealerCode: '',
  446. orderAmount: '',
  447. receiptAmount: '',
  448. useCreditFlag: false,
  449. detailItemUseList: [],
  450. payCreditFlag: false,
  451. detailItemPayList: [],
  452. balanceAmount: '',
  453. nextMonthAmount: '',
  454. bankAccount: undefined,
  455. bankName: undefined,
  456. fullPaymentFlag: undefined,
  457. remarks: ''
  458. }
  459. this.$refs.ruleForm.resetFields()
  460. }
  461. },
  462. watch: {
  463. show (newValue, oldValue) {
  464. this.opened = newValue
  465. if (!newValue) {
  466. this.pageInit()
  467. }
  468. }
  469. }
  470. }
  471. </script>