hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-08 02:16:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

接口初始化 第一版

Browse Source
This commit is contained in:
yuping
2022-11-20 22:09:58 +08:00
parent f9ae1c0027
commit 9123944e19
11 changed files with 643 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/api.js
View File

@@ -1,5 +1,7 @@
export const BASE = 'http://localhost:3000' export const BASE = 'http://localhost:3000'
// export const FILE_UPLOAD = 'http://111.231.196.214:30001/file/upload'
export const FILE_UPLOAD = '/file/upload' export const FILE_UPLOAD = '/file/upload'
export const COMMON_TOKEN = 'https://upload-z2.qiniup.com'
export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList' export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList'
export const ROUTER_LIST = '/stu/router/list post' export const ROUTER_LIST = '/stu/router/list post'
export const ROUTER_PROCESS = '/stu/router/process' export const ROUTER_PROCESS = '/stu/router/process'
@@ -16,3 +18,8 @@ export const TASK_WORK_DETAIL = '/stu/task/work/detail'
export const STU_OFFCOURSE_DETAIL = '/stu/offcourse/detail' export const STU_OFFCOURSE_DETAIL = '/stu/offcourse/detail'
export const WORK_QUERYWORKDETAILBYID = '/work/queryWorkDetailById' export const WORK_QUERYWORKDETAILBYID = '/work/queryWorkDetailById'
export const EXAMINATION_QUERYEXAMINATIONDETAILBYID = '/examination/queryExaminationDetailById' export const EXAMINATION_QUERYEXAMINATIONDETAILBYID = '/examination/queryExaminationDetailById'
export const DISCUSS_COLLECTION = '/discussSubmit/clickDiscussCollectionCountOr POST'
export const DISCUSS_LIKE = '/discussSubmit/clickDiscussLikeCountOr POST'
export const DISCUSS_LIST = '/discussSubmit/queryDiscussSubmitDetailByDiscussId'
export const DISCUSS_DETAIL = '/discuss/getDiscussDetail'
export const DISCUSS_SUBMIT_REVIEW_LIST = '/discussSubmit/queryDiscussSubmitAndReview'

BIN
src/assets/image/file/book.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 B

BIN
src/assets/image/file/rar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 590 B

28
src/components/FileTypeImg.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<img class="file"
:style="style"
:src="{pdf,doc:word,ppt,zip,excel,xlsx:excel,xls:excel,rar,book,md,docx:word}[filePath.split('.').slice(-1)] || book"/>
</template>
<script setup>
import rar from '@/assets/image/file/rar.png'
import excel from '@/assets/image/file/excel.png'
import md from '@/assets/image/file/md.png'
import pdf from '@/assets/image/file/pdf.png'
import ppt from '@/assets/image/file/ppt.png'
import word from '@/assets/image/file/word.png'
import zip from '@/assets/image/file/zip.png'
import book from '@/assets/image/file/book.png'
import {defineProps, ref} from "vue";
const {modelValue = [],style} = defineProps({
modelValue: String,
style: Object
})
const filePath = ref(modelValue)
</script>
<style lang="scss">
.file {
width: 22px;
height: 26px;
}
</style>

66
src/components/img/UploadImg.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<el-upload
:file-list="files"
:action="FILE_UPLOAD"
method="POST"
:show-file-list="false"
:on-change="handleChange"
ref="imageRef"
>
<template #trigger>
<div>
<slot></slot>
</div>
</template>
</el-upload>
</template>
<script setup>
import {FILE_UPLOAD} from "@/api/api";
import {defineProps, ref} from "vue";
const {modelValue = []} = defineProps({
modelValue: []
})
const emit = defineEmits()
const files = ref(modelValue)
const imageRef = ref()
function handleChange(e) {
console.log(e)
if (e.response && e.response.code === 200) {
e.url = e.response.data
}
const index = files.value.findIndex(f => f.uid === e.uid)
if (index === -1) {
files.value.unshift(e)
} else {
files.value[index] = e
}
emit('update:modelValue', files)
}
function remove(i) {
files.value.splice(i, 1)
}
function reUpload(i) {
if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
imageRef.value.abort(files.value[i].raw)
files.value[i].status = 'abort';
} else if (files.value[i].status === 'fail'||files.value[i].status === 'abort') {
imageRef.value.handleStart(files.value[i].raw)
imageRef.value.submit()
}
}
function abort(i) {
imageRef.value.abort(files.value[i].raw)
}
defineExpose({reUpload, remove})
</script>

4
src/components/index.js
View File

@@ -1,4 +0,0 @@
import CompulsoryTag from './tag/CompulsoryTag.vue'
export {
CompulsoryTag
}

138
src/mock/mocks/discuss.js Normal file
View File

