查询方式优化

src/views/biz/onboarding/entry-config/components/OnboardingTemplatePanel.vue

@@ -16,7 +16,6 @@
         placeholder="全部公司"
         class="company-filter"
         @change="onQueryCompanyChange"
-        @clear="onQueryCompanyChange"
       >
         <el-option v-for="item in companies" :key="item.id" :label="item.companyName" :value="item.id" />
       </el-select>
@@ -24,10 +23,10 @@
         v-model="query.departmentId"
         clearable
         filterable
-        placeholder="全部部门"
+        :placeholder="query.companyId ? '全部部门' : '请先选择所属公司'"
+        :disabled="!query.companyId"
         class="department-filter"
         @change="onQueryDepartmentChange"
-        @clear="onQueryDepartmentChange"
       >
         <el-option v-for="item in queryDepartments" :key="item.id" :label="item.departmentName" :value="item.id" />
       </el-select>
@@ -35,10 +34,10 @@
         v-model="query.positionId"
         clearable
         filterable
-        placeholder="全部岗位"
+        :placeholder="query.departmentId ? '全部岗位' : '请先选择所属部门'"
+        :disabled="!query.departmentId"
         class="position-filter"
         @change="loadTemplates"
-        @clear="loadTemplates"
       >
         <el-option v-for="item in queryPositions" :key="item.id" :label="item.positionName" :value="item.id" />
       </el-select>
@@ -48,7 +47,6 @@
         placeholder="模板状态"
         class="status-filter"
         @change="loadTemplates"
-        @clear="loadTemplates"
       >
         <el-option label="全部状态" value="" />
         <el-option label="启用" value="enable" />
@@ -304,16 +302,16 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
+import { useOnboardingScopeOptions } from "@/hooks/useOnboardingScopeOptions";
 import { ElMessage, ElMessageBox } from "element-plus";
 import dayjs from "dayjs";
 import {
-  OnboardingCompany,
+  OnboardingCompanyOption,
   OnboardingContractTemplate,
   OnboardingContractVersion,
   OnboardingDepartmentOption,
   OnboardingMaterialType,
   OnboardingPosition,
-  OnboardingPositionOption,
   OnboardingTemplate,
   onboardingTaskApi
 } from "@/api/modules/biz/onboarding";
@@ -328,9 +326,8 @@ const visible = ref(false);
 const rows = ref<OnboardingTemplate[]>([]);
 const total = ref(0);
 
-const companies = ref<OnboardingCompany[]>([]);
-const queryDepartments = ref<OnboardingDepartmentOption[]>([]);
-const queryPositions = ref<OnboardingPositionOption[]>([]);
+const props = defineProps<{ loadMaterials: () => Promise<OnboardingMaterialType[]> }>();
+const companies = ref<OnboardingCompanyOption[]>([]);
 const departments = ref<OnboardingDepartmentOption[]>([]);
 const positions = ref<OnboardingPosition[]>([]);
 const contractTemplates = ref<OnboardingContractTemplate[]>([]);
@@ -364,96 +361,54 @@ const form = reactive<OnboardingTemplate>({
   materials: []
 });
 
