lj-report-mx-list.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div>
  3. <!-- 一行格式明细 -->
  4. <div v-if="formatType == 1">
  5. <div class="reportdetail_mx_for " v-for="(data,index) in dataList" :key="index" @click="handleClick(data)">
  6. <div class="reportdetail_mx_index">{{data.index+1}}</div>
  7. <div style="padding:0 0 0 5px; ">
  8. <div style="display:flex;align-items: center">
  9. <div style="font-size: 15px;font-weight: bold;margin-right:20px">{{data.mainname}}
  10. <template v-if="data.grade">({{data.grade}})</template>
  11. </div>
  12. <div class="reportdetail_mx_amt">{{data.amt | moneyWan}}元</div>
  13. <div class="reportdetail_mx_qty">{{data.qty}}<span v-if="data.unit">{{data.unit}}</span><span v-else>件</span></div>
  14. <div class="reportdetail_mx_qty" v-if="data.percent">{{data.percent}}%</div>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. <!-- 两行格式明细 -->
  20. <div v-else-if="formatType == 2">
  21. <div class="reportdetail_mx_for mx_border" v-for="(data,index) in dataList" :key="index" @click="handleClick(data)">
  22. <div class="reportdetail_mx_index">{{data.index+1}}</div>
  23. <div style="padding:0 0 0 5px; ">
  24. <div class="reportdetail_mx_name">
  25. <div>{{data.mainname}}
  26. <template v-if="data.grade">({{data.grade}})</template>
  27. </div>
  28. </div>
  29. <div class="reportdetail_mx_mode">
  30. <span v-if="mxType == 3 || mxType == 5">业务员:</span>
  31. <span>{{data.subname}}</span>
  32. </div>
  33. <div style="display:flex;align-items: center">
  34. <div class="reportdetail_mx_amt">{{data.amt | moneyWan}}元</div>
  35. <div class="reportdetail_mx_qty">{{data.qty}}<span v-if="data.unit">{{data.unit}}</span><span v-else>件</span></div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. <!-- 三行格式明细 -->
  41. <div v-else-if="formatType == 3">
  42. <div class="reportdetail_mx_for mx_border" v-for="(data,index) in dataList" :key="index" @click="handleClick(data)">
  43. <div class="reportdetail_mx_index">{{data.index+1}}</div>
  44. <div style="padding:0 0 0 5px; ">
  45. <div class="reportdetail_mx_name">
  46. <div>{{data.mainname}}
  47. <template v-if="data.grade">({{data.grade}})</template>
  48. </div>
  49. </div>
  50. <div class="reportdetail_mx_mode">
  51. <span v-if="mxType == 5">{{data.subname}}</span>
  52. </div>
  53. <div style="display:flex;align-items: center">
  54. <div class="reportdetail_mx_amt">{{data.amt | moneyWan}}元</div>
  55. <div class="reportdetail_mx_qty">{{data.qty}}<span v-if="data.unit">{{data.unit}}</span><span v-else>件</span></div>
  56. <div class="reportdetail_mx_qty" v-if="data.avgprice">均价:{{data.avgprice}}元</div>
  57. <div class="reportdetail_mx_qty" v-if="data.other">{{data.other}}</div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </template>
  64. <script>
  65. export default {
  66. name: 'LjReportMxList',
  67. props: {
  68. // 格式 1-一行 2-两行 3-三行
  69. formatType: {
  70. type: Number
  71. },
  72. // 明细类型 1-业务员 2-客户 3-产品型号 4-区域 5-产品 6-子型号
  73. mxType: {
  74. type: Number
  75. },
  76. // 数据列表
  77. dataList: {
  78. type: Array,
  79. default: function() {
  80. return []
  81. }
  82. }
  83. },
  84. methods: {
  85. handleClick(data) {
  86. this.$emit('handleMx', data,this.mxType);
  87. }
  88. },
  89. }
  90. </script>
  91. <style>
  92. .reportdetail_mx_for {
  93. display: flex;
  94. align-items: center;
  95. padding: 5px 0 5px 0
  96. }
  97. .reportdetail_mx_index {
  98. flex: 0 0 10%;
  99. text-align: center;
  100. /* align-items: center; */
  101. font-size: 20px;
  102. font-family: 'Courier New', Courier, monospace;
  103. font-weight: bold;
  104. }
  105. .mx_border {
  106. border-bottom: 1px solid #eee;
  107. }
  108. .reportdetail_mx_name {
  109. flex: 0 0 80%;
  110. font-size: 15px;
  111. font-weight: bold
  112. }
  113. .reportdetail_mx_mode {
  114. font-size: 13px;
  115. color: #666
  116. }
  117. .reportdetail_mx_amt {
  118. font-size: 15px;
  119. font-weight: bold;
  120. color: #fd7526
  121. }
  122. .reportdetail_mx_qty {
  123. margin-left: 20px;
  124. font-size: 15px;
  125. color: #666
  126. }
  127. </style>