shuhi-ui/src/views/finance/commission/page-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, defineEmits, watch, getCurrentInstance } from "vue";
import ProSearch from "@/components/CommonPage/ProSearch2.vue";

const emit = defineEmits(["search"]);

const props = defineProps({
    status: {
        type: String,
        default: ''
    }
});

const formItems = reactive([
    { type: "input", label: "合伙人姓名", prop: "partnerName" },
    {
        type: "select",
        label: "状态",
        prop: "status",
        options: [
            // 1-未结算 2-已结算 3-已到账 4-已作废
            { label: "待结算", value: 1 },
            { label: "已结算", value: 2 },
            { label: "已到账", value: 3 },
            { label: "已作废", value: 4 },
        ],
    },
    {
        type: "daterange",
        label: "时间",
        prop: "timeRange",
        props: {
            valueFormat: "YYYY-MM-DD",
            format: "YYYY-MM-DD",
            startPlaceholder: "开始日期",
            endPlaceholder: "结束日期",
            onChange: (value) => {
                initKeys.createTimeStart = value ? value[0] : "";
                initKeys.createTimeEnd = value ? value[1] : "";
                searchRef.value?.setData(initKeys);
            },
        },
    },
]);

const initKeys = reactive({
    createTimeStart: "",
    createTimeEnd: "",
    partnerName: "",
    status: "",
});

const searchRef = ref(null);
/** 搜索 */
const search = (data) => {
	delete data.timeRange;
    emit("search", { ...data });
};
</script>