实验方案管理

董国庆

7 天以前 b3f4499793fa7b21f6c5d1e099d6ed170ecbe47a

 laboratory/src/components/DynamicComponent/index.vue

@@ -25,9 +25,27 @@
            <el-button size="mini"  @click="showTableHeaderDialog(idx)">添加表头</el-button>
            <el-button size="mini" type="primary" @click="showAddRowDialog(idx, item.data.headers)">添加数据</el-button>
          </div>
          <Table :data="item.data.rows" :total="null" :height="null" class="groupTable">
          <Table :data="item.data.rows" :total="null" :height="null" class="groupTable" :key="item.id + '_' + JSON.stringify(item.data.rows).length">
            <el-table-column v-for="(header, hidx) in item.data.headers" :key="hidx" :label="header.name"
              :prop="header.name" />
              :prop="header.name">
              <template slot-scope="scope">
                <!-- 用户类型显示 -->
                <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="scope.row[header.name]" 
                       alt="头像" 
                       class="table-image" />
                </template>
                <!-- 其他类型 -->
                <template v-else>
                  {{ scope.row[header.name] }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="updateTime" min-width="180"></el-table-column>
            <el-table-column  label="操作" min-width="200" v-if="dialogCanEdit">
              <template slot-scope="scope">
@@ -136,6 +154,7 @@
        form: {},
      },
      headerList: [],
      defaultImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 默认图片地址
    };
  },
  watch: {
@@ -176,6 +195,49 @@
    }
  },
  methods: {
    getUserDisplayText(fieldName, rowData) {
      // 检查是否有对应的userInfo数据
      const userInfoKey = `${fieldName}_userInfo`;
      
      // 如果没有rowData或fieldName，直接返回空字符串
      if (!rowData || !fieldName) {
        return '';
      }
      
      // 情况1: 有_userInfo数据
      if (rowData[userInfoKey] && Array.isArray(rowData[userInfoKey])) {
        return rowData[userInfoKey].map(user => user.label || '').join(', ');
      }
      
      // 情况2: 只有用户ID数组
      if (Array.isArray(rowData[fieldName])) {
        // 使用participants查找用户信息
        return rowData[fieldName].map(userId => {
          const user = this.participants.find(p => p.userId === userId);
          return user ? (user.nickName || user.userName || userId) : userId;
        }).join(', ');
      }
      
      // 情况3: 已经是字符串（可能是之前格式化过的）
      if (typeof rowData[fieldName] === 'string') {
        return rowData[fieldName];
      }
      
      // 默认返回空字符串
      return '';
    },
    formatUserNames(userArray) {
      if (!userArray || !Array.isArray(userArray) || userArray.length === 0) {
        return '';
      }
      
      // 查找参与者列表中的用户，获取昵称并用逗号拼接
      const userNames = userArray.map(userId => {
        const user = this.participants.find(p => p.userId === userId);
        return user ? user.nickName : userId;
      });
      return userNames.join(', ');
    },
    addComponent(type) {
      if (!this.editable) return;

@@ -232,23 +294,44 @@
      this.$emit('submit', data);
    },
    confirmAddRow(formData) {
      if (!this.editable) return;
      // if (!this.editable) return;

      const { idx, rowIndex, isEdit } = this.rowDialog;
      
      // 处理formData中的数据，保证用户信息的完整性
      const processedData = { ...formData };
      
      // 调试输出
      console.log('添加/编辑行数据:', processedData,'isEdit',isEdit);
      
      if (isEdit) {
        this.components[idx].data.rows[rowIndex] = {
          ...formData,
        // Vue无法检测到对象或数组深层属性的变化，使用Vue.set来确保响应式
        this.$set(
          this.components[idx].data.rows, 
          rowIndex, 
          {
            ...processedData,
          updateTime: new Date().toLocaleString()
        };
          }
        );
      } else {
        // 使用数组方法push会被Vue检测到
        this.components[idx].data.rows.push({
          ...formData,
          ...processedData,
          updateTime: new Date().toLocaleString()
        });
      }
      console.log('this.components',this.components);
      
      // 手动触发组件更新
      this.$forceUpdate();
      // 延迟发送事件，确保数据已更新
      this.$nextTick(() => {
        this.emitUpdate();
      });
      
      this.rowDialog.visible = false;
      this.rowDialog.form = {};
      this.emitUpdate();
    },
    removeComponent(idx) {
      if (!this.editable) return;
@@ -387,7 +470,9 @@
      return true;
    },
    emitUpdate() {
      this.$emit('update:dataSource', this.components);
      // 先创建新对象，这有助于触发更新
      const updatedComponents = JSON.parse(JSON.stringify(this.components));
      this.$emit('update:dataSource', updatedComponents);
    },
  },
};
@@ -519,4 +604,11 @@
  object-fit: cover;
  border-radius: 8px;
}

.table-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}
</style>