Codex
541 lines
20 KiB
Vue
541 lines
20 KiB
Vue
<template>
|
|
<section class="panel">
|
|
<div class="panel-toolbar">
|
|
<div class="handoff-summary" aria-label="现场联调进度">
|
|
<span>总项 <strong>{{ checklist.length }}</strong></span>
|
|
<span>通过 <strong>{{ passedCount }}</strong></span>
|
|
<span>阻断 <strong>{{ blockedCount }}</strong></span>
|
|
<span>待处理 <strong>{{ pendingCount }}</strong></span>
|
|
<span>更新 <strong>{{ sessionMeta.updatedAt || '未记录' }}</strong></span>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<el-segmented v-model="category" :options="categoryOptions" />
|
|
<el-select v-model="statusFilter" class="handoff-status-select" placeholder="状态">
|
|
<el-option label="全部状态" value="ALL" />
|
|
<el-option label="待处理" value="PENDING" />
|
|
<el-option label="通过" value="PASS" />
|
|
<el-option label="阻断" value="BLOCKED" />
|
|
<el-option label="不适用" value="SKIP" />
|
|
</el-select>
|
|
<el-popover trigger="click" width="360">
|
|
<template #reference>
|
|
<el-button :icon="ListChecks" :disabled="filteredChecklist.length === 0">
|
|
批量标记
|
|
</el-button>
|
|
</template>
|
|
<el-form class="handoff-bulk-form" label-position="top">
|
|
<el-alert
|
|
:title="`将更新当前筛选出的 ${filteredChecklist.length} 个检查项`"
|
|
type="info"
|
|
show-icon
|
|
:closable="false"
|
|
/>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="bulkForm.status">
|
|
<el-option label="待处理" value="PENDING" />
|
|
<el-option label="通过" value="PASS" />
|
|
<el-option label="阻断" value="BLOCKED" />
|
|
<el-option label="不适用" value="SKIP" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="负责人">
|
|
<el-input v-model="bulkForm.owner" placeholder="留空则不覆盖" />
|
|
</el-form-item>
|
|
<el-form-item label="结果记录">
|
|
<el-input v-model="bulkForm.note" placeholder="留空则不覆盖" />
|
|
</el-form-item>
|
|
<el-button type="primary" :icon="Check" @click="applyBulkMark">应用到当前筛选</el-button>
|
|
</el-form>
|
|
</el-popover>
|
|
<el-button :icon="FileDown" @click="exportSnapshot">快照</el-button>
|
|
<el-button :icon="FileUp" @click="openSnapshotImport">导入</el-button>
|
|
<el-button :icon="Download" @click="exportChecklist">导出</el-button>
|
|
<el-button :icon="RotateCcw" @click="resetDraft">重置</el-button>
|
|
<input
|
|
ref="snapshotInput"
|
|
class="hidden-file-input"
|
|
type="file"
|
|
accept="application/json,.json"
|
|
@change="importSnapshot"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="handoff-body">
|
|
<el-alert
|
|
title="仅记录现场联调准备和执行结果，不替代微信商户、合法域名或硬件实测验收。"
|
|
type="warning"
|
|
show-icon
|
|
:closable="false"
|
|
/>
|
|
<section class="handoff-session">
|
|
<el-form label-position="top">
|
|
<el-form-item label="联调批次">
|
|
<el-input
|
|
v-model="sessionMeta.batchNo"
|
|
placeholder="例如 2026-07-现场一轮"
|
|
@change="persistSessionMeta"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="现场/门店">
|
|
<el-input
|
|
v-model="sessionMeta.site"
|
|
placeholder="门店或现场位置"
|
|
@change="persistSessionMeta"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="负责人">
|
|
<el-input
|
|
v-model="sessionMeta.coordinator"
|
|
placeholder="现场负责人"
|
|
@change="persistSessionMeta"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="执行时间">
|
|
<el-input
|
|
v-model="sessionMeta.executedAt"
|
|
placeholder="YYYY-MM-DD HH:mm"
|
|
@change="persistSessionMeta"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</section>
|
|
<section class="handoff-category-progress">
|
|
<div v-for="item in categoryProgress" :key="item.category" class="handoff-category-row">
|
|
<div class="handoff-category-title">
|
|
<strong>{{ item.category }}</strong>
|
|
<span>{{ item.passed }}/{{ item.total }} 通过</span>
|
|
</div>
|
|
<el-progress
|
|
:percentage="item.passPercent"
|
|
:status="item.blocked > 0 ? 'exception' : item.passPercent === 100 ? 'success' : undefined"
|
|
/>
|
|
<div class="handoff-category-meta">
|
|
<span>阻断 {{ item.blocked }}</span>
|
|
<span>待处理 {{ item.pending }}</span>
|
|
<span>不适用 {{ item.skipped }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="handoff-verdict" :class="{ ready: handoffReady }">
|
|
<div>
|
|
<h3>{{ handoffReady ? '可进入现场验收收口' : '仍不可收口' }}</h3>
|
|
<p>
|
|
{{ handoffReady
|
|
? '全部现场检查项已通过或标记不适用，可进入真实商户、微信和硬件现场验收结果整理。'
|
|
: `仍有 ${pendingCount} 个待处理、${blockedCount} 个阻断项，需要继续处理。` }}
|
|
</p>
|
|
</div>
|
|
<el-button :icon="Copy" @click="copyVerdict">复制结论</el-button>
|
|
</section>
|
|
<section v-if="blockedItems.length" class="handoff-blockers">
|
|
<header>
|
|
<div>
|
|
<h3>阻断摘要</h3>
|
|
<span>{{ blockedItems.length }} 个现场阻断项需要外部处理</span>
|
|
</div>
|
|
<el-button :icon="Copy" @click="copyBlockedSummary">复制摘要</el-button>
|
|
</header>
|
|
<ul>
|
|
<li v-for="item in blockedItems" :key="item.id">
|
|
<strong>{{ item.category }} · {{ item.title }}</strong>
|
|
<span>{{ draft[item.id].owner || '未分派' }} / {{ draft[item.id].note || item.expected }}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<el-table :data="filteredChecklist" class="data-table" row-key="id">
|
|
<el-table-column prop="category" label="类别" width="120" />
|
|
<el-table-column prop="title" label="检查项" min-width="210">
|
|
<template #default="{ row }">
|
|
<div class="stack">
|
|
<strong>{{ row.title }}</strong>
|
|
<span>{{ row.expected }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" width="150">
|
|
<template #default="{ row }">
|
|
<el-select
|
|
v-model="draft[row.id].status"
|
|
size="small"
|
|
@change="persistDraft"
|
|
>
|
|
<el-option label="待处理" value="PENDING" />
|
|
<el-option label="通过" value="PASS" />
|
|
<el-option label="阻断" value="BLOCKED" />
|
|
<el-option label="不适用" value="SKIP" />
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="负责人" width="150">
|
|
<template #default="{ row }">
|
|
<el-input
|
|
v-model="draft[row.id].owner"
|
|
size="small"
|
|
placeholder="负责人"
|
|
@change="persistDraft"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="结果记录" min-width="230">
|
|
<template #default="{ row }">
|
|
<el-input
|
|
v-model="draft[row.id].note"
|
|
size="small"
|
|
placeholder="时间、流水、设备ID或阻断原因"
|
|
@change="persistDraft"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="evidence" label="证据" min-width="210" />
|
|
</el-table>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, ref } from 'vue';
|
|
import { Check, Copy, Download, FileDown, FileUp, ListChecks, RotateCcw } from '@lucide/vue';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
type FieldStatus = 'PENDING' | 'PASS' | 'BLOCKED' | 'SKIP';
|
|
|
|
interface HandoffItem {
|
|
id: string;
|
|
category: '商户' | '微信' | '转账' | '硬件';
|
|
title: string;
|
|
expected: string;
|
|
evidence: string;
|
|
}
|
|
|
|
interface HandoffDraft {
|
|
status: FieldStatus;
|
|
owner: string;
|
|
note: string;
|
|
}
|
|
|
|
interface SessionMeta {
|
|
batchNo: string;
|
|
site: string;
|
|
coordinator: string;
|
|
executedAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
const storageKey = 'qipai.cleaning.field-handoff';
|
|
const sessionStorageKey = 'qipai.cleaning.field-handoff.session';
|
|
const category = ref<'全部' | HandoffItem['category']>('全部');
|
|
const statusFilter = ref<'ALL' | FieldStatus>('ALL');
|
|
const snapshotInput = ref<HTMLInputElement | null>(null);
|
|
const bulkForm = reactive<{ status: FieldStatus; owner: string; note: string }>({
|
|
status: 'PASS',
|
|
owner: '',
|
|
note: ''
|
|
});
|
|
const checklist: HandoffItem[] = [
|
|
{
|
|
id: 'merchant-credential',
|
|
category: '商户',
|
|
title: '商户凭据引用',
|
|
expected: '确认 AppID、商户号、证书序列号、APIv3 Key 引用和平台证书均已配置。',
|
|
evidence: '后台微信转账预检 PASS 截图或导出 CSV'
|
|
},
|
|
{
|
|
id: 'merchant-scene',
|
|
category: '商户',
|
|
title: '商家转账场景报备',
|
|
expected: '微信后台场景 ID、报备材料和通知 URL 与生产配置一致。',
|
|
evidence: '场景 ID、通知 URL、微信后台审核状态'
|
|
},
|
|
{
|
|
id: 'wechat-domain',
|
|
category: '微信',
|
|
title: '小程序合法域名',
|
|
expected: 'request、uploadFile、downloadFile 均配置为 https://api.txyundm.cn。',
|
|
evidence: '体验版真机请求、上传保洁照片、下载图片成功记录'
|
|
},
|
|
{
|
|
id: 'wechat-openid',
|
|
category: '微信',
|
|
title: '保洁员 OpenID 绑定',
|
|
expected: '参与转账的保洁员均显示已绑微信，未绑定人员不得进入真实转账。',
|
|
evidence: '保洁员列表绑定状态和预检结果'
|
|
},
|
|
{
|
|
id: 'transfer-small-amount',
|
|
category: '转账',
|
|
title: '小额真实转账',
|
|
expected: '生产模式发起小额结算，返回待用户确认或成功状态并可主动同步。',
|
|
evidence: '结算单号、微信转账流水、同步结果'
|
|
},
|
|
{
|
|
id: 'transfer-notify',
|
|
category: '转账',
|
|
title: '微信回调入账',
|
|
expected: '微信商家转账通知可验签、解密并幂等更新结算单状态。',
|
|
evidence: '回调 traceId、结算单转账状态、重复通知结果'
|
|
},
|
|
{
|
|
id: 'hardware-door',
|
|
category: '硬件',
|
|
title: '订单权限开门',
|
|
expected: '有效订单本人在时间窗内开门成功，非本人或过期订单被拒绝。',
|
|
evidence: '订单号、DeviceID、命令 ID、门锁回包'
|
|
},
|
|
{
|
|
id: 'hardware-power',
|
|
category: '硬件',
|
|
title: '控电和插座联动',
|
|
expected: '订单开始/结束可下发控电、插座任务，异常回包进入补偿或告警。',
|
|
evidence: '控制箱通道、插座 DeviceID、ACK 和告警记录'
|
|
}
|
|
];
|
|
const categoryOptions = ['全部', '商户', '微信', '转账', '硬件'];
|
|
const draft = reactive<Record<string, HandoffDraft>>(createInitialDraft());
|
|
const sessionMeta = reactive<SessionMeta>(readSessionMeta());
|
|
|
|
const filteredChecklist = computed(() => checklist.filter((item) => {
|
|
const categoryMatched = category.value === '全部' || item.category === category.value;
|
|
const statusMatched = statusFilter.value === 'ALL' || draft[item.id].status === statusFilter.value;
|
|
return categoryMatched && statusMatched;
|
|
}));
|
|
const passedCount = computed(() => checklist.filter((item) => draft[item.id].status === 'PASS').length);
|
|
const blockedCount = computed(() => checklist.filter((item) => draft[item.id].status === 'BLOCKED').length);
|
|
const pendingCount = computed(() => checklist.filter((item) => draft[item.id].status === 'PENDING').length);
|
|
const blockedItems = computed(() => checklist.filter((item) => draft[item.id].status === 'BLOCKED'));
|
|
const checklistIds = new Set(checklist.map((item) => item.id));
|
|
const handoffReady = computed(() => pendingCount.value === 0 && blockedCount.value === 0);
|
|
const categoryProgress = computed(() => categoryOptions
|
|
.filter((item): item is HandoffItem['category'] => item !== '全部')
|
|
.map((item) => {
|
|
const items = checklist.filter((check) => check.category === item);
|
|
const passed = items.filter((check) => draft[check.id].status === 'PASS').length;
|
|
const blocked = items.filter((check) => draft[check.id].status === 'BLOCKED').length;
|
|
const pending = items.filter((check) => draft[check.id].status === 'PENDING').length;
|
|
const skipped = items.filter((check) => draft[check.id].status === 'SKIP').length;
|
|
return {
|
|
category: item,
|
|
total: items.length,
|
|
passed,
|
|
blocked,
|
|
pending,
|
|
skipped,
|
|
passPercent: items.length ? Math.round((passed / items.length) * 100) : 0
|
|
};
|
|
}));
|
|
|
|
function createInitialDraft() {
|
|
const saved = readSavedDraft();
|
|
return Object.fromEntries(checklist.map((item) => [
|
|
item.id,
|
|
saved[item.id] || { status: 'PENDING', owner: '', note: '' }
|
|
])) as Record<string, HandoffDraft>;
|
|
}
|
|
|
|
function readSavedDraft() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(storageKey) || '{}') as Record<string, HandoffDraft>;
|
|
} catch {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function persistDraft() {
|
|
touchSessionMeta();
|
|
localStorage.setItem(sessionStorageKey, JSON.stringify(sessionMeta));
|
|
localStorage.setItem(storageKey, JSON.stringify(draft));
|
|
}
|
|
|
|
function readSessionMeta(): SessionMeta {
|
|
try {
|
|
const saved = JSON.parse(localStorage.getItem(sessionStorageKey) || '{}') as Partial<SessionMeta>;
|
|
return {
|
|
batchNo: saved.batchNo || '',
|
|
site: saved.site || '',
|
|
coordinator: saved.coordinator || '',
|
|
executedAt: saved.executedAt || '',
|
|
updatedAt: saved.updatedAt || ''
|
|
};
|
|
} catch {
|
|
return { batchNo: '', site: '', coordinator: '', executedAt: '', updatedAt: '' };
|
|
}
|
|
}
|
|
|
|
function persistSessionMeta() {
|
|
touchSessionMeta();
|
|
localStorage.setItem(sessionStorageKey, JSON.stringify(sessionMeta));
|
|
}
|
|
|
|
function touchSessionMeta() {
|
|
sessionMeta.updatedAt = formatLocalMinute(new Date());
|
|
}
|
|
|
|
function resetDraft() {
|
|
for (const item of checklist) {
|
|
draft[item.id] = { status: 'PENDING', owner: '', note: '' };
|
|
}
|
|
touchSessionMeta();
|
|
persistDraft();
|
|
}
|
|
|
|
function applyBulkMark() {
|
|
for (const item of filteredChecklist.value) {
|
|
draft[item.id].status = bulkForm.status;
|
|
if (bulkForm.owner.trim()) draft[item.id].owner = bulkForm.owner.trim();
|
|
if (bulkForm.note.trim()) draft[item.id].note = bulkForm.note.trim();
|
|
}
|
|
persistDraft();
|
|
}
|
|
|
|
async function copyBlockedSummary() {
|
|
const header = [
|
|
`联调批次：${sessionMeta.batchNo || '未填写'}`,
|
|
`现场/门店：${sessionMeta.site || '未填写'}`,
|
|
`负责人：${sessionMeta.coordinator || '未填写'}`,
|
|
`执行时间：${sessionMeta.executedAt || '未填写'}`,
|
|
`最后更新：${sessionMeta.updatedAt || '未记录'}`
|
|
].join('\n');
|
|
const content = blockedItems.value.map((item) => {
|
|
const itemDraft = draft[item.id];
|
|
return `[${item.category}] ${item.title} - ${itemDraft.owner || '未分派'} - ${itemDraft.note || item.expected}`;
|
|
}).join('\n');
|
|
try {
|
|
await navigator.clipboard.writeText(`${header}\n\n${content}`);
|
|
ElMessage.success('阻断摘要已复制');
|
|
} catch {
|
|
ElMessage.warning('当前浏览器不允许自动复制，请使用导出 CSV 留存');
|
|
}
|
|
}
|
|
|
|
async function copyVerdict() {
|
|
const verdict = [
|
|
`联调批次：${sessionMeta.batchNo || '未填写'}`,
|
|
`现场/门店：${sessionMeta.site || '未填写'}`,
|
|
`负责人：${sessionMeta.coordinator || '未填写'}`,
|
|
`执行时间：${sessionMeta.executedAt || '未填写'}`,
|
|
`最后更新：${sessionMeta.updatedAt || '未记录'}`,
|
|
`结论：${handoffReady.value ? '可进入现场验收收口' : '仍不可收口'}`,
|
|
`统计：通过 ${passedCount.value}，阻断 ${blockedCount.value}，待处理 ${pendingCount.value}`
|
|
].join('\n');
|
|
try {
|
|
await navigator.clipboard.writeText(verdict);
|
|
ElMessage.success('联调结论已复制');
|
|
} catch {
|
|
ElMessage.warning('当前浏览器不允许自动复制，请使用导出 CSV 留存');
|
|
}
|
|
}
|
|
|
|
function exportChecklist() {
|
|
downloadCsv(`cleaning-field-handoff-${Date.now()}.csv`, [
|
|
['类别', '字段', '值', '', '', '', '', ''],
|
|
['session', '联调批次', sessionMeta.batchNo, '', '', '', '', ''],
|
|
['session', '现场/门店', sessionMeta.site, '', '', '', '', ''],
|
|
['session', '负责人', sessionMeta.coordinator, '', '', '', '', ''],
|
|
['session', '执行时间', sessionMeta.executedAt, '', '', '', '', ''],
|
|
['session', '最后更新', sessionMeta.updatedAt, '', '', '', '', ''],
|
|
['ID', '类别', '检查项', '期望', '状态', '负责人', '结果记录', '证据'],
|
|
...checklist.map((item) => [
|
|
item.id,
|
|
item.category,
|
|
item.title,
|
|
item.expected,
|
|
draft[item.id].status,
|
|
draft[item.id].owner,
|
|
draft[item.id].note,
|
|
item.evidence
|
|
])
|
|
]);
|
|
}
|
|
|
|
function exportSnapshot() {
|
|
const payload = {
|
|
schema: 'qipai.cleaning.field-handoff.snapshot.v1',
|
|
exportedAt: new Date().toISOString(),
|
|
sessionMeta,
|
|
draft
|
|
};
|
|
downloadText(
|
|
`cleaning-field-handoff-snapshot-${Date.now()}.json`,
|
|
JSON.stringify(payload, null, 2),
|
|
'application/json;charset=utf-8'
|
|
);
|
|
}
|
|
|
|
function openSnapshotImport() {
|
|
snapshotInput.value?.click();
|
|
}
|
|
|
|
async function importSnapshot(event: Event) {
|
|
const input = event.target as HTMLInputElement;
|
|
const file = input.files?.[0];
|
|
input.value = '';
|
|
if (!file) return;
|
|
try {
|
|
const payload = JSON.parse(await file.text()) as {
|
|
schema?: string;
|
|
sessionMeta?: Partial<SessionMeta>;
|
|
draft?: Record<string, Partial<HandoffDraft>>;
|
|
};
|
|
if (payload.schema !== 'qipai.cleaning.field-handoff.snapshot.v1' || !payload.draft) {
|
|
throw new Error('SNAPSHOT_SCHEMA_INVALID');
|
|
}
|
|
Object.assign(sessionMeta, {
|
|
batchNo: payload.sessionMeta?.batchNo || '',
|
|
site: payload.sessionMeta?.site || '',
|
|
coordinator: payload.sessionMeta?.coordinator || '',
|
|
executedAt: payload.sessionMeta?.executedAt || '',
|
|
updatedAt: payload.sessionMeta?.updatedAt || ''
|
|
});
|
|
for (const [id, value] of Object.entries(payload.draft)) {
|
|
if (!checklistIds.has(id)) continue;
|
|
const status = isFieldStatus(value.status) ? value.status : 'PENDING';
|
|
draft[id] = {
|
|
status,
|
|
owner: value.owner || '',
|
|
note: value.note || ''
|
|
};
|
|
}
|
|
touchSessionMeta();
|
|
persistSessionMeta();
|
|
persistDraft();
|
|
ElMessage.success('联调快照已导入');
|
|
} catch {
|
|
ElMessage.error('联调快照格式无效');
|
|
}
|
|
}
|
|
|
|
function isFieldStatus(value: unknown): value is FieldStatus {
|
|
return value === 'PENDING' || value === 'PASS' || value === 'BLOCKED' || value === 'SKIP';
|
|
}
|
|
|
|
function downloadCsv(filename: string, rows: string[][]) {
|
|
const content = rows.map((row) => row.map(csvCell).join(',')).join('\r\n');
|
|
downloadText(filename, `\uFEFF${content}`, 'text/csv;charset=utf-8');
|
|
}
|
|
|
|
function downloadText(filename: string, content: string, type: string) {
|
|
const blob = new Blob([content], { type });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = filename;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function formatLocalMinute(date: Date) {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hour = String(date.getHours()).padStart(2, '0');
|
|
const minute = String(date.getMinutes()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hour}:${minute}`;
|
|
}
|
|
|
|
function csvCell(value: string) {
|
|
const normalized = value.replace(/\r?\n/g, ' ');
|
|
return /[",\r\n]/.test(normalized) ? `"${normalized.replace(/"/g, '""')}"` : normalized;
|
|
}
|
|
</script>
|