From 0c9660562a03191d44fc779a889d3da0dc624b6d Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 25 七月 2025 10:47:19 +0800
Subject: [PATCH] 修改弹窗ui和客户反馈
---
laboratory/src/components/DynamicComponent/index.vue | 53 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 37 insertions(+), 16 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/index.vue b/laboratory/src/components/DynamicComponent/index.vue
index b085e78..218e9c9 100644
--- a/laboratory/src/components/DynamicComponent/index.vue
+++ b/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: {
},
--
Gitblit v1.7.1