笔记/问答/修改添加问题处理,样式调整

src/views/student/classCentre/ask.vue

@@ -1,4 +1,17 @@
 <template>
+	<a-form ref="formRefAdd" :model="formDataAdd" :rules="formRules" layout="vertical">
+		<a-row :gutter="16">
+			<a-col :span="24">
+				<a-form-item name="info" label="问题">
+					<a-textarea v-model:value="formDataAdd.info" placeholder="请输入问题" :rows="4" />
+				</a-form-item>
+			</a-col>
+		</a-row>
+	</a-form>
+	<div class="frc">
+		<a-button type="primary" :loading="submitLoading" @click="submitForm">新增</a-button>
+	</div>
+	<a-divider />
 	<a-list
 		class="demo-loadmore-list"
 		:loading="initLoading"
@@ -36,7 +49,12 @@
 								</a-tooltip>
 							</div> -->
 						</div>
-						<div v-for="(item, idx) in item.recordChildList" :key="item.id" v-if="item.recordChildList" class="askitemBox">
+						<div
+							v-for="(item, idx) in item.recordChildList"
+							:key="item.id"
+							v-if="item.recordChildList"
+							class="askitemBox"
+						>
 							<div class="flc">
 								<div class="askName">{{ item.userIdName }}</div>
 								<div v-if="item.avatar">
@@ -50,6 +68,17 @@
 			</a-list-item>
 		</template>
 	</a-list>
+	<a-modal v-model:visible="visible" title="编辑" @ok="handleOk" append-to-body>
+		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+			<a-row :gutter="16">
+				<a-col :span="24">
+					<a-form-item name="info" label="问题">
+						<a-textarea v-model:value="formData.info" placeholder="请输入问题" :rows="4" />
+					</a-form-item>
+				</a-col>
+			</a-row>
+		</a-form>
+	</a-modal>
 </template>
 
 <script setup>
@@ -59,7 +88,19 @@
 	import { Modal } from 'ant-design-vue'
 	import askDiv from './ask.vue'
 	import tool from '@/utils/tool'
+	import { required } from '@/utils/formRules'
 	const userInfo = tool.data.get('USER_INFO')
