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

<template>
	<div style="display: flex; justify-content: center">
		<a-card :bordered="false" style="width: 1200px">
			<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
				<a-row :gutter="16">
					<a-col :span="8">
						<a-form-item label="标题：" name="postTitle">
							<a-input v-model:value="formData.postTitle" placeholder="请输入标题" allow-clear />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="分类：" name="typeId">
							<a-select
								v-model:value="formData.typeId"
								show-search
								placeholder="请选择分类"
								style="width: 100%"
								:options="typeOptions"
								:filter-option="filterOption"
							></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="指向：" name="appointUserArr">
							<a-select
								v-model:value="formData.appointUserArr"
								mode="multiple"
								show-search
								placeholder="请选择"
								style="width: 100%"
								: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>
	</div>
</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()
		window.close()
		router.push({
			path: '/forum'
		})
	}

	// 默认要校验的
	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>