-async function loadAllQueryOptions() {
-  if (!companies.value || companies.value.length === 0) return;
-  const deptList: OnboardingDepartmentOption[] = [];
-  const posList: OnboardingPositionOption[] = [];
+const {
+  departments: queryDepartments,
+  positions: queryPositions,
+  onCompanyChange: changeQueryCompany,
+  onDepartmentChange: changeQueryDepartment,
+  reset: resetQueryScope
+} = useOnboardingScopeOptions(() => query);
 
-  const promises = companies.value.map(async comp => {
-    const [depRes, posRes] = await Promise.all([
-      onboardingTaskApi.listDepartments(comp.id).catch(() => ({ data: [] })),
-      onboardingTaskApi.listPositions(comp.id).catch(() => ({ data: [] }))
-    ]);
-    if (depRes.data) deptList.push(...depRes.data);
-    if (posRes.data) posList.push(...posRes.data);
-  });
-  await Promise.all(promises);
-
-  const uniqueDeptMap = new Map<number, OnboardingDepartmentOption>();
-  deptList.forEach(d => uniqueDeptMap.set(d.id, d));
-  queryDepartments.value = Array.from(uniqueDeptMap.values());
-
-  const uniquePosMap = new Map<number, OnboardingPositionOption>();
-  posList.forEach(p => uniquePosMap.set(p.id, p));
-  queryPositions.value = Array.from(uniquePosMap.values());
+let companiesLoaded = false;
+let companyRequest: Promise<void> | undefined;
+async function loadCompanies() {
+  if (companiesLoaded) return;
+  if (!companyRequest) {
+    companyRequest = onboardingTaskApi.listCompanies().then(({ data }) => {
+      companies.value = data || [];
+      companiesLoaded = true;
+    }).finally(() => { companyRequest = undefined; });
+  }
+  await companyRequest;
 }
 
 async function loadBaseData() {
-  const [companyRes, materialRes] = await Promise.all([
-    onboardingTaskApi.companyPage({ pageNum: 1, pageSize: 100, status: "enable" }).catch(() => ({ data: { list: [] } })),
-    onboardingTaskApi.listMaterialTypes().catch(() => ({ data: [] }))
-  ]);
-  companies.value = companyRes.data?.list || [];
-  materialTypes.value = materialRes.data || [];
-  await loadAllQueryOptions();
+  const [, materials] = await Promise.all([loadCompanies(), props.loadMaterials()]);
+  materialTypes.value = materials;
 }
 
+let templateRequest = 0;
 async function loadTemplates() {
+  const request = ++templateRequest;
   loading.value = true;
   try {
-    const res = await onboardingTaskApi.onboardingTemplatePage(query);
+    const res = await onboardingTaskApi.onboardingTemplatePage({ ...query });
+    if (request !== templateRequest) return;
     rows.value = res.data?.list || [];
     total.value = res.data?.total || 0;
   } finally {
-    loading.value = false;
+    if (request === templateRequest) loading.value = false;
   }
 }
 
 async function onQueryCompanyChange(companyId?: number) {
-  query.departmentId = undefined;
-  query.positionId = undefined;
-  if (!companyId) {
-    await loadAllQueryOptions();
-  } else {
-    const [depRes, posRes] = await Promise.all([
-      onboardingTaskApi.listDepartments(companyId).catch(() => ({ data: [] })),
-      onboardingTaskApi.listPositions(companyId).catch(() => ({ data: [] }))
-    ]);
-    queryDepartments.value = depRes.data || [];
-    queryPositions.value = (posRes.data || []).map(p => ({
-      id: p.id,
-      positionName: p.positionName,
-      companyId: companyId,
-      departmentId: p.departmentId
-    } as any));
-  }
-  loadTemplates();
+  query.pageNum = 1;
+  await Promise.all([changeQueryCompany(companyId), loadTemplates()]);
 }
 
 async function onQueryDepartmentChange(departmentId?: number) {
-  query.positionId = undefined;
-  if (!departmentId) {
-    if (query.companyId) {
-      const posRes = await onboardingTaskApi.listPositions(query.companyId).catch(() => ({ data: [] }));
-      queryPositions.value = (posRes.data || []).map(p => ({
-        id: p.id,
-        positionName: p.positionName,
-        companyId: query.companyId!,
-        departmentId: p.departmentId
-      } as any));
-    } else {
-      await loadAllQueryOptions();
-    }
-  } else {
-    const posRes = await onboardingTaskApi.listPositionsByDepartment(departmentId).catch(() => ({ data: [] }));
-    queryPositions.value = (posRes.data || []).map(p => ({
-      id: p.id,
-      positionName: p.positionName,
-      companyId: p.companyId,
-      departmentId: departmentId
-    } as any));
-  }
-  loadTemplates();
+  query.pageNum = 1;
+  await Promise.all([changeQueryDepartment(departmentId), loadTemplates()]);
 }
 
 function resetQuery() {
@@ -463,7 +418,7 @@ function resetQuery() {
   query.positionId = undefined;
   query.status = "enable";
   query.pageNum = 1;
-  loadAllQueryOptions();
+  resetQueryScope();
   loadTemplates();
 }
 
@@ -744,7 +699,7 @@ async function removeTemplate(row: OnboardingTemplate) {
 }
 
 onMounted(async () => {
-  await Promise.all([loadBaseData(), loadTemplates()]);
+  await Promise.all([loadCompanies(), loadTemplates()]);
 });
 </script>