refactor: 商品管理参数对齐与表单优化 - 移除冗余ProductList.vue - 表单新增table/soldOut/maxPerUser/sendNotice - 表单改Tab栏布局 - 修复attrs.phase改为range
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
shiran
+169
-120
@@ -567,6 +567,9 @@
|
||||
<el-icon class="group-picker-arrow"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属表" prop="table">
|
||||
<el-input v-model="productForm.table" placeholder="请输入商品所属表（如 kvm_service）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品介绍" prop="content">
|
||||
<el-input
|
||||
v-model="productForm.content"
|
||||
@@ -588,125 +591,149 @@
|
||||
@confirm="handleProductCoverSelect"
|
||||
/>
|
||||
|
||||
<!-- 价格与销售 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">价格与销售</div>
|
||||
<div class="form-grid">
|
||||
<el-form-item prop="price">
|
||||
<template #label>
|
||||
<span>商品价格<span class="unit-suffix">（元）</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.price"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
placeholder="请输入价格"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单个商品数量" prop="pay_num">
|
||||
<el-input-number
|
||||
v-model="productForm.pay_num"
|
||||
:min="1"
|
||||
placeholder="请输入数量"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="expire_time">
|
||||
<template #label>
|
||||
<span>有效期<span class="unit-suffix">（天，0 为永久）</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.expire_time"
|
||||
:min="0"
|
||||
placeholder="请输入有效期"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许续费" prop="can_renew">
|
||||
<el-switch
|
||||
v-model="productForm.can_renew"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买类型" prop="arg_type">
|
||||
<el-select
|
||||
v-model="productForm.arg_type"
|
||||
placeholder="请选择购买类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="所有类型" value="all" />
|
||||
<el-option label="仅套餐" value="plan" />
|
||||
<el-option label="仅自定义参数" value="customize" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="需要实名" prop="require_real_name">
|
||||
<el-switch
|
||||
v-model="productForm.require_real_name"
|
||||
active-text="需要"
|
||||
inactive-text="不需要"
|
||||
/>
|
||||
<div style="font-size:12px;color:#909399;margin-top:4px">启用后，用户购买/续费/升级此商品前须完成实名认证</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 栏管理 -->
|
||||
<el-tabs v-model="productFormTab" class="product-form-tabs">
|
||||
<el-tab-pane label="价格与销售" name="sales">
|
||||
<div class="form-grid">
|
||||
<el-form-item prop="price">
|
||||
<template #label>
|
||||
<span>商品价格<span class="unit-suffix">（元）</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.price"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
placeholder="请输入价格"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单个商品数量" prop="pay_num">
|
||||
<el-input-number
|
||||
v-model="productForm.pay_num"
|
||||
:min="1"
|
||||
placeholder="请输入数量"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="expire_time">
|
||||
<template #label>
|
||||
<span>有效期<span class="unit-suffix">（天，0 为永久）</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.expire_time"
|
||||
:min="0"
|
||||
placeholder="请输入有效期"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许续费" prop="can_renew">
|
||||
<el-switch
|
||||
v-model="productForm.can_renew"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买类型" prop="arg_type">
|
||||
<el-select
|
||||
v-model="productForm.arg_type"
|
||||
placeholder="请选择购买类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="所有类型" value="all" />
|
||||
<el-option label="仅套餐" value="plan" />
|
||||
<el-option label="仅自定义参数" value="customize" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="需要实名" prop="require_real_name">
|
||||
<el-switch
|
||||
v-model="productForm.require_real_name"
|
||||
active-text="需要"
|
||||
inactive-text="不需要"
|
||||
/>
|
||||
<div style="font-size:12px;color:#909399;margin-top:4px">启用后，用户购买/续费/升级此商品前须完成实名认证</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 库存管理 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">库存管理</div>
|
||||
<div class="form-grid">
|
||||
<el-form-item label="库存控制" prop="inventory_control">
|
||||
<el-switch
|
||||
v-model="productForm.inventory_control"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="inventory">
|
||||
<el-input-number
|
||||
v-model="productForm.inventory"
|
||||
:min="0"
|
||||
:disabled="!productForm.inventory_control"
|
||||
placeholder="请输入库存"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-tab-pane label="库存管理" name="inventory">
|
||||
<div class="form-grid">
|
||||
<el-form-item label="库存控制" prop="inventory_control">
|
||||
<el-switch
|
||||
v-model="productForm.inventory_control"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="inventory">
|
||||
<el-input-number
|
||||
v-model="productForm.inventory"
|
||||
:min="0"
|
||||
:disabled="!productForm.inventory_control"
|
||||
placeholder="请输入库存"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="售罄状态" prop="sold_out">
|
||||
<el-switch
|
||||
v-model="productForm.sold_out"
|
||||
active-text="售罄"
|
||||
inactive-text="正常"
|
||||
active-color="#f56c6c"
|
||||
/>
|
||||
<div style="font-size:12px;color:#909399;margin-top:4px">开启后用户端将无法选购该商品</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买限制" prop="max_per_user">
|
||||
<el-input-number
|
||||
v-model="productForm.max_per_user"
|
||||
:min="0"
|
||||
placeholder="0 表示不限"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<div style="font-size:12px;color:#909399;margin-top:4px">限制单用户最大购买数量，0 表示不限制</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 推荐与参数 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">推荐与参数</div>
|
||||
<div class="form-grid">
|
||||
<el-form-item label="推荐" prop="recommend">
|
||||
<el-switch
|
||||
v-model="productForm.recommend"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="recommend_rebate">
|
||||
<template #label>
|
||||
<span>推荐返还<span class="unit-suffix">（%）</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.recommend_rebate"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:disabled="!productForm.recommend"
|
||||
placeholder="返还百分比"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-tab-pane label="推荐与通知" name="promotion">
|
||||
<div class="form-grid">
|
||||
<el-form-item label="推荐" prop="recommend">
|
||||
<el-switch
|
||||
v-model="productForm.recommend"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="recommend_rebate">
|
||||
<template #label>
|
||||
<span>推荐返还<span class="unit-suffix">（%）</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.recommend_rebate"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:disabled="!productForm.recommend"
|
||||
placeholder="返还百分比"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买通知" prop="send_notice">
|
||||
<el-switch
|
||||
v-model="productForm.send_notice"
|
||||
active-text="发送"
|
||||
inactive-text="不发送"
|
||||
/>
|
||||
<div style="font-size:12px;color:#909399;margin:4px">用户购买后是否发送通知给管理员</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@@ -873,7 +900,10 @@ const productForm = reactive({
|
||||
recommend_rebate: 0,
|
||||
arg_type: 'all',
|
||||
can_renew: true,
|
||||
require_real_name: false
|
||||
require_real_name: false,
|
||||
sold_out: false,
|
||||
max_per_user: 0,
|
||||
send_notice: false
|
||||
})
|
||||
|
||||
const productRules = {
|
||||
@@ -895,6 +925,7 @@ const productRules = {
|
||||
// 商品对话框状态
|
||||
const productDialogVisible = ref(false)
|
||||
const productDialogType = ref('add')
|
||||
const productFormTab = ref('sales')
|
||||
const productFormRef = ref(null)
|
||||
const coverSelectorVisible = ref(false)
|
||||
|
||||
@@ -1557,7 +1588,10 @@ const handleEditProduct = (product, parentGroupId) => {
|
||||
recommend_rebate: product.recommendRebate,
|
||||
arg_type: product.argType || 'all',
|
||||
can_renew: product.canRenew !== undefined ? product.canRenew : (product.can_renew !== undefined ? product.can_renew : true),
|
||||
require_real_name: product.requireRealName ?? product.require_real_name ?? false
|
||||
require_real_name: product.requireRealName ?? product.require_real_name ?? false,
|
||||
sold_out: !!product.soldOut,
|
||||
max_per_user: product.maxPerUser ?? product.max_per_user ?? 0,
|
||||
send_notice: !!product.sendNotice
|
||||
})
|
||||
|
||||
productDialogVisible.value = true
|
||||
@@ -1583,7 +1617,10 @@ const submitProductForm = () => {
|
||||
recommend_rebate: Number(productForm.recommend_rebate) || 0,
|
||||
arg_type: productForm.arg_type,
|
||||
can_renew: productForm.can_renew,
|
||||
require_real_name: productForm.require_real_name
|
||||
require_real_name: productForm.require_real_name,
|
||||
sold_out: productForm.sold_out === true,
|
||||
max_per_user: Number(productForm.max_per_user) || 0,
|
||||
send_notice: productForm.send_notice === true
|
||||
}
|
||||
|
||||
let res
|
||||
@@ -2185,6 +2222,18 @@ onMounted(() => {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-form-tabs {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.product-form-tabs :deep(.el-tabs__header) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-form-tabs :deep(.el-tab-pane) {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: var(--section-gap);
|
||||
padding: 16px;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -554,11 +554,11 @@ const findMatchingNumberAttr = (spec, numValue) => {
|
||||
if (!spec.attrs || spec.attrs.length === 0) return null
|
||||
const sortedAttrs = [...spec.attrs].sort((a, b) => (a.index || 0) - (b.index || 0))
|
||||
for (const attr of sortedAttrs) {
|
||||
const phase = attr.phase || 0
|
||||
const rangeVal = attr.range ?? attr.phase ?? 0
|
||||
const rangeType = attr.rangeType || 'before'
|
||||
if (rangeType === 'before' && numValue <= phase) return attr
|
||||
else if (rangeType === 'after' && numValue >= phase) return attr
|
||||
else if (rangeType === 'equal' && numValue === phase) return attr
|
||||
if (rangeType === 'before' && numValue <= rangeVal) return attr
|
||||
else if (rangeType === 'after' && numValue >= rangeVal) return attr
|
||||
else if (rangeType === 'equal' && numValue === rangeVal) return attr
|
||||
}
|
||||
return sortedAttrs[sortedAttrs.length - 1]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user