From 8fcae32d5d75973c51c3f48c0e1797217059da1d Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期六, 21 六月 2025 18:07:45 +0800
Subject: [PATCH] 修改组件
---
laboratory/src/components/DynamicComponent/addTableData.vue | 100 ++++++++++++++++++++++++++++++--------------------
1 files changed, 60 insertions(+), 40 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/addTableData.vue b/laboratory/src/components/DynamicComponent/addTableData.vue
index 22fcbb7..1a30653 100644
--- a/laboratory/src/components/DynamicComponent/addTableData.vue
+++ b/laboratory/src/components/DynamicComponent/addTableData.vue
@@ -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,
};
// 为用户类型字段添加用户完整信息
@@ -380,32 +391,41 @@
}
});
},
- 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) {
+ console.log('res, file, fileList',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