shuhi-ui/src/views/recycleService/stockIn/components/stock-in-search.vue

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

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

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

// 仓库列表
const godownList = ref([]);
function getStoreList(name = '') {
    return proxy.$http.post(`/baseinfo/godown/searchGodown?name=${name}`);
}
getStoreList().then((res) => {
    godownList.value = res.data.data;
});

// 用户列表
const userList = ref([]);
function getUserList(query = '') {
    return proxy.$http.get(`/system/user/list?username=${query}`);
}

const formItems = computed(() => {
    return [
        {
            type: 'select',
            label: '仓库名称',
            prop: 'godownId',
            options: godownList.value.map((item) => ({
                label: item.name,
                value: item.id
            }))
        },
        { type: 'input', label: '入库库位', prop: 'positionCode' },
        { type: 'input', label: '物流单号', prop: 'waybillCode' },
        { type: 'input', label: '订单编号', prop: 'orderId' },
        { type: 'input', label: '入库单号', prop: 'stockCode' },
        {
            type: 'select',
            label: '操作员',
            prop: 'userId',
            options: userList.value.map((item) => ({
                label: item.userName,
                value: item.userId
            })),
            props: {
                filterable: true,
                remote: true,
                reserveKeyword: true,
                remoteMethod: (query) => {
                    getUserList(query).then((res) => {
                        userList.value = res.data.rows;
                    });
                }
            }
        },
        { type: 'input', label: '入库备注', prop: ' remark' },
        {
            type: 'datetimerange',
            label: '入库时间',
            prop: 'dateRange',
            startProp: 'startTime',
            endProp: 'endTime',
            colProps: { span: 6 },
            props: {
                format: 'YYYY-MM-DD HH:mm:ss',
                valueFormat: 'YYYY-MM-DD HH:mm:ss',
                rangeSeparator: '至',
                onChange: (val) => {
                    searchRef.value?.setData({ startTime: val?.[0] || '', endTime: val?.[1] || '' });
                }
            }
        }
    ];
});

const initKeys = reactive({
    godownId: '',
    positionCode: '',
    waybillCode: '',
    orderId: '',
    inputCode: '',
    userId: '',
    inputRemark: '',
    startTime: '',
    endTime: '',
    dateRange: []
});

const searchRef = ref(null);

/** 搜索 */
const search = (data) => {
    emit('search', { ...data });
};
</script>