4 changed files with 690 additions and 13 deletions
@ -1,9 +1,630 @@
|
||||
<template> |
||||
<div> |
||||
|
||||
</div> |
||||
<basic-container> |
||||
<!-- 标题 --> |
||||
<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"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 对账单总金额 (元) : </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 开单时间: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 发站: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 到站: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 品牌: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 发货单位: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 收货单位: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 收货人: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 服务类型: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 运单类型: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 订单信息 --> |
||||
<div class="fwb mt20 info_title"> |
||||
<span class="title"> 订单号: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 件数: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 重量: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 体积: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 干线费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 提货费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 仓储费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 仓储管理费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 仓储分拣费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 仓储操作 / 装卸费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 配送费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 配送操作 / 装卸费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 配送分货费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 配送上楼费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 配送平移费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 安装费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 保价费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 申明价值: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 其它费用: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 回扣: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 第三方操作费 --> |
||||
<div class="fwb info_title mt20"> |
||||
<span class="title"> 第三方操作费: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 支付方式: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 付款方式: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 现付: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 到付: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 月结: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 回付: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 内部结算: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 代收货款: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="info_row mt10"> |
||||
<div> |
||||
<span class="title"> 代收货款已收: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 售后: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
|
||||
<div> |
||||
<span class="title"> 异动金额: </span> |
||||
<span class="text"> 1231231231 </span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 异动信息 --> |
||||
<div> |
||||
<!-- 标题 --> |
||||
<div class="header algin_center"> |
||||
<span> 异动信息 </span> |
||||
<span class="title_info"> |
||||
(此处填写要登记的异动的金额,整数表示异动增款;负数表示异动减款) |
||||
</span> |
||||
</div> |
||||
|
||||
<!-- 表单信息 --> |
||||
<el-form class="info" inline> |
||||
<div> |
||||
<el-form-item label="异动类型:"> |
||||
<el-radio-group v-model="form.type"> |
||||
<el-radio label="waybill">运单</el-radio> |
||||
<el-radio label="orderCode">订单号</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="异动类型:"> |
||||
<el-radio-group v-model="form.type"> |
||||
<el-radio label="waybill">运单</el-radio> |
||||
<el-radio label="orderCode">订单号</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</div> |
||||
|
||||
<el-form-item label="干线费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="提货费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="仓储费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="仓储管理费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="仓储分拣费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="仓储操作 / 装卸费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="配送费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="配送操作 / 装卸费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="配送分货费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="配送上楼费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="配送平移费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="安装费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="报价费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="申明价值:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="其它费用:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="回扣:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="第三方操作费:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="支付方式:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="付款方式:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="现付:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="到付:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="月结:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="回付:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="内部结算:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="代收货款:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="代收货款已收:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="异动时间:"> |
||||
<el-input /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="结算网点:"> |
||||
<el-input /> |
||||
</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.form.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" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</basic-container> |
||||
|
||||
<el-dialog v-model="details.popUpShow.imgVisited"> |
||||
<img w-full :src="details.dialogImageUrl" alt="图片加载失败" /> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup lang="ts"></script> |
||||
<script setup lang="ts"> |
||||
import { ref, reactive, toRefs } from 'vue'; |
||||
import type { UploadUserFile, UploadProps } from 'element-plus'; |
||||
|
||||
const details = reactive({ |
||||
form: { |
||||
/** 异动类型 */ |
||||
type: 'waybill', |
||||
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, |
||||
}, |
||||
dialogImageUrl: '', |
||||
data: [], |
||||
loadingObj: { |
||||
list: false, |
||||
}, |
||||
columnList: [ |
||||
{ |
||||
prop: '', |
||||
label: '序号', |
||||
type: 12, |
||||
values: '', |
||||
width: 55, |
||||
fixed: false, |
||||
}, |
||||
{ |
||||
prop: 'waybillNo', |
||||
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: 'waybillNo', |
||||
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: 'waybillNo', |
||||
label: '异动操作时间', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
const { form } = toRefs(details); |
||||
|
||||
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => { |
||||
details.dialogImageUrl = uploadFile.url!; |
||||
details.popUpShow.imgVisited = true; |
||||
}; |
||||
|
||||
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { |
||||
console.log(uploadFile, uploadFiles); |
||||
}; |
||||
</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; |
||||
|
||||
& > div { |
||||
width: 25%; |
||||
flex: none; |
||||
box-sizing: border-box; |
||||
padding: 0 10px; |
||||
} |
||||
} |
||||
|
||||
:deep(.el-form-item) { |
||||
margin: 0; |
||||
padding: 10px; |
||||
width: 25%; |
||||
box-sizing: border-box; |
||||
|
||||
.el-form-item__label { |
||||
min-width: 120px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.algin_center { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.w100 { |
||||
width: 100% !important; |
||||
} |
||||
|
||||
<style scoped lang="scss"></style> |
||||
:deep(.el-upload-dragger) { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
</style> |
||||
|
Loading…
Reference in new issue