JayChou 3 months ago
commit 1390172f40
  1. 10
      .env.development
  2. 3
      generated/core/OpenAPI.ts
  3. 6
      src/api/user/chapter.js
  4. 21
      src/api/user/messag.js
  5. 6
      src/api/user/object.js
  6. 4
      src/api/user/send.js
  7. 6
      src/layout/menu/index.vue
  8. 2
      src/router/routers copy.ts
  9. 124
      src/router/routers.ts
  10. 91
      src/views/MyCourseStudy/learningProcess.vue
  11. 7
      src/views/configurationPage/index.vue
  12. 63
      src/views/course/basicCourseInformation.vue
  13. 37
      src/views/course/components/course-brief.vue
  14. 37
      src/views/course/components/course-chapters.vue
  15. 239
      src/views/course/components/course-object.vue
  16. 70
      src/views/course/components/courseEdit.vue
  17. 193
      src/views/course/components/knowledge-statistic.vue
  18. 149
      src/views/message/components/messageContent.vue
  19. 2
      src/views/message/components/receiveContentList.vue
  20. 80
      src/views/message/components/sendMessage.vue
  21. 10
      src/views/message/components/sendMessageList.vue
  22. 45
      src/views/message/index.vue
  23. 101
      src/views/news/components/newsContentDetails.vue
  24. 258
      src/views/news/index.vue
  25. 4
      src/views/student/index.vue

@ -1,15 +1,5 @@
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development' NODE_ENV = 'development'
VITE_APP_TITLE = '无糖运营平台' VITE_APP_TITLE = '无糖运营平台'
<<<<<<< HEAD
# VITE_APP_BASE_API = 'http://127.0.0.1:8080' # VITE_APP_BASE_API = 'http://127.0.0.1:8080'
VITE_APP_BASE_API = 'http://39.106.16.162:8080' VITE_APP_BASE_API = 'http://39.106.16.162:8080'
<<<<<<< HEAD
=======
http://localhost:5173/#/courseResourcesManagement/courseResources
>>>>>>> b0c11f6676b1ee245db7ea30ff02485e14c91a32
=======
# VITE_APP_BASE_API = 'http://127.0.0.1:8080'
VITE_APP_BASE_API = 'http://39.106.16.162:8080'
http://localhost:5173/#/courseResourcesManagement/courseResources
>>>>>>> 72be77b12b37cb07a7dd807572ca24163c368ce0

@ -22,7 +22,8 @@ export type OpenAPIConfig = {
export const OpenAPI: OpenAPIConfig = { export const OpenAPI: OpenAPIConfig = {
//BASE: 'http://39.106.16.162:8080', //BASE: 'http://39.106.16.162:8080',
BASE: 'http://127.0.0.1:8080', // BASE: 'http://127.0.0.1:8080',
BASE: import.meta.env.VITE_APP_BASE_API,
VERSION: '1.0.0', VERSION: '1.0.0',
WITH_CREDENTIALS: false, WITH_CREDENTIALS: false,
CREDENTIALS: 'include', CREDENTIALS: 'include',

@ -1,11 +1,11 @@
import request from '@/utils/request' import request from '@/utils/request'
// 获取课程章节列表 // 获取课程章节列表
export const getChaptersListApi = (params) => { export const getChaptersListApi = (params) => {
return request.get(`/chapter2/chapter?courseId=${params.id}`) return request.get(`api/chapter2/chapter?courseId=${params.id}`)
} }
// 添加课程章节 // 添加课程章节
export const addChaptersApi = (params) => request.post('/chapter2/add', params) export const addChaptersApi = (params) => request.post('api/chapter2/add', params)
// 删除课程章节 // 删除课程章节
export const delChaptersApi = (id) => { export const delChaptersApi = (id) => {
return request.delete(`/chapter2/delete/${id}`) return request.delete(`api/chapter2/delete/${id}`)
} }

@ -17,9 +17,22 @@ export const deleteSendMessageApi = (params) => {
params, params,
}) })
} }
//一键已读
function parseParams(params){
let str = '?'
try{
for (const paramsKey in params) {
str+=`${paramsKey}=${params[paramsKey]}&`
}
return str.slice(0,-1)
}catch (e) {
return ''
}
}
export const readMessagesBatch = (params) => {
return request.put(`/user-inbox/readmessagesbatch${parseParams(params)}`)
}
//发送邮件 //发送邮件
export const SendMessageApi = (params) => { export const SendMessageApi = (data) => {
return request.post('/messages/addmessage', { return request.post(`/messages/addmessage`,data)
params,
})
} }

@ -1,6 +1,8 @@
import request from '@/utils/request' import request from '@/utils/request'
// 获取目标类型 // 添加显示目标类型
export const getObjectType = () => request.get(`/api/objectives_type/list`) export const getObjectType = (id) => {
return request.get(`/api/course_objectives/objectiveslist/${id}`)
}
// 修改目标内容 // 修改目标内容
export const updateContents = (params) => { export const updateContents = (params) => {
return request.put(`/api/objective_contents/update`, params) return request.put(`/api/objective_contents/update`, params)

@ -5,3 +5,7 @@ export const sendMessagesApi = (params) => {
params, params,
}) })
} }
//获取课程学生列表
export function getUserInfByCourse(userId) {
return request.get(`/api/coursesteacher/page/courseusers?userId=${userId}`);
}

@ -1,10 +1,6 @@
<template> <template>
<template v-for="(item, index) in menuList[0].children" :key="item.path"> <template v-for="(item, index) in menuList[0].children" :key="item.path">
<el-menu-item <el-menu-item v-if="!item.meta.hidden" :index="item.path" @click="goToRoute">
v-if="!item.meta.hidden"
:index="item.path"
@click="goToRoute"
>
<el-icon> <el-icon>
<component :is="item.meta.icon"></component> <component :is="item.meta.icon"></component>
</el-icon> </el-icon>

