feat(M08-B): 补现场联调清单
This commit is contained in:
Codex
@@ -0,0 +1,223 @@
|
||||
<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>
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<el-segmented v-model="category" :options="categoryOptions" />
|
||||
<el-button :icon="Download" @click="exportChecklist">导出</el-button>
|
||||
<el-button :icon="RotateCcw" @click="resetDraft">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="handoff-body">
|
||||
<el-alert
|
||||
title="仅记录现场联调准备和执行结果，不替代微信商户、合法域名或硬件实测验收。"
|
||||
type="warning"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<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 { Download, RotateCcw } from '@lucide/vue';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const storageKey = 'qipai.cleaning.field-handoff';
|
||||
const category = ref<'全部' | HandoffItem['category']>('全部');
|
||||
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 filteredChecklist = computed(() => category.value === '全部'
|
||||
? checklist
|
||||
: checklist.filter((item) => item.category === category.value));
|
||||
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);
|
||||
|
||||
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() {
|
||||
localStorage.setItem(storageKey, JSON.stringify(draft));
|
||||
}
|
||||
|
||||
function resetDraft() {
|
||||
for (const item of checklist) {
|
||||
draft[item.id] = { status: 'PENDING', owner: '', note: '' };
|
||||
}
|
||||
persistDraft();
|
||||
}
|
||||
|
||||
function exportChecklist() {
|
||||
downloadCsv(`cleaning-field-handoff-${Date.now()}.csv`, [
|
||||
['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 downloadCsv(filename: string, rows: string[][]) {
|
||||
const content = rows.map((row) => row.map(csvCell).join(',')).join('\r\n');
|
||||
const blob = new Blob([`\uFEFF${content}`], { type: 'text/csv;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function csvCell(value: string) {
|
||||
const normalized = value.replace(/\r?\n/g, ' ');
|
||||
return /[",\r\n]/.test(normalized) ? `"${normalized.replace(/"/g, '""')}"` : normalized;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user