zeroClearingModal.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <a-modal
  3. centered
  4. class="zero-clearing-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="'清零'+titName"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="450">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="mainContent" v-if="conInfo">
  13. <a-checkbox-group v-model="accountType" id="zero-clearing-checkbox">
  14. <a-checkbox value="RECHARGE" id="zero-clearing-checkbox1">清空{{ (conInfo.rechargeBalance||conInfo.rechargeBalance==0)?toThousands(conInfo.rechargeBalance):'--' }}元【充值余额】</a-checkbox>
  15. <br />
  16. <a-checkbox value="GIVE" id="zero-clearing-checkbox2">清空{{ (conInfo.giveBalance||conInfo.giveBalance==0)?toThousands(conInfo.giveBalance):'--' }}元【补贴余额】</a-checkbox>
  17. </a-checkbox-group>
  18. <div style="margin-top:10px;">注意:请慎重操作,一旦清空,不可变更</div>
  19. </div>
  20. <div class="btn-cont">
  21. <a-button id="zero-clearing-modal-cancel" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  22. <a-button type="primary" id="zero-clearing-modal-save" @click="handleSave">保存</a-button>
  23. </div>
  24. </a-spin>
  25. </a-modal>
  26. </template>
  27. <script>
  28. import { commonMixin } from '@/utils/mixin'
  29. // 接口
  30. import { storeAccountSetZero } from '@/api/storeAccount'
  31. export default {
  32. name: 'ZeroClearingModal',
  33. mixins: [commonMixin],
  34. props: {
  35. openModal: {
  36. // 弹框显示状态
  37. type: Boolean,
  38. default: false
  39. }
  40. },
  41. data () {
  42. return {
  43. spinning: false, // 页面加载loading
  44. isShow: this.openModal, // 是否打开弹框
  45. titName: '', // 弹窗标题
  46. accountType: undefined, // 清空目标
  47. conInfo: null // 回显数据内容
  48. }
  49. },
  50. methods: {
  51. // 清零保存
  52. handleSave () {
  53. const _this = this
  54. if (!_this.accountType || (_this.accountType && _this.accountType.length === 0)) {
  55. _this.$message.warning('请选择清空目标')
  56. return
  57. }
  58. const ajaxData = _this.accountType.map(con => {
  59. const obj = {
  60. accountType: con,
  61. tradeAmount: con === 'RECHARGE' ? '-' + _this.conInfo.rechargeBalance : '-' + _this.conInfo.giveBalance,
  62. storeAccountSn: _this.conInfo.storeAccountSn,
  63. storeSn: _this.conInfo.storeSn,
  64. shelfSn: _this.conInfo.shelfSn
  65. }
  66. return obj
  67. })
  68. _this.spinning = true
  69. storeAccountSetZero(ajaxData).then(res => {
  70. if (res.status == 200) {
  71. _this.$message.success(res.message)
  72. _this.$emit('ok', res.data)
  73. _this.isShow = false
  74. }
  75. _this.spinning = false
  76. })
  77. },
  78. // 初始化 获取页面回显数据
  79. pageInit (row) {
  80. this.titName = '(' + row.customerName + ')' || ''
  81. this.conInfo = row
  82. }
  83. },
  84. watch: {
  85. // 父页面传过来的弹框状态
  86. openModal (newValue, oldValue) {
  87. this.isShow = newValue
  88. },
  89. // 重定义的弹框状态
  90. isShow (newValue, oldValue) {
  91. if (!newValue) {
  92. this.$emit('close')
  93. this.accountType = undefined
  94. }
  95. }
  96. }
  97. }
  98. </script>
  99. <style lang="less">
  100. .zero-clearing-modal {
  101. .ant-modal-body {
  102. padding: 40px 40px 24px;
  103. }
  104. .mainContent{
  105. width: 65%;
  106. margin:0 auto;
  107. .ant-checkbox-group{
  108. .ant-checkbox-wrapper{
  109. margin-bottom:10px;
  110. }
  111. }
  112. }
  113. .btn-cont {
  114. text-align: center;
  115. margin: 35px 0 10px;
  116. }
  117. }
  118. </style>