84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="content-search">
|
||
|
|
<BasicSearch
|
||
|
|
ref="basicSearchRef"
|
||
|
|
:searchList="searchList"
|
||
|
|
:initial-values="initSearchData"
|
||
|
|
@reset="handleReset"
|
||
|
|
@finish="onSearchFinish"
|
||
|
|
@values-change="onValuesChange"
|
||
|
|
>
|
||
|
|
<template #actions>
|
||
|
|
<a-tooltip title="新增配置">
|
||
|
|
<a-button @click="props.handleAdd" type="primary">
|
||
|
|
新增沿程配置
|
||
|
|
</a-button>
|
||
|
|
</a-tooltip>
|
||
|
|
</template>
|
||
|
|
</BasicSearch>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, computed, onMounted } from 'vue';
|
||
|
|
import BasicSearch from '@/components/BasicSearch/index.vue';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
handleAdd: () => void;
|
||
|
|
riverOptions: any[];
|
||
|
|
riverOptionsLoad: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps<Props>();
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'reset', values: any): void;
|
||
|
|
(e: 'searchFinish', values: any): void;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const initSearchData = {
|
||
|
|
name: null,
|
||
|
|
rvcd: null
|
||
|
|
};
|
||
|
|
|
||
|
|
const searchData = ref<any>({ ...initSearchData });
|
||
|
|
const searchList: any = computed(() => [
|
||
|
|
{
|
||
|
|
type: 'Input',
|
||
|
|
name: 'name',
|
||
|
|
label: '沿程配置名称',
|
||
|
|
fieldProps: {
|
||
|
|
allowClear: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'Select',
|
||
|
|
name: 'rvcd',
|
||
|
|
label: '所在河段',
|
||
|
|
width: 300,
|
||
|
|
fieldProps: {
|
||
|
|
allowClear: true
|
||
|
|
},
|
||
|
|
options: props.riverOptions,
|
||
|
|
loading: props.riverOptionsLoad
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
const onSearchFinish = (values: any) => {
|
||
|
|
emit('searchFinish', values);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onValuesChange = (changedValues: any, allValues: any) => {
|
||
|
|
searchData.value = { ...searchData.value, ...allValues };
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleReset = () => {
|
||
|
|
emit('reset', initSearchData);
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
emit('searchFinish', initSearchData);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="scss"></style>
|