修改中台和组件引入

董国庆

2025-06-20 e169d66efe2eebc580ba405f1c984914c422ce0a

 laboratory/src/components/DynamicComponent/index.vue

@@ -72,14 +72,22 @@
          <div class="image-upload-container">
            <el-upload v-if="editable" action="#" :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-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)"
              class="image-uploader">
              <i class="el-icon-plus"></i>
              <div class="upload-text">上传图片</div>
            </el-upload>
            <div v-else class="image-preview">
              <img v-for="image in item.data.imageList" :key="image.uid" :src="image.url" class="preview-image" />
              <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)"
                class="preview-image" />
            </div>
            <div class="uploaf-notice">支持.jpg .png格式</div>
          </div>
@@ -95,6 +103,10 @@
    <addTableData  :visible.sync="rowDialog.visible" :headerList="rowDialog.headers"
      :editData="rowDialog.form" :isEdit="rowDialog.isEdit" @success="confirmAddRow">
    </addTableData>

    <el-dialog :visible.sync="imagePreviewVisible" width="auto" top="10vh" :show-close="true" v-if="imagePreviewUrl">
      <img :src="imagePreviewUrl" style="max-width:80vw;max-height:70vh;display:block;margin:auto;" />
    </el-dialog>
  </div>
</template>

@@ -155,6 +167,8 @@
      },
      headerList: [],
      defaultImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 默认图片地址
      imagePreviewVisible: false,
      imagePreviewUrl: '',
    };
  },
  watch: {
@@ -469,6 +483,13 @@
      }
      return true;
    },
    handlePreview(file, idx) {
      // 使用el-image的preview-src-list实现预览
      // 这里直接用Element的图片预览能力，实际上el-upload会自动处理
      // 但如果你想自定义弹窗，可以用如下代码：
      this.imagePreviewUrl = file.url;
      this.imagePreviewVisible = true;
    },
    emitUpdate() {
      // 先创建新对象，这有助于触发更新
      const updatedComponents = JSON.parse(JSON.stringify(this.components));