fix(upload): 统一使用$message提示并优化文件校验逻辑

- 移除重复引入的ElMessage组件
- 使用$message.error替换ElMessage错误提示
- 添加文件上传前的console.log调试信息
- 优化文件格式和大小校验的提示逻辑
- 在dragTable.vue中使用ElInput组件替换原生input
- 优化HomeWorkComp.vue中附件显示条件判断

chore(style): 统一element-plus弹窗样式

- 为el-dialog和el-message-box添加圆角样式
- 调整消息框标题和内容的字体样式
- 优化按钮样式和间距布局
- 规范化弹窗内部元素的显示效果
This commit is contained in:
陈昱达
2025-12-12 16:19:37 +08:00
parent 70fcfc6cd3
commit feb5453eb0
4 changed files with 73 additions and 21 deletions

View File

@@ -872,3 +872,63 @@ textarea {
.pst-s {
position: sticky;
}
.el-dialog {
border-radius: 12px;
.el-dialog__header {
height: 54px;
line-height: 1;
//color: #fff;
//background: #4284f7;
border-radius: 12px 12px 0 0;
margin-right: 0;
.el-dialog__title {
//color: #fff;
}
}
}
.el-message-box {
border-radius: 12px;
//width: 690px;
max-width: 690px;
//width: auto;
.el-message-box__header {
.el-message-box__title {
font-weight: 400;
font-size: 16px;
color: #000000;
line-height: 22px;
text-align: left;
font-style: normal;
}
}
.el-message-box__content {
margin: 30px 0;
font-size: 16px;
.el-message-box__container {
//text-align: center;
font-weight: 400;
display: flex;
align-items: center;
width: 100%;
flex: 1;
justify-content: center;
.el-message-box__status {
position: unset;
top: unset;
transform: unset;
font-size: 20px !important;
}
.el-message-box__message {
padding-left: 10px;
}
}
}
.el-message-box__btns {
.el-button {
height: 40px;
border-radius: 6px;
min-width: 120px;
}
}
}

View File

@@ -1,7 +1,7 @@
<script setup>
import { reactive, onMounted, ref, h } from "vue";
import { ElButton, ElInput, ElUpload } from "element-plus";
import { $message, ElMessage } from "@/utils/useMessage";
import { $message } from "@/utils/useMessage";
import BasicTable from "@/components/BasicElTable/BasicTable.vue";
import {
getPageListByType,
@@ -248,12 +248,13 @@ const handleUploadSuccess = (res, file) => {
// 上传前处理
const handleBeforeUpload = (file) => {
console.log(file);
const { fileType, name, uploadSize, uploadSizeName } = getMapsItem(
props.resType
);
if (file.name.lastIndexOf(".") === -1) {
ElMessage({ message: `文件格式不正确!`, type: "error", offset: 100 });
$message.error(`文件格式不正确!`);
return false;
}
@@ -262,11 +263,7 @@ const handleBeforeUpload = (file) => {
// 校检文件类型
if (fileType.join(",").indexOf(fileExtension) === -1) {
ElMessage({
message: `文件格式不正确, 请上传正确格式的${name}文件!`,
type: "error",
offset: 100,
});
$message.error(`文件格式不正确, 请上传正确格式的${name}文件!`);
return false;
}
@@ -274,11 +271,7 @@ const handleBeforeUpload = (file) => {
if (uploadSize) {
const isLt = file.size / 1024 / 1024 < uploadSize;
if (!isLt) {
ElMessage({
message: `上传文件大小不能超过 ${uploadSizeName} !`,
type: "error",
offset: 100,
});
$message.error(`上传文件大小不能超过 ${uploadSizeName} !`);
return false;
}
}

View File

@@ -75,7 +75,7 @@ const removeHomeworkFile = () => {
></el-input>
</el-form-item>
<el-form-item label="附件">
<div v-if="localDialogVideoForm.file !== ''" class="flex align-center">
<div v-if="localDialogVideoForm.file" class="flex align-center">
<a :href="fileBaseUrl + localDialogVideoForm.file" target="_blank"
>下载作业附件
</a>

View File

@@ -18,6 +18,7 @@ import { createVNode } from "vue";
import { Sort } from "@element-plus/icons-vue";
import { getType } from "@/hooks/useCreateCourseMaps";
import svgIcon from "@/components/SvgIcon.vue";
import { ElInput } from "element-plus";
// 定义 props
const props = defineProps({
data: {
@@ -150,16 +151,14 @@ const renderNameColumn = () => {
"span",
{ style: { display: "flex", alignItems: "center", gap: "8px" } },
[
h("input", {
value: record.copyName,
onInput: (e) => {
record.copyName = e.target.value;
createVNode(ElInput, {
modelValue: record.copyName,
maxlength: 50,
showWordLimit: true,
"onUpdate:modelValue": (val) => {
record.copyName = val;
},
style: {
border: "1px solid #d9d9d9",
outline: "none",
borderRadius: "4px",
padding: "4px 11px",
width: "80%",
},
}),