statisticsDetail.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <div>
  3. <a-modal
  4. centered
  5. wrapClassName="settlementModifyModal-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. title="订单详情"
  9. v-model="isshow"
  10. @cancle="handleBack"
  11. width="80%">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <div ref="tableSearch" class="table-page-search-wrapper" v-if="itemData">
  14. <a-descriptions>
  15. <a-descriptions-item label="活动名称">
  16. {{ itemData.rewardRuleName|| '--' }}
  17. </a-descriptions-item>
  18. <a-descriptions-item label="货架名称">
  19. {{ itemData.shelfName|| '--' }}
  20. </a-descriptions-item>
  21. <a-descriptions-item label="配件经销商">
  22. {{ itemData.dealerName|| '--' }}
  23. </a-descriptions-item>
  24. <a-descriptions-item label="汽车修理厂">
  25. {{ itemData.storeName|| '--' }}
  26. </a-descriptions-item>
  27. <a-descriptions-item label="员工姓名">
  28. {{ itemData.userName|| '--' }}
  29. </a-descriptions-item>
  30. <a-descriptions-item label="员工手机号码">
  31. {{ itemData.userMobile|| '--' }}
  32. </a-descriptions-item>
  33. <a-descriptions-item label="订单编号">
  34. {{ itemData.orderNo|| '--' }}
  35. </a-descriptions-item>
  36. <a-descriptions-item label="订单类型">
  37. {{ itemData.orderTypeDictValue|| '--' }}
  38. </a-descriptions-item>
  39. <a-descriptions-item label="订单状态">
  40. {{ itemData.orderSourceDictValue|| '--' }}
  41. </a-descriptions-item>
  42. <a-descriptions-item label="红包奖励时间">
  43. {{ itemData.rewardCreateDate|| '--' }}
  44. </a-descriptions-item>
  45. <a-descriptions-item label="红包发放状态">
  46. {{ itemData.rewardStatusDictValue|| '--' }}
  47. </a-descriptions-item>
  48. <a-descriptions-item label="红包发放时间">
  49. {{ itemData.giveDate|| '--' }}
  50. </a-descriptions-item>
  51. </a-descriptions>
  52. </div>
  53. <a-alert type="info" style="margin-bottom:10px" v-if="itemData">
  54. <div slot="message">
  55. 红包金额小计:<strong>{{ itemData&&(itemData.totalRewardAmount || itemData.totalRewardAmount==0) ? itemData.totalRewardAmount : '--' }}</strong>;
  56. </div>
  57. </a-alert>
  58. <s-table
  59. class="sTable"
  60. ref="table"
  61. size="small"
  62. rowKey="id"
  63. :columns="columns"
  64. :data="loadData"
  65. :showPagination="false"
  66. :defaultLoadData="false"
  67. :scroll="{ y: 350 }"
  68. bordered>
  69. </s-table>
  70. <div style="padding:10px;text-align:center;">
  71. <a-button type="default" @click="handleBack">关闭</a-button>
  72. </div>
  73. </a-spin>
  74. </a-modal>
  75. </div>
  76. </template>
  77. <script>
  78. import { STable, VSelect } from '@/components'
  79. import { rewardOrderQueryList } from '@/api/rewardOrder.js'
  80. export default {
  81. name: 'StatisticsDetail',
  82. components: {
  83. STable, VSelect
  84. },
  85. props: {
  86. visible: {
  87. type: Boolean,
  88. default: false
  89. },
  90. itemData: {
  91. type: Object,
  92. default: function () {
  93. return null
  94. }
  95. }
  96. },
  97. data () {
  98. return {
  99. spinning: false,
  100. isshow: this.visible,
  101. // 表头
  102. columns: [
  103. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  104. { title: '产品编码', dataIndex: 'productCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  105. { title: '产品名称', dataIndex: 'productName', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  106. { title: '下单数量', dataIndex: 'productQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  107. { title: '售价(终端会员价)', dataIndex: 'terminalPrice', width: '10%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  108. { title: '成本价(市级价)', dataIndex: 'cityPrice', width: '10%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  109. { title: '售价小计', dataIndex: 'terminalPriceTotal', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  110. { title: '成本小计', dataIndex: 'cityPriceTotal', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  111. { title: '毛利小计', dataIndex: 'grossAmountTotal', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  112. { title: '红包毛利比例', dataIndex: 'rewardRatio', width: '10%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  113. { title: '红包金额', dataIndex: 'rewardAmount', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } }
  114. ],
  115. // 加载数据方法 必须为 Promise 对象
  116. loadData: parameter => {
  117. this.spinning = true
  118. return rewardOrderQueryList(Object.assign(parameter, { rewardOrderSn: this.itemData.rewardOrderSn })).then(res => {
  119. let data
  120. if (res.status == 200) {
  121. data = res.data
  122. const no = 0
  123. for (let i = 0; i < data.length; i++) {
  124. const _item = data[i]
  125. _item.no = no + i + 1
  126. }
  127. }
  128. this.spinning = false
  129. return data
  130. })
  131. }
  132. }
  133. },
  134. methods: {
  135. handleBack () {
  136. this.$emit('close')
  137. }
  138. },
  139. watch: {
  140. visible (newValue, oldValue) {
  141. this.isshow = newValue
  142. },
  143. isshow (newValue, oldValue) {
  144. if (!newValue) {
  145. this.$emit('close')
  146. } else {
  147. this.$nextTick(() => {
  148. this.$refs.table.refresh(true)
  149. })
  150. }
  151. }
  152. }
  153. }
  154. </script>
  155. <style lang="less">
  156. .settlementModifyModal-modal{
  157. .ant-input-number-handler-wrap{
  158. display: none;
  159. }
  160. }
  161. </style>