子组件和父组件之间传值#Vue3#defineProps
效果:
6s执行项图片缩略图
子组件:
bash
<!-- 6s执行项详情图片的子组件 -->
<template>
<div>
<img
v-if="itemsLocal.url"
:src="itemsLocal.url"
style="width: 50px; height: 50px; margin: 2px"
/>
<el-link type="primary" v-else>{{
itemsLocal.name + itemsLocal.suffix
}}</el-link>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { DownFile } from "@/api/sixData/index";
const props = defineProps(["info"]);//用来接收父组件的值
const itemsLocal = ref({});
onMounted(() => {
itemsLocal.value = { ...props.info };
getUrl(props.info);
});
//文件下载
async function getUrl({ fileID: id, name, suffix }) {
const blob1 = await DownFile({ id });
let imageUrl = "";
if ([".jpg", ".jpeg", ".png"].includes(suffix)) {
imageUrl = (window.URL || window.webkitURL).createObjectURL(blob1);
itemsLocal.value.url = imageUrl;
itemsLocal.value = JSON.parse(JSON.stringify(itemsLocal.value));
}
}
</script>
<style scoped lang="scss"></style>
父组件:
bash
<!-- 6s执行项详情图片的父组件 -->
<template>
<!-- 执行项的des显示 -->
<splitter title="执行项" />
<el-descriptions
class="box1"
v-if="itemsData.length > 0"
style="width: 50%; float: left"
:column="1"
border
>
<el-descriptions-item
v-for="(item, index) in itemsData"
:key="index"
align="center"
label-class-name="my-label"
class-name="my-content"
:span="1"
:label="`执行项${index + 1}`"
>
<section class="flex items-center justify-between">
<span>{{ item.content }}</span>
<svg-icon
v-if="item.state == 1"
class-name="text-green-700 text-4xl"
icon-class="pass"
/>
<svg-icon v-else class-name="text-red-700 text-4xl" icon-class="fail" />
</section>
</el-descriptions-item>
</el-descriptions>
<!-- 执行项的显示图片 -->
<el-descriptions
v-if="ExecutionItemDataOne.length > 0"
style="width: 50%; float: left"
:column="1"
border
>
<el-descriptions-item
v-for="(item, index) in ExecutionItemDataOne"
:key="index"
label-class-name="my-label"
class-name="my-content"
:span="1"
align="center"
:label="`标准图片${index + 1}`"
>
<ul class="cell-link">
<li
class="truncate"
v-for="(items, indexx) in item"
:key="indexx"
@click="handlePreview(items)"
>
<imageC :info="items" />
<!-- <el-link type="primary" v-else>{{ items.name + items.suffix }}</el-link> -->
</li>
</ul>
</el-descriptions-item>
</el-descriptions>
<el-empty
v-else
description="该方案暂未绑定执行项"
:image-size="60"
></el-empty>
</template>
<script setup lang="ts">
import saveAs from "file-saver";
import { ref, onMounted, watch } from "vue";
import { searchMapDic, searchFileMap,DownFile } from "@/api/sixData/index";
import imageC from "./imageC.vue";//导入子组件
// 判断是否是图片
const imgValue = ref({
show: false,
row: [],
type: "",
}) as any;
const imgVideoType = reactive({
imgType: [".jpg", ".jpeg", ".png"],
});
const ExecutionItemDataOne = ref([]) as any; //执行项附件
const demoArr = ref([]) as any;
// 监听执行项
watch(
() => props.itemsData,
(newVal: any) => {
console.log("执行项newVal", newVal);
searchMapDic({
linkTable: "AttachmentExecutionItem", //外部关联表/处理的地图释义详情
linkType: "", //同表标识
remark: "", //备注
}).then((res: any) => {
// 获取linkID和mapID
if (newVal.length > 0) {
newVal.forEach((item: any) => {
let data = {
mapDicID: res.data[0].id, //地图释义ID
linkID: item.iD_Item, //外部关联ID
};
demoArr.value.push(data);
});
console.log("demoArr.value", demoArr.value);
}
// 按顺序获取linkID和mapID
let test = [];
for (let j = 0; j < demoArr.value.length; j++) {
let result = searchFileMap(
JSON.parse(JSON.stringify(demoArr.value[j]))
);
test.push(result);
}
// 按顺序获取文件id
Promise.all(test).then((itemList: any) => {
console.log("itemList", itemList);
itemList.forEach((val: any) => {
console.log("文件id", val.data);
// val.data.forEach(async e1 => {
// e1.url = await getUrl(e1)
// })
// setTimeout(() => {
ExecutionItemDataOne.value.push(val.data);
// }, 10000)
});
});
});
}
);
// const handleLoad = () => {};
// const getImage = async (items: any) => {
// const imageUrl = await getUrl(items);
// const htmlValue = `<img :src="${imageUrl}" alt="" style="width: 100px; height: 100px;">`;
// return htmlValue;
// };
//文件下载
// async function getUrl({ fileID: id, name, suffix }: any) {
// const blob = await DownFile({ id });
// console.log("blob", blob);
// let imageUrl = "";
// if (imgVideoType.imgType.includes(suffix)) {
// imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
// console.log(imageUrl, "imageUrl1");
// return imageUrl;
// } else {
// return imageUrl;
// }
// }
//文件下载
async function handlePreview({ fileID: id, name, suffix }: any) {
console.log("id", id);
const blob = await DownFile({ id });
console.log("blob", blob);
if (imgVideoType.imgType.includes(suffix)) {
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
imgValue.value.type = "img";
imgValue.value.row = [imageUrl];
imgValue.value.show = true;
console.log("imageUrl", imageUrl);
} else {
saveAs(blob as unknown as Blob, name + suffix);
}
}
</script>
<style scoped lang="scss">
.cell-link {
display: flex;
margin-left: 10px;
.el-link {
float: left;
margin-left: 5px;
}
.el-image {
float: left;
margin-left: 5px;
}
}
:deep(.my-label) {
height: 115px;
width: 95px;
}
:deep(.my-content) {
height: 100px;
}
.cell-link {
max-width: 265px;
.el-link {
display: inline;
}
:deep(.el-link__inner) {
display: inline;
}
}
</style>
ccc感谢某大佬!!!!我tmd还在找循环的问题,毫不核心的问题。大佬的解决思路就是清奇!!思路清晰!!