feat(frontend): unify fulfillment admin UI

This commit is contained in:
yml2213
2026-05-16 12:31:17 +08:00
parent b47848214a
commit 201179d33f
2 changed files with 263 additions and 295 deletions
@@ -616,13 +616,9 @@ onMounted(loadConfigs)
</div> </div>
<span class="binding-subtle">{{ getBindingSummary(binding) }}</span> <span class="binding-subtle">{{ getBindingSummary(binding) }}</span>
</div> </div>
<button <el-button link type="primary" @click="toggleBindingCollapsed(binding.id)">
class="collapse-button"
type="button"
@click="toggleBindingCollapsed(binding.id)"
>
{{ isBindingCollapsed(binding.id) ? '展开' : '折叠' }} {{ isBindingCollapsed(binding.id) ? '展开' : '折叠' }}
</button> </el-button>
</div> </div>
<div v-if="isBindingCollapsed(binding.id)" class="binding-collapsed-preview"> <div v-if="isBindingCollapsed(binding.id)" class="binding-collapsed-preview">
@@ -646,7 +642,7 @@ onMounted(loadConfigs)
<div v-else class="binding-grid"> <div v-else class="binding-grid">
<label class="field-block"> <label class="field-block">
<span>渠道</span> <span>渠道</span>
<input <el-input
v-model="binding.provider" v-model="binding.provider"
class="text-input" class="text-input"
placeholder="agiso" placeholder="agiso"
@@ -656,7 +652,7 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>平台</span> <span>平台</span>
<input <el-input
v-model="binding.platform" v-model="binding.platform"
class="text-input" class="text-input"
placeholder="xianyu / taobao / pdd" placeholder="xianyu / taobao / pdd"
@@ -666,12 +662,10 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>店铺 ID</span> <span>店铺 ID</span>
<input <el-input
v-model="binding.shopId" v-model="binding.shopId"
:class="[ :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'shopId') }]"
'text-input', class="text-input"
{ 'text-input--invalid': isFieldInvalid(binding.id, 'shopId') },
]"
data-field="shopId" data-field="shopId"
placeholder="留空表示跨店铺通用" placeholder="留空表示跨店铺通用"
@input="clearValidationState" @input="clearValidationState"
@@ -680,7 +674,7 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>店铺名称</span> <span>店铺名称</span>
<input <el-input
v-model="binding.shopName" v-model="binding.shopName"
class="text-input" class="text-input"
placeholder="用于保存和识别店铺" placeholder="用于保存和识别店铺"
@@ -690,23 +684,23 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>优先级</span> <span>优先级</span>
<input <el-input-number
v-model.number="binding.priority" v-model="binding.priority"
class="text-input" class="text-input"
type="number" :min="1"
min="1" controls-position="right"
@input="clearValidationState" @change="clearValidationState"
/> />
</label> </label>
<label class="field-block"> <label class="field-block">
<span>外部 SKU 编码</span> <span>外部 SKU 编码</span>
<input <el-input
v-model="binding.externalSkuCode" v-model="binding.externalSkuCode"
:class="[ :class="[
'text-input',
{ 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuCode') }, { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuCode') },
]" ]"
class="text-input"
data-field="externalSkuCode" data-field="externalSkuCode"
placeholder="例如 6046726460016" placeholder="例如 6046726460016"
@input="clearValidationState" @input="clearValidationState"
@@ -715,12 +709,10 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>外部商品 ID</span> <span>外部商品 ID</span>
<input <el-input
v-model="binding.externalItemId" v-model="binding.externalItemId"
:class="[ :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'externalItemId') }]"
'text-input', class="text-input"
{ 'text-input--invalid': isFieldInvalid(binding.id, 'externalItemId') },
]"
data-field="externalItemId" data-field="externalItemId"
placeholder="例如 1033324289962" placeholder="例如 1033324289962"
@input="clearValidationState" @input="clearValidationState"
@@ -729,12 +721,12 @@ onMounted(loadConfigs)
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>外部商品名</span> <span>外部商品名</span>
<input <el-input
v-model="binding.externalSkuName" v-model="binding.externalSkuName"
:class="[ :class="[
'text-input',
{ 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuName') }, { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuName') },
]" ]"
class="text-input"
data-field="externalSkuName" data-field="externalSkuName"
placeholder="例如 奥利奥动作" placeholder="例如 奥利奥动作"
@input="clearValidationState" @input="clearValidationState"
@@ -743,12 +735,10 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>内部履约 SKU</span> <span>内部履约 SKU</span>
<input <el-input
v-model="binding.skuCode" v-model="binding.skuCode"
:class="[ :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'skuCode') }]"
'text-input', class="text-input"
{ 'text-input--invalid': isFieldInvalid(binding.id, 'skuCode') },
]"
data-field="skuCode" data-field="skuCode"
placeholder="例如 sjz_hdl_test01" placeholder="例如 sjz_hdl_test01"
@input="clearValidationState" @input="clearValidationState"
@@ -760,7 +750,7 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>内部商品名</span> <span>内部商品名</span>
<input <el-input
v-model="binding.skuName" v-model="binding.skuName"
class="text-input" class="text-input"
placeholder="用于后台展示" placeholder="用于后台展示"
@@ -770,24 +760,25 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>履约方式</span> <span>履约方式</span>
<select <el-select
v-model="binding.profileKey" v-model="binding.profileKey"
:class="[ :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'profileKey') }]"
'text-input', class="text-input"
{ 'text-input--invalid': isFieldInvalid(binding.id, 'profileKey') },
]"
data-field="profileKey" data-field="profileKey"
@change="clearValidationState" @change="clearValidationState"
> >
<option v-for="item in PROFILE_OPTIONS" :key="item.value" :value="item.value"> <el-option
{{ item.label }} v-for="item in PROFILE_OPTIONS"
</option> :key="item.value"
</select> :label="item.label"
:value="item.value"
/>
</el-select>
</label> </label>
<label class="field-block"> <label class="field-block">
<span>匹配后展示名</span> <span>匹配后展示名</span>
<input <el-input
v-model="binding.resolvedSkuName" v-model="binding.resolvedSkuName"
class="text-input" class="text-input"
placeholder="例如 三角洲行动-自动领取" placeholder="例如 三角洲行动-自动领取"
@@ -801,10 +792,7 @@ onMounted(loadConfigs)
</p> </p>
<div class="binding-actions"> <div class="binding-actions">
<label class="checkbox-line"> <el-checkbox v-model="binding.enabled">启用规则</el-checkbox>
<input v-model="binding.enabled" type="checkbox" />
<span>启用规则</span>
</label>
<el-button link type="danger" @click="removeBinding(binding.id)">删除</el-button> <el-button link type="danger" @click="removeBinding(binding.id)">删除</el-button>
</div> </div>
</div> </div>
@@ -822,17 +810,17 @@ onMounted(loadConfigs)
<div class="lookup-toolbar"> <div class="lookup-toolbar">
<label class="field-block"> <label class="field-block">
<span>渠道</span> <span>渠道</span>
<input class="text-input" value="agiso" disabled /> <el-input class="text-input" model-value="agiso" disabled />
</label> </label>
<label class="field-block"> <label class="field-block">
<span>平台</span> <span>平台</span>
<input class="text-input" value="xianyu" disabled /> <el-input class="text-input" model-value="xianyu" disabled />
</label> </label>
<label class="field-block"> <label class="field-block">
<span>店铺 ID</span> <span>店铺 ID</span>
<input <el-input
v-model="lookupForm.shopId" v-model="lookupForm.shopId"
class="text-input" class="text-input"
placeholder="例如 252609" placeholder="例如 252609"
@@ -842,7 +830,7 @@ onMounted(loadConfigs)
<label class="field-block"> <label class="field-block">
<span>平台订单号</span> <span>平台订单号</span>
<input <el-input
v-model="lookupForm.platformOrderId" v-model="lookupForm.platformOrderId"
class="text-input" class="text-input"
placeholder="输入需要补查的订单号" placeholder="输入需要补查的订单号"
@@ -862,7 +850,6 @@ onMounted(loadConfigs)
<p v-if="lookupErrorMessage" class="error-copy lookup-error">{{ lookupErrorMessage }}</p> <p v-if="lookupErrorMessage" class="error-copy lookup-error">{{ lookupErrorMessage }}</p>
<div v-else-if="lookupLoading" class="empty-inline">正在查询订单详情</div> <div v-else-if="lookupLoading" class="empty-inline">正在查询订单详情</div>
<template v-else-if="lookupResult"> <template v-else-if="lookupResult">
<div class="lookup-summary"> <div class="lookup-summary">
<div class="lookup-summary-item"> <div class="lookup-summary-item">
@@ -892,56 +879,54 @@ onMounted(loadConfigs)
</div> </div>
</div> </div>
<table class="data-table"> <el-table
<thead> :data="lookupResult.items"
<tr> class="data-table element-data-table"
<th>外部商品</th> empty-text="暂无订单商品"
<th>数量</th> >
<th>识别结果</th> <el-table-column label="外部商品" min-width="260">
<th>操作</th> <template #default="{ row: item }">
</tr> <div class="cell-stack">
</thead> <strong>{{
<tbody> item.externalSkuName ||
<tr v-for="item in lookupResult.items" :key="item.lineId"> item.itemTitle ||
<td> item.externalSkuCode ||
<div class="cell-stack"> item.externalItemId ||
<strong>{{ '-'
item.externalSkuName || }}</strong>
item.itemTitle || <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
item.externalSkuCode || <span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
item.externalItemId || </div>
'-' </template>
}}</strong> </el-table-column>
<span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span> <el-table-column prop="quantity" label="数量" width="90" />
<span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span> <el-table-column label="识别结果" min-width="220">
</div> <template #default="{ row: item }">
</td> <div class="cell-stack">
<td>{{ item.quantity }}</td> <strong>{{ item.configured ? '已配置' : '未配置' }}</strong>
<td> <span v-if="item.matchedBinding" class="cell-subtle">
<div class="cell-stack"> {{ item.matchedBinding.skuName || item.matchedBinding.skuCode || '-' }} /
<strong>{{ item.configured ? '已配置' : '未配置' }}</strong> {{ item.matchedBinding.profileKey || '-' }}
<span v-if="item.matchedBinding" class="cell-subtle"> </span>
{{ item.matchedBinding.skuName || item.matchedBinding.skuCode || '-' }} / <span v-else class="cell-subtle">可直接导入成新规则草稿</span>
{{ item.matchedBinding.profileKey || '-' }} </div>
</span> </template>
<span v-else class="cell-subtle">可直接导入成新规则草稿</span> </el-table-column>
</div> <el-table-column label="操作" width="130">
</td> <template #default="{ row: item }">
<td> <el-button
<el-button v-if="!item.configured && !isLookupProductImported(item.lineId)"
v-if="!item.configured && !isLookupProductImported(item.lineId)" link
link type="primary"
type="primary" @click="importLookupProduct(item)"
@click="importLookupProduct(item)" >
> 导入到规则
导入到规则 </el-button>
</el-button> <span v-else-if="item.configured" class="cell-subtle">已存在</span>
<span v-else-if="item.configured" class="cell-subtle">已存在</span> <span v-else class="cell-subtle">已导入草稿</span>
<span v-else class="cell-subtle">已导入草稿</span> </template>
</td> </el-table-column>
</tr> </el-table>
</tbody>
</table>
</template> </template>
</section> </section>
@@ -957,59 +942,57 @@ onMounted(loadConfigs)
</div> </div>
</div> </div>
<table class="data-table"> <el-table
<thead> :data="observedProducts"
<tr> class="data-table element-data-table"
<th>来源</th> empty-text="最近还没有识别到可用的外部商品"
<th>外部商品</th> >
<th>订单商品数</th> <el-table-column label="来源" min-width="180">
<th>最近出现时间</th> <template #default="{ row: item }">
<th>状态</th> <div class="cell-stack">
<th>操作</th> <strong>{{ item.platform || '-' }}</strong>
</tr> <span class="cell-subtle"
</thead> >{{ item.provider }} · {{ item.shopName || item.shopId || '全店铺' }}</span
<tbody>
<tr
v-for="item in observedProducts"
:key="`${item.provider}:${item.platform}:${item.shopId}:${item.externalSkuCode}:${item.externalItemId}:${item.externalSkuName}`"
>
<td>
<div class="cell-stack">
<strong>{{ item.platform || '-' }}</strong>
<span class="cell-subtle"
>{{ item.provider }} · {{ item.shopName || item.shopId || '全店铺' }}</span
>
</div>
</td>
<td>
<div class="cell-stack">
<strong>{{
item.externalSkuName || item.externalSkuCode || item.externalItemId || '-'
}}</strong>
<span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
<span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
</div>
</td>
<td>{{ item.orderItemCount }}</td>
<td>{{ formatAdminDateTime(item.latestSeenAt) }}</td>
<td>{{ item.configured ? '已配置' : '未配置' }}</td>
<td>
<el-button
v-if="!item.configured"
link
type="primary"
@click="importObservedProduct(item)"
> >
导入到规则 </div>
</el-button> </template>
<span v-else class="cell-subtle">已存在</span> </el-table-column>
</td> <el-table-column label="外部商品" min-width="280">
</tr> <template #default="{ row: item }">
<tr v-if="observedProducts.length === 0"> <div class="cell-stack">
<td colspan="6" class="empty-inline">最近还没有识别到可用的外部商品</td> <strong>{{
</tr> item.externalSkuName || item.externalSkuCode || item.externalItemId || '-'
</tbody> }}</strong>
</table> <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
<span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="orderItemCount" label="订单商品数" width="120" />
<el-table-column label="最近出现时间" width="180">
<template #default="{ row: item }">
{{ formatAdminDateTime(item.latestSeenAt) }}
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="{ row: item }">
{{ item.configured ? '已配置' : '未配置' }}
</template>
</el-table-column>
<el-table-column label="操作" width="130">
<template #default="{ row: item }">
<el-button
v-if="!item.configured"
link
type="primary"
@click="importObservedProduct(item)"
>
导入到规则
</el-button>
<span v-else class="cell-subtle">已存在</span>
</template>
</el-table-column>
</el-table>
</section> </section>
</template> </template>
</template> </template>
@@ -752,10 +752,7 @@ onMounted(loadConfigs)
<span class="header-tag">保存后同步到任务匹配</span> <span class="header-tag">保存后同步到任务匹配</span>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<label class="checkbox-line"> <el-checkbox v-model="enabled">启用整条配置</el-checkbox>
<input v-model="enabled" type="checkbox" />
<span>启用整条配置</span>
</label>
<el-button round @click="loadConfigs">刷新</el-button> <el-button round @click="loadConfigs">刷新</el-button>
<el-button round type="primary" :loading="saving" @click="saveConfigs">保存配置</el-button> <el-button round type="primary" :loading="saving" @click="saveConfigs">保存配置</el-button>
</div> </div>
@@ -822,29 +819,29 @@ onMounted(loadConfigs)
<div class="lookup-toolbar"> <div class="lookup-toolbar">
<label class="field-block"> <label class="field-block">
<span>订单状态</span> <span>订单状态</span>
<select v-model="ninetyoneLookupForm.status" class="text-input"> <el-select v-model="ninetyoneLookupForm.status" class="text-input">
<option value="pending_config">待补全</option> <el-option label="待补全" value="pending_config" />
<option value="manual_failed">已失败</option> <el-option label="已失败" value="manual_failed" />
<option value="all">全部</option> <el-option label="全部" value="all" />
</select> </el-select>
</label> </label>
<label class="field-block"> <label class="field-block">
<span>页码</span> <span>页码</span>
<input <el-input-number
v-model.number="ninetyoneLookupForm.page" v-model="ninetyoneLookupForm.page"
class="text-input" class="text-input"
min="1" :min="1"
type="number" controls-position="right"
/> />
</label> </label>
<label class="field-block"> <label class="field-block">
<span>每页条数</span> <span>每页条数</span>
<input <el-input-number
v-model.number="ninetyoneLookupForm.pageSize" v-model="ninetyoneLookupForm.pageSize"
class="text-input" class="text-input"
max="100" :max="100"
min="1" :min="1"
type="number" controls-position="right"
/> />
</label> </label>
<div class="field-block field-block--action"> <div class="field-block field-block--action">
@@ -869,61 +866,60 @@ onMounted(loadConfigs)
</p> </p>
<div v-else-if="ninetyoneLookupLoading" class="empty-inline">正在查询 91卡券订单</div> <div v-else-if="ninetyoneLookupLoading" class="empty-inline">正在查询 91卡券订单</div>
<table v-else class="data-table"> <el-table
<thead> v-else
<tr> :data="ninetyoneLookupResults"
<th>订单</th> class="data-table element-data-table"
<th>来源</th> empty-text="还没有 91卡券查询结果"
<th>商品</th> >
<th>状态</th> <el-table-column label="订单" min-width="180">
<th>操作</th> <template #default="{ row: item }">
</tr> <div class="cell-stack">
</thead> <strong>{{ item.orderNo || '-' }}</strong>
<tbody> <span class="cell-subtle">{{ item.outTradeNo || '-' }}</span>
<tr v-for="item in ninetyoneLookupResults" :key="getNinetyoneOrderImportKey(item)"> </div>
<td> </template>
<div class="cell-stack"> </el-table-column>
<strong>{{ item.orderNo || '-' }}</strong> <el-table-column label="来源" min-width="180">
<span class="cell-subtle">{{ item.outTradeNo || '-' }}</span> <template #default="{ row: item }">
</div> <div class="cell-stack">
</td> <strong>{{ item.shopName || '91卡券' }}</strong>
<td> <span class="cell-subtle">provider: 91kaquan</span>
<div class="cell-stack"> <span class="cell-subtle">shopId: {{ item.shopId || '91kaquan' }}</span>
<strong>{{ item.shopName || '91卡券' }}</strong> </div>
<span class="cell-subtle">provider: 91kaquan</span> </template>
<span class="cell-subtle">shopId: {{ item.shopId || '91kaquan' }}</span> </el-table-column>
</div> <el-table-column label="商品" min-width="240">
</td> <template #default="{ row: item }">
<td> <div class="cell-stack">
<div class="cell-stack"> <strong>{{ item.productName || item.productNo || '-' }}</strong>
<strong>{{ item.productName || item.productNo || '-' }}</strong> <span class="cell-subtle">productNo: {{ item.productNo || '-' }}</span>
<span class="cell-subtle">productNo: {{ item.productNo || '-' }}</span> <span class="cell-subtle">数量{{ item.buyNum || 0 }}</span>
<span class="cell-subtle">数量{{ item.buyNum || 0 }}</span> </div>
</div> </template>
</td> </el-table-column>
<td> <el-table-column label="状态" min-width="120">
<div class="cell-stack"> <template #default="{ row: item }">
<strong>{{ item.orderStatus || '-' }}</strong> <div class="cell-stack">
<span class="cell-subtle">任务 {{ item.taskCount || 0 }}</span> <strong>{{ item.orderStatus || '-' }}</strong>
</div> <span class="cell-subtle">任务 {{ item.taskCount || 0 }}</span>
</td> </div>
<td> </template>
<el-button </el-table-column>
v-if="!isNinetyoneProductImported(item)" <el-table-column label="操作" width="130">
link <template #default="{ row: item }">
type="primary" <el-button
@click="importNinetyoneProduct(item)" v-if="!isNinetyoneProductImported(item)"
> link
导入到规则 type="primary"
</el-button> @click="importNinetyoneProduct(item)"
<span v-else class="cell-subtle">已导入草稿</span> >
</td> 导入到规则
</tr> </el-button>
<tr v-if="ninetyoneLookupResults.length === 0"> <span v-else class="cell-subtle">已导入草稿</span>
<td colspan="5" class="empty-inline">还没有 91卡券查询结果</td> </template>
</tr> </el-table-column>
</tbody> </el-table>
</table>
</section> </section>
<section class="table-card table-card--dense"> <section class="table-card table-card--dense">
@@ -934,19 +930,16 @@ onMounted(loadConfigs)
</div> </div>
<div class="section-header-tools"> <div class="section-header-tools">
<div class="section-mini-stats"> <div class="section-mini-stats">
<button <el-button
v-for="option in ruleFilterOptions" v-for="option in ruleFilterOptions"
:key="option.value" :key="option.value"
:class="[ round
'mini-stat-chip', size="small"
'mini-stat-chip--button', :type="ruleFilter === option.value ? 'primary' : 'default'"
{ 'mini-stat-chip--active': ruleFilter === option.value },
]"
type="button"
@click="ruleFilter = option.value" @click="ruleFilter = option.value"
> >
{{ option.label }} {{ option.count }} {{ option.label }} {{ option.count }}
</button> </el-button>
</div> </div>
<div class="section-action-group"> <div class="section-action-group">
<el-button round @click="expandAllRules">全部展开</el-button> <el-button round @click="expandAllRules">全部展开</el-button>
@@ -996,9 +989,9 @@ onMounted(loadConfigs)
</div> </div>
<span class="binding-subtle">{{ getCardSummary(item) }}</span> <span class="binding-subtle">{{ getCardSummary(item) }}</span>
</div> </div>
<button class="collapse-button" type="button" @click="toggleCollapsed(item.localId)"> <el-button link type="primary" @click="toggleCollapsed(item.localId)">
{{ isCollapsed(item.localId) ? '展开' : '折叠' }} {{ isCollapsed(item.localId) ? '展开' : '折叠' }}
</button> </el-button>
</div> </div>
<div v-if="isCollapsed(item.localId)" class="binding-collapsed-preview"> <div v-if="isCollapsed(item.localId)" class="binding-collapsed-preview">
@@ -1018,7 +1011,7 @@ onMounted(loadConfigs)
<div class="mapping-grid"> <div class="mapping-grid">
<label class="field-block"> <label class="field-block">
<span>来源 provider</span> <span>来源 provider</span>
<input <el-input
v-model="item.provider" v-model="item.provider"
class="text-input" class="text-input"
maxlength="32" maxlength="32"
@@ -1027,7 +1020,7 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block"> <label class="field-block">
<span>来源 platform</span> <span>来源 platform</span>
<input <el-input
v-model="item.platform" v-model="item.platform"
class="text-input" class="text-input"
maxlength="32" maxlength="32"
@@ -1036,7 +1029,7 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>店铺 ID</span> <span>店铺 ID</span>
<input <el-input
v-model="item.shopId" v-model="item.shopId"
class="text-input" class="text-input"
maxlength="80" maxlength="80"
@@ -1045,7 +1038,7 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block"> <label class="field-block">
<span>外部 SKU</span> <span>外部 SKU</span>
<input <el-input
v-model="item.externalSkuCode" v-model="item.externalSkuCode"
class="text-input" class="text-input"
maxlength="120" maxlength="120"
@@ -1054,7 +1047,7 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block"> <label class="field-block">
<span>外部商品 ID</span> <span>外部商品 ID</span>
<input <el-input
v-model="item.externalItemId" v-model="item.externalItemId"
class="text-input" class="text-input"
maxlength="120" maxlength="120"
@@ -1063,7 +1056,7 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>外部商品名</span> <span>外部商品名</span>
<input <el-input
v-model="item.externalSkuName" v-model="item.externalSkuName"
class="text-input" class="text-input"
maxlength="200" maxlength="200"
@@ -1072,7 +1065,7 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>解析商品名</span> <span>解析商品名</span>
<input <el-input
v-model="item.resolvedSkuName" v-model="item.resolvedSkuName"
class="text-input" class="text-input"
maxlength="120" maxlength="120"
@@ -1095,7 +1088,7 @@ onMounted(loadConfigs)
<div class="mapping-grid"> <div class="mapping-grid">
<label class="field-block"> <label class="field-block">
<span>内部 SKU</span> <span>内部 SKU</span>
<input <el-input
v-model="item.internalSkuCode" v-model="item.internalSkuCode"
class="text-input" class="text-input"
maxlength="80" maxlength="80"
@@ -1104,16 +1097,16 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block"> <label class="field-block">
<span>优先级</span> <span>优先级</span>
<input <el-input-number
v-model.number="item.priority" v-model="item.priority"
class="text-input" class="text-input"
min="1" :min="1"
type="number" controls-position="right"
/> />
</label> </label>
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>内部商品名</span> <span>内部商品名</span>
<input <el-input
v-model="item.internalSkuName" v-model="item.internalSkuName"
class="text-input" class="text-input"
maxlength="120" maxlength="120"
@@ -1122,7 +1115,7 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block"> <label class="field-block">
<span>cloudSourceKey</span> <span>cloudSourceKey</span>
<input <el-input
v-model="item.cloudSourceKey" v-model="item.cloudSourceKey"
class="text-input" class="text-input"
maxlength="60" maxlength="60"
@@ -1131,23 +1124,26 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block"> <label class="field-block">
<span>cloud SKU ID</span> <span>cloud SKU ID</span>
<select <el-select
v-model.number="item.cloudSkuId" v-model="item.cloudSkuId"
class="text-input" class="text-input"
@change="handleCloudSkuSelected(item, item.cloudSkuId)" @change="handleCloudSkuSelected(item, item.cloudSkuId)"
@focus="handleCloudSkuDropdownVisible(item, true)" @visible-change="handleCloudSkuDropdownVisible(item, $event)"
> >
<option :value="0">请选择 cloud SKU</option> <el-option label="请选择 cloud SKU" :value="0" />
<option v-for="sku in getCloudSkuOptions(item)" :key="sku.id" :value="sku.id"> <el-option
{{ formatCloudSkuOptionLabel(sku) }} v-for="sku in getCloudSkuOptions(item)"
</option> :key="sku.id"
</select> :label="formatCloudSkuOptionLabel(sku)"
:value="sku.id"
/>
</el-select>
<small class="field-help">先填内部 SKU / 商品名再选择会更容易匹配</small> <small class="field-help">先填内部 SKU / 商品名再选择会更容易匹配</small>
</label> </label>
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>cloud SKU 名称</span> <span>cloud SKU 名称</span>
<input <el-input
:value="item.cloudSkuName" :model-value="item.cloudSkuName"
class="text-input text-input--readonly" class="text-input text-input--readonly"
placeholder="选择 cloud SKU 后自动带出" placeholder="选择 cloud SKU 后自动带出"
readonly readonly
@@ -1155,15 +1151,15 @@ onMounted(loadConfigs)
</label> </label>
<label class="field-block"> <label class="field-block">
<span>虚拟号 VN Key</span> <span>虚拟号 VN Key</span>
<input class="text-input text-input--readonly" value="1" readonly /> <el-input class="text-input text-input--readonly" model-value="1" readonly />
</label> </label>
<label class="field-block"> <label class="field-block">
<span>最低保留余额</span> <span>最低保留余额</span>
<input <el-input-number
v-model.number="item.minAssetReserve" v-model="item.minAssetReserve"
class="text-input" class="text-input"
min="0" :min="0"
type="number" controls-position="right"
/> />
</label> </label>
</div> </div>
@@ -1173,47 +1169,48 @@ onMounted(loadConfigs)
<div v-if="!isCollapsed(item.localId)" class="mapping-extra"> <div v-if="!isCollapsed(item.localId)" class="mapping-extra">
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>快手核销店铺</span> <span>快手核销店铺</span>
<select <el-select
v-model="item.kuaishouConsumeShopId" v-model="item.kuaishouConsumeShopId"
class="text-input" class="text-input"
placeholder="请选择已配置 Cookie 的快手小店"
@change="handleKuaishouConsumeShopSelected(item)" @change="handleKuaishouConsumeShopSelected(item)"
> >
<option value="">请选择已配置 Cookie 的快手小店</option> <el-option label="请选择已配置 Cookie 的快手小店" value="" />
<option <el-option
v-for="shop in getKuaishouConsumeShopOptions()" v-for="shop in getKuaishouConsumeShopOptions()"
:key="shop.shopId" :key="shop.shopId"
:label="formatKuaishouConsumeShopOption(shop)"
:value="shop.shopId" :value="shop.shopId"
> />
{{ formatKuaishouConsumeShopOption(shop) }} </el-select>
</option>
</select>
<small class="field-help" <small class="field-help"
>来自平台店铺 -> 快手小店核销配置保存时会自动带出店铺名</small >来自平台店铺 -> 快手小店核销配置保存时会自动带出店铺名</small
> >
</label> </label>
<label class="field-block"> <label class="field-block">
<span>核销店铺 ID</span> <span>核销店铺 ID</span>
<input <el-input
:value="item.kuaishouConsumeShopId || '-'" :model-value="item.kuaishouConsumeShopId || '-'"
class="text-input text-input--readonly" class="text-input text-input--readonly"
readonly readonly
/> />
</label> </label>
<label class="field-block"> <label class="field-block">
<span>核销店铺名</span> <span>核销店铺名</span>
<input <el-input
:value="item.kuaishouConsumeShopName || '-'" :model-value="item.kuaishouConsumeShopName || '-'"
class="text-input text-input--readonly" class="text-input text-input--readonly"
readonly readonly
/> />
</label> </label>
<label class="field-block field-wide"> <label class="field-block field-wide">
<span>备注</span> <span>备注</span>
<textarea <el-input
v-model="item.notes" v-model="item.notes"
class="text-input textarea-input" class="text-input textarea-input"
maxlength="400" maxlength="400"
placeholder="绑定场景、客服注意事项等" placeholder="绑定场景、客服注意事项等"
type="textarea"
/> />
</label> </label>
</div> </div>
@@ -1226,22 +1223,10 @@ onMounted(loadConfigs)
</p> </p>
<div class="binding-actions"> <div class="binding-actions">
<label class="checkbox-line"> <el-checkbox v-model="item.enabled">启用规则</el-checkbox>
<input v-model="item.enabled" type="checkbox" /> <el-checkbox v-model="item.autoBuyEnabled">自动购买</el-checkbox>
<span>启用规则</span> <el-checkbox v-model="item.autoReturnNumberAfterDispatch">发货后退号</el-checkbox>
</label> <el-checkbox v-model="item.autoConsumeAfterDispatch">发货后核销</el-checkbox>
<label class="checkbox-line">
<input v-model="item.autoBuyEnabled" type="checkbox" />
<span>自动购买</span>
</label>
<label class="checkbox-line">
<input v-model="item.autoReturnNumberAfterDispatch" type="checkbox" />
<span>发货后退号</span>
</label>
<label class="checkbox-line">
<input v-model="item.autoConsumeAfterDispatch" type="checkbox" />
<span>发货后核销</span>
</label>
<el-button link type="danger" @click="removeItem(item.localId)">删除</el-button> <el-button link type="danger" @click="removeItem(item.localId)">删除</el-button>
</div> </div>
</div> </div>