shuhi-ui/src/views/recycleService/stockOff/components/stock-off-search.vue

<template>
    <ele-card :body-style="{ paddingBottom: '8px' }">
        <div class="flex items-start">
            <div class="flex flex-col gap-[12px]">
                <div class="flex items-center gap-2 w-full">
                    <el-select class="w-[120px] flex-1" v-model="initKeys.timeType" @change="handleTimeTypeChange">
                        <el-option label="创建时间" :value="1"></el-option>
                        <el-option label="完成时间" :value="2"></el-option>
                    </el-select>
                    <el-radio-group v-model="initKeys.timeRangeType" @change="handleTimeRangeTypeChange">
                        <el-radio label="今天" :value="1"></el-radio>
                        <el-radio label="近7天" :value="2"></el-radio>
                        <el-radio label="近30天" :value="3"></el-radio>
                    </el-radio-group>
                </div>
                <el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    @change="handleTimeRangeChange" end-placeholder="结束日期" />
            </div>

            <ProSearch class="flex-1 ml-8" :items="formItems" ref="searchRef" @search="search" :initKeys="initKeys">
            </ProSearch>
        </div>
    </ele-card>
</template>

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

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

const searchRef = ref(null);
const initKeys = reactive({
    godownId: '',
    positionCode: '',
    waybillCode: '',
    orderId: '',
    taskCode: '',
    operator: '',
    remark: '',
    taskStatus: '',
    startTime: '',
    endTime: '',
    timeType: 1,
    timeRangeType: 1
});

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

const timeRange = ref([]);
const handleTimeRangeChange = (val) => {
    timeRange.value = val;
    searchRef.value?.setData({
        startTime: val?.[0] || '',
        endTime: val?.[1] || ''
    });
}
const handleTimeTypeChange = (val) => {
    initKeys.timeType = val;
    searchRef.value?.setData({
        timeType: val
    });
}

const handleTimeRangeTypeChange = (val) => {
    initKeys.timeRangeType = val;
    const now = dayjs();
    const end = now.endOf('day').format('YYYY-MM-DD HH:mm:ss');

    let start;
    switch (val) {
        case 1: // 今天
            start = now.startOf('day').format('YYYY-MM-DD HH:mm:ss');
            break;
        case 2: // 近7天
            start = now.subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
            break;
        case 3: // 近30天
            start = now.subtract(29, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
            break;
    }

    initKeys.startTime = start;
    initKeys.endTime = end;
    timeRange.value = [start, end];
    searchRef.value?.setData(initKeys);

    search(initKeys);
}
onMounted(() => {
    handleTimeRangeTypeChange(1)
})

const formItems = computed(() => {
    return [
        {
            type: 'select',
            label: '仓库名称',
            prop: 'godownId',
            options: godownList.value.map((d) => {
                return { label: d.godownName, value: d.id };
            }),
            props: {
                placeholder: '请选择或输入搜索',
                filterable: true
            },
            colProps: {
                span: 6
            }
        },
        { type: 'input', label: '下架库位', prop: 'positionCode', colProps: { span: 6 } },
        { type: 'input', label: '物流单号', prop: 'waybillCode', colProps: { span: 6 } },
        { type: 'input', label: '订单编号', prop: 'orderId', colProps: { span: 6 } },
        { type: 'input', label: '作业编号', prop: 'taskCode', colProps: { span: 6 } },
        { type: 'input', label: '操作人', prop: 'operator', colProps: { span: 6 } },
        { type: 'input', label: '备注', prop: 'remark', colProps: { span: 6 } },
        { type: 'dictSelect', label: '作业状态', prop: 'taskStatus', props: { code: 'task_status' }, colProps: { span: 6 } },
    ];
});

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


</script>