@ -258,7 +258,7 @@ export const constantRoute: any = [
}, },
{ {
path: '/messageContentList', path: '/messageContentList',
component: () => import('@/views/message/components/indexContentList.vue'), component: () => import('@/views/message/components/receiveContentList.vue'),
name: 'MessageContentList', name: 'MessageContentList',
meta: { meta: {
title: '收到信息详情', title: '收到信息详情',

@ -1,4 +1,3 @@
export const constantRoute: any = [ export const constantRoute: any = [
{ {
path: '/', path: '/',
@ -77,30 +76,30 @@ export const constantRoute: any = [
name: 'CourseChapters', name: 'CourseChapters',
meta: { meta: {
title: '课程章节', title: '课程章节',
hidden: false, hidden: true,
icon: 'Notebook',
},
},
{
path: '/curriculumCenter/knowledgePoints',
component: () => import('@/views/course/knowledgePoints.vue'),
name: 'KnowledgePoints', // name 要与权限一致
meta: {
title: '知识点',
hidden: true,
icon: 'Notebook',
},
},
{
path: '/curriculumCenter/curriculumMap',
component: () => import('@/views/course/curriculumMap.vue'),
name: 'CurriculumMap', // name 要与权限一致
meta: {
title: '课程图谱',
hidden: true,
icon: 'Notebook', icon: 'Notebook',
}, },
}, },
// {
// path: '/curriculumCenter/knowledgePoints',
// component: () => import('@/views/course/knowledgePoints.vue'),
// name: 'KnowledgePoints', // name 要与权限一致
// meta: {
// title: '知识点',
// hidden: false,
// icon: 'Notebook',
// },
// },
// {
// path: '/curriculumCenter/curriculumMap',
// component: () => import('@/views/course/curriculumMap.vue'),
// name: 'CurriculumMap', // name 要与权限一致
// meta: {
// title: '课程图谱',
// hidden: false,
// icon: 'Notebook',
// },
// },
{ {
path: '/studentManagement/student', path: '/studentManagement/student',
component: () => import('@/views/student/index.vue'), component: () => import('@/views/student/index.vue'),
@ -134,7 +133,7 @@ export const constantRoute: any = [
{ {
path: '/messageContentList', path: '/messageContentList',
component: () => component: () =>
import('@/views/message/components/indexContentList.vue'), import('@/views/message/components/receiveContentList.vue'),
name: 'MessageContentList', name: 'MessageContentList',
meta: { meta: {
title: '收到信息详情', title: '收到信息详情',
@ -153,7 +152,6 @@ export const constantRoute: any = [
icon: '', icon: '',
}, },
}, },
{ {
path: '/messageContent', path: '/messageContent',
component: () => component: () =>
@ -170,7 +168,7 @@ export const constantRoute: any = [
component: () => import('@/views/news/index.vue'), component: () => import('@/views/news/index.vue'),
name: 'NewsContent', name: 'NewsContent',
meta: { meta: {
title: '资讯管理', title: '资讯',
hidden: false, hidden: false,
icon: 'BellFilled', icon: 'BellFilled',
}, },
@ -249,80 +247,4 @@ export const constantRoute: any = [
}, },
], ],
}, },
// {
// path: '/portal',
// component: () => import('@/views/portal/view.vue'),
// name: 'Portal',
// meta: {
// title: '门户',
// hidden: false,
// icon: 'HomeFilled', // 菜单图标
// },
// children: [
// {
// path: '/portal/webHome',
// component: () => import('@/views/portal/index.vue'),
// name: 'WebHome',
// meta: {
// title: '网站首页',
// hidden: false,
// icon: 'Reading',
// },
// },
// {
// path: '/portal/courseHome',
// component: () => import('@/views/portal/courseHomepage.vue'),
// name: 'CourseHome',
// meta: {
// title: '课程首页',
// hidden: false,
// icon: 'Reading',
// },
// },
// {
// path: '/portal/LearningPathRecommendations',
// component: () =>
// import('@/views/portal/LearningPathRecommendations.vue'),
// name: 'LearningPathRecommendations',
// meta: {
// title: '学习路径推荐',
// hidden: false,
// icon: 'Reading',
// },
// },
// {
// path: '/portal/knowledgePointLearning',
// component: () => import('@/views/portal/knowledgePointLearning.vue'),
// name: 'KnowledgePointLearning',
// meta: {
// title: '知识点学习',
// hidden: false,
// icon: 'Reading',
// },
// },
// {
// path: '/portal/courseReports',
// component: () => import('@/views/portal/courseReports.vue'),
// name: 'CourseReports',
// meta: {
// title: '课程报告',
// hidden: false,
// icon: 'Reading',
// },
// },
// ],
// },
// {
// path: '/curriculumCenter/largeScreen',
// component: () => import('@/views/course/largeScreen.vue'),
// name: 'LargeScreen', // name 要与权限一致
// meta: {
// title: '课程图谱',
// hidden: true,
// icon: 'Notebook',
// },
// },
] ]

@ -140,61 +140,29 @@ const goToAnotherPage = (address, courseId) => {
<!-- 头部 --> <!-- 头部 -->
<div class="header"> <div class="header">
<el-button type="primary" plain>浏览记录</el-button> <el-button type="primary" plain>浏览记录</el-button>
<el-button <el-button type="danger" plain style="float: right" @click="deleteSelected">
type="danger"
plain
style="float: right"
@click="deleteSelected"
>
批量删除 批量删除
</el-button> </el-button>
<el-button <el-button type="primary" plain @click="toggleCheckbox" style="float: right">
type="primary"
plain
@click="toggleCheckbox"
style="float: right"
>
管理 管理
</el-button> </el-button>
</div> </div>
<!-- 中间 --> <!-- 中间 -->
<div class="record-list"> <div class="record-list">
<ul v-if="recordList.length > 0"> <ul v-if="recordList.length > 0">
<li <li v-for="record in recordList" :key="record.id" v-loading="loading">
v-for="record in recordList" <input style="display: flex" type="checkbox" :value="record.id" @change="toggleSelection(record.id)"
:key="record.id" v-if="showCheckbox" />
v-loading="loading"
@click="
goToAnotherPage(
'/myCourseStudyManagement/learningProcess1',
record.courseId,
)
"
>
<input
style="display: flex"
type="checkbox"
:value="record.id"
@change="toggleSelection(record.id)"
v-if="showCheckbox"
/>
<img <img class="img" :src="record.img" @click="goToAnotherPage(record.address)" style="margin-bottom: 10px" />
class="img"
:src="record.img"
@click="goToAnotherPage(record.address)"
style="margin-bottom: 10px"
/>
<div <div style="
style="
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-grow: 1; flex-grow: 1;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
" ">
>
<p> <p>
{{ record.courseName }} {{ record.courseName }}
</p> </p>
@ -202,17 +170,29 @@ const goToAnotherPage = (address, courseId) => {
<Delete /> <Delete />
</el-icon> </el-icon>
</div> </div>
<div <div style="
style="
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-grow: 1; flex-grow: 1;
margin-top: 10px; margin-top: 10px;
" ">
>
<p>{{ record.time }}</p> <p>{{ record.time }}</p>
<p>学习人数:{{ record.number }}</p> <p>学习人数:{{ record.number }}</p>
</div> </div>
<div style="display: flex;margin: 10px 0;">
<el-button @click="
goToAnotherPage(
'/myCourseStudyManagement/learningProcess1',
record.courseId,
)
">知识点学习记录</el-button>
<el-button @click="
goToAnotherPage(
'/myCourseStudyManagement/learningProcess2',
record.courseId,
)
">资源学习记录</el-button>
</div>
</li> </li>
</ul> </ul>
<el-empty v-else description="暂时没有浏览记录" /> <el-empty v-else description="暂时没有浏览记录" />
@ -220,17 +200,10 @@ const goToAnotherPage = (address, courseId) => {
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<div class="example-pagination-block"> <div class="example-pagination-block">
<el-pagination <el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize"
v-model:current-page="params.pagenum" :page-sizes="[5, 10, 15, 20]" :background="true" layout="jumper,total, sizes, prev, pager, next " :total="total"
v-model:page-size="params.pagesize" @current-change="onCurrentChange" @size-change="onSizeChange"
:page-sizes="[5, 10, 15, 20]" style="margin-top: 20px; justify-content: flex-end" />
:background="true"
layout="jumper,total, sizes, prev, pager, next "
:total="total"
@current-change="onCurrentChange"
@size-change="onSizeChange"
style="margin-top: 20px; justify-content: flex-end"
/>
</div> </div>
</div> </div>
</template> </template>
@ -241,9 +214,11 @@ const goToAnotherPage = (address, courseId) => {
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
} }
.content { .content {
flex: 1; flex: 1;
} }
.example-pagination-block { .example-pagination-block {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
@ -254,6 +229,7 @@ const goToAnotherPage = (address, courseId) => {
.record-list { .record-list {
margin: 10px 0; margin: 10px 0;
} }
ul { ul {
width: 100%; width: 100%;
list-style-type: none; list-style-type: none;
@ -268,9 +244,11 @@ ul {
grid-template-columns: repeat(auto-fill, 272px); grid-template-columns: repeat(auto-fill, 272px);
justify-content: space-around; justify-content: space-around;
} }
li { li {
/* margin-bottom: 30px; */ /* margin-bottom: 30px; */
transition: filter 0.3s; /* 添加过渡动画 */ transition: filter 0.3s;
/* 添加过渡动画 */
/* flex: 1 0 20%; */ /* flex: 1 0 20%; */
width: calc(20% - 20px); width: calc(20% - 20px);
width: 250px; width: 250px;
@ -285,6 +263,7 @@ li {
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
cursor: pointer; cursor: pointer;
} }
li:hover { li:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
} }

@ -7,7 +7,6 @@
<el-form-item label="项目名称"> <el-form-item label="项目名称">
<el-input v-model="form.name" /> <el-input v-model="form.name" />
</el-form-item> </el-form-item>
<p>门户宣传图配置</p>
<el-form-item label="门户头部宣传大图"> <el-form-item label="门户头部宣传大图">
<my-update v-model="form.promotionalImages"></my-update> <my-update v-model="form.promotionalImages"></my-update>
</el-form-item> </el-form-item>
@ -26,6 +25,9 @@
<el-form-item label="备案号"> <el-form-item label="备案号">
<el-input v-model="form.recordNumber" /> <el-input v-model="form.recordNumber" />
</el-form-item> </el-form-item>
<el-form-item label="备案号信息">
<el-input v-model="form.recordInformation" type="textarea" />
</el-form-item>
<el-form-item label="qq"> <el-form-item label="qq">
<el-input v-model="form.qqNumber" /> <el-input v-model="form.qqNumber" />
</el-form-item> </el-form-item>
@ -70,7 +72,8 @@ const form = reactive({
recordNumber: '', recordNumber: '',
title: '', title: '',
mailbox: '', mailbox: '',
home:'' home: '',
recordInformation: ''
}) })
const ran = ref(false) const ran = ref(false)

@ -52,6 +52,7 @@ const getCourseList = async () => {
const res = await getCourseListApi(params.value) const res = await getCourseListApi(params.value)
courseList.value = res.data.list courseList.value = res.data.list
total.value = res.data.total total.value = res.data.total
console.log(res, 'courseres')
console.log(courseList.value, 'courseList.value') console.log(courseList.value, 'courseList.value')
loading.value = false loading.value = false
// console.log(userStore.userName, '1111') // console.log(userStore.userName, '1111')
@ -209,11 +210,7 @@ const CloseCouresNameChangeEvent = () => {
</el-form> </el-form>
<div class="course"> <div class="course">
<ul class="course_list"> <ul class="course_list">
<li <li v-if="userStore.userInfo.roleId[0] === '1'" @click="onAddCourse()" class="add_course">
v-if="userStore.userInfo.roleId[0] === '1'"
@click="onAddCourse()"
class="add_course"
>
<div class="plus"> <div class="plus">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
@ -222,17 +219,8 @@ const CloseCouresNameChangeEvent = () => {
<h2 class="course_name">{{ course_name }}</h2> <h2 class="course_name">{{ course_name }}</h2>
</li> </li>
<li v-for="item in courseList" :key="item.id"> <li v-for="item in courseList" :key="item.id">
<img <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
title="点击查看课程详情" <h2 title="点击查看课程基本信息" class="course_name">
:src="item.img"
alt=""
@click="onGetCourseObject(item.id)"
/>
<h2
title="点击查看课程基本信息"
class="course_name"
@click="onEditCourse(item)"
>
{{ item.name }} {{ item.name }}
</h2> </h2>
<p class="teacher_name">讲师{{ item.teacher }}</p> <p class="teacher_name">讲师{{ item.teacher }}</p>
@ -245,36 +233,22 @@ const CloseCouresNameChangeEvent = () => {
<el-icon class="del" @click="onDeleteCourse(item.id)"> <el-icon class="del" @click="onDeleteCourse(item.id)">
<Delete /> <Delete />
</el-icon> </el-icon>
<el-button <el-button class="object" round plain @click="onGetCourseObject(item.id)">
class="object" 详情
round </el-button>
plain <el-button class="object1" round plain @click="onEditCourse(item)">
@click="onGetCourseObject(item.id)" 编辑
>
查看课程详情
</el-button> </el-button>
</li> </li>
</ul> </ul>
</div> </div>
<el-pagination <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
v-model:current-page="params.pageNo" :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next " :total="total"
v-model:page-size="params.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[2, 5, 7, 10]" style="margin-top: 10px; justify-content: center" />
:background="true"
layout="jumper,total, sizes, prev, pager, next "
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="margin-top: 10px; justify-content: center"
/>
</div> </div>
<course-edit <course-edit ref="drawer" @success="onSuccess" @couresNameChange="couresNameChangeEvent"
ref="drawer" @CloseCouresNameChange="CloseCouresNameChangeEvent" :flog="flog"></course-edit>
@success="onSuccess"
@couresNameChange="couresNameChangeEvent"
@CloseCouresNameChange="CloseCouresNameChangeEvent"
:flog="flog"
></course-edit>
</div> </div>
</div> </div>
</template> </template>
@ -320,6 +294,7 @@ const CloseCouresNameChangeEvent = () => {
} }
.course { .course {
// display: flex; // display: flex;
// flex: 0 0 25%; // flex: 0 0 25%;
// justify-content: space-between; // justify-content: space-between;
@ -399,6 +374,12 @@ const CloseCouresNameChangeEvent = () => {
margin-left: 180px; margin-left: 180px;
margin-top: -29px; margin-top: -29px;
} }
.object1 {
position: absolute;
margin-left: 250px;
margin-top: -29px;
}
} }
.plus { .plus {

@ -26,20 +26,23 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="grid-content course-brief" style="height: 350px"> <div class="grid-content course-brief" style="height: 350px">
<h1 style="text-align:">课程基本信息</h1> <h1 style="text-align:">
{{ courseDetails.name }}
<span>主讲教师{{ courseDetails.teacher }}</span>
</h1>
<div class="box"> <div class="box">
<div class="image"> <div class="image">
<img :src="courseDetails.img" alt="" /> <img :src="courseDetails.img" alt="" />
</div> </div>
<div class="text"> <div class="text">
<h2 class="title"> <!-- <h2 class="title">
{{ courseDetails.name }} {{ courseDetails.name }}
<span>主讲教师{{ courseDetails.teacher }}</span> <span>主讲教师{{ courseDetails.teacher }}</span>
</h2> </h2> -->
<div> <div>
<h3> <h3>
课程简介: 课程简介:
<el-scrollbar height="70px"> <el-scrollbar height="143px">
<p class="pp">{{ courseDetails.description }}</p> <p class="pp">{{ courseDetails.description }}</p>
</el-scrollbar> </el-scrollbar>
<!-- <textarea name="" id=""></textarea> --> <!-- <textarea name="" id=""></textarea> -->
@ -87,9 +90,16 @@ onMounted(() => {
// display: block; // display: block;
padding-top: 20px; padding-top: 20px;
text-align: center; text-align: center;
font-size: 24px; font-size: 26px;
font-weight: 700; font-weight: 700;
color: #333333ff; color: #333333ff;
span {
margin-left: 40px;
font-size: 18px;
line-height: 30px;
color: #8a8b99;
}
} }
.box { .box {
@ -135,13 +145,6 @@ onMounted(() => {
margin-bottom: 20px; margin-bottom: 20px;
font-family: Inter, Inter; font-family: Inter, Inter;
color: #333333ff; color: #333333ff;
span {
margin-left: 40px;
font-size: 18px;
line-height: 30px;
color: #8a8b99;
}
} }
h3 { h3 {
@ -161,23 +164,27 @@ onMounted(() => {
.brief { .brief {
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
height: 50%; height: 80%;
.ull { .ull {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10px; margin-top: 10px;
align-content: space-around;
justify-content: space-between;
} }
li { li {
// margin-top: 10px; // margin-top: 10px;
// padding-left: 10px;
margin-right: 80px; margin-right: 80px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 10px;
p { p {
margin-top: 10px; margin-top: 6px;
font-size: 16px; font-size: 16px;
} }

@ -9,14 +9,15 @@ import {
delChaptersApi, delChaptersApi,
} from '@/api/user/chapter' } from '@/api/user/chapter'
import { onMounted } from 'vue' import { onMounted } from 'vue'
// const route = useRoute() const route = useRoute()
// const router = useRouter() // const router = useRouter()
// const courseId = ref() const courseId = ref()
const courseId = '719f91586a64413898253c5b7d046fd8' // const courseId = '719f91586a64413898253c5b7d046fd8'
onMounted(() => { onMounted(() => {
// courseId.value = route.query.id courseId.value = route.query.id
// courseId.value = '719f91586a64413898253c5b7d046fd8' console.log(courseId.value, 'route.query.id');
// courseId.value = '719f91586a64413898253c5b7d046fd8'
getChaptersList() getChaptersList()
}) })
@ -134,36 +135,18 @@ const dataSource = ref<Tree[]>([
<h1>课程章节</h1> <h1>课程章节</h1>
<!-- <button @click="getChaptersList">获取</button> --> <!-- <button @click="getChaptersList">获取</button> -->
<div class="custom-tree-container"> <div class="custom-tree-container">
<el-tree <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all
style="max-width: 600px" :expand-on-click-node="false" empty-text="暂无章节">
:data="dataSource"
node-key="id"
default-expand-all
:expand-on-click-node="false"
empty-text="暂无章节"
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<span @click="getDetails(data.id)">{{ data.name }}</span> <span @click="getDetails(data.id)">{{ data.name }}</span>
<span> <span>
<el-button <el-button @click="append(data)" circle size="small" type="primary" plain>
@click="append(data)"
circle
size="small"
type="primary"
plain
>
<el-icon :size="15"> <el-icon :size="15">
<Plus /> <Plus />
</el-icon> </el-icon>
</el-button> </el-button>
<el-button <el-button @click="remove(node, data)" circle size="small" type="danger" plain>
@click="remove(node, data)"
circle
size="small"
type="danger"
plain
>
<el-icon :size="15"> <el-icon :size="15">
<Delete /> <Delete />
</el-icon> </el-icon>

@ -8,54 +8,67 @@ import {
delObjectContents, delObjectContents,
addObjectContents, addObjectContents,
getObjectContent, getObjectContent,
getObjectType,
} from '@/api/user/object' } from '@/api/user/object'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs'
const route = useRoute() const route = useRoute()
// const router = useRouter() // const router = useRouter()
const courseId = ref(0) const courseId = ref()
// //
const data = ref({}) const data = ref({})
// //
const params = ref({ const params = ref({
content: '', content: '请添加整体目标',
id: '', id: '',
objectiveId: '', objectiveId: '',
}) })
// //
const list = ref([])
const getObject = async () => { const getObject = async () => {
const res = await getObjectList({ id: courseId.value }) const res = await getObjectList({ id: courseId.value })
console.log(res, 'objectres') console.log(res, 'objectres')
data.value = res.data[0].courseObjectivesTrees data.value = res.data[0].courseObjectivesTrees
params.value = res.data[0].contents[0] console.log(data, 'data');
console.log(params.value, 'params.value')
console.log(res.data, 'res.data[0].contents[0]');
Object.assign(params.value, res.data[0].contents[0])
// params.value = res.data[0].contents[0]
list.value = data.value.map(item => item.contents).flat()
console.log(list.value, 'list.value ');
console.log(data.value, 'data.value')
// content.value = res.data[0].contents[0].content // content.value = res.data[0].contents[0].content
} // console.log(content.value, 'content.value')
}
// //
// const type = ref({ const type = ref({
// id: '', id: '',
// typeName: '', name: '',
// }) })
// const getType = async () => { const getType = async () => {
// const res = await getObjectType() console.log(courseId, 'typecourse')
// type.value = res.data.slice(1, 5) const res = await getObjectType(courseId.value)
// console.log(type.value, 'typeres')
// } type.value = res.data
console.log(res, 'typeres')
}
onMounted(() => { onMounted(() => {
courseId.value = route.query.id courseId.value = route.query.id
console.log(courseId.value, 'courseid.vlue') console.log(courseId.value, 'courseid.vlue')
getObject() getObject()
getType()
}) })
// //
const isEditing = ref(false) const isEditing = ref(false)
const content = ref('')
const updateContent = () => { const updateContent = () => {
isEditing.value = true isEditing.value = true
content.value = params.value.content content.value = params.value.content
} }
const content = ref('')
// //
const saveContent = async () => { const saveContent = async () => {
console.log(params.value.content, ' params.value.content') console.log(params.value.content, ' params.value.content')
@ -73,6 +86,9 @@ const saveContent = async () => {
}) })
.then(async () => { .then(async () => {
params.value.content = content.value params.value.content = content.value
const res = await updateContents({ const res = await updateContents({
id: params.value.id, id: params.value.id,
objectiveId: params.value.objectiveId, objectiveId: params.value.objectiveId,
@ -81,8 +97,10 @@ const saveContent = async () => {
console.log(res, 'res') console.log(res, 'res')
ElMessage.success('保存成功!') ElMessage.success('保存成功!')
isEditing.value = false isEditing.value = false
})
.catch(() => {
}, () => {
// //
ElMessage.info('您已取消操作') ElMessage.info('您已取消操作')
}) })
@ -101,6 +119,9 @@ const delObject = async (id: any) => {
await delObjectContents(id).then(() => { await delObjectContents(id).then(() => {
ElMessage.success('删除成功') ElMessage.success('删除成功')
getObject() getObject()
}).catch((err: any) => {
// console.log(id, 'id')
ElMessage.error(err.response.data.message)
}) })
} }
// //
@ -126,7 +147,9 @@ const objectiveIds = ref(0)
const addObject = (item: any) => { const addObject = (item: any) => {
// console.log(id, 'id') // console.log(id, 'id')
dialogVisible.value = true dialogVisible.value = true
flog.value = false flog.value = false
type.value.name = ''
formData.value.description = '' formData.value.description = ''
// updateDisabledStatus() // updateDisabledStatus()
objectiveIds.value = item.id objectiveIds.value = item.id
@ -157,6 +180,7 @@ const submit = async () => {
} else { } else {
console.log(objectiveIds, 'objectiveIds') console.log(objectiveIds, 'objectiveIds')
await addObjectContents({ await addObjectContents({
// id: type.value.id,
objectiveId: objectiveIds.value, objectiveId: objectiveIds.value,
content: formData.value.description, content: formData.value.description,
}) })
@ -181,13 +205,7 @@ const submit = async () => {
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>整体目标</span> <span>整体目标</span>
<el-button <el-button type="primary" :icon="Edit" circle plain @click="updateContent"></el-button>
type="primary"
:icon="Edit"
circle
plain
@click="updateContent"
></el-button>
</div> </div>
</template> </template>
<div class="el-card__body" style=""> <div class="el-card__body" style="">
@ -204,7 +222,7 @@ const submit = async () => {
</div> </div>
</div> </div>
<div class="typeObject"> <div class="typeObject">
<ul v-for="item in data" :key="item.id"> <!-- <ul v-for="item in data" :key="item.id">
<li> <li>
<div class="all"> <div class="all">
<div class="left"> <div class="left">
@ -243,24 +261,36 @@ const submit = async () => {
</div> </div>
<el-divider style="margin: 0; width: 100%" /> <el-divider style="margin: 0; width: 100%" />
</li> </li>
</ul> </ul> -->
<el-dialog <el-scrollbar>
v-if="dialogVisible" <li v-for="(obj, i) in list" :key="obj.id">
v-model="dialogVisible" <span>目标{{ i + 1 }}{{ obj.content }}</span>
:title="flog ? '编辑' : '新增'" <div class="icon">
width="500" <el-button type="primary" :icon="Edit" circle size="small" plain @click="updateObjectContent(obj.id)" />
:before-close="handleClose" <el-button type="danger" :icon="Delete" circle size="small" plain @click="delObject(obj.id)" />
> <span>{{ data.name }}</span>
<el-form </div>
:model="formData"
label-width="auto" </li>
style="max-width: 600px" </el-scrollbar>
> <el-button @click="addObject" circle size="small" type="primary" plain class="addbutton">
<el-form-item label="内容" prop="description"> <el-icon :size="15">
<el-input <Plus />
v-model="formData.description" </el-icon>
placeholder="请输入内容" </el-button>
></el-input> <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500"
:before-close="handleClose">
<el-form :model="type">
<el-form-item label="目标类别">
<el-select v-model="type.name" placeholder="请选择目标类别">
<el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form :model="formData" label-width="auto" style="max-width: 600px">
<el-form-item label="目标内容" prop="description">
<el-input v-model="formData.description" placeholder="请输入内容"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -268,6 +298,7 @@ const submit = async () => {
<el-button @click="close">取消</el-button> <el-button @click="close">取消</el-button>
<el-button type="primary" @click="submit">确定</el-button> <el-button type="primary" @click="submit">确定</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
@ -275,6 +306,10 @@ const submit = async () => {
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
li {
list-style-type: none; //
}
.el-tabs__item { .el-tabs__item {
padding: 0 50px; padding: 0 50px;
} }
@ -367,65 +402,81 @@ const submit = async () => {
} }
.typeObject { .typeObject {
width: 70%; width: 60%;
// height: 80%; height: 80%;
text-align: center; // text-align: center;
// align-items: center;
ul:nth-child(-n + 3) {
border-bottom: none;
}
ul {
width: 90%;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
margin-right: 35px;
padding: 20px;
position: relative;
// box-shadow: 1px -5px 6px rgba(153, 150, 150, 0.5); .icon {
margin-left: 700px;
// display: inline-block;
// position: absolute;
} }
.all { .addbutton {
display: flex; position: absolute;
width: 100%; right: 20px;
// box-shadow: 1px 1px 6px rgba(153, 150, 150, 0.5); bottom: 20px;
// align-content: center; }
.left { // align-items: center;
width: 20%; // ul:nth-child(-n + 3) {
display: flex; // border-bottom: none;
justify-content: center; // }
border-right: 1px solid #dcdfe6;
flex-wrap: wrap;
align-content: center;
letter-spacing: 1px;
.icon { // ul {
margin-left: 10px; // width: 90%;
} // border: 1px solid #dcdfe6;
.icon:hover { // // box-shadow: 1px -5px 6px rgba(153, 150, 150, 0.5);
cursor: pointer; // }
color: red;
}
}
.objectdetails { // .all {
padding-right: 20px; // display: flex;
width: 100%; // width: 100%;
// border: 1px solid #8a8b99; // // box-shadow: 1px 1px 6px rgba(153, 150, 150, 0.5);
// // align-content: center;
li { // .left {
width: 100%; // width: 20%;
display: flex; // display: flex;
justify-content: space-between; // justify-content: center;
flex-wrap: wrap; // border-right: 1px solid #dcdfe6;
// flex-wrap: wrap;
// align-content: center; // align-content: center;
align-items: center; // letter-spacing: 1px;
line-height: 1;
margin-top: 2px; // .icon {
letter-spacing: 1px; // margin-left: 10px;
} // }
}
} // .icon:hover {
// cursor: pointer;
// color: red;
// }
// }
// .objectdetails {
// padding-right: 20px;
// width: 100%;
// // border: 1px solid #8a8b99;
// li {
// width: 100%;
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
// // align-content: center;
// align-items: center;
// line-height: 1;
// margin-top: 2px;
// letter-spacing: 1px;
// }
// }
// }
} }
} }
} }

@ -28,13 +28,13 @@ const defaultForm = {
teacher: userStore.data.id, teacher: userStore.data.id,
img: '', img: '',
name: '', name: '',
category: ref(0), category: '',
nature: ref(0), nature: '',
code: '', code: '',
credit: '', credit: '',
classhours: '', classhours: '',
assessmenttype: ref(0), assessmenttype: '',
assessmentway: ref(0), assessmentway: '',
teachermethod: '', teachermethod: '',
teacherway: '', teacherway: '',
description: '', description: '',
@ -127,6 +127,14 @@ const rules = {
trigger: 'change', trigger: 'change',
}, },
], ],
description: [
{
required: true,
message: '请输入课程简介',
trigger: 'blur',
},
{ max: 500, message: '不能超过500个字符', trigger: 'blur' }
]
} }
// //
@ -243,20 +251,11 @@ const upload = async (option: any) => {
</script> </script>
<template> <template>
<el-drawer <el-drawer :before-close="handleClose" v-model="visibleDrawer" direction="rtl"
:before-close="handleClose" :title="formModel.id ? '编辑课程' : '添加课程'">
v-model="visibleDrawer"
direction="rtl"
:title="formModel.id ? '编辑课程' : '添加课程'"
>
<el-form :model="formModel" :rules="rules" ref="formRef"> <el-form :model="formModel" :rules="rules" ref="formRef">
<el-form-item label="课程封面" prop="img"> <el-form-item label="课程封面" prop="img">
<el-upload <el-upload v-model="formModel.img" class="avatar-uploader" :http-request="upload" :show-file-list="false">
v-model="formModel.img"
class="avatar-uploader"
:http-request="upload"
:show-file-list="false"
>
<img v-if="imgUrl" :src="imgUrl" class="avatar" /> <img v-if="imgUrl" :src="imgUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"> <el-icon v-else class="avatar-uploader-icon">
<Plus /> <Plus />
@ -295,12 +294,8 @@ const upload = async (option: any) => {
</el-upload> --> </el-upload> -->
</el-form-item> </el-form-item>
<el-form-item label="课程名称" prop="name"> <el-form-item label="课程名称" prop="name">
<el-input <el-input :disabled="nameDisabled" style="width: 200px" v-model="formModel.name"
:disabled="nameDisabled" @input="courseNameInput"></el-input>
style="width: 200px"
v-model="formModel.name"
@input="courseNameInput"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="课程类别" prop="category"> <el-form-item label="课程类别" prop="category">
<el-radio-group v-model="formModel.category"> <el-radio-group v-model="formModel.category">
@ -316,25 +311,18 @@ const upload = async (option: any) => {
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="课程编码" prop="code"> <el-form-item label="课程编码" prop="code">
<el-input <el-input style="width: 200px" v-model="formModel.code" :disabled="codeDisabled"></el-input>
style="width: 200px"
v-model="formModel.code"
:disabled="codeDisabled"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="课程学分" prop="credit"> <el-form-item label="课程学分" prop="credit">
<el-input style="width: 200px" v-model="formModel.credit"></el-input> <el-input style="width: 200px" v-model="formModel.credit"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="课程学时" prop="classhours"> <el-form-item label="课程学时" prop="classhours">
<el-input <el-input style="width: 200px" v-model="formModel.classhours"></el-input>
style="width: 200px"
v-model="formModel.classhours"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="考核类型" prop="assessmenttype"> <el-form-item label="考核类型" prop="assessmenttype">
<el-radio-group v-model="formModel.assessmenttype"> <el-radio-group v-model="formModel.assessmenttype">
<el-radio value="1">考试</el-radio> <el-radio value="1">考试</el-radio>
<el-radio value="2"></el-radio> <el-radio value="2"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="考核方式" prop="assessmentway"> <el-form-item label="考核方式" prop="assessmentway">
@ -344,14 +332,15 @@ const upload = async (option: any) => {
<el-radio value="3">其他</el-radio> <el-radio value="3">其他</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="教学方法" prop="teachermethod"> <!-- <el-form-item label="教学方法" prop="teachermethod">
<el-input type="textarea" v-model="formModel.teachermethod" /> <el-input type="textarea" v-model="formModel.teachermethod" />
</el-form-item> </el-form-item>
<el-form-item label="教学方式" prop="teacherway"> <el-form-item label="教学方式" prop="teacherway">
<el-input type="textarea" v-model="formModel.teacherway" /> <el-input type="textarea" v-model="formModel.teacherway" />
</el-form-item> </el-form-item> -->
<el-form-item label="课程简介" prop="description"> <el-form-item label="课程简介" prop="description">
<el-input type="textarea" v-model="formModel.description" /> <textarea name="" id="" v-model="formModel.description"></textarea>
<!-- <el-input class="brief_text" type="textarea" /> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -367,6 +356,17 @@ const upload = async (option: any) => {
</el-drawer> </el-drawer>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
textarea {
width: 400px;
height: 180px;
resize: none;
border: 1px solid #dcdfe6;
color: #606266;
line-height: 1.3;
letter-spacing: 1px;
border-radius: 6px;
}
.avatar-uploader { .avatar-uploader {
:deep() { :deep() {
.avatar { .avatar {

@ -2,63 +2,174 @@
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import 'echarts-liquidfill' import 'echarts-liquidfill'
const liquidechart3 = ref(null) //
const liquidechart1 = ref(null) // const liquidechart1 = ref(null) //
const liquidechart2 = ref(null) // const liquidechart2 = ref(null) //
onMounted(() => { onMounted(() => {
const myChart3 = echarts.init(liquidechart3.value) // 使 ref let chartDom = document.getElementById('main')
myChart3.setOption({ let myChart = echarts.init(chartDom)
title: { let option
text: '目标完成度', option = {
radar: [
{
nameGap: 10,
indicator: [
{
text: '目标一\n',
max: 100,
},
{
text: '目标五\n\n',
max: 100,
},
{
text: '目标四\n\n',
max: 100,
},
{
text: '目标三\n\n',
max: 100,
},
{
text: '目标二\n\n',
max: 100,
},
],
//
center: ['50%', '60%'],
//
radius: 100,
//
startAngle: 90,
//
splitNumber: 5,
shape: 'circle',
name: {
formatter: '{value}',
textStyle: { textStyle: {
color: '#888', color: '#333333',
fontFamily: 'microsoft yahei', fontSize: 16,
fontSize: 24,
fontWeight: '400',
align: 'center',
verticalAlign: 'middle',
}, },
left: 'center', gap: 10,
top: '20%', },
splitArea: {
areaStyle: {
color: [
'transparent',
'transparent',
'rgba(114, 172, 209, 0)',
'transparent',
'rgba(114, 172, 209, 0)',
],
},
},
// 线
axisLine: {
lineStyle: {
color: '#C8D9FF',
},
},
splitLine: {
lineStyle: {
color: '#DADADA',
width: 2,
type: 'dashed', //dashed solid dotted 线线 线
},
},
},
{
nameGap: 10,
indicator: [
{
text: '达成度',
max: 100,
},
{
text: '达成度',
max: 100,
},
{
text: '达成度',
max: 100,
},
{
text: '达成度',
max: 100,
},
{
text: '达成度',
max: 100,
},
],
center: ['50%', '60%'],
radius: 100,
startAngle: 90,
splitNumber: 1,
shape: 'circle',
splitArea: {
show: false,
}, },
axisLine: {
show: false,
},
name: {
formatter: '{value}',
textStyle: {
color: 'rgba(0,0,0,0.4)',
fontSize: 16,
},
},
splitLine: {
lineStyle: {
color: '#6093FF',
type: 'solid',
width: 8,
},
},
},
],
series: [ series: [
{ {
type: 'liquidFill', type: 'radar',
radius: '95%', emphasis: {
waveAnimation: true, lineStyle: {
data: [0.3], // width: 20,
direction: 'left',
itemStyle: {
normal: {
color: '#1890ff',
}, },
}, },
outline: { symbol: 'none',
borderDistance: 3, data: [
itemStyle: { {
borderColor: '#4984ff', value: [74, 60, 80, 60, 74],
borderWidth: 10, name: 'Data C',
areaStyle: {
color: '#DBE4F9',
}, },
}, },
itemStyle: { ],
opacity: 0.9,
}, },
backgroundStyle: { {
color: '#fff', type: 'radar',
emphasis: {
lineStyle: {
width: 20,
}, },
label: { },
show: true, symbol: 'none',
color: '#000', data: [
insideColor: '#fff', {
fontSize: 24, value: [74, 60, 80, 40, 74],
fontWeight: 400, name: 'Data B',
align: 'center', areaStyle: {
verticalAlign: 'middle', color: '#0052FF',
}, },
}, },
], ],
}) },
],
}
option && myChart.setOption(option)
const myChart1 = echarts.init(liquidechart1.value) // 使 ref const myChart1 = echarts.init(liquidechart1.value) // 使 ref
myChart1.setOption({ myChart1.setOption({
title: { title: {
@ -170,7 +281,7 @@ onMounted(() => {
<div class="grid-content knowledge-statistic" style="height: 300px"> <div class="grid-content knowledge-statistic" style="height: 300px">
<!-- <h1>知识点统计</h1> --> <!-- <h1>知识点统计</h1> -->
<div class="box"> <div class="box">
<div style="width: 300px; height: 250px" ref="liquidechart3"></div> <div style="width: 300px; height: 250px" id="main" class="radarmap"></div>
<div style="width: 300px; height: 250px" ref="liquidechart1"></div> <div style="width: 300px; height: 250px" ref="liquidechart1"></div>
<div style="width: 300px; height: 250px" ref="liquidechart2"></div> <div style="width: 300px; height: 250px" ref="liquidechart2"></div>
</div> </div>
@ -181,6 +292,8 @@ onMounted(() => {
.knowledge-statistic { .knowledge-statistic {
display: flex; display: flex;
align-content: center; align-content: center;
flex-direction: column;
align-items: center;
.box { .box {
margin-top: 20px; margin-top: 20px;

@ -17,15 +17,21 @@
</template> </template>
<!-- 输入框内容--> <!-- 输入框内容-->
<el-input <el-input
v-model="inputPerson" :model-value="inputPerson"
size="large" size="large"
placeholder="收件人:" placeholder="收件人id:"
> >
<template #append> <template #append>
<el-button @click="addPerson = true"> <el-button @click="addPerson = true">
<el-icon><CirclePlus /></el-icon> <el-icon><CirclePlus /></el-icon>
</el-button> </el-button>
</template> </template>
</el-input>
<el-input
:model-value="inputCourseId"
size="large"
placeholder="课程id:"
>
</el-input> </el-input>
<el-input <el-input
v-model="inputText" v-model="inputText"
@ -39,39 +45,33 @@
type="textarea" type="textarea"
placeholder="内容:" placeholder="内容:"
/> />
<el-input
v-model="userStore.data.id"
disabled
style="margin-top: 20px"
/>
<!--添加收件人信息--> <!--添加收件人信息-->
<el-dialog class="dialogType" v-model="addPerson" title="选择收件人"> <el-dialog class="dialogType" v-model="addPerson" title="选择收件人">
<el-divider/> <el-divider/>
<div class="content-container"> <div class="content-container">
<div class="left-panel" style="flex: 1; display: flex; align-items: center; justify-content: center;"> <div class="left-panel" style="flex: 1; display: flex; align-items: center; justify-content: center;">
<!-- <el-input-->
<!-- v-model="inputSearch"-->
<!-- style="max-width: 300px;-->
<!-- margin-bottom: 20px"-->
<!-- placeholder="搜索"-->
<!-- >-->
<!-- <template #append>-->
<!-- <el-button :icon="Search" @click="editSearch"/>-->
<!-- </template>-->
<!-- </el-input>-->
<!-- 组织架构-->
<div> <div>
组织框架: <p>组织框架</p><br/>
<el-tree-select <el-cascader
v-model="inputPerson" v-model="abc"
:data="formattedData" :options="formattedData"
multiple :props="props"
:render-after-expand="false" clearable
show-checkbox
style="width: 240px"
/> />
</div> </div>
</div> </div>
<div class="right-panel" style="flex: 1;"> <div class="right-panel" style="flex: 1;">
<p>已选人:</p> <p>已选人id:</p>
<el-divider/> <el-divider/>
<li v-for="item in inputPerson"> <li>
<p>{{item}}</p> <div>
<p>{{inputPerson}}</p>
</div>
</li> </li>
</div> </div>
</div> </div>
@ -90,66 +90,103 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref} from 'vue' import {ref, onMounted, watch, computed} from 'vue'
// import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { userStudentListService } from '@/api/user/user' import { getUserInfByCourse } from '@/api/user/send.js'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
import {SendMessageApi} from "@/api/user/messag"; import {SendMessageApi} from "@/api/user/messag";
const abc = ref([])
const inputPerson =computed(()=>{
if(props.multiple){
return abc.value.map(item=>item[1])
}else {
return abc.value[1]
}
})
const inputCourseId = computed(()=>{
if(props.multiple) return abc.value.map(item=>item[0])
else return abc.value[0]
})
const inputPerson = ref([]) //======
const inputText = ref('') const inputText = ref('')
const textarea = ref('') const textarea = ref('')
// const inputSearch = ref('')
const addPerson = ref(false) const addPerson = ref(false)
const props = {
multiple: true,
checkStrictly: true,
};
const router = useRouter() const router = useRouter()
// //
const userStore = useUserStore() const userStore = useUserStore()
// console.log(userStore.userInfo.id,userStore.data.id,'dddddddd')
const stuList = ref([]) const stuList = ref([])
const formattedData = ref([]) const formattedData = ref([])
//
const getStuList = async () => { const getStuList = async () => {
const res = await userStudentListService(userStore.data.id) const res = await getUserInfByCourse(userStore.data.id)
stuList.value = res.data stuList.value = res.data
// console.log(stuList.value, 'rrr')
dataForTree(stuList.value);//
};
//
const dataForTree = (data) => {
// name
const formatted = data.map(student => ({
label: student.name,
value: student.name, // value
// children: [],
}));
formattedData.value = formatted;
}; };
getStuList() onMounted(async () => {
try {
await getStuList();
formattedData.value = formatData(stuList.value);
} catch (error) {
ElMessage.error('加载数据失败');
}
});
//
function formatData(data) {
return data.map(course => ({
value: course.courseId, //
label: course.courseName, //
children: course.usersInf.map(student => ({
value: student.id, //
label: student.receiverName, //
})),
}));
}
// selectedStudents
// watch(inputPerson, (newVal, oldVal) => {
// inputPerson.value = newVal;
// // formattedData
// formattedData.value = formatData(stuList.value);
// }, { deep: true });
// //
const back= ()=>{ const back= ()=>{
router.push('/messageManagement/message') router.push('/messageManagement/message')
} }
//
const confirm = ()=>{
addPerson.value = false
console.log(inputPerson.value,'inputPerson内容')
}
//
const disappoint = ()=>{
addPerson.value = false
}
// //
const send = async (id: any) => { const send = async () => {
await ElMessageBox.confirm('您确定发送这条信息吗', '温馨提示', { await ElMessageBox.confirm('您确定发送这条信息吗', '温馨提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
// console.log(inputPerson,'ddddd')
await SendMessageApi({ await SendMessageApi({
messageIds:id, receiverId: inputPerson.value.toString(),
content:textarea, courseId:inputCourseId.value.toString(),
userId:userStore.userInfo.id title:inputText.value,
content:textarea.value,
senderId:userStore.data.id
}).then(()=>{
ElMessage({
message:'发送成功',
type:'success'
})
}) })
}
//
const confirm = ()=>{
addPerson.value = false
}
//
const disappoint = ()=>{
addPerson.value = false
} }
</script> </script>
<style scoped> <style scoped>
@ -164,7 +201,7 @@ const disappoint = ()=>{
margin-bottom: 30px; margin-bottom: 30px;
} }
.header p{ .header p{
color: gainsboro; color: white;
} }
li{ li{
list-style: none; list-style: none;

@ -15,7 +15,7 @@
<div class="header_content"> <div class="header_content">
<span class="sender">发送人{{ Message.senderName }}</span> <span class="sender">发送人{{ Message.senderName }}</span>
<span class="time">发送时间{{ Message.sendTime }}</span> <span class="time">发送时间{{ Message.sendTime }}</span>
<span class="read-status">是否阅读{{Message.isRead}}</span> <span class="read-status">是否阅读{{Message.isRead ? '已读' : '未读' }}</span>
</div> </div>
<div class="recipient">标题{{ Message.title }}</div> <div class="recipient">标题{{ Message.title }}</div>
<div class="content"> <div class="content">

@ -11,12 +11,7 @@
<input type="checkbox" class="custom-checkbox" @change="toggleAll" :checked="allSelected" /> <input type="checkbox" class="custom-checkbox" @change="toggleAll" :checked="allSelected" />
<p class="selected-count">已选 {{ selectedCount }} 条记录</p> <p class="selected-count">已选 {{ selectedCount }} 条记录</p>
</div> </div>
<li v-for="item in sendMessage" <li v-for="item in sendMessage" :key="item.title" class="message-list-item">
:key="item.title"
class="message-list-item"
>
<!--添加悬浮删除按钮-->
<!-- <div class="message-list" @mouseover="hoveringOver = item.id" @mouseleave="hoveringOver = null">-->
<div class="message-list"> <div class="message-list">
<!-- 添加勾选框 --> <!-- 添加勾选框 -->
<div class="message-check"> <div class="message-check">
@ -28,10 +23,10 @@
<div class="message-content" @click="handleClick(item)"> <div class="message-content" @click="handleClick(item)">
<h2 class="message-title">{{item.title}}</h2> <h2 class="message-title">{{item.title}}</h2>
<div class="message-details"> <div class="message-details">
<span class="sender">收件人:{{item.receiverName}}</span> <span class="sender">收件人:{{item.receiverUsers}}</span>
<span class="read-status">阅读人数{{item.readUserNum}}</span> <span class="read-status">阅读人数{{item.readUserNum}}</span>
</div> </div>
<div class="message-time">{{item.sendTime}}</div> <div class="message-time">发送时间{{item.sendTime}}</div>
</div> </div>
<!-- 删除按钮默认不显示hover时显示 --> <!-- 删除按钮默认不显示hover时显示 -->
<!-- <el-button v-if="hoveringOver === item.id" class="delete-btn" @click="deleteSendMessage(item.id)" type="danger" round >删除</el-button>--> <!-- <el-button v-if="hoveringOver === item.id" class="delete-btn" @click="deleteSendMessage(item.id)" type="danger" round >删除</el-button>-->
@ -44,7 +39,7 @@
<el-pagination <el-pagination
v-model:current-page="params.pageNo" v-model:current-page="params.pageNo"
v-model:page-size="params.pageSize" v-model:page-size="params.pageSize"
:page-sizes="[2,3, 5, 7, 10]" :page-sizes="[ 5, 7, 10]"
:background="true" :background="true"
layout="jumper,total, sizes, prev, pager, next " layout="jumper,total, sizes, prev, pager, next "
:total="total" :total="total"
@ -64,7 +59,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
const userStore = useUserStore() const userStore = useUserStore()
// //
const params = ref({ const params = ref({
userId: userStore.userInfo.id, userId: userStore.data.id,
// userId: 4, // userId: 4,
isAsc:true, isAsc:true,
isDelete:0, isDelete:0,
@ -72,13 +67,26 @@ const params = ref({
isSend:1, isSend:1,
// messageId:false, // messageId:false,
pageNo:1, pageNo:1,
pageSize:3, pageSize:5,
sortBy:false,// sortBy:false//
}) })
const total = ref(0) const total = ref(0)
const sendMessage = ref([]) const sendMessage = ref([])
const loading = ref(false) const loading = ref(false)
// const hoveringOver = ref(null) // const hoveringOver = ref(null)
//
const getSendMessageList = async () => {
loading.value = true
const res = await getSendMessagesListApi(params.value)
sendMessage.value = res.data.list
total.value = res.data.total
loading.value = false
console.log(sendMessage.value,'消息消息消息消息')
}
//
onMounted(() => {
getSendMessageList()
})
// //
const selectedIds = ref([]); // ID const selectedIds = ref([]); // ID
const allSelected = computed(() => { const allSelected = computed(() => {
@ -115,42 +123,7 @@ function toggleSelection(id: number) {
function isSelected(id) { function isSelected(id) {
return selectedIds.value.includes(id); return selectedIds.value.includes(id);
} }
//
const getSendMessageList = async () => {
loading.value = true
const res = await getSendMessagesListApi(params.value)
sendMessage.value = res.data.list
total.value = res.data.total
loading.value = false
}
//
onMounted(() => {
getSendMessageList()
})
//
// const deleteSendMessage = async (id: any) => {
// await ElMessageBox.confirm('', '', {
// confirmButtonText: '',
// cancelButtonText: '',
// type: 'warning',
// })
// await deleteSendMessageApi({
// messageIds:id,
// userId:userStore.userInfo.id
// })
// .then(() => {
// console.log(id, 'id')
// getSendMessageList() //
// ElMessage.success('')
// // console.log(res)
// })
// .catch((err: any) => {
// console.log(id, 'id')
// ElMessage.error(err.response.data.message)
// })
//
// await getSendMessageList()
// }
// //
const handleSizeChange = (size: any) => { const handleSizeChange = (size: any) => {
@ -183,7 +156,6 @@ const handleClick = (item)=> {
// //
router.push({ path: '/sendMessageList', query: item }) router.push({ path: '/sendMessageList', query: item })
} }
</script> </script>
<style scoped> <style scoped>
.container{ .container{
@ -199,13 +171,10 @@ const handleClick = (item)=> {
align-items: center; /* 垂直居中对齐子元素 */ align-items: center; /* 垂直居中对齐子元素 */
gap: 10px; /* 设置子元素之间的间距 */ gap: 10px; /* 设置子元素之间的间距 */
} }
.custom-checkbox { .custom-checkbox {
transform: scale(1.5); /* 将勾选框放大1.5倍 */ transform: scale(1.5); /* 将勾选框放大1.5倍 */
} }
.selected-count { .selected-count {
} }
.message-check{ .message-check{
margin-right: 20px; margin-right: 20px;
@ -218,7 +187,6 @@ const handleClick = (item)=> {
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.message-icon { .message-icon {
margin-right: 30px; /* 图标右侧间距 */ margin-right: 30px; /* 图标右侧间距 */
font-size: 34px; /* 图标大小 */ font-size: 34px; /* 图标大小 */
@ -232,32 +200,26 @@ li{
justify-content: center; /* 标题和详情内容垂直居中 */ justify-content: center; /* 标题和详情内容垂直居中 */
flex: 1; /* 填充剩余空间 */ flex: 1; /* 填充剩余空间 */
} }
.message-title { .message-title {
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
} }
.message-details { .message-details {
display: flex; display: flex;
align-items: center; /* 细节内容水平居中 */ align-items: center; /* 细节内容水平居中 */
margin-top: 10px; /* 与标题的间距 */ margin-top: 10px; /* 与标题的间距 */
} }
.sender { .sender {
margin-right: 88px; /* 发件人和已读状态的间距 */ margin-right: 88px; /* 发件人和已读状态的间距 */
} }
.read-status { .read-status {
color: #888; /* 已读状态的颜色 */ color: #888; /* 已读状态的颜色 */
} }
.message-time { .message-time {
margin-left: auto; /* 发送时间靠右显示 */ margin-left: auto; /* 发送时间靠右显示 */
font-size: 15px; /* 发送时间字体大小 */ font-size: 15px; /* 发送时间字体大小 */
color: #666; /* 发送时间颜色 */ color: #666; /* 发送时间颜色 */
} }
.message-list-item { .message-list-item {
cursor: pointer; /* 鼠标悬停时显示手指形状,表示可点击 */ cursor: pointer; /* 鼠标悬停时显示手指形状,表示可点击 */
} }

@ -13,9 +13,9 @@
</template> </template>
<div class="container"> <div class="container">
<div class="header_content"> <div class="header_content">
<span class="sender">收件人{{ sendMessage.receiverName }}</span> <span class="sender">收件人{{ sendMessage.receiveUsers}}</span>
<span class="time">发送时间{{ sendMessage.sendTime }}</span> <span class="time">发送时间{{ sendMessage.sendTime }}</span>
<span class="read-status">是否阅读{{sendMessage.isRead}}</span> <!-- <span class="read-status">是否阅读{{sendMessage.isRead}}</span>-->
</div> </div>
<div class="recipient">标题{{ sendMessage.title }}</div> <div class="recipient">标题{{ sendMessage.title }}</div>
<div class="content"> <div class="content">
@ -30,8 +30,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {useRouter,useRoute} from "vue-router"; import {useRouter,useRoute} from "vue-router";
import {ref} from "vue";
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const receiveName = ref([])
// console.log(route.query.id,'id')
// //
if(!Object.keys(route.query).length){ if(!Object.keys(route.query).length){
router.go(-1) router.go(-1)
@ -40,10 +43,9 @@ if(!Object.keys(route.query).length){
const back = ()=>{ const back = ()=>{
router.push('/messageManagement/sendMessage') router.push('/messageManagement/sendMessage')
} }
import {ref} from "vue";
// //
const sendMessage = ref(route.query) const sendMessage = ref(route.query)
console.log(route.query.receiveUsers,'内容')
</script> </script>
<style scoped> <style scoped>

@ -24,17 +24,23 @@
<!-- 图标 --> <!-- 图标 -->
<div class="message-icon"> <div class="message-icon">
<el-icon><Comment /></el-icon> <el-icon><Comment /></el-icon>
<!-- 添加红色提示符 -->
<span v-if="!item.isRead" class="message-unread-indicator"></span>
</div> </div>
<div class="message-content" @click="handleClick(item)"> <div class="message-content" @click="handleClick(item)">
<h2 class="message-title">{{item.title}}</h2> <h2 class="message-title">{{item.title}}</h2>
<div class="message-details"> <div class="message-details">
<span class="sender">发件人{{item.sendPerson}}</span> <span class="sender">发件人{{item.senderName}}</span>
<span class="read-status">已读状态{{item.isRead}}</span> <span class="read-status" style="margin-right: 40px">是否已读{{ item.isRead ? '已读' : '未读' }}</span>
<span class="read-status">已读人数{{item.readUserNum}} / {{item.userNum}}</span>
</div> </div>
<div class="message-time">发送时间{{item.sendTime}}</div> <div class="message-time">发送时间{{item.sendTime}}</div>
</div> </div>
<!-- 删除按钮默认不显示hover时显示 --> <!-- 删除按钮默认不显示hover时显示 -->
<el-button v-if="hoveringOver === item.id" class="delete-btn" @click="deleteMessage(item.id)" type="danger" round>删除</el-button> <div v-if="!item.isRead" style="margin-right: 10px">
<el-button v-if="hoveringOver === item.id" @click="readMessage(item.id)" type="warning" round>点击已读</el-button>
</div>
<el-button v-if="hoveringOver === item.id" @click="deleteMessage(item.id)" type="danger" round>删除</el-button>
</div> </div>
<el-divider/> <el-divider/>
</li> </li>
@ -43,7 +49,7 @@
<el-pagination <el-pagination
v-model:current-page="params.pageNo" v-model:current-page="params.pageNo"
v-model:page-size="params.pageSize" v-model:page-size="params.pageSize"
:page-sizes="[2,4, 5, 7, 10]" :page-sizes="[ 5, 7, 10]"
:background="true" :background="true"
layout="jumper,total, sizes, prev, pager, next " layout="jumper,total, sizes, prev, pager, next "
:total="total" :total="total"
@ -58,11 +64,11 @@
import { ref,computed,onMounted} from 'vue'; import { ref,computed,onMounted} from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import useUserStore from "@/store/modules/user"; import useUserStore from "@/store/modules/user";
import {getMessagesListApi,deleteSendMessageApi} from "@/api/user/messag"; import {getMessagesListApi,deleteSendMessageApi,readMessagesBatch} from "@/api/user/messag";
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
const userStore = useUserStore() const userStore = useUserStore()
const params = ref({ const params = ref({
userId: userStore.userInfo.id, userId: userStore.data.id,
// userId: 4, // userId: 4,
isAsc:true, isAsc:true,
isDelete:0, isDelete:0,
@ -70,7 +76,7 @@ const params = ref({
isSend:1, isSend:1,
// messageId:false, // messageId:false,
pageNo:1, pageNo:1,
pageSize:4, pageSize:5,
sortBy:false,// sortBy:false,//
}) })
const total = ref(0) const total = ref(0)
@ -136,7 +142,7 @@ const deleteMessage = async (id: any) => {
}) })
await deleteSendMessageApi({ await deleteSendMessageApi({
messageIds:id, messageIds:id,
userId:userStore.userInfo.id userId:userStore.data.id
}) })
.then(() => { .then(() => {
console.log(id, '删除id') console.log(id, '删除id')
@ -151,6 +157,15 @@ const deleteMessage = async (id: any) => {
await getMessageList() await getMessageList()
} }
//
const readMessage = async (id:any) =>{
console.log(id,userStore.data.id,'dddddd')
await readMessagesBatch({
messageIds:id,
userId:userStore.data.id
})
await getMessageList()
}
// //
const handleSizeChange = (size: any) => { const handleSizeChange = (size: any) => {
// loading.value = true // loading.value = true
@ -223,6 +238,7 @@ const handleClick = (item)=> {
.message-icon { .message-icon {
margin-right: 30px; /* 图标右侧间距 */ margin-right: 30px; /* 图标右侧间距 */
font-size: 34px; /* 图标大小 */ font-size: 34px; /* 图标大小 */
position: relative;
} }
li{ li{
list-style: none; list-style: none;
@ -232,8 +248,19 @@ li{
flex-direction: column; flex-direction: column;
justify-content: center; /* 标题和详情内容垂直居中 */ justify-content: center; /* 标题和详情内容垂直居中 */
flex: 1; /* 填充剩余空间 */ flex: 1; /* 填充剩余空间 */
position: relative;
}
/*未读消息加小红点*/
.message-unread-indicator {
position: absolute;
top: -4px; /* 调整位置 */
right: -4px; /* 调整位置 */
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
z-index: 1; /* 确保它在其他元素之上 */
} }
.message-title { .message-title {
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;

@ -6,17 +6,107 @@
<el-button type="primary" @click="back" plain round>返回</el-button> <el-button type="primary" @click="back" plain round>返回</el-button>
</div> </div>
</template> </template>
<p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> <!-- 栏目内添加新闻-->
<template #footer>Footer content</template> <el-form v-model="newsForm">
<el-form-item label="所属栏目id" label-width="140px">
<el-input v-model="newsForm.categoryId" autocomplete="off" />
</el-form-item>
<el-form-item label="文章内容" label-width="140px">
<textarea style="width: 100%;height: 300px" v-model="newsForm.content"></textarea>
<!-- <el-input class="brief_text" type="textarea" /> -->
</el-form-item>
<!-- <el-form-item label="文章id" label-width="140px">-->
<!-- <el-input v-model="newsForm.id" autocomplete="off" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="标题图片" label-width="140px">-->
<!-- <el-input v-model="newsForm.pic" autocomplete="off" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="发布时间" label-width="140px">-->
<!-- <el-input v-model="newsForm.publishTime" autocomplete="off" type="date"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="浏览次数" label-width="140px">-->
<!-- <el-input v-model="newsForm.readingNumber" autocomplete="off" />-->
<!-- </el-form-item>-->
<el-form-item label="发布状态" label-width="140px">
<el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" />
</el-form-item>
<el-form-item label="文章标题" label-width="140px">
<el-input v-model="newsForm.title" autocomplete="off" />
</el-form-item>
<!-- <el-form-item label="更新时间" label-width="140px">-->
<!-- <el-input v-model="newsForm.updateTime" autocomplete="off" type="date"/>-->
<!-- </el-form-item>-->
<el-form-item label="发布文章的用户id" label-width="140px">
<el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<!-- <el-button>取消</el-button>-->
<el-button type="primary" @click="addNewsContentConfirm">
提交
</el-button>
</div>
</template>
</el-card> </el-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {useRouter} from "vue-router"; import {
addEssay,
} from "@/api/user/news.js"
import {ref} from 'vue';
import {ElButton,ElMessage,ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import useUserStore from "@/store/modules/user";
const userStore = useUserStore()
import {useRouter,useRoute} from "vue-router";
const router = useRouter(); const router = useRouter();
//routeid
const route = useRoute();
// console.log(route.query.id,'id')
const back = ()=>{ const back = ()=>{
router.push('/news/newsContent') router.push('/news/newsContent')
} }
//
const newsForm = ref({
categoryId:route.query.id,
content:'',
// file:'',
// id:'',
// pic:'',
publishTime:'',
readingNumber:'',
status:'',
title:'',
updateTime:'',
userId:userStore.data.id,
})
//
const addNewsContentConfirm = async (id)=>{
await addEssay({
categoryId:newsForm.value.categoryId,
content:newsForm.value.content,
// file:newsForm.value.file,
// id:newsForm.value.id,
// pic:newsForm.value.pic,
publishTime:newsForm.value.publishTime,
readingNumber:newsForm.value.readingNumber,
status:newsForm.value.status,
title:newsForm.value.title,
updateTime:newsForm.value.updateTime,
userId:newsForm.value.userId
}).then(()=>{
ElMessage({
message:'添加成功',
type:'success'
});
// 使 setTimeout
setTimeout(() => {
router.push('/news/newsContent');
}, 1000); // 1000 1
})
}
</script> </script>
<style scoped> <style scoped>
@ -33,5 +123,10 @@ const back = ()=>{
.card-header span { .card-header span {
flex: 1; /* 使 span 占用可用空间,实现居中效果 */ flex: 1; /* 使 span 占用可用空间,实现居中效果 */
text-align: center; /* 文本居中 */ text-align: center; /* 文本居中 */
font-size: 20px;
}
.dialog-footer{
display: flex;
justify-content: flex-end;
} }
</style> </style>

@ -2,37 +2,78 @@
<div class="header_title"> <div class="header_title">
<span>资讯</span> <span>资讯</span>
</div> </div>
<div class="common-layout">
<el-container>
<el-aside>
<div> <div>
<el-card shadow="always"> <el-button class="button-container_column" name="editColumnButton" @click="editHandle" round>栏目管理</el-button>
</div>
<div class="header-flex-container"> <div class="header-flex-container">
<ul class="header-list"> <ul class="header-list">
<li v-for="item in column"> <li v-for="item in column">
<el-dropdown placement="bottom"> <el-dropdown placement="right">
<div class="header-column" type="primary">
<span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p --> <span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p -->
</div>
<!--当前栏目新闻管理-->
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item> <el-dropdown-item>
<ul> <ul>
<li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px"> <li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px">
<el-tag type="info" size="large" style="height: 30px;font-size: 15px">
<p >{{listObject.title}}</p> <p >{{listObject.title}}</p>
<el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round>删除</el-button> </el-tag>
<el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round>编辑</el-button> <div class="button-container">
<el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round plain>删除</el-button>
<el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round plain>编辑</el-button>
</div>
</li> </li>
</ul> </ul>
</el-dropdown-item> </el-dropdown-item>
<div class="add-news-button"> <div class="add-news-button">
<el-button @click="addNewsDialogFormVisibleButton(item.id)" type="primary" plain round>添加当前栏目新闻</el-button> <el-button @click="addNewsDialogFormVisibleButton(item.id)" type="success" style="margin-bottom: 10px" plain round>添加当前栏目新闻</el-button>
</div> </div>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</li> </li>
</ul> </ul>
<div>
<el-button name="editColumnButton" @click="editHandle" round>栏目管理</el-button>
</div> </div>
</el-aside>
<!-- 新闻内容-->
<el-main>
<div class="mainContainer">
<div class="card-header">
<el-card shadow="hover">
<div style="height:33px">
<span class="contentTitle">{{nowTimeNewsData.title}}</span>
</div> </div>
</el-card> </el-card>
<el-card shadow="hover">
<div class="news-flex-container">
<p>发布人{{ nowTimeNewsData.userId }}</p>
<p>阅读数量{{ nowTimeNewsData.readingNumber }}</p>
<p>发布日期{{ nowTimeNewsData.publishTime }}</p>
<p>更新时间{{nowTimeNewsData.updateTime}}</p>
</div>
</el-card>
</div>
<div style="text-align: center">
<el-scrollbar class="scrollbarContent">
<span>{{ nowTimeNewsData.content }}</span>
<!-- <p>{{ nowTimeNewsData.content }}</p>-->
</el-scrollbar>
</div>
<el-card style="text-align: center">
<el-link href="https://element-plus.org" target="_blank" style="margin-right: 30px;font-size: 19px">关于我们</el-link>
</el-card>
</div>
</el-main>
</el-container>
</div> </div>
<!-- 栏目编辑弹框--> <!-- 栏目编辑弹框-->
<el-drawer v-model="drawer" title="title" :with-header="false"> <el-drawer v-model="drawer" title="title" :with-header="false">
@ -60,7 +101,7 @@
<el-input v-model="form.categoryName" autocomplete="off" /> <el-input v-model="form.categoryName" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="栏目父id" label-width="140px"> <el-form-item label="栏目父id" label-width="140px">
<el-input v-model="form.categoryPid" autocomplete="off" /> <el-input v-model="form.categoryPid" autocomplete="off" readonly/>
</el-form-item> </el-form-item>
<!-- <el-form-item label="创建时间" label-width="140px">--> <!-- <el-form-item label="创建时间" label-width="140px">-->
<!-- <el-input v-model="form.createTime" autocomplete="off" type="date"/>--> <!-- <el-input v-model="form.createTime" autocomplete="off" type="date"/>-->
@ -90,90 +131,15 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<!-- 新闻内容-->
<el-card class="container">
<template #header>
<div class="card-header">
<span class="contentTitle">{{nowTimeNewsData.title}}</span>
<el-card shadow="hover">
<div class="news-flex-container">
<p>发布人{{ nowTimeNewsData.userId }}</p>
<p>阅读数量{{ nowTimeNewsData.readingNumber }}</p>
<p>发布日期{{ nowTimeNewsData.publishTime }}</p>
<p>更新时间{{nowTimeNewsData.updateTime}}</p>
</div>
</el-card>
</div>
</template>
<div style="text-align: center">
<el-input
v-model="nowTimeNewsData.content"
style="width: 80%;font-size: 20px"
:rows="15"
type="textarea"
placeholder="Please input"
/>
</div>
<template #footer>
<div style="text-align: center">
<el-link href="https://element-plus.org" target="_blank" style="margin-right: 30px;font-size: 19px">关于我们</el-link>
</div>
</template>
</el-card>
<!-- 栏目内添加新闻-->
<el-dialog v-model="addNewsDialogFormVisible" title="添加新闻" width="500px">
<el-form v-model="newsForm">
<el-form-item label="所属栏目id" label-width="140px">
<el-input v-model="newsForm.categoryId" autocomplete="off" readonly disabled/>
</el-form-item>
<el-form-item label="文章内容" label-width="140px">
<el-input v-model="newsForm.content" autocomplete="off" />
</el-form-item>
<!-- <el-form-item label="文章文件" label-width="140px">-->
<!-- <el-input v-model="newsForm.file" autocomplete="off" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="文章id" label-width="140px">-->
<!-- <el-input v-model="newsForm.id" autocomplete="off" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="标题图片" label-width="140px">-->
<!-- <el-input v-model="newsForm.pic" autocomplete="off" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="发布时间" label-width="140px">-->
<!-- <el-input v-model="newsForm.publishTime" autocomplete="off" type="date"/>-->
<!-- </el-form-item>-->
<el-form-item label="浏览次数" label-width="140px">
<el-input v-model="newsForm.readingNumber" autocomplete="off" />
</el-form-item>
<el-form-item label="发布状态" label-width="140px">
<el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" />
</el-form-item>
<el-form-item label="文章标题" label-width="140px">
<el-input v-model="newsForm.title" autocomplete="off" />
</el-form-item>
<!-- <el-form-item label="更新时间" label-width="140px">-->
<!-- <el-input v-model="newsForm.updateTime" autocomplete="off" type="date"/>-->
<!-- </el-form-item>-->
<el-form-item label="发布文章的用户id" label-width="140px">
<el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addNewsDialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="addNewsContentConfirm">
提交
</el-button>
</div>
</template>
</el-dialog>
<!-- 修改新闻--> <!-- 修改新闻-->
<el-dialog v-model="editNewsDialogFormVisible" title="修改新闻" width="500px"> <el-drawer v-model="editNewsDialogFormVisible" title="修改新闻" width="500px">
<el-form v-model="nowTimeNewsData"> <el-form v-model="nowTimeNewsData">
<el-form-item label="所属栏目id" label-width="140px"> <el-form-item label="所属栏目id" label-width="140px">
<el-input v-model="nowTimeNewsData.categoryId" autocomplete="off" readonly disabled/> <el-input v-model="nowTimeNewsData.categoryId" autocomplete="off" readonly disabled/>
</el-form-item> </el-form-item>
<el-form-item label="文章内容" label-width="140px"> <el-form-item label="文章内容" label-width="140px">
<el-input v-model="nowTimeNewsData.content" autocomplete="off" /> <textarea style="width: 100%;height: 300px" v-model="nowTimeNewsData.content"></textarea>
<!-- <el-input class="brief_text" type="textarea" /> -->
</el-form-item> </el-form-item>
<!-- <el-form-item label="文章文件" label-width="140px">--> <!-- <el-form-item label="文章文件" label-width="140px">-->
<!-- <el-input v-model="nowTimeNewsData.file" autocomplete="off" />--> <!-- <el-input v-model="nowTimeNewsData.file" autocomplete="off" />-->
@ -205,13 +171,13 @@
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="addNewsDialogFormVisible = false">取消</el-button> <el-button @click="editNewsDialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="editNewsContentConfirm"> <el-button type="primary" @click="editNewsContentConfirm">
提交 提交
</el-button> </el-button>
</div> </div>
</template> </template>
</el-dialog> </el-drawer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -224,9 +190,11 @@ import {
deleteEssay, deleteEssay,
editEssay editEssay
} from "@/api/user/news.js" } from "@/api/user/news.js"
import {ref,reactive,onMounted} from 'vue'; import {ref,reactive,onMounted,mounted} from 'vue';
import {ElButton,ElDrawer, ElMessageBox, ElMessage} from 'element-plus' import {ElButton,ElDrawer, ElMessageBox, ElMessage} from 'element-plus'
import useUserStore from "@/store/modules/user"; import useUserStore from "@/store/modules/user";
import {useRouter} from "vue-router";
const router = useRouter();
const userStore = useUserStore() const userStore = useUserStore()
const drawer = ref(false) const drawer = ref(false)
const addFormVisible = ref(false) const addFormVisible = ref(false)
@ -240,41 +208,27 @@ const addNewsDialogFormVisible = ref(false)
const editNewsDialogFormVisible = ref(false) const editNewsDialogFormVisible = ref(false)
// //
const addNewsDialogFormVisibleButton = (id)=>{ const addNewsDialogFormVisibleButton = (id)=>{
addNewsDialogFormVisible.value = true // addNewsDialogFormVisible.value = true
columnId.value = id router.push(`/news/newsContentDetails?id=${id}`)
// columnId.value = id
} }
const nowTimeNewsData = ref({}) const nowTimeNewsData = ref({})
// //
const newViews = (listObject)=> { const newViews = (listObject)=> {
nowTimeNewsData.value = listObject nowTimeNewsData.value = { ...listObject }
} }
// //
const form = ref({ const form = ref({
categoryName:'', categoryName:'',
categoryPid:'', categoryPid:0,
createTime:'', createTime:'',
creatorId:userStore.userInfo.id, creatorId:userStore.data.id,
id:'', id:'',
sort:'', sort:'',
status:'', status:'',
updateTime:'' updateTime:''
}) })
//
const newsForm = ref({
categoryId:columnId,
content:'',
file:'',
id:'',
pic:'',
publishTime:'',
readingNumber:'',
status:'',
title:'',
updateTime:'',
userId:userStore.userInfo.id,
})
// //
const CategoryList = async () => { const CategoryList = async () => {
const res = await queryCategory() const res = await queryCategory()
@ -326,28 +280,15 @@ const deleteHandle = async (id)=>{
} }
// //
const EssayList = async (id)=>{ const EssayList = async (id)=>{
const ress = await queryEssay(id) const response = await queryEssay(id)
// console.log(ress.data,'ress') // console.log(response.data,'response')
essay.value = ress.data essay.value = response.data
// console.log(essay.value,'essay') if (essay.value.length > 0) {
newViews(essay.value[0]); //
} }
// // console.log(essay.value,'essay')
const addNewsContentConfirm = async ()=>{
addNewsDialogFormVisible.value = false
await addEssay({
categoryId:newsForm.value.categoryId,
content:newsForm.value.content,
// file:newsForm.value.file,
// id:newsForm.value.id,
// pic:newsForm.value.pic,
publishTime:newsForm.value.publishTime,
readingNumber:newsForm.value.readingNumber,
status:newsForm.value.status,
title:newsForm.value.title,
updateTime:newsForm.value.updateTime,
userId:newsForm.value.userId
})
} }
// //
const deleteNewsList = async (id)=>{ const deleteNewsList = async (id)=>{
// console.log(id) // console.log(id)
@ -390,17 +331,27 @@ const editNewsContentConfirm = async ()=>{
margin: auto; margin: auto;
background-image: linear-gradient(60deg,honeydew,powderblue,honeydew); background-image: linear-gradient(60deg,honeydew,powderblue,honeydew);
} }
.el-aside {
height: 100vh; /* 设置高度为视窗高度 */
overflow-y: auto; /* 当内容超出时显示滚动条 */
}
.header-flex-container { .header-flex-container {
display: flex; display: flex;
align-items: center; /* 垂直居中 */ /*align-items: center; !* 垂直居中 *!*/
padding: 20px; padding: 20px;
background: #4b81d7; gap: 10px;
justify-content: space-between; /* 左边对齐和右边对齐 */ background: white;
margin-top: 20px;
height: 81vh;
overflow-y: auto;
}
.header-flex-container::-webkit-scrollbar {
width: 0px; /* 滚动条宽度 */
} }
.header-list { .header-list {
display: flex; /* 使li元素水平排列 */ /*display: flex; !* 使li元素水平排列 *!*/
flex-wrap: wrap; /* 如果需要换行 */ flex-wrap: wrap; /* 如果需要换行 */
align-items: center; /* 如果需要,也可以使li元素垂直居中 */ /*align-items: center; !* 如果需要,也可以使li元素垂直居中 *!*/
margin: 0; /* 移除默认外边距 */ margin: 0; /* 移除默认外边距 */
padding: 0; /* 移除默认内边距 */ padding: 0; /* 移除默认内边距 */
} }
@ -412,8 +363,16 @@ const editNewsContentConfirm = async ()=>{
list-style: none; list-style: none;
margin-right: 10px; margin-right: 10px;
} }
.el-dropdown { .header-column{
margin-right: 30px; height:30px;
margin-top: 20px;
margin-right: 80px;
padding: 5px;
margin-bottom: 20px;
cursor: pointer; /* 鼠标悬停时显示手指形状,表示可点击 */
}
.header-column span{
color: #222222;
} }
.add-news-button { .add-news-button {
margin-top: auto; /* 将按钮推到底部 */ margin-top: auto; /* 将按钮推到底部 */
@ -421,13 +380,11 @@ const editNewsContentConfirm = async ()=>{
width: 100%; width: 100%;
} }
.contentTitle{ .contentTitle{
color: red; color: firebrick;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
display: block; display: block;
width: 100%; /* 或者设置一个具体的宽度 */ width: 100%; /* 或者设置一个具体的宽度 */
line-height: 40px;
margin-bottom: 20px;
} }
.flex-container { .flex-container {
display: flex; display: flex;
@ -435,7 +392,17 @@ const editNewsContentConfirm = async ()=>{
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
} }
/* 添加新的类来控制按钮的位置 */
.button-container {
display: flex;
justify-content: flex-end; /* 按钮靠右 */
align-items: center; /* 垂直居中 */
}
.button-container_column{
position:absolute;
margin-top: 30px;
margin-left: 200px;
}
.news-flex-container { .news-flex-container {
display: flex; /* 使用 Flexbox 布局 */ display: flex; /* 使用 Flexbox 布局 */
justify-content: space-between; /* 平均分配空间 */ justify-content: space-between; /* 平均分配空间 */
@ -455,5 +422,14 @@ const editNewsContentConfirm = async ()=>{
.flex-container p:last-child { .flex-container p:last-child {
margin-right: 0; margin-right: 0;
} }
.scrollbarContent{
height:60vh;
border: 1px;
background: white;
border-radius: 1%;
font-size: 20px;
padding: 10px;
overflow-y: auto;
line-height: 2.0;
}
</style> </style>

@ -11,8 +11,8 @@ import {
} from '@/api/user/stud' } from '@/api/user/stud'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import editStu from './components/editStu.vue' // import editStu from './components/editStu.vue'
import { tryOnMounted } from '@vueuse/core' // import { tryOnMounted } from '@vueuse/core'
const userStore = useUserStore() const userStore = useUserStore()
// console.log(userStore.data.id, 'icon') // // console.log(userStore.data.id, 'icon') //
const formLabelWidth = '60px' const formLabelWidth = '60px'

Loading…
Cancel
Save