修改弹窗ui和客户反馈

董国庆

8 天以前 0c9660562a03191d44fc779a889d3da0dc624b6d

 laboratory/src/components/DynamicComponent/index.vue

@@ -16,7 +16,7 @@
      <div v-for="(item, idx) in components" :key="item.id" class="dynamic-component">
        <!-- 富文本 -->
        <div v-if="item.type == 'richText'">
          <AiEditor :ref="`editor_${item.id}`" :value="item.data.content" height="200px" :readOnly="!editable"
          <AiEditor :ref="`editor_${item.id}`" :value="item.data.content" height="400px" :readOnly="!editable"
            placeholder="请输入内容..." :disabled="!editable" />
        </div>
        <!-- 自定义表格 -->
@@ -34,10 +34,25 @@
                <template v-if="header.type === 'user'">
                  {{ getUserDisplayText(header.name, scope.row) }}
                </template>
                <!-- 图片类型显示 -->
                <!-- 图片类型显示，兼容数组和字符串 -->
                <template v-else-if="header.type === 'image'">
                  <img v-if="scope.row[header.name]" :src="getFullUrl(scope.row[header.name])" alt="头像"
                    class="table-image" />
                  <template v-if="Array.isArray(scope.row[header.name])">
                    <el-image
                      v-for="(img, i) in scope.row[header.name]"
                      :key="i"
                      :src="getFullUrl(img)"
                      :preview-src-list="scope.row[header.name].map(getFullUrl)"
                      class="table-image"
                    />
                  </template>
                  <template v-else>
                    <el-image
                      v-if="scope.row[header.name]"
                      :src="getFullUrl(scope.row[header.name])"
                      :preview-src-list="[getFullUrl(scope.row[header.name])]"
                      class="table-image"
                    />
                  </template>
                </template>
                <!-- 其他类型 -->
                <template v-else>
@@ -63,8 +78,8 @@
            <el-button size="small" icon="el-icon-upload2">点击上传</el-button>
          </el-upload>
          <div v-else>
            <div v-for="file in item.data.fileList" :key="file.uid" class="file-list-item">
              {{ file.name }}
            <div v-for="file in item.data.fileList" :key="file.uid" class="file-list-item" >
              <span style="color: #409EFF; cursor: pointer;" @click="downloadFileByUrl(file.url, file.name)">{{ file.name }}</span>
            </div>
          </div>
        </div>
@@ -116,6 +131,7 @@
import addTableData from "./addTableData.vue";
import apiConfig from '../../utils/baseurl'
import { getFullUrl } from '@/utils/utils'
import { downloadFileByUrl } from '@/utils/utils'

export default {
  name: "DynamicComponent",
@@ -195,9 +211,15 @@
                break;
              case 'fileUpload':
                componentData = { fileList: component.data };
                console.log('component.data component.data',component.data)
                break;
              case 'imageUpload':
                componentData = { imageList: component.data };
                componentData = { imageList: component.data.map(item=>{
                  return {
                    ...item,
                    url: getFullUrl(item.url),
                  }
                }) };
                break;
            }
            return {
@@ -214,6 +236,8 @@
    }
  },
  methods: {
    getFullUrl,
    downloadFileByUrl,
    getUserDisplayText(fieldName, rowData) {
      // 检查是否有对应的userInfo数据
      const userInfoKey = `${fieldName}_userInfo`;
@@ -299,6 +323,7 @@
            break;
          case 'fileUpload':
            componentData = component.data.fileList.map(file => {
              console.log('fileUpload fileUpload fileUpload',file)
              if (file.url && file.url.startsWith(prefix)) {
                return { ...file, url: file.url.substring(prefix.length) };
              }
@@ -332,8 +357,6 @@
      const processedData = { ...formData };

      // 调试输出
      console.log('添加/编辑行数据:', processedData, 'isEdit', isEdit);

      if (isEdit) {
        // Vue无法检测到对象或数组深层属性的变化，使用Vue.set来确保响应式
        this.$set(
@@ -351,7 +374,6 @@
          updateTime: new Date().toLocaleString()
        });
      }
      console.log('this.components', this.components);

      // 手动触发组件更新
      this.$forceUpdate();
@@ -480,16 +502,16 @@
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      // const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      // if (!isLt2M) {
      //   this.$message.error('上传图片大小不能超过 2MB!');
      //   return false;
      // }
      this.imagePreviewVisible = true;
      return true;
    },
@@ -505,7 +527,6 @@
      const updatedComponents = JSON.parse(JSON.stringify(this.components));
      this.$emit('update:dataSource', updatedComponents);
    },
    getFullUrl,
  },
  computed: {
  },