feat(M08-B): 补任务结算筛选

admin/src/components/CleaningSettlementsPanel.vue

@@ -1,11 +1,38 @@
 <template>
   <section class="panel">
     <div class="panel-toolbar">
-      <el-segmented
-        :model-value="status"
-        :options="statusOptions"
-        @update:model-value="$emit('status-change', $event as SettlementStatus | '')"
-      />
+      <div class="toolbar-actions">
+        <el-segmented
+          :model-value="status"
+          :options="statusOptions"
+          @update:model-value="$emit('status-change', $event as SettlementStatus | '')"
+        />
+        <el-input
+          v-model="filterDraft.storeId"
+          class="narrow-input"
+          placeholder="门店 ID"
+          clearable
+          @keyup.enter="submitFilters"
+          @clear="submitFilters"
+        />
+        <el-select
+          v-model="filterDraft.cleanerUserId"
+          class="filter-select"
+          filterable
+          clearable
+          placeholder="保洁员"
+          @change="submitFilters"
+          @clear="submitFilters"
+        >
+          <el-option
+            v-for="cleaner in cleaners"
+            :key="cleaner.id"
+            :label="cleanerLabel(cleaner)"
+            :value="cleaner.id"
+          />
+        </el-select>
+        <el-button :icon="Search" @click="submitFilters">筛选</el-button>
+      </div>
       <div class="toolbar-actions">
         <el-button :icon="FilePlus2" type="primary" @click="generateDialog.open = true">
           生成
@@ -263,7 +290,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive, watch } from 'vue';
 import {
   BadgeCheck,
   CircleAlert,
@@ -271,6 +298,7 @@ import {
   FilePlus2,
   ListChecks,
   RefreshCw,
+  Search,
   Send
 } from '@lucide/vue';
 import { ElMessage } from 'element-plus';
@@ -295,11 +323,13 @@ const props = defineProps<{
   page: number;
   pageSize: number;
   status: SettlementStatus | '';
+  filters: { storeId: string; cleanerUserId: string };
 }>();
 
 const emit = defineEmits<{
   refresh: [];
   'status-change': [SettlementStatus | ''];
+  filter: [{ storeId: string; cleanerUserId: string }];
   'page-change': [number];
   generate: [{ cleanerUserId: string; storeId?: string; note?: string }];
   confirm: [{ settlementId: string; note?: string }];
@@ -315,6 +345,7 @@ const statusOptions = [
   { label: '已发', value: 'PAID' },
   { label: '取消', value: 'CANCELLED' }
 ];
+const filterDraft = reactive({ storeId: props.filters.storeId, cleanerUserId: props.filters.cleanerUserId });
 const generateDialog = reactive({ open: false, cleanerUserId: '', storeId: '', note: '' });
 const transferDialog = reactive({
   open: false,
@@ -322,6 +353,12 @@ const transferDialog = reactive({
   mode: 'API' as TransferMode,
   note: ''
 });
+
+watch(
+  () => props.filters,
+  (value) => Object.assign(filterDraft, value),
+  { deep: true }
+);
 const preflightDialog = reactive<{
   open: boolean;
   result: WechatTransferPreflight | null;
@@ -366,6 +403,13 @@ function cleanerLabel(cleaner: ManagedUser) {
   return `${name}${phone}${stores}`;
 }
 
+function submitFilters() {
+  emit('filter', {
+    storeId: filterDraft.storeId.trim(),
+    cleanerUserId: filterDraft.cleanerUserId
+  });
+}
+
 function submitGenerate() {
   if (!generateDialog.cleanerUserId) {
     ElMessage.warning('请选择保洁员');