viewSelectModal.vue 4.5 KB

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