|
@@ -1,18 +1,12 @@
|
|
|
<template>
|
|
|
<el-scrollbar style="width: 100%; height: 100%">
|
|
|
<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"
|
|
|
@click="item.isSelected = !item.isSelected"
|
|
|
>
|
|
|
- <!-- <img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />-->
|
|
|
<el-image
|
|
|
:initial-index="index"
|
|
|
:max-scale="7"
|
|
@@ -23,26 +17,21 @@
|
|
|
class="img-box"
|
|
|
fit="cover"
|
|
|
/>
|
|
|
- <div class="checkB-border"></div>
|
|
|
- <i-ep-delete
|
|
|
- v-show="item.isSelected"
|
|
|
- class="check"
|
|
|
- color="#ff4d4f"
|
|
|
- size="20px"
|
|
|
- />
|
|
|
</div>
|
|
|
+ <RefreshRight
|
|
|
+ color="#0a59f7"
|
|
|
+ size="70px"
|
|
|
+ class="refresh-btn"
|
|
|
+ @click="clickReset"
|
|
|
+ />
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { useProcessStore } from "@/store";
|
|
|
-import {
|
|
|
- addMedia,
|
|
|
- deleteMedias,
|
|
|
- pageMedias,
|
|
|
- pageMediasV2,
|
|
|
-} from "@/api/prosteps/medias";
|
|
|
+import { RefreshRight } from "@element-plus/icons-vue";
|
|
|
+import { pageMediasV2, syncMedias } from "@/api/prosteps/medias";
|
|
|
|
|
|
import CameraUpload from "@/components/Upload/CameraUpload.vue";
|
|
|
|
|
@@ -54,31 +43,19 @@ defineOptions({
|
|
|
name: "Wuliaocaiji",
|
|
|
});
|
|
|
|
|
|
-const input = ref("");
|
|
|
-
|
|
|
-const finish = (value: string) => {
|
|
|
- addMedia({
|
|
|
- filePath: value,
|
|
|
- operationMediaId: proStore.odersData.operationId,
|
|
|
- processId: proStore.scanInfo.id,
|
|
|
- seqNo: proStore.scanInfo.seqNo,
|
|
|
- }).then((res) => {
|
|
|
- getListData();
|
|
|
- ElMessage.success("上传成功");
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
getListData();
|
|
|
});
|
|
|
|
|
|
-const getListData = () => {
|
|
|
+const getListData = async () => {
|
|
|
let p = {
|
|
|
workOrderCode: proStore.scanInfo.workOrderCode,
|
|
|
operationId: proStore.scanInfo.operationId,
|
|
|
processId: proStore.scanInfo.id,
|
|
|
seqNo: proStore.scanInfo.seqNo,
|
|
|
+ operationMediaId: proStore.scanInfo.operationId,
|
|
|
};
|
|
|
+ await syncMedias(p);
|
|
|
pageMediasV2(p).then((res: any) => {
|
|
|
medias.value = res.data.records || [];
|
|
|
urlList.value = res.data.records.map((item: any) => {
|
|
@@ -93,23 +70,8 @@ const getImgurl = (item: any) => {
|
|
|
};
|
|
|
|
|
|
const clickReset = () => {
|
|
|
- medias.value.forEach((item: any) => {
|
|
|
- item.isSelected = false;
|
|
|
- });
|
|
|
getListData();
|
|
|
};
|
|
|
-
|
|
|
-const clickDeleteAll = () => {
|
|
|
- let ids = medias.value
|
|
|
- .filter((item: any) => item.isSelected)
|
|
|
- .map((item: any) => item.id);
|
|
|
-
|
|
|
- ids &&
|
|
|
- ids.length > 0 &&
|
|
|
- deleteMedias(ids).then(() => {
|
|
|
- getListData();
|
|
|
- });
|
|
|
-};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -128,6 +90,7 @@ const clickDeleteAll = () => {
|
|
|
grid-auto-rows: 300px;
|
|
|
grid-gap: 24px; /* 设置元素之间的间距 */
|
|
|
overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.media-item {
|
|
@@ -160,4 +123,10 @@ const clickDeleteAll = () => {
|
|
|
right: 30px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.refresh-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
</style>
|