tuanwei-admin/src/views/oa/project/components/project-search.vue

<!-- 搜索表单 -->
<template>
  <a-form
    :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
    :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
  >
    <a-row>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="项目名称">
          <a-input
            v-model:value.trim="where.projectName"
            placeholder="请输入项目名称"
            allow-clear
            @pressEnter="search"
          />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="项目编号">
          <a-input
            v-model:value.trim="where.projectCode"
            placeholder="请输入项目编号"
            allow-clear
            @pressEnter="search"
          />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="状态">
          <status-select
            v-model:value="where.status"
            @blur="validate('status', { trigger: 'blur' }).catch(() => {})"
          />
        </a-form-item>
      </a-col>

      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
          <a-space>
            <a-button type="primary" @click="search">查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
  import useSearch from '@/utils/use-search';
  import type { ProjectParam } from '@/api/oa/project/model';
  import StatusSelect from './status-select.vue';

  const emit = defineEmits<{
    (e: 'search', where?: ProjectParam): void;
  }>();

  // 表单数据
  const { where, resetFields } = useSearch<ProjectParam>({
    projectName: '',
    projectCode: ''
  });

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

  /*  重置 */
  const reset = () => {
    resetFields();
    search();
  };
</script>