cn-rdms-web/src/views/personal-center/overtime-application/modules/overtime-application-search.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { fetchGetOvertimeApplicationStatusDict } from '@/service/api';
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';

defineOptions({ name: 'OvertimeApplicationSearch' });

const emit = defineEmits<{
  reset: [];
  search: [];
}>();

const model = defineModel<Api.OvertimeApplication.OvertimeApplicationSearchParams>('model', {
  required: true
});

const searchModel = reactive<Record<string, any>>({
  applicantName: '',
  overtimeDate: undefined,
  statusCode: undefined,
  approverName: ''
});

const statusOptions = ref<Array<{ label: string; value: string }>>([]);

let syncingFromSource = false;

watch(
  () =>
    [model.value.applicantName, model.value.overtimeDate, model.value.statusCode, model.value.approverName] as const,
  ([applicantName, overtimeDate, statusCode, approverName]) => {
    syncingFromSource = true;
    searchModel.applicantName = applicantName ?? '';
    searchModel.overtimeDate = overtimeDate;
    searchModel.statusCode = statusCode;
    searchModel.approverName = approverName ?? '';
    syncingFromSource = false;
  },
  { immediate: true, flush: 'sync' }
);

watch(
  () =>
    [searchModel.applicantName, searchModel.overtimeDate, searchModel.statusCode, searchModel.approverName] as const,
  ([applicantName, overtimeDate, statusCode, approverName]) => {
    if (syncingFromSource) {
      return;
    }

    model.value.applicantName = applicantName?.trim() || undefined;
    model.value.overtimeDate = overtimeDate;
    model.value.statusCode = statusCode;
    model.value.approverName = approverName?.trim() || undefined;
  },
  { flush: 'sync' }
);

async function loadStatusOptions() {
  const { error, data } = await fetchGetOvertimeApplicationStatusDict();

  if (error || !data) {
    statusOptions.value = [];
    return;
  }

  statusOptions.value = data.map(item => ({
    label: item.statusName,
    value: item.statusCode
  }));
}

onMounted(async () => {
  await loadStatusOptions();
});

const fields = computed<SearchField[]>(() => [
  {
    key: 'applicantName',
    label: '申请人',
    type: 'input',
    placeholder: '请输入申请人'
  },
  {
    key: 'overtimeDate',
    label: '加班日期',
    type: 'dateRange',
    placeholder: '请选择加班日期'
  },
  {
    key: 'statusCode',
    label: '状态',
    type: 'select',
    options: statusOptions.value,
    placeholder: '请选择状态'
  },
  {
    key: 'approverName',
    label: '审核人',
    type: 'input',
    placeholder: '请输入审核人'
  }
]);

function handleReset() {
  emit('reset');
}

function handleSearch() {
  emit('search');
}
</script>

<template>
  <TableSearchFields v-model="searchModel" :fields="fields" :columns="4" @reset="handleReset" @search="handleSearch" />
</template>