123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <template>
- <div>
- <!-- 一行格式明细 -->
- <div v-if="formatType == 1">
- <div class="reportdetail_mx_for " v-for="(data,index) in dataList" :key="index" @click="handleClick(data)">
- <div class="reportdetail_mx_index">{{data.index+1}}</div>
- <div style="padding:0 0 0 5px; ">
- <div style="display:flex;align-items: center">
- <div style="font-size: 15px;font-weight: bold;margin-right:20px">{{data.mainname}}
- <template v-if="data.grade">({{data.grade}})</template>
- </div>
- <div class="reportdetail_mx_amt">{{data.amt | moneyWan}}元</div>
- <div class="reportdetail_mx_qty">{{data.qty}}<span v-if="data.unit">{{data.unit}}</span><span v-else>件</span></div>
- <div class="reportdetail_mx_qty" v-if="data.percent">{{data.percent}}%</div>
- </div>
- </div>
- </div>
- </div>
- <!-- 两行格式明细 -->
- <div v-else-if="formatType == 2">
- <div class="reportdetail_mx_for mx_border" v-for="(data,index) in dataList" :key="index" @click="handleClick(data)">
- <div class="reportdetail_mx_index">{{data.index+1}}</div>
- <div style="padding:0 0 0 5px; ">
- <div class="reportdetail_mx_name">
- <div>{{data.mainname}}
- <template v-if="data.grade">({{data.grade}})</template>
- </div>
- </div>
- <div class="reportdetail_mx_mode">
- <span v-if="mxType == 3 || mxType == 5">业务员:</span>
- <span>{{data.subname}}</span>
- </div>
- <div style="display:flex;align-items: center">
- <div class="reportdetail_mx_amt">{{data.amt | moneyWan}}元</div>
- <div class="reportdetail_mx_qty">{{data.qty}}<span v-if="data.unit">{{data.unit}}</span><span v-else>件</span></div>
- </div>
- </div>
- </div>
- </div>
- <!-- 三行格式明细 -->
- <div v-else-if="formatType == 3">
- <div class="reportdetail_mx_for mx_border" v-for="(data,index) in dataList" :key="index" @click="handleClick(data)">
- <div class="reportdetail_mx_index">{{data.index+1}}</div>
- <div style="padding:0 0 0 5px; ">
- <div class="reportdetail_mx_name">
- <div>{{data.mainname}}
- <template v-if="data.grade">({{data.grade}})</template>
- </div>
- </div>
- <div class="reportdetail_mx_mode">
- <span v-if="mxType == 5">{{data.subname}}</span>
- </div>
- <div style="display:flex;align-items: center">
- <div class="reportdetail_mx_amt">{{data.amt | moneyWan}}元</div>
- <div class="reportdetail_mx_qty">{{data.qty}}<span v-if="data.unit">{{data.unit}}</span><span v-else>件</span></div>
- <div class="reportdetail_mx_qty" v-if="data.avgprice">均价:{{data.avgprice}}元</div>
- <div class="reportdetail_mx_qty" v-if="data.other">{{data.other}}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'LjReportMxList',
- props: {
- // 格式 1-一行 2-两行 3-三行
- formatType: {
- type: Number
- },
- // 明细类型 1-业务员 2-客户 3-产品型号 4-区域 5-产品 6-子型号
- mxType: {
- type: Number
- },
- // 数据列表
- dataList: {
- type: Array,
- default: function() {
- return []
- }
- }
- },
- methods: {
- handleClick(data) {
- this.$emit('handleMx', data,this.mxType);
- }
- },
- }
- </script>
- <style>
- .reportdetail_mx_for {
- display: flex;
- align-items: center;
- padding: 5px 0 5px 0
- }
- .reportdetail_mx_index {
- flex: 0 0 10%;
- text-align: center;
- /* align-items: center; */
- font-size: 20px;
- font-family: 'Courier New', Courier, monospace;
- font-weight: bold;
- }
- .mx_border {
- border-bottom: 1px solid #eee;
- }
- .reportdetail_mx_name {
- flex: 0 0 80%;
- font-size: 15px;
- font-weight: bold
- }
- .reportdetail_mx_mode {
- font-size: 13px;
- color: #666
- }
- .reportdetail_mx_amt {
- font-size: 15px;
- font-weight: bold;
- color: #fd7526
- }
- .reportdetail_mx_qty {
- margin-left: 20px;
- font-size: 15px;
- color: #666
- }
- </style>
|