<template>
<div>
<div>
<el-descriptions class="margin-top" title="车辆信息" :column="3" :size="size" border>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
司机
</template>
{{carinfo.veOwnerName}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-mobile-phone"></i>
手机号
</template>
{{carinfo.ownerInsideTel}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-truck"></i>
车号
</template>
{{carinfo.domesticLisenceNo}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-tickets"></i>
驾驶证有效期
</template>
<el-tag size="small">{{carinfo.veFactoryDate}}</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-shopping-cart-full"></i>
车自重
</template>
{{carinfo.selfWt}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-office-building"></i>
地址
</template>
{{carinfo.proposer}}
</el-descriptions-item>
</el-descriptions>
</div>
<div style="margin-top: 10px">
<el-descriptions class="margin-top" title="派单列表" :column="3" :size="size" border></el-descriptions>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column
prop="dispatch"
label="派单号"
width="150">
</el-table-column>
<el-table-column
prop="awba"
label="主单号"
width="105">
</el-table-column>
<el-table-column
prop="awbh"
label="分单号"
width="140">
</el-table-column>
<el-table-column
prop="deststation"
label="目的港"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="pcs"
label="件数"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="weight"
label="毛重"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="vol"
label="体积"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="charge"
label="应收"
show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
<div style="margin-top: 10px">
<el-descriptions class="margin-top" title="车辆跟踪" :column="3" :size="size" border>
<template slot="extra">
<el-button type="primary" size="small" @click="addRecords">添加记录</el-button>
</template>
</el-descriptions>
<div>
<el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.opertime">
<span style="color: #5BB75B;font-weight: bold">状态：</span>{{activity.status}}--<span style="color: #5BB75B;font-weight: bold">跟踪信息：</span>{{activity.info}}
</el-timeline-item>
</el-timeline>
</div>
</div>
<div>
<el-dialog
title="添加车辆跟进信息"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="派单号" prop="dispatch">
<el-input v-model="ruleForm.dispatch" disabled></el-input>
</el-form-item>
<el-form-item label="跟进状态" prop="status">
<el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 100%">
<el-option label="待装" value="待装"></el-option>
<el-option label="在途" value="在途"></el-option>
<el-option label="已到未卸" value="已到未卸"></el-option>
<el-option label="已完成" value="已完成"></el-option>
</el-select>
</el-form-item>
<el-form-item label="跟进信息" prop="info">
<el-input v-model="ruleForm.info"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-button @click="resetForm('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
<div>
<el-descriptions class="margin-top" title="货物照片" :column="3" :size="size" border>
<template slot="extra">
<el-upload
class="upload-demo"
action=""
:http-request="uploadRequest"
:on-change="handleChange"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
multiple
accept="image/*"
>
<el-button size="small" type="success">上传照片</el-button>
</el-upload>
</template>
</el-descriptions>
<div>
<el-image
v-for="(url, index) in validUrls"
:key="index"
:src="url"
style="width: 200px; height: 200px; margin: 10px;"
:preview-src-list="validUrls"
/>
</div>
</div>
</div>
</template>
<script>
import {list} from "../../api/road_verecord/verecord";
import {
selectListByDispatch,
selectByDispatchList,
addTracker,
uploadGoodsImage,
selectPicsByDispatch
} from "../../api/consigner/vehicle";
export default {
data() {
return{
ruleForm:{
dispatch: "",
id: "",
info: "",
opertime: "",
status: ""
},
rules:{
status: [
{ required: true, message: '请选择跟进状态', trigger: 'change' }
],
},
reverse: false,
activities: [],
validUrls:[],
routerinfo:{},
carinfo:{},
size: 'medium',
tableData:[],
dialogVisible: false
}
},
methods:{
getImgList(){
selectPicsByDispatch({dispatch:this.routerinfo.dispatch}).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('获取消息收发记录，失败！')
}
if(res.data.urls && res.data.urls.trim() !== ''){
this.validUrls= res.data.urls
.split(',')
.filter(url => url.trim() !== '');
}
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
},
beforeUpload(file) {
const isImage = file.type.startsWith('image/');
if (!isImage) {
this.$message.error('只能上传图片文件!');
}
return isImage;
},
handleChange(file, fileList) {
console.log(file, fileList);
},
handleSuccess(response, file, fileList) {
console.log('Upload successful:', response);
},
handleError(err, file, fileList) {
console.error('Upload failed:', err);
},
uploadRequest({ file, onSuccess, onError }) {
const formData = new FormData();
formData.append('file', file);
formData.append('dispatch',this.routerinfo.dispatch);
uploadGoodsImage(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getImgList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
//添加跟踪记录
addRecords(){
this.ruleForm.dispatch=this.routerinfo.dispatch;
this.dialogVisible=true;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
addTracker(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('跟进信息添加，失败！')
}
this.$message.success('跟进信息添加，成功！')
this.dialogVisible = false;
this.getRecords();
}).catch(error => {
// 关闭加载
this.$message.warning('跟进信息添加，失败！')
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.dialogVisible = false;
this.$refs[formName].resetFields();
},
//查询跟踪记录
getRecords(){
selectByDispatchList({dispatch:this.routerinfo.dispatch}).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
this.activities=res.data;
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
},
//查询派单列表
getLists() {
selectListByDispatch({dispatch:this.routerinfo.dispatch}).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
this.tableData=res.data;
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
},
getDefault(){
if(this.$route.query!=null){
this.routerinfo=this.$route.query.jilu;
}
},
//查询车辆信息
getReCord() {
let para = {
pageSize: 1,
limitSize: 10,
trailerFrameNo: this.$route.query.jilu.licenseno,
veState: '',
veClassFlag: '',
userId: ''
};
list(para).then((res) => {
if(res.data.data.list.length!==0){
this.carinfo = res.data.data.list[0];
}else{
this.$message.warning('无对应车辆信息！')
}
}).catch((error) => {
this.$message.warning('车辆查询，失败！')
});
},
getMess(){
if(this.routerinfo!=null && this.routerinfo.length!==0){
this.getReCord();
this.getLists();
}
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
},
activated() {
this.getDefault();
this.getMess();
this.getRecords();
this.getImgList();
}
}
</script>