feat(shopro_wechat_trade): 微信同步页面优化及数据格式化功能

- 新增formatListItem方法对同步记录数据进行格式化处理,
  包括同步类型、状态、发货模式和错误信息的中文映射
- 实现统计项点击筛选功能,添加高亮状态指示器
- 重构前端JavaScript代码,使用预格式化数据字段提升显示性能
- 添加详情弹窗功能,支持查看完整的同步请求响应内容
- 优化重试按钮交互,增加确认提示防止误操作
- 更新页面布局样式,改善用户界面体验
```
这个提交包含在:
可乐加冰
2026-10-08 15:49:33 +08:00
父节点 35762c67e6
当前提交 bf1f525545
共有 6 个文件被更改,包括 503 次插入 和 142 次删除

查看文件

@@ -40,6 +40,49 @@ class Sync extends Backend
return $stats;
}
protected function formatListItem(array $row)
{
$typeMap = [
'shipping' => '发货同步',
'confirm' => '确认收货同步',
];
$row['sync_type_text'] = $typeMap[$row['sync_type'] ?? ''] ?? ($row['sync_type'] ?? '-');
$status = $row['status'] ?? '';
$retryCount = intval($row['retry_count'] ?? 0);
if ($status === 'success') {
$row['status_text'] = '成功';
} elseif ($status === 'failed') {
$row['status_text'] = '失败';
} elseif ($status === 'pending') {
$row['status_text'] = $retryCount > 0 ? '待重试' : '处理中';
} else {
$row['status_text'] = $status ?: '-';
}
if (($row['sync_type'] ?? '') !== 'shipping') {
$row['delivery_mode_text'] = '-';
} else {
$modeMap = [1 => '统一发货', 2 => '分拆发货'];
$row['delivery_mode_text'] = $modeMap[intval($row['delivery_mode'] ?? 0)] ?? ('模式' . $row['delivery_mode']);
}
if ($status === 'success') {
$row['error_text'] = '-';
} else {
$parts = [];
if ($row['errcode'] !== null && $row['errcode'] !== '') {
$parts[] = '[' . $row['errcode'] . ']';
}
if (!empty($row['errmsg'])) {
$parts[] = $row['errmsg'];
}
$row['error_text'] = $parts ? implode(' ', $parts) : '-';
}
return $row;
}
public function index()
{
if ($this->request->isAjax()) {
@@ -52,6 +95,9 @@ class Sync extends Backend
$query = $this->buildQuery($status, $syncType, $orderSn)->order('id', 'desc');
$total = (clone $query)->count();
$list = $query->page($page, $limit)->select();
foreach ($list as $key => $row) {
$list[$key] = $this->formatListItem($row);
}
return json(['total' => $total, 'rows' => $list]);
}
@@ -67,7 +113,7 @@ class Sync extends Backend
if (!$row) {
$this->error('记录不存在');
}
$this->success('', null, $row);
$this->success('', null, $this->formatListItem($row));
}
public function retry()

查看文件

@@ -24,7 +24,11 @@
font-size: 13px;
background: #f5f7fa;
color: #606266;
cursor: pointer;
border: 1px solid transparent;
user-select: none;
}
.wx-sync-page .stat-item:hover { opacity: 0.85; }
.wx-sync-page .stat-item .num {
font-weight: 600;
margin-left: 4px;
@@ -32,15 +36,19 @@
.wx-sync-page .stat-success { background: #f0f9eb; color: #67c23a; }
.wx-sync-page .stat-pending { background: #fdf6ec; color: #e6a23c; }
.wx-sync-page .stat-failed { background: #fef0f0; color: #f56c6c; }
.wx-sync-page .toolbar-row {
.wx-sync-page .stat-item-active {
border-color: currentColor;
box-shadow: 0 0 0 1px currentColor inset;
}
.wx-sync-page .filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.wx-sync-page .toolbar-row .form-control { width: auto; min-width: 140px; }
.wx-sync-page .toolbar-row .order-sn-input { min-width: 220px; }
.wx-sync-page .filter-bar .form-control { width: auto; min-width: 140px; }
.wx-sync-page .filter-bar .order-sn-input { min-width: 220px; }
.wx-sync-detail pre {
max-height: 280px;
overflow: auto;
@@ -70,34 +78,34 @@
<div class="panel-body">
<div class="page-tip">
<strong>说明:</strong>本页展示商城向微信「发货信息管理服务」同步的记录,包括
<strong>发货同步</strong>(upload_shipping_info)与<strong>确认收货同步</strong>(notify_confirm_receive)。
<strong>发货同步</strong>与<strong>确认收货同步</strong>。
「同步成功」仅表示微信接口返回成功,<strong>不代表</strong>商城订单状态;订单实际状态请到「订单管理」查看。
失败记录会按配置自动重试,也可在此手动重试。
</div>
<div class="stats-bar">
<span class="stat-item">全部<span class="num">{$stats.total|default=0}</span></span>
<span class="stat-item stat-success">成功<span class="num">{$stats.success|default=0}</span></span>
<span class="stat-item stat-pending">待重试/处理中<span class="num">{$stats.pending|default=0}</span></span>
<span class="stat-item stat-failed">失败<span class="num">{$stats.failed|default=0}</span></span>
<span class="stat-item stat-all stat-item-active" data-status="">全部<span class="num">{$stats.total|default=0}</span></span>
<span class="stat-item stat-success" data-status="success">成功<span class="num">{$stats.success|default=0}</span></span>
<span class="stat-item stat-pending" data-status="pending">待重试/处理中<span class="num">{$stats.pending|default=0}</span></span>
<span class="stat-item stat-failed" data-status="failed">失败<span class="num">{$stats.failed|default=0}</span></span>
</div>
<div id="toolbar" class="toolbar toolbar-row">
<select id="status-filter" class="form-control">
<div id="wx-sync-filter-bar" class="filter-bar">
<select id="wx-sync-status-filter" class="form-control">
<option value="">全部状态</option>
<option value="success">成功</option>
<option value="pending">待重试/处理中</option>
<option value="failed">失败</option>
</select>
<select id="type-filter" class="form-control">
<select id="wx-sync-type-filter" class="form-control">
<option value="">全部类型</option>
<option value="shipping">发货同步</option>
<option value="confirm">确认收货同步</option>
</select>
<input type="text" id="order-sn-filter" class="form-control order-sn-input" placeholder="搜索订单号">
<button type="button" class="btn btn-primary btn-search"><i class="fa fa-search"></i> 搜索</button>
<button type="button" class="btn btn-default btn-reset">重置</button>
<button type="button" class="btn btn-warning btn-filter-failed">仅看失败</button>
<input type="text" id="wx-sync-order-sn-filter" class="form-control order-sn-input" placeholder="搜索订单号">
<button type="button" id="wx-sync-btn-search" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
<button type="button" id="wx-sync-btn-reset" class="btn btn-default">重置</button>
<button type="button" id="wx-sync-btn-failed" class="btn btn-warning">仅看失败</button>
</div>
<table id="table" class="table table-striped table-bordered table-hover" width="100%"></table>
</div>

查看文件

@@ -13,55 +13,44 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
return $('<div/>').text(text == null ? '' : text).html();
}
function formatSyncType(value) {
var text = SYNC_TYPE_MAP[value] || value || '-';
if (value === 'shipping') {
return '<span class="label label-info">' + text + '</span>';
function formatSyncTypeBadge(row) {
var key = row.sync_type || '';
var text = row.sync_type_text || SYNC_TYPE_MAP[key] || key || '-';
if (key === 'shipping') {
return '<span class="label label-info">' + escapeHtml(text) + '</span>';
}
if (value === 'confirm') {
return '<span class="label label-primary">' + text + '</span>';
if (key === 'confirm') {
return '<span class="label label-primary">' + escapeHtml(text) + '</span>';
}
return text;
return escapeHtml(text);
}
function formatStatus(row) {
var status = row.status;
var retryCount = parseInt(row.retry_count, 10) || 0;
function formatStatusBadge(row) {
var text = row.status_text || '';
var status = row.status || '';
if (!text) {
var retryCount = parseInt(row.retry_count, 10) || 0;
if (status === 'success') {
text = '成功';
} else if (status === 'failed') {
text = '失败';
} else if (status === 'pending') {
text = retryCount > 0 ? '待重试' : '处理中';
} else {
text = status || '-';
}
}
if (status === 'success') {
return '<span class="label label-success">成功</span>';
return '<span class="label label-success">' + escapeHtml(text) + '</span>';
}
if (status === 'failed') {
return '<span class="label label-danger">失败</span>';
return '<span class="label label-danger">' + escapeHtml(text) + '</span>';
}
if (status === 'pending') {
if (retryCount > 0) {
return '<span class="label label-warning">待重试</span>';
}
return '<span class="label label-default">处理中</span>';
var pendingClass = (parseInt(row.retry_count, 10) || 0) > 0 ? 'label-warning' : 'label-default';
return '<span class="label ' + pendingClass + '">' + escapeHtml(text) + '</span>';
}
return status || '-';
}
function formatDeliveryMode(value, row) {
if (row.sync_type !== 'shipping') {
return '<span class="text-muted">-</span>';
}
var text = DELIVERY_MODE_MAP[value] || ('模式' + value);
return text;
}
function formatErrorInfo(value, row) {
if (row.status === 'success') {
return '<span class="text-muted">-</span>';
}
var parts = [];
if (row.errcode !== null && row.errcode !== undefined && row.errcode !== '') {
parts.push('[' + row.errcode + ']');
}
if (row.errmsg) {
parts.push(row.errmsg);
}
return parts.length ? escapeHtml(parts.join(' ')) : '<span class="text-muted">-</span>';
return escapeHtml(text);
}
function formatJsonText(raw) {
@@ -81,6 +70,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
var Controller = {
index: function () {
var $page = $('.wx-sync-page');
var $statusFilter = $('#wx-sync-status-filter');
var $typeFilter = $('#wx-sync-type-filter');
var $orderSnFilter = $('#wx-sync-order-sn-filter');
Table.api.init({
extend: {
index_url: 'shopro_wechat_trade/sync/index',
@@ -88,7 +82,22 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
}
});
var table = $("#table");
var table = $('#table');
function highlightStat(status) {
$page.find('.stat-item').removeClass('stat-item-active');
$page.find('.stat-item[data-status="' + (status || '') + '"]').addClass('stat-item-active');
}
function refreshTable() {
table.bootstrapTable('refresh', { pageNumber: 1 });
}
function applyStatusFilter(status) {
$statusFilter.val(status || '');
highlightStat(status || '');
refreshTable();
}
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
@@ -99,9 +108,9 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
commonSearch: false,
showExport: false,
queryParams: function (params) {
params.status = $('#status-filter').val();
params.sync_type = $('#type-filter').val();
params.order_sn = $.trim($('#order-sn-filter').val());
params.status = $statusFilter.val();
params.sync_type = $typeFilter.val();
params.order_sn = $.trim($orderSnFilter.val());
return params;
},
columns: [
@@ -120,31 +129,39 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
}
},
{
field: 'sync_type',
title: '同步类型',
formatter: function (value) {
return formatSyncType(value);
}
},
{
field: 'status',
title: '同步状态',
field: 'sync_type_text',
title: '类型',
escape: false,
formatter: function (value, row) {
return formatStatus(row);
return formatSyncTypeBadge(row);
}
},
{
field: 'delivery_mode',
field: 'status_text',
title: '状态',
escape: false,
formatter: function (value, row) {
return formatStatusBadge(row);
}
},
{
field: 'delivery_mode_text',
title: '发货模式',
formatter: function (value, row) {
return formatDeliveryMode(value, row);
if ((row.sync_type || '') !== 'shipping') {
return '<span class="text-muted">-</span>';
}
return escapeHtml(value || '-');
}
},
{
field: 'errmsg',
field: 'error_text',
title: '错误信息',
formatter: function (value, row) {
return formatErrorInfo(value, row);
if (row.status === 'success' || value === '-') {
return '<span class="text-muted">-</span>';
}
return escapeHtml(value || '-');
}
},
{
@@ -167,6 +184,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
field: 'operate',
title: '操作',
width: 140,
escape: false,
table: table,
events: Table.api.events.operate,
formatter: function (value, row) {
@@ -181,36 +199,46 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
]
});
function refreshTable() {
table.bootstrapTable('refresh');
}
$page.on('click', '.stat-item', function () {
applyStatusFilter($(this).data('status') || '');
});
$('#status-filter, #type-filter').on('change', refreshTable);
$statusFilter.on('change', function () {
highlightStat($(this).val() || '');
refreshTable();
});
$('.btn-search').on('click', refreshTable);
$typeFilter.on('change', refreshTable);
$('#order-sn-filter').on('keypress', function (e) {
$page.on('click', '#wx-sync-btn-search', function (e) {
e.preventDefault();
refreshTable();
});
$page.on('click', '#wx-sync-btn-reset', function (e) {
e.preventDefault();
$statusFilter.val('');
$typeFilter.val('');
$orderSnFilter.val('');
highlightStat('');
refreshTable();
});
$page.on('click', '#wx-sync-btn-failed', function (e) {
e.preventDefault();
applyStatusFilter('failed');
$typeFilter.val('');
});
$orderSnFilter.on('keypress', function (e) {
if (e.which === 13) {
e.preventDefault();
refreshTable();
}
});
$('.btn-reset').on('click', function () {
$('#status-filter').val('');
$('#type-filter').val('');
$('#order-sn-filter').val('');
refreshTable();
});
$('.btn-filter-failed').on('click', function () {
$('#status-filter').val('failed');
$('#type-filter').val('');
refreshTable();
});
table.on('click', '.btn-order', function () {
var orderId = $(this).data('id');
Fast.api.open('shopro/order/order/detail?id=' + orderId, '订单详情');
Fast.api.open('shopro/order/order/detail?id=' + $(this).data('id'), '订单详情');
});
table.on('click', '.btn-retry', function () {
@@ -235,10 +263,10 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
var $tpl = $('#sync-detail-template').clone().removeAttr('id').removeClass('hide');
$tpl.find('.detail-id').text(row.id || '-');
$tpl.find('.detail-order-sn').text(row.order_sn || '-');
$tpl.find('.detail-sync-type').html(formatSyncType(row.sync_type));
$tpl.find('.detail-status').html(formatStatus(row));
$tpl.find('.detail-sync-type').html(formatSyncTypeBadge(row));
$tpl.find('.detail-status').html(formatStatusBadge(row));
if (row.sync_type === 'shipping') {
$tpl.find('.detail-delivery-mode').text(DELIVERY_MODE_MAP[row.delivery_mode] || ('模式' + row.delivery_mode));
$tpl.find('.detail-delivery-mode').text(row.delivery_mode_text || DELIVERY_MODE_MAP[row.delivery_mode] || '-');
$tpl.find('.detail-delivery-mode-row').show();
} else {
$tpl.find('.detail-delivery-mode-row').hide();
@@ -247,14 +275,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
if (row.status === 'success') {
$tpl.find('.detail-error-row').hide();
} else {
var errParts = [];
if (row.errcode !== null && row.errcode !== undefined && row.errcode !== '') {
errParts.push('[' + row.errcode + ']');
}
if (row.errmsg) {
errParts.push(row.errmsg);
}
$tpl.find('.detail-error').text(errParts.join(' ') || '-');
$tpl.find('.detail-error').text(row.error_text && row.error_text !== '-' ? row.error_text : '-');
$tpl.find('.detail-error-row').show();
}
$tpl.find('.detail-create').text(formatDatetime(row.createtime));