You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
783 lines
18 KiB
783 lines
18 KiB
<template> |
|
<basic-container> |
|
<div v-loading="details.loadingObj.pageLoading"> |
|
<!-- 标题 --> |
|
<div class="header">异 动 信 息</div> |
|
|
|
<!-- 主体内容 --> |
|
<div class="main"> |
|
<!-- 运单 / 订单信息 --> |
|
<div> |
|
<!-- 标题 --> |
|
<div class="header">订 单 信 息</div> |
|
|
|
<!-- 信息 --> |
|
<div class="info fwb"> |
|
<!-- 订单信息 --> |
|
<div class="fwb info_title"> |
|
<span class="title"> 订单号： </span> |
|
<span class="text"> {{ details.pageInfo.orderNo }} </span> |
|
</div> |
|
|
|
<!-- 运单信息 --> |
|
<div class="fwb mt10 info_title mr10"> |
|
<span class="title"> 运单号： </span> |
|
<span class="text"> {{ details.pageInfo.waybillNo }} </span> |
|
</div> |
|
|
|
<div class="info_row mt10"> |
|
<div v-for="item in details.titleOption" :key="item.label"> |
|
<span class="title"> {{ item.label }} </span> |
|
<span class="text"> {{ details.pageInfo[item.prop] || '暂无数据' }} </span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 异动信息 --> |
|
<div v-if="Number(details.pageInfo.confirmStatisticsOrder) === 0"> |
|
<!-- 标题 --> |
|
<div class="header algin_center"> |
|
<span> 异 动 信 息 </span> |
|
<span class="title_info"> |
|
（此处填写要登记的异动的金额，整数表示异动增款；负数表示异动减款） |
|
</span> |
|
</div> |
|
|
|
<!-- 表单信息 --> |
|
<el-form class="info" ref="formRef" :model="details.form" inline :rules="details.rules"> |
|
<template v-for="(item, index) in details.formOption" :key="item.label"> |
|
<el-form-item :label="item.label" v-if="item.type === 'number'"> |
|
<el-input-number |
|
:value-on-clear="0" |
|
:controls="false" |
|
v-model="details.form[item.prop]" |
|
:precision="2" |
|
:step="1" |
|
/> |
|
</el-form-item> |
|
</template> |
|
|
|
<el-form-item label="异动时间：" prop="changesTimeStr"> |
|
<el-date-picker |
|
v-model="details.form.changesTimeStr" |
|
:disabled-date="(value: Date) => !(value.getTime() <= new Date().getTime())" |
|
type="datetime" |
|
placeholder="请选择异动时间" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item label="结算网点：" prop="statisticsWarehouse"> |
|
<el-select |
|
class="w100" |
|
v-model="details.form.statisticsWarehouse" |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="目的仓" |
|
@change=" |
|
val => { |
|
destinationWarehouseNameChange(val); |
|
} |
|
" |
|
:remote-method="value => debounce(remoteMethod(value), 500)" |
|
:loading="details.loadingObj.loading" |
|
clearable |
|
> |
|
<el-option |
|
v-for="item in details.warehouseList" |
|
:key="item.value" |
|
:label="item.warehouseName" |
|
:value="item.warehouseId" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="备注：" class="w100"> |
|
<el-input type="textarea" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="图片：" class="w100"> |
|
<el-upload |
|
list-type="picture-card" |
|
v-model:file-list="details.fileList" |
|
drag |
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" |
|
multiple |
|
:on-preview="handlePictureCardPreview" |
|
:on-remove="handleRemove" |
|
> |
|
<el-icon><Plus /></el-icon> |
|
</el-upload> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
|
|
<!-- 异动信息 --> |
|
<div> |
|
<!-- 标题 --> |
|
<div class="header algin_center">异 动 记 录</div> |
|
|
|
<!-- 表格 --> |
|
<div class="info"> |
|
<tablecmt |
|
ref="tableNodeRef" |
|
:columnList="details.columnList" |
|
:tableData="details.data" |
|
:loading="details.loadingObj.list" |
|
> |
|
<template #default="slotProps"> |
|
<el-text @click="() => handleShowImg(slotProps.scope)">查看图片</el-text> |
|
</template> |
|
</tablecmt> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 底部站位 --> |
|
<div class="footer"></div> |
|
|
|
<!-- 底部按钮 --> |
|
<div class="footer_container flex-c-c"> |
|
<!-- 关闭 --> |
|
<el-button icon="CircleClose" @click="handleClose"> 关 闭 </el-button> |
|
<!-- 提交 --> |
|
<el-button |
|
v-if="Number(details.pageInfo.confirmStatisticsOrder) === 0" |
|
icon="Position" |
|
type="primary" |
|
@click="handleSubmit" |
|
> |
|
提 交 |
|
</el-button> |
|
</div> |
|
</div> |
|
</basic-container> |
|
|
|
<el-dialog v-model="details.popUpShow.imgVisited"> |
|
<img w-full :src="details.dialogImageUrl" alt="图片加载失败" /> |
|
</el-dialog> |
|
|
|
<el-dialog v-model="details.popUpShow.showImgVisited"> |
|
<div class="dialog_img"> |
|
<el-image |
|
v-for="(url, index) in details.imgList" |
|
:key="url" |
|
style="width: 100px; height: 100px" |
|
:src="url" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="details.imgList" |
|
:initial-index="index" |
|
fit="cover" |
|
/> |
|
</div> |
|
</el-dialog> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { ref, reactive, toRefs } from 'vue'; |
|
import { |
|
postFindOrderDetail, |
|
postAddChangesRecord, |
|
postFindChangesRecordList, |
|
} from '@/api/finance/TransactionInformation'; |
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
import type { UploadUserFile, UploadProps } from 'element-plus'; |
|
import { useRoute, useRouter } from 'vue-router'; |
|
import { getOpenOrderAdvanceFindWarehouseList } from '@/api/distribution/CreateOrder.js'; |
|
import { debounce, getObjType } from '@/utils/util'; |
|
|
|
const $route = useRoute(); |
|
const $router = useRouter(); |
|
|
|
const details = reactive({ |
|
form: {}, |
|
fileList: [ |
|
{ |
|
name: 'food.jpeg', |
|
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', |
|
}, |
|
{ |
|
name: 'plant-1.png', |
|
url: '/images/plant-1.png', |
|
}, |
|
] as UploadUserFile[], |
|
/** 弹窗 */ |
|
popUpShow: { |
|
imgVisited: false, |
|
/** 显示异动图片 */ |
|
showImgVisited: false, |
|
}, |
|
dialogImageUrl: '', |
|
data: [], |
|
loadingObj: { |
|
list: false, |
|
pageLoading: false, |
|
}, |
|
columnList: [ |
|
{ |
|
prop: '', |
|
label: '序号', |
|
type: 12, |
|
values: '', |
|
width: 55, |
|
fixed: false, |
|
}, |
|
{ |
|
prop: 'itemRecord', |
|
label: '异动栏目', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
// { |
|
// prop: 'waybillNo', |
|
// label: '异动数值', |
|
// type: 1, |
|
// values: '', |
|
// width: '150', |
|
// checkarr: [], |
|
// fixed: false, |
|
// sortable: true, |
|
// head: false, |
|
// }, |
|
{ |
|
prop: 'changesPhotoEntityListStr', |
|
label: '异动图片', |
|
type: 6, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'changesUserName', |
|
label: '操作人', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'createTime', |
|
label: '异动操作时间', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
], |
|
formOption: [ |
|
{ |
|
label: '干线费：', |
|
prop: 'freightFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '提货费：', |
|
prop: 'pickupFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '仓储费：', |
|
prop: 'warehouseFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '仓储管理费：', |
|
prop: 'warehouseManageFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '仓储分拣费：', |
|
prop: 'warehouseSortingFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '仓储操作 / 装卸费：', |
|
prop: 'warehouseOperatingFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '配送费：', |
|
prop: 'deliveryFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '配送操作 / 装卸费：', |
|
prop: 'deliveryLoadingFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '配送分货费：', |
|
prop: 'deliverySortingFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '配送上楼费：', |
|
prop: 'deliveryUpfloorFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '配送平移费：', |
|
prop: 'deliveryMoveFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '安装费：', |
|
prop: 'installFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '保价费：', |
|
prop: 'quotationFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '申明价值：', |
|
prop: 'claimingValue', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '其它费用：', |
|
prop: 'otherFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '回扣：', |
|
prop: 'returnFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '第三方操作费：', |
|
prop: 'thirdOprationFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '内部结算：', |
|
prop: 'hasStatisticsFee', |
|
type: 'number', |
|
}, |
|
{ |
|
label: '异动时间：', |
|
prop: 'changesTimeStr', |
|
type: 'time', |
|
}, |
|
{ |
|
label: '结算网点：', |
|
prop: 'statisticsWarehouse', |
|
type: 'select', |
|
}, |
|
{ |
|
label: '备注：', |
|
prop: 'remark', |
|
type: 'textarea', |
|
}, |
|
], |
|
titleOption: [ |
|
{ |
|
label: '对账单总金额（元）：', |
|
prop: 'totalStatementFee', |
|
}, |
|
{ |
|
label: '开单时间：', |
|
prop: 'openTime', |
|
}, |
|
{ |
|
label: '发站：', |
|
prop: 'departure', |
|
}, |
|
{ |
|
label: '到站：', |
|
prop: 'destination', |
|
}, |
|
{ |
|
label: '品类：', |
|
prop: 'goodsName', |
|
}, |
|
{ |
|
label: '发货单位：', |
|
prop: 'shipper', |
|
}, |
|
{ |
|
label: '收货单位：', |
|
prop: 'consignee', |
|
}, |
|
{ |
|
label: '收货人：', |
|
prop: 'shipperPerson', |
|
}, |
|
{ |
|
label: '服务类型：', |
|
prop: 'typeServers', |
|
}, |
|
{ |
|
label: '运单类型：', |
|
prop: 'waybillType', |
|
}, |
|
{ |
|
label: '件数：', |
|
prop: 'totalcount', |
|
}, |
|
{ |
|
label: '重量：', |
|
prop: 'totalWeight', |
|
}, |
|
{ |
|
label: '体积：', |
|
prop: 'totalVolume', |
|
}, |
|
{ |
|
label: '干线费：', |
|
prop: 'realFreightFee', |
|
}, |
|
{ |
|
label: '提货费：', |
|
prop: 'realPickupFee', |
|
}, |
|
{ |
|
label: '仓储费：', |
|
prop: 'realWarehouseFee', |
|
}, |
|
{ |
|
label: '仓储管理费', |
|
prop: 'realWarehouseManageFee', |
|
}, |
|
{ |
|
label: '仓储分拣费', |
|
prop: 'realWarehouseSortingFee', |
|
}, |
|
{ |
|
label: '仓储操作 / 装卸费：', |
|
prop: 'realWarehouseOperatingFee', |
|
}, |
|
{ |
|
label: '配送费：', |
|
prop: 'realDeliveryFee', |
|
}, |
|
{ |
|
label: '配送操作 / 装卸费：', |
|
prop: 'realDeliveryLoadingFee', |
|
}, |
|
{ |
|
label: '配送分货费', |
|
prop: 'realDeliverySortingFee', |
|
}, |
|
{ |
|
label: '配送上楼费：', |
|
prop: 'realDeliveryUpfloorFee', |
|
}, |
|
{ |
|
label: '配送平移费：', |
|
prop: 'realDeliveryMoveFee', |
|
}, |
|
{ |
|
label: '安装费：', |
|
prop: 'realInstallFee', |
|
}, |
|
{ |
|
label: '保价费：', |
|
prop: 'realQuotationFee', |
|
}, |
|
{ |
|
label: '申明价值：', |
|
prop: 'realClaimingValue', |
|
}, |
|
{ |
|
label: '其它费用：', |
|
prop: 'realOtherFee', |
|
}, |
|
{ |
|
label: '回扣：', |
|
prop: 'realReturnFee', |
|
}, |
|
{ |
|
label: '售后：', |
|
prop: 'num', |
|
}, |
|
{ |
|
label: '异动金额：', |
|
prop: 'abnormalFee', |
|
}, |
|
], |
|
/** 页面数据 */ |
|
pageInfo: {}, |
|
/** 仓库节点list */ |
|
warehouseList: [], |
|
rules: { |
|
changesTimeStr: [{ required: true, message: '请选择异动时间', trigger: ['change', 'blur'] }], |
|
statisticsWarehouse: [ |
|
{ required: true, message: '请选择结算网点', trigger: ['change', 'blur'] }, |
|
], |
|
}, |
|
imgList: [], |
|
}); |
|
|
|
// 组件实例 |
|
/** 表单 */ |
|
const formRef = ref(); |
|
|
|
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => { |
|
details.dialogImageUrl = uploadFile.url!; |
|
details.popUpShow.imgVisited = true; |
|
}; |
|
|
|
/** 获取订单异动记录列表 */ |
|
const initTransactionList = async () => { |
|
const res = await postFindChangesRecordList({ orderInfoId: $route.query.orderInfoId }); |
|
const { data, code } = res.data; |
|
if (code !== 200) return; |
|
details.data = data || []; |
|
}; |
|
|
|
initTransactionList(); |
|
|
|
const onLoad = async () => { |
|
console.log('$route :>> ', $route); |
|
try { |
|
details.loadingObj.pageLoading = true; |
|
for (let index = 0; index < details.formOption.length; index++) { |
|
const value = details.formOption[index]; |
|
details.form[value.prop] = value.type === 'num' ? 0 : ''; |
|
} |
|
const res = await postFindOrderDetail({ orderInfoId: $route.query.orderInfoId }); |
|
|
|
const { code, data } = res.data; |
|
|
|
if (code !== 200) return; |
|
details.pageInfo = data || {}; |
|
|
|
console.log('details.pageInfo :>> ', details.pageInfo); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.pageLoading = false; |
|
} |
|
}; |
|
onLoad(); |
|
|
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { |
|
console.log(uploadFile, uploadFiles); |
|
}; |
|
|
|
/** 查询目的仓 */ |
|
const remoteMethod = async val => { |
|
try { |
|
details.loadingObj.loading = true; |
|
const res = await getOpenOrderAdvanceFindWarehouseList({ warehouseName: val }); |
|
const { data, code } = res.data; |
|
if (code !== 200) return; |
|
details.warehouseList = data || []; |
|
} catch (error) { |
|
} finally { |
|
details.loadingObj.loading = false; |
|
} |
|
}; |
|
|
|
remoteMethod(''); |
|
|
|
/** 目的仓选择时给目的仓名称赋值 */ |
|
const destinationWarehouseNameChange = val => { |
|
let _item: any = {}; |
|
|
|
for (const iterator of details.warehouseList) { |
|
if (iterator.warehouseId !== val) continue; |
|
_item = iterator; |
|
break; |
|
} |
|
|
|
details.form.statisticsWarehouseName = _item.warehouseName || ''; |
|
details.form.statisticsWarehouseId = _item.warehouseId || ''; |
|
|
|
console.log('details.form :>> ', details.form); |
|
}; |
|
|
|
/** 关闭 */ |
|
const handleClose = () => {}; |
|
|
|
/** 提交 */ |
|
const handleSubmit = () => { |
|
formRef.value.validate(async valid => { |
|
if (!valid) return; |
|
|
|
ElMessageBox.confirm('确定提交吗？', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}).then(async () => { |
|
try { |
|
details.loadingObj.pageLoading = true; |
|
|
|
const submitData = { ...details.form }; |
|
submitData.orderInfoId = $route.query.orderInfoId; |
|
submitData.changesPhotoUrls = details.fileList.map(item => item.url); |
|
|
|
const res = await postAddChangesRecord(submitData); |
|
|
|
const { code, data } = res.data; |
|
|
|
if (code !== 200) return; |
|
|
|
ElMessage.success('提交成功'); |
|
|
|
handleClose(); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.pageLoading = false; |
|
} |
|
}); |
|
}); |
|
}; |
|
|
|
/** 重置 */ |
|
const handleReset = () => { |
|
formRef.value.resetFields(); |
|
}; |
|
|
|
/** 查看图片 */ |
|
const handleShowImg = ({ row }) => { |
|
const { changesPhotoEntityList } = row; |
|
|
|
if (!changesPhotoEntityList || getObjType(changesPhotoEntityList) !== 'array') |
|
return ElMessage.warning('该异动信息没有图片'); |
|
|
|
details.imgList = changesPhotoEntityList.map(val => val.url) || []; |
|
|
|
console.log('details.imgList :>> ', details.imgList); |
|
details.popUpShow.showImgVisited = true; |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
// 标题 |
|
.header { |
|
font-size: 20px; |
|
font-weight: 600; |
|
color: #333333; |
|
// color: var(--el-color-primary); |
|
line-height: 22px; |
|
padding: 16px 24px; |
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
.title_info { |
|
color: #f00; |
|
margin-left: 30px; |
|
font-size: 14px; |
|
} |
|
} |
|
|
|
// 主体内容 |
|
.main { |
|
// color: var(--el-color-primary); |
|
padding: 0 24px; |
|
width: 100%; |
|
box-sizing: border-box; |
|
|
|
// 标题 |
|
.header { |
|
border: none; |
|
} |
|
|
|
// 信息 |
|
.info { |
|
font-size: 14px; |
|
margin: 0 48px; |
|
|
|
.info_title { |
|
font-size: 16px; |
|
font-weight: 600; |
|
color: #333333; |
|
line-height: 22px; |
|
} |
|
|
|
// 信息行 |
|
.info_row { |
|
display: flex; |
|
padding: 0 10px; |
|
flex-wrap: wrap; |
|
|
|
& > div { |
|
width: 25%; |
|
flex: none; |
|
box-sizing: border-box; |
|
padding: 5px 10px; |
|
|
|
.title { |
|
min-width: 90px; |
|
display: inline-block; |
|
} |
|
} |
|
} |
|
|
|
:deep(.el-form-item) { |
|
margin: 0; |
|
padding: 10px; |
|
width: 25%; |
|
box-sizing: border-box; |
|
|
|
.el-form-item__label { |
|
min-width: 120px; |
|
font-weight: bold; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.dialog_img { |
|
& > div { |
|
margin: 10px; |
|
} |
|
} |
|
|
|
// 底部站位 |
|
.footer { |
|
height: 60px; |
|
} |
|
|
|
// 底部按钮 |
|
.footer_container { |
|
position: fixed; |
|
bottom: 30px; |
|
left: 0; |
|
z-index: 10; |
|
width: 100%; |
|
} |
|
|
|
.algin_center { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.w100 { |
|
width: 100% !important; |
|
} |
|
|
|
:deep(.el-upload-dragger) { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
:deep(.el-input-number) { |
|
width: 100%; |
|
|
|
.el-input__inner { |
|
text-align: left !important; |
|
} |
|
} |
|
</style>
|
|
|