From 527efb36f35b471710e445972673abff45bacdac Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 12 九月 2025 17:36:09 +0800
Subject: [PATCH] 401跳转登录
---
laboratory/src/components/DynamicComponent/addTableData.vue | 385 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 251 insertions(+), 134 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/addTableData.vue b/laboratory/src/components/DynamicComponent/addTableData.vue
index a7ddd06..de40882 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"
@@ -28,47 +28,77 @@
<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
v-model="form[header.name]"
:placeholder="'请输入' + header.name"
+ :disabled="!checkEditPermission(header)"
/>
</el-form-item>
<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']
+ 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="#"
- :file-list="spectrumList"
- :auto-upload="false"
+ :action="uploadUrl"
+ :headers="uploadHeaders"
+ :file-list="imageListMap[header.name] || []"
+ :auto-upload="true"
list-type="picture-card"
- :on-change="handleSpectrumChange"
- :on-remove="handleSpectrumRemove"
+ :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'"
>
@@ -77,27 +107,32 @@
type="datetime"
placeholder="选择日期时间"
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>
@@ -105,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'"
>
@@ -116,6 +152,7 @@
multiple
filterable
placeholder="请选择用户"
+ :disabled="!checkEditPermission(header)"
>
<el-option
v-for="item in userOptions"
@@ -135,10 +172,17 @@
<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",
props: {
@@ -157,23 +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: [],
- spectrumList: [],
- userOptions: [
- { value: '1', label: '用户1' },
- { value: '2', label: '用户2' },
- { value: '3', label: '用户3' },
- { value: '4', label: '用户4' },
- { value: '5', label: '用户5' }
- ]
+ imageList: [],
+ defaultImageUrl:
+ "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // 默认图片地址
+ userOptions: [],
+ imagePreviewVisible: false,
+ imagePreviewUrl: "",
+ uploadUrl: apiConfig.imgUrl,
+ uploadHeaders: {
+ Authorization: sessionStorage.getItem("token") || "",
+ },
+ imageListMap: {},
};
},
computed: {
@@ -185,12 +240,15 @@
this.$emit("update:visible", val);
},
},
+ currentUserId() {
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
+ return userInfo.userId;
+ },
},
watch: {
visible: {
handler(newVal) {
if (newVal) {
- console.log('弹窗打开，初始化数据');
this.showHeaderList = JSON.parse(JSON.stringify(this.headerList));
this.$forceUpdate();
if (this.isEdit && this.editData) {
@@ -201,8 +259,6 @@
this.initFormData();
}
this.initRules();
- console.log('初始化后的表单数据:', this.form);
- console.log('初始化后的校验规则:', this.rules);
}
},
},
@@ -210,7 +266,6 @@
immediate: true,
handler(newVal) {
if (newVal && newVal.length) {
- console.log('headerList变化，重新初始化');
if (this.isEdit && this.editData) {
this.setFormData(this.editData);
} else {
@@ -220,35 +275,49 @@
}
},
},
- showHeaderList: {
- immediate: true,
- handler(newVal) {
- if (newVal ) {
-
- console.log("222222222222222222", JSON.stringify(newVal));
-
- }
- },
- },
},
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);
+ });
+ },
+ checkEditPermission(header) {
+ if (!header.role || !Array.isArray(header.role)) {
+ return true;
+ }
+ return header.role.includes(this.currentUserId);
+ },
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 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"],
+ },
+ ];
}
});
}
- console.log('生成的校验规则:', rules);
this.rules = rules;
},
initFormData() {
@@ -256,24 +325,25 @@
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]);
});
-
- console.log('初始化后的表单数据:', this.form);
},
setFormData(data) {
// 设置基础表单数据
@@ -283,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]);
});
@@ -309,14 +382,15 @@
}
// 设置图谱列表
- 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]),
+ },
+ ];
}
// 重置表单校验状态
@@ -326,65 +400,99 @@
},
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() {
this.dialogVisible = false;
this.$refs.form?.resetFields();
this.photoList = [];
- this.spectrumList = [];
+ this.imageList = [];
this.initFormData();
},
handleSubmit() {
- console.log('开始提交表单');
- console.log('表单数据:', this.form);
- console.log('校验规则:', this.rules);
-
+ console.log('4444444444444')
this.$refs.form.validate((valid) => {
- console.log('表单验证结果:', valid);
if (valid) {
const submitData = {
...this.form,
photos: this.photoList,
- spectrums: this.spectrumList,
};
- console.log('提交数据:', submitData);
+
+ // 为用户类型字段添加用户完整信息
+ if (this.headerList && this.headerList.length) {
+ 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
+ );
+ return userInfo ? userInfo : { value: userId, label: userId };
+ });
+ }
+ });
+ }
+
this.$emit("success", submitData);
this.handleClose();
} else {
- console.log('表单验证失败');
- this.$message.error('请填写必填项');
+ this.$message.error("请填写必填项");
}
});
},
- handlePhotoChange(file, fileList) {
- this.photoList = fileList;
- this.$refs.form.validateField("photos");
- },
- handleSpectrumChange(file, fileList) {
- this.spectrumList = fileList;
- this.$refs.form.validateField("spectrums");
- },
- handleSpectrumRemove(file) {
- // 处理文件移除逻辑
- },
+ beforeImageUpload(file) {
+ const isJPG = file.type === "image/jpeg";
+ // const isLt2M = file.size / 1024 / 1024 < 2;
- handleIPadSpectrum() {
- // TODO: 调用 iPad 选择图谱功能
- console.log("调用 iPad 选择图谱功能");
+ if (!isJPG) {
+ this.$message.error("上传图片只能是 JPG 格式!");
+ return false;
+ }
+ return true;
},
+ 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);
+ if (!Array.isArray(this.form[fieldName])) {
+ this.$set(this.form, fieldName, []);
+ }
+ // 只保留 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, 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;
+ this.imagePreviewVisible = true;
+ },
+ getFullUrl,
},
mounted() {
- console.log("初始headerList:", this.headerList);
+ // 获取用户列表数据
+ this.getUserOptions();
},
};
</script>
-
+
<style scoped lang="less">
::v-deep .el-dialog__body {
padding: 0;
@@ -417,7 +525,7 @@
.form-content {
flex: 1;
overflow-y: auto;
- padding: 0 10px;
+ padding: 10px 10px;
max-height: calc(90vh - 250px); // 设置内容区域最大高度
&::-webkit-scrollbar {
@@ -432,6 +540,9 @@
&::-webkit-scrollbar-track {
background: #f5f7fa;
}
+ }
+ .el-form-item::after {
+ height: 10px !important;
}
}
}
@@ -456,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;
@@ -527,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