addModal.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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" size="large" :loading="confirmLoading" @click="handleSubmit" id="fundAount-btn-submit">保存</a-button>
  47. <a-button @click="isShow=false" size="large" style="margin-left: 15px" id="fundAount-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: '', // 账户类型sn
  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. // 重置表单
  98. resetForm () {
  99. this.$refs.ruleForm.resetFields()
  100. this.form = {
  101. settleStyleSn: '',
  102. settleStyleName: '',
  103. accountName: '',
  104. accountNo: ''
  105. }
  106. this.isEdit = false
  107. },
  108. // 选择账户类型
  109. settleStyleChange (v, name) {
  110. this.form.settleStyleName = name.dispName
  111. },
  112. // 保存
  113. handleSubmit (e) {
  114. e.preventDefault()
  115. const _this = this
  116. this.$refs.ruleForm.validate(valid => {
  117. if (valid) {
  118. _this.spinning = true
  119. settleAccountSave(_this.form).then(res => {
  120. if (res.status == 200) {
  121. _this.isShow = false
  122. _this.$emit('ok', res.data)
  123. _this.spinning = false
  124. _this.$message.info(res.message)
  125. } else {
  126. _this.spinning = false
  127. }
  128. })
  129. } else {
  130. return false
  131. }
  132. })
  133. },
  134. // 编辑信息,获取详情数据
  135. setData (data) {
  136. if (data && data.settleAccountSn) {
  137. settleAccountDetail({ settleAccountSn: data.settleAccountSn }).then(res => {
  138. if (res.status == '200') {
  139. this.form = Object.assign(this.form, res.data || {})
  140. this.isEdit = true
  141. }
  142. })
  143. }
  144. }
  145. },
  146. watch: {
  147. // 父页面传过来的弹框状态
  148. openModal (newValue, oldValue) {
  149. this.isShow = newValue
  150. },
  151. // 重定义的弹框状态
  152. isShow (newValue, oldValue) {
  153. if (!newValue) {
  154. this.$emit('close')
  155. this.resetForm()
  156. }
  157. }
  158. }
  159. }
  160. </script>
  161. <style lang="less">
  162. .fundAount-basicInfo-modal{
  163. .ant-modal-body {
  164. padding: 40px 40px 24px;
  165. }
  166. .radio-s{
  167. margin-bottom: 8px;
  168. }
  169. .btn-cont {
  170. text-align: center;
  171. margin: 35px 0 10px;
  172. }
  173. }
  174. </style>