OnlineEducation-teacher-front/src/views/forum/addForum.vue

<template>
	<a-card :bordered="false">
		<a-alert
			class="mb-3"
			message="欢迎来到论坛 — 衷心感谢你参与讨论！
			标题是否清晰明了地描述了主题？看
			起来有意思么？
			谁会感兴趣？
			它为什么重要？
			你期望从社区中获得什么样的回应？
			选择常用的词句以便别人能找到你的主题。若想要给主题和类似主题分组，选择一个分类。"
			type="warning"
		/>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="标题：" name="postTitle">
						<a-input v-model:value="formData.postTitle" placeholder="请输入标题" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="分类：" name="typeId">
						<a-select
							v-model:value="formData.typeId"
							show-search
							placeholder="请选择分类"
							style="width: 200px"
							:options="typeOptions"
							:filter-option="filterOption"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="指向：" name="appointUserArr">
						<a-select
							v-model:value="formData.appointUserArr"
							mode="multiple"
							show-search
							placeholder="请选择"
							style="width: 200px"
							:options="usertypeOptions"
							:filter-option="filterOption"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="内容：" name="postContent">
						<xn-editor v-model="formData.postContent" placeholder="请输入内容" :height="400"></xn-editor>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<div>
			<!-- <a-button style="margin-right: 8px" @click="onClose">关闭</a-button> -->
			<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
		</div>
	</a-card>
</template>

<script setup name="addForum">
	import { required } from '@/utils/formRules'
	import SnowflakeId from 'snowflake-id'
	import tool from '@/utils/tool'
	import forumApi from '@/api/forum/forumApi'
	import XnEditor from '@/components/Editor/index.vue'
	import Bowser from 'bowser'
	import { useRoute, useRouter } from 'vue-router'
	const route = useRoute()
	const router = useRouter()
	const { proxy } = getCurrentInstance()
	const userInfo = tool.data.get('USER_INFO')
	const typeOptions = ref([])
	// 默认是关闭状态
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	const treeData = ref([])
	// 表单数据，也就是默认给一些数据
	const formData = ref({})
	// 默认展开的节点(顶级)
	const defaultExpandedKeys = ref([0])
	const submitLoading = ref(false)
	// 模块ID
	const moduleId = ref('')
	const usertypeOptions = ref([])
	const filterOption = (input, option) => {
		return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}

	// 打开抽屉
	const onOpen = () => {
		forumApi.forumTypeList().then((data) => {
			typeOptions.value = data.map((r) => {
				return {
					label: r.typeName,
					value: r.typeId,
					...r
				}
			})
		})
		forumApi.allUserList().then((data) => {
			usertypeOptions.value = data.map((r) => {
				return {
					label: r.name,
					value: r.id,
					...r
				}
			})
		})
		if (route.query.postType == 1) {
			getBower()
		}
		if (route.query.postType == 2) {
			errorCorrection()
		}
	}
	setTimeout(() => {
		onOpen()
	}, 0)
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
	}

	// 默认要校验的
	const formRules = {
		postTitle: [required('请输入标题')],
		typeId: [required('请选择分类')],
		postContent: [required('请输入内容')]
	}

	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				if (formData.value.appointUserArr && formData.value.appointUserArr.length > 1) {
					formData.value.appointUser = formData.value.appointUserArr.join(',')
				}
				let params = formData.value
				if (route.query.postType == 1) {
					params = {
						...formData.value,
						...browserObj.value,
						postType:route.query.postType
					}
				}
				if (route.query.postType == 2) {
					params = {
						...formData.value,
						...errorVal.value,
						postType:route.query.postType
					}
				}
				forumApi.submitForm(params).then(() => {
					onClose()
					emit('successful')
				})
			})
			.finally(() => {
				submitLoading.value = false
			})
	}
	//获取操作系统/浏览器等信息
	const browserObj = ref({})
	function getBower() {
		const browser = Bowser.getParser(window.navigator.userAgent)
		let obj = browser.parsedResult
		browserObj.value = {
			forumSupportEnvParam: {
				browserType: obj.browser.name,
				browserVersion: obj.browser.version,
				osType: obj.os.name,
				osVersion: obj.os.version,
				deviceType: 0
			}
		}
	}
	//纠错
	const errorVal = ref({})
	function errorCorrection() {
		errorVal.value = {
			contentCorrectionParam: {
				resourceType: route.query.type,
				resourceId: route.query.id
			}
		}
	}
</script>