董国庆
2025-07-01 4ca375b2e3dae98d6ececc1b7b421a12f3fa8a26
laboratory/src/components/DynamicComponent/addTableData.vue
@@ -57,15 +57,16 @@
                    class="upload-demo"
                    :action="uploadUrl"
                    :headers="uploadHeaders"
                    :file-list="imageList"
                    :file-list="imageListMap[header.name] || []"
                    :auto-upload="true"
                    list-type="picture-card"
                    :beforeUpload="beforeImageUpload"
                    :on-change="handleImageChange"
                    :on-remove="handleImageRemove"
                    :on-success="handleImageSuccess"
                    :before-upload="beforeImageUpload"
                    :on-change="(file, fileList) => handleImageChange(file, fileList, header.name)"
                    :on-remove="(file, fileList) => handleImageRemove(file, fileList, header.name)"
                    :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, header.name)"
                    :on-preview="handlePreview"
                    :disabled="!checkEditPermission(header)"
                    multiple
                  >
                    <div
                      style="
@@ -216,6 +217,7 @@
      uploadHeaders: {
        Authorization: sessionStorage.getItem("token") || "",
      },
      imageListMap: {},
    };
  },
  computed: {
@@ -318,6 +320,9 @@
        this.headerList.forEach((header) => {
          if (header.type === "user") {
            formData[header.name] = [];
          } else if (header.type === "image") {
            formData[header.name] = [];
            this.$set(this.imageListMap, header.name, []);
          } else {
            formData[header.name] = "";
          }
@@ -340,6 +345,9 @@
        this.headerList.forEach((header) => {
          if (header.type === "user") {
            formData[header.name] = data[header.name] || [];
          } else if (header.type === "image") {
            formData[header.name] = Array.isArray(data[header.name]) ? data[header.name] : (data[header.name] ? [data[header.name]] : []);
            this.$set(this.imageListMap, header.name, (formData[header.name] || []).map(url => ({ name: "image", url: getFullUrl(url), status: "success" })));
          } else {
            formData[header.name] = data[header.name] || "";
          }
@@ -440,34 +448,25 @@
      }
      return true;
    },
    handleImageChange(file, fileList) {
      this.imageList = fileList;
      const imageHeader = this.headerList.find((h) => h.type === "image");
      if (imageHeader) {
        this.$refs.form.validateField(imageHeader.name);
      }
    handleImageChange(file, fileList, fieldName) {
      this.$set(this.imageListMap, fieldName, fileList);
      // 校验
      this.$refs.form && this.$refs.form.validateField(fieldName);
    },
    handleImageSuccess(res, file, fileList) {
    handleImageSuccess(res, file, fileList, fieldName) {
      const url = res.msg;
      file.url = getFullUrl(url);
      const imageHeader = this.headerList.find((h) => h.type === "image");
      if (imageHeader) {
        this.$set(this.form, imageHeader.name, url);
        this.$refs.form.validateField(imageHeader.name);
      if (!Array.isArray(this.form[fieldName])) {
        this.$set(this.form, fieldName, []);
      }
      this.imageList = fileList.map((f) => {
        if (f.uid === file.uid) {
          return file;
        }
        return f;
      });
      // 只保留 fileList 中的 url
      this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
      this.$set(this.imageListMap, fieldName, fileList);
      this.$refs.form && this.$refs.form.validateField(fieldName);
    },
    handleImageRemove(file, fileList) {
      const imageHeader = this.headerList.find((h) => h.type === "image");
      if (imageHeader) {
        this.$set(this.form, imageHeader.name, "");
      }
      this.imageList = fileList;
    handleImageRemove(file, fileList, fieldName) {
      this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
      this.$set(this.imageListMap, fieldName, fileList);
    },
    handlePreview(file) {
      this.imagePreviewUrl = file.url;