style:增加项目列表学习进度搜索,增加项目起止时间;增加讨论模块部分接口及样式接入。

This commit is contained in:
wyx
2023-02-02 15:41:10 +08:00
parent f5eddf6236
commit 9d1c1221ac
4 changed files with 299 additions and 37 deletions

View File

@@ -71,3 +71,7 @@ export const EXTERNALEXAM = `/external/exam/queryExternalExam`
// 外链详情接口
export const LINKGETONE = `/link/getOne`
// 讨论模块
// -- 根据讨论的Id查询讨论发表的帖子
export const QueryDiscussSubmitDetailByDiscussId = '/discussSubmit/queryDiscussSubmitDetailByDiscussId post'

View File

@@ -36,48 +36,47 @@
</div>
<!-- 面包屑导航 -->
<!-- 标题 -->
<div class="title">{{ info.name }}</div>
<div class="title">讨论{{ state.info.discussDtoList[0].discussName }}</div>
<!-- 标题 -->
<!-- 详细内容 -->
<div class="bascinfo clearfix">
<!-- 中间部分 -->
<div class="middletitle">
<div class="title">
{{ info.name }}
{{ state.info.discussDtoList[0].discussName }}
</div>
<!-- <button class="btn">发表帖子</button>-->
<button class="btn">发表帖子</button>
</div>
<div>
<div class="line clearfix">
<div class="linetitle">{{ info.sName }}</div>
<div class="linetitle">{{ state.info.discussDtoList[0].discussName }}</div>
<div class="radi"></div>
<div class="intime">进行中</div>
</div>
<div class="allbtn">
<button :class="`btnone ${param.searchType == 1 ? 'active' : ''}`">
<button :class="`btnone ${state.searchType == 1 ? 'active' : ''}`" @click="nowPost(state.info.discussDtoList[0].discussId)">
最新
</button>
<button
:class="`btntwo ${param.searchType == 2 ? 'active' : ''}`"
style="margin-left: 20px"
>
:class="`btnone ${state.searchType == 2 ? 'active' : ''}`"
style="margin-left: 20px" @click="hotPost(state.info.discussDtoList[0].discussId)">
最热
</button>
</div>
<div
class="discusslist"
v-for="(d, j) in info?.discussDtoList"
v-for="(d, j) in state?.postList"
:key="j"
>
<div class="itemtitle">{{ d.discussName }}</div>
<div class="itemdiscuss">
{{ d.discussExplain }}
<div class="itemtitle" @click="comment(d)">{{ d.discussSubmitTitle }}</div>
<div class="itemdiscuss" @click="comment(d)">
{{ d.discussSubmitContent }}
</div>
<div class="allstar clearfix">
<div @click="comment(d)" style="display: flex; cursor: pointer">
<span class="iconfont icon-pinglun" style="color: #b3bdc4"></span>
<div class="count">{{ d.commentNum || 0 }}</div>
<div class="count">{{ d.discussReviewCount || 0 }}</div>
</div>
<div @click="like(d)" style="display: flex; cursor: pointer">
<span
@@ -87,7 +86,7 @@
marginLeft: '19px',
}"
></span>
<div class="count">{{ d.praiseNum || 0 }}</div>
<div class="count">{{ d.discussLikeCount || 0 }}</div>
</div>
<div @click="collection(d)" style="display: flex; cursor: pointer">
<span
@@ -97,11 +96,23 @@
marginLeft: '19px',
}"
></span>
<div class="count">{{ d.collectionNum || 0 }}</div>
<div class="count">{{ d.discussCollectionCount || 0 }}</div>
</div>
</div>
<div class="thinline"></div>
</div>
<div
style="display:flex;justify-content:center;align-items:center;margin-top:36px;">
<!-- 分页 -->
<el-pagination
v-model:current-page="state.currentPage"
:page-size="state.pageSize"
:small="small"
layout="prev, pager, next, jumper"
:total="state.total"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
<!-- 详细内容 -->
@@ -110,7 +121,12 @@
<script setup>
import { request, useRequest } from "@/api/request";
import { COMMENT_COLLECTION, COMMENT_PRAISE, DISCUSS_LIST } from "@/api/api";
import {
COMMENT_COLLECTION,
COMMENT_PRAISE,
DISCUSS_LIST,
QueryDiscussSubmitDetailByDiscussId
} from "@/api/api";
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
@@ -126,12 +142,203 @@ const param = ref({
type,
id,
});
const { data: info } = useRequest(DISCUSS_LIST, param.value);
const state = reactive({
activeName: "first",
info:{},
pageNo:1,
pageSize:10,
searchType:1,
postList: [], //帖子列表
total:0, // 帖子总条数
currentPage: 1
});
useRequest(DISCUSS_LIST, param.value, (e)=>{
console.log('我是获取的讨论详情数据', e)
state.info = e.data;
// 获取该讨论下面的帖子
console.log('我是查询讨论下帖子的参数',{
"discussId": e.data.discussDtoList[0].discussId,
"pageNo": state.pageNo,
"pageSize": state.pageSize,
"searchType": state.searchType
})
useRequest(
QueryDiscussSubmitDetailByDiscussId,
{
"discussId": e.data.discussDtoList[0].discussId,
"pageNo": state.pageNo,
"pageSize": state.pageSize,
"searchType": state.searchType
},
(e)=>{
console.log('我是当前讨论下的帖子',e)
state.postList = e.data.rows;
state.total = e.data.total;
// 添加一条假的数据 供测试使用
state.postList =[
{
"createTime": "",
"createUser": 0,
"discussCollectionCount": "234",
"discussId": "",
"discussLikeCount": "3576",
"discussReviewCount": "12353",
"discussSubmitContent": "帖子的内容----帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容",
"discussSubmitId": "",
"discussSubmitPictureAddress": "",
"discussSubmitTitle": "我是一个用来测试的帖子标题",
"stuId": "",
"stuName": "",
"updateTime": "",
"updateUser": 0,
"submitReviewVoList": [
{
"createTime": "",
"createUser": 0,
"discussLikeCount": "",
"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
}
]
}
]
state.total = 100;
})
});
// 获取帖子
function getPostList(discussId) {
console.log({
"discussId": discussId,
"pageNo": state.pageNo,
"pageSize": state.pageSize,
"searchType": state.searchType
})
useRequest(
QueryDiscussSubmitDetailByDiscussId,
{
"discussId": discussId,
"pageNo": state.pageNo,
"pageSize": state.pageSize,
"searchType": state.searchType
},
(e)=>{
console.log('我是当前讨论下的帖子',e)
state.postList = e.data.rows;
state.total = e.data.total;
// 添加一条假的数据 供测试使用
state.postList =[
{
"createTime": "",
"createUser": 0,
"discussCollectionCount": "234",
"discussId": "",
"discussLikeCount": "3576",
"discussReviewCount": "12353",
"discussSubmitContent": "帖子的内容----帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容",
"discussSubmitId": "",
"discussSubmitPictureAddress": "",
"discussSubmitTitle": "我是一个用来测试的帖子标题",
"stuId": "",
"stuName": "",
"updateTime": "",
"updateUser": 0,
"submitReviewVoList": [
{
"createTime": "",
"createUser": 0,
"discussLikeCount": "",
"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
}
]
}
]
state.total = 100;
})
}
// 最新
function nowPost(id) {
state.searchType = 1;
state.pageNo = 1;
state.currentPage = 1;
getPostList(id);
}
// 最热
function hotPost() {
state.searchType = 2;
state.pageNo = 1;
state.currentPage = 1;
getPostList(id);
}
// 分页
function handleCurrentChange(e, k) {
console.log('分页打印', e, k)
state.currentPage = e;
state.pageNo = e;
getPostList(state.info.discussDtoList[0].discussId);
}
function comment({ discussId: id }) {
router.push({ path: "discussdetail", query: { id, type } });
}
@@ -320,6 +527,7 @@ function collection(d) {
font-weight: 500;
color: #333333;
margin-right: 88px;
cursor: pointer;
}
.itemdiscuss {
@@ -330,6 +538,7 @@ function collection(d) {
font-weight: 500;
color: #666666;
line-height: 24px;
cursor: pointer;
}
.allstar {

View File

@@ -289,7 +289,7 @@
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router/dist/vue-router";
import { useRoute, useRouter } from "vue-router/dist/vue-router";
import { request, usePage, useRequest } from "@/api/request";
import {
COMMENT_ADD,
@@ -301,6 +301,11 @@ import {
} from "@/api/api";
import UploadImg from "@/components/img/UploadImg.vue";
const router = useRouter();
const returnclick = () => {
router.back();
};
const {
query: { id, discussSubmitId, type, pName, sName },
} = useRoute();

View File

@@ -18,18 +18,26 @@
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="value" class="m-2" placeholder="Select">
</el-select> -->
<div style="width: 200px; margin-right: 20px">
<el-input v-model="projectname" placeholder="请输入项目名称" />
</div>
<el-select
@change="choiceStatus"
v-model="stateValue"
class="m-2"
placeholder="请选择学习进度"
style="width: 200px; margin-right: 20px">
<el-option
v-for="item in studyProgress"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> -->
<div style="width: 200px; margin-right: 20px">
<el-input v-model="projectname" placeholder="请输入项目名称" />
</div>
</el-select>
<div style="width: 420px">
<el-date-picker v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size" @change="selectTime"/>
@@ -52,7 +60,7 @@
</div>
<div v-else class="projectList" v-for="(i, k) in projectList" :key="k">
<div style="display: flex">
<img style="width: 253px; height: 144px; border-radius: 4px" :src="i.picUrl" />
<img style="width: 253px; height: 175px; border-radius: 4px" :src="i.picUrl" />
<div style="margin-left: 29px">
<div class="projectName" :title="i.name">
{{ i.name }}
@@ -70,6 +78,7 @@
</div>
</div>
<div class="studyNew" v-if="i.lastStudyTime">最新一次学习时间{{ i.lastStudyTime }}</div>
<div class="studyNew">项目起止时间{{ i.beginTime }} ~ {{ i.endTime }}</div>
</div>
</div>
<div class="tobestarted" v-if="i.status == 2" @click="goProjectDetails(i)">
@@ -131,7 +140,24 @@ import { ElLoading } from 'element-plus';
const router = useRouter();
const projectClassify = [];
const studyProgress = [];
const studyProgress = [
{
value:0,
label:"未开始"
},
{
value:1,
label:"进行中"
},
{
value:2,
label:"已完成"
},
{
value:3,
label:"已结束"
},
];
const projectList = ref([]); //项目列表
const pageSize = ref(60); //每页条数
const currentPage = ref(1); //当前页数
@@ -140,6 +166,7 @@ const projectname = ref(""); //项目名称
const searchTime = ref(""); //选择时间
const beginTime = ref(""); //结束时间
const endTime = ref(""); //开始时间
const stateValue = ref(undefined)
const dialogVisible = ref(false)
const userInfo = computed(() => store.state.userInfo);
@@ -154,12 +181,21 @@ const getProject = () => {
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
})
console.log('我是搜索传递的参数',{
beginTime: beginTime.value,
endTime: endTime.value,
key: projectname.value,
pageNo: currentPage.value,
pageSize: pageSize.value,
status: stateValue.value
})
request(PROJECT_LIST, {
beginTime: beginTime.value,
endTime: endTime.value,
key: projectname.value,
pageNo: currentPage.value,
pageSize: pageSize.value,
status: stateValue.value
})
.then((res) => {
console.log("获取成功", res);
@@ -205,6 +241,7 @@ const resetClick = () => {
currentPage.value = 1;
beginTime.value = "";
endTime.value = "";
stateValue.value ="";
getProject();
console.log("点击重置");
};
@@ -229,6 +266,13 @@ const goProjectDetails = (value) => {
,'_top')}`
);
};
// 项目状态
const choiceStatus = (e) => {
console.log(e)
stateValue.value = e
}
</script>
<style lang="scss">
.projectManage {