|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<template> |
|
|
|
|
<basic-container> |
|
|
|
|
<basic-container v-loading="details.loadingObj.pageLoading"> |
|
|
|
|
<div class="avue-crud"> |
|
|
|
|
<el-tabs type="border-card" v-model="details.activeTab"> |
|
|
|
|
<el-tabs type="border-card" v-model="details.activeTab" @tab-click="handleCheckTab"> |
|
|
|
|
<el-tab-pane label="详 情 信 息" name="tab1"> |
|
|
|
|
<!-- 标题 基础信息 --> |
|
|
|
|
<el-divider content-position="left"> |
|
|
|
|
@ -188,8 +188,8 @@
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="日 志 跟 踪" name="tab2"> |
|
|
|
|
<div style="min-height: 300px"> |
|
|
|
|
<el-steps direction="vertical" space="80px"> |
|
|
|
|
<el-step title="装车" v-for="item in details.logList" :key="item"> |
|
|
|
|
<el-steps direction="vertical" space="120px" :active="details.loadLogsList.length"> |
|
|
|
|
<el-step :title="item.abstText" v-for="item in details.loadLogsList" :key="item"> |
|
|
|
|
<template #description> |
|
|
|
|
<div> |
|
|
|
|
<el-row> |
|
|
|
|
@ -199,44 +199,20 @@
|
|
|
|
|
<span>{{ item.updateTime }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-c-c mr10"> |
|
|
|
|
<el-icon color="#172e60" class="mr10" size="20px"><Location /></el-icon> |
|
|
|
|
<el-icon color="#172e60" size="20px"><Location /></el-icon> |
|
|
|
|
<span>操作网点：</span> |
|
|
|
|
<span>{{ item.updateWarehouse }}</span> |
|
|
|
|
<span>{{ item.nodeName }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-c-c mr10"> |
|
|
|
|
<el-icon color="#172e60" class="mr10" size="20px"><User /></el-icon> |
|
|
|
|
<el-icon color="#172e60" size="20px"><User /></el-icon> |
|
|
|
|
<span>操作人：</span> |
|
|
|
|
<span>{{ item.user }}</span> |
|
|
|
|
<span>{{ item.createUserName }}</span> |
|
|
|
|
</div> |
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
|
<el-row> |
|
|
|
|
<div class="flex-c-c mr10"> |
|
|
|
|
<el-icon color="#172e60" class="mr10" size="20px"><Car /></el-icon> |
|
|
|
|
<span>车次号：</span> |
|
|
|
|
<span>{{ form.carsNo }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-c-c mr10"> |
|
|
|
|
<span>车牌号：</span> |
|
|
|
|
<span>{{ form.updateWarehouse || '暂无数据' }}</span |
|
|
|
|
>， |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-c-c mr10"> |
|
|
|
|
<span>司机：</span> |
|
|
|
|
<span>{{ form.driverName }}</span |
|
|
|
|
>， |
|
|
|
|
<div class="word-break-break-all"> |
|
|
|
|
{{ item.content }} |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-c-c mr10"> |
|
|
|
|
<span>计划装车数：</span> |
|
|
|
|
<span>{{ form.planLoadingNumber || 0 }}</span |
|
|
|
|
>， |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-c-c mr10"> |
|
|
|
|
<span>实际装车数：</span> |
|
|
|
|
<span>{{ form.realLoadingNumber || 0 }}</span |
|
|
|
|
>。 |
|
|
|
|
</div> |
|
|
|
|
</el-row> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template #icon> |
|
|
|
|
@ -256,7 +232,34 @@
|
|
|
|
|
</el-tab-pane> |
|
|
|
|
|
|
|
|
|
<el-tab-pane label="运 输 合 同" name="tab5"> |
|
|
|
|
<div style="min-height: 300px" class="flex-c-c">暂 无 数 据 ~</div> |
|
|
|
|
<div style="min-height: 300px"> |
|
|
|
|
<!-- <el-form-item label="合同编号："></el-form-item> --> |
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
icon="List" |
|
|
|
|
@click=" |
|
|
|
|
() => { |
|
|
|
|
details.updateImgList = []; |
|
|
|
|
details.popUpShow.addImgVisible = true; |
|
|
|
|
} |
|
|
|
|
" |
|
|
|
|
>添加运输合同图片</el-button |
|
|
|
|
> |
|
|
|
|
<div class="mt10"> |
|
|
|
|
<el-image |
|
|
|
|
class="mr10 carriageContractList_img" |
|
|
|
|
v-for="(item, index) in details.carriageContractList" |
|
|
|
|
style="width: 100px; height: 100px" |
|
|
|
|
:src="item" |
|
|
|
|
:zoom-rate="1.2" |
|
|
|
|
:max-scale="7" |
|
|
|
|
:min-scale="0.2" |
|
|
|
|
:preview-src-list="details.carriageContractList" |
|
|
|
|
:initial-index="index" |
|
|
|
|
fit="cover" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
|
|
|
|
|
<el-tab-pane label="回 单 跟 踪" name="tab6"> |
|
|
|
|
@ -270,6 +273,30 @@
|
|
|
|
|
</div> |
|
|
|
|
</basic-container> |
|
|
|
|
|
|
|
|
|
<!-- 打印二维码 --> |
|
|
|
|
<el-dialog |
|
|
|
|
class="el-dialog-QRCode" |
|
|
|
|
title="添加运输合同图片" |
|
|
|
|
:visible.sync="details.popUpShow.addImgVisible" |
|
|
|
|
width="780px" |
|
|
|
|
v-model="details.popUpShow.addImgVisible" |
|
|
|
|
:align-center="true" |
|
|
|
|
> |
|
|
|
|
<el-upload |
|
|
|
|
v-model:file-list="details.updateImgList" |
|
|
|
|
action="/api/blade-resource/oss/endpoint/put-file" |
|
|
|
|
list-type="picture-card" |
|
|
|
|
:headers="details.headers" |
|
|
|
|
:multiple="true" |
|
|
|
|
> |
|
|
|
|
<el-icon><Plus /></el-icon> |
|
|
|
|
</el-upload> |
|
|
|
|
<span slot="footer" class="dialog-footer flex-c-c mt10"> |
|
|
|
|
<el-button @click="details.popUpShow.addImgVisible = false">取 消</el-button> |
|
|
|
|
<el-button type="primary" @click="handleSubmitAddImg">提 交</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<edittablehead |
|
|
|
|
@setcolum="setnewcolum" |
|
|
|
|
@closce="showdrawer" |
|
|
|
|
@ -288,6 +315,7 @@ import { mapGetters } from 'vuex';
|
|
|
|
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
|
|
|
import { downloadXls, computeNumber, setNodeHeight, debounce } from '@/utils/util'; |
|
|
|
|
import { detailsColumnList, nodeInfoColumnList } from '@/option/distribution/addVehicleStowage'; |
|
|
|
|
import { getToken } from '@/utils/auth'; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
postloadFindLoadInitData, |
|
|
|
|
@ -298,9 +326,15 @@ import {
|
|
|
|
|
postFindCarrierByName, |
|
|
|
|
postSelectEditDetailByLoadId, |
|
|
|
|
} from '@/api/distribution/AddVehicleStowage'; |
|
|
|
|
import { postCarsLoadDetailInfo } from '@/api/distribution/VehicleStowageDetails.js'; |
|
|
|
|
import { |
|
|
|
|
postCarsLoadDetailInfo, |
|
|
|
|
postFindCarsLoadLogs, |
|
|
|
|
postFindContractList, |
|
|
|
|
postAddContractByLoadId, |
|
|
|
|
} from '@/api/distribution/VehicleStowageDetails.js'; |
|
|
|
|
import { useRouter, useRoute } from 'vue-router'; |
|
|
|
|
import { useStore } from 'vuex'; |
|
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
|
|
|
|
|
|
/** 被合并的列 */ |
|
|
|
|
const mergeColumn = []; |
|
|
|
|
@ -311,9 +345,6 @@ detailsColumnList.map(val => {
|
|
|
|
|
|
|
|
|
|
console.log('mergeColumn :>> ', mergeColumn); |
|
|
|
|
|
|
|
|
|
// 获取节点信息列表, 除开节点名称 |
|
|
|
|
const nodeInfokeys = nodeInfoColumnList.slice(1).map(val => val.prop); |
|
|
|
|
|
|
|
|
|
// 获取vuex仓库 |
|
|
|
|
const $store = useStore(); |
|
|
|
|
|
|
|
|
|
@ -331,6 +362,7 @@ const oldColumnListNode = ref();
|
|
|
|
|
const nodeInfoRef = ref(); |
|
|
|
|
|
|
|
|
|
const details = reactive<any>({ |
|
|
|
|
headers: { 'Blade-Auth': 'Bearer ' + getToken() }, |
|
|
|
|
activeTab: 'tab1', |
|
|
|
|
/** 是否开启搜索 */ |
|
|
|
|
search: true, |
|
|
|
|
@ -383,6 +415,8 @@ const details = reactive<any>({
|
|
|
|
|
/** 列表加载loading */ |
|
|
|
|
list: false, |
|
|
|
|
oldListLoading: false, |
|
|
|
|
/** 页面loading */ |
|
|
|
|
pageLoading: false, |
|
|
|
|
}, |
|
|
|
|
/** 列表复选框选中的数据 */ |
|
|
|
|
selectionList: [], |
|
|
|
|
@ -394,6 +428,8 @@ const details = reactive<any>({
|
|
|
|
|
truckLoadingDetailVisited: false, |
|
|
|
|
/** 零担补录 */ |
|
|
|
|
transferVisited: false, |
|
|
|
|
/** 运输图片添加弹窗 */ |
|
|
|
|
addImgVisible: true, |
|
|
|
|
}, |
|
|
|
|
/** 列表Dom节点 */ |
|
|
|
|
listNode: '', |
|
|
|
|
@ -437,6 +473,20 @@ const details = reactive<any>({
|
|
|
|
|
user: 'admin', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
/** 配载日志 */ |
|
|
|
|
loadLogsList: [], |
|
|
|
|
/** 运输合同图片List */ |
|
|
|
|
carriageContractList: [ |
|
|
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', |
|
|
|
|
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', |
|
|
|
|
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', |
|
|
|
|
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', |
|
|
|
|
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', |
|
|
|
|
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', |
|
|
|
|
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', |
|
|
|
|
], |
|
|
|
|
/** 上传图片list */ |
|
|
|
|
updateImgList: [], |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const { |
|
|
|
|
@ -546,7 +596,7 @@ onMounted(() => {
|
|
|
|
|
/** 请求运单数据 */ |
|
|
|
|
const initOriginWarehouseOrder = async (params = {}) => { |
|
|
|
|
try { |
|
|
|
|
details.loadingObj.oldListLoading = true; |
|
|
|
|
details.loadingObj.pageLoading = true; |
|
|
|
|
const submitData = { |
|
|
|
|
loadId: details.loadId, |
|
|
|
|
...details.query, |
|
|
|
|
@ -588,32 +638,57 @@ const initOriginWarehouseOrder = async (params = {}) => {
|
|
|
|
|
} finally { |
|
|
|
|
// 等待列表渲染完成 |
|
|
|
|
await nextTick(); |
|
|
|
|
details.loadingObj.oldListLoading = false; |
|
|
|
|
details.loadingObj.pageLoading = false; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 请求日志跟踪 */ |
|
|
|
|
const handleSignLoadScanLogs = async () => { |
|
|
|
|
try { |
|
|
|
|
details.loadingObj.pageLoading = true; |
|
|
|
|
|
|
|
|
|
const submitData = { loadId: $route.query.loadId }; |
|
|
|
|
const res = await postFindCarsLoadLogs(submitData); |
|
|
|
|
|
|
|
|
|
const { code, data } = res.data; |
|
|
|
|
if (code !== 200) return; |
|
|
|
|
details.loadLogsList = data; |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log('error :>> ', error); |
|
|
|
|
} finally { |
|
|
|
|
details.loadingObj.pageLoading = false; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 请求运输合同图片列表 */ |
|
|
|
|
const handleFindContractList = async () => { |
|
|
|
|
try { |
|
|
|
|
details.loadingObj.pageLoading = true; |
|
|
|
|
|
|
|
|
|
const submitData = { loadId: $route.query.loadId }; |
|
|
|
|
const res = await postFindContractList(submitData); |
|
|
|
|
|
|
|
|
|
const { code, data } = res.data; |
|
|
|
|
if (code !== 200) return; |
|
|
|
|
details.carriageContractList = data.map(val => val.url); |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log('error :>> ', error); |
|
|
|
|
} finally { |
|
|
|
|
details.loadingObj.pageLoading = false; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 请求页面数据 */ |
|
|
|
|
const onLoad = async () => { |
|
|
|
|
console.log('123 :>> ', 123); |
|
|
|
|
details.loadId = $route.query.loadId; |
|
|
|
|
// 请求页面数据 |
|
|
|
|
initOriginWarehouseOrder(); |
|
|
|
|
|
|
|
|
|
// // 请求下拉数据 |
|
|
|
|
// postSelectEditDetailByLoadId({ loadId: details.loadId }).then(res => { |
|
|
|
|
// const { code, data } = res.data; |
|
|
|
|
|
|
|
|
|
// if (code !== 200) return; |
|
|
|
|
|
|
|
|
|
// details.pageInfo.loadType = data.loadType; |
|
|
|
|
// details.pageInfo.chargeType = data.chargeType; |
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
// 设置页面列表高度 |
|
|
|
|
setTabelHeight(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
onLoad(); |
|
|
|
|
|
|
|
|
|
/** 搜索 */ |
|
|
|
|
const searchChange = () => { |
|
|
|
|
initOriginWarehouseOrder(); |
|
|
|
|
@ -721,6 +796,7 @@ const setnewcolum = (newarr, headarr, type) => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 合并行 */ |
|
|
|
|
const arraySpanMethod = (row: any) => { |
|
|
|
|
const { column } = row; |
|
|
|
|
if (mergeColumn.indexOf(column.property) !== -1) { |
|
|
|
|
@ -729,17 +805,71 @@ const arraySpanMethod = (row: any) => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 提交新增 */ |
|
|
|
|
const handleSubmitAddImg = async () => { |
|
|
|
|
if (details.updateImgList.length === 0) return ElMessage.warning('请选择需要上传的图片'); |
|
|
|
|
details.popUpShow.addImgVisible = false; |
|
|
|
|
details.loadingObj.pageLoading = true; |
|
|
|
|
try { |
|
|
|
|
const urlList = []; |
|
|
|
|
console.log('details.updateImgList :>> ', details.updateImgList); |
|
|
|
|
for (let i = 0; i < details.updateImgList.length; i++) { |
|
|
|
|
const value = details.updateImgList[i]; |
|
|
|
|
console.log('value :>> ', value); |
|
|
|
|
if (value.response.data.link) urlList.push(value.response.data.link); |
|
|
|
|
} |
|
|
|
|
const res = await postAddContractByLoadId({ |
|
|
|
|
loadId: $route.query.loadId, |
|
|
|
|
url: urlList.join(','), |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const { code, msg } = res.data; |
|
|
|
|
if (code !== 200) return; |
|
|
|
|
if (msg) ElMessage.success(msg); |
|
|
|
|
handleCheckTab('tab5'); |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log('error :>> ', error); |
|
|
|
|
} finally { |
|
|
|
|
details.loadingObj.pageLoading = false; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleCheckTab = e => { |
|
|
|
|
console.log('e :>> ', e); |
|
|
|
|
switch (e.props.name) { |
|
|
|
|
// 日志跟踪 |
|
|
|
|
case 'tab2': |
|
|
|
|
handleSignLoadScanLogs(); |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
case 'tab5': |
|
|
|
|
handleFindContractList(); |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 关闭页面 */ |
|
|
|
|
const back = () => { |
|
|
|
|
$store.commit('DEL_TAG_CURRENT'); |
|
|
|
|
$router.push({ path: '/distribution/artery/TripartiteTransfer' }); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
watch($route, () => { |
|
|
|
|
if ($route.path !== '/distribution/artery/TripartiteTransferDetails') return; |
|
|
|
|
watch( |
|
|
|
|
() => $route.query, |
|
|
|
|
() => { |
|
|
|
|
console.log('1231 :>> ', 1231); |
|
|
|
|
if ($route.path !== '/distribution/artery/VehicleStowageDetails') return; |
|
|
|
|
onLoad(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
immediate: true, |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.fo-fl { |
|
|
|
|
display: flex; |
|
|
|
|
@ -783,11 +913,6 @@ watch($route, () => {
|
|
|
|
|
color: var(--el-color-primary); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.mr10 { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
height: 40px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 错误提示 |
|
|
|
|
:deep(.el-form-item__error) { |
|
|
|
|
z-index: 99; |
|
|
|
|
@ -806,4 +931,12 @@ watch($route, () => {
|
|
|
|
|
) { |
|
|
|
|
--el-color-danger: #f00; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.el-step__description) { |
|
|
|
|
padding-right: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.carriageContractList_img { |
|
|
|
|
border-radius: 5px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
