<template>
|
<ul class="container">
|
<li class="item">
|
<div class="item-label bg1">备品编号{{ props.index }}</div>
|
<div class="item-content" style="flex: 0 0 110px">
|
{{ props.content[0]?.Item_CD }}
|
</div>
|
<div class="item-label bg2">品名</div>
|
<div class="item-content" style="flex: 0 0 160px">
|
{{ props.content[0]?.Item_Name }}
|
</div>
|
<div class="item-label bg2">型号</div>
|
<div class="item-content">{{ props.content[0]?.SPEC_CN }}</div>
|
<div class="item-label bg2" style="flex: 0 0 60px">单位</div>
|
<div class="item-content" style="flex: 0 0 100px">
|
{{ props.content[0]?.Package }}
|
</div>
|
</li>
|
<li class="item" v-for="(item, index) in computedContent" :key="index">
|
<div class="item-label bg3">合作伙伴简称</div>
|
<div class="item-content" style="flex: 0 0 110px">
|
{{ item.Request_Vend_Name_S }}
|
</div>
|
<div class="item-label bg3">单价Ver {{ item.Reply_Count }}.0</div>
|
<div class="item-content" style="flex: 0 0 160px">
|
{{ item.Unit_Price }}
|
</div>
|
<div class="item-label bg3">币种</div>
|
<div class="item-content">{{ item.Currency8 }}</div>
|
<div class="item-label bg3">折USD</div>
|
<div class="item-content">{{ item.Exchange_Unit_Price }}</div>
|
<div class="item-label bg3" style="flex: 0 0 60px">LT</div>
|
<div class="item-content" style="flex: 0 0 100px">{{ item.LT }}</div>
|
</li>
|
<li class="item">
|
<div
|
class="item-label bg4"
|
v-html="'<p>选定购入</p><p>合作伙伴</p>'"
|
></div>
|
<div class="item-content" style="flex: 0 0 378px">
|
{{ props.content[0]?.VEND_NAME }}
|
</div>
|
<div class="item-label bg4">品牌</div>
|
<div class="item-content">{{ props.content[0]?.Brand }}</div>
|
<div class="item-label bg4" style="flex: 0 0 60px">原产地</div>
|
<div class="item-content" style="flex: 0 0 100px">
|
{{ props.content[0]?.Origin }}
|
</div>
|
</li>
|
<li class="item">
|
<div class="item-label bg2">经费项目</div>
|
<div class="item-content">
|
{{ props.content[0]?.Cost_Name }}
|
<span style="float: right; margin-right: 10%; color: #409eff">
|
<a
|
class="link-padding"
|
v-if="props.content.filter((e) => e.Attach_File1).length"
|
:href="props.content.filter((e) => e.Attach_File1)[0]?.Attach_File1"
|
target="_blank"
|
>附件1</a
|
>
|
<a
|
class="link-padding"
|
v-if="props.content.filter((e) => e.Attach_File2).length"
|
:href="props.content.filter((e) => e.Attach_File2)[0]?.Attach_File2"
|
target="_blank"
|
>附件2</a
|
>
|
<a
|
class="link-padding"
|
v-if="props.content.filter((e) => e.Attach_File3).length"
|
:href="props.content.filter((e) => e.Attach_File3)[0]?.Attach_File3"
|
target="_blank"
|
>附件3</a
|
>
|
</span>
|
</div>
|
</li>
|
<li class="item">
|
<div class="item-label bg5">备注</div>
|
<div class="item-content">{{ props.content[0]?.Comment }}</div>
|
</li>
|
</ul>
|
</template>
|
|
<script setup>
|
import { defineProps, computed } from "vue";
|
import { toThousands } from "../../ComponentCommon";
|
const props = defineProps({
|
content: {
|
type: Array,
|
default: () => [],
|
},
|
index: {
|
type: Number,
|
default: 0,
|
},
|
});
|
|
const computedContent = computed(() => {
|
return props.content.map((item) => {
|
let res = { ...item };
|
res.Item_Name = item.Item_Name.split("/");
|
res.Unit_Price =toThousands((+res.Unit_Price).toFixed(5));
|
res.LT = toThousands(res.LT);
|
res.Exchange_Unit_Price = (+res.Exchange_Unit_Price).toFixed(5);
|
return res;
|
});
|
});
|
|
const fileContet = computed(() => {
|
let res = {};
|
props.content.forEach((value, index) => {
|
if (!res[value.Request_Vend_Name_S]) {
|
res[value.Request_Vend_Name_S] = {
|
path: value.PR_File_Attach_File,
|
version: value.Reply_Count,
|
};
|
}
|
});
|
return res;
|
});
|
</script>
|
|
<style scoped lang="less">
|
.container {
|
margin-bottom: 5px;
|
}
|
.item {
|
display: flex;
|
.item-label {
|
border: 1px solid black;
|
flex: 0 0 110px;
|
margin-top: -1px;
|
margin-left: -1px;
|
text-align: center;
|
align-content: center;
|
border-collapse: collapse;
|
}
|
|
.item-content {
|
border: 1px solid black;
|
min-width: 10px;
|
margin-top: -1px;
|
margin-left: -1px;
|
flex: 1 0 0;
|
justify-content: center;
|
align-content: center;
|
word-wrap: break-word;
|
overflow-wrap: break-word;
|
white-space: normal;
|
min-height: 40px;
|
padding: 2px 5px;
|
border-collapse: collapse;
|
}
|
|
.link-padding {
|
padding: 3px 6px;
|
display: inline-block;
|
color: revert;
|
}
|
|
.bg1 {
|
background-color: rgb(255, 163, 3);
|
}
|
|
.bg2 {
|
background-color: rgb(177, 239, 235);
|
}
|
|
.bg3 {
|
background-color: rgb(240, 231, 141);
|
}
|
|
.bg4 {
|
background-color: rgb(146, 236, 146);
|
}
|
|
.bg5 {
|
background-color: #006dbb;
|
color: #fff;
|
}
|
}
|
</style>
|