+	// 表单数据，也就是默认给一些数据
+	const visible = ref(false)
+	const formData = ref({})
+	const formRef = ref()
+	const formDataAdd = ref({})
+	const formRefAdd = ref()
+	const submitLoading = ref(false)
+	// 默认要校验的
+	const formRules = {
+		info: [required('请输入问题')]
+	}
 	const props = defineProps({
 		idsObj: {
 			type: [Array, Object],
@@ -87,6 +128,7 @@
 		pageSize: 10
 	})
 	const getList = () => {
+		delete props.idsObj.parent
 		classCentre
 			.askList(
 				{
@@ -111,8 +153,11 @@
 	}
 
 	const editNote = (e) => {
-		itemNote.value = e.id
-		emit('edit', JSON.parse(JSON.stringify(e)))
+		formData.value.id = e.id
+		formData.value.hourId = e.hourId
+		formData.value.info = e.info
+		itemNote.value.noteId = e.id
+		visible.value = true
 	}
 	const delNote = (e) => {
 		Modal.confirm({
@@ -133,6 +178,44 @@
 			getList()
 		})
 	}
+	//修改
+	const handleOk = (e) => {
+		formRef.value.validate().then(() => {
+			classCentre
+				.askSubmitForm(
+					{
+						...formData.value
+					},
+					formData.value.id
+				)
+				.then(() => {
+					visible.value = false
+					formData.value.id = ''
+					formRef.value.resetFields()
+					getList()
+				})
+		})
+	}
+	//添加
+	const submitForm = (e) => {
+		formRefAdd.value
+			.validate()
+			.then(() => {
+				submitLoading.value = true
+				classCentre
+					.askSubmitForm({
+						...props.idsObj,
+						...formDataAdd.value
+					})
+					.then(() => {
+						formRefAdd.value.resetFields()
+						getList()
+					})
+			})
+			.finally(() => {
+				submitLoading.value = false
+			})
+	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({
 		getList
@@ -150,13 +233,18 @@
 	}
 	.askitemBox {
 		border-top: 1px solid #f0f0f0;
-		padding-top:10px;
-		margin-top:10px;
-		margin-left:15px;
+		padding-top: 10px;
+		margin-top: 10px;
+		margin-left: 15px;
 	}
 	.askName {
 		font-size: 12px;
 		font-weight: 500;
 		color: rgba(0, 0, 0, 0.425);
 	}
+	.frc {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+	}
 </style>

src/views/student/classCentre/form.vue

@@ -10,40 +10,16 @@
 		<div v-if="itemObj.key == 2" style="height: 100%">
 			<handouts :itemObj="itemObj" :hourId="idsObj.hourId"></handouts>
 		</div>
+		<note v-if="itemObj.type == 2" :idsObj="idsObj" ref="noteRef" @edit="editForm"></note>
 		<div v-if="itemObj.key == 3" style="height: 100%">
 			<subtitleBox :url="itemObj.url" @videoSpeed="videoSpeed"></subtitleBox>
 		</div>
-		<div v-if="itemObj.type == 2 || itemObj.type == 4">
-			<a-card :bordered="false">
-				<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
-					<a-row :gutter="16">
-						<a-col :span="24">
-							<a-form-item name="noteContent" v-if="itemObj.type == 2">
-								<a-textarea v-model:value="formData.noteContent" placeholder="请输入内容" :rows="4" />
-							</a-form-item>
-							<div v-if="itemObj.type == 4">
-								<a-form-item name="info" label="问题">
-									<a-textarea v-model:value="formData.info" placeholder="请输入问题" :rows="4" />
-								</a-form-item>
-							</div>
-						</a-col>
-					</a-row>
-				</a-form>
-				<div class="frc">
-					<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
-				</div>
-				<div class="noteBox">
-					<note v-if="itemObj.type == 2" :idsObj="idsObj" ref="noteRef" @edit="editForm"></note>
-					<askDiv v-if="itemObj.type == 4" :idsObj="idsObj" ref="noteRef" @edit="editForm"></askDiv>
-				</div>
-			</a-card>
-		</div>
+		<askDiv v-if="itemObj.type == 4" :idsObj="idsObj" ref="noteRef" @edit="editForm"></askDiv>
 	</xn-form-container>
 </template>
 
 <script setup>
 	import classCentre from '@/api/student/classCentre'
-	import { required } from '@/utils/formRules'
 	import note from './note.vue'
 	import askDiv from './ask.vue'
 	import handouts from './handouts.vue'
@@ -62,15 +38,12 @@
 		return props.rightItem
 	})
 	const noteRef = ref()
-	const submitLoading = ref(false)
-	// 表单数据，也就是默认给一些数据
-	const formData = ref({})
-	const formRef = ref()
+
 	//tabs
 	const activeKey = ref('1')
 	// 默认是关闭状态
 	const visible = ref(false)
-	const emit = defineEmits({ successful: null, videoSpeed: null })
+	const emit = defineEmits({ videoSpeed: null })
 	// 打开抽屉
 	const onOpen = (edit) => {
 		visible.value = true
@@ -86,50 +59,8 @@
 	}
 	// 关闭抽屉
 	const onClose = () => {
-		formRef.value?.resetFields()
-		formData.value.id = null
-		formData.value.noteId = null
 		visible.value = false
 	}
-	// 默认要校验的
-	const formRules = {
-		noteContent: [required('请输入内容')],
-		info: [required('请输入内容')]
-	}
-	// 提交数据
-	const onSubmit = () => {
-		formRef.value
-			.validate()
-			.then(() => {
-				submitLoading.value = true
-				classCentre[itemObj.value.type == 2 ? 'notesSubmitForm' : 'askSubmitForm'](
-					{
-						...props.idsObj,
-						...formData.value
-					},
-					itemObj.value.type == 2 ? formData.value.noteId : formData.value.id
-				).then(() => {
-					formData.value.noteId = ''
-					formData.value.id = ''
-					emit('successful')
-					formRef.value.resetFields()
-					noteRef.value.getList()
-				})
-			})
-			.finally(() => {
-				submitLoading.value = false
-			})
-	}
-	const editForm = (e) => {
-		onOpen(e)
-		if (itemObj.value.type == 2) {
-			formData.value.noteId = e.noteId
-			formData.value.noteContent = e.noteContent
-		} else {
-			formData.value.info = e.info
-			formData.value.id = e.id
-		}
-	}
 	const videoSpeed = (e) => {
 		emit('videoSpeed', e)
 	}
@@ -143,18 +74,4 @@
 		onClose
 	})
 </script>
-<style scoped lang="less">
-	.frc {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-	}
-	.noteBox {
-		height: 750px;
-		overflow-y: auto;
-	}
-	.subtitleBox {
-		height: 100%;
-		overflow-y: auto;
-	}
-</style>
+<style scoped lang="less"></style>

src/views/student/classCentre/handouts.vue

@@ -70,9 +70,13 @@
 			.then((data) => {})
 	}
 	const addScrollPlan = () => {
+		const el = scrollDiv.value?.$el
+		if(el && el.clientHeight == el.scrollHeight){
+			maxStr.value = 100
+		}
 		classCentre
 			.classPlanAdd({
-				progress: showPdf.value ? (maxStr.value == 0 ? 100 : maxStr.value) : 0,
+				progress: showPdf.value ? maxStr.value : 0,
 				hourId: props.hourId,
 				stayTime: outNowTimesStr.value - nowTimesStr,
 				type: 1,

src/views/student/classCentre/index.vue

@@ -71,13 +71,17 @@
 								<handouts :itemObj="itemObj" :hourId="classHourData.id" v-if="classHourData"></handouts>
 							</a-tab-pane>
 							<a-tab-pane key="2" tab="字幕">
-								<subtitleBox :url="danmuObj.url" @videoSpeed="videoSpeed"></subtitleBox>
+								<subtitleBox :url="danmuObj.url" v-if="tabsActiveKey == 2" @videoSpeed="videoSpeed"></subtitleBox>
 							</a-tab-pane>
 							<a-tab-pane key="3" tab="笔记">
-								<note :idsObj="idsObj" ref="noteRef" @edit="noteEdit"></note>
+								<div style="min-height: 600px">
+									<note :idsObj="idsObj" ref="noteRef" v-if="tabsActiveKey == 3" @edit="noteEdit"></note>
+								</div>
 							</a-tab-pane>
 							<a-tab-pane key="4" tab="问答">
-								<askDiv :idsObj="idsObj" ref="askDivRef" @edit="askEdit"></askDiv>
+								<div style="min-height: 600px">
+									<askDiv :idsObj="idsObj" ref="askDivRef" v-if="tabsActiveKey == 4" @edit="askEdit"></askDiv>
+								</div>
 							</a-tab-pane>
 						</a-tabs>
 					</a-card>
@@ -109,7 +113,7 @@
 	const videoRef = ref()
 	const currentTimenew = ref(0)
 	const idsObj = computed(() => {
-		let item = findNodeByKey(classTimeList.value, selectedKeys.value[0],classTimeList.value[0])
+		let item = findNodeByKey(classTimeList.value, selectedKeys.value[0], classTimeList.value[0])
 		return {
 			courseId: route.query.id,
 			chapterId: selectedKeys.value[0],
@@ -253,7 +257,7 @@
 	}
 
 	const forumData = computed(() => {
-		let item = findNodeByKey(classTimeList.value, selectedKeys.value[0],classTimeList.value[0]) ?? {}
+		let item = findNodeByKey(classTimeList.value, selectedKeys.value[0], classTimeList.value[0]) ?? {}
 		if (!item.src) {
 			item.src = classTimeData.value.filter((r) => r.funcType == 1)[0]?.url
 		}

src/views/student/classCentre/note.vue

@@ -1,4 +1,17 @@
 <template>
+	<a-form ref="formRefAdd" :model="formDataAdd" :rules="formRules" layout="vertical">
+		<a-row :gutter="16">
+			<a-col :span="24">
+				<a-form-item name="noteContent" label="笔记">
+					<a-textarea v-model:value="formDataAdd.noteContent" placeholder="请输入笔记" :rows="4" />
+				</a-form-item>
+			</a-col>
+		</a-row>
+	</a-form>
+	<div class="frc">
+		<a-button type="primary" :loading="submitLoading" @click="submitForm">新增</a-button>
+	</div>
+	<a-divider />
 	<a-list
 		class="demo-loadmore-list"
 		:loading="initLoading"
@@ -34,6 +47,17 @@
 			</a-list-item>
 		</template>
 	</a-list>
+	<a-modal v-model:visible="visible" title="编辑" @ok="handleOk" append-to-body>
+		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+			<a-row :gutter="16">
+				<a-col :span="24">
+					<a-form-item name="noteContent" label="问题">
+						<a-textarea v-model:value="formData.noteContent" placeholder="请输入问题" :rows="4" />
+					</a-form-item>
+				</a-col>
+			</a-row>
+		</a-form>
+	</a-modal>
 </template>
 
 <script setup>
@@ -41,6 +65,18 @@
 	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 	import { createVNode } from 'vue'
 	import { Modal } from 'ant-design-vue'
+	import { required } from '@/utils/formRules'
+	// 表单数据，也就是默认给一些数据
+	const visible = ref(false)
+	const formData = ref({})
+	const formRef = ref()
+	const formDataAdd = ref({})
+	const formRefAdd = ref()
+	const submitLoading = ref(false)
+	// 默认要校验的
+	const formRules = {
+		noteContent: [required('请输入笔记')]
+	}
 	const props = defineProps({
 		idsObj: {
 			type: [Array, Object],
@@ -68,6 +104,7 @@
 		pageSize: 10
 	})
 	const getList = () => {
+		delete props.idsObj.parent
 		classCentre
 			.notesList(
 				{
@@ -91,8 +128,10 @@
 			})
 	}
 	const editNote = (e) => {
-		itemNote.value = e.noteId
-		emit('edit', JSON.parse(JSON.stringify(e)))
+		formData.value.noteId = e.noteId
+		formData.value.noteContent = e.noteContent
+		itemNote.value.noteId = e.noteId
+		visible.value = true
 	}
 	const delNote = (e) => {
 		Modal.confirm({
@@ -108,6 +147,44 @@
 			}
 		})
 	}
+	// 修改
+	const handleOk = (e) => {
+		formRef.value.validate().then(() => {
+			classCentre
+				.notesSubmitForm(
+					{
+						...formData.value
+					},
+					formData.value.noteId
+				)
+				.then(() => {
+					visible.value = false
+					formData.value.noteId = ''
+					formRef.value.resetFields()
+					getList()
+				})
+		})
+	}
+	//添加
+	const submitForm = (e) => {
+		formRefAdd.value
+			.validate()
+			.then(() => {
+				submitLoading.value = true
+				classCentre
+					.notesSubmitForm({
+						...props.idsObj,
+						...formDataAdd.value
+					})
+					.then(() => {
+						formRefAdd.value.resetFields()
+						getList()
+					})
+			})
+			.finally(() => {
+				submitLoading.value = false
+			})
+	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({
 		getList
@@ -123,4 +200,9 @@
 		justify-content: space-between;
 		align-items: center;
 	}
+	.frc {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+	}
 </style>