[feat] 重构客户信息和供应商信息页面的搜索栏- 移除原有的冗余代码和复杂逻辑

- 新增 SearchBarEx 组件用于通用搜索栏
- 优化搜索栏的显示和交互逻辑
- 统一处理搜索、重置、新增和导出操作

src/views/pm/projecttracking/index.vue

@@ -77,16 +77,20 @@ import download from '@/utils/download'
 import { ProjectTrackingApi, ProjectTrackingVO } from '@/api/pm/projecttracking'
 import ProjectTrackingForm from './ProjectTrackingForm.vue'
 import SearchBarEx from "@/components/SearchBar/SearchBarEx.vue";
+import { CustomerApi } from "@/api/pm/customer";
+import * as DeptApi from '@/api/system/dept'
+import { handleTree } from '@/utils/tree'
 
 /** 项目跟踪 列表 */
 defineOptions({ name: 'ProjectTracking' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
-
 const loading = ref(true) // 列表的加载中
 const list = ref<ProjectTrackingVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const constructionOptions = ref([]); // 建设单位选项
+const deptOptions = ref<any[]>([]) // 部门选项
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -103,16 +107,7 @@ const queryParams = reactive({
 })
 const formRef = ref()
 
-// 定义所有搜索字段
+
-const allFields = [
-  { label: '项目名称', prop: 'name', component: 'el-input' },
-  { label: '建设单位', prop: 'constructionName', component: 'el-input' },
-  { label: '主控部门', prop: 'deptName',component: 'el-input' },
-  { label: '负责人', prop: 'pmName',component: 'el-input' },
-  { label: '合同额', prop: 'contractAmount', component: 'el-input' },
-  { label: '业务类型', prop: 'businessType', component: 'el-select', options: getStrDictOptions(DICT_TYPE.PROJECT_TYPE).map(dict => ({ label: dict.label, value: dict.value })) },
-  { label: '落地性', prop: 'landingPossibility', component: 'el-select', options: getStrDictOptions(DICT_TYPE.POSSIBILITY_OF_LANDING).map(dict => ({ label: dict.label, value: dict.value })) },
-]
 
 /** 查询列表 */
 const getList = async () => {
@@ -172,8 +167,54 @@ const handleExport = async () => {
   } catch {}
 }
 
+const getConstructionOptions = async () => {
+  const resList = [];
+  resList.value = await CustomerApi.getCustomerList({});
+  resList.value.forEach((item) => {
+    constructionOptions.value.push({
+      value: item.id,
+      label: item.name,
+    });
+  });
+}
+
+const getDeptOptions = async () => {
+  deptOptions.value = handleTree(await DeptApi.getSimpleDeptList())
+}
+
+
+// 定义所有搜索字段
+const allFields = [
+  { label: '项目名称', prop: 'name', component: 'el-input' },
+  {
+    label: '建设单位',
+    prop: 'constructionId',
+    component: 'el-select',
+    options: constructionOptions.value,
+  },
+  // { label: '主控部门', prop: 'deptName',component: 'el-input' },
+  {
+    label: '主控部门',
+    prop: 'deptId',
+    component: 'el-tree-select',
+    props: {
+      data: deptOptions.value,
+      props: { children: 'children', label: 'name', value: 'id' },
+      checkStrictly: true,
+      filterable: true,
+      clearable: true,
+    },
+  },
+  { label: '负责人', prop: 'pmName',component: 'el-input' },
+  { label: '合同额', prop: 'contractAmount', component: 'el-input' },
+  { label: '业务类型', prop: 'businessType', component: 'el-select', options: getStrDictOptions(DICT_TYPE.PROJECT_TYPE).map(dict => ({ label: dict.label, value: dict.value })) },
+  { label: '落地性', prop: 'landingPossibility', component: 'el-select', options: getStrDictOptions(DICT_TYPE.POSSIBILITY_OF_LANDING).map(dict => ({ label: dict.label, value: dict.value })) },
+]
+
 /** 初始化 **/
 onMounted(() => {
   getList()
+  getConstructionOptions(); // 获取建设单位选项
+  getDeptOptions(); // 获取部门树形结构
 })
 </script>