From b3f4499793fa7b21f6c5d1e099d6ed170ecbe47a Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期四, 15 五月 2025 16:38:45 +0800
Subject: [PATCH] 实验方案管理
---
laboratory/src/components/DynamicComponent/index.vue | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 102 insertions(+), 10 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/index.vue b/laboratory/src/components/DynamicComponent/index.vue
index cd198b6..8faa19a 100644
--- a/laboratory/src/components/DynamicComponent/index.vue
+++ b/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,
- updateTime: new Date().toLocaleString()
- };
+ // 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>
--
Gitblit v1.7.1