list.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <div class="productInfoList-wrap">
  3. <!-- 列表 -->
  4. <s-table
  5. class="sTable"
  6. ref="table"
  7. size="small"
  8. :rowKey="(record) => record.id"
  9. :columns="columns"
  10. :data="loadData"
  11. :showPagination="false"
  12. :scroll="{ y: tableHeight-120 }"
  13. :defaultLoadData="false"
  14. bordered>
  15. <template slot="footer">
  16. <a-row>
  17. <a-col span="2">合计:</a-col>
  18. <a-col span="22">
  19. <a-row>
  20. <a-col span="4">期初结存数量:{{ (totalData && (totalData.beginQty || totalData.beginQty==0)) ? totalData.beginQty : '--' }}</a-col>
  21. <a-col span="4">期初结存单价:{{ (totalData && (totalData.beginPrice || totalData.beginPrice==0)) ? toThousands(totalData.beginPrice) : '--' }}</a-col>
  22. <a-col span="4">期初结存金额:{{ (totalData && (totalData.beginAmount || totalData.beginAmount==0)) ? toThousands(totalData.beginAmount) : '--' }}</a-col>
  23. <a-col span="4">本期收入数量:{{ (totalData && (totalData.putQty || totalData.putQty==0)) ?totalData.putQty : '--' }}</a-col>
  24. <a-col span="4">本期收入单价:{{ (totalData && (totalData.putPrice || totalData.putPrice==0)) ? toThousands(totalData.putPrice) : '--' }}</a-col>
  25. <a-col span="4">本期收入金额:{{ (totalData && (totalData.putAmount || totalData.putAmount==0)) ? toThousands(totalData.putAmount) : '--' }}</a-col>
  26. <a-col span="4">本期发出数量:{{ (totalData && (totalData.outQty || totalData.outQty==0)) ? totalData.outQty : '--' }}</a-col>
  27. <a-col span="4">本期发出单价:{{ (totalData && (totalData.outPrice || totalData.outPrice==0)) ? toThousands(totalData.outPrice) : '--' }}</a-col>
  28. <a-col span="4">本期发出金额:{{ (totalData && (totalData.outAmount || totalData.outAmount==0)) ? toThousands(totalData.outAmount) : '--' }}</a-col>
  29. <a-col span="4">本期结存数量:{{ (totalData && (totalData.endQty || totalData.endQty==0)) ? totalData.endQty : '--' }}</a-col>
  30. <a-col span="4">本期结存单价:{{ (totalData && (totalData.endPrice || totalData.endPrice==0)) ? toThousands(totalData.endPrice) : '--' }}</a-col>
  31. <a-col span="4">本期结存金额:{{ (totalData && (totalData.endAmount || totalData.endAmount==0)) ? toThousands(totalData.endAmount) : '--' }}</a-col>
  32. </a-row>
  33. </a-col>
  34. </a-row>
  35. </template>
  36. </s-table>
  37. </div>
  38. </template>
  39. <script>
  40. import { commonMixin } from '@/utils/mixin'
  41. import { queryGroupByprodTypeReportPage } from '@/api/reportData'
  42. import { STable, VSelect } from '@/components'
  43. export default {
  44. name: 'QueryPart',
  45. mixins: [commonMixin],
  46. components: { STable, VSelect },
  47. props: {
  48. newLoading: Boolean,
  49. queryParam: {
  50. type: Object,
  51. default: function () {
  52. return {}
  53. }
  54. },
  55. tableHeight: {
  56. type: Number,
  57. default: 0
  58. },
  59. totalData: {
  60. type: Object,
  61. default: function () {
  62. return null
  63. }
  64. }
  65. },
  66. data () {
  67. return {
  68. columns: [
  69. { title: '二级分类', dataIndex: 'productTypeName2', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  70. { title: '三级分类', dataIndex: 'productTypeName3', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  71. { title: '品牌', dataIndex: 'productBrandName', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  72. { title: '期初结存数量', dataIndex: 'beginQty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  73. { title: '期初结存单价', dataIndex: 'beginPrice', width: '12%', align: 'center', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  74. { title: '期初结存金额', dataIndex: 'beginAmount', width: '12%', align: 'center', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  75. { title: '本期收入数量', dataIndex: 'putQty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  76. { title: '本期收入单价', dataIndex: 'putPrice', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  77. { title: '本期收入金额', dataIndex: 'putAmount', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  78. { title: '本期发出数量', dataIndex: 'outQty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  79. { title: '本期发出单价', dataIndex: 'outPrice', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  80. { title: '本期发出金额', dataIndex: 'outAmount', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  81. { title: '期末结存数量', dataIndex: 'endQty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  82. { title: '期末结存单价', dataIndex: 'endPrice', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  83. { title: '期末结存金额', dataIndex: 'endAmount', width: '12%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') }
  84. ],
  85. disabled: false, // 查询、重置按钮是否可操作
  86. // 加载数据方法 必须为 Promise 对象
  87. loadData: parameter => {
  88. this.disabled = true
  89. const params = Object.assign(parameter, this.queryParam)
  90. return queryGroupByprodTypeReportPage(params).then(res => {
  91. let data
  92. if (res.status == 200) {
  93. data = res.data
  94. this.disabled = false
  95. }
  96. this.spinning = false
  97. return data
  98. })
  99. }
  100. }
  101. },
  102. methods: {
  103. pageInit (buyerSn) {
  104. this.resetCurForm()
  105. },
  106. // 刷新当前页面
  107. resetCurForm () {
  108. this.$refs.table.refresh()
  109. },
  110. resetTable () {
  111. this.$refs.table.clearTable()
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="less" scoped>
  117. .productInfoList-wrap{
  118. .ellipsisCon{
  119. display: flex;
  120. justify-content: space-between;
  121. align-items: center;
  122. .ellipsisText{
  123. width: 100%;
  124. overflow: hidden;
  125. text-overflow: ellipsis;
  126. display: box;
  127. display: -webkit-box;
  128. -webkit-line-clamp: 1;
  129. -webkit-box-orient: vertical;
  130. }
  131. }
  132. }
  133. </style>