mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-10 19:36:48 +08:00
fix:作业附件上传组件值未清空,作业内容及作业附件判断有一即可
This commit is contained in:
@@ -1,14 +1,6 @@
|
||||
<template>
|
||||
<el-upload
|
||||
:file-list="files"
|
||||
:action="FILE_UPLOAD"
|
||||
method="POST"
|
||||
:show-file-list="false"
|
||||
:on-change="handleChange"
|
||||
:limit="max"
|
||||
ref="imageRef"
|
||||
:on-exceed="exceed"
|
||||
>
|
||||
<el-upload :file-list="files" :action="FILE_UPLOAD" method="POST" :show-file-list="false" :on-change="handleChange"
|
||||
:limit="max" ref="imageRef" :on-exceed="exceed">
|
||||
<template #trigger>
|
||||
<div>
|
||||
<slot></slot>
|
||||
@@ -58,6 +50,8 @@ function handleChange(e) {
|
||||
|
||||
function remove(i) {
|
||||
files.value.splice(i, 1)
|
||||
console.log(imageRef)
|
||||
imageRef.value.clearFiles();
|
||||
}
|
||||
|
||||
function reUpload(i) {
|
||||
|
||||
@@ -17,12 +17,8 @@
|
||||
|
||||
<div class="return">
|
||||
<div style="display: flex" @click="returnclick">
|
||||
<img
|
||||
class="img2"
|
||||
style="margin-right: 22px"
|
||||
src="../../assets/image/return.png"
|
||||
/>
|
||||
<div class="text">返回</div>
|
||||
<img class="img2" style="margin-right: 22px;cursor: pointer;" src="../../assets/image/return.png" />
|
||||
<div style="cursor: pointer;" class="text">返回</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,19 +30,14 @@
|
||||
<div class="detailinfo">
|
||||
<div class="detail">
|
||||
<div class="detailT">
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
margin-left: 45px;
|
||||
margin-right: 42px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
"
|
||||
>
|
||||
">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
|
||||
<div class="text">作业名称</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
@@ -58,38 +49,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<UploadImg v-model:value="fileList" ref="uploadRef">
|
||||
<button
|
||||
class="shangchuan"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<button class="shangchuan" style="cursor: pointer">
|
||||
上传
|
||||
</button>
|
||||
</UploadImg>
|
||||
<div
|
||||
class="uploadDetail"
|
||||
<div class="uploadDetail"
|
||||
:style="{ display: showFileList && fileList && fileList.length > 0 ? 'block' : 'none' }"
|
||||
@mousemove="showFileList = 1"
|
||||
@mouseout="showFileList = 0"
|
||||
style="padding-top: 60px"
|
||||
>
|
||||
@mousemove="showFileList = 1" @mouseout="showFileList = 0" style="padding-top: 60px">
|
||||
<div class="triangle"></div>
|
||||
<div class="square clearfix">
|
||||
<div
|
||||
class="squarecontent1"
|
||||
v-for="(file, i) in fileList"
|
||||
:key="i"
|
||||
>
|
||||
<FileTypeImg
|
||||
v-model="file.name"
|
||||
:style="{ margin: '12px 15px 0 27px' }"
|
||||
></FileTypeImg>
|
||||
<div class="squarecontent1" v-for="(file, i) in fileList" :key="i">
|
||||
<FileTypeImg v-model="file.name" :style="{ margin: '12px 15px 0 27px' }"></FileTypeImg>
|
||||
<div class="rarDetail">
|
||||
<span class="detail1" style="margin-right: 130px">
|
||||
{{ file.name }}
|
||||
</span>
|
||||
<span class="detail2" style="margin-right: 10px"
|
||||
>{{ file.percentage }}%</span
|
||||
>
|
||||
<span class="detail2" style="margin-right: 10px">{{ file.percentage }}%</span>
|
||||
<span class="detail1">{{
|
||||
{
|
||||
ready: "正在上传",
|
||||
@@ -100,10 +75,7 @@
|
||||
}[file.status]
|
||||
}}</span>
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progressinner"
|
||||
:style="{ width: `${(291 * file.percentage) / 100}px` }"
|
||||
></div>
|
||||
<div class="progressinner" :style="{ width: `${(291 * file.percentage) / 100}px` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btndetail" @click="reUpload(i)">
|
||||
@@ -132,24 +104,18 @@
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
|
||||
<div class="text">作业内容</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<div class="join">
|
||||
<el-input
|
||||
v-model="sbValue.content"
|
||||
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
/>
|
||||
<el-input v-model="sbValue.content" :autosize="{ minRows: 12.5, maxRows: 12.5 }" resize="none"
|
||||
type="textarea" />
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<button class="tijiao" @click="handleClick">{{submitList && submitList.length>0?"再次":""}}提交</button>
|
||||
<button class="tijiao" @click="handleClick">{{ submitList && submitList.length > 0 ? "再次" : ""
|
||||
}}提交</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -158,11 +124,8 @@
|
||||
<div class=""></div>
|
||||
|
||||
<div class="title" style="margin-top: 0px">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">历史纪录</div>
|
||||
<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
|
||||
<div class="text">历史记录</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
@@ -172,17 +135,12 @@
|
||||
<div class="content2">作业内容</div>
|
||||
<div class="content3">附件</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(value, index) in submitList"
|
||||
:key="index"
|
||||
class="historytitle2"
|
||||
:style="{
|
||||
<div v-for="(value, index) in submitList" :key="index" class="historytitle2" :style="{
|
||||
'border-bottom':
|
||||
index === submitList.length - 1
|
||||
? '1px solid rgba(215, 229, 253, 0)'
|
||||
: '1px solid rgba(215, 229, 253, 1)',
|
||||
}"
|
||||
>
|
||||
}">
|
||||
<div class="content1">{{ value.createTime }}</div>
|
||||
<div class="content2">
|
||||
<div>
|
||||
@@ -194,7 +152,10 @@
|
||||
<div>
|
||||
|
||||
<span style="margin-left: 10px">
|
||||
<el-link target="_blank" type="primary" :href="value.workUploadAddress?.split(',')[0] || ''">{{value.workUploadAddress?.split(',')[0].split('/').at(-1)|| ''}}</el-link>
|
||||
<el-link target="_blank" type="primary" :href="value.workUploadAddress?.split(',')[0] || ''">{{
|
||||
value.workUploadAddress?.split(',')[0].split('/').at(-1) ||
|
||||
''
|
||||
}}</el-link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,10 +166,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="righttitle">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
|
||||
<div class="text">截止时间</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
@@ -227,30 +185,21 @@
|
||||
parseInt(
|
||||
dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60
|
||||
)
|
||||
}}</span
|
||||
> 小时 <span class="te">{{
|
||||
}}</span> 小时 <span class="te">{{
|
||||
dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60
|
||||
}}</span
|
||||
> 分钟
|
||||
}}</span> 分钟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="righttitle">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
|
||||
|
||||
<div class="text">作业说明</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="explain clearfix">
|
||||
<!-- todo #作业任务详情 作业说明是作业要求字段么?-->
|
||||
<div
|
||||
class="explain1"
|
||||
style="margin-top: 26px"
|
||||
v-html="data?.workRequirement"
|
||||
></div>
|
||||
<div class="explain1" style="margin-top: 26px" v-html="data?.workRequirement"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,8 +212,12 @@
|
||||
</span></div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button class="cancel" style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;" @click="centerDialogVisible = false">取消</el-button>
|
||||
<el-button class="back" style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;" type="primary" @click="returnclick">
|
||||
<el-button class="cancel"
|
||||
style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
|
||||
@click="centerDialogVisible = false">取消</el-button>
|
||||
<el-button class="back"
|
||||
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
|
||||
type="primary" @click="returnclick">
|
||||
返回
|
||||
</el-button>
|
||||
</span>
|
||||
@@ -319,10 +272,13 @@ const showFileList = computed(()=>{
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
console.log(fileList.value, uploadRef.value)
|
||||
if (!sbValue.value.content) {
|
||||
|
||||
if (fileList.value.length == 0) {
|
||||
return ElMessage.warning("请输入作业内容");
|
||||
}
|
||||
}
|
||||
|
||||
request(TASK_WORK_COMMIT, {
|
||||
projectOrRouterLogo: type,
|
||||
workUploadContent: sbValue.value.content,
|
||||
@@ -337,6 +293,7 @@ const handleClick = () => {
|
||||
});
|
||||
sbValue.value.content = "";
|
||||
fileList.value = [];
|
||||
remove(0);
|
||||
};
|
||||
|
||||
function remove(i) {
|
||||
@@ -358,9 +315,11 @@ function reUpload(i) {
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.return {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@@ -368,6 +327,7 @@ function reUpload(i) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.preNext {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
@@ -703,11 +663,13 @@ function reUpload(i) {
|
||||
.content2 {
|
||||
margin-top: 14px;
|
||||
margin-left: 20px;
|
||||
width:460px;;
|
||||
width: 460px;
|
||||
;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content3 {
|
||||
margin-top: 14px;
|
||||
margin-left: 20px;
|
||||
@@ -771,27 +733,21 @@ function reUpload(i) {
|
||||
margin-top: 43px;
|
||||
|
||||
.allbox1 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
background: linear-gradient(0deg,
|
||||
rgba(160, 193, 230, 0) 0%,
|
||||
rgba(161, 195, 231, 0.2) 100%
|
||||
);
|
||||
rgba(161, 195, 231, 0.2) 100%);
|
||||
}
|
||||
|
||||
.allbox2 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
background: linear-gradient(0deg,
|
||||
rgba(177, 219, 229, 0) 0%,
|
||||
rgba(172, 216, 227, 0.2) 100%
|
||||
);
|
||||
rgba(172, 216, 227, 0.2) 100%);
|
||||
}
|
||||
|
||||
.allbox3 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
background: linear-gradient(0deg,
|
||||
rgba(195, 209, 234, 0) 0%,
|
||||
rgba(191, 206, 231, 0.2) 100%
|
||||
);
|
||||
rgba(191, 206, 231, 0.2) 100%);
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -917,13 +873,16 @@ function reUpload(i) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
.back {
|
||||
background: #387DF7;
|
||||
@@ -932,6 +891,7 @@ function reUpload(i) {
|
||||
padding: 8px 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background: #387DF7;
|
||||
border: 0px;
|
||||
@@ -943,6 +903,4 @@ function reUpload(i) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user