viewSelectModal.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <a-modal
  3. v-drag
  4. centered
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="title"
  8. v-model="isShow"
  9. @cancel="cancel"
  10. width="70%">
  11. <div style="padding:10px;">共{{ dataSource&&dataSource.length }}条</div>
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <div>
  14. <ve-table
  15. border-y
  16. v-show="!showEmpty"
  17. :scroll-width="0"
  18. :max-height="tableHeight"
  19. :row-style-option="{clickHighlight: true}"
  20. :cellSelectionOption="{enable: false}"
  21. :virtual-scroll-option="{enable: true}"
  22. :columns="columns"
  23. :table-data="dataSource"
  24. row-key-field-name="no"
  25. :column-width-resize-option="columnWidthResizeOption"
  26. />
  27. <div v-show="showEmpty" class="empty-data"><a-empty description="暂无数据" :image="simpleImage"/></div>
  28. </div>
  29. <div class="btn-cont" style="padding:20px 20px 0;text-align: center;">
  30. <a-button id="viewChoose-modal-cancel" type="primary" v-if="submitType=='noMearge'" class="button-info" @click="cancel">关闭</a-button>
  31. <a-button id="viewChoose-modal-submit" type="primary" v-else @click="submit">提交</a-button>
  32. </div>
  33. </a-spin>
  34. </a-modal>
  35. </template>
  36. <script>
  37. import {
  38. commonMixin
  39. } from '@/utils/mixin'
  40. import { Empty } from 'ant-design-vue'
  41. export default {
  42. name: 'ViewSelectModal',
  43. mixins: [commonMixin],
  44. props: {
  45. openModal: { // 弹框显示
  46. type: Boolean,
  47. default: false
  48. }
  49. },
  50. data () {
  51. return {
  52. spinning: false,
  53. isShow: this.openModal, // 弹框显示
  54. simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
  55. columnWidthResizeOption: {
  56. // default false
  57. enable: true,
  58. // column resize min width
  59. minWidth: 50
  60. },
  61. showEmpty: false, // 无数据图表
  62. tableHeight: 450, // 表格高度
  63. dataSource: [], // 列表数据
  64. title: '已选待转费用报销单',
  65. submitType: 'noMearge', // 默认是,直接勾选的数据,不是合并后的数据
  66. otherData: null // 其它参数
  67. }
  68. },
  69. computed: {
  70. columns () {
  71. const arr = [
  72. { title: '序号', field: 'no', key: 'a', width: 50, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  73. { title: '销售单号', field: 'salesBillNo', key: 'b', width: 100, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  74. { title: '客户名称', field: 'buyerName', key: 'c', width: 150, align: 'center', operationColumn: false, ellipsis: { showTitle: true }, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  75. { title: '费用类型', field: 'convertExpenseAccountTypeDictValue', key: 'd', width: 100, align: 'center', operationColumn: false, ellipsis: { showTitle: true }, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  76. { title: '待转金额', field: 'expense', key: 'e', width: 80, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  77. { title: '促销名称', field: 'promotionTitle', key: 'f', width: 150, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  78. { title: '促销简称', field: 'promotionDescription', key: 'g', width: 150, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  79. { title: '规则简称', field: 'promotionRuleDescription', key: 'h', width: 150, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  80. { title: '促销类型', field: 'promotionRuleTypeDictValue', key: 'l', width: 100, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } }
  81. ]
  82. return arr
  83. }
  84. },
  85. methods: {
  86. // 设置列表数据
  87. setData (list, data) {
  88. this.otherData = data
  89. this.dataSource = JSON.parse(JSON.stringify(list))
  90. this.dataSource.map((item, index) => {
  91. item.no = index + 1
  92. // 合并列表字段不一样
  93. if (this.submitType == 'mearge') {
  94. item.convertExpenseAccountTypeDictValue = item.expenseTypeName
  95. item.promotionRuleTypeDictValue = item.promotionRuleTypeName
  96. }
  97. item.expense = this.toThousands(item.expense, 2)
  98. })
  99. },
  100. // 继续提交
  101. submit () {
  102. this.spinning = true
  103. this.$emit('submit', this.submitType == 'noMearge' ? this.dataSource : this.otherData)
  104. },
  105. // 关闭弹框
  106. cancel () {
  107. this.isShow = false
  108. }
  109. },
  110. watch: {
  111. openModal (nVal, oVal) {
  112. this.isShow = nVal
  113. },
  114. isShow (nVal, oVal) {
  115. if (!nVal) {
  116. this.$emit('close')
  117. this.dataSource = []
  118. }
  119. }
  120. }
  121. }
  122. </script>
  123. <style>
  124. </style>