Skip to content

S
saas-lab
提交 c4ac8abb authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 73bb10e1
隐藏空白字符变更
内嵌 并排
正在显示 包含 293 行增加 和 191 行删除
src/components/ImageViewer.vue
浏览文件 @ c4ac8abb
<script setup lang="ts">
import { Close } from '@element-plus/icons-vue'
import { onKeyStroke } from '@vueuse/core'
interface FileItem {
name: string
......@@ -15,6 +16,14 @@ withDefaults(defineProps<Props>(), {
modelValue: false,
index: 0
})
const emit = defineEmits<{
(e: 'update:modelValue', visible: boolean): void
}>()
// esc 关闭
onKeyStroke('Escape', () => {
emit('update:modelValue', false)
})
</script>
<template>
......
src/modules/admin/lab/discuss/components/DiscussItem.vue
浏览文件 @ c4ac8abb
......@@ -16,28 +16,29 @@ defineEmits<{
<div class="discuss-item">
<div class="discuss-box">
<div class="discuss-box-user">
<img :src="info.created_operator_avatar" />
<p>{{ info.student_id_name }}</p>
<div class="discuss-box-user__avatar"><img :src="info.created_operator_avatar" /></div>
<div class="discuss-box-user__content">
<h3>{{ info.student_id_name }}</h3>
<p>{{ info.created_time }}</p>
</div>
<div class="button-comment">
<el-icon><ChatLineRound></ChatLineRound></el-icon>{{ info.replies_num }}
</div>
</div>
<div class="discuss-box-main">
<div class="discuss-box-header">
<p class="discuss-box-time">{{ info.created_time }}</p>
<div class="tools">
<el-icon><ChatLineRound></ChatLineRound></el-icon>{{ info.replies_num }}
</div>
</div>
<h3>{{ info.title }}</h3>
<div class="discuss-box-content" v-html="info.content"></div>
</div>
</div>
<div class="discuss-box discuss-comment" v-for="item in list" :key="item.id">
<div class="discuss-box-user">
<div class="discuss-comment" v-for="item in list" :key="item.id">
<div class="discuss-comment__avatar">
<img :src="item.sso_id_avatar" />
<p>{{ item.sso_id_name }}</p>
</div>
<div class="discuss-box-main">
<p class="discuss-box-time">{{ item.created_time }}</p>
<div class="discuss-box-content" v-html="item.content"></div>
<div class="discuss-comment-content">
<span class="discuss-comment__username">{{ item.sso_id_name }}</span
>：
<span v-html="item.content"></span>
<p class="discuss-comment-time">{{ item.created_time }}</p>
</div>
</div>
</div>
......@@ -45,56 +46,104 @@ defineEmits<{
<style lang="scss" scoped>
.discuss-box {
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
}
.discuss-box-user {
display: flex;
margin: 10px 0;
padding: 10px;
font-size: 12px;
color: var(--main-color);
border-radius: 10px;
border: 1px solid var(--main-color);
&.discuss-comment {
margin-left: 40px;
color: #016fa0;
border: 1px solid #016fa0;
align-items: center;
.button-comment {
display: flex;
align-items: center;
justify-content: center;
color: #333333;
cursor: pointer;
&.is-active {
color: var(--main-color);
}
}
.el-icon {
font-size: 16px;
margin-left: 10px;
margin-right: 5px;
}
}
.discuss-box-user {
.discuss-box-user__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
img {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.discuss-box-user__content {
flex: 1;
margin-left: 10px;
overflow: hidden;
h3 {
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: #333333;
}
p {
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #999999;
}
}
.discuss-box-main {
flex: 1;
padding-left: 10px;
margin-left: 50px;
h3 {
font-size: 14px;
padding: 16px 0;
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: #333333;
}
}
.discuss-box-content {
padding: 5px 0;
color: #555;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #333333;
}
.discuss-box-header {
.discuss-comment {
display: flex;
align-items: center;
justify-content: space-between;
.tools {
display: flex;
align-items: center;
.el-icon {
font-size: 16px;
margin-left: 10px;
margin-right: 5px;
color: #333333;
}
margin-top: 20px;
}
.discuss-comment__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.discuss-comment-content {
flex: 1;
margin-left: 10px;
color: #333;
overflow: hidden;
}
.discuss-comment__username {
font-size: 16px;
line-height: 20px;
color: var(--main-color);
}
.discuss-comment-time {
margin-top: 10px;
font-size: 14px;
line-height: 20px;
color: #999999;
text-align: right;
}
</style>
src/modules/admin/lab/record/components/ScoreDialog.vue
浏览文件 @ c4ac8abb
......@@ -78,8 +78,14 @@ function handleSubmit() {
<template>
<el-dialog title="学生实验评分" :close-on-click-modal="false" @update:modelValue="$emit('update:modelValue')">
<el-form :rules="rules" label-width="120px" label-suffix="：" v-if="detail">
<el-form-item label="实验名称">{{ detail.experiment_name }}</el-form-item>
<el-form-item label="实验课程名称">{{ detail.course_name }}</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="实验名称">{{ detail.experiment_name }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="实验课程名称">{{ detail.course_name }}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="学生姓名">{{ detail.student_name }}</el-form-item>
......@@ -96,24 +102,8 @@ function handleSubmit() {
<el-form-item label="所属班级">{{ detail.class_name }}</el-form-item>
</el-col>
</el-row>
<el-form-item label="实验报告文件">
<p v-if="file">
<a :href="file.url" target="_blank">
<el-icon><Document /></el-icon>{{ file.name }}
</a>
</p>
</el-form-item>
<el-form-item label="实验过程截图">
<ul class="picture-list">
<li v-for="item in pictures" :key="item.url">
<p class="t1">
<a :href="item.url" target="_blank">{{ item.name }}</a>
</p>
<p class="t2">截图时间：{{ item.upload_time }}</p>
</li>
</ul>
</el-form-item>
<el-form-item label="实验成绩">
<el-form-item label="实验成绩" class="form-item-score">
<el-form
ref="formRef"
:model="form"
......@@ -137,6 +127,23 @@ function handleSubmit() {
</el-form-item>
</el-form>
</el-form-item>
<el-form-item label="实验报告文件">
<div v-if="file">
<a :href="file.url" target="_blank" class="file-item">
<el-icon><Document /></el-icon>{{ file.name }}
</a>
</div>
</el-form-item>
<el-form-item label="实验过程截图">
<ul class="picture-list">
<li v-for="item in pictures" :key="item.url">
<p class="t1">
<a :href="item.url" target="_blank">{{ item.name }}</a>
</p>
<p class="t2">截图时间：{{ item.upload_time }}</p>
</li>
</ul>
</el-form-item>
<el-row justify="center">
<el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
<el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
......@@ -146,6 +153,14 @@ function handleSubmit() {
</template>
<style lang="scss" scoped>
.file-item {
display: flex;
align-items: center;
color: var(--main-color);
.el-icon {
margin-right: 5px;
}
}
.picture-list {
width: 100%;
li {
......@@ -153,7 +168,7 @@ function handleSubmit() {
justify-content: space-between;
}
a {
color: blue;
color: var(--main-color);
}
.t1 {
flex: 1;
......@@ -161,8 +176,16 @@ function handleSubmit() {
text-overflow: ellipsis;
overflow: hidden;
}
.t2 {
flex: 1;
}
.form-item-score {
padding-top: 10px;
background-color: #f8f9fb;
border-radius: 16px;
:deep(.el-form-item__label) {
text-align: center;
}
.el-input-number {
width: 100px;
}
}
</style>
src/modules/student/lab/components/Discuss.vue
浏览文件 @ c4ac8abb
......@@ -5,7 +5,7 @@ import { useInfiniteScroll } from '@vueuse/core'
import DiscussItem from './DiscussItem.vue'
import { getExperimentDiscussList } from '../api'
const DiscussAddDialog = defineAsyncComponent(() => import('./DiscussAddDialog.vue'))
const DiscussPublish = defineAsyncComponent(() => import('./DiscussPublish.vue'))
interface Props {
experiment_id?: string
}
......@@ -41,8 +41,6 @@ const isEmpty = $computed(() => {
return !props.experiment_id || !list.length
})
const dialogVisible = $ref(false)
// 滚动加载
const scrollRef = ref<HTMLElement>()
useInfiniteScroll(
......@@ -64,9 +62,8 @@ useInfiniteScroll(
<el-radio :label="3">我的小组</el-radio>
<el-radio :label="4">我的班级</el-radio>
</el-radio-group>
<el-row justify="end">
<el-button round type="primary" @click="dialogVisible = true">发表新话题</el-button>
</el-row>
<!-- 发表新话题 -->
<DiscussPublish :experiment_id="experiment_id" @update="fetchInfo(true)" v-if="experiment_id"></DiscussPublish>
<el-empty description="暂无数据" v-if="isEmpty" />
<template v-else>
<div class="discuss-scroll" ref="scrollRef">
......@@ -81,13 +78,6 @@ useInfiniteScroll(
</div>
</template>
</div>
<!-- 发表新话题 -->
<DiscussAddDialog
v-model="dialogVisible"
:experiment_id="experiment_id"
@update="fetchInfo(true)"
v-if="dialogVisible && experiment_id"
></DiscussAddDialog>
</template>
<style lang="scss" scoped>
......
src/modules/student/lab/components/DiscussCommentAddDialog.vue → src/modules/student/lab/components/DiscussCommentPublish.vue
浏览文件 @ c4ac8abb
......@@ -11,7 +11,6 @@ const props = defineProps<Props>()
const emit = defineEmits<{
(e: 'update'): void
(e: 'update:modelValue', visible: boolean): void
}>()
const formRef = $ref<FormInstance>()
......@@ -30,26 +29,23 @@ function handleAdd() {
addExperimentDiscussComment(params).then(() => {
ElMessage({ message: '评论成功', type: 'success' })
emit('update')
emit('update:modelValue', false)
formRef?.resetFields()
})
}
</script>
<template>
<el-dialog
title="话题评论"
:close-on-click-modal="false"
width="600px"
@update:modelValue="$emit('update:modelValue')"
<el-form
ref="formRef"
:model="form"
:rules="rules"
style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0"
>
<el-form ref="formRef" :model="form" :rules="rules">
<el-form-item prop="content">
<el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
</el-form-item>
<el-row justify="center">
<el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
<el-button type="primary" round auto-insert-space @click="handleSubmit">评论</el-button>
</el-row>
</el-form>
</el-dialog>
<el-form-item prop="content">
<el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
</el-form-item>
<el-row justify="end">
<el-button type="primary" @click="handleSubmit">评论</el-button>
</el-row>
</el-form>
</template>
src/modules/student/lab/components/DiscussItem.vue
浏览文件 @ c4ac8abb
......@@ -2,7 +2,7 @@
import type { ExperimentDiscussType } from '../types'
import { ChatLineRound } from '@element-plus/icons-vue'
const DiscussCommentAddDialog = defineAsyncComponent(() => import('./DiscussCommentAddDialog.vue'))
const DiscussCommentPublish = defineAsyncComponent(() => import('./DiscussCommentPublish.vue'))
interface Props {
data: ExperimentDiscussType
......@@ -13,113 +13,156 @@ defineEmits<{
(e: 'update'): void
}>()
const commentDialogVisible = $ref(false)
const commentVisible = $ref(false)
const commentButtonText = $computed(() => (commentVisible ? '收起' : '展开'))
</script>
<template>
<div class="discuss-item">
<div class="discuss-box">
<div class="discuss-box-user">
<img :src="data.sso_user.avatar" />
<p>{{ data.sso_user.real_name || data.sso_user.nickname || data.sso_user.username }}</p>
<div class="discuss-box-user__avatar"><img :src="data.sso_user.avatar" /></div>
<div class="discuss-box-user__content">
<h3>{{ data.sso_user.real_name || data.sso_user.nickname || data.sso_user.username }}</h3>
<p>{{ data.created_time }}</p>
</div>
</div>
<div class="discuss-box-main">
<div class="discuss-box-header">
<p class="discuss-box-time">{{ data.created_time }}</p>
<div class="tools">
<el-button size="small" type="primary" plain round @click="commentVisible = !commentVisible">
{{ commentButtonText }}
</el-button>
<el-icon><ChatLineRound></ChatLineRound></el-icon>{{ data.reply_count }}
</div>
</div>
<h3>{{ data.title }}</h3>
<div class="discuss-box-content" v-html="data.content"></div>
</div>
<div class="discuss-box-footer">
<div class="button-comment" :class="{ 'is-active': commentVisible }" @click="commentVisible = !commentVisible">
<el-icon><ChatLineRound></ChatLineRound></el-icon>{{ data.reply_count }}
</div>
</div>
</div>
<template v-if="commentVisible">
<div class="discuss-box discuss-comment" v-for="item in data.replies" :key="item.id">
<div class="discuss-box-user">
<!-- 我要评论 -->
<DiscussCommentPublish :data="data" @update="$emit('update')"></DiscussCommentPublish>
<div class="discuss-comment" v-for="item in data.replies" :key="item.id">
<div class="discuss-comment__avatar">
<img :src="item.sso_user.avatar" />
<p>{{ item.sso_user.real_name || item.sso_user.nickname || item.sso_user.username }}</p>
</div>
<div class="discuss-box-main">
<p class="discuss-box-time">{{ item.created_time }}</p>
<div class="discuss-box-content" v-html="item.content"></div>
<div class="discuss-comment-content">
<span class="discuss-comment__username">{{
item.sso_user.real_name || item.sso_user.nickname || item.sso_user.username
}}</span
>：
<span v-html="item.content"></span>
<p class="discuss-comment-time">{{ item.created_time }}</p>
</div>
</div>
</template>
<el-row justify="end" style="margin-top: 10px">
<el-button round type="primary" size="small" @click="commentDialogVisible = true">我要评论</el-button>
</el-row>
</div>
<!-- 我要评论 -->
<DiscussCommentAddDialog
:data="data"
v-model="commentDialogVisible"
@update="$emit('update')"
v-if="commentDialogVisible"
></DiscussCommentAddDialog>
</template>
<style lang="scss" scoped>
.discuss-item {
margin-top: 10px;
padding: 10px 0;
border-top: 1px dashed #ccc;
border-top: 1px solid #e6e6e6;
}
.discuss-box {
display: flex;
margin: 10px 0;
padding: 10px;
font-size: 12px;
color: var(--main-color);
border-radius: 10px;
border: 1px solid var(--main-color);
&.discuss-comment {
margin-left: 40px;
color: #016fa0;
border: 1px solid #016fa0;
}
padding: 20px 0 10px;
}
.discuss-box-user {
display: flex;
align-items: center;
}
.discuss-box-user__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
img {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.discuss-box-user__content {
flex: 1;
margin-left: 10px;
overflow: hidden;
h3 {
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: #333333;
}
p {
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #999999;
}
}
.discuss-box-main {
flex: 1;
padding-left: 10px;
margin-left: 50px;
h3 {
font-size: 14px;
padding: 16px 0;
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: #333333;
}
}
.discuss-box-content {
padding: 5px 0;
color: #555;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #333333;
}
.discuss-box-header {
.discuss-box-footer {
display: flex;
align-items: center;
justify-content: space-between;
.tools {
justify-content: flex-end;
margin-top: 10px;
.button-comment {
display: flex;
align-items: center;
.el-icon {
font-size: 16px;
margin-left: 10px;
margin-right: 5px;
color: #333333;
justify-content: center;
color: #333333;
cursor: pointer;
&.is-active {
color: var(--main-color);
}
}
.el-icon {
font-size: 16px;
margin-left: 10px;
margin-right: 5px;
}
}
.discuss-comment {
display: flex;
margin-top: 20px;
}
.discuss-comment__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.discuss-comment-content {
flex: 1;
margin-left: 10px;
color: #333;
overflow: hidden;
}
.discuss-comment__username {
font-size: 16px;
line-height: 20px;
color: var(--main-color);
}
.discuss-comment-time {
margin-top: 10px;
font-size: 14px;
line-height: 20px;
color: #999999;
text-align: right;
}
</style>
src/modules/student/lab/components/DiscussAddDialog.vue → src/modules/student/lab/components/DiscussPublish.vue
浏览文件 @ c4ac8abb
......@@ -10,14 +10,13 @@ const props = defineProps<Props>()
const emit = defineEmits<{
(e: 'update'): void
(e: 'update:modelValue', visible: boolean): void
}>()
const formRef = $ref<FormInstance>()
const form = reactive({ title: '', content: '' })
const rules = ref<FormRules>({
title: [{ required: true, message: '请输入话题标题', trigger: 'blur' }],
content: [{ required: true, message: '请输入话题描述', trigger: 'blur' }]
title: [{ required: true, message: '请输入话题标题' }],
content: [{ required: true, message: '请输入话题描述' }]
})
// 提交
......@@ -30,29 +29,21 @@ function handleAdd() {
addExperimentDiscuss(params).then(() => {
ElMessage({ message: '发表成功', type: 'success' })
emit('update')
emit('update:modelValue', false)
formRef?.resetFields()
})
}
</script>
<template>
<el-dialog
title="发表新话题"
:close-on-click-modal="false"
width="600px"
@update:modelValue="$emit('update:modelValue')"
>
<el-form ref="formRef" :model="form" :rules="rules">
<el-form-item label="话题标题" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="话题描述" prop="content">
<el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
</el-form-item>
<el-row justify="center">
<el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
<el-button type="primary" round auto-insert-space @click="handleSubmit">发布</el-button>
</el-row>
</el-form>
</el-dialog>
<el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px">
<el-form-item prop="title">
<el-input v-model="form.title" placeholder="话题标题"></el-input>
</el-form-item>
<el-form-item prop="content">
<el-input type="textarea" v-model="form.content" placeholder="话题描述" :autosize="{ minRows: 4, maxRows: 6 }" />
</el-form-item>
<el-row justify="end">
<el-button type="primary" @click="handleSubmit">发表</el-button>
</el-row>
</el-form>
</template>
src/modules/student/lab/components/VideoItem.vue
浏览文件 @ c4ac8abb
......@@ -23,11 +23,12 @@ onMounted(() => {
<div class="video-item">
<h2>{{ data.name }}</h2>
<!-- <img :src="data.cover" /> -->
<AppVideoPlayer
:options="{ sources: [{ src: playUrl, type: 'application/x-mpegURL' }] }"
style="width: 100%"
v-if="playUrl"
></AppVideoPlayer>
<div style="height: 200px" v-if="playUrl">
<AppVideoPlayer
:options="{ sources: [{ src: playUrl, type: 'application/x-mpegURL' }] }"
style="width: 100%; height: 100%"
></AppVideoPlayer>
</div>
</div>
</template>
......
src/modules/student/lab/views/Index.vue
浏览文件 @ c4ac8abb
......@@ -88,7 +88,7 @@ onUnmounted(() => {
// 上传截图
function uploadPicture(url: string) {
const pictures = detail?.pictures || []
pictures.unshift({ url, name: 'screenshot.png', upload_time: dayjs().format('YYYY-MM-DD HH:mm:ss') })
pictures.unshift({ url, name: Date.now() + '.png', upload_time: dayjs().format('YYYY-MM-DD HH:mm:ss') })
uploadExperimentPicture({ experiment_id: form.experiment_id, pictures: JSON.stringify(pictures) }).then(() => {
fetchInfo()
screenshotLoading = false
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论