addModal.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <a-modal
  3. centered
  4. class="fundAount-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="(isEdit?'编辑':'新增')+'资金账户'"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="600">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="fundAount-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol" >
  19. <a-form-model-item label="账户类型" prop="settleStyleSn">
  20. <v-select
  21. code="SETTLE_STYLE"
  22. id="fundAount-settleStyleSn"
  23. v-model="form.settleStyleSn"
  24. @change="settleStyleChange"
  25. allowClear
  26. placeholder="请选择账户类型"
  27. ></v-select>
  28. </a-form-model-item>
  29. <a-form-model-item label="账户名称" prop="accountName">
  30. <a-input
  31. id="fundAount-accountName"
  32. :maxLength="30"
  33. v-model.trim="form.accountName"
  34. placeholder="请输入账户名称(最多30个字符)"
  35. allowClear />
  36. </a-form-model-item>
  37. <a-form-model-item label="账户号码" prop="accountNo">
  38. <a-input
  39. id="fundAount-accountNo"
  40. :maxLength="30"
  41. v-model.trim="form.accountNo"
  42. placeholder="请输入账户号码(最多30个字符)"
  43. allowClear />
  44. </a-form-model-item>
  45. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  46. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  47. <a-button @click="isShow=false" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  48. </a-form-model-item>
  49. </a-form-model>
  50. </a-spin>
  51. </a-modal>
  52. </template>
  53. <script>
  54. import { commonMixin } from '@/utils/mixin'
  55. import { VSelect } from '@/components'
  56. import { settleAccountSave, settleAccountDetail } from '@/api/settleAcount'
  57. export default {
  58. name: 'BasicInfoModal',
  59. components: { VSelect },
  60. mixins: [commonMixin],
  61. props: {
  62. openModal: { // 弹框显示状态
  63. type: Boolean,
  64. default: false
  65. }
  66. },
  67. data () {
  68. return {
  69. spinning: false,
  70. confirmLoading: false,
  71. isShow: this.openModal, // 是否打开弹框
  72. isEdit: false,
  73. formItemLayout: {
  74. labelCol: { span: 4 },
  75. wrapperCol: { span: 18 }
  76. },
  77. form: {
  78. settleStyleSn: '',
  79. settleStyleName: '',
  80. accountName: '',
  81. accountNo: ''
  82. },
  83. rules: {
  84. settleStyleSn: [
  85. { required: true, message: '请选择账户类型', trigger: 'change' }
  86. ],
  87. accountName: [
  88. { required: true, message: '请输入账户名称(最多30个字符)', trigger: 'change' }
  89. ],
  90. accountNo: [
  91. { required: true, message: '请输入账户号(最多30个字符)', trigger: 'change' }
  92. ]
  93. }
  94. }
  95. },
  96. methods: {
  97. resetForm () {
  98. this.$refs.ruleForm.resetFields()
  99. this.form = {
  100. settleStyleSn: '',
  101. settleStyleName: '',
  102. accountName: '',
  103. accountNo: ''
  104. }
  105. this.isEdit = false
  106. },
  107. settleStyleChange (v, name) {
  108. this.form.settleStyleName = name.dispName
  109. },
  110. // 保存
  111. handleSubmit (e) {
  112. e.preventDefault()
  113. const _this = this
  114. this.$refs.ruleForm.validate(valid => {
  115. if (valid) {
  116. _this.spinning = true
  117. settleAccountSave(_this.form).then(res => {
  118. if (res.status == 200) {
  119. _this.isShow = false
  120. _this.$emit('ok', res.data)
  121. _this.spinning = false
  122. _this.$message.info(res.message)
  123. } else {
  124. _this.spinning = false
  125. }
  126. })
  127. } else {
  128. return false
  129. }
  130. })
  131. },
  132. // 编辑信息
  133. setData (data) {
  134. if (data && data.settleAccountSn) {
  135. settleAccountDetail({ settleAccountSn: data.settleAccountSn }).then(res => {
  136. if (res.status == '200') {
  137. this.form = Object.assign(this.form, res.data || {})
  138. this.isEdit = true
  139. }
  140. })
  141. }
  142. }
  143. },
  144. watch: {
  145. // 父页面传过来的弹框状态
  146. openModal (newValue, oldValue) {
  147. this.isShow = newValue
  148. },
  149. // 重定义的弹框状态
  150. isShow (newValue, oldValue) {
  151. if (!newValue) {
  152. this.$emit('close')
  153. this.resetForm()
  154. }
  155. }
  156. }
  157. }
  158. </script>
  159. <style lang="less">
  160. .fundAount-basicInfo-modal{
  161. .ant-modal-body {
  162. padding: 40px 40px 24px;
  163. }
  164. .radio-s{
  165. margin-bottom: 8px;
  166. }
  167. .btn-cont {
  168. text-align: center;
  169. margin: 35px 0 10px;
  170. }
  171. }
  172. </style>