settleModal.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <a-modal
  3. centered
  4. class="fundAount-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="'确认'+title"
  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="商户名称" style="margin-bottom: 0;" v-if="baseData&&baseData.settleClientName">
  20. <span class="ant-form-text">
  21. {{ baseData.settleClientName }}
  22. </span>
  23. </a-form-model-item>
  24. <a-form-model-item style="margin-bottom: 10px;" :label="title+'金额'" v-if="baseData">
  25. <span class="ant-form-text">
  26. ¥{{ baseData.totalAmount }}
  27. </span>
  28. </a-form-model-item>
  29. <a-form-model-item label="结算方式" prop="settleStyleSn">
  30. <v-select
  31. code="SETTLE_STYLE"
  32. id="expenseManagementEdit-settleStyleSn"
  33. v-model="form.settleStyleSn"
  34. @change="settleStyleChange"
  35. allowClear
  36. placeholder="请选择结算方式"
  37. ></v-select>
  38. </a-form-model-item>
  39. <a-form-model-item label="结算账户" prop="settleAccountSn">
  40. <settleAccount
  41. id="expenseManagementEdit-settleAccountSn"
  42. ref="settleAcount"
  43. v-model="form.settleAccountSn"
  44. :settleStyleSn="form.settleStyleSn"
  45. placeholder="请选择结算账户">
  46. </settleAccount>
  47. </a-form-model-item>
  48. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  49. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  50. <a-button @click="isShow=false" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
  51. </a-form-model-item>
  52. </a-form-model>
  53. </a-spin>
  54. </a-modal>
  55. </template>
  56. <script>
  57. import { commonMixin } from '@/utils/mixin'
  58. import settleAccount from '@/views/common/settleAccount'
  59. export default {
  60. name: 'SettleModal',
  61. components: { settleAccount },
  62. mixins: [commonMixin],
  63. props: {
  64. openModal: { // 弹框显示状态
  65. type: Boolean,
  66. default: false
  67. }
  68. },
  69. data () {
  70. return {
  71. spinning: false,
  72. confirmLoading: false,
  73. isShow: this.openModal, // 是否打开弹框
  74. title: '确认',
  75. formItemLayout: {
  76. labelCol: { span: 4 },
  77. wrapperCol: { span: 18 }
  78. },
  79. form: {
  80. settleStyleSn: '',
  81. settleStyleName: '',
  82. settleAccountSn: ''
  83. },
  84. rules: {
  85. settleStyleSn: [
  86. { required: true, message: '请选择结算方式', trigger: 'change' }
  87. ],
  88. settleAccountSn: [{ required: true, message: '请选择结算账户', trigger: 'change' }]
  89. },
  90. baseData: null
  91. }
  92. },
  93. methods: {
  94. resetForm () {
  95. this.$refs.ruleForm.resetFields()
  96. this.form = {
  97. settleStyleSn: '',
  98. settleStyleName: '',
  99. settleAccountSn: ''
  100. }
  101. },
  102. settleStyleChange (v, name) {
  103. this.form.settleStyleName = name
  104. },
  105. // 保存
  106. handleSubmit (e) {
  107. e.preventDefault()
  108. const _this = this
  109. this.$refs.ruleForm.validate(valid => {
  110. if (valid) {
  111. _this.isShow = false
  112. _this.$emit('ok', this.form, this.baseData)
  113. } else {
  114. return false
  115. }
  116. })
  117. },
  118. // 编辑信息
  119. setData (data) {
  120. this.title = data.title
  121. this.baseData = data
  122. }
  123. },
  124. watch: {
  125. // 父页面传过来的弹框状态
  126. openModal (newValue, oldValue) {
  127. this.isShow = newValue
  128. },
  129. // 重定义的弹框状态
  130. isShow (newValue, oldValue) {
  131. if (!newValue) {
  132. this.$emit('close')
  133. this.resetForm()
  134. }
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="less">
  140. .fundAount-basicInfo-modal{
  141. .ant-modal-body {
  142. padding: 40px 40px 24px;
  143. }
  144. .radio-s{
  145. margin-bottom: 8px;
  146. }
  147. .btn-cont {
  148. text-align: center;
  149. margin: 35px 0 10px;
  150. }
  151. }
  152. </style>