cn-rdms-web/src/views/feedback/modules/feedback-search.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { FEEDBACK_STATUS_DICT_CODE } from '@/constants/dict';
import { fetchGetUserSimpleList } from '@/service/api';
import { useDict } from '@/hooks/business/dict';
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';

defineOptions({ name: 'FeedbackSearch' });

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

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

// 提交人下拉选项（全员简易列表；value 取用户 id，ID 铁律 string）
const userOptions = ref<{ label: string; value: string }[]>([]);
const { dictOptions: statusOptions } = useDict(FEEDBACK_STATUS_DICT_CODE);

// 分类保留在左侧分面；搜索区补充标题关键词、提交人、状态
const fields = computed<SearchField[]>(() => [
  { key: 'title', label: '标题', type: 'input', placeholder: '请输入标题关键词' },
  {
    key: 'creator',
    label: '提交人',
    type: 'select',
    placeholder: '请选择提交人',
    filterable: true,
    options: userOptions.value
  },
  {
    key: 'status',
    label: '状态',
    type: 'select',
    placeholder: '请选择状态',
    options: statusOptions.value
  }
]);

async function loadUserOptions() {
  const { data, error } = await fetchGetUserSimpleList();
  if (!error && data) {
    userOptions.value = data.map(item => ({ label: item.nickname, value: item.id }));
  }
}

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

function search() {
  // 输入期不实时 trim（避免受控 input 吃掉词间空格）；提交前规整一次，空串归一为 undefined
  model.value.title = model.value.title?.trim() || undefined;
  emit('search');
}

onMounted(loadUserOptions);
</script>

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

<style scoped></style>