7 changed files with 600 additions and 80 deletions
@ -0,0 +1,542 @@ |
|||||||
|
<template> |
||||||
|
<el-divider content-position="left"> <span>工单新增</span> |
||||||
|
</el-divider> |
||||||
|
|
||||||
|
<el-form :model="Indexform" label-width="100px" class="IndexFrom" ref="IndexForm"> |
||||||
|
<el-form-item label="异常类型"> |
||||||
|
<el-select |
||||||
|
v-model="Indexform.workOrderType" |
||||||
|
clearable |
||||||
|
placeholder="选择工单异常类型" |
||||||
|
@change="abnormalChange" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in IndexException" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="发现节点"> |
||||||
|
<el-select |
||||||
|
v-model="Indexform.discoveryNode" |
||||||
|
clearable |
||||||
|
placeholder="选择发现节点" |
||||||
|
@change="DiscoveringNodesChange" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in DiscoveringNodes" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="异常工单号"> |
||||||
|
<el-input v-model="Indexform.workOrderNumber" placeholder="请输入异常工单号" clearable /> |
||||||
|
</el-form-item> |
||||||
|
<!-- 必填 --> |
||||||
|
<el-form-item label="运单号"> |
||||||
|
<el-input v-model="Indexform.waybillNumber" placeholder="请输入云单号" clearable /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="少货件数" v-if="StateType || SelectType == 2"> |
||||||
|
<el-input @input="ShortageTtems" v-model="Indexform.number" placeholder="请输入少货件数" clearable /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="窜货件数" v-if="StateType || SelectType == 3"> |
||||||
|
<el-input v-model="Indexform.number" placeholder="请输入窜货件数" clearable /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item |
||||||
|
label="包条码" |
||||||
|
v-if="SelectType == 1 || SelectType == 2 || SelectType == 3 || StateType" |
||||||
|
> |
||||||
|
<el-input |
||||||
|
v-model="Indexform.packageCode" |
||||||
|
placeholder="请输入包条码,多个用逗号隔开" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<!-- 必填 --> |
||||||
|
<el-form-item label="订单自编号"> |
||||||
|
<el-input v-model="Indexform.orderCode" placeholder="请输入订单自编号" clearable /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item |
||||||
|
label="车次号" |
||||||
|
v-if="groundlineSet || groundlineType == 1 || groundlineType == 3 || groundlineType == 4" |
||||||
|
> |
||||||
|
<el-input |
||||||
|
v-model="Indexform.trainNumber" |
||||||
|
placeholder="请输入车次号(干线卸车环节)" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<!-- 必填 --> |
||||||
|
<el-form-item label="一级品"> |
||||||
|
<el-input v-model="Indexform.first" placeholder="请输入一级品类" clearable /> |
||||||
|
</el-form-item> |
||||||
|
<!-- 必填 --> |
||||||
|
<el-form-item label="二级品"> |
||||||
|
<el-input v-model="Indexform.secondary" placeholder="请输入二级品类" clearable /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="车辆路线"> |
||||||
|
<el-input |
||||||
|
v-model="Indexform.vehicleRoute" |
||||||
|
placeholder="请输入车辆路线车次号(通过车次号自动带出车辆路线)" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="送货时间"> |
||||||
|
<el-date-picker |
||||||
|
v-model="Indexform.deliverGoodsTime" |
||||||
|
type="datetime" |
||||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
placeholder="请选择送货时间" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item |
||||||
|
label="发现时间" |
||||||
|
v-if="groundlineSet || groundlineType == 2 || groundlineType == 3 || groundlineType == 4" |
||||||
|
> |
||||||
|
<el-date-picker |
||||||
|
v-model="Indexform.discoveryTime" |
||||||
|
type="datetime" |
||||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
placeholder="请选择发现时间" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item |
||||||
|
label="配送时间" |
||||||
|
v-if="groundlineSet || groundlineType == 3 || groundlineType == 4" |
||||||
|
> |
||||||
|
<el-date-picker |
||||||
|
v-model="Indexform.deliveryTime" |
||||||
|
type="datetime" |
||||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
placeholder="请选择入库" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="入库时间" v-if="groundlineSet || groundlineType == 2"> |
||||||
|
<el-date-picker |
||||||
|
v-model="Indexform.warehousingTime" |
||||||
|
type="datetime" |
||||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
placeholder="请选择入库" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<!-- 必填 --> |
||||||
|
<el-form-item label="运单商场"> |
||||||
|
<el-input v-model="Indexform.waybillMall" placeholder="请输入运单商场" clearable /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item |
||||||
|
label="配送司机" |
||||||
|
v-if="groundlineSet || groundlineType == 3 || groundlineType == 4" |
||||||
|
> |
||||||
|
<el-select |
||||||
|
v-model="Indexform.deliveryDriver" |
||||||
|
filterable |
||||||
|
default-first-option |
||||||
|
:reserve-keyword="false" |
||||||
|
placeholder="请输入配送司机" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in DeliveryDriver" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<!-- 必填 --> |
||||||
|
<el-form-item label="异常问题描述"> |
||||||
|
<el-input v-model="Indexform.problemDescription" placeholder="请输入异常问题" clearable /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item |
||||||
|
label="责任人" |
||||||
|
v-if="groundlineSet || groundlineType == 2 || groundlineType == 3 || groundlineType == 4" |
||||||
|
> |
||||||
|
<el-input |
||||||
|
v-model="Indexform.personResponsible" |
||||||
|
:disabled="FromDisabled" |
||||||
|
placeholder="请输入责任人" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="备注信息"> |
||||||
|
<el-input v-model="Indexform.remarks" placeholder="请输入备注" clearable /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
|
||||||
|
</el-form> |
||||||
|
<!-- 必填 --> |
||||||
|
<div class="el_clzr"> |
||||||
|
|
||||||
|
<el-form-item class="investigate" label="调查经过"> |
||||||
|
<el-input v-model="Indexform.remarks" placeholder="请输入调查经过" clearable :rows="2" |
||||||
|
type="textarea"/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
|
||||||
|
<el-form-item label="处理方"> |
||||||
|
<el-select v-model="Indexform.processor" clearable filterable multiple placeholder="请选择处理方"> |
||||||
|
<el-option |
||||||
|
v-for="item in warehouseData" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<!-- 必填 --> |
||||||
|
<el-form-item label="责任方"> |
||||||
|
<el-select v-model="Indexform.duty" clearable filterable multiple placeholder="请选择责任方"> |
||||||
|
<el-option |
||||||
|
v-for="item in warehouseData" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div class="Transport_damage_photos" v-if="SelectType == 1 || SelectType == 3 || StateType"> |
||||||
|
<span class="title">运损照片</span> |
||||||
|
<el-upload |
||||||
|
v-model="Indexform.packageImage" |
||||||
|
list-type="picture-card" |
||||||
|
:on-preview="pictureList" |
||||||
|
:on-remove="ImgListRemove" |
||||||
|
:action="doubledCount" |
||||||
|
:on-success="ImgSuccess" |
||||||
|
:before-upload="beforeAvatarUpload" |
||||||
|
:headers="headers" |
||||||
|
multiple |
||||||
|
drag |
||||||
|
> |
||||||
|
<el-icon><Plus /></el-icon> |
||||||
|
</el-upload> |
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible"> |
||||||
|
<img w-full :src="dialogImageUrl" alt="图片" /> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="dialog-footer"> |
||||||
|
<el-button @click="Indexdialog = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="ConfirmForm"> 提交 </el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 少货件数大于3 --> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { ElMessage } from 'element-plus'; |
||||||
|
import { ElMessageBox } from 'element-plus'; |
||||||
|
import { useRouter } from 'vue-router'; |
||||||
|
import { getDictionaryBiz } from '@/api/system/dict'; //字典 |
||||||
|
import { getDetailWarehouse, getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方 |
||||||
|
import { $_getList, $_submit, $_getDetail, $_remove } from '@/api/aftersales/aftersalesWorkOrder'; |
||||||
|
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue'; |
||||||
|
import { getToken } from '@/utils/auth'; |
||||||
|
const Indexform = ref({}); //首页新增表单 |
||||||
|
const IndexException = ref([]); //异常类型下拉选择 |
||||||
|
const DiscoveringNodes = ref([]); //发现节点下拉选择 |
||||||
|
const warehouseData = ref([]); //处理方 |
||||||
|
const SelectType = ref(null); //类型 |
||||||
|
const StateType = ref(true); //类型 |
||||||
|
const dialogImageUrl = ref(null); //图片 |
||||||
|
const dialogVisible = ref(null); //图片 |
||||||
|
const groundlineSet = ref(true); //干线条件都满足 |
||||||
|
const groundlineType = ref(null); //干线状态 |
||||||
|
const DeliveryDriver = ref([ |
||||||
|
{ |
||||||
|
value: '0', |
||||||
|
label: '兰溪', |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: '1', |
||||||
|
label: '李华', |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: '2', |
||||||
|
label: '唐飞', |
||||||
|
}, |
||||||
|
]); |
||||||
|
// 图片列表 |
||||||
|
const fileList = ref([]); |
||||||
|
// 字典公共函数 |
||||||
|
function updateDictionary(targetArray, dictionaryType) { |
||||||
|
getDictionaryBiz(dictionaryType).then(res => { |
||||||
|
console.log(res, '字典'); |
||||||
|
res.data.data.forEach(item => { |
||||||
|
targetArray.push({ |
||||||
|
value: item.dictKey, |
||||||
|
label: item.dictValue, |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
// 图片上传必须携带TOKEN |
||||||
|
const headers = computed(() => { |
||||||
|
return { 'Blade-Auth': 'Bearer ' + getToken() }; |
||||||
|
}); |
||||||
|
// 图片上传接口 |
||||||
|
const doubledCount = computed(() => { |
||||||
|
return '/api/blade-resource/oss/endpoint/put-file'; |
||||||
|
}); |
||||||
|
// 图片上传成功回调函数 |
||||||
|
const ImgSuccess= (response, uploadFile) => { |
||||||
|
if (response.success === true) { |
||||||
|
console.log(response); |
||||||
|
fileList.value.push({ |
||||||
|
name: response.data.originalName, |
||||||
|
url: response.data.link, |
||||||
|
}) |
||||||
|
console.log(fileList.value,'图片列表'); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 上传图片规则 |
||||||
|
const beforeAvatarUpload = rawFile => { |
||||||
|
if (rawFile.type !== 'image/png') { |
||||||
|
ElMessage.error('图片格式只能为image/png!'); |
||||||
|
return false; |
||||||
|
} else if (rawFile.size / 1024 / 1024 > 2) { |
||||||
|
ElMessage.error('图片大小不能大于2MB!'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
return true; |
||||||
|
}; |
||||||
|
// 点击图片列表回调 |
||||||
|
const pictureList=(val)=>{ |
||||||
|
console.log(val,'图片列表'); |
||||||
|
} |
||||||
|
// 点击图片移除 |
||||||
|
const ImgListRemove=(val)=>{ |
||||||
|
console.log(val,'移除图片'); |
||||||
|
} |
||||||
|
// 处理方和责任方获取数据 |
||||||
|
const handle = () => { |
||||||
|
getDeptWarehouse().then(res => { |
||||||
|
res.data.data.forEach(item => { |
||||||
|
console.log(item); |
||||||
|
warehouseData.value.push({ |
||||||
|
value: item.id, |
||||||
|
label: item.name, |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
const onLoad = () => { |
||||||
|
updateDictionary(IndexException.value, 'pc_work_order'); //异常类型 |
||||||
|
updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节 |
||||||
|
handle(); //处理方和责任方信息 |
||||||
|
}; |
||||||
|
onLoad(); //初始化程序 |
||||||
|
// 异常类型事件 |
||||||
|
const abnormalChange = val => { |
||||||
|
console.log(val,'异常事件类型'); |
||||||
|
console.log(StateType.value); |
||||||
|
StateType.value = false; |
||||||
|
if (val == 1 || val == 2 || val == 3) { |
||||||
|
SelectType.value = val; |
||||||
|
} else { |
||||||
|
StateType.value = true; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 发现节点事件 |
||||||
|
const DiscoveringNodesChange = val => { |
||||||
|
groundlineSet.value = false; //干线条件都b满足 |
||||||
|
if (val == 1 || val == 2 || val == 3 || val == 4 || val == 5) { |
||||||
|
groundlineType.value = val; //干线状态 |
||||||
|
} else { |
||||||
|
groundlineSet.value = true; //展示所有搜索框 |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 照片 |
||||||
|
const handleRemove = (uploadFile, uploadFiles) => { |
||||||
|
console.log(uploadFile, uploadFiles); |
||||||
|
}; |
||||||
|
|
||||||
|
const handlePictureCardPreview = uploadFile => { |
||||||
|
dialogImageUrl.value = uploadFile.url; |
||||||
|
dialogVisible.value = true; |
||||||
|
}; |
||||||
|
//表单提交 |
||||||
|
const ConfirmForm = () => { |
||||||
|
//司机信息处理 |
||||||
|
Indexform.value.deliveryDriver = DeliveryDriver.value.find( |
||||||
|
item => item.value == Indexform.value.deliveryDriver |
||||||
|
).label; |
||||||
|
console.log(Indexform.value.deliveryDriver); // 输出李华 |
||||||
|
let processorEntityList = []; |
||||||
|
|
||||||
|
//处理方信息处理 |
||||||
|
Indexform.value.processor.forEach(item => { |
||||||
|
let found = warehouseData.value.find(element => element.value == item.toString()); |
||||||
|
processorEntityList.push({ |
||||||
|
businessName: found ? found.label : '', |
||||||
|
businessId: item, |
||||||
|
conditions: 1, |
||||||
|
typesOf: 2, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
//责任方信息处理 |
||||||
|
Indexform.value.duty.forEach(item => { |
||||||
|
let found = warehouseData.value.find(element => element.value == item.toString()); |
||||||
|
processorEntityList.push({ |
||||||
|
businessName: found ? found.label : '', |
||||||
|
businessId: item, |
||||||
|
conditions: 1, |
||||||
|
typesOf: 1, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
let DataSubmit = { ...Indexform.value }; //解构表单参数 |
||||||
|
DataSubmit.processorEntityList = processorEntityList; |
||||||
|
delete DataSubmit.duty, //移除多余字段 |
||||||
|
delete DataSubmit.processor; //移除多余字段 |
||||||
|
console.log(DataSubmit, '处理好的数据'); |
||||||
|
//提交表单信息 |
||||||
|
// $_submit(DataSubmit).then(res => { |
||||||
|
// if (res.data.code == 200) { |
||||||
|
// ElMessage({ |
||||||
|
// message: res.data.msg, |
||||||
|
// type: 'success', |
||||||
|
// }); |
||||||
|
// Indexform.value = {}; //重置表单 |
||||||
|
// IndexTable(); |
||||||
|
// } |
||||||
|
// }); |
||||||
|
}; |
||||||
|
// 少货件数对应事件 |
||||||
|
const ShortageTtems=(val)=>{ |
||||||
|
const pattern = /\s+/g; |
||||||
|
const result = val.replace(pattern, ''); |
||||||
|
console.log(result); // 输出 "33" |
||||||
|
Indexform.value.number=result |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.IndexFrom { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: flex-start; |
||||||
|
|
||||||
|
.el-form-item { |
||||||
|
height: 46px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin: 0; |
||||||
|
margin-bottom: 18px; |
||||||
|
flex: 1 0 30%; |
||||||
|
:deep(.el-form-item__label){ |
||||||
|
width: 100px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
:deep(.el-form-item__content) { |
||||||
|
height: 100%; |
||||||
|
width: 70% !important; |
||||||
|
flex: none; |
||||||
|
.el-input { |
||||||
|
height: 100% !important; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-input__wrapper { |
||||||
|
height: 32px !important; |
||||||
|
} |
||||||
|
:deep(.el-input) { |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
:deep(.el-input__wrapper) { |
||||||
|
height: 30px !important; |
||||||
|
} |
||||||
|
:deep(.el-select) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
:deep(.el-form-item__label) { |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el_clzr { |
||||||
|
margin-top: 40px; |
||||||
|
|
||||||
|
:deep(.el-select) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
:deep(.el-input) { |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
:deep(.el-form-item__label) { |
||||||
|
margin-left: 20px; |
||||||
|
font-size: 14px; |
||||||
|
width: 100px !important; |
||||||
|
|
||||||
|
} |
||||||
|
.el-form-item { |
||||||
|
margin: 0; |
||||||
|
margin-bottom: 34px; |
||||||
|
} |
||||||
|
:deep(.el-input__wrapper){ |
||||||
|
height: 35px !important; |
||||||
|
} |
||||||
|
:deep(.el-form-item__content) { |
||||||
|
height: 100%; |
||||||
|
width: 90% !important; |
||||||
|
flex: none; |
||||||
|
.el-input { |
||||||
|
height: 100% !important; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.Transport_damage_photos{ |
||||||
|
padding: 0 15px; |
||||||
|
.title{ |
||||||
|
display: block; |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
.dialog-footer{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
padding: 0 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-right: 36px; |
||||||
|
} |
||||||
|
.investigate{ |
||||||
|
:deep(.el-form-item__content){ |
||||||
|
width: 90% !important; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue