董国庆
2025-06-21 caaace44a0f0049b6a645d6e0a511af6adf7c1e0
laboratory/src/components/DynamicComponent/index.vue
@@ -36,7 +36,7 @@
                <!-- 图片类型显示 -->
                <template v-else-if="header.type === 'image'">
                  <img v-if="scope.row[header.name]" 
                       :src="scope.row[header.name]"
                       :src="getFullUrl(scope.row[header.name])"
                       alt="头像" 
                       class="table-image" />
                </template>
@@ -57,8 +57,10 @@
        </div>
        <!-- 文件上传 -->
        <div v-else-if="item.type == 'fileUpload'">
          <el-upload v-if="editable" action="#" :file-list="item.data.fileList"
            :on-change="(file, fileList) => handleFileChange(idx, fileList)" list-type="text">
          <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.fileList"
            :on-change="(file, fileList) => handleFileChange(idx, fileList)"
            :on-success="(res, file, fileList) => handleFileSuccess(res, file, fileList, idx)"
            list-type="text">
            <el-button size="small" icon="el-icon-upload2">点击上传</el-button>
          </el-upload>
          <div v-else>
@@ -70,11 +72,10 @@
        <!-- 图片上传 -->
        <div v-else-if="item.type == 'imageUpload'">
          <div class="image-upload-container">
            <el-upload v-if="editable" action="#" :file-list="item.data.imageList"
            <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.imageList"
              :on-change="(file, fileList) => handleImageChange(idx, fileList)"
              :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, idx)"
              :auto-upload="true"
              :http-request="() => { }"
              :before-upload="beforeImageUpload"
              list-type="picture-card"
              :on-preview="(file) => handlePreview(file, idx)"
@@ -85,8 +86,8 @@
            <div v-else class="image-preview">
              <el-image v-for="image in item.data.imageList"
                :key="image.uid"
                :src="image.url"
                :preview-src-list="item.data.imageList.map(img => img.url)"
                :src="getFullUrl(image.url)"
                :preview-src-list="item.data.imageList.map(img => getFullUrl(img.url))"
                class="preview-image" />
            </div>
            <div class="uploaf-notice">支持.jpg .png格式</div>
@@ -116,6 +117,8 @@
import Table from "../Table/index.vue";
import addTableHeader from "./addTableHeader.vue";
import addTableData from "./addTableData.vue";
import apiConfig from '../../utils/baseurl'
import { customUploadRequest, getFullUrl } from '@/utils/utils'
export default {
  name: "DynamicComponent",
@@ -150,6 +153,7 @@
  },
  data() {
    return {
      apiConfig:apiConfig,
      showAddDialog: false,
      components: [],
      tableHeaderDialog: {
@@ -439,34 +443,27 @@
    },
    handleFileChange(idx, fileList) {
      if (!this.editable) return;
      fileList = fileList.map(file => {
        if (!file.url) {
          file.url = 'https://picsum.photos/200/200';
        }
        if (!file.name) {
          file.name = '默认文件.txt';
        }
        return file;
      });
      // 只做 fileList 同步
      this.components[idx].data.fileList = fileList;
      this.emitUpdate();
    },
    handleFileSuccess(res, file, fileList, idx) {
      // 上传成功后设置真实 url
      file.url = res.data.url;
      this.components[idx].data.fileList = fileList;
      this.emitUpdate();
    },
    handleImageChange(idx, fileList) {
      if (!this.editable) return;
      fileList = fileList.map(file => {
        if (!file.url) {
          file.url = 'https://picsum.photos/200/200';
        }
        return file;
      });
      // 只做 imageList 同步
      this.components[idx].data.imageList = fileList;
      this.emitUpdate();
    },
    handleImageSuccess(res, file, fileList, idx) {
      file.url = 'https://picsum.photos/200/200';
      // 上传成功后设置真实 url
      file.url = res.data.url;
      this.components[idx].data.imageList = fileList;
      this.emitUpdate();
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
@@ -487,7 +484,7 @@
      // 使用el-image的preview-src-list实现预览
      // 这里直接用Element的图片预览能力,实际上el-upload会自动处理
      // 但如果你想自定义弹窗,可以用如下代码:
      this.imagePreviewUrl = file.url;
      this.imagePreviewUrl = this.getFullUrl(file.url);
      this.imagePreviewVisible = true;
    },
    emitUpdate() {
@@ -496,6 +493,8 @@
      this.$emit('update:dataSource', updatedComponents);
    },
  },
  computed: {
  },
};
</script>