checkAccountModal.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <a-modal
  3. centered
  4. class="checkAccount-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="调账"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="700">
  11. <div>
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="checkAccountModal-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-form-model-item label="客户名称">
  22. {{ dealerName||'--' }}
  23. </a-form-model-item>
  24. <a-form-model-item label="调账金额" prop="changeAmount">
  25. <a-input-number
  26. id="checkAccountModal-changeAmount"
  27. v-model="form.changeAmount"
  28. style="width:90%;"
  29. :max="99999999"
  30. :precision="2"
  31. placeholder="请输入调账金额"/>
  32. <span style="margin-left:10px;">元</span>
  33. </a-form-model-item>
  34. <a-row :gutter="16">
  35. <a-col :span="10">
  36. <a-form-model-item label="调账前" :label-col="{span:10}" :wrapper-col="{ span: 10}">
  37. {{ (dealerNum||dealerNum==0) ?toThousands(dealerNum):'--' }}
  38. </a-form-model-item>
  39. </a-col>
  40. <a-col :span="12">
  41. <a-form-model-item label="调账后" :label-col="{span:10}" :wrapper-col="{ span: 10}">
  42. {{ (dealerNum||dealerNum==0) ?((form.changeAmount||form.changeAmount==0)&&form.changeAmount!='-') ?toThousands(dealerNum*1+form.changeAmount*1):'--' :'--' }}
  43. </a-form-model-item>
  44. </a-col>
  45. </a-row>
  46. <a-form-model-item label="备注">
  47. <a-input
  48. id="checkAccountModal-remark"
  49. v-model="form.remark"
  50. style="width:90%;"
  51. :maxLength="50"
  52. type="textarea"
  53. placeholder="请输入备注(最多50字符)"/>
  54. </a-form-model-item>
  55. </a-form-model>
  56. <div class="btn-cont">
  57. <a-button type="primary" id="checkAccountModal-save" @click="handleSubmit">提交</a-button>
  58. <a-button id="checkAccountModal-cancel" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  59. </div>
  60. </a-spin>
  61. </div>
  62. <!-- 提交 选择审批人员 -->
  63. <chooseDepartUserModal :openModal="openDepartUserModal" @close="openDepartUserModal=false" @submit="handleSave"></chooseDepartUserModal>
  64. </a-modal>
  65. </template>
  66. <script>
  67. import { commonMixin } from '@/utils/mixin'
  68. // 组件
  69. import chooseDepartUserModal from './chooseDepartUserModal.vue'
  70. // 接口
  71. import { dealerAccountSubmit } from '@/api/dealerAccount'
  72. export default {
  73. name: 'CheckAccountModal',
  74. mixins: [commonMixin],
  75. components: { chooseDepartUserModal },
  76. props: {
  77. openModal: { // 弹框显示状态
  78. type: Boolean,
  79. default: false
  80. },
  81. dealerName: {
  82. type: String,
  83. default: ''
  84. },
  85. dealerNum: {
  86. type: [String, Number],
  87. default: ''
  88. }
  89. },
  90. data () {
  91. return {
  92. isShow: this.openModal, // 是否打开弹框
  93. spinning: false, // 页面加载状态
  94. formItemLayout: {// form表单中label设置
  95. labelCol: { span: 4 },
  96. wrapperCol: { span: 18 }
  97. },
  98. // 提交数据
  99. form: {
  100. dealerSn: undefined, // 客户sn
  101. changeAmount: undefined, // 调账金额
  102. remark: undefined// 备注
  103. },
  104. // 必填项判断
  105. rules: {
  106. changeAmount: [{ required: true, message: '请输入调账金额', trigger: 'blur' },
  107. { pattern: /^(?!0$).+/, message: '调账金额不能为0', trigger: 'blur' }
  108. ]
  109. },
  110. openDepartUserModal: false // 打开 选择审批人员 弹窗
  111. }
  112. },
  113. methods: {
  114. // 提交 调起选择审批人员
  115. handleSubmit () {
  116. this.$refs.ruleForm.validate(valid => {
  117. if (valid) {
  118. this.openDepartUserModal = true
  119. } else {
  120. console.log('error submit!!')
  121. return false
  122. }
  123. })
  124. },
  125. // 保存
  126. handleSave (val) {
  127. const _this = this
  128. val.dealerSn = this.$route.params.sn
  129. _this.form = { ..._this.form, ...val }
  130. _this.spinning = true
  131. dealerAccountSubmit(_this.form).then(res => {
  132. if (res.status == 200) {
  133. _this.$emit('ok')
  134. _this.isShow = false
  135. }
  136. _this.spinning = false
  137. })
  138. },
  139. resetFormData () {
  140. this.form.dealerSn = undefined
  141. this.form.changeAmount = undefined
  142. this.form.remark = undefined
  143. this.$refs.ruleForm.resetFields()
  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.resetFormData()
  156. }
  157. }
  158. }
  159. }
  160. </script>
  161. <style lang="less">
  162. .checkAccount-modal{
  163. .ant-modal-body {
  164. padding: 40px 40px 24px;
  165. }
  166. .btn-cont {
  167. text-align: center;
  168. margin: 35px 0 30px;
  169. }
  170. }
  171. </style>