outDetailModal.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <a-modal
  3. centered
  4. :footer="null"
  5. :title="titleInfo"
  6. v-model="isShow"
  7. @cancel="isShow=false"
  8. width="60%">
  9. <a-spin :spinning="spinning" tip="Loading...">
  10. <s-table
  11. class="sTable fixPagination"
  12. ref="table"
  13. size="small"
  14. :rowKey="(record) => record.id"
  15. :columns="columns"
  16. :data="loadData"
  17. :style="{height: '300px' }"
  18. :scroll="{ y: 600 }"
  19. :showPagination="true"
  20. :defaultLoadData="false"
  21. bordered>
  22. </s-table>
  23. </a-spin>
  24. </a-modal>
  25. </template>
  26. <script>
  27. import { commonMixin } from '@/utils/mixin'
  28. import { STable } from '@/components'
  29. import { outDetailList } from '@/api/reportData'
  30. export default {
  31. name: 'VerifyModal',
  32. mixins: [commonMixin],
  33. components: { STable },
  34. props: {
  35. openModal: {
  36. type: Boolean,
  37. default: false
  38. },
  39. itemSn: {
  40. type: [Number, String],
  41. default: ''
  42. }
  43. },
  44. data () {
  45. const _this = this
  46. return {
  47. spinning: false,
  48. isShow: this.openModal,
  49. titleInfo: '出库明细',
  50. queryParam: {},
  51. columns: [{ title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  52. { title: '类型', width: '15%', dataIndex: 'customTypeDictValue', align: 'center', customRender: function (text) { return text || '--' } },
  53. { title: '加盟商/终端', dataIndex: 'customName', width: '30%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  54. { title: '数量', dataIndex: 'outQty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  55. { title: '金额', dataIndex: 'outAmount', width: '15%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }],
  56. // 加载数据方法 必须为 Promise 对象
  57. loadData: parameter => {
  58. this.spinning = true
  59. const params = Object.assign(parameter, this.queryParam)
  60. return outDetailList(params).then(res => {
  61. let data
  62. if (res.status == 200) {
  63. data = res.data
  64. const no = (data.pageNo - 1) * data.pageSize
  65. for (var i = 0; i < data.list.length; i++) {
  66. data.list[i].no = no + i + 1
  67. }
  68. this.disabled = false
  69. }
  70. this.spinning = false
  71. return data
  72. })
  73. }
  74. }
  75. },
  76. methods: {
  77. getAjaxData (obj, tit) {
  78. this.queryParam = obj
  79. this.titleInfo = tit || '出库明细'
  80. this.$nextTick(() => {
  81. this.$refs.table.refresh()
  82. })
  83. }
  84. },
  85. watch: {
  86. openModal (nVal, oVal) {
  87. this.isShow = nVal
  88. },
  89. isShow (nVal, oVal) {
  90. if (!nVal) {
  91. this.$emit('close')
  92. this.$refs.table.clearTable()
  93. }
  94. }
  95. }
  96. }
  97. </script>
  98. <style>
  99. </style>