shuhi-ui/src/views/finance/withdrawal/components/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 } from 'vue';
  import ProSearch from '@/components/CommonPage/ProSearch2.vue';

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

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

  const formItems = reactive([
    { type: 'input', label: '用户名', prop: 'nickName' },
    {
      type: 'dictSelect',
      label: '状态',
      prop: 'status',
      props: { code: 'withdrawal_status' }
    },
    {
      type: 'daterange',
      label: '时间',
      prop: 'timeRange',
      props: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期',
        onChange: (value) => {
          initKeys.startTime = value ? value[0] : '';
          initKeys.endTime = value ? value[1] : '';
          searchRef.value?.setData(initKeys);
        }
      }
    }
  ]);

  const initKeys = reactive({
    startTime: '',
    endTime: '',
    nickName: '',
    status: ''
  });

  // watch(
  //   () => props.status,
  //   (newVal) => {
  //     initKeys.status = newVal;
  //     searchRef.value?.setData(initKeys);
  //   }
  // );

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