root/im-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve code formatting and structure in product index view

Browse Source 
- Enhanced readability by adjusting indentation and spacing in the template.
- Consolidated repeated code blocks for better maintainability.
- Added functionality for changing product status (上架/下架) with confirmation prompts.
- Updated the handleDelete function to maintain consistent formatting.
- Ensured all API calls and data handling are properly formatted for clarity.
This commit is contained in:
Seven
2026-03-08 02:38:43 +07:00
parent a8fab3e765
commit 0e0b856edb
3 changed files with 1036 additions and 916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/api/service/product.js
View File

@@ -42,3 +42,16 @@ export function delProduct(id) {
method: 'delete' method: 'delete'
}) })
} }
// 上架/下架商品
export function changeProductStatus(id, status) {
const data = {
id,
status
}
return request({
url: '/service/product/status',
method: 'put',
data: data
})
}

249
src/views/service/product/details.vue
View File

@@ -1,8 +1,15 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 商品基本信息 --> <!-- 商品基本信息 -->
<div class="background-color-fff padding-20 border-radius-8px margin-bottom-20"> <div
<el-form ref="productRef" :model="form" :rules="rules" label-width="100px"> class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
>
<el-form
ref="productRef"
:model="form"
:rules="rules"
label-width="100px"
>
<el-form-item label="商品分类" prop="categoryId"> <el-form-item label="商品分类" prop="categoryId">
<el-select <el-select
v-model="form.categoryId" v-model="form.categoryId"
@@ -33,7 +40,9 @@
<!-- SKU管理 --> <!-- SKU管理 -->
<div class="sku-management"> <div class="sku-management">
<div class="sku-header flex justify-between items-center margin-bottom-20"> <div
class="sku-header flex justify-between items-center margin-bottom-20"
>
<h3 class="text-16 font-600">商品规格(SKU)</h3> <h3 class="text-16 font-600">商品规格(SKU)</h3>
<el-button type="primary" @click="handleAddSku" size="small"> <el-button type="primary" @click="handleAddSku" size="small">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
@@ -46,8 +55,18 @@
v-if="form.productSkuList && form.productSkuList.length > 0" v-if="form.productSkuList && form.productSkuList.length > 0"
class="sku-table-wrapper" class="sku-table-wrapper"
> >
<el-table :data="form.productSkuList" border size="small" class="sku-table"> <el-table
<el-table-column type="index" width="50" label="序号" align="center" /> :data="form.productSkuList"
border
size="small"
class="sku-table"
>
<el-table-column
type="index"
width="50"
label="序号"
align="center"
/>
<el-table-column prop="skuCode" label="SKU编码" min-width="120"> <el-table-column prop="skuCode" label="SKU编码" min-width="120">
<template #default="{ row, $index }"> <template #default="{ row, $index }">
<el-input <el-input
@@ -76,7 +95,12 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="price" label="销售价" width="180" align="left"> <el-table-column
prop="price"
label="销售价"
width="180"
align="left"
>
<template #default="{ row }"> <template #default="{ row }">
<el-input <el-input
v-model.number="row.price" v-model.number="row.price"
@@ -154,11 +178,16 @@
:label="$index" :label="$index"
@change="setDefaultSku($index)" @change="setDefaultSku($index)"
> >
{{ row.isDefault === 1 ? '是' : '否' }} {{ row.isDefault === 1 ? "是" : "否" }}
</el-radio> </el-radio>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="isEnable" label="状态" width="80" align="center"> <el-table-column
prop="isEnable"
label="状态"
width="80"
align="center"
>
<template #default="{ row }"> <template #default="{ row }">
<el-switch <el-switch
v-model="row.isEnable" v-model="row.isEnable"
@@ -168,7 +197,12 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="100" align="center" fixed="right"> <el-table-column
label="操作"
width="100"
align="center"
fixed="right"
>
<template #default="{ row, $index }"> <template #default="{ row, $index }">
<el-button <el-button
type="text" type="text"
@@ -195,10 +229,10 @@
}} }}
</el-tag> </el-tag>
<el-tag :type="hasDuplicateSku ? 'danger' : 'success'"> <el-tag :type="hasDuplicateSku ? 'danger' : 'success'">
{{ hasDuplicateSku ? '有重复SKU编码' : 'SKU编码无重复' }} {{ hasDuplicateSku ? "有重复SKU编码" : "SKU编码无重复" }}
</el-tag> </el-tag>
<el-tag :type="hasSkuValidationError ? 'danger' : 'success'"> <el-tag :type="hasSkuValidationError ? 'danger' : 'success'">
{{ hasSkuValidationError ? '存在验证错误' : 'SKU信息完整' }} {{ hasSkuValidationError ? "存在验证错误" : "SKU信息完整" }}
</el-tag> </el-tag>
</el-space> </el-space>
</div> </div>
@@ -206,7 +240,10 @@
<!-- 无SKU提示 --> <!-- 无SKU提示 -->
<div v-else class="empty-sku"> <div v-else class="empty-sku">
<el-empty description="暂无SKU，请点击上方按钮添加" :image-size="60" /> <el-empty
description="暂无SKU，请点击上方按钮添加"
:image-size="60"
/>
</div> </div>
</div> </div>
@@ -281,9 +318,9 @@
</template> </template>
<script setup name="ProductDetailWithSku"> <script setup name="ProductDetailWithSku">
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from "vue-router";
import { getProduct, addProduct, updateProduct } from '@/api/service/product'; import { getProduct, addProduct, updateProduct } from "@/api/service/product";
import { listProductCategory } from '@/api/service/productCategory'; import { listProductCategory } from "@/api/service/productCategory";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const route = useRoute(); const route = useRoute();
@@ -319,24 +356,30 @@ const data = reactive({
defaultSkuIndex: -1, // 默认SKU索引 defaultSkuIndex: -1, // 默认SKU索引
}, },
rules: { rules: {
categoryId: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }], categoryId: [
productName: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }], { required: true, message: "商品分类不能为空", trigger: "blur" },
mainImage: [{ required: true, message: '主图URL不能为空', trigger: 'blur' }], ],
unit: [{ required: true, message: '商品单位不能为空', trigger: 'blur' }], productName: [
{ required: true, message: "商品名称不能为空", trigger: "blur" },
],
mainImage: [
{ required: true, message: "主图URL不能为空", trigger: "blur" },
],
unit: [{ required: true, message: "商品单位不能为空", trigger: "blur" }],
productSkuList: [ productSkuList: [
{ {
validator: (rule, value, callback) => { validator: (rule, value, callback) => {
if (!value || value.length === 0) { if (!value || value.length === 0) {
callback(new Error('请至少添加一个SKU')); callback(new Error("请至少添加一个SKU"));
} else if (data.hasDuplicateSku) { } else if (data.hasDuplicateSku) {
callback(new Error('存在重复的SKU编码，请检查')); callback(new Error("存在重复的SKU编码，请检查"));
} else if (data.hasSkuValidationError) { } else if (data.hasSkuValidationError) {
callback(new Error('SKU信息填写不完整或有误，请检查')); callback(new Error("SKU信息填写不完整或有误，请检查"));
} else { } else {
callback(); callback();
} }
}, },
trigger: 'blur', trigger: "blur",
}, },
], ],
}, },
@@ -354,19 +397,21 @@ const totalStock = computed(() => {
const hasDuplicateSku = computed(() => { const hasDuplicateSku = computed(() => {
if (!form.value.productSkuList) return false; if (!form.value.productSkuList) return false;
const skuCodes = form.value.productSkuList.map(sku => sku.skuCode?.trim()).filter(code => code); const skuCodes = form.value.productSkuList
.map((sku) => sku.skuCode?.trim())
.filter((code) => code);
return new Set(skuCodes).size !== skuCodes.length; return new Set(skuCodes).size !== skuCodes.length;
}); });
const hasSkuValidationError = computed(() => { const hasSkuValidationError = computed(() => {
if (!form.value.productSkuList) return false; if (!form.value.productSkuList) return false;
return form.value.productSkuList.some( return form.value.productSkuList.some(
sku => (sku) =>
sku.skuError || sku.skuError ||
sku.specTextError || sku.specTextError ||
sku.priceError || sku.priceError ||
sku.originalPriceError || sku.originalPriceError ||
sku.stockQuantityError sku.stockQuantityError,
); );
}); });
@@ -375,24 +420,24 @@ const initSkuData = () => {
return { return {
id: null, id: null,
productId: null, productId: null,
skuCode: '', skuCode: "",
specData: '', specData: "",
specText: '', specText: "",
price: 0, price: 0,
originalPrice: 0, originalPrice: 0,
stockQuantity: 0, stockQuantity: 0,
warningStock: 0, warningStock: 0,
salesVolume: 0, salesVolume: 0,
skuImage: '', skuImage: "",
barcode: '', barcode: "",
isDefault: 0, isDefault: 0,
isEnable: 1, isEnable: 1,
// 错误信息字段 // 错误信息字段
skuError: '', skuError: "",
specTextError: '', specTextError: "",
priceError: '', priceError: "",
originalPriceError: '', originalPriceError: "",
stockQuantityError: '', stockQuantityError: "",
}; };
}; };
@@ -416,15 +461,15 @@ const handleAddSku = () => {
// 生成SKU编码 // 生成SKU编码
const generateSkuCode = () => { const generateSkuCode = () => {
const spuCode = form.value.spuCode || 'SPU'; const spuCode = form.value.spuCode || "SPU";
const timestamp = new Date().getTime().toString().slice(-6); const timestamp = new Date().getTime().toString().slice(-6);
const random = Math.random().toString(36).substr(2, 4).toUpperCase(); const random = Math.random().toString(36).substr(2, 4).toUpperCase();
return `${spuCode}_${timestamp}${random}`; return `${spuCode}_${timestamp}${random}`;
}; };
// 删除SKU // 删除SKU
const handleRemoveSku = index => { const handleRemoveSku = (index) => {
proxy.$modal.confirm('确定要删除这个SKU吗？').then(() => { proxy.$modal.confirm("确定要删除这个SKU吗？").then(() => {
form.value.productSkuList.splice(index, 1); form.value.productSkuList.splice(index, 1);
// 如果删除的是默认SKU，重置默认索引 // 如果删除的是默认SKU，重置默认索引
@@ -442,7 +487,7 @@ const handleRemoveSku = index => {
}; };
// 设置默认SKU // 设置默认SKU
const setDefaultSku = index => { const setDefaultSku = (index) => {
form.value.defaultSkuIndex = index; form.value.defaultSkuIndex = index;
form.value.productSkuList.forEach((sku, i) => { form.value.productSkuList.forEach((sku, i) => {
sku.isDefault = i === index ? 1 : 0; sku.isDefault = i === index ? 1 : 0;
@@ -452,7 +497,7 @@ const setDefaultSku = index => {
// 验证SKU编码 // 验证SKU编码
const validateSkuCode = (row, index) => { const validateSkuCode = (row, index) => {
// 清除之前的错误 // 清除之前的错误
row.skuError = ''; row.skuError = "";
// if (!row.skuCode || row.skuCode.trim() === '') { // if (!row.skuCode || row.skuCode.trim() === '') {
// row.skuError = 'SKU编码不能为空'; // row.skuError = 'SKU编码不能为空';
@@ -461,11 +506,11 @@ const validateSkuCode = (row, index) => {
// 检查重复 // 检查重复
const duplicateIndex = form.value.productSkuList.findIndex( const duplicateIndex = form.value.productSkuList.findIndex(
(sku, i) => i !== index && sku.skuCode === row.skuCode (sku, i) => i !== index && sku.skuCode === row.skuCode,
); );
if (duplicateIndex !== -1) { if (duplicateIndex !== -1) {
row.skuError = 'SKU编码已存在'; row.skuError = "SKU编码已存在";
return false; return false;
} }
@@ -473,12 +518,12 @@ const validateSkuCode = (row, index) => {
}; };
// 验证规格文本 // 验证规格文本
const validateSpecText = row => { const validateSpecText = (row) => {
// 清除之前的错误 // 清除之前的错误
row.specTextError = ''; row.specTextError = "";
if (!row.specText || row.specText.trim() === '') { if (!row.specText || row.specText.trim() === "") {
row.specTextError = '规格文本不能为空'; row.specTextError = "规格文本不能为空";
return false; return false;
} }
@@ -486,28 +531,28 @@ const validateSpecText = row => {
}; };
// 验证销售价格 // 验证销售价格
const validatePrice = row => { const validatePrice = (row) => {
// 清除之前的错误 // 清除之前的错误
row.priceError = ''; row.priceError = "";
if (row.price === null || row.price === undefined || row.price === '') { if (row.price === null || row.price === undefined || row.price === "") {
row.priceError = '销售价不能为空'; row.priceError = "销售价不能为空";
return false; return false;
} }
const price = Number(row.price); const price = Number(row.price);
if (isNaN(price)) { if (isNaN(price)) {
row.priceError = '请输入有效的数字'; row.priceError = "请输入有效的数字";
return false; return false;
} }
if (price < 0) { if (price < 0) {
row.priceError = '价格不能为负数'; row.priceError = "价格不能为负数";
return false; return false;
} }
if (price === 0) { if (price === 0) {
row.priceError = '价格不能为0'; row.priceError = "价格不能为0";
return false; return false;
} }
@@ -515,23 +560,27 @@ const validatePrice = row => {
}; };
// 验证原价 // 验证原价
const validateOriginalPrice = row => { const validateOriginalPrice = (row) => {
// 清除之前的错误 // 清除之前的错误
row.originalPriceError = ''; row.originalPriceError = "";
if (row.originalPrice === null || row.originalPrice === undefined || row.originalPrice === '') { if (
row.originalPriceError = '原价不能为空'; row.originalPrice === null ||
row.originalPrice === undefined ||
row.originalPrice === ""
) {
row.originalPriceError = "原价不能为空";
return false; return false;
} }
const originalPrice = Number(row.originalPrice); const originalPrice = Number(row.originalPrice);
if (isNaN(originalPrice)) { if (isNaN(originalPrice)) {
row.originalPriceError = '请输入有效的数字'; row.originalPriceError = "请输入有效的数字";
return false; return false;
} }
if (originalPrice < 0) { if (originalPrice < 0) {
row.originalPriceError = '原价不能为负数'; row.originalPriceError = "原价不能为负数";
return false; return false;
} }
@@ -539,29 +588,33 @@ const validateOriginalPrice = row => {
}; };
// 验证库存 // 验证库存
const validateStockQuantity = row => { const validateStockQuantity = (row) => {
// 清除之前的错误 // 清除之前的错误
row.stockQuantityError = ''; row.stockQuantityError = "";
if (row.stockQuantity === null || row.stockQuantity === undefined || row.stockQuantity === '') { if (
row.stockQuantityError = '库存不能为空'; row.stockQuantity === null ||
row.stockQuantity === undefined ||
row.stockQuantity === ""
) {
row.stockQuantityError = "库存不能为空";
return false; return false;
} }
const stockQuantity = Number(row.stockQuantity); const stockQuantity = Number(row.stockQuantity);
if (isNaN(stockQuantity)) { if (isNaN(stockQuantity)) {
row.stockQuantityError = '请输入有效的数字'; row.stockQuantityError = "请输入有效的数字";
return false; return false;
} }
if (stockQuantity < 0) { if (stockQuantity < 0) {
row.stockQuantityError = '库存不能为负数'; row.stockQuantityError = "库存不能为负数";
return false; return false;
} }
// 检查是否为整数 // 检查是否为整数
if (!Number.isInteger(stockQuantity)) { if (!Number.isInteger(stockQuantity)) {
row.stockQuantityError = '库存必须为整数'; row.stockQuantityError = "库存必须为整数";
return false; return false;
} }
@@ -596,18 +649,18 @@ const validateAllSkuFields = () => {
}; };
// 格式化规格数据 // 格式化规格数据
const formatSpecData = row => { const formatSpecData = (row) => {
if (!row.specData) return; if (!row.specData) return;
try { try {
// 如果是JSON字符串，尝试解析 // 如果是JSON字符串，尝试解析
if (row.specData.trim().startsWith('{')) { if (row.specData.trim().startsWith("{")) {
const specObj = JSON.parse(row.specData); const specObj = JSON.parse(row.specData);
// 生成规格文本 // 生成规格文本
row.specText = Object.values(specObj).join('/'); row.specText = Object.values(specObj).join("/");
} }
} catch (e) { } catch (e) {
console.warn('规格数据格式错误:', e); console.warn("规格数据格式错误:", e);
} }
}; };
@@ -620,9 +673,9 @@ const updatePriceRange = () => {
} }
const prices = form.value.productSkuList const prices = form.value.productSkuList
.filter(sku => sku.isEnable === 1) .filter((sku) => sku.isEnable === 1)
.map(sku => Number(sku.price) || 0) .map((sku) => Number(sku.price) || 0)
.filter(price => price > 0); .filter((price) => price > 0);
if (prices.length === 0) { if (prices.length === 0) {
form.value.minPrice = 0; form.value.minPrice = 0;
@@ -640,7 +693,7 @@ watch(
() => { () => {
updatePriceRange(); updatePriceRange();
}, },
{ deep: true } { deep: true },
); );
// 获取商品详情 // 获取商品详情
@@ -654,17 +707,17 @@ const getProductDetail = async () => {
if (productData.productSkuList && productData.productSkuList.length > 0) { if (productData.productSkuList && productData.productSkuList.length > 0) {
// 找到默认SKU的索引 // 找到默认SKU的索引
const defaultIndex = productData.productSkuList.findIndex( const defaultIndex = productData.productSkuList.findIndex(
sku => sku.isDefault === 1 (sku) => sku.isDefault === 1,
); );
productData.defaultSkuIndex = defaultIndex; productData.defaultSkuIndex = defaultIndex;
// 初始化错误字段 // 初始化错误字段
productData.productSkuList.forEach(sku => { productData.productSkuList.forEach((sku) => {
sku.skuError = ''; sku.skuError = "";
sku.specTextError = ''; sku.specTextError = "";
sku.priceError = ''; sku.priceError = "";
sku.originalPriceError = ''; sku.originalPriceError = "";
sku.stockQuantityError = ''; sku.stockQuantityError = "";
}); });
} else { } else {
productData.productSkuList = []; productData.productSkuList = [];
@@ -673,8 +726,8 @@ const getProductDetail = async () => {
form.value = productData; form.value = productData;
} catch (error) { } catch (error) {
console.error('获取商品详情失败:', error); console.error("获取商品详情失败:", error);
proxy.$modal.msgError('获取商品信息失败'); proxy.$modal.msgError("获取商品信息失败");
} }
} else { } else {
// 新增商品时初始化一个默认SKU // 新增商品时初始化一个默认SKU
@@ -691,7 +744,7 @@ const prepareSubmitData = () => {
// 确保SKU列表中的productId正确 // 确保SKU列表中的productId正确
if (submitData.productSkuList) { if (submitData.productSkuList) {
submitData.productSkuList.forEach(sku => { submitData.productSkuList.forEach((sku) => {
if (!sku.id) { if (!sku.id) {
delete sku.id; // 新增的SKU不应该有id delete sku.id; // 新增的SKU不应该有id
} }
@@ -715,12 +768,12 @@ const submitForm = async () => {
// 先验证所有SKU字段 // 先验证所有SKU字段
const isSkuValid = validateAllSkuFields(); const isSkuValid = validateAllSkuFields();
if (!isSkuValid) { if (!isSkuValid) {
proxy.$modal.msgWarning('请检查SKU信息填写是否完整'); proxy.$modal.msgWarning("请检查SKU信息填写是否完整");
return; return;
} }
if (hasDuplicateSku.value) { if (hasDuplicateSku.value) {
proxy.$modal.msgWarning('存在重复的SKU编码，请检查'); proxy.$modal.msgWarning("存在重复的SKU编码，请检查");
return; return;
} }
@@ -728,7 +781,7 @@ const submitForm = async () => {
await proxy.$refs.productRef.validate(); await proxy.$refs.productRef.validate();
if (!form.value.productSkuList || form.value.productSkuList.length === 0) { if (!form.value.productSkuList || form.value.productSkuList.length === 0) {
proxy.$modal.msgWarning('请至少添加一个SKU'); proxy.$modal.msgWarning("请至少添加一个SKU");
return; return;
} }
@@ -739,10 +792,10 @@ const submitForm = async () => {
let response; let response;
if (submitData.id) { if (submitData.id) {
response = await updateProduct(submitData); response = await updateProduct(submitData);
proxy.$modal.msgSuccess('修改成功'); proxy.$modal.msgSuccess("修改成功");
} else { } else {
response = await addProduct(submitData); response = await addProduct(submitData);
proxy.$modal.msgSuccess('新增成功'); proxy.$modal.msgSuccess("新增成功");
} }
// 处理响应 // 处理响应
@@ -753,8 +806,8 @@ const submitForm = async () => {
}, 1500); }, 1500);
} }
} catch (error) { } catch (error) {
console.error('保存失败:', error); console.error("保存失败:", error);
proxy.$modal.msgError(error.message || '保存失败'); proxy.$modal.msgError(error.message || "保存失败");
} finally { } finally {
submitLoading.value = false; submitLoading.value = false;
} }
@@ -762,12 +815,12 @@ const submitForm = async () => {
// 取消 // 取消
const cancel = () => { const cancel = () => {
proxy.$modal.confirm('确定要取消吗？未保存的数据将会丢失。').then(() => { proxy.$modal.confirm("确定要取消吗？未保存的数据将会丢失。").then(() => {
proxy.$tab.closePage(); proxy.$tab.closePage();
}); });
}; };
const remoteMethod = query => { const remoteMethod = (query) => {
if (query) { if (query) {
getProductList(query.toLowerCase()); getProductList(query.toLowerCase());
} else { } else {
@@ -776,11 +829,11 @@ const remoteMethod = query => {
/** 查询商品分类列表 */ /** 查询商品分类列表 */
function getList(name) { function getList(name) {
listProductCategory(proxy.CloneData({ pageNum: 1, pageSize: 100, productName: name })).then( listProductCategory(
response => { proxy.CloneData({ pageNum: 1, pageSize: 100, productName: name }),
).then((response) => {
productCategoryList.value = response.rows; productCategoryList.value = response.rows;
} });
);
} }
// 初始化加载 // 初始化加载

102
src/views/service/product/index.vue
View File

@@ -1,6 +1,8 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="background-color-fff padding-20 border-radius-8px margin-bottom-20"> <div
class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
>
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryRef" ref="queryRef"
@@ -25,13 +27,17 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="background-color-fff padding-20 border-radius-8px margin-bottom-20"> <div
class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@@ -86,7 +92,9 @@
</el-row> </el-row>
</div> </div>
<div class="background-color-fff padding-20 border-radius-8px margin-bottom-20"> <div
class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
>
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="productList" :data="productList"
@@ -98,9 +106,18 @@
<el-table-column label="商品编码" align="center" prop="spuCode" /> <el-table-column label="商品编码" align="center" prop="spuCode" />
<el-table-column label="商品名称" align="center" prop="productName" /> <el-table-column label="商品名称" align="center" prop="productName" />
<el-table-column label="副标题" align="center" prop="subTitle" /> <el-table-column label="副标题" align="center" prop="subTitle" />
<el-table-column label="主图URL" align="center" prop="mainImage" width="100"> <el-table-column
label="主图URL"
align="center"
prop="mainImage"
width="100"
>
<template #default="scope"> <template #default="scope">
<image-preview :src="scope.row.mainImage" :width="50" :height="50" /> <image-preview
:src="scope.row.mainImage"
:width="50"
:height="50"
/>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="商品相册" align="center" prop="imageGallery" width="100"> <!-- <el-table-column label="商品相册" align="center" prop="imageGallery" width="100">
@@ -136,6 +153,26 @@
> >
修改 修改
</el-button> </el-button>
<el-button
link
type="primary"
icon="Edit"
v-if="scope.row.status === 0"
@click="handleChangeStatus(scope.row, 1)"
v-hasPermi="['service:product:edit']"
>
上架
</el-button>
<el-button
link
type="primary"
icon="Edit"
v-if="scope.row.status === 1"
@click="handleChangeStatus(scope.row, 0)"
v-hasPermi="['service:product:edit']"
>
下架
</el-button>
<el-button <el-button
link link
type="primary" type="primary"
@@ -167,7 +204,8 @@ import {
delProduct, delProduct,
addProduct, addProduct,
updateProduct, updateProduct,
} from '@/api/service/product'; changeProductStatus,
} from "@/api/service/product";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const router = useRouter(); const router = useRouter();
@@ -180,7 +218,7 @@ const ids = ref([]);
const single = ref(true); const single = ref(true);
const multiple = ref(true); const multiple = ref(true);
const total = ref(0); const total = ref(0);
const title = ref(''); const title = ref("");
const data = reactive({ const data = reactive({
form: {}, form: {},
@@ -213,7 +251,7 @@ const { queryParams, form } = toRefs(data);
/** 查询商品列表列表 */ /** 查询商品列表列表 */
function getList() { function getList() {
loading.value = true; loading.value = true;
listProduct(queryParams.value).then(response => { listProduct(queryParams.value).then((response) => {
productList.value = response.rows; productList.value = response.rows;
total.value = response.total; total.value = response.total;
loading.value = false; loading.value = false;
@@ -253,7 +291,7 @@ function reset() {
updateBy: null, updateBy: null,
updateTime: null, updateTime: null,
}; };
proxy.resetForm('productRef'); proxy.resetForm("productRef");
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
@@ -264,13 +302,13 @@ function handleQuery() {
/** 重置按钮操作 */ /** 重置按钮操作 */
function resetQuery() { function resetQuery() {
proxy.resetForm('queryRef'); proxy.resetForm("queryRef");
handleQuery(); handleQuery();
} }
// 多选框选中数据 // 多选框选中数据
function handleSelectionChange(selection) { function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id); ids.value = selection.map((item) => item.id);
single.value = selection.length != 1; single.value = selection.length != 1;
multiple.value = !selection.length; multiple.value = !selection.length;
} }
@@ -278,8 +316,8 @@ function handleSelectionChange(selection) {
/** 新增按钮操作 */ /** 新增按钮操作 */
function handleAdd() { function handleAdd() {
router.push({ router.push({
path: 'productDetails', path: "productDetails",
name: 'ProductDetails', name: "ProductDetails",
}); });
} }
@@ -288,8 +326,8 @@ function handleUpdate(row) {
reset(); reset();
const _id = row.id || ids.value; const _id = row.id || ids.value;
router.push({ router.push({
path: 'productDetails', path: "productDetails",
name: 'ProductDetails', name: "ProductDetails",
query: { query: {
productId: _id, productId: _id,
}, },
@@ -298,17 +336,17 @@ function handleUpdate(row) {
/** 提交按钮 */ /** 提交按钮 */
function submitForm() { function submitForm() {
proxy.$refs['productRef'].validate(valid => { proxy.$refs["productRef"].validate((valid) => {
if (valid) { if (valid) {
if (form.value.id != null) { if (form.value.id != null) {
updateProduct(form.value).then(response => { updateProduct(form.value).then((response) => {
proxy.$modal.msgSuccess('修改成功'); proxy.$modal.msgSuccess("修改成功");
open.value = false; open.value = false;
getList(); getList();
}); });
} else { } else {
addProduct(form.value).then(response => { addProduct(form.value).then((response) => {
proxy.$modal.msgSuccess('新增成功'); proxy.$modal.msgSuccess("新增成功");
open.value = false; open.value = false;
getList(); getList();
}); });
@@ -317,6 +355,22 @@ function submitForm() {
}); });
} }
/** 上架/下架按钮操作 */
function handleChangeStatus(row, status) {
const _ids = row.id || ids.value;
const action = status === 1 ? "上架" : "下架";
proxy.$modal
.confirm(`是否确认${action}商品列表编号为"${_ids}"的数据项？`)
.then(function () {
return changeProductStatus(_ids, status);
})
.then(() => {
getList();
proxy.$modal.msgSuccess(`${action}成功`);
})
.catch(() => {});
}
/** 删除按钮操作 */ /** 删除按钮操作 */
function handleDelete(row) { function handleDelete(row) {
const _ids = row.id || ids.value; const _ids = row.id || ids.value;
@@ -327,7 +381,7 @@ function handleDelete(row) {
}) })
.then(() => { .then(() => {
getList(); getList();
proxy.$modal.msgSuccess('删除成功'); proxy.$modal.msgSuccess("删除成功");
}) })
.catch(() => {}); .catch(() => {});
} }
@@ -335,11 +389,11 @@ function handleDelete(row) {
/** 导出按钮操作 */ /** 导出按钮操作 */
function handleExport() { function handleExport() {
proxy.download( proxy.download(
'service/product/export', "service/product/export",
{ {
...queryParams.value, ...queryParams.value,
}, },
`product_${new Date().getTime()}.xlsx` `product_${new Date().getTime()}.xlsx`,
); );
} }