JLH/JLHAPP/src/components/lj-taskmx-popup.vue

<template>
	<div style="width: 100%;">
		<div style="display: flex;padding: 10px 0;">
			<div style="margin:0 auto;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">{{title}}</div>
			<div style="position: absolute;right: 20px;color: #ccc;font-size: 15px;line-height:26px;"
				@click="handleClickClose">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-close"></use>
				</svg>
			</div>
		</div>
		<div style="padding-bottom: 5px;">
			<mu-row>
				<template v-for="item in objectList">
					<mu-col :span="item.tilspan ? item.tilspan : '3'" class="lj-text text-title">{{item.title}}:
					</mu-col>
					<mu-col :span="item.valspan ? item.valspan : '9'" class="lj-text">{{item.value}}<span
							v-if="item.append">{{item.append}}</span></mu-col>
				</template>
			</mu-row>
		</div>
		<div class="lj-divider" style="height: 5px;"></div>
		<div>
			<mu-tabs :value.sync="activeTab" inverse color="orange" indicator-color="orange" center
				style="width:60%;margin: 0 auto;background-color: #ffffff;" @change="changeTabs" ref="headerDom">
				<mu-tab style="font-size:15px;font-weight: bold;">数量</mu-tab>
				<mu-tab style="font-size:15px;font-weight: bold;" v-if="!has121Power">价格</mu-tab>
				<mu-tab style="font-size:15px;font-weight: bold;" v-if="showFj">附件</mu-tab>
			</mu-tabs>
			<div v-show="activeTab === 0">
				<div class="lj-cell" style="font-size: 15px;font-weight:bold;color:#666">
					<div style="padding: 10px 0 0 0;" v-for="item in neededList">
						<div>
							<span>{{item.mainlable}}</span>
							<span style="position: absolute;right:30px;color:#888">{{item.mainvalue}}</span>
						</div>
						<div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
							<div style="display:flex;" v-for="mx in item.tableList">
								<span>{{mx.lable}}</span>
								<span style="position: absolute;right:30px;">{{mx.value}}</span>
							</div>
						</div>
						<div class="lj-divider" style="margin-top:10px"></div>
					</div>
					
				</div>
			</div>
			<div v-show="activeTab === 1">
				<mu-row align-items="center"
					style="text-align: center;font-size:13px;margin-top:10px;border-bottom: 1px solid #eee;padding:0 0 10px 0;color:#666;">
					<mu-col span="4">供应商</mu-col>
					<mu-col span="4">最新报价</mu-col>
					<mu-col span="4">报价时间</mu-col>
					<!-- <mu-col span="3">累计采购量</mu-col> -->
				</mu-row>
				<mu-row align-items="center"
					style="text-align: center;border-bottom: 1px solid #eee;font-size:12px;"
					v-for="item in priceList">
					<mu-col span="4">{{item.sptname}}</mu-col>
					<mu-col span="4">{{item.fpice | moneyFilter}}/{{item.unit}}</mu-col>
					<mu-col span="4">{{item.moddate | dateFilter}}</mu-col>
					<!-- <mu-col span="3">{{item.qty}}{{item.unit}}</mu-col> -->
				</mu-row>
			</div>
			<div v-show="activeTab === 2" v-if="showFj">
				<slot name="filelist"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'LjTaskmxPopup',
		props: {
			objectList: {
				type: Array,
				default: function () {
					return []
				}
			},
			neededList: {
				type: Array,
				default: function () {
					return []
				}
			},
			priceList: {
				type: Array,
				default: function () {
					return []
				}
			},
			showFj: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				title: '明细相关信息',
				activeTab: 0,
			}
		},
		created() {

		},
		methods: {
			handleClickClose() {
				this.$emit('click-close')
			},
			changeTabs() {

			}
		},
		computed: {
            has121Power() {
                let userinfo = $lj.getStorage("userInfo");
                return userinfo.empid > 0 && $lj.checkPower(121);
            }
        }
	}
</script>

<style scoped>
	.lj-text {
		font-size: 14px;
	}

	.text-title {
		text-align: right;
	}
</style>