feat:添加admin相关接口
This commit is contained in:
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="product-group-container">
|
||||
<!-- 操作栏 -->
|
||||
<el-card class="filter-container" shadow="never">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>新增商品分组
|
||||
</el-button>
|
||||
<el-button type="success" @click="fetchGroupList">
|
||||
<el-icon><Refresh /></el-icon>刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 商品分组列表 -->
|
||||
<el-card class="table-container" shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="groupList"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="id" label="分组ID" width="100" />
|
||||
<el-table-column prop="name" label="分组名称" min-width="200" />
|
||||
<el-table-column prop="note" label="备注" min-width="250" />
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.disable"
|
||||
:active-value="false"
|
||||
:inactive-value="true"
|
||||
@change="(val) => handleStatusChange(row, val)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.page"
|
||||
v-model:page-size="queryParams.count"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
class="pagination"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 商品分组表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增商品分组' : '编辑商品分组'"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="groupFormRef"
|
||||
:model="groupForm"
|
||||
:rules="groupRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="分组名称" prop="name">
|
||||
<el-input v-model="groupForm.name" placeholder="请输入分组名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input v-model="groupForm.note" type="textarea" :rows="4" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="disable">
|
||||
<el-radio-group v-model="groupForm.disable">
|
||||
<el-radio :label="false">启用</el-radio>
|
||||
<el-radio :label="true">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getProductGroupList,
|
||||
createProductGroup,
|
||||
updateProductGroup,
|
||||
deleteProductGroup,
|
||||
hideProductGroup,
|
||||
startProductGroup
|
||||
} from '@/api/admin/product'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
page: 1,
|
||||
count: 10
|
||||
})
|
||||
|
||||
// 商品分组表单
|
||||
const groupForm = reactive({
|
||||
id: undefined,
|
||||
name: '',
|
||||
note: '',
|
||||
disable: false
|
||||
})
|
||||
|
||||
const groupRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入分组名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 状态数据
|
||||
const loading = ref(false)
|
||||
const groupList = ref([])
|
||||
const total = ref(0)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogType = ref('add')
|
||||
const groupFormRef = ref(null)
|
||||
|
||||
// 获取商品分组列表
|
||||
const fetchGroupList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getProductGroupList(queryParams)
|
||||
if (res.data.code === 200) {
|
||||
groupList.value = res.data.data.data || []
|
||||
total.value = res.data.data.total || 0
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取商品分组列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleSizeChange = (size) => {
|
||||
queryParams.count = size
|
||||
fetchGroupList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page) => {
|
||||
queryParams.page = page
|
||||
fetchGroupList()
|
||||
}
|
||||
|
||||
// 新增商品分组
|
||||
const handleAdd = () => {
|
||||
dialogType.value = 'add'
|
||||
dialogVisible.value = true
|
||||
Object.assign(groupForm, {
|
||||
id: undefined,
|
||||
name: '',
|
||||
note: '',
|
||||
disable: false
|
||||
})
|
||||
groupFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 编辑商品分组
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
dialogVisible.value = true
|
||||
Object.assign(groupForm, {
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
note: row.note,
|
||||
disable: row.disable
|
||||
})
|
||||
}
|
||||
|
||||
// 状态变化
|
||||
const handleStatusChange = async (row, disable) => {
|
||||
try {
|
||||
let res
|
||||
if (disable === false) {
|
||||
// 启用
|
||||
res = await startProductGroup({ id: row.id })
|
||||
} else {
|
||||
// 禁用
|
||||
res = await hideProductGroup({ id: row.id })
|
||||
}
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('状态修改成功')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('状态修改失败')
|
||||
row.disable = !disable // 恢复原状态
|
||||
}
|
||||
}
|
||||
|
||||
// 删除商品分组
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`确认删除商品分组 ${row.name} 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteProductGroup({ id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchGroupList()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = () => {
|
||||
groupFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
let res
|
||||
if (dialogType.value === 'add') {
|
||||
res = await createProductGroup(groupForm)
|
||||
} else {
|
||||
res = await updateProductGroup(groupForm)
|
||||
}
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
|
||||
dialogVisible.value = false
|
||||
fetchGroupList()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchGroupList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-group-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 24px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<div class="product-list-container">
|
||||
<!-- 搜索和操作栏 -->
|
||||
<el-card class="filter-container" shadow="never">
|
||||
<el-form :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="商品分组">
|
||||
<el-select v-model="queryParams.good_group_id" placeholder="请选择分组" clearable style="width: 200px">
|
||||
<el-option
|
||||
v-for="item in groupOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<el-icon><Search /></el-icon>查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>新增商品
|
||||
</el-button>
|
||||
<el-button type="success" @click="fetchProductList">
|
||||
<el-icon><Refresh /></el-icon>刷新
|
||||
</el-button>
|
||||
<el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
|
||||
<el-icon><Delete /></el-icon>批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<el-card class="table-container" shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="productList"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="商品ID" width="100" />
|
||||
<el-table-column label="商品图片" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
:src="row.image || '/logo.svg'"
|
||||
fit="cover"
|
||||
style="width: 60px; height: 60px; border-radius: 4px"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="商品名称" min-width="200" />
|
||||
<el-table-column prop="table" label="商品所属表" width="150" />
|
||||
<el-table-column label="价格" width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="price">¥{{ (row.price / 100).toFixed(2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存控制" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.inventory_control ? 'success' : 'info'">
|
||||
{{ row.inventory_control ? '已启用' : '未启用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="inventory" label="库存" width="100" />
|
||||
<el-table-column prop="payNum" label="单次数量" width="100" />
|
||||
<el-table-column label="推荐" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.recommend ? 'success' : 'info'" size="small">
|
||||
{{ row.recommend ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<!-- <el-button type="warning" link @click="handleSpec(row)">规格</el-button> -->
|
||||
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.page"
|
||||
v-model:page-size="queryParams.count"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
class="pagination"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 商品表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增商品' : '编辑商品'"
|
||||
width="700px"
|
||||
>
|
||||
<el-form
|
||||
ref="productFormRef"
|
||||
:model="productForm"
|
||||
:rules="productRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="productForm.name" placeholder="请输入商品名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分组" prop="good_group_id">
|
||||
<el-select v-model="productForm.good_group_id" placeholder="请选择商品分组" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in groupOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品所属表" prop="table">
|
||||
<el-input v-model="productForm.table" placeholder="请输入商品所属表" />
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input v-model="productForm.content" type="textarea" :rows="4" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="封面ID" prop="cover_id">
|
||||
<el-input-number v-model="productForm.cover_id" :min="0" placeholder="请输入封面ID" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<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" placeholder="请输入库存" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品价格(分)" prop="price">
|
||||
<el-input-number v-model="productForm.price" :min="0" placeholder="请输入价格(分)" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单个商品数量" prop="pay_num">
|
||||
<el-input-number v-model="productForm.pay_num" :min="1" placeholder="请输入单个商品数量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期(天)" prop="expire_time">
|
||||
<el-input-number v-model="productForm.expire_time" :min="0" placeholder="请输入有效期" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="推荐" prop="recommend">
|
||||
<el-switch v-model="productForm.recommend" active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
<el-form-item label="推荐返还(%)" prop="recommend_rebate">
|
||||
<el-input-number v-model="productForm.recommend_rebate" :min="0" :max="100" placeholder="请输入返还百分比" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { getFileDetail } from '@/api/admin/file'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Delete, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { getProductList, createProduct, updateProduct, deleteProduct } from '@/api/admin/product'
|
||||
import { getProductGroupList } from '@/api/admin/product'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
good_group_id: '',
|
||||
page: 1,
|
||||
count: 10
|
||||
})
|
||||
|
||||
// 商品表单
|
||||
const productForm = reactive({
|
||||
id: undefined,
|
||||
name: '',
|
||||
table: '',
|
||||
content: '',
|
||||
cover_id: undefined,
|
||||
good_group_id: undefined, // 添加商品分组字段
|
||||
inventory_control: false,
|
||||
inventory: 0,
|
||||
price: 0,
|
||||
pay_num: 1,
|
||||
expire_time: 0,
|
||||
recommend: false,
|
||||
recommend_rebate: 0
|
||||
})
|
||||
|
||||
const productRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入商品名称', trigger: 'blur' }
|
||||
],
|
||||
table: [
|
||||
{ required: true, message: '请输入商品所属表', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入商品内容', trigger: 'blur' }
|
||||
],
|
||||
good_group_id: [
|
||||
{ required: true, message: '请选择商品分组', trigger: 'change' }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: '请输入商品价格', trigger: 'blur' },
|
||||
{ type: 'number', message: '请输入数字', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 状态数据
|
||||
const loading = ref(false)
|
||||
const productList = ref([])
|
||||
const groupOptions = ref([])
|
||||
const total = ref(0)
|
||||
const selectedRows = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const dialogType = ref('add')
|
||||
const productFormRef = ref(null)
|
||||
|
||||
// 获取商品列表
|
||||
const fetchProductList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getProductList(queryParams)
|
||||
if (res.data.code === 200) {
|
||||
productList.value = res.data.data.data || []
|
||||
productList.value = productList.value.filter(item => item.delete == false)
|
||||
total.value = res.data.data.total || 0
|
||||
productList.value = productList.value.map(item => {
|
||||
item.image = item.coverId ? getFileDetail({ file_id: item.coverId }).then(res => res.data.data.url) : ''
|
||||
return item
|
||||
})
|
||||
console.log('productList', productList.value)
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取商品列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取商品分组列表
|
||||
const fetchGroupList = async () => {
|
||||
try {
|
||||
const res = await getProductGroupList({ page: 1, count: 100 })
|
||||
if (res.data.code === 200) {
|
||||
groupOptions.value = res.data.data.data || []
|
||||
console.log('商品分组列表:', groupOptions.value) // 调试日志
|
||||
if (groupOptions.value.length === 0) {
|
||||
ElMessage.warning('暂无商品分组，请先创建商品分组')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取分组列表失败:', error)
|
||||
ElMessage.error('获取分组列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleQuery = () => {
|
||||
queryParams.page = 1
|
||||
fetchProductList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetQuery = () => {
|
||||
queryParams.good_group_id = ''
|
||||
queryParams.page = 1
|
||||
fetchProductList()
|
||||
}
|
||||
|
||||
// 选择项变化
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedRows.value = selection
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleSizeChange = (size) => {
|
||||
queryParams.count = size
|
||||
fetchProductList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page) => {
|
||||
queryParams.page = page
|
||||
fetchProductList()
|
||||
}
|
||||
|
||||
// 新增商品
|
||||
const handleAdd = () => {
|
||||
// 检查是否有可用的商品分组
|
||||
if (!groupOptions.value || groupOptions.value.length === 0) {
|
||||
ElMessage.warning('请先创建商品分组')
|
||||
return
|
||||
}
|
||||
|
||||
dialogType.value = 'add'
|
||||
dialogVisible.value = true
|
||||
Object.assign(productForm, {
|
||||
id: undefined,
|
||||
name: '',
|
||||
table: '',
|
||||
content: '',
|
||||
cover_id: undefined,
|
||||
good_group_id: undefined,
|
||||
inventory_control: false,
|
||||
inventory: 0,
|
||||
price: 0,
|
||||
pay_num: 1,
|
||||
expire_time: 0,
|
||||
recommend: false,
|
||||
recommend_rebate: 0
|
||||
})
|
||||
productFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 编辑商品
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
dialogVisible.value = true
|
||||
Object.assign(productForm, {
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
table: row.table,
|
||||
content: row.content,
|
||||
cover_id: row.coverId,
|
||||
good_group_id: row.goodGroupId,
|
||||
inventory_control: row.inventory_control,
|
||||
inventory: row.inventory,
|
||||
price: row.price,
|
||||
pay_num: row.payNum,
|
||||
expire_time: row.expireTime,
|
||||
recommend: row.recommend,
|
||||
recommend_rebate: row.recommendRebate
|
||||
})
|
||||
}
|
||||
|
||||
// 规格管理
|
||||
const handleSpec = (row) => {
|
||||
ElMessage.info(`商品 ${row.name} 的规格管理功能待实现`)
|
||||
// 可以跳转到规格管理页面或打开规格管理对话框
|
||||
}
|
||||
|
||||
// 删除商品
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`确认删除商品 ${row.name} 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteProduct({ id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchProductList()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
ElMessage.warning('请至少选择一条记录')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条记录吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 使用 Promise.all 并行删除所有选中的商品
|
||||
const deletePromises = selectedRows.value.map(row =>
|
||||
deleteProduct({ id: row.id })
|
||||
)
|
||||
|
||||
const results = await Promise.allSettled(deletePromises)
|
||||
|
||||
// 统计成功和失败的数量
|
||||
const successCount = results.filter(r => r.status === 'fulfilled' && r.value?.data?.code === 200).length
|
||||
const failCount = results.length - successCount
|
||||
|
||||
if (failCount === 0) {
|
||||
ElMessage.success(`批量删除成功，共删除 ${successCount} 条记录`)
|
||||
} else if (successCount === 0) {
|
||||
ElMessage.error(`批量删除失败，所有 ${failCount} 条记录删除失败`)
|
||||
} else {
|
||||
ElMessage.warning(`批量删除完成，成功 ${successCount} 条，失败 ${failCount} 条`)
|
||||
}
|
||||
|
||||
// 刷新列表
|
||||
fetchProductList()
|
||||
} catch (error) {
|
||||
console.error('批量删除失败:', error)
|
||||
ElMessage.error('批量删除操作异常')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = () => {
|
||||
productFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
// 验证商品分组是否已选择
|
||||
if (!productForm.good_group_id) {
|
||||
ElMessage.error('请选择商品分组')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let res
|
||||
// 准备提交的数据，确保所有字段都有正确的值
|
||||
const submitData = {
|
||||
...productForm,
|
||||
good_group_id: Number(productForm.good_group_id), // 确保是数字类型
|
||||
cover_id: productForm.cover_id || 0,
|
||||
inventory: productForm.inventory || 0,
|
||||
price: productForm.price || 0,
|
||||
pay_num: productForm.pay_num || 1,
|
||||
expire_time: productForm.expire_time || 0,
|
||||
recommend_rebate: productForm.recommend_rebate || 0
|
||||
}
|
||||
|
||||
console.log('提交的数据:', submitData) // 调试日志
|
||||
|
||||
if (dialogType.value === 'add') {
|
||||
res = await createProduct(submitData)
|
||||
} else {
|
||||
res = await updateProduct(submitData)
|
||||
}
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
|
||||
dialogVisible.value = false
|
||||
fetchProductList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchProductList()
|
||||
fetchGroupList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-list-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 24px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,637 @@
|
||||
<template>
|
||||
<div class="product-parameter-container">
|
||||
<!-- 操作栏 -->
|
||||
<el-card class="filter-container" shadow="never">
|
||||
<el-form ref="queryFormRef" label-width="100px" :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="商品分组">
|
||||
<el-select
|
||||
v-model="queryParams.good_group_id"
|
||||
placeholder="请选择商品分组"
|
||||
clearable
|
||||
@change="handleGroupChange"
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in groupOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品">
|
||||
<el-select
|
||||
v-model="queryParams.good_id"
|
||||
placeholder="请先选择商品分组"
|
||||
clearable
|
||||
:disabled="!queryParams.good_group_id"
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<el-icon><Search /></el-icon>查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>新增商品参数
|
||||
</el-button>
|
||||
<el-button type="success" @click="fetchParameterList">
|
||||
<el-icon><Refresh /></el-icon>刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 商品参数列表 -->
|
||||
<el-card class="table-container" shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="parameterList"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="id" label="参数ID" width="100" />
|
||||
<el-table-column prop="name" label="参数名称" min-width="200" />
|
||||
<el-table-column prop="type" label="参数类型" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getArgTypeTag(row.type)">
|
||||
{{ getArgTypeText(row.type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button type="success" link @click="handleViewValues(row)">查看参数值</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.page"
|
||||
v-model:page-size="queryParams.count"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
class="pagination"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 商品参数表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增商品参数' : '编辑商品参数'"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="parameterFormRef"
|
||||
:model="parameterForm"
|
||||
:rules="parameterRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="参数名称" prop="arg_name">
|
||||
<el-input v-model="parameterForm.arg_name" placeholder="请输入参数名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数类型" prop="arg_type">
|
||||
<el-radio-group v-model="parameterForm.arg_type">
|
||||
<el-radio label="string">字符串</el-radio>
|
||||
<el-radio label="number">数字</el-radio>
|
||||
<el-radio label="select">选择</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 参数值管理对话框 -->
|
||||
<el-dialog
|
||||
v-model="valuesDialogVisible"
|
||||
title="参数值管理"
|
||||
width="800px"
|
||||
>
|
||||
<div class="values-header">
|
||||
<span>参数：{{ currentParameter?.arg_name }}</span>
|
||||
<el-button type="primary" @click="handleAddValue">
|
||||
<el-icon><Plus /></el-icon>添加参数值
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="valuesLoading"
|
||||
:data="valuesList"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
>
|
||||
<el-table-column prop="id" label="值ID" width="100" />
|
||||
<el-table-column prop="name" label="值名称" min-width="150" />
|
||||
<el-table-column prop="value" label="值" min-width="150" />
|
||||
<el-table-column label="价格" width="120">
|
||||
<template #default="{ row }">
|
||||
¥{{ (row.price / 100).toFixed(2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEditValue(row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDeleteValue(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 参数值表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="valueDialogVisible"
|
||||
:title="valueDialogType === 'add' ? '添加参数值' : '编辑参数值'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form
|
||||
ref="valueFormRef"
|
||||
:model="valueForm"
|
||||
:rules="valueRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="值名称" prop="attr_name">
|
||||
<el-input v-model="valueForm.attr_name" placeholder="请输入值名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="attr_value">
|
||||
<el-input v-model="valueForm.attr_value" placeholder="请输入值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格(元)" prop="attr_price">
|
||||
<el-input-number v-model="valueForm.attr_price" :min="0" :precision="2" :step="0.01" placeholder="请输入价格" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="valueDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitValueForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getProductParameterList,
|
||||
getProductParameterDetail,
|
||||
createProductParameter,
|
||||
updateProductParameter,
|
||||
deleteProductParameter,
|
||||
addProductParameterValue,
|
||||
updateProductParameterValue,
|
||||
deleteProductParameterValue,
|
||||
getProductList,
|
||||
getProductGroupList
|
||||
} from '@/api/admin/product'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
good_group_id: undefined, // 商品分组ID
|
||||
good_id: undefined, // 商品ID
|
||||
page: 1,
|
||||
count: 10
|
||||
})
|
||||
|
||||
// 下拉选项数据
|
||||
const groupOptions = ref([]) // 商品分组选项
|
||||
const productOptions = ref([]) // 商品选项
|
||||
const queryFormRef = ref(null)
|
||||
|
||||
// 商品参数表单
|
||||
const parameterForm = reactive({
|
||||
good_id: undefined,
|
||||
arg_id: undefined,
|
||||
arg_name: '',
|
||||
arg_type: 'string'
|
||||
})
|
||||
|
||||
const parameterRules = {
|
||||
arg_name: [
|
||||
{ required: true, message: '请输入参数名称', trigger: 'blur' }
|
||||
],
|
||||
arg_type: [
|
||||
{ required: true, message: '请选择参数类型', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 参数值表单
|
||||
const valueForm = reactive({
|
||||
good_id: undefined,
|
||||
arg_id: undefined,
|
||||
attr_id: undefined,
|
||||
attr_name: '',
|
||||
attr_value: '',
|
||||
attr_price: 0
|
||||
})
|
||||
|
||||
const valueRules = {
|
||||
attr_name: [
|
||||
{ required: true, message: '请输入值名称', trigger: 'blur' }
|
||||
],
|
||||
attr_value: [
|
||||
{ required: true, message: '请输入值', trigger: 'blur' }
|
||||
],
|
||||
attr_price: [
|
||||
{ required: true, message: '请输入价格', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 状态数据
|
||||
const loading = ref(false)
|
||||
const valuesLoading = ref(false)
|
||||
const parameterList = ref([])
|
||||
const valuesList = ref([])
|
||||
const total = ref(0)
|
||||
const dialogVisible = ref(false)
|
||||
const valuesDialogVisible = ref(false)
|
||||
const valueDialogVisible = ref(false)
|
||||
const dialogType = ref('add')
|
||||
const valueDialogType = ref('add')
|
||||
const currentParameter = ref(null)
|
||||
const parameterFormRef = ref(null)
|
||||
const valueFormRef = ref(null)
|
||||
|
||||
// 获取商品分组列表
|
||||
const fetchGroupList = async () => {
|
||||
try {
|
||||
const res = await getProductGroupList({ page: 1, count: 100 })
|
||||
console.log('商品分组列表:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
groupOptions.value = res.data.data.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取商品分组列表失败:', error)
|
||||
ElMessage.error('获取商品分组列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取商品列表（根据分组ID）
|
||||
const fetchProductList = async (groupId) => {
|
||||
try {
|
||||
const res = await getProductList({ good_group_id: groupId, page: 1, count: 100 })
|
||||
console.log('商品列表:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
productOptions.value = res.data.data.data || []
|
||||
productOptions.value = productOptions.value.filter(item => item.delete == false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取商品列表失败:', error)
|
||||
ElMessage.error('获取商品列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 商品分组改变时
|
||||
const handleGroupChange = (groupId) => {
|
||||
// 清空商品选择
|
||||
queryParams.good_id = undefined
|
||||
productOptions.value = []
|
||||
|
||||
if (groupId) {
|
||||
// 获取该分组下的商品列表
|
||||
fetchProductList(groupId)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取商品参数列表
|
||||
const fetchParameterList = async () => {
|
||||
// 如果没有选择商品ID，不查询
|
||||
if (!queryParams.good_id) {
|
||||
ElMessage.warning('请先选择商品')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getProductParameterList({ good_id: queryParams.good_id })
|
||||
console.log('商品参数列表:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
parameterList.value = res.data.data || []
|
||||
total.value = res.data.data.length || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取商品参数列表失败:', error)
|
||||
ElMessage.error('获取商品参数列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleQuery = () => {
|
||||
queryParams.page = 1
|
||||
fetchParameterList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetQuery = () => {
|
||||
queryParams.good_group_id = undefined
|
||||
queryParams.good_id = undefined
|
||||
queryParams.page = 1
|
||||
productOptions.value = []
|
||||
parameterList.value = []
|
||||
total.value = 0
|
||||
}
|
||||
|
||||
// 获取参数值列表
|
||||
const fetchValuesList = async (goodId, argId) => {
|
||||
valuesLoading.value = true
|
||||
console.log('goodId', goodId)
|
||||
console.log('argId', argId)
|
||||
try {
|
||||
const res = await getProductParameterDetail({ good_id: goodId, arg_id: argId })
|
||||
console.log('参数值列表:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
valuesList.value = res.data.data.attrs || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取参数值列表失败:', error)
|
||||
ElMessage.error('获取参数值列表失败')
|
||||
} finally {
|
||||
valuesLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取参数类型文本
|
||||
const getArgTypeText = (type) => {
|
||||
const typeMap = {
|
||||
'string': '字符串',
|
||||
'number': '数字',
|
||||
'select': '选择'
|
||||
}
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
// 获取参数类型标签颜色
|
||||
const getArgTypeTag = (type) => {
|
||||
const tagMap = {
|
||||
'string': 'primary',
|
||||
'number': 'success',
|
||||
'select': 'warning'
|
||||
}
|
||||
return tagMap[type] || 'info'
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleSizeChange = (size) => {
|
||||
queryParams.count = size
|
||||
fetchParameterList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page) => {
|
||||
queryParams.page = page
|
||||
fetchParameterList()
|
||||
}
|
||||
|
||||
// 新增商品参数
|
||||
const handleAdd = () => {
|
||||
if (!queryParams.good_id) {
|
||||
ElMessage.warning('请先选择商品')
|
||||
return
|
||||
}
|
||||
dialogType.value = 'add'
|
||||
dialogVisible.value = true
|
||||
Object.assign(parameterForm, {
|
||||
good_id: queryParams.good_id,
|
||||
arg_id: undefined,
|
||||
arg_name: '',
|
||||
arg_type: 'string'
|
||||
})
|
||||
parameterFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 编辑商品参数
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
dialogVisible.value = true
|
||||
Object.assign(parameterForm, {
|
||||
good_id: queryParams.good_id,
|
||||
arg_id: row.id,
|
||||
arg_name: row.name,
|
||||
arg_type: row.type
|
||||
})
|
||||
}
|
||||
|
||||
// 查看参数值
|
||||
const handleViewValues = (row) => {
|
||||
currentParameter.value = row
|
||||
valuesDialogVisible.value = true
|
||||
fetchValuesList(queryParams.good_id, row.id)
|
||||
}
|
||||
|
||||
// 添加参数值
|
||||
const handleAddValue = () => {
|
||||
valueDialogType.value = 'add'
|
||||
console.log('currentParameter', currentParameter.value)
|
||||
valueDialogVisible.value = true
|
||||
Object.assign(valueForm, {
|
||||
good_id: queryParams.good_id,
|
||||
arg_id: currentParameter.value.id,
|
||||
attr_id: undefined,
|
||||
attr_name: '',
|
||||
attr_value: '',
|
||||
attr_price: 0
|
||||
})
|
||||
valueFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 编辑参数值
|
||||
const handleEditValue = (row) => {
|
||||
valueDialogType.value = 'edit'
|
||||
valueDialogVisible.value = true
|
||||
Object.assign(valueForm, {
|
||||
good_id: queryParams.good_id,
|
||||
arg_id: currentParameter.value.id,
|
||||
attr_id: row.id,
|
||||
attr_name: row.name,
|
||||
attr_value: row.value,
|
||||
attr_price: row.price / 100 // 分转元
|
||||
})
|
||||
}
|
||||
|
||||
// 删除参数值
|
||||
const handleDeleteValue = (row) => {
|
||||
ElMessageBox.confirm(`确认删除参数值 ${row.name} 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteProductParameterValue({
|
||||
good_id: queryParams.good_id,
|
||||
attr_id: row.id
|
||||
})
|
||||
console.log('删除参数值响应:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchValuesList(queryParams.good_id, currentParameter.value.id)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 删除商品参数
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`确认删除商品参数 ${row.name} 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteProductParameter({
|
||||
good_id: queryParams.good_id,
|
||||
arg_id: row.id
|
||||
})
|
||||
console.log('删除参数响应:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchParameterList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 提交参数表单
|
||||
const submitForm = () => {
|
||||
parameterFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const submitData = {
|
||||
good_id: Number(parameterForm.good_id),
|
||||
arg_name: parameterForm.arg_name,
|
||||
arg_type: parameterForm.arg_type
|
||||
}
|
||||
|
||||
if (dialogType.value === 'edit') {
|
||||
submitData.arg_id = parameterForm.arg_id
|
||||
}
|
||||
|
||||
console.log('提交参数数据:', submitData)
|
||||
|
||||
let res
|
||||
if (dialogType.value === 'add') {
|
||||
res = await createProductParameter(submitData)
|
||||
} else {
|
||||
res = await updateProductParameter(submitData)
|
||||
}
|
||||
|
||||
console.log('提交参数响应:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
|
||||
dialogVisible.value = false
|
||||
fetchParameterList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('操作失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 提交参数值表单
|
||||
const submitValueForm = () => {
|
||||
valueFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const submitData = {
|
||||
good_id: Number(valueForm.good_id),
|
||||
arg_id: Number(valueForm.arg_id),
|
||||
attr_name: valueForm.attr_name,
|
||||
attr_value: valueForm.attr_value,
|
||||
attr_price: valueForm.attr_price // 元转分
|
||||
}
|
||||
|
||||
if (valueDialogType.value === 'edit') {
|
||||
submitData.attr_id = valueForm.attr_id
|
||||
}
|
||||
|
||||
console.log('提交参数值数据:', submitData)
|
||||
|
||||
let res
|
||||
if (valueDialogType.value === 'add') {
|
||||
res = await addProductParameterValue(submitData)
|
||||
} else {
|
||||
res = await updateProductParameterValue(submitData)
|
||||
}
|
||||
|
||||
console.log('提交参数值响应:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(valueDialogType.value === 'add' ? '添加成功' : '修改成功')
|
||||
valueDialogVisible.value = false
|
||||
fetchValuesList(queryParams.good_id, currentParameter.value.id)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('操作失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 初始化时只获取商品分组列表
|
||||
fetchGroupList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-parameter-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.values-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 24px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user