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/addTableData.vue | 331 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 198 insertions(+), 133 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/addTableData.vue b/laboratory/src/components/DynamicComponent/addTableData.vue
index e8bed63..de40882 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"
@@ -28,11 +28,23 @@
<el-form-item
:label="header.name"
:prop="header.name"
- :rules="{
- required: header.required === true || header.required === 'true',
- message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
- }"
+ :rules="[
+ {
+ required: header.required === true || header.required === 'true',
+ message: header.message || `请输入${header.name}`,
+ trigger: ['blur', 'change'],
+ },
+ {
+ validator: (rule, value, callback) => {
+ if ((header.required === true || header.required === 'true') && (!value || value.trim() === '')) {
+ callback(header.message || `请输入${header.name}`);
+ } else {
+ callback();
+ }
+ },
+ trigger: ['blur', 'change'],
+ }
+ ]"
v-if="header.type == 'text'"
>
<el-input
@@ -45,35 +57,48 @@
: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
class="upload-demo"
:action="uploadUrl"
:headers="uploadHeaders"
- :file-list="imageList"
+ :file-list="imageListMap[header.name] || []"
:auto-upload="true"
list-type="picture-card"
- :on-change="handleImageChange"
- :on-remove="handleImageRemove"
- :on-success="handleImageSuccess"
+ :before-upload="beforeImageUpload"
+ :on-change="(file, fileList) => handleImageChange(file, fileList, header.name)"
+ :on-remove="(file, fileList) => handleImageRemove(file, fileList, header.name)"
+ :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, header.name)"
:on-preview="handlePreview"
:disabled="!checkEditPermission(header)"
+ multiple
>
- <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 +109,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 +140,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 +177,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 +201,34 @@
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") || "",
+ },
+ imageListMap: {},
};
},
computed: {
@@ -201,9 +241,9 @@
},
},
currentUserId() {
- const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
return userInfo.userId;
- }
+ },
},
watch: {
visible: {
@@ -238,18 +278,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 +303,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 +325,23 @@
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 if (header.type === "image") {
+ formData[header.name] = [];
+ this.$set(this.imageListMap, 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 +353,20 @@
// 根据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 if (header.type === "image") {
+ formData[header.name] = Array.isArray(data[header.name]) ? data[header.name] : (data[header.name] ? [data[header.name]] : []);
+ this.$set(this.imageListMap, header.name, (formData[header.name] || []).map(url => ({ name: "image", url: getFullUrl(url), status: "success" })));
} 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 +383,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 +400,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,64 +415,70 @@
this.initFormData();
},
handleSubmit() {
-
+ console.log('4444444444444')
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 };
});
}
});
}
-
- console.log(submitData,'修改的数据')
+
this.$emit("success", submitData);
this.handleClose();
} else {
- this.$message.error('请填写必填项');
+ this.$message.error("请填写必填项");
}
});
},
- handleImageChange(file, fileList) {
- this.imageList = fileList;
- const imageHeader = this.headerList.find(h => h.type === 'image');
- if (imageHeader) {
- this.$refs.form.validateField(imageHeader.name);
+ 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;
},
- handleImageSuccess(res, file, fileList) {
- console.log('res, file, fileList',res, file, fileList)
+ handleImageChange(file, fileList, fieldName) {
+ this.$set(this.imageListMap, fieldName, fileList);
+ // 校验
+ this.$refs.form && this.$refs.form.validateField(fieldName);
+ },
+ handleImageSuccess(res, file, fileList, fieldName) {
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);
+ if (!Array.isArray(this.form[fieldName])) {
+ this.$set(this.form, fieldName, []);
}
- this.imageList = fileList.map(f => {
- if (f.uid === file.uid) {
- return file;
- }
- return f;
- });
+ // 只保留 fileList 中的 url
+ this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
+ this.$set(this.imageListMap, fieldName, fileList);
+ this.$refs.form && this.$refs.form.validateField(fieldName);
},
- handleImageRemove(file, fileList) {
- const imageHeader = this.headerList.find(h => h.type === 'image');
- if (imageHeader) {
- this.$set(this.form, imageHeader.name, '');
- }
- this.imageList = fileList;
+ handleImageRemove(file, fileList, fieldName) {
+ this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
+ this.$set(this.imageListMap, fieldName, fileList);
},
handlePreview(file) {
this.imagePreviewUrl = file.url;
@@ -433,7 +492,7 @@
},
};
</script>
-
+
<style scoped lang="less">
::v-deep .el-dialog__body {
padding: 0;
@@ -482,7 +541,7 @@
background: #f5f7fa;
}
}
- .el-form-item::after{
+ .el-form-item::after {
height: 10px !important;
}
}
@@ -508,26 +567,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;
@@ -579,11 +638,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