zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitea.zianxin.com/zax/biz-pc-cloud

Browse Source
This commit is contained in:
dzc committed 2025-10-23 20:43:43 +08:00
2 parents 283a87dc51 6ecfec2a73
commit 5547ec3c9d
2 files changed
+56 -141
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/supermarket/mallProduct/form.vue
+31 -102
View File
@@ -30,20 +30,18 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <!-- <el-col :span="12" class="mb20">-->
<el-form-item label="计量单位" prop="unit"> <!-- <el-form-item label="计量单位" prop="unit">-->
<el-input v-model="form.unit" placeholder="请输入计量单位" /> <!-- <el-input v-model="form.unit" placeholder="请输入计量单位" />-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="8" class="mb20">
<el-col :span="12" class="mb20"> <el-form-item label="商品性质" prop="productNature">
<el-form-item label="定价方式" prop="priceType"> <el-select v-model="form.productNature" placeholder="请选择商品性质">
<el-radio-group v-model="form.priceType" @change="onPriceTypeChange"> <el-option :value="item.value" :label="item.label" v-for="(item, index) in supermarket_nature" :key="index" />
<el-radio :label="1">多SKU模式</el-radio> </el-select>
<el-radio :label="2">单价SPU模式</el-radio> </el-form-item>
</el-radio-group> </el-col>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
@@ -54,23 +52,6 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 单价SPU模式的价格设置 -->
<template v-if="form.priceType === 2">
<el-col :span="12" class="mb20">
<el-form-item label="SPU售价" prop="spuPrice">
<el-input-number v-model="form.spuPrice" :precision="2" :min="0" placeholder="请输入SPU售价" style="width: 100%" />
<span class="price-tip">单位：元</span>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="划线价" prop="originalPrice">
<el-input-number v-model="form.originalPrice" :precision="2" :min="0" placeholder="请输入划线价" style="width: 100%" />
<span class="price-tip">单位：元</span>
</el-form-item>
</el-col>
</template>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item label="开售时间" prop="saleStartTime"> <el-form-item label="开售时间" prop="saleStartTime">
<el-date-picker v-model="form.saleStartTime" type="datetime" placeholder="请选择开售时间" style="width: 100%" /> <el-date-picker v-model="form.saleStartTime" type="datetime" placeholder="请选择开售时间" style="width: 100%" />
@@ -104,13 +85,13 @@
</el-tab-pane> </el-tab-pane>
<!-- SKU信息 --> <!-- SKU信息 -->
<el-tab-pane label="SKU信息" name="sku" v-if="form.priceType === 1"> <el-tab-pane label="SKU信息" name="sku">
<div class="sku-header"> <div class="sku-header">
<el-button type="primary" @click="addSku" :disabled="loading"> <el-button type="primary" @click="addSku" :disabled="loading">
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
添加SKU 添加SKU
</el-button> </el-button>
<span class="sku-tip">多SKU模式：支持不同规格的商品（如不同颜色、尺寸、配置等）</span> <span class="sku-tip">单个商品添加一条SKU，多规格商品添加多条SKU（如不同颜色、尺寸等）</span>
</div> </div>
<div class="sku-table-container"> <div class="sku-table-container">
@@ -240,6 +221,7 @@ import { tree as fetchCategoryTree } from "/@/api/supermarket/mallCategory"
const emit = defineEmits(["refresh"]) const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const { supermarket_nature } = useDict("supermarket_nature")
const dataFormRef = ref() const dataFormRef = ref()
const visible = ref(false) const visible = ref(false)
const loading = ref(false) const loading = ref(false)
@@ -269,10 +251,7 @@ const form = reactive({
title: "", title: "",
coverImage: "", coverImage: "",
carouselImages: "", carouselImages: "",
priceType: 1, // 默认多SKU模式 productNature: "",
spuPrice: 0,
originalPrice: 0,
unit: "",
status: "0", // 默认上架 status: "0", // 默认上架
saleStartTime: "", saleStartTime: "",
saleEndTime: "", saleEndTime: "",
@@ -294,19 +273,6 @@ const dataRules = ref({
categoryId: [{ required: true, message: "商品分类不能为空", trigger: "change" }], categoryId: [{ required: true, message: "商品分类不能为空", trigger: "change" }],
title: [{ required: true, message: "商品标题不能为空", trigger: "blur" }], title: [{ required: true, message: "商品标题不能为空", trigger: "blur" }],
coverImage: [{ required: true, message: "主图不能为空", trigger: "blur" }], coverImage: [{ required: true, message: "主图不能为空", trigger: "blur" }],
priceType: [{ required: true, message: "定价方式不能为空", trigger: "change" }],
spuPrice: [
{
validator: (rule: any, value: any, callback: any) => {
if (form.priceType === 2 && (!value || value <= 0)) {
callback(new Error("单价SPU模式下，SPU售价不能为空且必须大于0"))
} else {
callback()
}
},
trigger: "blur",
},
],
status: [{ required: true, message: "状态不能为空", trigger: "change" }], status: [{ required: true, message: "状态不能为空", trigger: "change" }],
}) })
@@ -343,19 +309,6 @@ const removeSku = (index: number) => {
} }
} }
// 定价方式改变
const onPriceTypeChange = (value: number) => {
if (value === 1) {
// 多SKU模式：确保至少有一个SKU
if (form.skuList.length === 0) {
addSku()
}
} else {
// 单价SPU模式：清空SKU列表
form.skuList = []
}
}
// SKU字段验证 // SKU字段验证
const validateSkuField = (index: number, field: string) => { const validateSkuField = (index: number, field: string) => {
const sku = form.skuList[index] const sku = form.skuList[index]
@@ -384,10 +337,7 @@ const openDialog = (id: string) => {
title: "", title: "",
coverImage: "", coverImage: "",
carouselImages: "", carouselImages: "",
priceType: 1, productNature: "",
spuPrice: 0,
originalPrice: 0,
unit: "",
status: "0", status: "0",
saleStartTime: "", saleStartTime: "",
saleEndTime: "", saleEndTime: "",
@@ -411,23 +361,21 @@ const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {}) const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false if (!valid) return false
// 多SKU模式下的额外验证 // SKU验证
if (form.priceType === 1) { if (!form.skuList || form.skuList.length === 0) {
if (!form.skuList || form.skuList.length === 0) { useMessage().error("至少需要添加一个SKU")
useMessage().error("多SKU模式下至少需要添加一个SKU") activeTab.value = "sku"
return false
}
// 验证SKU数据
for (let i = 0; i < form.skuList.length; i++) {
const sku = form.skuList[i]
if (!sku.skuCode || !sku.skuName || !sku.price || sku.stock === undefined) {
useMessage().error(`第${i + 1}个SKU信息不完整，请检查必填项`)
activeTab.value = "sku" activeTab.value = "sku"
return false return false
} }
// 验证SKU数据
for (let i = 0; i < form.skuList.length; i++) {
const sku = form.skuList[i]
if (!sku.skuCode || !sku.skuName || !sku.price || sku.stock === undefined) {
useMessage().error(`第${i + 1}个SKU信息不完整，请检查必填项`)
activeTab.value = "sku"
return false
}
}
} }
try { try {
@@ -451,18 +399,7 @@ const onSubmit = async () => {
submitData.saleEndTime = date.toISOString().slice(0, 19).replace("T", " ") submitData.saleEndTime = date.toISOString().slice(0, 19).replace("T", " ")
} }
// 如果是单价SPU模式，清空SKU列表
if (form.priceType === 2) {
submitData.skuList = []
}
// 价格转换：元转分 // 价格转换：元转分
if (submitData.spuPrice) {
submitData.spuPrice = Math.round(submitData.spuPrice * 100)
}
if (submitData.originalPrice) {
submitData.originalPrice = Math.round(submitData.originalPrice * 100)
}
if (submitData.skuList && submitData.skuList.length > 0) { if (submitData.skuList && submitData.skuList.length > 0) {
submitData.skuList = submitData.skuList.map((sku: any) => ({ submitData.skuList = submitData.skuList.map((sku: any) => ({
...sku, ...sku,
@@ -495,12 +432,6 @@ const getmallProductData = async (id: string) => {
} }
// 价格转换：分转元 // 价格转换：分转元
if (form.spuPrice) {
form.spuPrice = form.spuPrice / 100
}
if (form.originalPrice) {
form.originalPrice = form.originalPrice / 100
}
if (form.skuList && form.skuList.length > 0) { if (form.skuList && form.skuList.length > 0) {
form.skuList = form.skuList.map((sku: any) => ({ form.skuList = form.skuList.map((sku: any) => ({
...sku, ...sku,
@@ -513,11 +444,9 @@ const getmallProductData = async (id: string) => {
form.categoryId = findCategoryPath(categoryOptions.value, res.data.categoryId) as any form.categoryId = findCategoryPath(categoryOptions.value, res.data.categoryId) as any
} }
// 如果没有SKU数据，根据定价方式初始化 // 如果没有SKU数据，默认添加一个
if (!form.skuList || form.skuList.length === 0) { if (!form.skuList || form.skuList.length === 0) {
if (form.priceType === 1) { addSku()
addSku()
}
} }
} finally { } finally {
loading.value = false loading.value = false
src/views/supermarket/mallProduct/index.vue
+25 -39
View File
@@ -58,7 +58,7 @@
<el-table-column type="selection" width="40" align="center" /> <el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="40" /> <el-table-column type="index" label="#" width="40" />
<el-table-column prop="title" label="商品标题" width="200" show-overflow-tooltip /> <el-table-column prop="title" label="商品标题" show-overflow-tooltip />
<el-table-column prop="merchantId" label="商户" width="150" show-overflow-tooltip> <el-table-column prop="merchantId" label="商户" width="150" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
@@ -72,51 +72,36 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="priceType" label="定价方式" width="120" align="center">
<template #default="scope">
<el-tag :type="scope.row.priceType === 1 ? 'primary' : 'success'">
{{ scope.row.priceType === 1 ? "多SKU" : "单价SPU" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="价格信息" width="200"> <el-table-column label="价格信息" width="200">
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.priceType === 1"> <div v-if="scope.row.skuList && scope.row.skuList.length > 0">
<div v-if="scope.row.skuList && scope.row.skuList.length > 0"> <div class="price-range">
<div class="price-range"> <span class="min-price">¥{{ getMinPrice(scope.row.skuList) }}</span>
<span class="min-price">¥{{ getMinPrice(scope.row.skuList) }}</span> <span v-if="getMinPrice(scope.row.skuList) !== getMaxPrice(scope.row.skuList)">
<span v-if="getMinPrice(scope.row.skuList) !== getMaxPrice(scope.row.skuList)"> - ¥{{ getMaxPrice(scope.row.skuList) }}</span
- ¥{{ getMaxPrice(scope.row.skuList) }}</span >
>
</div>
<div class="sku-count">{{ scope.row.skuList.length }}个SKU</div>
</div> </div>
<div v-else class="no-sku">暂无SKU</div> <div class="sku-count">{{ scope.row.skuList.length }}个SKU</div>
</div>
<div v-else>
<div class="spu-price">¥{{ ((scope.row.spuPrice || 0) / 100).toFixed(2) }}</div>
<div v-if="scope.row.originalPrice" class="original-price">¥{{ ((scope.row.originalPrice || 0) / 100).toFixed(2) }}</div>
</div> </div>
<div v-else class="no-sku">暂无SKU</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="库存信息" width="120"> <el-table-column label="库存信息" width="120">
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.priceType === 1"> <div v-if="scope.row.skuList && scope.row.skuList.length > 0">
<div v-if="scope.row.skuList && scope.row.skuList.length > 0"> <div class="total-stock">{{ getTotalStock(scope.row.skuList) }}</div>
<div class="total-stock">{{ getTotalStock(scope.row.skuList) }}</div> <div class="sku-count">{{ scope.row.skuList.length }}个SKU</div>
<div class="sku-count">{{ scope.row.skuList.length }}个SKU</div>
</div>
<div v-else class="no-stock">0</div>
</div>
<div v-else>
<div class="spu-stock">{{ scope.row.totalStock || 0 }}</div>
</div> </div>
<div v-else class="no-stock">0</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="unit" label="单位" width="80" align="center" /> <el-table-column prop="productNature" label="商品性质" show-overflow-tooltip width="150">
<template #default="scope">
<dict-tag :options="supermarket_nature" :value="scope.row.productNature" />
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100" align="center"> <el-table-column prop="status" label="状态" width="100" align="center">
<template #default="scope"> <template #default="scope">
@@ -130,10 +115,10 @@
<el-table-column prop="saleEndTime" label="停售时间" width="160" show-overflow-tooltip /> <el-table-column prop="saleEndTime" label="停售时间" width="160" show-overflow-tooltip />
<el-table-column label="SKU详情" width="120" align="center"> <!-- <el-table-column label="SKU详情" width="120" align="center">
<template #default="scope"> <template #default="scope">
<el-button <el-button
v-if="scope.row.priceType === 1 && scope.row.skuList && scope.row.skuList.length > 0" v-if="scope.row.skuList && scope.row.skuList.length > 0"
type="primary" type="primary"
size="small" size="small"
@click="showSkuDetail(scope.row)" @click="showSkuDetail(scope.row)"
@@ -142,7 +127,7 @@
</el-button> </el-button>
<span v-else class="no-sku-detail">-</span> <span v-else class="no-sku-detail">-</span>
</template> </template>
</el-table-column> </el-table-column>-->
<el-table-column label="操作" width="180" fixed="right"> <el-table-column label="操作" width="180" fixed="right">
<template #default="scope"> <template #default="scope">
@@ -167,7 +152,7 @@
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<!-- SKU详情弹窗 --> <!-- SKU详情弹窗 -->
<el-dialog v-model="skuDetailVisible" title="SKU详情" width="80%" :close-on-click-modal="false"> <!-- <el-dialog v-model="skuDetailVisible" title="SKU详情" width="80%" :close-on-click-modal="false">
<div v-if="currentProduct"> <div v-if="currentProduct">
<div class="product-info"> <div class="product-info">
<h3>{{ currentProduct.title }}</h3> <h3>{{ currentProduct.title }}</h3>
@@ -201,7 +186,7 @@
<el-button @click="skuDetailVisible = false">关闭</el-button> <el-button @click="skuDetailVisible = false">关闭</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>-->
</div> </div>
</template> </template>
@@ -211,7 +196,8 @@ import { fetchList, delObjs } from "/@/api/supermarket/mallProduct"
import { useMessage, useMessageBox } from "/@/hooks/message" import { useMessage, useMessageBox } from "/@/hooks/message"
import { tree as fetchCategoryTree } from "/@/api/supermarket/mallCategory" import { tree as fetchCategoryTree } from "/@/api/supermarket/mallCategory"
import { select } from "/@/api/wallet/mch-manage" import { select } from "/@/api/wallet/mch-manage"
import {useDict} from "/@/hooks/dict";
const { supermarket_nature } = useDict("supermarket_nature")
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import("./form.vue")) const FormDialog = defineAsyncComponent(() => import("./form.vue"))