outDetailModal.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <a-modal
  3. centered
  4. :footer="null"
  5. :title="titleInfo"
  6. v-model="isShow"
  7. @cancel="isShow=false"
  8. width="50%">
  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: '400px' }"
  18. :scroll="{ y: 330 }"
  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. return {
  46. spinning: false,
  47. isShow: this.openModal,
  48. titleInfo: '出库明细',
  49. queryParam: {},
  50. // 加载数据方法 必须为 Promise 对象
  51. loadData: parameter => {
  52. this.spinning = true
  53. const params = Object.assign(parameter, this.queryParam)
  54. return outDetailList(params).then(res => {
  55. let data
  56. if (res.status == 200) {
  57. data = res.data
  58. const no = (data.pageNo - 1) * data.pageSize
  59. for (var i = 0; i < data.list.length; i++) {
  60. data.list[i].no = no + i + 1
  61. }
  62. this.disabled = false
  63. }
  64. this.spinning = false
  65. return data
  66. })
  67. }
  68. }
  69. },
  70. computed: {
  71. columns () {
  72. const _this = this
  73. const arr = [{ title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  74. { title: '类型', width: '15%', dataIndex: 'customTypeDictValue', align: 'center', customRender: function (text) { return text || '--' } },
  75. { title: '加盟商/终端', dataIndex: 'customName', width: '30%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  76. { title: '数量', dataIndex: 'outQty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  77. ]
  78. if (this.$hasPermissions('B_outDetailShow_salesPrice')) {
  79. arr.push({ title: '金额', dataIndex: 'outAmount', width: '15%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } })
  80. }
  81. return arr
  82. }
  83. },
  84. methods: {
  85. getAjaxData (obj, titObj) {
  86. this.queryParam = obj
  87. if (titObj && Object.keys(titObj).length != 0) {
  88. this.titleInfo = titObj.tit + '(产品编码:' + titObj.code + ',原厂编码:' + (titObj.origCode || '--') + ',产品尺寸:' + (titObj.size || '--') + ')'
  89. } else {
  90. this.titleInfo = '出库明细'
  91. }
  92. this.$nextTick(() => {
  93. this.$refs.table.refresh()
  94. })
  95. }
  96. },
  97. watch: {
  98. openModal (nVal, oVal) {
  99. this.isShow = nVal
  100. },
  101. isShow (nVal, oVal) {
  102. if (!nVal) {
  103. this.$emit('close')
  104. this.$refs.table.clearTable()
  105. }
  106. }
  107. }
  108. }
  109. </script>
  110. <style>
  111. </style>