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

admin/src/components/CleaningTasksPanel.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 TaskStatus | '')"
-      />
+      <div class="toolbar-actions">
+        <el-segmented
+          :model-value="status"
+          :options="statusOptions"
+          @update:model-value="$emit('status-change', $event as TaskStatus | '')"
+        />
+        <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-popover trigger="click" width="280">
           <template #reference>
@@ -226,13 +253,14 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive, watch } from 'vue';
 import {
   BadgeCheck,
   Check,
   Image,
   RefreshCw,
   RotateCcw,
+  Search,
   Undo2,
   UserMinus,
   UserPlus,
@@ -256,11 +284,13 @@ const props = defineProps<{
   page: number;
   pageSize: number;
   status: TaskStatus | '';
+  filters: { storeId: string; cleanerUserId: string };
 }>();
 
 const emit = defineEmits<{
   refresh: [];
   'status-change': [TaskStatus | ''];
+  filter: [{ storeId: string; cleanerUserId: string }];
   'page-change': [number];
   assign: [{ taskId: string; cleanerUserId: string; note?: string }];
   complete: [{ taskId: string; note?: string }];
@@ -277,6 +307,7 @@ const statusOptions = [
   { label: '完成', value: 'COMPLETED' },
   { label: '驳回', value: 'REJECTED' }
 ];
+const filterDraft = reactive({ storeId: props.filters.storeId, cleanerUserId: props.filters.cleanerUserId });
 const reclaimForm = reactive({ olderThanMinutes: 60, limit: 20 });
 const assignDialog = reactive({ open: false, taskId: '', cleanerUserId: '', note: '' });
 const rejectDialog = reactive({ open: false, taskId: '', reason: '' });
@@ -292,6 +323,12 @@ const memberDialog = reactive({
   members: [] as CleaningTaskMember[]
 });
 
+watch(
+  () => props.filters,
+  (value) => Object.assign(filterDraft, value),
+  { deep: true }
+);
+
 function taskTag(status: TaskStatus) {
   if (status === 'SUBMITTED') return 'warning';
   if (status === 'COMPLETED' || status === 'SETTLED') return 'success';
@@ -306,6 +343,13 @@ function cleanerLabel(cleaner: ManagedUser) {
   return `${name}${phone}${stores}`;
 }
 
+function submitFilters() {
+  emit('filter', {
+    storeId: filterDraft.storeId.trim(),
+    cleanerUserId: filterDraft.cleanerUserId
+  });
+}
+
 function openAssign(row: CleaningTask) {
   assignDialog.open = true;
   assignDialog.taskId = row.id;