feat(M08-B): 补后台协作与结算详情

admin/src/components/CleaningSettlementsPanel.vue

@@ -49,6 +49,7 @@
       <el-table-column label="操作" width="320" fixed="right">
         <template #default="{ row }">
           <div class="row-actions">
+            <el-button size="small" :icon="ListChecks" @click="openDetail(row)">详情</el-button>
             <el-button
               size="small"
               :icon="BadgeCheck"
@@ -188,6 +189,56 @@
       <el-button type="danger" @click="submitFailure">记录</el-button>
     </template>
   </el-dialog>
+
+  <el-dialog v-model="detailDialog.open" title="结算单详情" width="720px">
+    <div v-if="detailDialog.detail" class="dialog-stack">
+      <div class="detail-grid">
+        <span>单号<strong>{{ detailDialog.detail.settlement.settlementNo }}</strong></span>
+        <span>保洁员<strong>{{ detailDialog.detail.settlement.cleanerName }}</strong></span>
+        <span>金额<strong>{{ money(detailDialog.detail.settlement.totalRewardCents) }}</strong></span>
+        <span>状态<strong>{{ detailDialog.detail.settlement.status }}</strong></span>
+      </div>
+      <el-table :data="detailDialog.detail.items" size="small" v-loading="detailDialog.loading">
+        <el-table-column prop="taskNo" label="任务" min-width="170">
+          <template #default="{ row }">
+            <div class="stack">
+              <strong>{{ row.taskNo }}</strong>
+              <span>{{ compactText(row.orderNo) }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="房间" min-width="150">
+          <template #default="{ row }">
+            {{ row.storeName }} · {{ row.roomName || row.roomNo }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="cleanerName" label="成员" width="130" />
+        <el-table-column prop="rewardCents" label="金额" width="110">
+          <template #default="{ row }">{{ money(row.rewardCents) }}</template>
+        </el-table-column>
+        <el-table-column prop="completedAt" label="完成" width="130">
+          <template #default="{ row }">{{ shortDate(row.completedAt) }}</template>
+        </el-table-column>
+      </el-table>
+      <el-descriptions :column="2" size="small" border>
+        <el-descriptions-item label="转账状态">
+          {{ compactText(detailDialog.detail.settlement.payoutState) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="外部流水">
+          {{ compactText(detailDialog.detail.settlement.payoutReference) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="失败原因" :span="2">
+          {{ compactText(detailDialog.detail.settlement.payoutError) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ compactText(detailDialog.detail.settlement.note) }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <template #footer>
+      <el-button @click="detailDialog.open = false">关闭</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -197,14 +248,16 @@ import {
   CircleAlert,
   ClipboardCheck,
   FilePlus2,
+  ListChecks,
   RefreshCw,
   Send
 } from '@lucide/vue';
 import { ElMessage } from 'element-plus';
-import { preflightWechatTransfer } from '../api';
+import { getCleaningSettlementDetail, preflightWechatTransfer } from '../api';
 import { compactText, money, shortDate } from '../format';
 import type {
   CleaningSettlement,
+  CleaningSettlementDetail,
   PageResult,
   SettlementStatus,
   TransferMode,
@@ -260,6 +313,15 @@ const failureDialog = reactive({
   payoutReference: '',
   note: ''
 });
+const detailDialog = reactive<{
+  open: boolean;
+  loading: boolean;
+  detail: CleaningSettlementDetail | null;
+}>({
+  open: false,
+  loading: false,
+  detail: null
+});
 
 function settlementTag(status: SettlementStatus) {
   if (status === 'PAID') return 'success';
@@ -325,4 +387,16 @@ function submitFailure() {
   });
   failureDialog.open = false;
 }
+
+async function openDetail(row: CleaningSettlement) {
+  detailDialog.open = true;
+  detailDialog.loading = true;
+  try {
+    detailDialog.detail = await getCleaningSettlementDetail(props.session, row.id);
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '结算详情加载失败');
+  } finally {
+    detailDialog.loading = false;
+  }
+}
 </script>

admin/src/components/CleaningTasksPanel.vue

@@ -64,6 +64,7 @@
         <template #default="{ row }">
           <div class="row-actions">
             <el-button size="small" :icon="UserPlus" @click="openAssign(row)">指派</el-button>
+            <el-button size="small" :icon="Users" @click="openMembers(row)">成员</el-button>
             <el-button
               size="small"
               type="success"
@@ -120,6 +121,66 @@
       <el-button type="danger" @click="submitReject">驳回</el-button>
     </template>
   </el-dialog>
+
+  <el-dialog v-model="memberDialog.open" title="协作者管理" width="640px">
+    <div class="dialog-stack">
+      <div class="detail-header">
+        <strong>{{ memberDialog.taskNo }}</strong>
+        <span>任务奖励 {{ money(memberDialog.taskRewardCents) }}</span>
+      </div>
+      <el-table :data="memberDialog.members" size="small" v-loading="memberDialog.loading">
+        <el-table-column prop="nickname" label="成员" min-width="140">
+          <template #default="{ row }">
+            <div class="stack">
+              <strong>{{ row.nickname || compactText(row.userId) }}</strong>
+              <span>ID {{ row.userId }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberRole" label="角色" width="90">
+          <template #default="{ row }">
+            <el-tag :type="row.memberRole === 'LEAD' ? 'success' : 'info'" effect="light">
+              {{ row.memberRole }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="rewardCents" label="分账" width="110">
+          <template #default="{ row }">{{ money(row.rewardCents) }}</template>
+        </el-table-column>
+        <el-table-column prop="settledAt" label="结算" width="130">
+          <template #default="{ row }">{{ shortDate(row.settledAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="90">
+          <template #default="{ row }">
+            <el-button
+              size="small"
+              type="danger"
+              :icon="UserMinus"
+              :disabled="row.memberRole === 'LEAD' || !!row.settledAt"
+              @click="removeMember(row.userId)"
+            >
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-form label-position="top" class="member-form">
+        <el-form-item label="协作者用户 ID">
+          <el-input v-model="memberDialog.cleanerUserId" inputmode="numeric" />
+        </el-form-item>
+        <el-form-item label="分账金额">
+          <el-input-number v-model="memberDialog.rewardCents" :min="0" :max="1000000" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="memberDialog.note" />
+        </el-form-item>
+        <el-button type="primary" :icon="UserPlus" @click="submitMember">添加/更新</el-button>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-button @click="memberDialog.open = false">关闭</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -131,12 +192,20 @@ import {
   RefreshCw,
   RotateCcw,
   Undo2,
-  UserPlus
+  UserMinus,
+  UserPlus,
+  Users
 } from '@lucide/vue';
+import { ElMessage } from 'element-plus';
+import {
+  addCleaningTaskMember,
+  listCleaningTaskMembers,
+  removeCleaningTaskMember
+} from '../api';
 import { compactText, money, shortDate } from '../format';
-import type { CleaningTask, PageResult, TaskStatus } from '../types';
+import type { CleaningTask, CleaningTaskMember, PageResult, TaskStatus } from '../types';
 
-defineProps<{
+const props = defineProps<{
   session: { token: string };
   loading: boolean;
   items: PageResult<CleaningTask>['items'];
@@ -168,6 +237,17 @@ const statusOptions = [
 const reclaimForm = reactive({ olderThanMinutes: 60, limit: 20 });
 const assignDialog = reactive({ open: false, taskId: '', cleanerUserId: '', note: '' });
 const rejectDialog = reactive({ open: false, taskId: '', reason: '' });
+const memberDialog = reactive({
+  open: false,
+  loading: false,
+  taskId: '',
+  taskNo: '',
+  taskRewardCents: 0,
+  cleanerUserId: '',
+  rewardCents: 0,
+  note: '',
+  members: [] as CleaningTaskMember[]
+});
 
 function taskTag(status: TaskStatus) {
   if (status === 'SUBMITTED') return 'warning';
@@ -202,4 +282,58 @@ function submitReject() {
   emit('reject', { taskId: rejectDialog.taskId, reason: rejectDialog.reason });
   rejectDialog.open = false;
 }
+
+async function loadMembers() {
+  memberDialog.loading = true;
+  try {
+    memberDialog.members = await listCleaningTaskMembers(props.session, memberDialog.taskId);
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '成员加载失败');
+  } finally {
+    memberDialog.loading = false;
+  }
+}
+
+async function openMembers(row: CleaningTask) {
+  memberDialog.open = true;
+  memberDialog.taskId = row.id;
+  memberDialog.taskNo = row.taskNo;
+  memberDialog.taskRewardCents = row.rewardCents;
+  memberDialog.cleanerUserId = '';
+  memberDialog.rewardCents = 0;
+  memberDialog.note = '';
+  await loadMembers();
+}
+
+async function submitMember() {
+  try {
+    memberDialog.members = await addCleaningTaskMember(props.session, memberDialog.taskId, {
+      cleanerUserId: memberDialog.cleanerUserId,
+      rewardCents: memberDialog.rewardCents,
+      note: memberDialog.note
+    });
+    memberDialog.cleanerUserId = '';
+    memberDialog.rewardCents = 0;
+    memberDialog.note = '';
+    ElMessage.success('协作者已更新');
+    emit('refresh');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '协作者更新失败');
+  }
+}
+
+async function removeMember(cleanerUserId: string) {
+  try {
+    memberDialog.members = await removeCleaningTaskMember(
+      props.session,
+      memberDialog.taskId,
+      cleanerUserId,
+      '后台移除协作者'
+    );
+    ElMessage.success('协作者已移除');
+    emit('refresh');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '协作者移除失败');
+  }
+}
 </script>