@@ -0,0 +1,138 @@
export default {
DISCUSS_LIST: () => ({
"code": 0,
"data": {
"pageNo": 0,
"pageSize": 0,
"pages": 0,
"rows": [
{
"createTime": "",
"createUser": 0,
"discussCollectionCount": 12,
"discussId": "",
"discussLikeCount": "123",
"discussReviewCount": "12",
"discussSubmitContent": "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，\n" +
" 不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。",
"discussSubmitId": "",
"discussSubmitPictureAddress": "",
"discussSubmitTitle": "从营销角度分析：我的团队需要这些能力",
"stuId": "",
"stuName": "",
"submitReviewVoList": [
{
"createTime": "",
"createUser": 0,
"discussLikeCount": "12",
"discussReviewContent": "",
"discussReviewFlag": "",
"discussReviewId": "",
"discussReviewPictureAddress": "",
"discussSubmitId": "",
"stuId": "",
"stuName": "",
"submitReplyVoList": [
{
"createTime": "",
"createUser": 0,
"discussReplyId": 0,
"discussReviewId": "",
"replyContent": "",
"replyFlag": "",
"replyPictureAddress": "",
"reviewStuId": "",
"reviewStuName": "",
"stuId": "",
"stuName": "",
"updateTime": "",
"updateUser": 0
}
],
"updateTime": "",
"updateUser": 0
}
],
"updateTime": "",
"updateUser": 0
}
],
"total": 0
},
"msg": "",
"success": true
}),
DISCUSS_DETAIL: () => ({
"code": 0,
"data": {
"createTime": "",
"createUser": 0,
"discussExplain": "第二讲：模块化产品展示：班内成员讨论\n" +
"进行中",
"discussFlag": "",
"discussId": 0,
"discussName": "请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求",
"discussSettings": "",
"discussTag": "",
"projectId": 0,
"updateTime": "",
"updateUser": 0
},
"msg": "",
"success": true
}),
DISCUSS_SUBMIT_REVIEW_LIST: () => ({
"code": 0,
"data": {
"createTime": "",
"createUser": 0,
"discussCollectionCount": 222,
"discussId": "",
"discussLikeCount": 123,
"discussReviewCount": "",
"discussSubmitContent": "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说， 不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力",
"discussSubmitId": "",
"discussSubmitPictureAddress": "",
"discussSubmitTitle": "从营销角度分析：我的团队需要这些能力",
"stuId": "",
"stuName": "",
"submitReviewVoList": [
{
"createTime": "2022-06-21 21:35:12",
"createUser": 0,
"discussLikeCount": "12",
"discussReviewContent": "教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。",
"discussReviewFlag": "",
"discussReviewId": "",
"discussReviewPictureAddress": "",
"discussSubmitId": "",
"stuId": "",
"stuName": "罗宗梅",
"submitReplyVoList": [
{
"createTime": "2022-06-21 21:35:12",
"createUser": 0,
"discussReplyId": 0,
"discussReviewId": "",
"replyContent": "教学重难点突出，板书条理清晰。教学步骤设计合理，由浅入深，循序渐进",
"replyFlag": "",
"replyPictureAddress": "",
"reviewStuId": "",
"reviewStuName": "",
"stuId": "",
"stuName": "赵雪莉",
"updateTime": "",
"updateUser": 0
}
],
"updateTime": "",
"updateUser": 0
}
],
"updateTime": "",
"updateUser": 0
},
"msg": "",
"success": true
}),
}

142
src/views/discuss/DiscussPage.vue
View File

