276 lines
8.2 KiB
Vue
276 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="basic-search-container">
|
|||
|
|
<a-form
|
|||
|
|
ref="formRef"
|
|||
|
|
:model="formData"
|
|||
|
|
:rules="rules"
|
|||
|
|
layout="inline"
|
|||
|
|
class="basic-search-form"
|
|||
|
|
@finish="handleFinish"
|
|||
|
|
@values-change="handleValuesChange"
|
|||
|
|
>
|
|||
|
|
<div class="form-content-wrapper">
|
|||
|
|
<!-- 1. 搜索项 + 查询/重置按钮 (栅格布局) -->
|
|||
|
|
<a-row :gutter="[16, 0]" class="search-row" wrap>
|
|||
|
|
<a-col v-for="item in validSearchList" :key="item.name">
|
|||
|
|
<a-form-item
|
|||
|
|
:label="item.label"
|
|||
|
|
:name="item.name"
|
|||
|
|
style="width: 100%; margin-bottom: 0"
|
|||
|
|
>
|
|||
|
|
<!-- 普通日期选择器 -->
|
|||
|
|
<a-date-picker
|
|||
|
|
v-if="item.type === 'DataPicker'"
|
|||
|
|
v-model:value="formData[item.name]"
|
|||
|
|
:picker="item.picker"
|
|||
|
|
:format="item.fieldProps?.format"
|
|||
|
|
:value-format="item.fieldProps?.valueFormat"
|
|||
|
|
:disabled-date="item.fieldProps?.disabledDate"
|
|||
|
|
:show-time="item.fieldProps?.showTime"
|
|||
|
|
:allow-clear="item.fieldProps?.allowClear"
|
|||
|
|
:presets="item.presets"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
<!-- 日期范围选择器 -->
|
|||
|
|
<a-range-picker
|
|||
|
|
v-else-if="item.type === 'RangePicker'"
|
|||
|
|
v-model:value="formData[item.name]"
|
|||
|
|
:picker="item.picker"
|
|||
|
|
:format="item.fieldProps?.format"
|
|||
|
|
:value-format="item.fieldProps?.valueFormat"
|
|||
|
|
:disabled-date="item.fieldProps?.disabledDate"
|
|||
|
|
:show-time="item.fieldProps?.showTime"
|
|||
|
|
:allow-clear="item.fieldProps?.allowClear"
|
|||
|
|
:presets="item.presets"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- 普通输入框 -->
|
|||
|
|
<a-input
|
|||
|
|
v-else-if="!item.type || item.type === 'Input'"
|
|||
|
|
v-model:value="formData[item.name]"
|
|||
|
|
:placeholder="item.placeholder || '请输入'"
|
|||
|
|
:allow-clear="item.fieldProps?.allowClear"
|
|||
|
|
:style="{ width: item.width ? item.width + 'px' : '200px' }"
|
|||
|
|
/>
|
|||
|
|
<!-- 电站下拉框 -->
|
|||
|
|
<div class="flex gap-[10px]" v-else-if="item.type === 'waterStation'">
|
|||
|
|
<a-form-item-rest>
|
|||
|
|
<a-select
|
|||
|
|
:value="formData.stcd?.dataDimensionData"
|
|||
|
|
placeholder="请选择"
|
|||
|
|
@change="dataDimensionDataChange"
|
|||
|
|
style="width: 135px"
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
v-for="opt in item.options"
|
|||
|
|
:key="opt.value"
|
|||
|
|
:value="opt.value"
|
|||
|
|
>
|
|||
|
|
{{ opt.label }}
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
<a-select
|
|||
|
|
:value="formData.stcd?.hbrvcd"
|
|||
|
|
placeholder="请选择河流"
|
|||
|
|
@change="hbrvcdChange"
|
|||
|
|
style="width: 135px"
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
v-for="opt in item.options"
|
|||
|
|
:key="opt.value"
|
|||
|
|
:value="opt.value"
|
|||
|
|
>
|
|||
|
|
{{ opt.label }}
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
<a-select
|
|||
|
|
:value="formData.stcd?.stcdId"
|
|||
|
|
placeholder="请选择电站"
|
|||
|
|
@change="stcdIdChange"
|
|||
|
|
style="width: 135px"
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
v-for="opt in item.options"
|
|||
|
|
:key="opt.value"
|
|||
|
|
:value="opt.value"
|
|||
|
|
>
|
|||
|
|
{{ opt.label }}
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item-rest>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 下拉选择 -->
|
|||
|
|
<a-select
|
|||
|
|
v-else-if="item.type === 'Select'"
|
|||
|
|
v-model:value="formData[item.name]"
|
|||
|
|
:placeholder="item.placeholder || '请选择'"
|
|||
|
|
:allow-clear="item.fieldProps?.allowClear"
|
|||
|
|
:style="{ width: item.width ? item.width + 'px' : '200px' }"
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
v-for="opt in item.options"
|
|||
|
|
:key="opt.value"
|
|||
|
|
:value="opt.value"
|
|||
|
|
>
|
|||
|
|
{{ opt.label }}
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
|
|||
|
|
<!-- 2. 查询/重置按钮列 (固定占据一部分宽度，例如 6) -->
|
|||
|
|
<a-col class="custom-action-col">
|
|||
|
|
<a-space>
|
|||
|
|
<a-button type="primary" html-type="submit" v-if="showSearch">
|
|||
|
|
查询
|
|||
|
|
</a-button>
|
|||
|
|
|
|||
|
|
<a-button v-if="showReset" @click="handleReset"> 重置 </a-button>
|
|||
|
|
<slot name="actions" :form="formRef" :values="formData">
|
|||
|
|
<!-- 默认无内容 -->
|
|||
|
|
</slot>
|
|||
|
|
</a-space>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
</div>
|
|||
|
|
</a-form>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref, computed, reactive, watch, onMounted } from "vue";
|
|||
|
|
import type { FormInstance } from "ant-design-vue";
|
|||
|
|
|
|||
|
|
// --- 类型定义 ---
|
|||
|
|
export interface SearchItem {
|
|||
|
|
type?: "Input" | "Select" | "DataPicker" | string;
|
|||
|
|
name: string;
|
|||
|
|
label: string;
|
|||
|
|
picker?: "year" | "month" | "date" | "week";
|
|||
|
|
fieldProps?: any;
|
|||
|
|
placeholder?: string;
|
|||
|
|
span?: number;
|
|||
|
|
xlSpan?: number;
|
|||
|
|
width?: number;
|
|||
|
|
presets?: any[];
|
|||
|
|
options?: { label: string; value: any }[];
|
|||
|
|
component?: any;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
searchList: SearchItem[];
|
|||
|
|
initialValues?: any;
|
|||
|
|
showSearch?: boolean;
|
|||
|
|
showReset?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = withDefaults(defineProps<Props>(), {
|
|||
|
|
initialValues: () => ({}),
|
|||
|
|
showSearch: true,
|
|||
|
|
showReset: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: "finish", values: any): void;
|
|||
|
|
(e: "valuesChange", changedValues: any, allValues: any): void;
|
|||
|
|
(e: "reset"): void;
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
const formRef = ref<FormInstance>();
|
|||
|
|
const formData = reactive<any>({});
|
|||
|
|
const rules = reactive<Record<string, any>>({});
|
|||
|
|
|
|||
|
|
// 2. 创建计算属性，自动过滤掉 false/null/undefined 的项
|
|||
|
|
const validSearchList = computed(() => {
|
|||
|
|
return props.searchList.filter(item => item);
|
|||
|
|
});
|
|||
|
|
// --- 初始化逻辑 ---
|
|||
|
|
const initForm = () => {
|
|||
|
|
const initial = JSON.parse(JSON.stringify(props.initialValues || {}));
|
|||
|
|
|
|||
|
|
// 1. 清空 formData
|
|||
|
|
Object.keys(formData).forEach((key) => delete formData[key]);
|
|||
|
|
|
|||
|
|
// 2. 赋值初始数据
|
|||
|
|
Object.assign(formData, initial);
|
|||
|
|
|
|||
|
|
// 3. 过滤掉 searchList 中为 false/null/undefined 的项，并生成规则
|
|||
|
|
|
|||
|
|
validSearchList.value.forEach((item) => {
|
|||
|
|
if (item.fieldProps?.required) {
|
|||
|
|
rules[item.name] = [
|
|||
|
|
{ required: true, message: `${item.label}不能为空`, trigger: "blur" },
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const dataDimensionDataChange = (value: any) => {
|
|||
|
|
formData.stcd.dataDimensionData = value;
|
|||
|
|
};
|
|||
|
|
const hbrvcdChange = (value: any) => {
|
|||
|
|
formData.stcd.hbrvcd = value;
|
|||
|
|
};
|
|||
|
|
const stcdIdChange = (value: any) => {
|
|||
|
|
formData.stcd.stcdId = value;
|
|||
|
|
};
|
|||
|
|
onMounted(() => {
|
|||
|
|
initForm();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.initialValues,
|
|||
|
|
(newVal) => {
|
|||
|
|
if (newVal && formRef.value) {
|
|||
|
|
formRef.value.setFieldsValue(newVal);
|
|||
|
|
Object.assign(formData, newVal);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ deep: true }
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// --- 事件处理 ---
|
|||
|
|
const handleFinish = (values: any) => {
|
|||
|
|
emit("finish", values);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleValuesChange = (changedValues: any, allValues: any) => {
|
|||
|
|
emit("valuesChange", changedValues, allValues);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleReset = () => {
|
|||
|
|
if (formRef.value) {
|
|||
|
|
formRef.value.resetFields();
|
|||
|
|
emit("reset");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
form: formRef,
|
|||
|
|
reset: handleReset,
|
|||
|
|
submit: () => formRef.value?.submit(),
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.basic-search-container {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
:deep(.ant-form-item) {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
margin-inline-end: 0px;
|
|||
|
|
}
|
|||
|
|
/* 关键代码：让自定义按钮列自动占据剩余空间并靠右 */
|
|||
|
|
.custom-action-col {
|
|||
|
|
margin-left: auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
|
|||
|
|
/* 防止在小屏幕下挤压变形 */
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
</style>
|