shuhi-ui/src/views/statistic/defect/components/page-search.vue

<!-- 搜索表单 -->
<template>
    <ele-card :body-style="{ paddingBottom: '8px' }">
        <ProSearch :items="formItems" ref="searchRef" @search="search" :initKeys="initKeys" :offset="1" />
    </ele-card>
</template>

<script setup>
import {
    reactive,
    ref,
    defineEmits,
    computed,
    getCurrentInstance
} from 'vue';
import ProSearch from '@/components/CommonPage/ProSearch2.vue';

let { proxy } = getCurrentInstance();
const emit = defineEmits(['search']);

const godownList = ref([]);
const provinceList = ref([]);
function getProviceList(id = 1) {
    return proxy.$http.get(`/baseinfo/districtInfo/findInfo/${id}`);
}
getProviceList().then((res) => {
    provinceList.value = res.data.data;
});


const formItems = computed(() => {
    return [
        {
            type: 'select',
            label: '省份',
            prop: 'provinceId',
            options: provinceList.value.map((d) => {
                return { label: d.district, value: d.id };
            }),
            props: {
                filterable: true,
                multiple: true,
                onChange: (value) => {
                    searchRef.value?.setData({
                        provinceIdList: value
                    });
                }
            }
        },
        {
            type: 'select',
            label: '收货仓库',
            prop: 'godownId',
            options: godownList.value.map((item) => ({
                label: item.godownName,
                value: item.id
            })),
            props: {
                placeholder: '请选择收货仓库',
                clearable: true
            }
        },
        {
            type: 'daterange',
            label: '统计日期',
            prop: 'time',
            props: {
                format: 'YYYY-MM-DD',
                valueFormat: 'YYYY-MM-DD',
                onChange: (value) => {
                    searchRef.value?.setData({
                        statDateStart: value ? value[0] : '',
                        statDateEnd: value ? value[1] : ''
                    });
                }
            },
            colProps: {
                span: 6
            }
        }
    ];
});

const initKeys = reactive({
    statDateStart: '',
    statDateEnd: '',
    godownId: '',
    provinceIdList: []
});

function getStoreList(name = '') {
    return proxy.$http.post(`/baseinfo/godown/searchGodown?name=${name}`);
}
getStoreList().then((res) => {
    godownList.value = res.data.data;
});

const searchRef = ref(null);
/** 搜索 */
const search = (data) => {
    const searchParams = {
        godownId: data.godownId,
        statDateStart: data.statDateStart || initKeys.statDateStart,
        statDateEnd: data.statDateEnd || initKeys.statDateEnd,
        provinceIdList: data.provinceIdList.join(',') || initKeys.provinceIdList.join(',')
    };
    emit('search', searchParams);
};
</script>