fcDetailModal.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  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="户名">
  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="汇入银行">
  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: undefined,
  257. bankName: undefined,
  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. },
  268. useTotalAmount: '',
  269. payTotalAmount: '',
  270. bankList: [
  271. {
  272. bankAccount: '张丽友',
  273. bankName: ['建设银行', '微信收款']
  274. },
  275. {
  276. bankAccount: '张丽添',
  277. bankName: ['农业银行']
  278. },
  279. {
  280. bankAccount: '东莞箭冠',
  281. bankName: ['东莞银行']
  282. },
  283. {
  284. bankAccount: '江西箭冠',
  285. bankName: ['九江银行']
  286. }
  287. ],
  288. bankNameList: []
  289. }
  290. },
  291. methods: {
  292. payerTypeChange (v) {
  293. this.$refs.ruleForm.clearValidate()
  294. // 重置数据
  295. this.form.dealerSn = ''
  296. this.form.dealerCode = ''
  297. this.form.licenseName = ''
  298. this.form.payerAccountType = 'PUBLIC'
  299. this.form.payerAccountInfo = ''
  300. this.form.payerName = ''
  301. },
  302. accountTypeChange (v) {
  303. this.$refs.ruleForm.clearValidate()
  304. // 已选经销商
  305. if (this.form.dealerSn) {
  306. // 查询账户信息
  307. this.getLastPayerAccount()
  308. } else {
  309. this.form.licenseName = ''
  310. this.form.payerAccountInfo = ''
  311. }
  312. },
  313. handleChange (v) {
  314. console.log(v)
  315. const row = this.bankList.find(item => item.bankAccount == v)
  316. this.bankNameList = row.bankName
  317. this.form.bankName = undefined
  318. },
  319. getLastPayerAccount () {
  320. this.spinning = true
  321. this.confirmLoading = true
  322. lastPayerAccountInfo({
  323. payerAccountType: this.form.payerAccountType,
  324. dealerSn: this.form.dealerSn
  325. }).then(res => {
  326. this.spinning = false
  327. this.confirmLoading = false
  328. this.form.payerAccountInfo = res.data || ''
  329. })
  330. },
  331. // 查询经销商信息
  332. getDealerDetail (sn) {
  333. dealerDetailBySn({ sn: sn }).then(res => {
  334. const val = { key: sn }
  335. val.row = res.data
  336. this.custChange(val)
  337. })
  338. },
  339. // 客户
  340. custChange (v) {
  341. console.log(v)
  342. if (v && v.key) {
  343. this.form.dealerSn = v.key
  344. this.form.payerName = v.row ? v.row.dealerName : ''
  345. this.form.dealerCode = v.row ? v.row.kdMidCustomerFnumber : ''
  346. this.form.licenseName = v.row ? v.row.licenseName : ''
  347. // 查询账户信息
  348. this.getLastPayerAccount()
  349. } else {
  350. this.form.dealerSn = ''
  351. this.form.payerName = ''
  352. this.form.dealerCode = ''
  353. this.form.licenseName = ''
  354. this.form.payerAccountInfo = ''
  355. }
  356. },
  357. updateUseAmount (v) {
  358. this.useTotalAmount = v
  359. },
  360. updatePayAmount (v) {
  361. this.payTotalAmount = v
  362. },
  363. // 保存
  364. handleSubmit (e) {
  365. e.preventDefault()
  366. const _this = this
  367. this.$refs.ruleForm.validate(valid => {
  368. if (valid) {
  369. _this.salesSaveFun()
  370. } else {
  371. return false
  372. }
  373. })
  374. },
  375. validItem (data) {
  376. return data.find(item => !item.itemName || !item.itemAmount)
  377. },
  378. // 新建或编辑销售单
  379. salesSaveFun () {
  380. const _this = this
  381. const form = JSON.parse(JSON.stringify(_this.form))
  382. form.receiptDate = moment(form.receiptDate).format('YYYY-MM-DD')
  383. form.payCreditFlag = form.payCreditFlag ? 1 : 0
  384. form.useCreditFlag = form.useCreditFlag ? 1 : 0
  385. form.bookSn = this.bookSn
  386. form.bookNo = this.bookNo
  387. delete form.dealerCode
  388. if (form.payerType == 'DEPT') {
  389. delete form.payerAccountType
  390. }
  391. console.log(form)
  392. if ((form.useCreditFlag && form.detailItemUseList.length == 0) || this.validItem(form.detailItemUseList)) {
  393. this.$message.info('使用授信项目不能为空')
  394. return
  395. }
  396. if ((form.payCreditFlag && form.detailItemPayList.length == 0) || this.validItem(form.detailItemPayList)) {
  397. this.$message.info('授信还款项目不能为空')
  398. return
  399. }
  400. _this.spinning = true
  401. financeBookDetailSave(form).then(res => {
  402. if (res.status == 200) {
  403. _this.$message.success(res.message)
  404. _this.$emit('refashData')
  405. _this.cancel()
  406. _this.spinning = false
  407. } else {
  408. _this.spinning = false
  409. }
  410. })
  411. },
  412. setDetail (data) {
  413. this.form = Object.assign(this.form, { payerTypeDictValue: data.payerTypeDictValue, payerType: data.payerType, dealerSn: data.dealerSn, payerName: data.payerName })
  414. this.$nextTick(() => {
  415. if(this.form.dealerSn){
  416. // this.$refs.settleClientName.getDetail(this.form.dealerSn)
  417. this.getDealerDetail(this.form.dealerSn)
  418. }
  419. })
  420. },
  421. // 详情
  422. getDetail (bookDetailSn) {
  423. this.spinning = true
  424. this.confirmLoading = true
  425. this.title = '编辑收款明细'
  426. this.bookDetailSn = bookDetailSn
  427. financeBookDetailQueryBySn({ bookDetailSn: this.bookDetailSn }).then(res => {
  428. if (res.status == 200) {
  429. const data = res.data
  430. this.form = Object.assign(this.form, data)
  431. this.form.receiptDate = moment(this.form.receiptDate).format('YYYY-MM-DD')
  432. this.form.payCreditFlag = this.form.payCreditFlag == 1
  433. this.form.useCreditFlag = this.form.useCreditFlag == 1
  434. // 回显客户
  435. // if (this.form.dealerSn && this.form.payerType == 'DEALER') {
  436. // this.$nextTick(() => {
  437. // this.$refs.settleClientName.getDetail(this.form.dealerSn)
  438. // })
  439. // }
  440. }
  441. this.spinning = false
  442. this.confirmLoading = false
  443. })
  444. },
  445. cancel () {
  446. this.opened = false
  447. this.$emit('cancel')
  448. this.pageInit()
  449. },
  450. pageInit () {
  451. this.$nextTick(() => {
  452. this.title = '新增收款明细'
  453. // if (this.$refs.settleClientName) {
  454. // this.$refs.settleClientName.resetForm()
  455. // }
  456. })
  457. this.bankNameList = []
  458. this.form = {
  459. payerType: 'DEALER',
  460. payerAccountType: 'PUBLIC',
  461. dealerSn: undefined,
  462. payerName: '',
  463. payerAccountInfo: '',
  464. licenseName: '',
  465. receiptDate: moment(),
  466. dealerCode: '',
  467. orderAmount: '',
  468. receiptAmount: '',
  469. useCreditFlag: false,
  470. detailItemUseList: [],
  471. payCreditFlag: false,
  472. detailItemPayList: [],
  473. balanceAmount: '',
  474. nextMonthAmount: '',
  475. bankAccount: undefined,
  476. bankName: undefined,
  477. fullPaymentFlag: '1',
  478. explainInfo: ''
  479. }
  480. this.$refs.ruleForm.resetFields()
  481. }
  482. },
  483. watch: {
  484. show (newValue, oldValue) {
  485. this.opened = newValue
  486. if (!newValue) {
  487. this.pageInit()
  488. }
  489. }
  490. }
  491. }
  492. </script>