feat(用户主页): 重构表单提交逻辑并添加日期格式化功能
- 从路由中提取 wecom_id 作为全局变量 - 新增 formatDate 工具函数用于日期格式化 - 重构 handleSubmit 方法以匹配新接口字段要求 - 优化文件上传逻辑,移除调试代码
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user