提交 0b94d2dd authored 作者: 王鹏飞's avatar 王鹏飞

chore: 优化讨论交流

上级 42c1c8f0
......@@ -63,7 +63,7 @@ useInfiniteScroll(
<el-radio :label="4">我的班级</el-radio> -->
</el-radio-group>
<!-- 发表新话题 -->
<DiscussPublish :competition_id="competition_id" @update="fetchInfo(true)" v-if="competition_id"></DiscussPublish>
<DiscussPublish :list="list" :competition_id="competition_id" @update="fetchInfo(true)" v-if="competition_id"></DiscussPublish>
<el-empty description="暂无数据" v-if="isEmpty" />
<template v-else>
<div class="discuss-scroll" ref="scrollRef">
......
......@@ -18,6 +18,7 @@ const form = reactive({ content: '' })
const rules = ref<FormRules>({
content: [{ required: true, message: '请输入话题评论内容', trigger: 'blur' }]
})
let publishVisible = $ref(false)
// 提交
function handleSubmit() {
......@@ -30,22 +31,23 @@ function handleAdd() {
ElMessage({ message: '评论成功', type: 'success' })
emit('update')
formRef?.resetFields()
publishVisible = false
})
}
</script>
<template>
<el-form
ref="formRef"
:model="form"
:rules="rules"
style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0"
>
<el-form-item prop="content">
<el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
</el-form-item>
<div style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0">
<el-row justify="end">
<el-button type="primary" @click="handleSubmit">评论</el-button>
<el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">我要评论</el-button>
</el-row>
</el-form>
<el-form ref="formRef" :model="form" :rules="rules" v-if="publishVisible">
<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>
</div>
</template>
......@@ -59,6 +59,7 @@ const commentVisible = $ref(false)
<style lang="scss" scoped>
.discuss-item {
margin-top: 10px;
padding-right: 15px;
border-top: 1px solid #e6e6e6;
}
.discuss-box {
......@@ -117,7 +118,6 @@ const commentVisible = $ref(false)
align-items: center;
justify-content: flex-end;
margin-top: 10px;
padding-right: 15px;
.button-comment {
display: flex;
align-items: center;
......
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { ExperimentDiscussType } from '../types'
import { ElMessage } from 'element-plus'
import { addExperimentDiscuss } from '../api'
interface Props {
competition_id: string
list: ExperimentDiscussType[]
}
const props = defineProps<Props>()
......@@ -32,17 +34,25 @@ function handleAdd() {
formRef?.resetFields()
})
}
let publishVisible = $ref(true)
watchEffect(() => {
publishVisible = !props.list.length
})
</script>
<template>
<el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px">
<el-row justify="start" style="padding-top: 10px">
<el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">新话题</el-button>
</el-row>
<el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px" v-if="publishVisible">
<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-row justify="space-between">
<el-button type="info" @click="publishVisible = false">收起</el-button>
<el-button type="primary" @click="handleSubmit">发表</el-button>
</el-row>
</el-form>
......
......@@ -63,7 +63,7 @@ useInfiniteScroll(
<el-radio :label="4">我的班级</el-radio>
</el-radio-group>
<!-- 发表新话题 -->
<DiscussPublish :experiment_id="experiment_id" @update="fetchInfo(true)" v-if="experiment_id"></DiscussPublish>
<DiscussPublish :list="list" :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">
......
......@@ -18,6 +18,7 @@ const form = reactive({ content: '' })
const rules = ref<FormRules>({
content: [{ required: true, message: '请输入话题评论内容', trigger: 'blur' }]
})
let publishVisible = $ref(false)
// 提交
function handleSubmit() {
......@@ -30,22 +31,23 @@ function handleAdd() {
ElMessage({ message: '评论成功', type: 'success' })
emit('update')
formRef?.resetFields()
publishVisible = false
})
}
</script>
<template>
<el-form
ref="formRef"
:model="form"
:rules="rules"
style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0"
>
<el-form-item prop="content">
<el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
</el-form-item>
<div style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0">
<el-row justify="end">
<el-button type="primary" @click="handleSubmit">发表评论</el-button>
<el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">我要评论</el-button>
</el-row>
</el-form>
<el-form ref="formRef" :model="form" :rules="rules" v-if="publishVisible">
<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>
</div>
</template>
......@@ -59,6 +59,7 @@ const commentVisible = $ref(false)
<style lang="scss" scoped>
.discuss-item {
margin-top: 10px;
padding-right: 15px;
border-top: 1px solid #e6e6e6;
}
.discuss-box {
......@@ -117,7 +118,6 @@ const commentVisible = $ref(false)
align-items: center;
justify-content: flex-end;
margin-top: 10px;
padding-right: 15px;
.button-comment {
display: flex;
align-items: center;
......
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { ExperimentDiscussType } from '../types'
import { ElMessage } from 'element-plus'
import { addExperimentDiscuss } from '../api'
interface Props {
experiment_id: string
list: ExperimentDiscussType[]
}
const props = defineProps<Props>()
......@@ -32,17 +34,25 @@ function handleAdd() {
formRef?.resetFields()
})
}
let publishVisible = $ref(true)
watchEffect(() => {
publishVisible = !props.list.length
})
</script>
<template>
<el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px">
<el-row justify="start" style="padding-top: 10px">
<el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">新话题</el-button>
</el-row>
<el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px" v-if="publishVisible">
<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-row justify="space-between">
<el-button type="info" @click="publishVisible = false">收起</el-button>
<el-button type="primary" @click="handleSubmit">发表</el-button>
</el-row>
</el-form>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论