| | |
| | | </div> |
| | | |
| | | <!-- 调试信息 --> |
| | | <!-- <details style="margin-top: 20px; border: 1px solid #eee; padding: 10px;">--> |
| | | <!-- <summary>调试信息</summary>--> |
| | | <!-- <pre>{{ JSON.stringify(templateData, null, 2) }}</pre>--> |
| | | <!-- <p>选中的图片ID: {{ selectedImageId }}</p>--> |
| | | <!-- <p>表单值: {{ JSON.stringify(formValues, null, 2) }}</p>--> |
| | | <!-- </details>--> |
| | | <!-- <details style="margin-top: 20px; border: 1px solid #eee; padding: 10px;"> |
| | | <summary>调试信息</summary> |
| | | <pre>{{ JSON.stringify(templateData, null, 2) }}</pre> |
| | | <p>选中的图片ID: {{ selectedImageId }}</p> |
| | | <p>表单值: {{ JSON.stringify(formValues, null, 2) }}</p> |
| | | </details>--> |
| | | </Form> |
| | | |
| | | <div v-else> |
| | |
| | | orderSn: { |
| | | type: String, |
| | | default: "" |
| | | }, |
| | | // 添加userCheckTemplates属性 |
| | | userCheckTemplates: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | // 处理模板自定义标题字段的回显 |
| | | if (res.data.templateConstomizeTitles) { |
| | | res.data.templateConstomizeTitles.forEach(item => { |
| | | // 回显已有的值 |
| | | if (item.value !== undefined && item.value !== null) { |
| | | // 回显已有的值 - 从userCheckTemplates中获取对应subId的值 |
| | | const userTemplate = this.getUserTemplateBySubId(item.id); |
| | | if (userTemplate && userTemplate.content !== undefined && userTemplate.content !== null) { |
| | | this.$set(this.formValues, item.id, userTemplate.content); |
| | | } else if (item.value !== undefined && item.value !== null) { |
| | | // 如果没有找到userCheckTemplates中的值,则使用模板默认值 |
| | | this.$set(this.formValues, item.id, item.value); |
| | | } else { |
| | | // 初始化表单值(如果没有默认值) |
| | |
| | | // 查找选中图片的URL并保存 |
| | | const selectedImage = res.data.templateImgs.find(img => img.id === res.data.chooseImageId); |
| | | if (selectedImage) { |
| | | this.selectedImageUrl = selectedImage.imgUrl || ''; |
| | | // 修改这里:处理图片URL,只保存相对路径 |
| | | this.selectedImageUrl = this.processImageUrl(selectedImage.imgUrl || ''); |
| | | } |
| | | } else { |
| | | this.selectedImageId = res.data.templateImgs[0].id; |
| | | this.selectedImageUrl = res.data.templateImgs[0].imgUrl || ''; |
| | | // 尝试从userCheckTemplates中获取选中的图片 |
| | | const userTemplate = this.getUserTemplateByType('IMAGE'); |
| | | if (userTemplate && userTemplate.chooseImg) { |
| | | // 查找对应的图片ID |
| | | const matchedImage = res.data.templateImgs.find(img => img.imgUrl === userTemplate.chooseImg); |
| | | if (matchedImage) { |
| | | this.selectedImageId = matchedImage.id; |
| | | // 修改这里:处理图片URL,只保存相对路径 |
| | | this.selectedImageUrl = this.processImageUrl(matchedImage.imgUrl || ''); |
| | | } else { |
| | | this.selectedImageId = res.data.templateImgs[0].id; |
| | | // 修改这里:处理图片URL,只保存相对路径 |
| | | this.selectedImageUrl = this.processImageUrl(res.data.templateImgs[0].imgUrl || ''); |
| | | } |
| | | } else { |
| | | this.selectedImageId = res.data.templateImgs[0].id; |
| | | // 修改这里:处理图片URL,只保存相对路径 |
| | | this.selectedImageUrl = this.processImageUrl(res.data.templateImgs[0].imgUrl || ''); |
| | | } |
| | | } |
| | | } else { |
| | | // 如果没有模板图片,清空选中状态 |
| | |
| | | } finally { |
| | | this.loading = false; |
| | | } |
| | | }, |
| | | |
| | | // 根据subId获取userCheckTemplates中的对应项 |
| | | getUserTemplateBySubId(subId) { |
| | | // 从props中获取userCheckTemplates数据 |
| | | if (this.userCheckTemplates && this.userCheckTemplates.length > 0) { |
| | | // 查找subId匹配的项 |
| | | return this.userCheckTemplates.find(template => template.subId === subId); |
| | | } |
| | | return null; |
| | | }, |
| | | |
| | | // 根据类型获取userCheckTemplates中的对应项 |
| | | getUserTemplateByType(contentType) { |
| | | if (this.userCheckTemplates && this.userCheckTemplates.length > 0) { |
| | | // 查找contentType匹配的项 |
| | | return this.userCheckTemplates.find(template => template.contentType === contentType); |
| | | } |
| | | return null; |
| | | }, |
| | | |
| | | // 获取图片URL |
| | |
| | | if (this.templateData && this.templateData.templateImgs) { |
| | | const selectedImage = this.templateData.templateImgs.find(img => img.id === imageId); |
| | | if (selectedImage) { |
| | | this.selectedImageUrl = selectedImage.imgUrl || ''; |
| | | // 修改这里:处理图片URL,只保存相对路径 |
| | | this.selectedImageUrl = this.processImageUrl(selectedImage.imgUrl || ''); |
| | | } else { |
| | | this.selectedImageUrl = ''; |
| | | } |
| | |
| | | console.log('上传文件返回结果:', res); // 添加调试日志 |
| | | if (res.code === 200) { |
| | | // 上传成功,设置表单值 |
| | | // 确保res.data是字符串类型 |
| | | // 修改这里:只保存文件名或相对路径,而不是完整路径 |
| | | let fileKey = ''; |
| | | if (typeof res.data === 'string') { |
| | | fileKey = res.data; |
| | |
| | | fileKey = String(fileKey); |
| | | } |
| | | |
| | | // 修改这里:处理文件路径,只保留文件名部分 |
| | | // 如果是完整URL,则只取路径部分;否则保持原样 |
| | | if (fileKey.startsWith('http://') || fileKey.startsWith('https://')) { |
| | | // 提取URL中的路径部分 |
| | | try { |
| | | const urlObj = new URL(fileKey); |
| | | fileKey = urlObj.pathname.substring(1); // 去掉开头的斜杠 |
| | | } catch (e) { |
| | | // 如果URL解析失败,保持原样 |
| | | console.warn('Failed to parse URL:', fileKey); |
| | | } |
| | | } |
| | | |
| | | this.$set(this.formValues, fieldId, fileKey); |
| | | |
| | | this.$Message.success("图片上传成功"); |
| | | |
| | | // 强制更新视图以确保图片预览正确显示 |
| | |
| | | sn: this.orderSn, |
| | | templateName: this.form.templateName, |
| | | chooseImageId: this.selectedImageId, |
| | | chooseImage: this.selectedImageUrl, // 添加选中图片URL |
| | | // 修改这里:处理chooseImage,只保存相对路径 |
| | | chooseImage: this.processImageUrl(this.selectedImageUrl), |
| | | templateForm: [] |
| | | }; |
| | | |
| | |
| | | id: item.id, |
| | | templateTitle: item.templateTitle, |
| | | contentType: item.contentType, |
| | | value: this.formValues[item.id] || "" |
| | | // 修改这里:处理value,只保存相对路径 |
| | | value: this.processImageUrl(this.formValues[item.id]) || "" |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | console.log("提交参数:", params); |
| | | return params; |
| | | }, |
| | | |
| | | // 处理图片URL,只保留相对路径 |
| | | processImageUrl(url) { |
| | | if (!url || typeof url !== 'string') { |
| | | return url; |
| | | } |
| | | |
| | | // 如果是完整URL,则只取路径部分;否则保持原样 |
| | | if (url.startsWith('http://') || url.startsWith('https://')) { |
| | | try { |
| | | const urlObj = new URL(url); |
| | | return urlObj.pathname.substring(1); // 去掉开头的斜杠 |
| | | } catch (e) { |
| | | // 如果URL解析失败,保持原样 |
| | | console.warn('Failed to parse URL:', url); |
| | | return url; |
| | | } |
| | | } |
| | | |
| | | return url; |
| | | }, |
| | | |
| | | // 确定按钮 |
| | |
| | | border-color: #57a3f3; |
| | | color: #57a3f3; |
| | | } |
| | | </style> |
| | | </style> |