fcDetailModal.vue 18 KB

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