|
@@ -1,12 +1,25 @@
|
|
<template>
|
|
<template>
|
|
<el-scrollbar style="width: 100%; height: 100%">
|
|
<el-scrollbar style="width: 100%; height: 100%">
|
|
<div class="media-container">
|
|
<div class="media-container">
|
|
- <CameraUpload @reset-select="clickReset" @upload-finish="finish" @delete-all="clickDeleteAll" />
|
|
|
|
- <div v-for="(item, index) in medias.filter((item: any) => item.filePath)" :key="index" class="media-item">
|
|
|
|
|
|
+ <CameraUpload
|
|
|
|
+ @reset-select="clickReset"
|
|
|
|
+ @upload-finish="finish"
|
|
|
|
+ @delete-all="clickDeleteAll"
|
|
|
|
+ />
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, index) in medias.filter((item: any) => item.filePath)"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="media-item"
|
|
|
|
+ @click="item.isSelected = !item.isSelected"
|
|
|
|
+ >
|
|
|
|
+ <i-ep-delete
|
|
|
|
+ v-show="item.isSelected"
|
|
|
|
+ class="check"
|
|
|
|
+ color="#ff4d4f"
|
|
|
|
+ size="20px"
|
|
|
|
+ />
|
|
|
|
+
|
|
<img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />
|
|
<img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />
|
|
- <svg-icon v-if="item.isSelected" class="check" icon-class="bendishangchuan" size="30"
|
|
|
|
- @click="item.isSelected = false" />
|
|
|
|
- <svg-icon v-else class="check" icon-class="edit" size="30" @click="item.isSelected = true" />
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
@@ -31,6 +44,7 @@ const finish = (value: string) => {
|
|
addMedia({
|
|
addMedia({
|
|
filePath: value,
|
|
filePath: value,
|
|
operationMediaId: proStore.odersData.operationId,
|
|
operationMediaId: proStore.odersData.operationId,
|
|
|
|
+ processId: proStore.scanInfo.id,
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
getListData();
|
|
getListData();
|
|
});
|
|
});
|
|
@@ -41,9 +55,11 @@ onMounted(() => {
|
|
});
|
|
});
|
|
|
|
|
|
const getListData = () => {
|
|
const getListData = () => {
|
|
- pageMedias(proStore.odersData.operationId).then((res) => {
|
|
|
|
- medias.value = res.data.records || [];
|
|
|
|
- });
|
|
|
|
|
|
+ pageMedias(proStore.odersData.operationId, proStore.scanInfo.id).then(
|
|
|
|
+ (res) => {
|
|
|
|
+ medias.value = res.data.records || [];
|
|
|
|
+ }
|
|
|
|
+ );
|
|
};
|
|
};
|
|
|
|
|
|
const getImgurl = (item: any) => {
|
|
const getImgurl = (item: any) => {
|
|
@@ -75,9 +91,9 @@ const clickDeleteAll = () => {
|
|
width: 100%;
|
|
width: 100%;
|
|
display: grid;
|
|
display: grid;
|
|
/*行间距*/
|
|
/*行间距*/
|
|
- //grid-row-gap: 24px;
|
|
|
|
|
|
+ grid-row-gap: 24px;
|
|
/*列间距*/
|
|
/*列间距*/
|
|
- //grid-column-gap: 24px;
|
|
|
|
|
|
+ grid-column-gap: 24px;
|
|
/*每3行有2个行间距,所以每个格子的宽高都要减去(24*2) / 3 */
|
|
/*每3行有2个行间距,所以每个格子的宽高都要减去(24*2) / 3 */
|
|
//grid-template-columns: repeat(4, calc(33.33% - 16px));
|
|
//grid-template-columns: repeat(4, calc(33.33% - 16px));
|
|
//grid-template-rows: repeat(4, calc(33.33% - 16px));
|
|
//grid-template-rows: repeat(4, calc(33.33% - 16px));
|
|
@@ -104,8 +120,6 @@ const clickDeleteAll = () => {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 20px;
|
|
top: 20px;
|
|
right: 20px;
|
|
right: 20px;
|
|
- width: 48px;
|
|
|
|
- height: 48px;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|