mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-15 05:46:48 +08:00
feat:v-for添加:key
This commit is contained in:
lixg
@@ -24,7 +24,7 @@
|
||||
<div class="detail">
|
||||
<div class="detailT">
|
||||
<div
|
||||
style="
|
||||
style="
|
||||
margin-left: 45px;
|
||||
margin-right: 42px;
|
||||
position: relative;
|
||||
@@ -33,9 +33,8 @@
|
||||
>
|
||||
<div class="title">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">作业名称</div>
|
||||
<div class="box"></div>
|
||||
@@ -49,59 +48,73 @@
|
||||
</div>
|
||||
<UploadImg v-model="fileList" ref="uploadRef">
|
||||
<button
|
||||
class="shangchuan"
|
||||
style="cursor: pointer"
|
||||
@mousemove='showFileList=1'
|
||||
@mouseout='showFileList=0'
|
||||
class="shangchuan"
|
||||
style="cursor: pointer"
|
||||
@mousemove="showFileList = 1"
|
||||
@mouseout="showFileList = 0"
|
||||
>
|
||||
上传
|
||||
</button>
|
||||
</UploadImg>
|
||||
<div
|
||||
class="uploadDetail"
|
||||
:style="{ display: showFileList ? 'block' : 'none' }"
|
||||
@mousemove='showFileList=1'
|
||||
@mouseout='showFileList=0'
|
||||
style="padding-top: 60px"
|
||||
class="uploadDetail"
|
||||
:style="{ display: showFileList ? 'block' : 'none' }"
|
||||
@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">
|
||||
<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: '正在上传',
|
||||
abort: '暂停',
|
||||
uploading: '正在上传',
|
||||
fail: '上传失败',
|
||||
success: '上传成功'
|
||||
}[file.status]
|
||||
}}</span>
|
||||
{
|
||||
ready: "正在上传",
|
||||
abort: "暂停",
|
||||
uploading: "正在上传",
|
||||
fail: "上传失败",
|
||||
success: "上传成功",
|
||||
}[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)">{{
|
||||
<button class="btn btndetail" @click="reUpload(i)">
|
||||
{{
|
||||
{
|
||||
ready: '暂停',
|
||||
uploading: '暂停',
|
||||
abort: '开始',
|
||||
fail: '重传',
|
||||
ready: "暂停",
|
||||
uploading: "暂停",
|
||||
abort: "开始",
|
||||
fail: "重传",
|
||||
}[file.status]
|
||||
}}
|
||||
</button>
|
||||
<button class="btn" @click="remove">{{
|
||||
<button class="btn" @click="remove">
|
||||
{{
|
||||
{
|
||||
ready: '取消',
|
||||
abort: '取消',
|
||||
uploading: '取消',
|
||||
fail: '取消',
|
||||
success: '删除'
|
||||
ready: "取消",
|
||||
abort: "取消",
|
||||
uploading: "取消",
|
||||
fail: "取消",
|
||||
success: "删除",
|
||||
}[file.status]
|
||||
}}
|
||||
</button>
|
||||
@@ -111,8 +124,8 @@
|
||||
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">作业内容</div>
|
||||
<div class="box"></div>
|
||||
@@ -120,11 +133,11 @@
|
||||
|
||||
<div class="join">
|
||||
<el-input
|
||||
v-model="textarea1"
|
||||
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
@input="textareaInput"
|
||||
v-model="textarea1"
|
||||
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
@input="textareaInput"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center">
|
||||
@@ -135,9 +148,8 @@
|
||||
|
||||
<div class="title" style="margin-top: 0px">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">历史纪录</div>
|
||||
<div class="box"></div>
|
||||
@@ -149,10 +161,10 @@
|
||||
<div class="content2">作业内容</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(value, index) in submitList"
|
||||
:key="index"
|
||||
class="historytitle2"
|
||||
:style="{
|
||||
v-for="(value, index) in submitList"
|
||||
:key="index"
|
||||
class="historytitle2"
|
||||
:style="{
|
||||
'border-bottom':
|
||||
index === submitList.length - 1
|
||||
? '1px solid rgba(215, 229, 253, 0)'
|
||||
@@ -162,7 +174,7 @@
|
||||
<div class="content1">{{ value.createTime }}</div>
|
||||
<div class="content2">
|
||||
<div
|
||||
style="
|
||||
style="
|
||||
width: 95%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -179,7 +191,10 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="righttitle">
|
||||
<img 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>
|
||||
@@ -187,28 +202,41 @@
|
||||
<div class="innertime">
|
||||
{{
|
||||
data?.submitStartTime
|
||||
}} 至 {{ data?.submitEndTime }}
|
||||
}} 至 {{
|
||||
data?.submitEndTime
|
||||
}}
|
||||
</div>
|
||||
<div class="endtime clearfix">
|
||||
<div class="endtimetext">
|
||||
距离结束还有
|
||||
<span class="te">{{ parseInt(dayjs(data?.submitEndTime).diff(dayjs(), 'minute') / 60) }}</span>
|
||||
小时 <span
|
||||
class="te"
|
||||
>{{ dayjs(data?.submitEndTime).diff(dayjs(), 'minute') % 60 }}</span
|
||||
> 分钟
|
||||
<span class="te">{{
|
||||
parseInt(
|
||||
dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60
|
||||
)
|
||||
}}</span
|
||||
> 小时 <span class="te">{{
|
||||
dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60
|
||||
}}</span
|
||||
> 分钟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="righttitle">
|
||||
<img 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>
|
||||
@@ -217,46 +245,56 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, ref, toRefs} from "vue";
|
||||
import {request, useRequest} from "@/api/request";
|
||||
import {TASK_WORK_COMMIT, TASK_WORK_DETAIL, TASK_WORK_SUBMIT_LIST, WORK_HISTROY} from "@/api/api";
|
||||
import { reactive, ref, toRefs } from "vue";
|
||||
import { request, useRequest } from "@/api/request";
|
||||
import {
|
||||
TASK_WORK_COMMIT,
|
||||
TASK_WORK_DETAIL,
|
||||
TASK_WORK_SUBMIT_LIST,
|
||||
WORK_HISTROY,
|
||||
} from "@/api/api";
|
||||
import dayjs from "dayjs";
|
||||
import {useRouter} from "vue-router";
|
||||
import UploadImg from '@/components/img/UploadImg.vue'
|
||||
import { useRouter } from "vue-router";
|
||||
import UploadImg from "@/components/img/UploadImg.vue";
|
||||
import FileTypeImg from "@/components/FileTypeImg.vue";
|
||||
import {useRoute} from "vue-router/dist/vue-router";
|
||||
import { useRoute } from "vue-router/dist/vue-router";
|
||||
|
||||
|
||||
const fileList = ref([])
|
||||
const uploadRef = ref()
|
||||
const showFileList = ref(0)
|
||||
const fileList = ref([]);
|
||||
const uploadRef = ref();
|
||||
const showFileList = ref(0);
|
||||
const state = reactive({
|
||||
textarea1: "",
|
||||
})
|
||||
const {textarea1} = toRefs(state);
|
||||
const router = useRouter()
|
||||
});
|
||||
const { textarea1 } = toRefs(state);
|
||||
const router = useRouter();
|
||||
|
||||
const {query: {courseId:workId,type}} = useRoute()
|
||||
const {
|
||||
query: { courseId: workId, type },
|
||||
} = useRoute();
|
||||
|
||||
const {data} = useRequest(TASK_WORK_DETAIL, {workId})
|
||||
const {data: submitList} = useRequest(TASK_WORK_SUBMIT_LIST, {workId})
|
||||
const { data } = useRequest(TASK_WORK_DETAIL, { workId });
|
||||
const { data: submitList } = useRequest(TASK_WORK_SUBMIT_LIST, { workId });
|
||||
|
||||
const handleClick = () => {
|
||||
request(TASK_WORK_COMMIT, {projectOrRouterLogo: type, workUploadContent: textarea1.value, workId}).then(res => {
|
||||
submitList.value.unshift(res.data)
|
||||
})
|
||||
textarea1.value=''
|
||||
request(TASK_WORK_COMMIT, {
|
||||
projectOrRouterLogo: type,
|
||||
workUploadContent: textarea1.value,
|
||||
workId,
|
||||
}).then((res) => {
|
||||
submitList.value.unshift(res.data);
|
||||
});
|
||||
textarea1.value = "";
|
||||
};
|
||||
const textareaInput = (e) => {
|
||||
state.textarea1 = e;
|
||||
};
|
||||
|
||||
function remove(i) {
|
||||
uploadRef.value.remove(i)
|
||||
uploadRef.value.remove(i);
|
||||
}
|
||||
|
||||
function reUpload(i) {
|
||||
uploadRef.value.reUpload(i)
|
||||
uploadRef.value.reUpload(i);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -662,25 +700,25 @@ function reUpload(i) {
|
||||
|
||||
.allbox1 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(160, 193, 230, 0) 0%,
|
||||
rgba(161, 195, 231, 0.2) 100%
|
||||
0deg,
|
||||
rgba(160, 193, 230, 0) 0%,
|
||||
rgba(161, 195, 231, 0.2) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.allbox2 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(177, 219, 229, 0) 0%,
|
||||
rgba(172, 216, 227, 0.2) 100%
|
||||
0deg,
|
||||
rgba(177, 219, 229, 0) 0%,
|
||||
rgba(172, 216, 227, 0.2) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.allbox3 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(195, 209, 234, 0) 0%,
|
||||
rgba(191, 206, 231, 0.2) 100%
|
||||
0deg,
|
||||
rgba(195, 209, 234, 0) 0%,
|
||||
rgba(191, 206, 231, 0.2) 100%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user