fix(产品需求、项目需求): 按照会议所说进行修改。

src/views/product/requirement/modules/requirement-search.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, h, onMounted, ref } from 'vue';
 import { RDMS_REQ_SOURCE_TYPE_DICT_CODE } from '@/constants/dict';
 import { fetchGetRequirementStatusDict } from '@/service/api';
 import { useDict } from '@/hooks/business/dict';
-import DictSelect from '@/components/custom/dict-select.vue';
-import TableSearchPanel from '@/components/custom/table-search-panel.vue';
+import TableSearchFields from '@/components/custom/table-search-fields.vue';
 import MemberSelectOption from './member-select-option.vue';
 
 defineOptions({ name: 'RequirementSearch' });
@@ -21,7 +20,7 @@ interface Props {
   priorityDictCode: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 interface Emits {
   (e: 'reset'): void;
@@ -45,6 +44,21 @@ const sourceTypeOptions = computed(() => {
     }));
 });
 
+const memberSelectOptions = computed(() => {
+  return props.memberOptions.map(item => ({
+    label: item.nickname,
+    value: item.id,
+    roleName: item.roleName
+  }));
+});
+
+function renderMemberOption(option: { label: string; value: string | number; roleName?: string }) {
+  return h(MemberSelectOption, {
+    nickname: option.label,
+    roleName: option.roleName || ''
+  });
+}
+
 async function loadStatusOptions() {
   const { error, data } = await fetchGetRequirementStatusDict();
 
@@ -59,77 +73,58 @@ async function loadStatusOptions() {
   }));
 }
 
-function reset() {
-  emit('reset');
-}
-
-function search() {
-  emit('search');
-}
-
 onMounted(async () => {
   await loadStatusOptions();
 });
+
+const fields = computed(() => [
+  {
+    key: 'title',
+    label: '需求名称',
+    type: 'input' as const,
+    placeholder: '输入需求名称'
+  },
+  {
+    key: 'priority',
+    label: '优先级',
+    type: 'dict' as const,
+    dictCode: props.priorityDictCode,
+    placeholder: '筛选优先级'
+  },
+  {
+    key: 'statusCode',
+    label: '状态',
+    type: 'select' as const,
+    placeholder: '筛选状态',
+    options: requirementStatusOptions.value
+  },
+  {
+    key: 'category',
+    label: '需求类型',
+    type: 'dict' as const,
+    dictCode: props.categoryDictCode,
+    placeholder: '筛选需求类型'
+  },
+  {
+    key: 'sourceType',
+    label: '需求来源',
+    type: 'select' as const,
+    placeholder: '筛选需求来源',
+    options: sourceTypeOptions.value
+  },
+  {
+    key: 'currentHandlerUserId',
+    label: '负责人',
+    type: 'select' as const,
+    placeholder: '筛选负责人',
+    options: memberSelectOptions.value,
+    renderOption: renderMemberOption
+  }
+]);
 </script>
 
 <template>
-  <TableSearchPanel :model="model" :action-col-lg="6" @reset="reset" @search="search">
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="需求名称">
-        <ElInput v-model="model.title" clearable placeholder="输入需求名称" />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="需求类型">
-        <DictSelect
-          v-model="model.category"
-          :dict-code="categoryDictCode"
-          clearable
-          filterable
-          placeholder="筛选需求类型"
-        />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="优先级">
-        <DictSelect v-model="model.priority" :dict-code="priorityDictCode" clearable placeholder="筛选优先级" />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="状态">
-        <ElSelect v-model="model.statusCode" clearable placeholder="筛选状态">
-          <ElOption
-            v-for="item in requirementStatusOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="负责人">
-        <ElSelect
-          v-model="model.currentHandlerUserId"
-          clearable
-          filterable
-          placeholder="筛选负责人"
-          :filter-method="(val: string) => val"
-        >
-          <ElOption v-for="item in memberOptions" :key="item.id" :label="item.nickname" :value="item.id">
-            <MemberSelectOption :nickname="item.nickname" :role-name="item.roleName || ''" />
-          </ElOption>
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="需求来源">
-        <ElSelect v-model="model.sourceType" clearable placeholder="筛选需求来源">
-          <ElOption v-for="item in sourceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-  </TableSearchPanel>
+  <TableSearchFields v-model="model" :fields="fields" :columns="3" @search="emit('search')" @reset="emit('reset')" />
 </template>
 
 <style scoped></style>