OnlineEducation-back-front/src/views/courseManagement/components/QueryView.vue

<template>
	<div style="display: flex; justify-content: space-between; align-items: center">
		<div>
			<a-form layout="inline" :model="formState">
				<a-form-item label="" style="width: 20%">
					<a-input v-model:value="formState.courseName" placeholder="请输入课程名称" allowClear />
				</a-form-item>
<!--				<a-form-item label="" style="width: 15%">-->
<!--&lt;!&ndash;					<a-cascader&ndash;&gt;-->
<!--&lt;!&ndash;						v-model:value="formState.loacl"&ndash;&gt;-->
<!--&lt;!&ndash;						:options="options"&ndash;&gt;-->
<!--&lt;!&ndash;						placeholder="选择院校"&ndash;&gt;-->
<!--&lt;!&ndash;						change-on-select&ndash;&gt;-->
<!--&lt;!&ndash;						allowClear&ndash;&gt;-->
<!--&lt;!&ndash;						:field-names="{ label: 'name', value: 'id', children: 'children' }"&ndash;&gt;-->
<!--&lt;!&ndash;					/>&ndash;&gt;-->
<!--					<a-select-->
<!--						v-model:value="formState.collegeTwoId"-->
<!--						:fieldNames="{ label: 'name', value: 'id' }"-->
<!--						:options="collegeMajorOptions"-->
<!--						placeholder="请选择院系"-->
<!--						allowClear-->
<!--					/>-->
<!--				</a-form-item>-->
				<a-form-item label="" style="width: 20%">
<!--					<a-input v-model:value="formState.type" placeholder="选择课程类型" allowClear />-->
					<a-select
						ref="select"
						placeholder="选择课程类型"
						v-model:value="formState.courseType"
						:fieldNames="{ label: 'dictLabel', value: 'dictValue' }"
						:options="COURSE_TYPE"
						allowClear
					></a-select>
				</a-form-item>
				<a-form-item label="" style="width: 30%">
					<a-range-picker 	v-model:value="formState.time" allowClear />
				</a-form-item>
			</a-form>
		</div>
		<div>
			<a-button type="primary" @click="handleSearch">
				<template #icon><SearchOutlined /></template>
				查询
			</a-button>
			<a-button style="margin-left: 10px" @click="handleReset">
				<template #icon><ReloadOutlined /></template>
				重置
			</a-button>
		</div>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
	import { useRouter } from 'vue-router'
	import collegeApi from '@/api/college'
	import resourceAuditApi from '@/api/resourceAudit.js'
	import tool from '@/utils/tool'
	const emit = defineEmits([])
	const router = useRouter()
	const collegeMajorOptions = ref([]) //院系
	//发布按钮状态
	const releaseVisible = ref(false)
	const loading = ref(false) // 列表loading
	const COURSE_TYPE = tool.dictTypeList('COURSE_TYPE')
	const formState = ref({
		courseName: undefined,
		collegeId: undefined,
		majorId: undefined,
		courseType: undefined,
		time : [],
		loacl: []
	}) // 列表loading

	const options = ref([
		// {
		// 	value: 'zhejiang',
		// 	label: 'Zhejiang',
		// 	isLeaf: false
		// },
		// {
		// 	value: 'jiangsu',
		// 	label: 'Jiangsu',
		// 	isLeaf: false
		// }
	])

	// 搜索值
	const searchValue = ref('')

	const pagination = reactive({
		pageSize: 10,
		pageNum: 1,
		total: 0
	})
	const onChangeCurrent = (current) => {
		router.push({
			path: '/' + current
		})
	}
	const publishedData = ref()
	//发布确定

	// 上传资源模态框
	const uploadModalVisible = ref(false)
	//院系组织查询
	const getOrgTreeSelector = () => {
		resourceAuditApi
			.orgList()
			.then((res) => {
				collegeMajorOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const loadData = (selectedOptions) => {
		const targetOption = selectedOptions[selectedOptions.length - 1]
		targetOption.loading = true

		// load options lazily
		setTimeout(() => {
			targetOption.loading = false
			targetOption.children = [
				{
					label: `${targetOption.label} Dynamic 1`,
					value: 'dynamic1'
				},
				{
					label: `${targetOption.label} Dynamic 2`,
					value: 'dynamic2'
				}
			]
			options.value = [...options.value]
		}, 1000)
	}
	const getList = () => {
		// collegeApi.treeAll().then((data) => {
		// 	options.value = data
		// })

		resourceAuditApi
			.orgList()
			.then((res) => {
				collegeMajorOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const handleSearch = () => {
		console.log('执行查询操作', formState.value,COURSE_TYPE)
		// 在这里添加查询逻辑

		let newJson =  JSON.parse(JSON.stringify(formState.value))
		console.log('执行查询操作123   ', newJson.loacl.length)
		for (let i = 0; i < newJson.loacl.length; i++) {
			let item = newJson.loacl[i]
			if(i == 0){
				newJson.collegeId = item
			}
			if(i == 1){
				newJson.collegeTwoId = item
			}
			if(i == 2){
				newJson.collegeThreeId = item
			}
		}
		newJson.loacl = undefined
		if(newJson.time.length == 2){
		 let beginTime =	tool.formatTimesYearMonthDay(newJson.time[0])
		let endTime=	tool.formatTimesYearMonthDay(newJson.time[1])
			newJson.beginTime = beginTime
			newJson.endTime = endTime
			newJson.time= undefined
		}

		emit('handlerSearch', newJson)
	}

	// 重置按钮点击事件
	const handleReset = () => {
		formState.value = {
			courseName: undefined,
			collegeId: undefined,
			majorId: undefined,
			courseType: undefined,
			time : [],
			loacl: []
			// 其他需要重置的字段
		}
		emit('handlerSearch', formState.value)
	}
	onMounted(() => {
		// getListData()

		getList()
	})
</script>

<style scoped>
	.desc p {
		margin-bottom: 1em;
	}
</style>