From 9fe11a3b1c7ca926e2f4e97e36c2911c290a0ab2 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期一, 30 六月 2025 14:23:54 +0800
Subject: [PATCH] 修改bug
---
laboratory/src/components/DynamicComponent/addTableData.vue | 270 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 163 insertions(+), 107 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/addTableData.vue b/laboratory/src/components/DynamicComponent/addTableData.vue
index 804db57..500f311 100644
--- a/laboratory/src/components/DynamicComponent/addTableData.vue
+++ b/laboratory/src/components/DynamicComponent/addTableData.vue
@@ -1,6 +1,6 @@
<template>
<el-dialog
- :title="isEdit? '编辑表数据' : '添加表数据'"
+ :title="isEdit ? '编辑表数据' : '添加表数据'"
:visible.sync="dialogVisible"
width="60%"
:close-on-click-modal="false"
@@ -29,9 +29,10 @@
:label="header.name"
:prop="header.name"
:rules="{
- required: header.required === true || header.required === 'true',
+ required:
+ header.required === true || header.required === 'true',
message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
+ trigger: ['blur', 'change'],
}"
v-if="header.type == 'text'"
>
@@ -45,10 +46,11 @@
:label="header.name"
:prop="header.name"
:rules="{
- required: header.required === true || header.required === 'true',
- message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
+ required:
+ header.required === true || header.required === 'true',
+ trigger: ['blur', 'change'],
}"
+ class="image-form-item"
v-if="header.type == 'image'"
>
<el-upload
@@ -58,22 +60,33 @@
:file-list="imageList"
:auto-upload="true"
list-type="picture-card"
+ :beforeUpload="beforeImageUpload"
:on-change="handleImageChange"
:on-remove="handleImageRemove"
:on-success="handleImageSuccess"
:on-preview="handlePreview"
:disabled="!checkEditPermission(header)"
>
- <i class="el-icon-plus"></i>
+ <div
+ style="
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ "
+ >
+ <i class="el-icon-plus"></i>
+ </div>
+ <div slot="tip" class="el-upload__tip">只支持.jpg格式</div>
</el-upload>
</el-form-item>
<el-form-item
:label="header.name"
:prop="header.name"
:rules="{
- required: header.required === true || header.required === 'true',
+ required:
+ header.required === true || header.required === 'true',
message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
+ trigger: ['blur', 'change'],
}"
v-if="header.type == 'date'"
>
@@ -84,26 +97,30 @@
value-format="yyyy-MM-dd HH:mm:ss"
:disabled="!checkEditPermission(header)"
:picker-options="{
- shortcuts: [{
- text: '今天',
- onClick(picker) {
- picker.$emit('pick', new Date());
- }
- }, {
- text: '昨天',
- onClick(picker) {
- const date = new Date();
- date.setTime(date.getTime() - 3600 * 1000 * 24);
- picker.$emit('pick', date);
- }
- }, {
- text: '一周前',
- onClick(picker) {
- const date = new Date();
- date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
- picker.$emit('pick', date);
- }
- }]
+ shortcuts: [
+ {
+ text: '今天',
+ onClick(picker) {
+ picker.$emit('pick', new Date());
+ },
+ },
+ {
+ text: '昨天',
+ onClick(picker) {
+ const date = new Date();
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
+ picker.$emit('pick', date);
+ },
+ },
+ {
+ text: '一周前',
+ onClick(picker) {
+ const date = new Date();
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit('pick', date);
+ },
+ },
+ ],
}"
/>
</el-form-item>
@@ -111,9 +128,10 @@
:label="header.name"
:prop="header.name"
:rules="{
- required: header.required === true || header.required === 'true',
+ required:
+ header.required === true || header.required === 'true',
message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
+ trigger: ['blur', 'change'],
}"
v-if="header.type == 'user'"
>
@@ -147,11 +165,11 @@
</el-dialog>
</el-dialog>
</template>
-
+
<script>
-import { listByRole } from './service';
-import { getFullUrl } from '@/utils/utils';
-import apiConfig from '@/utils/baseurl';
+import { listByRole } from "./service";
+import { getFullUrl } from "@/utils/utils";
+import apiConfig from "@/utils/baseurl";
export default {
name: "AddDialog",
@@ -171,24 +189,33 @@
isEdit: {
type: Boolean,
default: false,
- }
+ },
},
data() {
return {
isIPad: /iPad/i.test(navigator.userAgent),
- showHeaderList: [{"name":"sd","type":"text","required":true,"message":"请输入表头名称","role":[]}],
+ showHeaderList: [
+ {
+ name: "sd",
+ type: "text",
+ required: true,
+ message: "请输入表头名称",
+ role: [],
+ },
+ ],
form: {},
rules: {},
photoList: [],
imageList: [],
- defaultImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 默认图片地址
+ defaultImageUrl:
+ "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // 默认图片地址
userOptions: [],
imagePreviewVisible: false,
- imagePreviewUrl: '',
+ imagePreviewUrl: "",
uploadUrl: apiConfig.imgUrl,
uploadHeaders: {
- Authorization: sessionStorage.getItem('token') || ''
- }
+ Authorization: sessionStorage.getItem("token") || "",
+ },
};
},
computed: {
@@ -201,9 +228,9 @@
},
},
currentUserId() {
- const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
return userInfo.userId;
- }
+ },
},
watch: {
visible: {
@@ -238,18 +265,20 @@
},
methods: {
getUserOptions() {
- listByRole().then(res => {
- if (res) {
- this.userOptions = res.map(user => ({
- value: user.userId,
- label: user.nickName || user.userName
- }));
- } else {
- this.$message.error('获取用户列表失败');
- }
- }).catch(err => {
- console.error('获取用户列表失败', err);
- });
+ listByRole()
+ .then((res) => {
+ if (res) {
+ this.userOptions = res.map((user) => ({
+ value: user.userId,
+ label: user.nickName || user.userName,
+ }));
+ } else {
+ this.$message.error("获取用户列表失败");
+ }
+ })
+ .catch((err) => {
+ console.error("获取用户列表失败", err);
+ });
},
checkEditPermission(header) {
if (!header.role || !Array.isArray(header.role)) {
@@ -261,15 +290,18 @@
// 初始化校验规则
const rules = {};
if (this.headerList && this.headerList.length) {
- this.headerList.forEach(header => {
+ this.headerList.forEach((header) => {
// 处理required可能是字符串的情况
- const isRequired = header.required === true || header.required === 'true';
+ const isRequired =
+ header.required === true || header.required === "true";
if (isRequired) {
- rules[header.name] = [{
- required: true,
- message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
- }];
+ rules[header.name] = [
+ {
+ required: true,
+ message: header.message || `请输入${header.name}`,
+ trigger: ["blur", "change"],
+ },
+ ];
}
});
}
@@ -280,20 +312,20 @@
const formData = {
updateTime: this.formatDateTime(new Date()),
};
-
+
// 根据headerList初始化表单数据
if (this.headerList && this.headerList.length) {
- this.headerList.forEach(header => {
- if (header.type === 'user') {
+ this.headerList.forEach((header) => {
+ if (header.type === "user") {
formData[header.name] = [];
} else {
- formData[header.name] = '';
+ formData[header.name] = "";
}
});
}
-
+
// 使用Vue.set确保响应式
- Object.keys(formData).forEach(key => {
+ Object.keys(formData).forEach((key) => {
this.$set(this.form, key, formData[key]);
});
},
@@ -305,17 +337,17 @@
// 根据headerList设置表单数据
if (this.headerList && this.headerList.length) {
- this.headerList.forEach(header => {
- if (header.type === 'user') {
+ this.headerList.forEach((header) => {
+ if (header.type === "user") {
formData[header.name] = data[header.name] || [];
} else {
- formData[header.name] = data[header.name] || '';
+ formData[header.name] = data[header.name] || "";
}
});
}
// 使用Vue.set确保响应式
- Object.keys(formData).forEach(key => {
+ Object.keys(formData).forEach((key) => {
this.$set(this.form, key, formData[key]);
});
@@ -332,12 +364,14 @@
// 设置图谱列表
this.imageList = [];
- const imageHeader = this.headerList.find(h => h.type === 'image');
+ const imageHeader = this.headerList.find((h) => h.type === "image");
if (imageHeader && data[imageHeader.name]) {
- this.imageList = [{
- name: 'image',
- url: getFullUrl(data[imageHeader.name]),
- }];
+ this.imageList = [
+ {
+ name: "image",
+ url: getFullUrl(data[imageHeader.name]),
+ },
+ ];
}
// 重置表单校验状态
@@ -347,11 +381,11 @@
},
formatDateTime(date) {
const year = date.getFullYear();
- const month = String(date.getMonth() + 1).padStart(2, '0');
- const day = String(date.getDate()).padStart(2, '0');
- const hours = String(date.getHours()).padStart(2, '0');
- const minutes = String(date.getMinutes()).padStart(2, '0');
- const seconds = String(date.getSeconds()).padStart(2, '0');
+ const month = String(date.getMonth() + 1).padStart(2, "0");
+ const day = String(date.getDate()).padStart(2, "0");
+ const hours = String(date.getHours()).padStart(2, "0");
+ const minutes = String(date.getMinutes()).padStart(2, "0");
+ const seconds = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
handleClose() {
@@ -362,37 +396,53 @@
this.initFormData();
},
handleSubmit() {
-
this.$refs.form.validate((valid) => {
if (valid) {
const submitData = {
...this.form,
photos: this.photoList,
};
-
+
// 为用户类型字段添加用户完整信息
if (this.headerList && this.headerList.length) {
- this.headerList.forEach(header => {
- if (header.type === 'user' && Array.isArray(submitData[header.name])) {
+ this.headerList.forEach((header) => {
+ if (
+ header.type === "user" &&
+ Array.isArray(submitData[header.name])
+ ) {
// 为每个用户类型字段添加userInfo属性，包含用户完整信息
- submitData[`${header.name}_userInfo`] = submitData[header.name].map(userId => {
- const userInfo = this.userOptions.find(user => user.value === userId);
+ submitData[`${header.name}_userInfo`] = submitData[
+ header.name
+ ].map((userId) => {
+ const userInfo = this.userOptions.find(
+ (user) => user.value === userId
+ );
return userInfo ? userInfo : { value: userId, label: userId };
});
}
});
}
-
+
this.$emit("success", submitData);
this.handleClose();
} else {
- this.$message.error('请填写必填项');
+ this.$message.error("请填写必填项");
}
});
},
+ beforeImageUpload(file) {
+ const isJPG = file.type === "image/jpeg";
+ // const isLt2M = file.size / 1024 / 1024 < 2;
+
+ if (!isJPG) {
+ this.$message.error("上传图片只能是 JPG 格式!");
+ return false;
+ }
+ return true;
+ },
handleImageChange(file, fileList) {
this.imageList = fileList;
- const imageHeader = this.headerList.find(h => h.type === 'image');
+ const imageHeader = this.headerList.find((h) => h.type === "image");
if (imageHeader) {
this.$refs.form.validateField(imageHeader.name);
}
@@ -400,12 +450,12 @@
handleImageSuccess(res, file, fileList) {
const url = res.msg;
file.url = getFullUrl(url);
- const imageHeader = this.headerList.find(h => h.type === 'image');
+ 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 => {
+ this.imageList = fileList.map((f) => {
if (f.uid === file.uid) {
return file;
}
@@ -413,9 +463,9 @@
});
},
handleImageRemove(file, fileList) {
- const imageHeader = this.headerList.find(h => h.type === 'image');
+ const imageHeader = this.headerList.find((h) => h.type === "image");
if (imageHeader) {
- this.$set(this.form, imageHeader.name, '');
+ this.$set(this.form, imageHeader.name, "");
}
this.imageList = fileList;
},
@@ -431,7 +481,7 @@
},
};
</script>
-
+
<style scoped lang="less">
::v-deep .el-dialog__body {
padding: 0;
@@ -480,7 +530,7 @@
background: #f5f7fa;
}
}
- .el-form-item::after{
+ .el-form-item::after {
height: 10px !important;
}
}
@@ -506,26 +556,26 @@
height: 120px;
line-height: 120px;
}
-
+
.el-upload-list--picture-card {
display: flex;
flex-wrap: wrap;
gap: 8px;
-
+
.el-upload-list__item {
width: 120px;
height: 120px;
margin: 0;
}
}
-
+
// 让上传按钮始终显示在列表最后
.el-upload--picture-card {
order: 9999;
margin: 0;
}
}
-
+
// 包裹容器也使用flex布局
display: flex;
flex-wrap: wrap;
@@ -577,11 +627,17 @@
background-color: #f5f7fa;
}
}
- .el-upload__tip {
- color: #909399;
- font-size: 12px;
- margin-top: 8px;
- }
}
}
-</style>
\ No newline at end of file
+.el-upload__tip {
+ color: #909399;
+ font-size: 12px;
+ margin-top: 115px !important;
+ margin-right: -105px !important;
+}
+::v-deep .image-form-item {
+ .el-form-item__error {
+ display: none !important;
+ }
+}
+</style>
--
Gitblit v1.7.1