viewSelectModal.vue 4.3 KB

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