From 332e2e6cd982c2d71028798f535a94d7b9c55b91 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期二, 09 十二月 2025 16:59:26 +0800
Subject: [PATCH] 12.07 更新
---
laboratory/src/components/DynamicComponent/addTableData.vue | 397 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 263 insertions(+), 134 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/addTableData.vue b/laboratory/src/components/DynamicComponent/addTableData.vue
index e8bed63..3ed8113 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,31 @@
<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') &&
+ isApprovaler,
+ message: header.message || `请输入${header.name}`,
+ trigger: ['blur', 'change'],
+ },
+ {
+ validator: (rule, value, callback) => {
+ if (
+ (header.required === true ||
+ header.required === 'true') &&
+ (!value || value.trim() === '') &&
+ isApprovaler
+ ) {
+ callback(header.message || `请输入${header.name}`);
+ } else {
+ callback();
+ }
+ },
+ trigger: ['blur', 'change'],
+ },
+ ]"
v-if="header.type == 'text'"
>
<el-input
@@ -45,35 +65,61 @@
: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') &&
+ isApprovaler,
+ 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') &&
+ isApprovaler,
message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
+ trigger: ['blur', 'change'],
}"
v-if="header.type == 'date'"
>
@@ -84,26 +130,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 +161,12 @@
:label="header.name"
:prop="header.name"
:rules="{
- required: header.required === true || header.required === 'true',
+ required:
+ (header.required === true ||
+ header.required === 'true') &&
+ isApprovaler,
message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change']
+ trigger: ['blur', 'change'],
}"
v-if="header.type == 'user'"
>
@@ -147,11 +200,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 +224,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 +264,13 @@
},
},
currentUserId() {
- const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
return userInfo.userId;
- }
+ },
+ isApprovaler() {
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
+ return userInfo.roleType != 3; // 不是工艺工程师
+ },
},
watch: {
visible: {
@@ -238,38 +305,56 @@
},
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)) {
return true;
}
- return header.role.includes(this.currentUserId);
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
+ return header.role.includes(this.currentUserId) || (userInfo.roleType == 3);
},
initRules() {
// 初始化校验规则
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 userInfo = JSON.parse(
+ sessionStorage.getItem("userInfo") || "{}"
+ );
+ const isRequired =
+ (header.required === true || header.required === "true") &&
+ userInfo.roleType != 3;
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"],
+ },
+ ];
+ }else{
+ rules[header.name] = [
+ {
+ required: false,
+ message: header.message || `请输入${header.name}`,
+ trigger: ["blur", "change"],
+ },
+ ];
}
});
}
@@ -280,20 +365,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 +393,32 @@
// 根据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 +435,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 +452,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 +467,82 @@
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 +556,7 @@
},
};
</script>
-
+
<style scoped lang="less">
::v-deep .el-dialog__body {
padding: 0;
@@ -482,7 +605,7 @@
background: #f5f7fa;
}
}
- .el-form-item::after{
+ .el-form-item::after {
height: 10px !important;
}
}
@@ -508,26 +631,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 +702,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