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