xx
This commit is contained in:
@@ -99,7 +99,7 @@
|
||||
<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="warning" link @click="handleParameter(row)">参数</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -181,6 +181,152 @@
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 商品参数列表对话框 -->
|
||||
<el-dialog
|
||||
v-model="paramDialogVisible"
|
||||
title="商品参数管理"
|
||||
width="900px"
|
||||
>
|
||||
<div class="filter-section" style="border: none; padding: 0 0 16px 0;">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAddParameter">
|
||||
<el-icon><Plus /></el-icon>新增参数
|
||||
</el-button>
|
||||
<el-button type="success" @click="fetchParameterList">
|
||||
<el-icon><Refresh /></el-icon>刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="paramLoading"
|
||||
:data="parameterList"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||
>
|
||||
<el-table-column prop="id" label="参数ID" width="100" />
|
||||
<el-table-column prop="name" label="参数名称" min-width="150" />
|
||||
<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 }">
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" link @click="handleEditParameter(row)">编辑</el-button>
|
||||
<el-button type="success" link @click="handleViewParamValues(row)">查看参数值</el-button>
|
||||
<el-button type="danger" link @click="handleDeleteParameter(row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 商品参数表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="paramFormDialogVisible"
|
||||
:title="paramFormType === 'add' ? '新增商品参数' : '编辑商品参数'"
|
||||
width="600px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
ref="paramFormRef"
|
||||
:model="paramForm"
|
||||
:rules="paramRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="参数名称" prop="arg_name">
|
||||
<el-input v-model="paramForm.arg_name" placeholder="请输入参数名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数类型" prop="arg_type">
|
||||
<el-radio-group v-model="paramForm.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>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="paramFormDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitParamForm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 参数值管理对话框 -->
|
||||
<el-dialog
|
||||
v-model="paramValuesDialogVisible"
|
||||
title="参数值管理"
|
||||
width="800px"
|
||||
append-to-body
|
||||
>
|
||||
<div class="values-header">
|
||||
<span>参数：{{ currentParam?.name }}</span>
|
||||
<el-button type="primary" @click="handleAddParamValue">
|
||||
<el-icon><Plus /></el-icon>添加参数值
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="paramValuesLoading"
|
||||
:data="paramValueList"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||
>
|
||||
<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 }">
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" link @click="handleEditParamValue(row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDeleteParamValue(row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 参数值表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="paramValueFormDialogVisible"
|
||||
:title="paramValueFormType === 'add' ? '添加参数值' : '编辑参数值'"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
ref="paramValueFormRef"
|
||||
:model="paramValueForm"
|
||||
:rules="paramValueRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="值名称" prop="attr_name">
|
||||
<el-input v-model="paramValueForm.attr_name" placeholder="请输入值名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="attr_value">
|
||||
<el-input v-model="paramValueForm.attr_value" placeholder="请输入值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格(元)" prop="attr_price">
|
||||
<el-input-number v-model="paramValueForm.attr_price" :min="0" :precision="2" :step="0.01" placeholder="请输入价格" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="paramValueFormDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitParamValueForm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -189,8 +335,16 @@ 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'
|
||||
import { getProductList, createProduct, updateProduct, deleteProduct, getProductGroupList,
|
||||
getProductParameterList,
|
||||
getProductParameterDetail,
|
||||
createProductParameter,
|
||||
updateProductParameter,
|
||||
deleteProductParameter,
|
||||
addProductParameterValue,
|
||||
updateProductParameterValue,
|
||||
deleteProductParameterValue
|
||||
} from '@/api/admin/product'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
@@ -480,6 +634,259 @@ onMounted(() => {
|
||||
fetchProductList()
|
||||
fetchGroupList()
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 参数管理相关逻辑
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
// 状态
|
||||
const paramDialogVisible = ref(false)
|
||||
const paramLoading = ref(false)
|
||||
const parameterList = ref([])
|
||||
const currentProductId = ref(null)
|
||||
|
||||
const paramFormDialogVisible = ref(false)
|
||||
const paramFormType = ref('add')
|
||||
const paramFormRef = ref(null)
|
||||
const paramForm = reactive({
|
||||
arg_id: undefined,
|
||||
arg_name: '',
|
||||
arg_type: 'string'
|
||||
})
|
||||
|
||||
const paramRules = {
|
||||
arg_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
|
||||
arg_type: [{ required: true, message: '请选择参数类型', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const paramValuesDialogVisible = ref(false)
|
||||
const paramValuesLoading = ref(false)
|
||||
const paramValueList = ref([])
|
||||
const currentParam = ref(null)
|
||||
|
||||
const paramValueFormDialogVisible = ref(false)
|
||||
const paramValueFormType = ref('add')
|
||||
const paramValueFormRef = ref(null)
|
||||
const paramValueForm = reactive({
|
||||
attr_id: undefined,
|
||||
attr_name: '',
|
||||
attr_value: '',
|
||||
attr_price: 0
|
||||
})
|
||||
|
||||
const paramValueRules = {
|
||||
attr_name: [{ required: true, message: '请输入值名称', trigger: 'blur' }],
|
||||
attr_value: [{ required: true, message: '请输入值', trigger: 'blur' }],
|
||||
attr_price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
// 打开参数管理
|
||||
const handleParameter = (row) => {
|
||||
currentProductId.value = row.id
|
||||
paramDialogVisible.value = true
|
||||
fetchParameterList()
|
||||
}
|
||||
|
||||
// 获取参数列表
|
||||
const fetchParameterList = async () => {
|
||||
if (!currentProductId.value) return
|
||||
paramLoading.value = true
|
||||
try {
|
||||
const res = await getProductParameterList({ good_id: currentProductId.value })
|
||||
if (res.data.code === 200) {
|
||||
parameterList.value = res.data.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取参数列表失败')
|
||||
} finally {
|
||||
paramLoading.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 handleAddParameter = () => {
|
||||
paramFormType.value = 'add'
|
||||
paramFormDialogVisible.value = true
|
||||
Object.assign(paramForm, {
|
||||
arg_id: undefined,
|
||||
arg_name: '',
|
||||
arg_type: 'string'
|
||||
})
|
||||
paramFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 编辑参数
|
||||
const handleEditParameter = (row) => {
|
||||
paramFormType.value = 'edit'
|
||||
paramFormDialogVisible.value = true
|
||||
Object.assign(paramForm, {
|
||||
arg_id: row.id,
|
||||
arg_name: row.name,
|
||||
arg_type: row.type
|
||||
})
|
||||
}
|
||||
|
||||
// 删除参数
|
||||
const handleDeleteParameter = (row) => {
|
||||
ElMessageBox.confirm(`确认删除参数 ${row.name} 吗？`, '警告', {
|
||||
confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteProductParameter({ good_id: currentProductId.value, arg_id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchParameterList()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 提交参数表单
|
||||
const submitParamForm = () => {
|
||||
paramFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const submitData = {
|
||||
good_id: Number(currentProductId.value),
|
||||
arg_name: paramForm.arg_name,
|
||||
arg_type: paramForm.arg_type
|
||||
}
|
||||
if (paramFormType.value === 'edit') {
|
||||
submitData.arg_id = paramForm.arg_id
|
||||
}
|
||||
|
||||
const res = paramFormType.value === 'add'
|
||||
? await createProductParameter(submitData)
|
||||
: await updateProductParameter(submitData)
|
||||
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(paramFormType.value === 'add' ? '新增成功' : '修改成功')
|
||||
paramFormDialogVisible.value = false
|
||||
fetchParameterList()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.response?.data?.message || '操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查看参数值
|
||||
const handleViewParamValues = (row) => {
|
||||
currentParam.value = row
|
||||
paramValuesDialogVisible.value = true
|
||||
fetchParamValuesList()
|
||||
}
|
||||
|
||||
// 获取参数值列表
|
||||
const fetchParamValuesList = async () => {
|
||||
if (!currentProductId.value || !currentParam.value) return
|
||||
paramValuesLoading.value = true
|
||||
try {
|
||||
const res = await getProductParameterDetail({
|
||||
good_id: currentProductId.value,
|
||||
arg_id: currentParam.value.id
|
||||
})
|
||||
if (res.data.code === 200) {
|
||||
paramValueList.value = res.data.data.attrs || []
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取参数值列表失败')
|
||||
} finally {
|
||||
paramValuesLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 添加参数值
|
||||
const handleAddParamValue = () => {
|
||||
paramValueFormType.value = 'add'
|
||||
paramValueFormDialogVisible.value = true
|
||||
Object.assign(paramValueForm, {
|
||||
attr_id: undefined,
|
||||
attr_name: '',
|
||||
attr_value: '',
|
||||
attr_price: 0
|
||||
})
|
||||
paramValueFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 编辑参数值
|
||||
const handleEditParamValue = (row) => {
|
||||
paramValueFormType.value = 'edit'
|
||||
paramValueFormDialogVisible.value = true
|
||||
Object.assign(paramValueForm, {
|
||||
attr_id: row.id,
|
||||
attr_name: row.name,
|
||||
attr_value: row.value,
|
||||
attr_price: row.price / 100
|
||||
})
|
||||
}
|
||||
|
||||
// 删除参数值
|
||||
const handleDeleteParamValue = (row) => {
|
||||
ElMessageBox.confirm(`确认删除参数值 ${row.name} 吗？`, '警告', {
|
||||
confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteProductParameterValue({
|
||||
good_id: currentProductId.value,
|
||||
attr_id: row.id
|
||||
})
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchParamValuesList()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 提交参数值表单
|
||||
const submitParamValueForm = () => {
|
||||
paramValueFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const submitData = {
|
||||
good_id: Number(currentProductId.value),
|
||||
arg_id: Number(currentParam.value.id),
|
||||
attr_name: paramValueForm.attr_name,
|
||||
attr_value: paramValueForm.attr_value,
|
||||
attr_price: paramValueForm.attr_price
|
||||
}
|
||||
if (paramValueFormType.value === 'edit') {
|
||||
submitData.attr_id = paramValueForm.attr_id
|
||||
}
|
||||
|
||||
const res = paramValueFormType.value === 'add'
|
||||
? await addProductParameterValue(submitData)
|
||||
: await updateProductParameterValue(submitData)
|
||||
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(paramValueFormType.value === 'add' ? '添加成功' : '修改成功')
|
||||
paramValueFormDialogVisible.value = false
|
||||
fetchParamValuesList()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.response?.data?.message || '操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -607,5 +1014,24 @@ onMounted(() => {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.values-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,771 +0,0 @@
|
||||
<template>
|
||||
<div class="product-parameter-container">
|
||||
<!-- 主容器 -->
|
||||
<el-card class="main-container" shadow="never">
|
||||
<!-- 操作栏 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-content">
|
||||
<el-form ref="queryFormRef" label-width="80px" :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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品参数列表 -->
|
||||
<div class="table-section">
|
||||
<!-- 骨架屏 -->
|
||||
<div v-if="loading" class="skeleton-container">
|
||||
<div v-for="i in 5" :key="i" class="skeleton-row">
|
||||
<div class="skeleton-cell skeleton-id"></div>
|
||||
<div class="skeleton-cell skeleton-name"></div>
|
||||
<div class="skeleton-cell skeleton-type"></div>
|
||||
<div class="skeleton-cell skeleton-action"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-else
|
||||
v-loading="loading"
|
||||
:data="parameterList"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||
>
|
||||
<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 }">
|
||||
<div class="action-buttons">
|
||||
<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>
|
||||
</div>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 商品参数表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增商品参数' : '编辑商品参数'"
|
||||
width="600px"
|
||||
append-to-body
|
||||
>
|
||||
<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>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 参数值管理对话框 -->
|
||||
<el-dialog
|
||||
v-model="valuesDialogVisible"
|
||||
title="参数值管理"
|
||||
width="800px"
|
||||
append-to-body
|
||||
>
|
||||
<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"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||
>
|
||||
<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 }">
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" link @click="handleEditValue(row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDeleteValue(row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 参数值表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="valueDialogVisible"
|
||||
:title="valueDialogType === 'add' ? '添加参数值' : '编辑参数值'"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<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>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="valueDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitValueForm">确定</el-button>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
border: 1px solid #e1e8ed;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-form :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.values-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #e1e8ed;
|
||||
background: #fafbfc;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
:deep(.el-table) {
|
||||
border: none;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background: #f8f9fa !important;
|
||||
border-bottom: 2px solid #e1e8ed;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
:deep(.el-table tr:hover > td) {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 骨架屏样式 */
|
||||
.skeleton-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.skeleton-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.skeleton-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.skeleton-cell {
|
||||
height: 20px;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s ease-in-out infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-id { width: 100px; }
|
||||
.skeleton-name { width: 200px; }
|
||||
.skeleton-type { width: 120px; }
|
||||
.skeleton-action { width: 250px; height: 32px; }
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user