SharePoint_SPFX.git

uatadmin

2024-08-21 426632e0a80fc7483ab07ec94e3d76f7bfdf2957

提交 \| 用户 \| age
957068	1	<template>
33911f	2	<ul class="container">
J	3	<li class="item">
	4	<div class="item-label bg1">备品编号{{ props.index }}</div>
	5	<div class="item-content" style="flex: 0 0 110px">
	6	{{ props.content[0]?.Item_CD }}
	7	</div>
	8	<div class="item-label bg2">品名</div>
	9	<div class="item-content" style="flex: 0 0 160px">
	10	{{ props.content[0]?.Item_Name }}
	11	</div>
	12	<div class="item-label bg2">型号</div>
	13	<div class="item-content">{{ props.content[0]?.SPEC_CN }}</div>
	14	<div class="item-label bg2" style="flex: 0 0 60px">单位</div>
426632	15	<div class="item-content" style="flex: 0 0 100px">
33911f	16	{{ props.content[0]?.Package }}
J	17	</div>
	18	</li>
	19	<li class="item" v-for="(item, index) in computedContent" :key="index">
	20	<div class="item-label bg3">合作伙伴简称</div>
	21	<div class="item-content" style="flex: 0 0 110px">
	22	{{ item.Request_Vend_Name_S }}
	23	</div>
	24	<div class="item-label bg3">单价Ver   {{ item.Reply_Count }}.0</div>
	25	<div class="item-content" style="flex: 0 0 160px">
	26	{{ item.Unit_Price }}
	27	</div>
	28	<div class="item-label bg3">币种</div>
	29	<div class="item-content">{{ item.Currency8 }}</div>
	30	<div class="item-label bg3">折USD</div>
	31	<div class="item-content">{{ item.Exchange_Unit_Price }}</div>
	32	<div class="item-label bg3" style="flex: 0 0 60px">LT</div>
426632	33	<div class="item-content" style="flex: 0 0 100px">{{ item.LT }}</div>
33911f	34	</li>
J	35	<li class="item">
	36	<div
	37	class="item-label bg4"
	38	v-html="'<p>选定购入</p><p>合作伙伴</p>'"
	39	></div>
	40	<div class="item-content" style="flex: 0 0 378px">
	41	{{ props.content[0]?.VEND_NAME }}
	42	</div>
	43	<div class="item-label bg4">品牌</div>
	44	<div class="item-content">{{ props.content[0]?.Brand }}</div>
	45	<div class="item-label bg4" style="flex: 0 0 60px">原产地</div>
426632	46	<div class="item-content" style="flex: 0 0 100px">
33911f	47	{{ props.content[0]?.Origin }}
J	48	</div>
	49	</li>
	50	<li class="item">
	51	<div class="item-label bg2">经费项目</div>
	52	<div class="item-content">
	53	{{ props.content[0]?.Cost_Name }}
	54	<span style="float: right; margin-right: 10%; color: #409eff">
	55	<a
	56	class="link-padding"
	57	v-if="props.content.filter((e) => e.Attach_File1).length"
	58	:href="props.content.filter((e) => e.Attach_File1)[0]?.Attach_File1"
	59	target="_blank"
	60	>附件1</a
	61	>
	62	<a
	63	class="link-padding"
	64	v-if="props.content.filter((e) => e.Attach_File2).length"
	65	:href="props.content.filter((e) => e.Attach_File2)[0]?.Attach_File2"
	66	target="_blank"
	67	>附件2</a
	68	>
	69	<a
	70	class="link-padding"
	71	v-if="props.content.filter((e) => e.Attach_File3).length"
	72	:href="props.content.filter((e) => e.Attach_File3)[0]?.Attach_File3"
	73	target="_blank"
	74	>附件3</a
	75	>
	76	</span>
	77	</div>
	78	</li>
	79	<li class="item">
	80	<div class="item-label bg5">备注</div>
	81	<div class="item-content">{{ props.content[0]?.Comment }}</div>
	82	</li>
	83	</ul>
957068	84	</template>
J	85
	86	<script setup>
f8db41	87	import { defineProps, computed } from "vue";
e2c6f1	88	import { toThousands } from "../../ComponentCommon";
957068	89	const props = defineProps({
J	90	content: {
280110	91	type: Array,
f8db41	92	default: () => [],
1c6af9	93	},
J	94	index: {
	95	type: Number,
	96	default: 0,
f8db41	97	},
957068	98	});
32afe4	99
J	100	const computedContent = computed(() => {
	101	return props.content.map((item) => {
	102	let res = { ...item };
f8db41	103	res.Item_Name = item.Item_Name.split("/");
e2c6f1	104	res.Unit_Price =toThousands((+res.Unit_Price).toFixed(5));
J	105	res.LT = toThousands(res.LT);
200265	106	res.Exchange_Unit_Price = (+res.Exchange_Unit_Price).toFixed(5);
32afe4	107	return res;
J	108	});
200265	109	});
U	110
69315f	111	const fileContet = computed(() => {
200265	112	let res = {};
69315f	113	props.content.forEach((value, index) => {
U	114	if (!res[value.Request_Vend_Name_S]) {
f8db41	115	res[value.Request_Vend_Name_S] = {
J	116	path: value.PR_File_Attach_File,
	117	version: value.Reply_Count,
	118	};
69315f	119	}
200265	120	});
U	121	return res;
32afe4	122	});
957068	123	</script>
J	124
	125	<style scoped lang="less">
33911f	126	.container {
1c6af9	127	margin-bottom: 5px;
J	128	}
957068	129	.item {
J	130	display: flex;
	131	.item-label {
0ca1c5	132	border: 1px solid black;
277d9b	133	flex: 0 0 110px;
33911f	134	margin-top: -1px;
J	135	margin-left: -1px;
0ca1c5	136	text-align: center;
U	137	align-content: center;
33911f	138	border-collapse: collapse;
957068	139	}
69315f	140
957068	141	.item-content {
0ca1c5	142	border: 1px solid black;
U	143	min-width: 10px;
33911f	144	margin-top: -1px;
J	145	margin-left: -1px;
0ca1c5	146	flex: 1 0 0;
U	147	justify-content: center;
32afe4	148	align-content: center;
0ca1c5	149	word-wrap: break-word;
U	150	overflow-wrap: break-word;
	151	white-space: normal;
64a2d1	152	min-height: 40px;
e0bf8f	153	padding: 2px 5px;
33911f	154	border-collapse: collapse;
957068	155	}
69315f	156
cf40d3	157	.link-padding {
U	158	padding: 3px 6px;
	159	display: inline-block;
4fa9d0	160	color: revert;
cf40d3	161	}
U	162
957068	163	.bg1 {
J	164	background-color: rgb(255, 163, 3);
	165	}
69315f	166
957068	167	.bg2 {
J	168	background-color: rgb(177, 239, 235);
	169	}
69315f	170
957068	171	.bg3 {
J	172	background-color: rgb(240, 231, 141);
	173	}
69315f	174
957068	175	.bg4 {
J	176	background-color: rgb(146, 236, 146);
	177	}
200265	178
69315f	179	.bg5 {
U	180	background-color: #006dbb;
	181	color: #fff;
	182	}
0ca1c5	183	}
U	184	</style>