JLH/JLHAPP/src/components/lj-report-mx-list.vue

<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>