| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <script setup lang="ts">
- import { message, type SelectProps } from "ant-design-vue";
- import { ref } from "vue";
- const props = defineProps({
- keyword: {
- type: String,
- required: true,
- },
- field: {
- type: String,
- required: true,
- },
- placeholder: {
- type: String,
- required: true,
- }
- });
- const emits = defineEmits<{
- (e: "search", field: string, keyword: string): void;
- (e: "update:keyword", keyword: string): void;
- (e: "update:field", field: string): void;
- }>();
- // 搜索框字段选择项列表
- const fieldOptions = ref<SelectProps['options']>([
- { value: 'TP', label: '主题', },
- { value: 'TI', label: '标题', },
- { value: 'AU', label: '作者', },
- { value: 'KW', label: '关键词', },
- { value: 'AB', label: '摘要' },
- { value: 'UN', label: '机构' },
- ]);
- function onSearch() {
- const kwd = props.keyword.trim();
- if (kwd.length == 0) {
- message.warning("请输入查询关键词");
- return;
- }
- emits("search", props.field, props.keyword);
- }
- function onKeywordChange(e: InputEvent) {
- emits("update:keyword", (e.target as HTMLInputElement).value);
- }
- function onFieldChange(value: string) {
- emits("update:field", value);
- }
- </script>
- <template>
- <a-row type="flex">
- <a-col>
- <a-select
- ref="select"
- :value="field"
- style="width: 120px"
- :options="fieldOptions"
- @change="onFieldChange"
- size="large"
- ></a-select>
- </a-col>
- <a-col flex="1">
- <a-input-search
- :value="keyword"
- :placeholder="placeholder"
- enter-button
- size="large"
- @change="onKeywordChange"
- @search="onSearch"
- />
- </a-col>
- </a-row>
- </template>
|