setSHModal.vue 5.9 KB

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