OnlineEducation-back-front/src/views/resourceDetails/components/QueryUnpublishedView.vue

<template>
	<div style="display: flex; justify-content: space-between">
		<a-form :model="formState">
			<a-form-item>
				<a-input v-model:value="formState.name" placeholder="请输入资源名称" style="width: 200px; margin-right: 20px" />
				<a-button type="primary" @click="onSubmit" :loading="iconLoading">
					<template #icon> <SearchOutlined /> </template>
					提交
				</a-button>
				<a-button style="margin-left: 10px" @click="reset">
					<template #icon>
						<RedoOutlined />
					</template>
					重置
				</a-button>
			</a-form-item>
		</a-form>
		<a-button type="primary" style="margin-left: 10px" @click="reset">
			<template #icon> <PlusOutlined /> </template>
			上传资源
		</a-button>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { Form } from 'ant-design-vue'
	const emit = defineEmits(['selectTab'])
	const iconLoading = ref(false)

	const useForm = Form.useForm
	const formState = reactive({
		name: ''
	})
	const rulesRef = reactive({})
	const { resetFields, validate, validateInfos } = useForm(formState, rulesRef)
	const onSubmit = () => {
		iconLoading.value = true
		validate()
			.then(() => {
				iconLoading.value = false
				console.log(toRaw(formState))
			})
			.catch((err) => {
				console.log('error', err)
				iconLoading.value = false
			})
	}
	const reset = () => {
		resetFields()
	}
</script>

<style scoped>
	.tab-switcher {
		display: flex;
		border-radius: 20px;
		border: 1px solid #1e90ff;
		overflow: hidden;
	}

	.tab-switcher div {
		padding: 2px 20px;
		background-color: #f5f5f5;

		cursor: pointer;
	}

	.tab-switcher div.active {
		background-color: #1e90ff;
		color: white;
	}

	.tab-switcher div:not(:last-child) {
	}
</style>