setSHModal.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <div>
  3. <a-modal
  4. centered
  5. wrapClassName="setSHModal-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. title="设置结算账户"
  9. v-model="isshow"
  10. @cancle="close"
  11. :width="550">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-alert :message="message" type="info" />
  14. <a-form-model
  15. id="setSHModal-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :labelCol="{span:6}"
  20. :wrapperCol="{span:16}"
  21. >
  22. <a-form-model-item label="配件经销商" >
  23. <span>{{ form.dealerName||'--' }}</span>
  24. </a-form-model-item>
  25. <a-form-model-item label="平台商户号" prop="merchantNo" >
  26. <a-input id="setSHModal-merchantNo" allowClear v-model.trim="form.merchantNo" placeholder="请输入平台商户号"/>
  27. </a-form-model-item>
  28. <a-form-model-item label="结算账户名" prop="bankAccount">
  29. <a-input id="setSHModal-bankAccount" allowClear v-model.trim="form.bankAccount" placeholder="请输入结算账户名"/>
  30. </a-form-model-item>
  31. <a-form-model-item label="结算账户号" prop="bankCard">
  32. <a-input id="setSHModal-bankCard" allowClear v-model.trim="form.bankCard" placeholder="请输入结算账户号"/>
  33. </a-form-model-item>
  34. <a-form-model-item label="开户银行" prop="bankName">
  35. <a-input id="setSHModal-bankName" allowClear v-model.trim="form.bankName" placeholder="请输入开户银行"/>
  36. </a-form-model-item>
  37. <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
  38. <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }" id="setSHModal-handleSubmit">保存</a-button>
  39. <a-button :style="{ marginLeft: '8px' }" @click="close" id="setSHModal-close">取消</a-button>
  40. </a-form-model-item>
  41. </a-form-model>
  42. </a-spin>
  43. </a-modal>
  44. </div>
  45. </template>
  46. <script>
  47. import { saveMerchantAccount, merchantAccountDetail } from '@/api/merchantAccount.js'
  48. export default {
  49. name: 'SetSHModal',
  50. props: {
  51. visible: {
  52. type: Boolean,
  53. default: false
  54. },
  55. nowData: {
  56. type: Object,
  57. default: function () {
  58. return null
  59. }
  60. }
  61. },
  62. data () {
  63. return {
  64. spinning: false,
  65. isshow: this.visible,
  66. message: '以下结算账户信息需要与进件时填写的资料保持一直否则将无法体现成功',
  67. pageInfo: null,
  68. form: {
  69. dealerName: '',
  70. bankName: '', // 开户行
  71. bankAccount: '', // 账户名
  72. bankCard: '', // 账户号
  73. merchantNo: '' // 商户号
  74. },
  75. rules: {
  76. merchantNo: [ { required: true, message: '请输入保证金金额', trigger: 'blur' } ],
  77. bankName: [ { required: true, message: '请输入开户银行', trigger: 'blur' } ],
  78. bankAccount: [ { required: true, message: '请输入结算账户名', trigger: 'blur' } ],
  79. bankCard: [ { required: true, message: '请输入结算账户号', trigger: 'blur' } ]
  80. }
  81. }
  82. },
  83. methods: {
  84. close (e) {
  85. this.form = {
  86. dealerName: '',
  87. bankName: '', // 开户行
  88. bankAccount: '', // 账户名
  89. bankCard: '', // 账户号
  90. merchantNo: '' // 保证金金额
  91. }
  92. this.$refs.ruleForm.resetFields()
  93. this.$emit('close')
  94. },
  95. // 详情
  96. getMerchantAccountDetail () {
  97. this.spinning = true
  98. merchantAccountDetail({ merchantSn: this.nowData.merchantSn, merchantType: this.nowData.merchantType }).then(res => {
  99. if (res.status == 200) {
  100. this.form.merchantNo = res.data.merchantNo
  101. this.form.dealerName = res.data.dealerName
  102. this.form.bankName = res.data.merchantBankAccountEntity.bankName
  103. this.form.bankAccount = res.data.merchantBankAccountEntity.bankAccount
  104. this.form.bankCard = res.data.merchantBankAccountEntity.bankCard
  105. this.pageInfo = Object.assign({}, res.data)
  106. } else {
  107. }
  108. this.spinning = false
  109. })
  110. },
  111. // 保存提交
  112. handleSubmit () {
  113. console.log('保存', 'handleSubmit')
  114. const _this = this
  115. this.$refs.ruleForm.validate(valid => {
  116. console.log(valid, 'console.log(valid)')
  117. if (valid) {
  118. const params = JSON.parse(JSON.stringify(_this.pageInfo))
  119. console.log(params, 'params')
  120. if (params) {
  121. params.merchantBankAccountEntity.bankName = _this.form.bankName
  122. params.merchantBankAccountEntity.bankAccount = _this.form.bankAccount
  123. params.merchantBankAccountEntity.bankCard = _this.form.bankCard
  124. // params.dealerEntity.dealerName = _this.form.dealerEntity.dealerName
  125. params.merchantNo = _this.form.merchantNo
  126. }
  127. console.log(params, 'params')
  128. params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
  129. params.dealerEntity.dealerSn = _this.nowData && _this.nowData.dealerEntity ? _this.nowData.dealerEntity.dealerSn : null
  130. _this.spinning = true
  131. console.log(params, 'params')
  132. saveMerchantAccount(params).then(res => {
  133. if (res.status == 200) {
  134. _this.$message.success(res.message)
  135. _this.$emit('refresh')
  136. setTimeout(function () {
  137. _this.isshow = false
  138. _this.spinning = false
  139. }, 300)
  140. } else {
  141. _this.spinning = false
  142. }
  143. })
  144. } else {
  145. console.log('error submit!!')
  146. return false
  147. }
  148. })
  149. }
  150. },
  151. watch: {
  152. visible (newValue, oldValue) {
  153. this.isshow = newValue
  154. },
  155. isshow (newValue, oldValue) {
  156. if (!newValue) {
  157. this.form = {
  158. dealerEntity: {
  159. dealerName: ''
  160. },
  161. bankName: '', // 开户行
  162. bankAccount: '', // 账户名
  163. bankCard: '', // 账户号
  164. merchantNo: '' // 保证金金额
  165. }
  166. this.$refs.ruleForm.resetFields()
  167. this.close()
  168. } else {
  169. this.getMerchantAccountDetail()
  170. }
  171. },
  172. nowData: {
  173. handler (newValue, oldValue) {
  174. if (this.isshow && newValue) {
  175. if (this.nowData.id) { // 编辑
  176. }
  177. }
  178. },
  179. deep: true
  180. }
  181. }
  182. }
  183. </script>
  184. <style lang="less">
  185. </style>