|
|
|
|
@ -7,7 +7,7 @@ |
|
|
|
|
<el-form :model="searchForm" class="search-form" @submit.prevent> |
|
|
|
|
<el-row gutter="15"> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item label="订单编号" label-width="140px" prop="code"> |
|
|
|
|
<el-form-item label="订单编号:" label-width="140px" prop="code"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="searchForm.code" |
|
|
|
|
placeholder="请输入" |
|
|
|
|
@ -16,7 +16,7 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item label="订单名称" label-width="140px" prop="name"> |
|
|
|
|
<el-form-item label="订单名称:" label-width="140px" prop="name"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="searchForm.name" |
|
|
|
|
placeholder="请输入" |
|
|
|
|
@ -26,7 +26,7 @@ |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item |
|
|
|
|
label="客户名称" |
|
|
|
|
label="客户名称:" |
|
|
|
|
label-width="140px" |
|
|
|
|
prop="customerName" |
|
|
|
|
> |
|
|
|
|
@ -46,7 +46,7 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item label="状态" label-width="140px" prop="status"> |
|
|
|
|
<el-form-item label="状态:" label-width="140px" prop="status"> |
|
|
|
|
<el-select |
|
|
|
|
v-model="searchForm.status" |
|
|
|
|
placeholder="请选择" |
|
|
|
|
@ -67,7 +67,7 @@ |
|
|
|
|
<el-row :gutter="15"> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item |
|
|
|
|
label="交货日期" |
|
|
|
|
label="交货日期:" |
|
|
|
|
label-width="140px" |
|
|
|
|
prop="deliveryDate" |
|
|
|
|
> |
|
|
|
|
@ -148,33 +148,43 @@ |
|
|
|
|
<el-table-column label="客户公司名称" prop="customerName" width="220" /> |
|
|
|
|
<el-table-column label="交货日期" prop="deliveryDate" width="160" /> |
|
|
|
|
<!-- 销售价：千位分隔符格式化 --> |
|
|
|
|
<el-table-column label="销售价（元）" width="200"> |
|
|
|
|
<el-table-column label="销售价（元）" width="220"> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
{{ formatPrice(scope.row.sellingPrice) }} |
|
|
|
|
<span class="text-right"> |
|
|
|
|
{{ formatPrice(scope.row.sellingPrice) }} |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<!-- 分成金额：千位分隔符格式化 --> |
|
|
|
|
<el-table-column label="分成金额（元）" width="220"> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
{{ formatPrice(scope.row.splitPrice) }} |
|
|
|
|
<span class="text-right"> |
|
|
|
|
{{ formatPrice(scope.row.splitPrice) }} |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<!-- 合同价：千位分隔符格式化 --> |
|
|
|
|
<el-table-column label="合同价" width="150"> |
|
|
|
|
<el-table-column label="合同价" width="220"> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
{{ formatPrice(scope.row.contractPrice) }} |
|
|
|
|
<span class="text-right"> |
|
|
|
|
{{ formatPrice(scope.row.contractPrice) }} |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<!-- 已汇金额：千位分隔符格式化 --> |
|
|
|
|
<el-table-column label="已汇金额" width="150"> |
|
|
|
|
<el-table-column label="已汇金额" width="220"> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
{{ formatPrice(scope.row.remittedAmount) }} |
|
|
|
|
<span class="text-right"> |
|
|
|
|
{{ formatPrice(scope.row.remittedAmount) }} |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<!-- 待汇金额：千位分隔符格式化 --> |
|
|
|
|
<el-table-column label="待汇金额" width="150"> |
|
|
|
|
<el-table-column label="待汇金额" width="220"> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
{{ formatPrice(scope.row.unremittedAmount) }} |
|
|
|
|
<span class="text-right"> |
|
|
|
|
{{ formatPrice(scope.row.unremittedAmount) }} |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="货币单位" width="160"> |
|
|
|
|
@ -306,12 +316,15 @@ |
|
|
|
|
:visible.sync="uploadDialogVisible" |
|
|
|
|
width="500px" |
|
|
|
|
append-to-body |
|
|
|
|
class="water-bill-upload-dialog" |
|
|
|
|
> |
|
|
|
|
<avue-form |
|
|
|
|
ref="uploadFormRef" |
|
|
|
|
:option="uploadFormOption" |
|
|
|
|
v-model="uploadForm" |
|
|
|
|
@submit="handleUploadSubmit" |
|
|
|
|
:upload-before="uploadBefore" |
|
|
|
|
:upload-error="uploadError" |
|
|
|
|
></avue-form> |
|
|
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
|
@ -400,7 +413,6 @@ export default { |
|
|
|
|
}, |
|
|
|
|
monetaryUnitList: [], |
|
|
|
|
uploadFormOption: { |
|
|
|
|
// 禁用Avue自带的提交按钮（用自定义底部按钮） |
|
|
|
|
submitBtn: false, |
|
|
|
|
emptyBtn: false, |
|
|
|
|
labelWidth: 140, |
|
|
|
|
@ -421,33 +433,34 @@ export default { |
|
|
|
|
{ |
|
|
|
|
label: '上传文件', |
|
|
|
|
type: 'upload', |
|
|
|
|
listType: 'picture-img', |
|
|
|
|
listType: 'picture-img', |
|
|
|
|
accept: 'image/png, image/jpeg', |
|
|
|
|
propsHttp: { |
|
|
|
|
res: 'data', |
|
|
|
|
url: 'link', |
|
|
|
|
}, |
|
|
|
|
canvasOption: { |
|
|
|
|
text: ' ', |
|
|
|
|
ratio: 0.1 |
|
|
|
|
}, |
|
|
|
|
// canvasOption: { |
|
|
|
|
// text: ' ', |
|
|
|
|
// ratio: 0.1 |
|
|
|
|
// }, |
|
|
|
|
action: '/api/blade-resource/oss/endpoint/put-file-attach', |
|
|
|
|
tip: '只能上传jpg/png图片，且不超过500kb', |
|
|
|
|
span: 24, |
|
|
|
|
tip: '只能上传jpg/png图片,且不超过3M', |
|
|
|
|
fileSize: 3072, |
|
|
|
|
// fileType: 'img', |
|
|
|
|
// loadText: '图片上传中，请稍等', |
|
|
|
|
span: 24, |
|
|
|
|
limit: 1, |
|
|
|
|
row: true, |
|
|
|
|
|
|
|
|
|
prop: 'url', |
|
|
|
|
rules: [ |
|
|
|
|
{ required: true, message: "请上传文件", trigger: "blur" }, |
|
|
|
|
|
|
|
|
|
{ validator: (rule, value, callback) => this.validateFile(value, callback), trigger: "change" } |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
// Avue Form绑定的表单数据 |
|
|
|
|
uploadForm: { |
|
|
|
|
name: "", |
|
|
|
|
url: "" |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
created() {}, |
|
|
|
|
@ -475,6 +488,9 @@ export default { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 🌟 新增：金额格式化函数（千位分隔符 + 两位小数） |
|
|
|
|
formatPrice(price) { |
|
|
|
|
// 处理空值、0、非数字情况 |
|
|
|
|
@ -622,13 +638,71 @@ export default { |
|
|
|
|
this.resetUpload(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 新增：文件超出数量限制 |
|
|
|
|
handleExceed(files, fileList) { |
|
|
|
|
// this.$message.warning(`最多只能上传1个文件`); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
uploadBefore(file, done, loading, column) { |
|
|
|
|
console.log("上传前校验文件：", "done", done, "loading:",loading); |
|
|
|
|
if (!file) { |
|
|
|
|
this.$message.error("未选择文件"); |
|
|
|
|
done(false); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 校验文件类型 |
|
|
|
|
const isJPG = file.type === 'image/jpeg'; |
|
|
|
|
const isPNG = file.type === 'image/png'; |
|
|
|
|
if (!isJPG && !isPNG) { |
|
|
|
|
this.$message.error('只能上传 JPG 或 PNG 图片!'); |
|
|
|
|
this.uploadForm.url = '' |
|
|
|
|
done(false); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 校验文件大小（3MB） |
|
|
|
|
const isLt3M = file.size / 1024 / 1024 < 3; |
|
|
|
|
console.log("文件大小(字节)：", file.size, "是否小于3M：", isLt3M); |
|
|
|
|
if (!isLt3M) { |
|
|
|
|
this.$message.error('图片大小不能超过 3MB!'); |
|
|
|
|
done(false); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 移除文件 |
|
|
|
|
done(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
uploadError(error, column) { |
|
|
|
|
console.error('上传失败详情：', error); |
|
|
|
|
this.uploadForm.url = '' |
|
|
|
|
// 区分不同错误类型，提示更精准 |
|
|
|
|
if (error === 'size') { |
|
|
|
|
this.$message.error('图片大小不能超过3MB！'); |
|
|
|
|
} else if (error === 'type') { |
|
|
|
|
this.$message.error('仅支持上传JPG/PNG格式图片！'); |
|
|
|
|
} else if (error && error.message) { |
|
|
|
|
this.$message.error('上传失败：' + error.message); |
|
|
|
|
} else { |
|
|
|
|
this.$message.error('上传失败，请重试'); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// uploadRemove(file, column) { |
|
|
|
|
// console.log("移除文件：", file); |
|
|
|
|
// this.uploadForm.url = ''; |
|
|
|
|
// this.$message.success('文件已移除'); |
|
|
|
|
// }, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// uploadExceed(limit, files, fileList, column) { |
|
|
|
|
// this.$message.warning(`最多只能上传 ${limit} 个文件`); |
|
|
|
|
// }, |
|
|
|
|
// 自定义文件验证器 |
|
|
|
|
validateFile(value, callback) { |
|
|
|
|
if (!value) { |
|
|
|
|
callback(new Error('请上传文件')); |
|
|
|
|
} else { |
|
|
|
|
callback(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 重置上传表单 |
|
|
|
|
resetUpload() { |
|
|
|
|
@ -944,67 +1018,28 @@ export default { |
|
|
|
|
// color: #ccc; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
} |
|
|
|
|
.text-right { |
|
|
|
|
display: block; |
|
|
|
|
text-align: right; |
|
|
|
|
padding-right: 10px; |
|
|
|
|
} |
|
|
|
|
::v-deep .avue-form .el-form-item .el-upload__tip { |
|
|
|
|
font-size: 16px !important; |
|
|
|
|
// font-weight: 500; // 可选：加粗文字 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
// 上传水单样式 |
|
|
|
|
.avatar-uploader-wrap { |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
} |
|
|
|
|
.avatar-uploader .el-upload { |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
border: 1px dashed #d9d9d9; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
background: #fbfdff; |
|
|
|
|
} |
|
|
|
|
.avatar-uploader .el-upload:hover { |
|
|
|
|
border-color: #409eff; |
|
|
|
|
} |
|
|
|
|
.upload-icon-container { |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
.avatar-uploader-icon { |
|
|
|
|
font-size: 28px; |
|
|
|
|
color: #8c939d; |
|
|
|
|
} |
|
|
|
|
.avatar-container { |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
position: relative; // 新增：为删除按钮定位 |
|
|
|
|
} |
|
|
|
|
.avatar { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: block; |
|
|
|
|
// object-fit: cover; // 图片自适应 |
|
|
|
|
} |
|
|
|
|
// 新增：删除按钮样式 |
|
|
|
|
.avatar-delete { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
width: 30px; |
|
|
|
|
height: 30px; |
|
|
|
|
line-height: 30px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
|
color: #fff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
display: none; // 默认隐藏 |
|
|
|
|
border-radius: 0 6px 0 0; |
|
|
|
|
} |
|
|
|
|
.avatar-container:hover .avatar-delete { |
|
|
|
|
display: block; // 悬浮显示 |
|
|
|
|
} |
|
|
|
|
.water-bill-upload-dialog { |
|
|
|
|
|
|
|
|
|
.el-dialog__body { |
|
|
|
|
padding: 15px 20px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 上传提示文字样式 |
|
|
|
|
.el-upload__tip { |
|
|
|
|
font-size: 1vw !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