@@ -2,7 +2,7 @@
<div class="surveydetail"> <div class="surveydetail">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div <div
style="display: flex; align-items: center; justify-content: space-between" style="display: flex; align-items: center; justify-content: space-between"
> >
<div class="crumb"> <div class="crumb">
<div>混合制项目</div> <div>混合制项目</div>
@@ -14,16 +14,16 @@
<div class="prevnext"> <div class="prevnext">
<div class="prev"> <div class="prev">
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/prev.png" src="../../assets/image/prev.png"
/> />
<div style="margin-left: 7px">上一个</div> <div style="margin-left: 7px">上一个</div>
</div> </div>
<div class="prev" style="margin-left: 31px"> <div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div> <div style="margin-right: 7px">下一个</div>
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/next.png" src="../../assets/image/next.png"
/> />
</div> </div>
</div> </div>
@@ -37,92 +37,73 @@
<!-- 中间部分 --> <!-- 中间部分 -->
<div class="middletitle"> <div class="middletitle">
<div class="title"> <div class="title">
请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求 {{ disDetail.discussName }}
</div> </div>
<button class="btn">发表帖子</button> <button class="btn">发表帖子</button>
</div> </div>
<div class="line clearfix"> <div class="line clearfix">
<div class="linetitle">第二讲：模块化产品展示：班内成员讨论</div> <div class="linetitle">{{ disDetail.discussExplain }}</div>
<div class="radi"></div> <div class="radi"></div>
<div class="intime">进行中</div> <div class="intime">进行中</div>
</div> </div>
<div class="allbtn"> <div class="allbtn">
<button class="btnone">最新</button> <button :class="`btnone ${param.searchType==1?'active':''}`" @click="param.searchType=1">最新</button>
<button class="btntwo" style="margin-left: 20px">最热</button> <button :class="`btntwo ${param.searchType==2?'active':''}`" @click="param.searchType=2"
style="margin-left: 20px">最热
</button>
</div> </div>
<div class="discusslist"> <div class="discusslist" v-for="d in data.rows">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div> <div class="itemtitle">{{ d.discussSubmitTitle }}</div>
<div class="itemdiscuss"> <div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说， {{ d.discussSubmitContent }}
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div> </div>
<div class="allstar clearfix"> <div class="allstar clearfix">
<div class="sameone pinglun"></div> <div class="sameone pinglun"></div>
<div class="count">317</div> <div class="count"> {{ d.discussReviewCount }}</div>
<div class="sameone dianzan"></div> <div class="sameone dianzan"></div>
<div class="count">317</div> <div class="count"> {{ d.discussLikeCount }}</div>
<div class="sameone shoucang"></div> <div class="sameone shoucang"></div>
<div class="count">317</div> <div class="count"> {{ d.discussCollectionCount }}</div>
</div> </div>
<div class="thinline"></div> <div class="thinline"></div>
</div> </div>
<div class="discusslist">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
<div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div>
<div class="allstar clearfix">
<div class="sameone pinglun"></div>
<div class="count">317</div>
<div class="sameone dianzan"></div>
<div class="count">317</div>
<div class="sameone shoucang"></div>
<div class="count">317</div>
</div>
<div class="thinline"></div>
</div>
<div class="discusslist">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
<div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div>
<div class="allstar clearfix">
<div class="sameone pinglun"></div>
<div class="count">317</div>
<div class="sameone dianzan"></div>
<div class="count">317</div>
<div class="sameone shoucang"></div>
<div class="count">317</div>
</div>
<div class="thinline"></div>
</div>
<div class="discusslist">
<div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
<div class="itemdiscuss">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
</div>
<div class="allstar clearfix">
<div class="sameone pinglun"></div>
<div class="count">317</div>
<div class="sameone dianzan"></div>
<div class="count">317</div>
<div class="sameone shoucang"></div>
<div class="count">317</div>
</div>
<div class="thinline" style="margin-bottom: 60px"></div>
</div>
</div> </div>
<!-- 详细内容 --> <!-- 详细内容 -->
</div> </div>
</template> </template>
<script> <script>
import {useRequest} from "@/api/request";
import {DISCUSS_DETAIL, DISCUSS_LIST, TASK_VOTE_DETAIL} from "@/api/api";
import {reactive, ref, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
export default { export default {
name: "DiscussPage", name: "DiscussPage",
setup() {
const {query: {id: discussId}} = useRoute()
const param = ref({
searchType: 1,
discussId
})
const {data} = useRequest(DISCUSS_LIST, param.value)
const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
const state = reactive({
activeName: "first",
});
const handleClick = (id) => {
};
return {
...toRefs(state),
handleClick,
data,
param,
disDetail
};
},
}; };
</script> </script>
@@ -133,6 +114,7 @@ export default {
display: table; display: table;
clear: both; clear: both;
} }
.surveydetail { .surveydetail {
.crumb { .crumb {
color: #fff; color: #fff;
@@ -140,18 +122,21 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
.prevnext { .prevnext {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
.prev { .prev {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
} }
.title { .title {
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
@@ -160,6 +145,7 @@ export default {
margin-top: 17px; margin-top: 17px;
margin-left: -11px; margin-left: -11px;
} }
.bascinfo { .bascinfo {
min-height: 800px; min-height: 800px;
width: 100%; width: 100%;
@@ -173,6 +159,7 @@ export default {
display: flex; display: flex;
margin-top: 64px; margin-top: 64px;
position: relative; position: relative;
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 800; font-weight: 800;
@@ -180,11 +167,13 @@ export default {
margin-left: 79px; margin-left: 79px;
margin-right: 210px; margin-right: 210px;
} }
@media screen and (max-width: 1574px) { @media screen and (max-width: 1574px) {
.title { .title {
margin-bottom: -24px; margin-bottom: -24px;
} }
} }
.btn { .btn {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@@ -201,6 +190,7 @@ export default {
top: 5px; top: 5px;
} }
} }
.line { .line {
display: flex; display: flex;
margin: 47px 45px 0 75px; margin: 47px 45px 0 75px;
@@ -208,12 +198,14 @@ export default {
// height: 50px; // height: 50px;
background: #f9f9f9; background: #f9f9f9;
position: relative; position: relative;
.linetitle { .linetitle {
margin: 14px 120px 17px 28px; margin: 14px 120px 17px 28px;
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #333333; color: #333333;
} }
.radi { .radi {
position: absolute; position: absolute;
width: 11px; width: 11px;
@@ -223,6 +215,7 @@ export default {
margin-top: 19px; margin-top: 19px;
right: 91px; right: 91px;
} }
.intime { .intime {
position: absolute; position: absolute;
margin-top: 15px; margin-top: 15px;
@@ -233,20 +226,28 @@ export default {
right: 36px; right: 36px;
} }
} }
.allbtn { .allbtn {
margin-top: 21px; margin-top: 21px;
margin-left: 105px; margin-left: 105px;
.active {
background: #387df7 !important;
color: #ffffff !important;
}
.btnone { .btnone {
width: 44px; width: 44px;
height: 26px; height: 26px;
background: #387df7;
border-radius: 4px; border-radius: 4px;
border: 0; border: 0;
background-color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #6e7b84;
cursor: pointer; cursor: pointer;
} }
.btntwo { .btntwo {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@@ -256,15 +257,18 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.discusslist { .discusslist {
margin-left: 105px; margin-left: 105px;
margin-top: 39px; margin-top: 39px;
.itemtitle { .itemtitle {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
margin-right: 88px; margin-right: 88px;
} }
.itemdiscuss { .itemdiscuss {
margin-top: 15px; margin-top: 15px;
width: 812px; width: 812px;
@@ -274,6 +278,7 @@ export default {
color: #666666; color: #666666;
line-height: 24px; line-height: 24px;
} }
.allstar { .allstar {
display: flex; display: flex;
margin-top: 18px; margin-top: 18px;
@@ -282,24 +287,29 @@ export default {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
.count { .count {
margin-left: 7px; margin-left: 7px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #b3bdc4; color: #b3bdc4;
} }
.pinglun { .pinglun {
background-image: url(../../assets/image/pinglun.png); background-image: url(../../assets/image/pinglun.png);
} }
.dianzan { .dianzan {
margin-left: 19px; margin-left: 19px;
background-image: url(../../assets/image/dianzan2.png); background-image: url(../../assets/image/dianzan2.png);
} }
.shoucang { .shoucang {
margin-left: 19px; margin-left: 19px;
background-image: url(../../assets/image/shoucang.png); background-image: url(../../assets/image/shoucang.png);
} }
} }
.thinline { .thinline {
// max-width: 1450px; // max-width: 1450px;
width: calc(100% - 88px); width: calc(100% - 88px);

351
src/views/discussdetail/DiscussDetail.vue
View File

@@ -2,7 +2,7 @@
<div class="surveydetailpage"> <div class="surveydetailpage">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div <div
style="display: flex; align-items: center; justify-content: space-between" style="display: flex; align-items: center; justify-content: space-between"
> >
<div class="crumb"> <div class="crumb">
<div>混合制项目</div> <div>混合制项目</div>
@@ -14,16 +14,16 @@
<div class="prevnext"> <div class="prevnext">
<div class="prev"> <div class="prev">
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/prev.png" src="../../assets/image/prev.png"
/> />
<div style="margin-left: 7px">上一个</div> <div style="margin-left: 7px">上一个</div>
</div> </div>
<div class="prev" style="margin-left: 31px"> <div class="prev" style="margin-left: 31px">
<div style="margin-right: 7px">下一个</div> <div style="margin-right: 7px">下一个</div>
<img <img
style="width: 23px; height: 23px" style="width: 23px; height: 23px"
src="../../assets/image/next.png" src="../../assets/image/next.png"
/> />
</div> </div>
</div> </div>
@@ -37,33 +37,26 @@
<!-- 中间部分 --> <!-- 中间部分 -->
<div class="middletitle"> <div class="middletitle">
<div class="title"> <div class="title">
请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求 {{ disDetail.discussName }}
</div> </div>
<button class="btn">回复</button> <button class="btn">回复</button>
</div> </div>
<div class="line clearfix"> <div class="line clearfix">
<div class="linetitle">第二讲：模块化产品展示：班内成员讨论</div> <div class="linetitle">{{ disDetail.discussExplain }}</div>
<div class="radi"></div> <div class="radi"></div>
<div class="intime">进行中</div> <div class="intime">进行中</div>
</div> </div>
<div class="discusscontent clearfix"> <div class="discusscontent clearfix">
<div class="contenttop clearfix"> <div class="contenttop clearfix">
<div class="contenttitle">从营销角度分析：我的团队需要这些能力</div> <div class="contenttitle">{{ data.discussSubmitTitle }}</div>
<div class="same dianzan"></div> <div class="same dianzan" @click="like(data.discussId)"></div>
<div class="count">103</div> <div class="count">{{ data.discussLikeCount }}</div>
<div class="same shoucang"></div> <div class="same shoucang" @click="collection(data.discussId)"></div>
<div class="count">103</div> <div class="count">{{ data.discussCollectionCount }}</div>
</div> </div>
<div class="contentmid"> <div class="contentmid">
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。<br /> {{ data.discussSubmitTitle }}
包容成员<br />
团队工作需要成员在一起不断地讨论，如果一个人固执己见，无法听取他人的意见，或无法和他人达成一致，团队的工作就无法进行下去。团队的效率在于配合的默契，如果达不成这种默契，团队合作就不可能成功。为此，对待团队中其他成员时一定要抱着宽容的心态，讨论问题的时候对事不对人，即使他人犯了错误，也要本着大家共同进步的目的去帮对方改正，而不是一味斥责。同时也要经常检查自己的缺点，如果意识到了自己的缺点，不妨将它坦诚地讲出来，承认自己的缺点，让大家共同帮助你改进，
这是最有效的方法。 <br />
获得支持<br />
要使自己的工作得到大家的支持和认可，而不是反对，必须让大家喜欢你。但一个人又如何让别人来喜欢你呢?除了在工作中互相支援、互相鼓励外，还应该尽量和大家一起去参加各种活动，或者礼貌地关心一下大家的生活。<br />
保持谦虚<br />
任何人都不喜欢骄傲自大的人，这种人在团队合作中也不会被大家认可。可能你在某个方面比其他人强，但你更应该将自己的注意力放在他人的强项上，只有这样，才能看到自己的肤浅和无知。因为团队中的任何一位成员，都有自己的专长，所以必须保持足够的谦虚。
</div> </div>
</div> </div>
</div> </div>
@@ -71,117 +64,110 @@
<div class="bascinfor"> <div class="bascinfor">
<div class="inputone"> <div class="inputone">
<el-input <el-input
v-model="textarea1" v-model="textarea1"
:autosize="{ minRows: 5, maxRows: 5 }" :autosize="{ minRows: 5, maxRows: 5 }"
resize="none" resize="none"
maxlength="100" maxlength="100"
type="textarea" type="textarea"
placeholder="写评论~" placeholder="写评论~"
@input="textareaInput" @input="textareaInput"
/> />
<div class="words">{{ textarealength }}/100</div> <div class="words">{{ textarealength }}/100</div>
<div class="upload"> <div class="upload">
<div class="allimg"> <div style="display: flex">
<div> <div class="allimg" v-for="(img,i) in commentSubmitFileList">
<div class="imgone"></div> <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
<div class="cha"></div> <div class="cha" @click="removeCommentImg(i)"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 131px"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 61px"></div>
</div> </div>
</div> </div>
<datagrid class="uploadAnd"> <datagrid class="uploadAnd">
<button class="btnone clearfix"> <UploadImg v-model="commentSubmitFileList">
<img class="image" src="../../assets/image/uploadimg.png" /> <button class="btnone clearfix">
<div class="shangchuan">上传图片</div> <img class="image" src="../../assets/image/uploadimg.png"/>
</button> <div class="shangchuan">上传图片</div>
</button>
</UploadImg>
<button class="btntwo">发表</button> <button class="btntwo">发表</button>
</datagrid> </datagrid>
</div> </div>
<div class="thinline"></div> <div class="thinline"></div>
<div class="bottom"> <div class="bottom">
<div class="header"> <div v-for="row in data.submitReviewVoList">
<div class="avator"></div> <div class="header">
<div class="id">罗宗梅</div> <div class="avator"></div>
<div class="showCareer">(显示事业)</div> <div class="id">{{ row.stuName }}</div>
<div class="idThink">理性思考，崇尚科学</div> <div class="showCareer">(显示事业)</div>
</div> <div class="idThink">理性思考，崇尚科学</div>
<div class="discuss clearfix"> </div>
<div class="discussmain clearfix"> <div class="discuss clearfix">
<div class="talkmain"> <div class="discussmain clearfix">
教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。 <div class="talkmain">
{{ row.discussReviewContent }}
</div>
</div> </div>
<!-- <div class="talk"></div> --> <div class="intime">{{ row.createTime }}</div>
</div> <div class="likeYou">
<div class="intime">2022-06-21&nbsp;21:35:12</div> <div class="same pinglun"></div>
<div class="likeYou"> <div class="count">{{ row.discussReviewCount }}</div>
<div class="same pinglun"></div> <div class="same dianzan" style="margin-left: 19px"></div>
<div class="count">317</div> <div class="count">{{ row.discussLikeCount }}</div>
<div class="same dianzan" style="margin-left: 19px"></div> </div>
<div class="count">111</div> <div v-for="replay in row.submitReplyVoList">
</div> <div class="reply">
<div class="reply"> <div class="sameava avaone"></div>
<div class="sameava avaone"></div> <div class="sameuser">{{ replay.stuName }}</div>
<div class="sameuser">赵雪莉</div> <div class="centerreply">回复</div>
<div class="centerreply">回复</div> <div class="sameava avatwo"></div>
<div class="sameava avatwo"></div> <div class="sameuser">{{ row.stuName }}</div>
<div class="sameuser">罗宗梅</div> <div class="replytime">{{ replay.createTime }}</div>
<div class="replytime">2022-06-21 21:35:12</div> </div>
</div> <div class="allreplyimg">
<div class="allreplyimg"> <div class="singleimg"></div>
<div class="singleimg"></div> </div>
<div class="singleimg"></div> <div class="mainreply">
<div class="singleimg"></div> <div class="replydetail">
</div> {{ replay.replyContent }}
<div class="mainreply"> </div>
<div class="replydetail"> <!-- <div class="talk"></div> -->
教学重难点突出，板书条理清晰。教学步骤设计合理，由浅入深，循序渐进 </div>
<div class="likeYou">
<div class="same pinglun"></div>
<div class="count">无</div>
<div class="same dianzan" style="margin-left: 19px"></div>
<div class="count">无</div>
</div>
</div> </div>
<!-- <div class="talk"></div> -->
</div>
<div class="likeYou">
<div class="same pinglun"></div>
<div class="count">317</div>
<div class="same dianzan" style="margin-left: 19px"></div>
<div class="count">111</div>
</div> </div>
</div>
<div class="discuss clearfix">
<div class="inreply"> <div class="inreply">
<el-input <el-input
v-model="textarea2" v-model="textarea2"
:autosize="{ minRows: 5, maxRows: 5 }" :autosize="{ minRows: 5, maxRows: 5 }"
resize="none" resize="none"
maxlength="100" maxlength="100"
type="textarea" type="textarea"
@input="textareaInputdown" @input="textareaInputdown"
/> />
<div class="words">{{ textarealength2 }}/100</div> <div class="words">{{ textarealength2 }}/100</div>
<div class="upload"> <div class="upload">
<div class="allimg"> <div style="display: flex">
<div> <div class="allimg" v-for="(img,i) in fileList">
<div class="imgone"></div> <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
<div class="cha"></div> <div class="cha" @click="removeImg(i)"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 131px"></div>
</div>
<div style="margin-left: 15px">
<div class="imgone"></div>
<div class="cha" style="right: 61px"></div>
</div> </div>
</div> </div>
<datagrid class="uploadAnd"> <datagrid class="uploadAnd">
<button class="btnone clearfix"> <UploadImg v-model="fileList">
<img class="image" src="../../assets/image/uploadimg.png" /> <button class="btnone clearfix">
<div class="shangchuan">上传图片</div> <img class="image" src="../../assets/image/uploadimg.png"/>
</button> <div class="shangchuan">上传图片</div>
</button>
</UploadImg>
<button class="btntwo">发表</button> <button class="btntwo">发表</button>
</datagrid> </datagrid>
</div> </div>
@@ -194,34 +180,70 @@
</div> </div>
</template> </template>
<script> <script setup>
import { reactive, toRefs } from "vue"; import {reactive, ref, toRefs} from "vue";
// import { expandKeys } from "element-plus/es/components/table-v2/src/common"; import {useRoute} from "vue-router/dist/vue-router";
export default { import {request, useRequest} from "@/api/request";
name: "DiscussDetail", import {
setup() { DISCUSS_COLLECTION,
const state = reactive({ DISCUSS_DETAIL,
textarea1: "", DISCUSS_LIKE,
textarealength: 0, DISCUSS_LIST,
textarea2: "", DISCUSS_SUBMIT_REVIEW_LIST,
textarealength2: 0, FILE_UPLOAD
}); } from "@/api/api";
const textareaInput = (e) => { import UploadImg from '@/components/img/UploadImg.vue'
// console.log("eee", e);
state.textarea1 = e; const {query: {id: discussSubmitId, discussId}} = useRoute()
state.textarealength = e.length;
}; const {data} = useRequest(DISCUSS_SUBMIT_REVIEW_LIST, {discussSubmitId})
const textareaInputdown = (e) => {
state.textarea2 = e; const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
state.textarealength2 = e.length;
}; const fileList = ref([])
return { const commentSubmitFileList = ref([])
...toRefs(state),
textareaInput, const state = reactive({
textareaInputdown, textarea1: "",
}; textarealength: 0,
}, textarea2: "",
textarealength2: 0,
});
const {
textarea1,
textarealength,
textarea2,
textarealength2
} = toRefs(state)
const textareaInput = (e) => {
state.textarea1 = e;
state.textarealength = e.length;
}; };
const textareaInputdown = (e) => {
state.textarea2 = e;
state.textarealength2 = e.length;
};
function removeImg(i) {
fileList.value.splice(i, 1)
}
function removeCommentImg() {
commentSubmitFileList.value.splice(i, 1)
}
function like(discussSubmitId) {
data.value.discussLikeCount += 1
request(DISCUSS_LIKE, {discussSubmitId})
//todo 帖子和评论 返回是否点赞和收藏
}
function collection(discussSubmitId) {
data.value.discussCollectionCount += 1
request(DISCUSS_COLLECTION, {discussSubmitId})
}
</script> </script>
<style lang="scss"> <style lang="scss">
@@ -231,6 +253,7 @@ export default {
display: table; display: table;
clear: both; clear: both;
} }
.surveydetailpage { .surveydetailpage {
.crumb { .crumb {
color: #fff; color: #fff;
@@ -238,18 +261,21 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
.prevnext { .prevnext {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
.prev { .prev {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
} }
.title { .title {
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
@@ -258,6 +284,7 @@ export default {
margin-top: 17px; margin-top: 17px;
margin-left: -11px; margin-left: -11px;
} }
.bascinfo { .bascinfo {
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
@@ -268,6 +295,7 @@ export default {
display: flex; display: flex;
margin-top: 64px; margin-top: 64px;
position: relative; position: relative;
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 800; font-weight: 800;
@@ -275,11 +303,13 @@ export default {
margin-left: 79px; margin-left: 79px;
margin-right: 210px; margin-right: 210px;
} }
@media screen and (max-width: 1574px) { @media screen and (max-width: 1574px) {
.title { .title {
margin-bottom: -24px; margin-bottom: -24px;
} }
} }
.btn { .btn {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@@ -296,6 +326,7 @@ export default {
top: 5px; top: 5px;
} }
} }
.line { .line {
display: flex; display: flex;
margin: 47px 45px 0 75px; margin: 47px 45px 0 75px;
@@ -303,12 +334,14 @@ export default {
height: 50px; height: 50px;
background: #f9f9f9; background: #f9f9f9;
position: relative; position: relative;
.linetitle { .linetitle {
margin: 14px 0 17px 28px; margin: 14px 0 17px 28px;
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #333333; color: #333333;
} }
.radi { .radi {
position: absolute; position: absolute;
width: 11px; width: 11px;
@@ -318,6 +351,7 @@ export default {
margin-top: 19px; margin-top: 19px;
right: 91px; right: 91px;
} }
.intime { .intime {
position: absolute; position: absolute;
margin-top: 15px; margin-top: 15px;
@@ -328,22 +362,27 @@ export default {
right: 36px; right: 36px;
} }
} }
.discusscontent { .discusscontent {
margin-left: 105px; margin-left: 105px;
margin-top: 35px; margin-top: 35px;
.contenttop { .contenttop {
display: flex; display: flex;
.contenttitle { .contenttitle {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.same { .same {
width: 14px; width: 14px;
height: 14px; height: 14px;
margin-top: 4px; margin-top: 4px;
margin-left: 20px; margin-left: 20px;
} }
.count { .count {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@@ -351,15 +390,18 @@ export default {
margin-top: 4px; margin-top: 4px;
margin-left: 7px; margin-left: 7px;
} }
.dianzan { .dianzan {
background-image: url(../../assets/image/dianzan2.png); background-image: url(../../assets/image/dianzan2.png);
// background-size: 100%; // background-size: 100%;
} }
.shoucang { .shoucang {
background-image: url(../../assets/image/shoucang.png); background-image: url(../../assets/image/shoucang.png);
// background-size: 100%; // background-size: 100%;
} }
} }
.contentmid { .contentmid {
margin: 15px 47px 30px 0; margin: 15px 47px 30px 0;
font-size: 14px; font-size: 14px;
@@ -369,6 +411,7 @@ export default {
} }
} }
} }
.bascinfor { .bascinfor {
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
@@ -382,6 +425,7 @@ export default {
// max-height: 110px; // max-height: 110px;
margin-left: 88px; margin-left: 88px;
margin-top: 44px; margin-top: 44px;
.words { .words {
position: absolute; position: absolute;
right: 15px; right: 15px;
@@ -391,6 +435,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #333330; color: #333330;
} }
.el-textarea__inner { .el-textarea__inner {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@@ -401,12 +446,14 @@ export default {
background-color: rgba(245, 246, 247, 1); background-color: rgba(245, 246, 247, 1);
padding: 11px 25px; padding: 11px 25px;
} }
.el-textarea__inner::placeholder { .el-textarea__inner::placeholder {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
line-height: 24px; line-height: 24px;
} }
// .el-input__inner { // .el-input__inner {
// &::-webkit-input-placeholder { // &::-webkit-input-placeholder {
// /* WebKit browsers 适配谷歌 */ // /* WebKit browsers 适配谷歌 */
@@ -419,6 +466,7 @@ export default {
.allimg { .allimg {
position: relative; position: relative;
display: flex; display: flex;
.imgone { .imgone {
margin-top: 24px; margin-top: 24px;
width: 55px; width: 55px;
@@ -427,6 +475,7 @@ export default {
background-image: url(../../assets/image/px.png); background-image: url(../../assets/image/px.png);
background-size: 100%; background-size: 100%;
} }
.cha { .cha {
cursor: pointer; cursor: pointer;
top: 15px; top: 15px;
@@ -440,12 +489,15 @@ export default {
background-size: 100%; background-size: 100%;
} }
} }
.uploadAnd { .uploadAnd {
margin-top: 21px; margin-top: 21px;
.btnone { .btnone {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: 140px; right: 140px;
.image { .image {
padding-top: 8px; padding-top: 8px;
width: 18px; width: 18px;
@@ -453,6 +505,7 @@ export default {
// margin-top: 10px; // margin-top: 10px;
margin-left: -60px; margin-left: -60px;
} }
.shangchuan { .shangchuan {
position: absolute; position: absolute;
right: 20px; right: 20px;
@@ -464,12 +517,14 @@ export default {
color: #2478ff; color: #2478ff;
line-height: 24px; line-height: 24px;
} }
width: 126px; width: 126px;
height: 36px; height: 36px;
border: 1px solid #2478ff; border: 1px solid #2478ff;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: #fff;
} }
.btntwo { .btntwo {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@@ -485,6 +540,7 @@ export default {
} }
} }
} }
.thinline { .thinline {
margin-top: 26px; margin-top: 26px;
// width: 1635px; // width: 1635px;
@@ -492,6 +548,7 @@ export default {
margin-left: -50px; margin-left: -50px;
opacity: 0.2; opacity: 0.2;
} }
.bottom { .bottom {
margin-top: 31px; margin-top: 31px;
// width: 100px; // width: 100px;
@@ -499,6 +556,7 @@ export default {
// background-color: #bfa; // background-color: #bfa;
.header { .header {
display: flex; display: flex;
.avator { .avator {
width: 41px; width: 41px;
height: 41px; height: 41px;
@@ -506,6 +564,7 @@ export default {
background-image: url(../../assets/image/px.png); background-image: url(../../assets/image/px.png);
background-size: 100%; background-size: 100%;
} }
.id { .id {
margin-left: 8px; margin-left: 8px;
font-size: 14px; font-size: 14px;
@@ -514,6 +573,7 @@ export default {
color: #333333; color: #333333;
line-height: 41px; line-height: 41px;
} }
.showCareer { .showCareer {
margin-left: 7px; margin-left: 7px;
height: 41px; height: 41px;
@@ -522,6 +582,7 @@ export default {
color: #666666; color: #666666;
line-height: 41px; line-height: 41px;
} }
.idThink { .idThink {
margin-left: 17px; margin-left: 17px;
height: 41px; height: 41px;
@@ -531,11 +592,12 @@ export default {
line-height: 41px; line-height: 41px;
} }
} }
.discuss { .discuss {
margin-left: 48px; margin-left: 48px;
margin-top: 23px; margin-top: 23px;
// width: 100px; // width: 100px;
widows: 100%; width: 100%;
// height: 100px; // height: 100px;
// background-color: orange; // background-color: orange;
.discussmain { .discussmain {
@@ -543,6 +605,7 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
position: relative; position: relative;
.talkmain { .talkmain {
margin-right: 25px; margin-right: 25px;
margin-top: 2px; margin-top: 2px;
@@ -550,6 +613,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
} }
// .talk { // .talk {
// position: absolute; // position: absolute;
// right: 0; // right: 0;
@@ -559,27 +623,33 @@ export default {
// background-size: 100%; // background-size: 100%;
// } // }
} }
.intime { .intime {
margin-top: 11px; margin-top: 11px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
} }
.likeYou { .likeYou {
margin-top: 15px; margin-top: 15px;
display: flex; display: flex;
.same { .same {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
.pinglun { .pinglun {
background-image: url(../../assets/image/pinglun.png); background-image: url(../../assets/image/pinglun.png);
background-size: 100%; background-size: 100%;
} }
.dianzan { .dianzan {
background-image: url(../../assets/image/dianzan2.png); background-image: url(../../assets/image/dianzan2.png);
background-size: 100%; background-size: 100%;
} }
.count { .count {
margin-left: 7px; margin-left: 7px;
margin-top: -1px; margin-top: -1px;
@@ -588,6 +658,7 @@ export default {
color: #b3bdc4; color: #b3bdc4;
} }
} }
.reply { .reply {
display: flex; display: flex;
margin-top: 32px; margin-top: 32px;
@@ -599,6 +670,7 @@ export default {
height: 29px; height: 29px;
border-radius: 50%; border-radius: 50%;
} }
.sameuser { .sameuser {
margin-left: 14px; margin-left: 14px;
line-height: 29px; line-height: 29px;
@@ -607,6 +679,7 @@ export default {
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;
} }
.centerreply { .centerreply {
height: 29px; height: 29px;
font-size: 14px; font-size: 14px;
@@ -616,14 +689,17 @@ export default {
margin-left: 23px; margin-left: 23px;
margin-right: 17px; margin-right: 17px;
} }
.avaone { .avaone {
background-image: url(../../assets/image/px.png); background-image: url(../../assets/image/px.png);
background-size: 100%; background-size: 100%;
} }
.avatwo { .avatwo {
background-image: url(../../assets/image/px.png); background-image: url(../../assets/image/px.png);
background-size: 100%; background-size: 100%;
} }
.replytime { .replytime {
margin-left: 17px; margin-left: 17px;
height: 29px; height: 29px;
@@ -633,9 +709,11 @@ export default {
line-height: 29px; line-height: 29px;
} }
} }
.allreplyimg { .allreplyimg {
display: flex; display: flex;
margin-top: 21px; margin-top: 21px;
.singleimg { .singleimg {
margin-right: 7px; margin-right: 7px;
width: 65px; width: 65px;
@@ -645,9 +723,11 @@ export default {
background-size: 100%; background-size: 100%;
} }
} }
.mainreply { .mainreply {
display: flex; display: flex;
margin-top: 16px; margin-top: 16px;
.replydetail { .replydetail {
// width: 462px; // width: 462px;
height: 23px; height: 23px;
@@ -657,6 +737,7 @@ export default {
line-height: 23px; line-height: 23px;
margin-right: 11px; margin-right: 11px;
} }
// .talk { // .talk {
// width: 23px; // width: 23px;
// height: 23px; // height: 23px;

227
src/views/homework/HomeworkPage.vue
View File

@@ -47,72 +47,64 @@
</div> </div>
</div> </div>
</div> </div>
<el-upload <UploadImg v-model="fileList" ref="uploadRef">
v-model:file-list="fileList" <button
:action="FILE_UPLOAD" class="shangchuan"
:on-change="handleChange" style="cursor: pointer"
> @mousemove='showFileList=1'
<template #trigger> @mouseout='showFileList=0'
<button >
class="shangchuan" 上传
style="cursor: pointer" </button>
@click="uploadFile" </UploadImg>
>
上传
</button>
</template>
</el-upload>
<div <div
class="uploadDetail" class="uploadDetail"
:style="{ display: uploadfile ? 'block' : 'none' }" :style="{ display: showFileList ? 'block' : 'none' }"
@mousemove='showFileList=1'
@mouseout='showFileList=0'
style="padding-top: 60px"
> >
<div class="triangle"></div> <div class="triangle"></div>
<div class="square clearfix"> <div class="square clearfix">
<div class="squarecontent1"> <div class="squarecontent1" v-for="(file,i) in fileList">
<div class="rar"></div> <FileTypeImg v-model="file.name" :style="{margin:'12px 15px 0 27px'}"></FileTypeImg>
<div class="rarDetail"> <div class="rarDetail">
<span class="detail1" style="margin-right: 130px"> <span class="detail1" style="margin-right: 130px">
文件名称1.rar {{ file.name }}
</span> </span>
<span class="detail2" style="margin-right: 10px">48%</span> <span class="detail2" style="margin-right: 10px">{{ file.percentage }}%</span>
<span class="detail1">正在上传</span> <span class="detail1">{{
{
ready: '正在上传',
abort: '暂停',
uploading: '正在上传',
fail: '上传失败',
success: '上传成功'
}[file.status]
}}</span>
<div class="progress"> <div class="progress">
<div class="progressinner"></div> <div class="progressinner" :style="{width:`${291*file.percentage/100}px`}"></div>
</div> </div>
</div> </div>
<button class="btn btndetail">暂停</button> <button class="btn btndetail" @click="reUpload(i)">{{
<button class="btn">取消</button> {
</div> ready: '暂停',
uploading: '暂停',
<div class="squarecontent2"> abort: '开始',
<div class="rar"></div> fail: '重传',
<div class="rarDetail"> }[file.status]
<span class="detail1" style="margin-right: 130px"> }}
文件名称2.rar </button>
</span> <button class="btn" @click="remove">{{
<span class="detail2" style="margin-right: 10px">80%</span> {
<span class="detail1">上传失败</span> ready: '取消',
<div class="progress"> abort: '取消',
<div class="progressinner"></div> uploading: '取消',
</div> fail: '取消',
</div> success: '删除'
<button class="btn btndetail">重传</button> }[file.status]
<button class="btn">取消</button> }}
</div> </button>
<div class="squarecontent3">
<div class="rar"></div>
<div class="rarDetail">
<span class="detail1" style="margin-right: 125px">
文件名称3.rar
</span>
<span class="detail2" style="margin-right: 10px">100%</span>
<span class="detail1">上传成功</span>
<div class="progress">
<div class="progressinner"></div>
</div>
</div>
<button class="btn btndetail">删除</button>
</div> </div>
</div> </div>
</div> </div>
@@ -224,77 +216,67 @@
</div> </div>
</template> </template>
<script> <script setup>
import {reactive, toRefs} from "vue"; import {reactive, ref, toRefs} from "vue";
import {request, useRequest} from "@/api/request"; import {request, useRequest} from "@/api/request";
import {TASK_WORK_COMMIT, TASK_WORK_DETAIL, FILE_UPLOAD} from "@/api/api"; import {TASK_WORK_COMMIT, TASK_WORK_DETAIL} from "@/api/api";
import dayjs from "dayjs"; import dayjs from "dayjs";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import UploadImg from '@/components/img/UploadImg.vue'
import FileTypeImg from "@/components/FileTypeImg.vue";
export default { const {data} = useRequest(TASK_WORK_DETAIL, {})
name: "homeWork", const fileList = ref([])
setup() { const uploadRef = ref()
const {data} = useRequest(TASK_WORK_DETAIL, {}) const showFileList = ref(0)
const state = reactive({ const state = reactive({
activeName: "first", textarea1: "",
uploadfile: false, history: [
fileList: [], {
textarea1: "", id: 1,
history: [ time: "2022-7-20 00:00",
{ content: "大唐之音鉴赏 - 2022/7/20.zip",
id: 1, },
time: "2022-7-20 00:00", {
content: "大唐之音鉴赏 - 2022/7/20.zip", id: 2,
}, time: "2022-7-18 00:00",
{ content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
id: 2, },
time: "2022-7-18 00:00", {
content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…", id: 3,
}, time: "2022-7-17 00:00",
{ content: "湖北黄冈语文压卷题.doc",
id: 3, },
time: "2022-7-17 00:00", {
content: "湖北黄冈语文压卷题.doc", id: 2,
}, time: "2022-7-18 00:00",
{ content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
id: 2, },
time: "2022-7-18 00:00", {
content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…", id: 3,
}, time: "2022-7-17 00:00",
{ content: "湖北黄冈语文压卷题.doc",
id: 3, },
time: "2022-7-17 00:00", ],
content: "湖北黄冈语文压卷题.doc", })
}, const {history, textarea1} = toRefs(state);
], const router = useRouter()
}); const handleClick = () => {
const router = useRouter() request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => {
const handleClick = () => { router.back()
request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => { })
router.back()
})
};
const uploadFile = () => {
state.uploadfile = !state.uploadfile;
};
const handleChange = () => {
}
const textareaInput = (e) => {
// console.log("eee", e);
state.textarea1 = e;
};
return {
...toRefs(state),
data,
dayjs,
handleClick,
uploadFile,
textareaInput,
FILE_UPLOAD
};
},
}; };
const textareaInput = (e) => {
state.textarea1 = e;
};
function remove(i) {
uploadRef.value.remove(i)
}
function reUpload(i) {
uploadRef.value.reUpload(i)
}
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -408,7 +390,7 @@ export default {
.uploadDetail { .uploadDetail {
position: absolute; position: absolute;
top: 235px; //top: 235px;
right: 3px; right: 3px;
z-index: 100; z-index: 100;
@@ -465,7 +447,6 @@ export default {
border-radius: 4px; border-radius: 4px;
.progressinner { .progressinner {
width: 131px;
height: 8px; height: 8px;
background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%); background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
border-radius: 4px; border-radius: 4px;

8
vite.config.js
View File

@@ -23,6 +23,14 @@ export default defineConfig(({command}) =>
alias: [ alias: [
{find: '@', replacement: path.resolve(__dirname, 'src')} {find: '@', replacement: path.resolve(__dirname, 'src')}
] ]
}, server: {
proxy: {
'/file/upload': {
target: 'http://111.231.196.214:30001',
changeOrigin: true,
}
}
} }
}) })
) )