308 lines
14 KiB
HTML
308 lines
14 KiB
HTML
{{define "pdd/list"}}
|
||
{{template "header" .}}
|
||
|
||
{{/* 三段式布局的第一段：顶部工具条。
|
||
和另外四个页面保持一致，见 docs/admin/05-ui-specification.md §2。 */}}
|
||
<div class="toolbar">
|
||
{{if .CurrentUser.IsAdmin}}<a class="button" href="/integrations/catalog">导入记录</a>{{end}}
|
||
{{/* 文案写全「添加 PDD 商品」：这条工具条上还有「创建采集任务」，
|
||
两个都以「创建」开头的话，第一次用的人分不清哪个是加商品、哪个是发起采集。 */}}
|
||
<button type="button" data-modal-open="create-modal">添加 PDD 商品</button>
|
||
<button type="button" data-modal-open="import-modal">批量导入</button>
|
||
|
||
{{/* 「创建采集任务」和「删除」用的是**同一个表单**，靠按钮上的
|
||
formaction 决定提交到哪个地址。这样表格里的勾选框只需要挂一份，
|
||
不用为每个操作各复制一套（复制出来的两套迟早会不同步）。 */}}
|
||
<form id="pdd-form" method="post" action="/pdd/collect" hidden></form>
|
||
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}" form="pdd-form">
|
||
{{/* 把当前筛选一起带过去，操作完还停在原来的筛选上 */}}
|
||
<input type="hidden" name="status" value="{{.StatusFilter}}" form="pdd-form">
|
||
<input type="hidden" name="q" value="{{.Keyword}}" form="pdd-form">
|
||
<input type="hidden" name="page" value="{{.CurrentPage}}" form="pdd-form">
|
||
<input type="hidden" name="page_size" value="{{.CurrentPageSize}}" form="pdd-form">
|
||
|
||
{{/* 文案是「创建采集任务」不是「采集」：点完只是排了个队，
|
||
真正去手机上采要等客户端来领，可能几秒也可能几分钟 */}}
|
||
<button type="button" data-modal-open="collect-modal" data-collect-open
|
||
data-collect-form="pdd-form"
|
||
data-need-checked>创建采集任务</button>
|
||
|
||
<form class="inline grow" method="get" action="/pdd">
|
||
<input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
|
||
<label for="status">采集状态</label>
|
||
<select id="status" name="status">
|
||
{{range .StatusOptions}}
|
||
<option value="{{.Value}}" {{if eq .Value $.StatusFilter}}selected{{end}}>{{.Text}}</option>
|
||
{{end}}
|
||
</select>
|
||
<label for="q">商品 ID/链接</label>
|
||
{{/* search-narrow 把这个框收到 30%，让「搜索」按钮能紧挨着它。
|
||
用类名而不是改 .toolbar input[type="text"]——那条规则被 5 个页面共用。 */}}
|
||
<input id="q" type="text" name="q" value="{{.Keyword}}"
|
||
class="search-narrow" placeholder="商品 ID 或链接的一部分">
|
||
<a class="button-link" href="/pdd?page_size={{.CurrentPageSize}}">清除</a>
|
||
<button type="submit">搜索</button>
|
||
</form>
|
||
|
||
<button type="submit" form="pdd-form" formaction="/pdd/delete" class="danger"
|
||
data-need-checked
|
||
data-confirm-delete="将删除 {n} 条记录。删除后重新创建同一链接可恢复，但采集结果会清空。"
|
||
>删除</button>
|
||
</div>
|
||
|
||
{{/* 导入结果紧跟工具条：采购员上传后先核对统计和错误，再决定是否发采集任务。 */}}
|
||
{{with .ImportResult}}
|
||
<section class="import-result" aria-labelledby="pdd-import-result-title" aria-live="polite">
|
||
<div class="import-result-head">
|
||
<div>
|
||
<h2 id="pdd-import-result-title">本次导入结果</h2>
|
||
<p>
|
||
总行数 <strong>{{.TotalRows}}</strong> ·
|
||
新建 <strong>{{.CreatedCount}}</strong> ·
|
||
已存在 <strong>{{.ExistingCount}}</strong> ·
|
||
恢复 <strong>{{.RevivedCount}}</strong> ·
|
||
文件内重复 <strong>{{.DuplicateCount}}</strong> ·
|
||
失败 <strong>{{len .Failures}}</strong>
|
||
</p>
|
||
</div>
|
||
{{if .GoodsIDs}}
|
||
<button type="button" class="primary" data-modal-open="import-collect-modal"
|
||
data-collect-open data-collect-form="pdd-import-collect-form"
|
||
data-collect-count-value="{{len .GoodsIDs}}">
|
||
为本次导入商品创建采集任务
|
||
</button>
|
||
{{end}}
|
||
</div>
|
||
<p class="hint">
|
||
上传只建立商品档案，不会自动采集。创建任务时，已采集或正在采集的商品仍按现有规则跳过。
|
||
</p>
|
||
|
||
<form id="pdd-import-collect-form" method="post" action="/pdd/collect" hidden>
|
||
<input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
|
||
{{range .GoodsIDs}}<input type="hidden" name="ids" value="{{.}}">{{end}}
|
||
</form>
|
||
|
||
{{if .Failures}}
|
||
<div class="table-wrap import-failure-table" role="region" aria-label="PDD 导入失败明细" tabindex="0">
|
||
<table>
|
||
<thead>
|
||
<tr><th>Excel 行号</th><th>原始内容</th><th>失败原因与处理建议</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{{range .Failures}}
|
||
<tr class="row-warn">
|
||
<td>{{.Row}}</td>
|
||
<td class="import-raw">{{.Raw}}</td>
|
||
<td class="import-reason">{{.Reason}}</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{{else}}
|
||
<p class="import-success">所有非空数据行均已处理，没有失败行。</p>
|
||
{{end}}
|
||
</section>
|
||
{{end}}
|
||
|
||
{{/* 第二段：表格。双击一行打开弹窗，见 static/js/app.js */}}
|
||
<div class="table-wrap" id="pddProductPage">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="col-check"><input type="checkbox" data-check-all></th>
|
||
<th>商品 ID</th>
|
||
<th>标题</th>
|
||
<th>店铺</th>
|
||
<th>PDD 链接</th>
|
||
<th>采集状态</th>
|
||
{{/* 采到 1 个和采到 20 个差别很大：只采到 1 个通常是没点开规格面板，
|
||
说明这次采集有问题。这一列就是为了让它一眼能看出来 */}}
|
||
<th>规格数</th>
|
||
<th>采集时间</th>
|
||
<th>更新时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{{range .Rows}}
|
||
<tr data-detail-id="{{.ID}}" {{if .IsFailed}}class="row-warn"{{end}}>
|
||
<td class="col-check">
|
||
{{/* 勾选框的值是 goods_id：删除和建采集任务都按它定位。
|
||
form 属性把它挂到工具条里那个表单上 */}}
|
||
<input type="checkbox" value="{{.GoodsID}}" name="ids" form="pdd-form"
|
||
aria-label="选择商品 {{.GoodsID}}">
|
||
</td>
|
||
<td>{{.GoodsID}}</td>
|
||
<td class="truncate" title="{{.Title}}">{{.Title}}</td>
|
||
<td class="truncate" title="{{.ShopName}}">{{.ShopName}}</td>
|
||
<td class="truncate">
|
||
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer" title="{{.URL}}">{{.URL}}</a>
|
||
</td>
|
||
{{/* 状态是中文文字，不能只靠颜色区分 */}}
|
||
<td>{{.StatusText}}{{if .CollectMsg}}<br><small class="missing">{{.CollectMsg}}</small>{{end}}</td>
|
||
<td>{{.SkuCountText}}</td>
|
||
<td>{{.CollectedAt}}</td>
|
||
<td>{{.UpdatedAt}}</td>
|
||
</tr>
|
||
{{else}}
|
||
{{/* 空状态要分情况：从没建过 和 筛选没结果，下一步动作完全不同 */}}
|
||
<tr class="empty">
|
||
<td colspan="9">
|
||
{{if .IsFiltered}}
|
||
当前筛选条件下没有商品。<br>
|
||
<small>换个采集状态或清空搜索词再试。<a href="/pdd?page_size={{.CurrentPageSize}}">查看全部</a></small>
|
||
{{else}}
|
||
还没有 PDD 商品。<br>
|
||
<small>点左上角「添加 PDD 商品」粘贴单条链接，或用「批量导入」上传 Excel。</small>
|
||
{{end}}
|
||
</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p class="hint">
|
||
双击任意一行可以查看和编辑这个商品，包括采回来的规格和价格。
|
||
</p>
|
||
|
||
{{/* ── 创建弹窗 ─────────────────────────────────
|
||
内容是固定的（只有一个输入框），所以直接写在页面里藏着，
|
||
不像编辑弹窗那样要去服务端取。 */}}
|
||
<div class="modal-backdrop" id="create-modal" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="create-modal-title">
|
||
<div class="modal-head">
|
||
<h2 id="create-modal-title">创建 PDD 商品</h2>
|
||
<button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
|
||
</div>
|
||
<form method="post" action="/pdd/create">
|
||
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
||
<input type="hidden" name="status" value="{{.StatusFilter}}">
|
||
<input type="hidden" name="q" value="{{.Keyword}}">
|
||
<input type="hidden" name="page" value="{{.CurrentPage}}">
|
||
<input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
|
||
<div class="modal-body">
|
||
<div class="field">
|
||
<label for="create-url">PDD 链接</label>
|
||
<input id="create-url" type="text" name="url" required autocomplete="off"
|
||
placeholder="https://mobile.yangkeduo.com/goods.html?goods_id=737116531267">
|
||
</div>
|
||
<p class="hint">
|
||
只需要链接，标题和规格由客户端采集后自动回填。<br>
|
||
链接里必须带 <code>goods_id=</code>，短链接不行——请在拼多多 App
|
||
的商品页点「分享」→「复制链接」。
|
||
</p>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button type="button" data-modal-close>取消</button>
|
||
<button type="submit" class="primary">保存</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{{/* ── 批量导入弹窗 ─────────────────────────────── */}}
|
||
<div class="modal-backdrop" id="import-modal" hidden>
|
||
<div class="modal modal-narrow" role="dialog" aria-modal="true" aria-labelledby="import-modal-title">
|
||
<div class="modal-head">
|
||
<h2 id="import-modal-title">批量导入 PDD 链接</h2>
|
||
<button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
|
||
</div>
|
||
<form method="post" action="/pdd/import" enctype="multipart/form-data" data-upload-form>
|
||
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
||
<input type="hidden" name="page_size" value="{{.CurrentPageSize}}">
|
||
<div class="modal-body">
|
||
<div class="field">
|
||
<label for="pdd-import-file">Excel 文件</label>
|
||
<input id="pdd-import-file" type="file" name="file" accept=".xlsx" required autofocus
|
||
aria-describedby="pdd-import-help">
|
||
</div>
|
||
<p class="hint" id="pdd-import-help">
|
||
仅支持不超过 10MB 的 <code>.xlsx</code>。第一个非空工作表第一列的表头必须是
|
||
“拼多多链接”，每行填写一个带 <code>goods_id=</code> 的完整链接，最多 5000 条；
|
||
空工作表和空行会自动忽略。
|
||
</p>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button type="button" data-modal-close>取消</button>
|
||
<button type="submit" class="primary" data-upload-submit>开始导入</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{{/* ── 批量采集确认弹窗 ─────────────────────────
|
||
客户端是可选项，默认留空。服务端仍会按当前账号重新校验候选范围。 */}}
|
||
<div class="modal-backdrop" id="collect-modal" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="collect-modal-title">
|
||
<div class="modal-head">
|
||
<h2 id="collect-modal-title">创建采集任务</h2>
|
||
<button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>将为已选择的 <strong data-collect-count>0</strong> 个商品创建采集任务。</p>
|
||
<div class="field">
|
||
<label for="collect-client">执行客户端</label>
|
||
<select id="collect-client" name="client_id" form="pdd-form" autofocus>
|
||
<option value="">不指定（任意客户端可领取）</option>
|
||
{{range .AssignableClients}}
|
||
<option value="{{.ClientID}}">{{.Name}}（{{.ClientID}}，{{.Status}}）</option>
|
||
{{end}}
|
||
</select>
|
||
</div>
|
||
<p class="hint">
|
||
通常保持默认即可。指定后，任务只等待该客户端领取；客户端离线时不会自动改派。
|
||
</p>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button type="button" data-modal-close>取消</button>
|
||
<button type="submit" form="pdd-form" formaction="/pdd/collect" class="primary"
|
||
data-collect-submit>确认创建</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{/* ── 本次导入商品的采集确认弹窗 ─────────────────
|
||
IDs 来自刚完成的服务端导入结果，不受当前页分页影响。 */}}
|
||
{{with .ImportResult}}{{if .GoodsIDs}}
|
||
<div class="modal-backdrop" id="import-collect-modal" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="import-collect-modal-title">
|
||
<div class="modal-head">
|
||
<h2 id="import-collect-modal-title">为本次导入商品创建采集任务</h2>
|
||
<button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>将按现有状态规则处理本次导入的 <strong data-collect-count>{{len .GoodsIDs}}</strong> 个商品。</p>
|
||
<div class="field">
|
||
<label for="import-collect-client">执行客户端</label>
|
||
<select id="import-collect-client" name="client_id" form="pdd-import-collect-form" autofocus>
|
||
<option value="">不指定（任意客户端可领取）</option>
|
||
{{range $.AssignableClients}}
|
||
<option value="{{.ClientID}}">{{.Name}}（{{.ClientID}}，{{.Status}}）</option>
|
||
{{end}}
|
||
</select>
|
||
</div>
|
||
<p class="hint">
|
||
上传本身没有创建任务。确认后才会建任务；已采集、正在采集和重复项会分别统计并跳过。
|
||
</p>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button type="button" data-modal-close>取消</button>
|
||
<button type="submit" form="pdd-import-collect-form" class="primary"
|
||
data-collect-submit>确认创建</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}{{end}}
|
||
|
||
{{/* ── 编辑弹窗的壳子 ───────────────────────────
|
||
里面的内容双击行时由 /pdd/detail 返回，前端只负责放进来和显示。 */}}
|
||
<div class="modal-backdrop" id="detail-modal" data-detail-url="{{.DetailURL}}" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" data-detail-slot>
|
||
<div class="modal-body">正在加载…</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{template "footer" .}}
|
||
{{end}}
|