修改模板

peng

2025-10-16 fe90a52e90e41e6916988c50caa3c63540d588d3

修改模板

 seller/src/views/order/order/editTemplateModal.vue

@@ -86,12 +86,12 @@
      </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>
@@ -124,6 +124,11 @@
    orderSn: {
      type: String,
      default: ""
    },
    // 添加userCheckTemplates属性
    userCheckTemplates: {
      type: Array,
      default: () => []
    }
  },
  data() {
@@ -195,8 +200,12 @@
          // 处理模板自定义标题字段的回显
          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 {
                // 初始化表单值（如果没有默认值）
@@ -213,11 +222,29 @@
              // 查找选中图片的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 {
            // 如果没有模板图片，清空选中状态
@@ -239,6 +266,25 @@
      } 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
@@ -282,7 +328,8 @@
      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 = '';
        }
@@ -326,7 +373,7 @@
        console.log('上传文件返回结果:', res); // 添加调试日志
        if (res.code === 200) {
          // 上传成功，设置表单值
          // 确保res.data是字符串类型
          // 修改这里：只保存文件名或相对路径，而不是完整路径
          let fileKey = '';
          if (typeof res.data === 'string') {
            fileKey = res.data;
@@ -342,7 +389,21 @@
            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("图片上传成功");
          
          // 强制更新视图以确保图片预览正确显示
@@ -373,7 +434,8 @@
        sn: this.orderSn,
        templateName: this.form.templateName,
        chooseImageId: this.selectedImageId,
        chooseImage: this.selectedImageUrl, // 添加选中图片URL
        // 修改这里：处理chooseImage，只保存相对路径
        chooseImage: this.processImageUrl(this.selectedImageUrl),
        templateForm: []
      };

@@ -384,13 +446,35 @@
            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;
    },

    // 确定按钮
@@ -523,4 +607,4 @@
  border-color: #57a3f3;
  color: #57a3f3;
}
</style>
</style>

 seller/src/views/order/order/orderDetail.vue

@@ -18,8 +18,8 @@
          v-if="allowOperation.ship && logisticsType != 'SHUNFENG'">打印电子面单</Button>
        <Button @click="modifyRemark" type="primary">添加备注</Button>
        <!-- 将编辑模板按钮移到这里 -->
        <Button v-if="orderInfo.userCheckTemplates && orderInfo.userCheckTemplates.length > 0" 
                @click="editTemplateInfo(orderInfo.userCheckTemplates[0].templateId, sn)" 
        <Button v-if="orderInfo.userCheckTemplates && orderInfo.userCheckTemplates.length > 0"
                @click="editTemplateInfo(orderInfo.userCheckTemplates[0].templateId, sn)"
                type="primary">编辑模板</Button>
      </div>
    </Card>
@@ -169,7 +169,7 @@
                  <div class="div-item-right">
                    <img
                      v-if="item.chooseImg"
                      :src="item.chooseImg"
                      :src="getImageUrl(item.chooseImg)"
                      alt="选择的图片"
                      class="selected-img"
                      style="max-width: 200px; max-height: 150px;"
@@ -192,7 +192,7 @@
                <!-- 正则判断：content 以 http/https 开头 → 渲染图片；否则渲染文本 -->
                <img
                  v-if="isUrl(item.content)"
                  :src="item.content"
                  :src="getImageUrl(item.content)"
                  alt="内容图片"
                  class="content-img"
                  style="max-width: 200px; max-height: 150px;"
@@ -648,6 +648,7 @@
      v-model="editTemplateModalVisible"
      :template-id="currentTemplateId"
      :order-sn="sn"
      :user-check-templates="orderInfo.userCheckTemplates"
      @success="handleTemplateEditSuccess"
      @cancel="editTemplateModalVisible = false"
    />
@@ -658,6 +659,7 @@
import * as API_Order from "@/api/order";
import * as API_Logistics from "@/api/logistics";
import * as RegExp from "@/libs/RegExp.js";
import { getSts } from "@/api/file";

import multipleMap from "@/views/my-components/map/multiple-map";
import EditTemplateModal from "./editTemplateModal.vue";
@@ -685,6 +687,7 @@
      },
      submitLoading: false, // 添加或编辑提交状态
      logisticsType: 'KUAIDINIAO', //物流类型
      endpoint: '', // 添加endpoint变量用于存储STS endpoint

      someJSONdata: '',
      faceSheetForm: {
@@ -1026,7 +1029,9 @@
      packageTraceList: [],
      // 添加模板编辑弹窗相关数据
      editTemplateModalVisible: false,
      currentTemplateId: ""
      currentTemplateId: "",
      // 用于传递userCheckTemplates数据给子组件
      userCheckTemplates: []
    };
  },
  methods: {
@@ -1040,6 +1045,31 @@
      // 5. \.(jpg|jpeg|png|gif|bmp|webp)$ ：仅匹配常见图片后缀，忽略大小写（i标志）
      const imgReg = /^https?:\/\/([\w-]+\.)+[a-zA-Z]{2,}(\/[\w-./?%&=]*)*\.(jpg|jpeg|png|gif|bmp|webp)$/i;
      return imgReg.test(str);
    },
    // 获取图片URL（使用STS获取的endpoint）
    getImageUrl(fileKey) {
      // 确保fileKey是字符串类型
      if (!fileKey || typeof fileKey !== 'string') {
        console.warn('fileKey is not a valid string:', fileKey);
        return ''; // 返回空字符串或默认图片
      }

      // 安全检查startsWith方法是否存在
      if (fileKey.startsWith && typeof fileKey.startsWith === 'function' &&
          (fileKey.startsWith("http://") || fileKey.startsWith("https://"))) {
        return fileKey;
      }

      // 如果有endpoint配置，使用endpoint拼接URL
      if (this.endpoint) {
        // 确保fileKey不以/开头，endpoint不以/结尾
        const cleanEndpoint = this.endpoint.replace(/\/$/, '');
        const cleanFileKey = fileKey.replace(/^\//, '');
        return `${cleanEndpoint}/${cleanFileKey}`;
      }

      // 否则返回fileKey，让组件自己处理
      return fileKey;
    },
    // 选中
    selectGroupShipGoodsMethods (selected) {
@@ -1436,6 +1466,18 @@
      })
    },

    // 获取STS信息
    // async getStsInfo() {
    //   try {
    //     const stsRes = await getSts();
    //     if (stsRes.success) {
    //       this.endpoint = stsRes.data.endpoint;
    //     }
    //   } catch (error) {
    //     console.error('获取STS信息失败:', error);
    //   }
    // },

    // 编辑模板信息
    editTemplateInfo(templateId, orderSn) {
      console.log("调用editTemplateInfo，参数:", {
@@ -1443,6 +1485,8 @@
        orderSn: orderSn
      });
      this.currentTemplateId = templateId;
      // 更新userCheckTemplates数据
      this.userCheckTemplates = this.orderInfo.userCheckTemplates || [];
      this.editTemplateModalVisible = true;
    },

@@ -1453,6 +1497,14 @@
      this.$Message.success("模板信息已更新");
      // 刷新订单详情页面数据
      this.getDataDetail();
    },

    getStsInfo() {
      getSts().then(res => {
        if (res.code==200) {
          this.endpoint = res.data.endpoint;
        }
      });
    }
  },
  mounted () {
@@ -1460,6 +1512,7 @@
    this.getDataDetail();
    this.getLogisticsSetting();
    this.getOrderPackage();
    this.getStsInfo(); // 添加这行来获取STS信息
  },
  // 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
  beforeRouteLeave (to, from, next) {