feat(用户主页): 重构表单提交逻辑并添加日期格式化功能

- 从路由中提取 wecom_id 作为全局变量
- 新增 formatDate 工具函数用于日期格式化
- 重构 handleSubmit 方法以匹配新接口字段要求
- 优化文件上传逻辑,移除调试代码
This commit is contained in:
2026-03-18 18:43:31 +08:00
parent c4048c81bc
commit f5498f017f

View File

@@ -237,6 +237,9 @@ const route = useRoute()
const router = useRouter()
const formRef = ref(null)
// 从路由中获取 wecom_id后续提交时需要
const wecomId = route.query.wecom_id || 'wmcr-ECwAAzKclEfIKNcVgOdxD-TcqLg'
// 响应式表单数据
const formData = reactive({
analystSupervisor: '',
@@ -267,6 +270,21 @@ const rules = {
transactionDate: { required: true, type: 'number', message: '请选择日期', trigger: ['blur', 'change'] }
}
/**
* 格式化日期:将时间戳转换为 YYYY-MM-DD 格式
* @param {number} timestamp - The date timestamp.
* @returns {string|null} - Formatted date string or null.
*/
const formatDate = (timestamp) => {
if (!timestamp) return null;
const date = new Date(timestamp);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
};
/**
* 核心:通用文件上传逻辑
* 直接把后端返回的数据挂载到文件对象的 rawResponse 字段,完全隔离前端生成的 id/fullPath
@@ -276,26 +294,24 @@ const handleCustomUpload = async ({ file, onFinish, onError, onProgress }, type)
const uploadData = new FormData()
uploadData.append('file', file.file)
// 注意:这里的上传接口地址可能需要根据您的实际情况修改
const response = await http.post('/v1/material/upload', uploadData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (p) => onProgress({ percent: Math.ceil((p.loaded / p.total) * 100) })
})
if (response.success && response) {
// 【重点】把请求回来的整个 data 存起来,不理会 UI 生成的字段
file.rawResponse = response
file.object_name = response.object_name
// 下面两行是给 UI 看的,保证能回显图片和显示“完成”状态
file.url = response.url
file.status = 'finished'
if (type == 'paymentFileList') {
if (type === 'paymentFileList') {
formData.paymentFileList.push(file)
} else if (type == 'documentFileList') {
} else if (type === 'documentFileList') {
formData.documentFileList.push(file)
} else if (type == 'signatureFileList') {
} else if (type === 'signatureFileList') {
formData.signatureFileList.push(file)
}
console.log('Updated documentFileList:', formData)
message.success('上传成功')
onFinish()
} else {
@@ -313,7 +329,7 @@ const handleCustomUpload = async ({ file, onFinish, onError, onProgress }, type)
*/
const initData = async () => {
try {
const wecomId = route.query.wecom_id || 'wmcr-ECwAAzKclEfIKNcVgOdxD-TcqLg'
// 注意:这里的获取信息接口地址可能需要根据您的实际情况修改
const res = await http.get('/v1/customer/get_customers_info', { wecom_id: wecomId })
// 1. 回显基础字段
@@ -326,14 +342,13 @@ const initData = async () => {
if (res.dealAmount) formData.transactionAmount = Number(res.dealAmount)
if (res.dealDate) formData.transactionDate = new Date(res.dealDate).getTime()
// 2. 回显付款截图:将已有的 object_name 和 url 封装进 rawResponse
// 2. 回显付款截图
if (res.proofOfPayment && res.proofOfPayment_urls) {
const paymentFiles = res.proofOfPayment.map((objName, index) => ({
id: objName, // UI 需要一个 ID
id: objName,
name: `凭证-${index + 1}`,
status: 'finished',
url: res.proofOfPayment_urls[index],
// 【重点】手动构造一个 rawResponse确保和上传后的结构一致
rawResponse: {
object_name: objName,
url: res.proofOfPayment_urls[index],
@@ -360,52 +375,56 @@ const handlePreview = (file) => {
if (url) window.open(url)
}
// 提交表单
// ==============================================================================
// 核心改动: 更新提交逻辑以匹配新接口
// ==============================================================================
const handleSubmit = () => {
formRef.value?.validate(async (errors) => {
if (!errors) {
// 【核心逻辑】只提取 rawResponse 里的数据,扔掉前端生成的 id, fullPath, type 等
// 1. 构建完全符合后端接口要求的 payload
const submitPayload = {
// 1. 提取基础文本字段
analystSupervisor: formData.analystSupervisor,
analystDepartment: formData.analystDepartment,
analystName: formData.analystName,
parentName: formData.parentName,
parentPhone: formData.parentPhone,
parentIdCard: formData.parentIdCard,
transactionDate: formData.transactionDate,
transactionAmount: formData.transactionAmount,
guidancePeriod: formData.guidancePeriod,
analystNotes: formData.analystNotes,
wecom_id: wecomId,
analyst_supervisor: formData.analystSupervisor,
analyst_department: formData.analystDepartment,
analyst_name: formData.analystName,
parent_name: formData.parentName,
parent_phone: formData.parentPhone,
parent_id_card: formData.parentIdCard,
// 格式化日期和金额
transaction_date: formatDate(formData.transactionDate),
transaction_amount: String(formData.transactionAmount || ''),
guidance_period: formData.guidancePeriod,
// 提取文件 object_name
payment_object_names: formData.paymentFileList.map(f => f.object_name).filter(Boolean),
signature_object_name: formData.signatureFileList[0]?.object_name || null,
attachment_object_name: formData.documentFileList[0]?.object_name || null,
// analystNotes 似乎不在接口中,如果需要提交请后端添加字段
// assignee_name 和 assignee_phone 表单中未提供,暂不提交
};
// 2. 提取纯净的文件数据(仅包含请求回来的 data 对象)
// 单个文件取第 0 项的 rawResponse
document: formData.documentFileList[0]?.rawResponse || null,
// 多个文件用 map 提取数组
proofOfPayment: formData.paymentFileList.map(f => f.rawResponse).filter(Boolean),
// 签名文件
signature: formData.signatureFileList[0]?.rawResponse || null
}
console.log('--- 准备提交给后端的最终纯净数据 ---')
console.log(submitPayload)
console.log('--- 准备提交给后端的最终纯净数据 ---', submitPayload);
try {
// await http.post('/v1/material/submit_all', submitPayload)
message.success('材料已正式提交成功!')
// 2. 调用新的提交接口
// 注意:请确保 http util 配置了正确的 baseURL, 例如 http://192.168.15.115:5636/api
await http.post('/v1/material/submit', submitPayload);
message.success('材料已正式提交成功!');
// 可选:提交成功后跳转或重置表单
// router.push('/success-page');
} catch (err) {
message.error('提交失败,请联系管理员')
console.error('提交失败:', err);
message.error('提交失败,请联系管理员');
}
} else {
message.error('请完善必填信息')
message.error('请完善必填信息');
}
})
}
});
};
const logout = () => router.push('/login')
const handleCancel = () => router.back()
</script>
<style scoped>