From 97f625ff89bee0daa53a0f4a71be86a1135479d1 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期六, 28 六月 2025 15:19:09 +0800
Subject: [PATCH] 修改bug
---
laboratory/src/components/DynamicComponent/addTableData.vue | 102 ++++++++++++++++++++++++++++++---------------------
1 files changed, 60 insertions(+), 42 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/addTableData.vue b/laboratory/src/components/DynamicComponent/addTableData.vue
index 22fcbb7..804db57 100644
--- a/laboratory/src/components/DynamicComponent/addTableData.vue
+++ b/laboratory/src/components/DynamicComponent/addTableData.vue
@@ -1,6 +1,6 @@
<template>
<el-dialog
- title="添加表数据"
+ :title="isEdit? '编辑表数据' : '添加表数据'"
:visible.sync="dialogVisible"
width="60%"
:close-on-click-modal="false"
@@ -53,16 +53,18 @@
>
<el-upload
class="upload-demo"
- action="#"
- :file-list="spectrumList"
- :auto-upload="false"
+ :action="uploadUrl"
+ :headers="uploadHeaders"
+ :file-list="imageList"
+ :auto-upload="true"
list-type="picture-card"
- :on-change="handleSpectrumChange"
- :on-remove="handleSpectrumRemove"
+ :on-change="handleImageChange"
+ :on-remove="handleImageRemove"
+ :on-success="handleImageSuccess"
+ :on-preview="handlePreview"
:disabled="!checkEditPermission(header)"
>
<i class="el-icon-plus"></i>
- <!-- <div slot="tip" class="el-upload__tip">暂未连接服务器，使用默认图片</div> -->
</el-upload>
</el-form-item>
<el-form-item
@@ -140,11 +142,16 @@
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
+ <el-dialog :visible.sync="imagePreviewVisible" append-to-body>
+ <img width="100%" :src="imagePreviewUrl" alt="" />
+ </el-dialog>
</el-dialog>
</template>
<script>
import { listByRole } from './service';
+import { getFullUrl } from '@/utils/utils';
+import apiConfig from '@/utils/baseurl';
export default {
name: "AddDialog",
@@ -173,9 +180,15 @@
form: {},
rules: {},
photoList: [],
- spectrumList: [],
+ imageList: [],
defaultImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 默认图片地址
- userOptions: []
+ userOptions: [],
+ imagePreviewVisible: false,
+ imagePreviewUrl: '',
+ uploadUrl: apiConfig.imgUrl,
+ uploadHeaders: {
+ Authorization: sessionStorage.getItem('token') || ''
+ }
};
},
computed: {
@@ -318,14 +331,13 @@
}
// 设置图谱列表
- if (data.spectrums && data.spectrums.length) {
- this.spectrumList = data.spectrums.map((spectrum) => ({
- name: spectrum.name,
- url: spectrum.url,
- status: "success",
- }));
- } else {
- this.spectrumList = [];
+ this.imageList = [];
+ const imageHeader = this.headerList.find(h => h.type === 'image');
+ if (imageHeader && data[imageHeader.name]) {
+ this.imageList = [{
+ name: 'image',
+ url: getFullUrl(data[imageHeader.name]),
+ }];
}
// 重置表单校验状态
@@ -346,7 +358,7 @@
this.dialogVisible = false;
this.$refs.form?.resetFields();
this.photoList = [];
- this.spectrumList = [];
+ this.imageList = [];
this.initFormData();
},
handleSubmit() {
@@ -356,7 +368,6 @@
const submitData = {
...this.form,
photos: this.photoList,
- spectrums: this.spectrumList,
};
// 为用户类型字段添加用户完整信息
@@ -372,7 +383,6 @@
});
}
- console.log(submitData,'修改的数据')
this.$emit("success", submitData);
this.handleClose();
} else {
@@ -380,32 +390,40 @@
}
});
},
- handlePhotoChange(file, fileList) {
- this.photoList = fileList;
- this.$refs.form.validateField("photos");
- },
- handleSpectrumChange(file, fileList) {
- // 使用默认图片替代实际上传
- this.spectrumList = [{
- name: '默认图片.jpg',
- url: this.defaultImageUrl,
- status: 'success'
- }];
-
- // 同时更新form中对应的字段值以通过表单验证
+ handleImageChange(file, fileList) {
+ this.imageList = fileList;
const imageHeader = this.headerList.find(h => h.type === 'image');
- if (imageHeader && imageHeader.name) {
- // 保存图片URL，这样在表格中可以直接使用
- this.$set(this.form, imageHeader.name, this.defaultImageUrl);
- console.log('设置图片字段:', imageHeader.name, this.defaultImageUrl);
+ if (imageHeader) {
+ this.$refs.form.validateField(imageHeader.name);
}
-
- this.$refs.form.validateField("spectrums");
},
- handleSpectrumRemove(file) {
- this.spectrumList = [];
+ handleImageSuccess(res, file, fileList) {
+ const url = res.msg;
+ file.url = getFullUrl(url);
+ const imageHeader = this.headerList.find(h => h.type === 'image');
+ if (imageHeader) {
+ this.$set(this.form, imageHeader.name, url);
+ this.$refs.form.validateField(imageHeader.name);
+ }
+ this.imageList = fileList.map(f => {
+ if (f.uid === file.uid) {
+ return file;
+ }
+ return f;
+ });
},
-
+ handleImageRemove(file, fileList) {
+ const imageHeader = this.headerList.find(h => h.type === 'image');
+ if (imageHeader) {
+ this.$set(this.form, imageHeader.name, '');
+ }
+ this.imageList = fileList;
+ },
+ handlePreview(file) {
+ this.imagePreviewUrl = file.url;
+ this.imagePreviewVisible = true;
+ },
+ getFullUrl,
},
mounted() {
// 获取用户列表数据
--
Gitblit v1.7.1