job-master/src/views/information/article/search/index.vue

<template>
	<a-drawer :width="500" title="搜索" placement="right" :open="openSearchModel" @close="onClose">
		<template #extra>
			<a-button style="margin-right: 8px" @click="clearSearch">清空搜索</a-button>
			<a-button type="primary" @click="getData">搜索</a-button>
		</template>
		<a-form :model="commomParams.search">
			<a-row :gutter="[10]">
				<a-col span="24">
					<a-form-item>
						<a-input addon-before="文章" v-model:value="commomParams.search.keyword" placeholder="请输入文章"
							@keyup.enter="getData" />
					</a-form-item>
					
				</a-col>
				<a-col span="24">
					<a-form-item>
						<search-select placeholder="请选择栏目" :list="section_list" :select_value="commomParams.search.section_id"
							@searchData="sectionSearch" @getSelectValue="getSectionValue"
							:select_disabled="false"></search-select>
					</a-form-item>
				</a-col>
			
			</a-row>
		</a-form>
	</a-drawer>
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch, computed } from 'vue';
	import { addArticle, updateArticle, listSection } from '@/apis/models';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, openSearchModel, hideSearch } = useCommon();
	let props = defineProps(['search_params']);
	const emit = defineEmits();

	openSearchModel = computed(() => {
		sectionSearch()
		return store.state.openSearchModel;
	})

	interface listType {
		section_id : Number | 0,
	}

	commomParams.value.search = commomParams.value.search as listType;
	commomParams.value.search.section_id = null;

	// watch(() => props.search_params, (newVal) => {
	// 	emit('searchData', commomParams.value.search)
	// })

	const getData = () => {
		emit('searchData', commomParams.value.search);
		hideSearch()
	}

	// 清空搜索
	const clearSearch = () => {
		commomParams.value.search = {
			page: 1,
			pagesize: 10,
			sort: 'id',
			sortby: 'desc',
			keyword: ''
		}
		emit('clearData', commomParams.value.search);
		hideSearch()
	}

	const onClose = () => {
		clearSearch()
		hideSearch()
	}

	// 选择栏目/频道
	let section_list = ref<Object[]>([])
	const sectionSearch = (val : Object) => {
		listSection({keyword: val, pagesize: 200}).then((res : object) => {
			const data = res.data.sections.map((item : object) => ({
				label: item.name,
				value: item.id,
			}));
			section_list.value = data;
		})
	}
	const getSectionValue = (val : Object) => {
		commomParams.value.search.section_id = val.key;
		getData()
	}
</script>

<style>
</style>