mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-23 09:46:45 +08:00
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:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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%",
|
||||
},
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user