|
|
|
|
@ -6,33 +6,24 @@
|
|
|
|
|
|
|
|
|
|
<div class="VehicleLineImgs_line"> |
|
|
|
|
<div |
|
|
|
|
v-for="(item, index) in details.loadLineArr" |
|
|
|
|
:key="item.nodeId" |
|
|
|
|
:class="{ |
|
|
|
|
VehicleLineNode_item: true, |
|
|
|
|
notActive: false, |
|
|
|
|
choose: false, |
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
<div class="VehicleLineNode_item_container"> |
|
|
|
|
<!-- <el-icon size="20px" color=""><Box /></el-icon> --> |
|
|
|
|
<el-icon size="20px"><CircleCheck /></el-icon> |
|
|
|
|
<span class="VehicleLineNode_item_title">龙泉仓</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-icon><ArrowRight /></el-icon> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
:class="{ |
|
|
|
|
VehicleLineNode_item: true, |
|
|
|
|
notActive: false, |
|
|
|
|
choose: true, |
|
|
|
|
choose: details.activeIndex === index, |
|
|
|
|
}" |
|
|
|
|
@click="() => handleCheckNode(item, index)" |
|
|
|
|
> |
|
|
|
|
<div class="VehicleLineNode_item_container"> |
|
|
|
|
<el-icon size="20px" color=""><Box /></el-icon> |
|
|
|
|
|
|
|
|
|
<span class="VehicleLineNode_item_title">龙泉仓</span> |
|
|
|
|
<span class="VehicleLineNode_item_title">{{ item.nodeName }}</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="index !== details.loadLineArr.length - 1"> |
|
|
|
|
<el-icon><ArrowRight /></el-icon> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -43,10 +34,20 @@
|
|
|
|
|
|
|
|
|
|
<!-- 图片容器 --> |
|
|
|
|
<div class="VehicleLineImgs_container"> |
|
|
|
|
<div class="VehicleLineImgs_container_title">发车前图片</div> |
|
|
|
|
<div class="mb20 align-center"> |
|
|
|
|
<div class="VehicleLineImgs_container_title">装车前图片</div> |
|
|
|
|
|
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
icon="edit" |
|
|
|
|
@click="() => handleEdit('beforeLoad', beforeLoadImgArr, '装车前图片')" |
|
|
|
|
> |
|
|
|
|
编辑 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
class="VehicleLineImgs_container_list" |
|
|
|
|
v-for="(item, index) in details.beforeLoadImgArr" |
|
|
|
|
class="VehicleLineImgs_container_list mb20" |
|
|
|
|
v-for="(item, index) in beforeLoadImgArr" |
|
|
|
|
:key="item.type + '-' + item.position" |
|
|
|
|
> |
|
|
|
|
<div class="title">{{ item.title }}</div> |
|
|
|
|
@ -61,24 +62,146 @@
|
|
|
|
|
:max-scale="7" |
|
|
|
|
:min-scale="0.2" |
|
|
|
|
:preview-src-list="item.imgArr.map(val => val.url)" |
|
|
|
|
:initial-index="index" |
|
|
|
|
:initial-index="i" |
|
|
|
|
fit="cover" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="VehicleLineImgs_container_title">发车前图片</div> |
|
|
|
|
<div class="VehicleLineImgs_container_list"> |
|
|
|
|
<div class="VehicleLineImgs_container_list_item"></div> |
|
|
|
|
<div class="mb20 align-center"> |
|
|
|
|
<div class="VehicleLineImgs_container_title">发车前图片</div> |
|
|
|
|
|
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
icon="edit" |
|
|
|
|
@click="() => handleEdit('boforeStart', boforeStartImgArr, '发车前图片')" |
|
|
|
|
> |
|
|
|
|
编辑 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
class="VehicleLineImgs_container_list mb20" |
|
|
|
|
v-for="(item, index) in boforeStartImgArr" |
|
|
|
|
:key="item.type + '-' + item.position" |
|
|
|
|
> |
|
|
|
|
<div class="title">{{ item.title }}</div> |
|
|
|
|
|
|
|
|
|
<div class="VehicleLineImgs_container_title">发车前图片</div> |
|
|
|
|
<div class="VehicleLineImgs_container_list"> |
|
|
|
|
<div class="VehicleLineImgs_container_list_item"></div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<el-image |
|
|
|
|
v-for="(value, i) in item.imgArr" |
|
|
|
|
:key="value.url" |
|
|
|
|
style="width: 150px; height: 150px; margin: 5px; border-radius: 5px" |
|
|
|
|
:src="value.url" |
|
|
|
|
:zoom-rate="1.2" |
|
|
|
|
:max-scale="7" |
|
|
|
|
:min-scale="0.2" |
|
|
|
|
:preview-src-list="item.imgArr.map(val => val.url)" |
|
|
|
|
:initial-index="i" |
|
|
|
|
fit="cover" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="details.activeIndex !== 0"> |
|
|
|
|
<div class="mb20 align-center"> |
|
|
|
|
<div class="VehicleLineImgs_container_title">卸车前图片</div> |
|
|
|
|
|
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
icon="edit" |
|
|
|
|
@click="() => handleEdit('beforeUnload', beforeUnloadImgArr, '卸车前图片')" |
|
|
|
|
> |
|
|
|
|
编辑 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
class="VehicleLineImgs_container_list mb20" |
|
|
|
|
v-for="(item, index) in beforeUnloadImgArr" |
|
|
|
|
:key="item.type + '-' + item.position" |
|
|
|
|
> |
|
|
|
|
<div class="title">{{ item.title }}</div> |
|
|
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
<el-image |
|
|
|
|
v-for="(value, i) in item.imgArr" |
|
|
|
|
:key="value.url" |
|
|
|
|
style="width: 150px; height: 150px; margin: 5px; border-radius: 5px" |
|
|
|
|
:src="value.url" |
|
|
|
|
:zoom-rate="1.2" |
|
|
|
|
:max-scale="7" |
|
|
|
|
:min-scale="0.2" |
|
|
|
|
:preview-src-list="item.imgArr.map(val => val.url)" |
|
|
|
|
:initial-index="i" |
|
|
|
|
fit="cover" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</basic-container> |
|
|
|
|
|
|
|
|
|
<!-- 编辑图片 --> |
|
|
|
|
<el-dialog v-model="details.popUpShow.editImg" :title="details.title" width="70%"> |
|
|
|
|
<div v-loading="details.loadingObj.imgEdit"> |
|
|
|
|
<div |
|
|
|
|
class="VehicleLineImgs_container_list mb20" |
|
|
|
|
v-for="(item, index) in details.editFormList" |
|
|
|
|
:key="item.type + '-' + item.position" |
|
|
|
|
> |
|
|
|
|
<div class="title">{{ item.title }}</div> |
|
|
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="imgBox" v-for="(value, i) in item.imgArr" :key="value.url"> |
|
|
|
|
<el-image |
|
|
|
|
style="width: 150px; height: 150px; margin: 5px; border-radius: 5px" |
|
|
|
|
:src="value.url" |
|
|
|
|
v-loading="!value.imgUrl" |
|
|
|
|
:zoom-rate="1.2" |
|
|
|
|
:max-scale="7" |
|
|
|
|
:min-scale="0.2" |
|
|
|
|
:preview-src-list="item.imgArr.map(val => val.url)" |
|
|
|
|
:initial-index="i" |
|
|
|
|
fit="cover" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<div class="remove" @click="() => item.imgArr.splice(i, 1)"> |
|
|
|
|
<el-icon size="16" color="#f00"><DeleteFilled /></el-icon> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="add"> |
|
|
|
|
<el-upload |
|
|
|
|
list-type="picture-card" |
|
|
|
|
v-model:file-list="item.imgArr" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:action="'/api/blade-resource/oss/endpoint/put-file'" |
|
|
|
|
:on-success="file => handleUpLoadSuccess(file, item)" |
|
|
|
|
:before-upload="file => handleBeforeUpload(file, item)" |
|
|
|
|
multiple |
|
|
|
|
:headers="details.headers" |
|
|
|
|
> |
|
|
|
|
<el-icon class="avatar-uploader-icon"><Plus /></el-icon> |
|
|
|
|
</el-upload> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<template #footer> |
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
<el-button @click="details.popUpShow.editImg = false" icon="CircleClose">关闭</el-button> |
|
|
|
|
|
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
:loading="details.loadingObj.imgEdit" |
|
|
|
|
icon="Position" |
|
|
|
|
@click="handleEditSubmit" |
|
|
|
|
> |
|
|
|
|
提交 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
@ -86,60 +209,160 @@ import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
|
|
|
|
|
/** 获取字典 */ |
|
|
|
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
|
|
|
import { deepClone, getObjType, ChecksWhetherTheWarehouseIsSelected } from '@/utils/util'; |
|
|
|
|
import { postFindLinePhoto } from '@/api/distribution/VehicleArrivalManagement'; |
|
|
|
|
import { |
|
|
|
|
postFindLinePhoto, |
|
|
|
|
postUploadLoadingPhoto, |
|
|
|
|
postUploadStartPhoto, |
|
|
|
|
postUploadUnloadPhoto, |
|
|
|
|
} from '@/api/distribution/VehicleArrivalManagement'; |
|
|
|
|
import { useStore } from 'vuex'; |
|
|
|
|
import { useRouter, useRoute } from 'vue-router'; |
|
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
|
|
|
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js'; |
|
|
|
|
import { getToken } from '@/utils/auth'; |
|
|
|
|
|
|
|
|
|
const $route = useRoute(); |
|
|
|
|
const $router = useRouter(); |
|
|
|
|
const $store = useStore(); |
|
|
|
|
|
|
|
|
|
type ImgArr = |
|
|
|
|
| [ |
|
|
|
|
{ |
|
|
|
|
// 分类标题 |
|
|
|
|
title: string; |
|
|
|
|
// 类型 |
|
|
|
|
type: string; |
|
|
|
|
// 位置 |
|
|
|
|
position: string; |
|
|
|
|
// 图片数组 |
|
|
|
|
imgArr: |
|
|
|
|
| [ |
|
|
|
|
{ |
|
|
|
|
url: string; |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
| []; |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
| []; |
|
|
|
|
type ImgArr = { |
|
|
|
|
// 分类标题 |
|
|
|
|
title: string; |
|
|
|
|
// 类型 |
|
|
|
|
type: number; |
|
|
|
|
// 位置 |
|
|
|
|
position: number; |
|
|
|
|
// 图片数组 |
|
|
|
|
imgArr: { |
|
|
|
|
id: string; |
|
|
|
|
url: string; |
|
|
|
|
imgUrl: string; |
|
|
|
|
}[]; |
|
|
|
|
}[]; |
|
|
|
|
|
|
|
|
|
type LoadItme = { |
|
|
|
|
nodeName?: string; |
|
|
|
|
nodeId?: string; |
|
|
|
|
/** 装车前图片 */ |
|
|
|
|
beforeLoadImgArr?: ImgArr; |
|
|
|
|
/** 发车前图片 */ |
|
|
|
|
boforeStartImgArr?: ImgArr; |
|
|
|
|
/** 卸车完成图片 */ |
|
|
|
|
beforeUnloadImgArr?: ImgArr; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const details = reactive({ |
|
|
|
|
loadingObj: { |
|
|
|
|
pageLoading: false, |
|
|
|
|
imgEdit: false, |
|
|
|
|
}, |
|
|
|
|
nodeImgArr: [], |
|
|
|
|
/** 装车前图片 */ |
|
|
|
|
beforeLoadImgArr: [ |
|
|
|
|
{ |
|
|
|
|
title: '123', |
|
|
|
|
type: '1', |
|
|
|
|
position: '2', |
|
|
|
|
imgArr: [ |
|
|
|
|
{ |
|
|
|
|
url: '', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
] as ImgArr, |
|
|
|
|
/** 发车前图片 */ |
|
|
|
|
boforeStartImgArr: [] as ImgArr, |
|
|
|
|
/** 卸车完成图片 */ |
|
|
|
|
confirmUnloadImgArr: [] as ImgArr, |
|
|
|
|
popUpShow: { |
|
|
|
|
editImg: false, |
|
|
|
|
}, |
|
|
|
|
/** 弹窗标题 */ |
|
|
|
|
title: '', |
|
|
|
|
loadLineArr: [] as LoadItme[], |
|
|
|
|
activeIndex: 0, |
|
|
|
|
/** 提交类型 */ |
|
|
|
|
editType: 'beforeLoad' as 'beforeLoad' | 'boforeStart' | 'beforeUnload', |
|
|
|
|
/** 回显数据 */ |
|
|
|
|
editFormList: [] as ImgArr, |
|
|
|
|
/** 克隆数据 */ |
|
|
|
|
cloneImgList: [], |
|
|
|
|
/** 类型字典 */ |
|
|
|
|
typeOption: { |
|
|
|
|
'10': '车厢卫生', |
|
|
|
|
'20': '盖雨棚前', |
|
|
|
|
'21': '盖雨棚后', |
|
|
|
|
'30': '卸车前车辆照片', |
|
|
|
|
'31': '防护措施', |
|
|
|
|
}, |
|
|
|
|
/** 位置字典 */ |
|
|
|
|
positionOption: { |
|
|
|
|
'1': '前', |
|
|
|
|
'2': '后', |
|
|
|
|
'3': '左', |
|
|
|
|
'4': '右', |
|
|
|
|
}, |
|
|
|
|
/** 头部 */ |
|
|
|
|
headers: { |
|
|
|
|
'Blade-Auth': 'bearer ' + getToken(), |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 装车前 |
|
|
|
|
const beforeLoadImgArr = computed<ImgArr>((): ImgArr => { |
|
|
|
|
const _arr = details.loadLineArr[details.activeIndex]?.beforeLoadImgArr; |
|
|
|
|
|
|
|
|
|
return getObjType(_arr) === 'array' ? _arr : []; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 发车前 |
|
|
|
|
const boforeStartImgArr = computed<ImgArr>((): ImgArr => { |
|
|
|
|
const _arr = details.loadLineArr[details.activeIndex]?.boforeStartImgArr; |
|
|
|
|
|
|
|
|
|
return getObjType(_arr) === 'array' ? _arr : []; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 卸车前 |
|
|
|
|
const beforeUnloadImgArr = computed<ImgArr>((): ImgArr => { |
|
|
|
|
const _arr = details.loadLineArr[details.activeIndex]?.beforeUnloadImgArr; |
|
|
|
|
|
|
|
|
|
return getObjType(_arr) === 'array' ? _arr : []; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 添加图片 |
|
|
|
|
const handleAddImg = (arr, addArr, isHavePosition = true) => { |
|
|
|
|
for (let i = 0; i < arr.length; i++) { |
|
|
|
|
const val = arr[i]; |
|
|
|
|
|
|
|
|
|
let isContinue = false; |
|
|
|
|
|
|
|
|
|
for (let j = 0; j < addArr.length; j++) { |
|
|
|
|
const item = addArr[j]; |
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
isHavePosition |
|
|
|
|
? item.type + '' === val.type + '' |
|
|
|
|
: item.type + '' + item.position === val.type + '' + val.position |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
if ( |
|
|
|
|
isHavePosition |
|
|
|
|
? item.type + '' + item.position === val.type + '' + val.position |
|
|
|
|
: item.type + '' === val.type + '' |
|
|
|
|
) { |
|
|
|
|
item.imgArr.push({ |
|
|
|
|
url: val.url, |
|
|
|
|
id: val.id, |
|
|
|
|
imgUrl: val.url, |
|
|
|
|
}); |
|
|
|
|
isContinue = true; |
|
|
|
|
|
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (isContinue) continue; |
|
|
|
|
|
|
|
|
|
let title = isHavePosition |
|
|
|
|
? details.typeOption[val.type + ''] + ' - ' + details.positionOption[val.position] |
|
|
|
|
: details.typeOption[val.type + '']; |
|
|
|
|
|
|
|
|
|
const _obj = { |
|
|
|
|
// 分类标题 |
|
|
|
|
title, |
|
|
|
|
// 类型 |
|
|
|
|
type: val.type, |
|
|
|
|
// 位置 |
|
|
|
|
position: val.position, |
|
|
|
|
imgArr: [{ url: val.url, id: val.id, imgUrl: val.url }], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
addArr.push(_obj); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 配载图片显示 */ |
|
|
|
|
const initImgList = async () => { |
|
|
|
|
try { |
|
|
|
|
@ -147,23 +370,127 @@ const initImgList = async () => {
|
|
|
|
|
const res = await postFindLinePhoto({ loadId: $route.query.loadId }); |
|
|
|
|
const { code, data } = res.data; |
|
|
|
|
if (code !== 200 || getObjType(data) !== 'array') return; |
|
|
|
|
|
|
|
|
|
details.loadLineArr = []; |
|
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
|
const value = data[i]; |
|
|
|
|
const { loadingObject, startObject, unloadObject } = value; |
|
|
|
|
const { loadingObject, startObject, unloadObject, carsLoadLineEntity } = value; |
|
|
|
|
|
|
|
|
|
const _obj: LoadItme = { |
|
|
|
|
nodeId: '', |
|
|
|
|
nodeName: '', |
|
|
|
|
beforeLoadImgArr: [ |
|
|
|
|
{ |
|
|
|
|
title: '车厢卫生', |
|
|
|
|
type: 10, |
|
|
|
|
position: 1, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
boforeStartImgArr: [ |
|
|
|
|
{ |
|
|
|
|
title: '盖雨棚前 - 左', |
|
|
|
|
type: 20, |
|
|
|
|
position: 3, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '盖雨棚前 - 右', |
|
|
|
|
type: 20, |
|
|
|
|
position: 4, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '盖雨棚前 - 后', |
|
|
|
|
type: 20, |
|
|
|
|
position: 2, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '盖雨棚后 - 左', |
|
|
|
|
type: 21, |
|
|
|
|
position: 3, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '盖雨棚后 - 右', |
|
|
|
|
type: 21, |
|
|
|
|
position: 4, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '盖雨棚后 - 后', |
|
|
|
|
type: 21, |
|
|
|
|
position: 2, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
beforeUnloadImgArr: [ |
|
|
|
|
{ |
|
|
|
|
title: '卸车前车辆照片 - 左', |
|
|
|
|
type: 20, |
|
|
|
|
position: 3, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '卸车前车辆照片 - 右', |
|
|
|
|
type: 20, |
|
|
|
|
position: 4, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '卸车前车辆照片 - 后', |
|
|
|
|
type: 20, |
|
|
|
|
position: 2, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '防护措施 - 左', |
|
|
|
|
type: 21, |
|
|
|
|
position: 3, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '防护措施 - 右', |
|
|
|
|
type: 21, |
|
|
|
|
position: 4, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '防护措施 - 后', |
|
|
|
|
type: 21, |
|
|
|
|
position: 2, |
|
|
|
|
imgArr: [], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 节点信息 |
|
|
|
|
if (getObjType(carsLoadLineEntity) === 'object') { |
|
|
|
|
_obj.nodeName = carsLoadLineEntity.nodeName; |
|
|
|
|
_obj.nodeId = carsLoadLineEntity.nodeId; |
|
|
|
|
} else { |
|
|
|
|
ElMessage.warning('存在异常节点信息'); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 装车前 |
|
|
|
|
if (getObjType(loadingObject) === 'object') { |
|
|
|
|
} else details.beforeLoadImgArr = []; |
|
|
|
|
if (getObjType(loadingObject) === 'array') { |
|
|
|
|
handleAddImg(loadingObject, _obj.beforeLoadImgArr, false); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 发车前 |
|
|
|
|
if (getObjType(startObject) === 'object') { |
|
|
|
|
} else details.beforeLoadImgArr = []; |
|
|
|
|
if (getObjType(startObject) === 'array') { |
|
|
|
|
handleAddImg(startObject, _obj.boforeStartImgArr); |
|
|
|
|
} |
|
|
|
|
// 卸车完成前 |
|
|
|
|
if (getObjType(unloadObject) === 'array') { |
|
|
|
|
handleAddImg(unloadObject, _obj.beforeUnloadImgArr); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 卸车前 |
|
|
|
|
if (getObjType(unloadObject) === 'object') { |
|
|
|
|
} else details.beforeLoadImgArr = []; |
|
|
|
|
details.loadLineArr.push(_obj); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log(' details.loadLineArr :>> ', details.loadLineArr); |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log('error :>> ', error); |
|
|
|
|
} finally { |
|
|
|
|
@ -172,6 +499,150 @@ const initImgList = async () => {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
initImgList(); |
|
|
|
|
|
|
|
|
|
const handleCheckNode = (item, index) => { |
|
|
|
|
details.activeIndex = index; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleEdit = (type, arr, title) => { |
|
|
|
|
details.title = title; |
|
|
|
|
|
|
|
|
|
console.log('arr :>> ', arr); |
|
|
|
|
details.editType = type; |
|
|
|
|
details.editFormList = deepClone([...arr]); |
|
|
|
|
|
|
|
|
|
const _arr = []; |
|
|
|
|
for (let i = 0; i < details.editFormList.length; i++) { |
|
|
|
|
const value = details.editFormList[i]; |
|
|
|
|
|
|
|
|
|
for (let j = 0; j < value.imgArr.length; j++) { |
|
|
|
|
const item = value.imgArr[j]; |
|
|
|
|
_arr.push({ ...value, ...item }); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
details.cloneImgList = _arr; |
|
|
|
|
|
|
|
|
|
details.popUpShow.editImg = true; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 上传前 */ |
|
|
|
|
const handleBeforeUpload = async (file, item) => { |
|
|
|
|
try { |
|
|
|
|
console.log('file :>> ', file); |
|
|
|
|
console.log('item :>> ', item); |
|
|
|
|
const isJPG = file.type === 'image/jpeg'; |
|
|
|
|
const isPNG = file.type === 'image/png'; |
|
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2; |
|
|
|
|
|
|
|
|
|
if (!isJPG && !isPNG) { |
|
|
|
|
ElMessage.warning('上传图片只能是 JPG 或 PNG 格式!'); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
if (!isLt2M) { |
|
|
|
|
ElMessage.warning('上传图片大小不能超过 2MB!'); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
item.loading = true; |
|
|
|
|
const res = await compressImageBlob(file); |
|
|
|
|
console.log('res :>> ', res); |
|
|
|
|
return res; |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log('error :>> ', error); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
/** 上传成功 */ |
|
|
|
|
const handleUpLoadSuccess = (file, item) => { |
|
|
|
|
console.log('file :>> ', file); |
|
|
|
|
console.log('item.imgArr :>> ', item.imgArr); |
|
|
|
|
|
|
|
|
|
const { code, data } = file; |
|
|
|
|
|
|
|
|
|
if (code !== 200) return; |
|
|
|
|
for (let i = 0; i < item.imgArr.length; i++) { |
|
|
|
|
const val = item.imgArr[i]; |
|
|
|
|
|
|
|
|
|
if (val.name !== data.originalName) continue; |
|
|
|
|
|
|
|
|
|
val.imgUrl = data.link; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 编辑提交 */ |
|
|
|
|
const handleEditSubmit = async () => { |
|
|
|
|
try { |
|
|
|
|
details.loadingObj.imgEdit = true; |
|
|
|
|
|
|
|
|
|
const submitData = { |
|
|
|
|
loadId: $route.query.loadId, |
|
|
|
|
removeUrlList: [], |
|
|
|
|
addUrlList: [], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const _cloneArr = deepClone(details.cloneImgList); |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < details.editFormList.length; i++) { |
|
|
|
|
const value = details.editFormList[i]; |
|
|
|
|
|
|
|
|
|
for (let j = 0; j < value.imgArr.length; j++) { |
|
|
|
|
const item = value.imgArr[j]; |
|
|
|
|
|
|
|
|
|
// 存在id, 则不提交 |
|
|
|
|
if (item.id) { |
|
|
|
|
for (let index = 0; index < _cloneArr.length; index++) { |
|
|
|
|
const val = _cloneArr[index]; |
|
|
|
|
|
|
|
|
|
if (item.id !== val.id) continue; |
|
|
|
|
_cloneArr.splice(index, 1); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
continue; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (!item.imgUrl) return ElMessage.warning('存在未上传完成的图片，请等待上传完成或移除'); |
|
|
|
|
|
|
|
|
|
submitData.addUrlList.push({ |
|
|
|
|
type: value.type, |
|
|
|
|
position: value.position, |
|
|
|
|
url: item.imgUrl, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
submitData.removeUrlList = _cloneArr.map(val => val.id); |
|
|
|
|
|
|
|
|
|
let res: any = { data: {} }; |
|
|
|
|
|
|
|
|
|
switch (details.editType) { |
|
|
|
|
case 'beforeLoad': |
|
|
|
|
res = await postUploadLoadingPhoto(submitData); |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
case 'boforeStart': |
|
|
|
|
res = await postUploadStartPhoto(submitData); |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
case 'boforeStart': |
|
|
|
|
res = await postUploadUnloadPhoto(submitData); |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const { code, msg } = res.data; |
|
|
|
|
if (code !== 200) { |
|
|
|
|
ElMessage.warning(msg); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
details.popUpShow.editImg = false; |
|
|
|
|
ElMessage.success(msg); |
|
|
|
|
initImgList(); |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log('error :>> ', error); |
|
|
|
|
} finally { |
|
|
|
|
details.loadingObj.imgEdit = false; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@ -184,9 +655,11 @@ initImgList();
|
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
content: ''; |
|
|
|
|
width: 3px; |
|
|
|
|
height: 20px; |
|
|
|
|
background-color: var(--el-color-primary); |
|
|
|
|
width: 20px; |
|
|
|
|
// height: 20px; |
|
|
|
|
height: 1px; |
|
|
|
|
// background-color: var(--el-color-primary); |
|
|
|
|
background-color: #ccc; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -194,7 +667,8 @@ initImgList();
|
|
|
|
|
content: ''; |
|
|
|
|
height: 1px; |
|
|
|
|
flex: 1; |
|
|
|
|
background-color: var(--el-color-primary); |
|
|
|
|
// background-color: var(--el-color-primary); |
|
|
|
|
background-color: #ccc; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -292,8 +766,13 @@ initImgList();
|
|
|
|
|
@extend .VehicleLineImgs_title; |
|
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
// &:first-child { |
|
|
|
|
// margin-top: 20px; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
width: 2px; |
|
|
|
|
height: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
@ -303,7 +782,7 @@ initImgList();
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.VehicleLineImgs_container_list { |
|
|
|
|
padding: 20px; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
@extend .VehicleLineImgs_container_title; |
|
|
|
|
@ -316,6 +795,38 @@ initImgList();
|
|
|
|
|
.item { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
.imgBox { |
|
|
|
|
position: relative; |
|
|
|
|
.remove { |
|
|
|
|
$size: 30px; |
|
|
|
|
|
|
|
|
|
width: $size; |
|
|
|
|
height: $size; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
transition: all 0.5s; |
|
|
|
|
opacity: 0; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 10px; |
|
|
|
|
right: 10px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
cursor: pointer; |
|
|
|
|
z-index: 2001; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
.remove { |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.add { |
|
|
|
|
margin: 5px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
