py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wangzhuo

Browse Source
branch_wz
wangzhuo 7 months ago
parent 0470e3576e
commit 54e246ab37
9 changed files with 783 additions and 637 deletions
Show Stats Download Patch File Download Diff File

23
src/views/pms/productAttr/addProductAttr.vue
Unescape View File

@ -1,15 +1,26 @@
<template> <template>
<product-attr-detail :is-edit='false'></product-attr-detail> <!-- 商品属性详情组件 -->
<!-- 使用 ProductAttrDetail 组件，传递 is-edit="false" 表示新增模式 -->
<product-attr-detail :is-edit="false"></product-attr-detail>
</template> </template>
<script> <script>
import ProductAttrDetail from './components/ProductAttrDetail' /**
export default { * 导入 ProductAttrDetail 组件
* 该组件用于处理商品属性的新增和编辑功能
* 通过传递 `is-edit` 参数来控制组件的操作模式
*/
import ProductAttrDetail from './components/ProductAttrDetail';
export default {
// 组件名称：用于标识当前页面
name: 'addProductAttr', name: 'addProductAttr',
components: { ProductAttrDetail } components: {
} ProductAttrDetail, // 注册 ProductAttrDetail 组件
},
};
</script> </script>
<style scoped> <style scoped>
/* 样式部分：暂无自定义样式，可根据需求添加 */
</style> </style>

139
src/views/pms/productAttr/components/ProductAttrDetail.vue
Unescape View File

@ -1,25 +1,38 @@
<template> <template>
<!-- 属性详情表单卡片 -->
<el-card class="form-container" shadow="never"> <el-card class="form-container" shadow="never">
<el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="150px"> <el-form
:model="productAttr"
:rules="rules"
ref="productAttrFrom"
label-width="150px"
>
<!-- 属性名称 -->
<el-form-item label="属性名称：" prop="name"> <el-form-item label="属性名称：" prop="name">
<el-input v-model="productAttr.name"></el-input> <el-input v-model="productAttr.name"></el-input>
</el-form-item> </el-form-item>
<!-- 商品类型选择 -->
<el-form-item label="商品类型："> <el-form-item label="商品类型：">
<el-select v-model="productAttr.productAttributeCategoryId" placeholder="请选择"> <el-select v-model="productAttr.productAttributeCategoryId" placeholder="请选择">
<el-option <el-option
v-for="item in productAttrCateList" v-for="item in productAttrCateList"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id"> :value="item.id"
</el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 分类筛选样式 -->
<el-form-item label="分类筛选样式:"> <el-form-item label="分类筛选样式:">
<el-radio-group v-model="productAttr.filterType"> <el-radio-group v-model="productAttr.filterType">
<el-radio :label="0">普通</el-radio> <el-radio :label="0">普通</el-radio>
<el-radio :label="1">颜色</el-radio> <el-radio :label="1">颜色</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 能否进行检索 -->
<el-form-item label="能否进行检索:"> <el-form-item label="能否进行检索:">
<el-radio-group v-model="productAttr.searchType"> <el-radio-group v-model="productAttr.searchType">
<el-radio :label="0">不需要检索</el-radio> <el-radio :label="0">不需要检索</el-radio>
@ -27,12 +40,16 @@
<el-radio :label="2">范围检索</el-radio> <el-radio :label="2">范围检索</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 商品属性关联 -->
<el-form-item label="商品属性关联:"> <el-form-item label="商品属性关联:">
<el-radio-group v-model="productAttr.relatedStatus"> <el-radio-group v-model="productAttr.relatedStatus">
<el-radio :label="1">是</el-radio> <el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio> <el-radio :label="0">否</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 属性是否可选 -->
<el-form-item label="属性是否可选:"> <el-form-item label="属性是否可选:">
<el-radio-group v-model="productAttr.selectType"> <el-radio-group v-model="productAttr.selectType">
<el-radio :label="0">唯一</el-radio> <el-radio :label="0">唯一</el-radio>
@ -40,24 +57,38 @@
<el-radio :label="2">复选</el-radio> <el-radio :label="2">复选</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 属性值的录入方式 -->
<el-form-item label="属性值的录入方式:"> <el-form-item label="属性值的录入方式:">
<el-radio-group v-model="productAttr.inputType"> <el-radio-group v-model="productAttr.inputType">
<el-radio :label="0">手工录入</el-radio> <el-radio :label="0">手工录入</el-radio>
<el-radio :label="1">从下面列表中选择</el-radio> <el-radio :label="1">从下面列表中选择</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 属性值可选值列表 -->
<el-form-item label="属性值可选值列表:"> <el-form-item label="属性值可选值列表:">
<el-input :autosize="true" type="textarea" v-model="inputListFormat"></el-input> <el-input
:autosize="true"
type="textarea"
v-model="inputListFormat"
></el-input>
</el-form-item> </el-form-item>
<!-- 是否支持手动新增 -->
<el-form-item label="是否支持手动新增:"> <el-form-item label="是否支持手动新增:">
<el-radio-group v-model="productAttr.handAddStatus"> <el-radio-group v-model="productAttr.handAddStatus">
<el-radio :label="1">是</el-radio> <el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio> <el-radio :label="0">否</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 排序属性 -->
<el-form-item label="排序属性："> <el-form-item label="排序属性：">
<el-input v-model="productAttr.sort"></el-input> <el-input v-model="productAttr.sort"></el-input>
</el-form-item> </el-form-item>
<!-- 提交与重置按钮 -->
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit('productAttrFrom')">提交</el-button> <el-button type="primary" @click="onSubmit('productAttrFrom')">提交</el-button>
<el-button v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button> <el-button v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
@ -67,10 +98,15 @@
</template> </template>
<script> <script>
import {fetchList} from '@/api/productAttrCate' import { fetchList } from '@/api/productAttrCate'; // 获取商品类型分类API
import {createProductAttr,getProductAttr,updateProductAttr} from '@/api/productAttr' import {
createProductAttr,
getProductAttr,
updateProductAttr,
} from '@/api/productAttr'; // 创建、获取、更新属性API
const defaultProductAttr = { // 默认商品属性对象
const defaultProductAttr = {
filterType: 0, filterType: 0,
handAddStatus: 0, handAddStatus: 0,
inputList: '', inputList: '',
@ -81,105 +117,118 @@
searchType: 0, searchType: 0,
selectType: 0, selectType: 0,
sort: 0, sort: 0,
type: 0 type: 0,
}; };
export default {
name: "ProductAttrDetail", export default {
name: 'ProductAttrDetail', // 组件名称
props: { props: {
isEdit: { isEdit: {
type: Boolean, type: Boolean, // 是否编辑模式
default: false default: false,
} },
}, },
data() { data() {
return { return {
productAttr: Object.assign({}, defaultProductAttr), productAttr: Object.assign({}, defaultProductAttr), // 商品属性对象
rules: { rules: {
// 表单验证规则
name: [ name: [
{required: true, message: '请输入属性名称', trigger: 'blur'}, { required: true, message: '请输入属性名称', trigger: 'blur' },
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'} { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
] ],
}, },
productAttrCateList: null, productAttrCateList: null, // 商品分类列表
inputListFormat:null inputListFormat: null, // 格式化的输入列表
} };
}, },
created() { created() {
if(this.isEdit){ if (this.isEdit) {
getProductAttr(this.$route.query.id).then(response => { // 编辑模式：获取商品属性数据
getProductAttr(this.$route.query.id).then((response) => {
this.productAttr = response.data; this.productAttr = response.data;
this.inputListFormat = this.productAttr.inputList.replace(/,/g,'\n'); // 将逗号分隔的属性值转换为换行符格式
this.inputListFormat = this.productAttr.inputList.replace(/,/g, '\n');
}); });
}else{ } else {
// 新增模式：初始化商品属性
this.resetProductAttr(); this.resetProductAttr();
} }
this.getCateList(); this.getCateList(); // 获取商品分类列表
}, },
watch:{ watch: {
inputListFormat: function (newValue, oldValue) { // 监听输入列表变化，将换行符替换为逗号分隔
newValue = newValue.replace(/\n/g,','); inputListFormat(newValue) {
newValue = newValue.replace(/\n/g, ',');
this.productAttr.inputList = newValue; this.productAttr.inputList = newValue;
} },
}, },
methods: { methods: {
// 获取商品分类列表
getCateList() { getCateList() {
let listQuery = {pageNum: 1, pageSize: 100}; let listQuery = { pageNum: 1, pageSize: 100 };
fetchList(listQuery).then(response => { fetchList(listQuery).then((response) => {
this.productAttrCateList = response.data.list; this.productAttrCateList = response.data.list;
}); });
}, },
// 重置商品属性对象
resetProductAttr() { resetProductAttr() {
this.productAttr = Object.assign({}, defaultProductAttr); this.productAttr = Object.assign({}, defaultProductAttr);
this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid); this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
this.productAttr.type = Number(this.$route.query.type); this.productAttr.type = Number(this.$route.query.type);
}, },
// 提交表单
onSubmit(formName) { onSubmit(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
// 弹窗确认
this.$confirm('是否提交数据', '提示', { this.$confirm('是否提交数据', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning',
}).then(() => { }).then(() => {
if(this.isEdit){ if (this.isEdit) {
updateProductAttr(this.$route.query.id,this.productAttr).then(response=>{ // 编辑模式：更新数据
updateProductAttr(this.$route.query.id, this.productAttr).then(() => {
this.$message({ this.$message({
message: '修改成功', message: '修改成功',
type: 'success', type: 'success',
duration: 1000 duration: 1000,
}); });
this.$router.back(); this.$router.back();
}); });
}else{ } else {
createProductAttr(this.productAttr).then(response=>{ // 新增模式：创建数据
createProductAttr(this.productAttr).then(() => {
this.$message({ this.$message({
message: '提交成功', message: '提交成功',
type: 'success', type: 'success',
duration: 1000 duration: 1000,
}); });
this.resetForm('productAttrFrom'); this.resetForm(formName);
}); });
} }
}); });
} else { } else {
// 表单验证失败
this.$message({ this.$message({
message: '验证失败', message: '验证失败',
type: 'error', type: 'error',
duration: 1000 duration: 1000,
}); });
return false; return false;
} }
}); });
}, },
// 重置表单
resetForm(formName) { resetForm(formName) {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields();
this.resetProductAttr(); this.resetProductAttr();
}
}, },
} },
};
</script> </script>
<style scoped> <style scoped>
/* 样式部分：可以根据需求添加自定义样式 */
</style> </style>

227
src/views/pms/productAttr/index.vue
Unescape View File

@ -1,82 +1,103 @@
<template>  <template>
<!-- 商品属性分类管理页面 -->
<div class="app-container"> <div class="app-container">
<!-- 操作栏：包含添加按钮 -->
<el-card class="operate-container" shadow="never"> <el-card class="operate-container" shadow="never">
<i class="el-icon-tickets" style="margin-top: 5px"></i> <i class="el-icon-tickets" style="margin-top: 5px"></i>
<span style="margin-top: 5px">数据列表</span> <span style="margin-top: 5px">数据列表</span>
<el-button <!-- 添加商品属性分类按钮 -->
class="btn-add" <el-button class="btn-add" @click="addProductAttrCate()" size="mini">添加</el-button>
@click="addProductAttrCate()"
size="mini">
添加
</el-button>
</el-card> </el-card>
<!-- 数据表格区域 -->
<div class="table-container"> <div class="table-container">
<el-table ref="productAttrCateTable" <el-table
ref="productAttrCateTable"
style="width: 100%" style="width: 100%"
:data="list" :data="list"
v-loading="listLoading" v-loading="listLoading"
border> border
>
<!-- 列：编号 -->
<el-table-column label="编号" width="100" align="center"> <el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template> <template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column> </el-table-column>
<!-- 列：类型名称 -->
<el-table-column label="类型名称" align="center"> <el-table-column label="类型名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column> </el-table-column>
<!-- 列：属性数量 -->
<el-table-column label="属性数量" width="200" align="center"> <el-table-column label="属性数量" width="200" align="center">
<template slot-scope="scope">{{scope.row.attributeCount==null?0:scope.row.attributeCount}}</template> <template slot-scope="scope">
{{ scope.row.attributeCount == null ? 0 : scope.row.attributeCount }}
</template>
</el-table-column> </el-table-column>
<!-- 列：参数数量 -->
<el-table-column label="参数数量" width="200" align="center"> <el-table-column label="参数数量" width="200" align="center">
<template slot-scope="scope">{{scope.row.paramCount==null?0:scope.row.paramCount}}</template> <template slot-scope="scope">
{{ scope.row.paramCount == null ? 0 : scope.row.paramCount }}
</template>
</el-table-column> </el-table-column>
<!-- 列：设置 -->
<el-table-column label="设置" width="200" align="center"> <el-table-column label="设置" width="200" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <!-- 属性列表按钮 -->
size="mini" <el-button size="mini" @click="getAttrList(scope.$index, scope.row)">
@click="getAttrList(scope.$index, scope.row)">属性列表 属性列表
</el-button> </el-button>
<el-button <!-- 参数列表按钮 -->
size="mini" <el-button size="mini" @click="getParamList(scope.$index, scope.row)">
@click="getParamList(scope.$index, scope.row)">参数列表 参数列表
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<!-- 列：操作 -->
<el-table-column label="操作" width="200" align="center"> <el-table-column label="操作" width="200" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <!-- 编辑按钮 -->
size="mini" <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
@click="handleUpdate(scope.$index, scope.row)">编辑 <!-- 删除按钮 -->
</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
<el-button 删除
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 分页组件 -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper" layout="total, sizes, prev, pager, next, jumper"
:page-size="listQuery.pageSize" :page-size="listQuery.pageSize"
:page-sizes="[5,10,15]" :page-sizes="[5, 10, 15]"
:current-page.sync="listQuery.pageNum" :current-page.sync="listQuery.pageNum"
:total="total"> :total="total"
</el-pagination> ></el-pagination>
</div> </div>
<!-- 弹出框：添加/编辑商品属性分类 -->
<el-dialog <el-dialog
:title="dialogTitle" :title="dialogTitle"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
:before-close="handleClose()" :before-close="handleClose"
width="30%"> width="30%"
<el-form ref="productAttrCatForm":model="productAttrCate" :rules="rules" label-width="120px"> >
<!-- 表单：输入类型名称 -->
<el-form ref="productAttrCatForm" :model="productAttrCate" :rules="rules" label-width="120px">
<el-form-item label="类型名称" prop="name"> <el-form-item label="类型名称" prop="name">
<el-input v-model="productAttrCate.name" auto-complete="off"></el-input> <el-input v-model="productAttrCate.name" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 弹窗底部操作按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleConfirm('productAttrCatForm')">确 定</el-button> <el-button type="primary" @click="handleConfirm('productAttrCatForm')">确 定</el-button>
@ -84,127 +105,155 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import {fetchList,createProductAttrCate,deleteProductAttrCate,updateProductAttrCate} from '@/api/productAttrCate' /**
* 导入商品属性分类相关的 API
*/
import {
fetchList,
createProductAttrCate,
deleteProductAttrCate,
updateProductAttrCate,
} from '@/api/productAttrCate';
export default { export default {
name: 'productAttrCateList', name: 'productAttrCateList', // 组件名称
data() { data() {
return { return {
list: null, list: null, // 数据列表
total: null, total: null, // 数据总条数
listLoading: true, listLoading: true, // 加载状态
listQuery: { listQuery: {
pageNum: 1, pageNum: 1,
pageSize: 5 pageSize: 5,
}, },
dialogVisible: false, dialogVisible: false, // 控制弹窗的显示
dialogTitle:'', dialogTitle: '', // 弹窗标题
productAttrCate:{ productAttrCate: {
name:'', name: '',
id:null id: null,
}, },
rules: { rules: {
name: [ name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
{ required: true, message: '请输入类型名称', trigger: 'blur' } },
] };
}
}
}, },
created() { created() {
// 页面加载时获取数据列表
this.getList(); this.getList();
}, },
methods: { methods: {
// 获取数据列表
getList() { getList() {
this.listLoading = true; this.listLoading = true;
fetchList(this.listQuery).then(response => { fetchList(this.listQuery).then((response) => {
this.listLoading = false; this.listLoading = false;
this.list = response.data.list; this.list = response.data.list;
this.total = response.data.total; this.total = response.data.total;
}); });
}, },
// 添加商品属性分类
addProductAttrCate() { addProductAttrCate() {
this.dialogVisible = true; this.dialogVisible = true;
this.dialogTitle = "添加类型"; this.dialogTitle = '添加类型';
this.productAttrCate = { name: '', id: null };
}, },
// 处理分页大小变化
handleSizeChange(val) { handleSizeChange(val) {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.listQuery.pageSize = val; this.listQuery.pageSize = val;
this.getList(); this.getList();
}, },
// 处理页码变化
handleCurrentChange(val) { handleCurrentChange(val) {
this.listQuery.pageNum = val; this.listQuery.pageNum = val;
this.getList(); this.getList();
}, },
// 删除商品属性分类
handleDelete(index, row) { handleDelete(index, row) {
this.$confirm('是否要删除该品牌', '提示', { this.$confirm('是否要删除该分类？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning',
}).then(() => { }).then(() => {
deleteProductAttrCate(row.id).then(response=>{ deleteProductAttrCate(row.id).then(() => {
this.$message({ this.$message({
message: '删除成功', message: '删除成功',
type: 'success', type: 'success',
duration:1000 duration: 1000,
}); });
this.getList(); this.getList();
}); });
}); });
}, },
// 编辑商品属性分类
handleUpdate(index, row) { handleUpdate(index, row) {
this.dialogVisible = true; this.dialogVisible = true;
this.dialogTitle = "编辑类型"; this.dialogTitle = '编辑类型';
this.productAttrCate.name = row.name; this.productAttrCate.name = row.name;
this.productAttrCate.id = row.id; this.productAttrCate.id = row.id;
}, },
// 跳转到属性列表
getAttrList(index, row) { getAttrList(index, row) {
this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}}) this.$router.push({
path: '/pms/productAttrList',
query: { cid: row.id, cname: row.name, type: 0 },
});
}, },
// 跳转到参数列表
getParamList(index, row) { getParamList(index, row) {
this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:1}}) this.$router.push({
path: '/pms/productAttrList',
query: { cid: row.id, cname: row.name, type: 1 },
});
}, },
handleConfirm(formName){
// 确认弹窗提交
handleConfirm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
let data = new URLSearchParams(); const data = new URLSearchParams();
data.append("name",this.productAttrCate.name); data.append('name', this.productAttrCate.name);
if(this.dialogTitle==="添加类型"){
createProductAttrCate(data).then(response=>{ if (this.dialogTitle === '添加类型') {
this.$message({ // 添加类型
message: '添加成功', createProductAttrCate(data).then(() => {
type: 'success', this.$message({ message: '添加成功', type: 'success', duration: 1000 });
duration:1000
});
this.dialogVisible = false; this.dialogVisible = false;
this.getList(); this.getList();
}); });
}else{ } else {
updateProductAttrCate(this.productAttrCate.id,data).then(response=>{ // 修改类型
this.$message({ updateProductAttrCate(this.productAttrCate.id, data).then(() => {
message: '修改成功', this.$message({ message: '修改成功', type: 'success', duration: 1000 });
type: 'success',
duration:1000
});
this.dialogVisible = false; this.dialogVisible = false;
this.getList(); this.getList();
}); });
} }
} else {
console.log('error submit!!');
return false;
} }
}); });
}, },
handleClose(){
if (!this.dialogVisible && this.$refs.productAttrCatForm) { // 关闭弹窗时清除表单校验
this.$refs.productAttrCatForm.clearValidate() handleClose() {
} if (this.$refs.productAttrCatForm) {
} this.$refs.productAttrCatForm.clearValidate();
}
} }
},
},
};
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<style scoped>
.app-container {
padding: 20px;
}
</style>

207
src/views/pms/productAttr/productAttrList.vue
Unescape View File

@ -1,143 +1,170 @@
<template>  <template>
<!-- 商品属性列表页面 -->
<div class="app-container"> <div class="app-container">
<!-- 操作栏：包含添加按钮 -->
<el-card class="operate-container" shadow="never"> <el-card class="operate-container" shadow="never">
<i class="el-icon-tickets" style="margin-top: 5px"></i> <i class="el-icon-tickets" style="margin-top: 5px"></i>
<span style="margin-top: 5px">数据列表</span> <span style="margin-top: 5px">数据列表</span>
<el-button <!-- 添加按钮：跳转到添加商品属性页面 -->
class="btn-add" <el-button class="btn-add" @click="addProductAttr()" size="mini">添加</el-button>
@click="addProductAttr()"
size="mini">
添加
</el-button>
</el-card> </el-card>
<!-- 数据表格区域 -->
<div class="table-container"> <div class="table-container">
<el-table ref="productAttrTable" <el-table
ref="productAttrTable"
:data="list" :data="list"
style="width: 100%" style="width: 100%"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
v-loading="listLoading" v-loading="listLoading"
border> border
>
<!-- 多选框 -->
<el-table-column type="selection" width="60" align="center"></el-table-column> <el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 编号列 -->
<el-table-column label="编号" width="100" align="center"> <el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template> <template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column> </el-table-column>
<!-- 属性名称列 -->
<el-table-column label="属性名称" width="140" align="center"> <el-table-column label="属性名称" width="140" align="center">
<template slot-scope="scope">{{scope.row.name}}</template> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column> </el-table-column>
<!-- 商品类型列 -->
<el-table-column label="商品类型" width="140" align="center"> <el-table-column label="商品类型" width="140" align="center">
<template slot-scope="scope">{{$route.query.cname}}</template> <template slot-scope="scope">{{ $route.query.cname }}</template>
</el-table-column> </el-table-column>
<!-- 属性是否可选列 -->
<el-table-column label="属性是否可选" width="120" align="center"> <el-table-column label="属性是否可选" width="120" align="center">
<template slot-scope="scope">{{scope.row.selectType|selectTypeFilter}}</template> <template slot-scope="scope">{{ scope.row.selectType | selectTypeFilter }}</template>
</el-table-column> </el-table-column>
<!-- 属性值录入方式列 -->
<el-table-column label="属性值的录入方式" width="150" align="center"> <el-table-column label="属性值的录入方式" width="150" align="center">
<template slot-scope="scope">{{scope.row.inputType|inputTypeFilter}}</template> <template slot-scope="scope">{{ scope.row.inputType | inputTypeFilter }}</template>
</el-table-column> </el-table-column>
<!-- 可选值列表列 -->
<el-table-column label="可选值列表" align="center"> <el-table-column label="可选值列表" align="center">
<template slot-scope="scope">{{scope.row.inputList}}</template> <template slot-scope="scope">{{ scope.row.inputList }}</template>
</el-table-column> </el-table-column>
<!-- 排序列 -->
<el-table-column label="排序" width="100" align="center"> <el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template> <template slot-scope="scope">{{ scope.row.sort }}</template>
</el-table-column> </el-table-column>
<!-- 操作列 -->
<el-table-column label="操作" width="200" align="center"> <el-table-column label="操作" width="200" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <!-- 编辑按钮 -->
size="mini" <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
@click="handleUpdate(scope.$index, scope.row)">编辑 <!-- 删除按钮 -->
</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 批量操作栏 -->
<div class="batch-operate-container"> <div class="batch-operate-container">
<el-select <el-select size="small" v-model="operateType" placeholder="批量操作">
size="small"
v-model="operateType" placeholder="批量操作">
<el-option <el-option
v-for="item in operates" v-for="item in operates"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> ></el-option>
</el-select> </el-select>
<el-button <el-button
style="margin-left: 20px" style="margin-left: 20px"
class="search-button" class="search-button"
@click="handleBatchOperate()" @click="handleBatchOperate()"
type="primary" type="primary"
size="small"> size="small"
>
确定 确定
</el-button> </el-button>
</div> </div>
<!-- 分页组件 -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper" layout="total, sizes, prev, pager, next, jumper"
:page-size="listQuery.pageSize" :page-size="listQuery.pageSize"
:page-sizes="[5,10,15]" :page-sizes="[5, 10, 15]"
:current-page.sync="listQuery.pageNum" :current-page.sync="listQuery.pageNum"
:total="total"> :total="total"
</el-pagination> ></el-pagination>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {fetchList, deleteProductAttr} from '@/api/productAttr' /**
* 导入商品属性相关 API
*/
import { fetchList, deleteProductAttr } from '@/api/productAttr';
export default { export default {
name: 'productAttrList', name: 'productAttrList', // 组件名称
data() { data() {
return { return {
list: null, list: null, // 商品属性数据列表
total: null, total: null, // 数据总条数
listLoading: true, listLoading: true, // 加载状态
listQuery: { listQuery: {
pageNum: 1, pageNum: 1,
pageSize: 5, pageSize: 5,
type: this.$route.query.type type: this.$route.query.type, // 查询参数，来源于路由
}, },
operateType: null, operateType: null, // 批量操作类型
multipleSelection: [], multipleSelection: [], // 多选的属性集合
operates: [ operates: [
{ { label: '删除', value: 'deleteProductAttr' }, // 批量操作选项
label: "删除", ],
value: "deleteProductAttr" };
}
]
}
}, },
created() { created() {
this.getList(); this.getList(); // 页面加载时获取数据列表
}, },
methods: { methods: {
// 获取商品属性列表
getList() { getList() {
this.listLoading = true; this.listLoading = true;
fetchList(this.$route.query.cid, this.listQuery).then(response => { fetchList(this.$route.query.cid, this.listQuery).then((response) => {
this.listLoading = false; this.listLoading = false;
this.list = response.data.list; this.list = response.data.list;
this.total = response.data.total; this.total = response.data.total;
}); });
}, },
// 添加商品属性
addProductAttr() { addProductAttr() {
this.$router.push({path:'/pms/addProductAttr',query:{cid:this.$route.query.cid,type:this.$route.query.type}}); this.$router.push({
path: '/pms/addProductAttr',
query: { cid: this.$route.query.cid, type: this.$route.query.type },
});
}, },
// 处理多选操作
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
// 批量操作处理
handleBatchOperate() { handleBatchOperate() {
if (this.multipleSelection < 1) { if (this.multipleSelection.length < 1) {
this.$message({ this.$message({
message: '请选择一条记录', message: '请选择至少一条记录',
type: 'warning', type: 'warning',
duration: 1000 duration: 1000,
}); });
return; return;
} }
@ -145,75 +172,77 @@
this.$message({ this.$message({
message: '请选择批量操作类型', message: '请选择批量操作类型',
type: 'warning', type: 'warning',
duration: 1000 duration: 1000,
}); });
return; return;
} }
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) { const ids = this.multipleSelection.map((item) => item.id);
ids.push(this.multipleSelection[i].id);
}
this.handleDeleteProductAttr(ids); this.handleDeleteProductAttr(ids);
}, },
// 页码大小变化
handleSizeChange(val) { handleSizeChange(val) {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.listQuery.pageSize = val; this.listQuery.pageSize = val;
this.getList(); this.getList();
}, },
// 页码切换
handleCurrentChange(val) { handleCurrentChange(val) {
this.listQuery.pageNum = val; this.listQuery.pageNum = val;
this.getList(); this.getList();
}, },
// 跳转到编辑页面
handleUpdate(index, row) { handleUpdate(index, row) {
this.$router.push({path:'/pms/updateProductAttr',query:{id:row.id}}); this.$router.push({ path: '/pms/updateProductAttr', query: { id: row.id } });
}, },
// 删除商品属性
handleDeleteProductAttr(ids) { handleDeleteProductAttr(ids) {
this.$confirm('是否要删除该属性', '提示', { this.$confirm('是否要删除选中的属性？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning',
}).then(() => { }).then(() => {
let data = new URLSearchParams(); const data = new URLSearchParams();
data.append("ids", ids); data.append('ids', ids);
deleteProductAttr(data).then(response => { deleteProductAttr(data).then(() => {
this.$message({ this.$message({
message: '删除成功', message: '删除成功',
type: 'success', type: 'success',
duration: 1000 duration: 1000,
}); });
this.getList(); this.getList();
}); });
}); });
}, },
// 删除单个商品属性
handleDelete(index, row) { handleDelete(index, row) {
let ids = []; const ids = [row.id];
ids.push(row.id);
this.handleDeleteProductAttr(ids); this.handleDeleteProductAttr(ids);
}, },
}, },
filters: { filters: {
// 过滤器：属性值的录入方式
inputTypeFilter(value) { inputTypeFilter(value) {
if (value === 1) { return value === 1 ? '从列表中选取' : '手工录入';
return '从列表中选取';
} else {
return '手工录入'
}
}, },
// 过滤器：属性是否可选
selectTypeFilter(value) { selectTypeFilter(value) {
if (value === 1) { if (value === 1) return '单选';
return '单选'; if (value === 2) return '多选';
} else if (value === 2) { return '唯一';
return '多选';
} else {
return '唯一'
}
}, },
} },
} };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style scoped>
/* 自定义样式区域 */
.app-container {
padding: 20px;
}
</style> </style>

17
src/views/pms/productAttr/updateProductAttr.vue
Unescape View File

@ -1,15 +1,20 @@
<template> <template>
<product-attr-detail :is-edit='true'></product-attr-detail> <!-- 引入商品属性详情组件，编辑模式下展示 -->
<product-attr-detail :is-edit="true"></product-attr-detail>
</template> </template>
<script> <script>
import ProductAttrDetail from './components/ProductAttrDetail' // 引入商品属性详情组件
import ProductAttrDetail from './components/ProductAttrDetail';
export default { export default {
name: 'updateProductAttr', name: 'updateProductAttr', // 组件名称
components: { ProductAttrDetail } components: {
} ProductAttrDetail, // 注册 ProductAttrDetail 组件
},
};
</script> </script>
<style scoped> <style scoped>
/* scoped 表示样式只会应用于当前组件 */
</style> </style>

22
src/views/pms/productCate/add.vue
Unescape View File

@ -1,14 +1,20 @@
<template>  <template>
<product-cate-detail :is-edit='false'></product-cate-detail> <!-- 渲染分类详情组件，is-edit 为 false 表示“添加模式” -->
<product-cate-detail :is-edit="false"></product-cate-detail>
</template> </template>
<script> <script>
import ProductCateDetail from './components/ProductCateDetail' // 导入分类详情组件
import ProductCateDetail from './components/ProductCateDetail';
export default { export default {
name: 'addProductCate', name: 'addProductCate', // 组件名称
components: { ProductCateDetail } components: {
} ProductCateDetail, // 注册子组件 ProductCateDetail
},
};
</script> </script>
<style> <style>
/* 样式作用域：默认留空，可以根据需要添加样式 */
</style> </style>

196
src/views/pms/productCate/components/ProductCateDetail.vue
Unescape View File

@ -1,15 +1,19 @@
<template> <template>
<!-- 分类详情表单，使用 Element UI -->
<el-card class="form-container" shadow="never"> <el-card class="form-container" shadow="never">
<el-form :model="productCate" <el-form :model="productCate"
:rules="rules" :rules="rules"
ref="productCateFrom" ref="productCateFrom"
label-width="150px"> label-width="150px">
<!-- 分类名称输入框 -->
<el-form-item label="分类名称：" prop="name"> <el-form-item label="分类名称：" prop="name">
<el-input v-model="productCate.name"></el-input> <el-input v-model="productCate.name"></el-input>
</el-form-item> </el-form-item>
<!-- 上级分类选择框 -->
<el-form-item label="上级分类："> <el-form-item label="上级分类：">
<el-select v-model="productCate.parentId" <el-select v-model="productCate.parentId" placeholder="请选择分类">
placeholder="请选择分类">
<el-option <el-option
v-for="item in selectProductCateList" v-for="item in selectProductCateList"
:key="item.id" :key="item.id"
@ -18,47 +22,67 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 数量单位输入框 -->
<el-form-item label="数量单位："> <el-form-item label="数量单位：">
<el-input v-model="productCate.productUnit"></el-input> <el-input v-model="productCate.productUnit"></el-input>
</el-form-item> </el-form-item>
<!-- 排序输入框 -->
<el-form-item label="排序："> <el-form-item label="排序：">
<el-input v-model="productCate.sort"></el-input> <el-input v-model="productCate.sort"></el-input>
</el-form-item> </el-form-item>
<!-- 是否显示单选按钮 -->
<el-form-item label="是否显示："> <el-form-item label="是否显示：">
<el-radio-group v-model="productCate.showStatus"> <el-radio-group v-model="productCate.showStatus">
<el-radio :label="1">是</el-radio> <el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio> <el-radio :label="0">否</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 是否显示在导航栏 -->
<el-form-item label="是否显示在导航栏："> <el-form-item label="是否显示在导航栏：">
<el-radio-group v-model="productCate.navStatus"> <el-radio-group v-model="productCate.navStatus">
<el-radio :label="1">是</el-radio> <el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio> <el-radio :label="0">否</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 分类图标上传组件 -->
<el-form-item label="分类图标："> <el-form-item label="分类图标：">
<single-upload v-model="productCate.icon"></single-upload> <single-upload v-model="productCate.icon"></single-upload>
</el-form-item> </el-form-item>
<!-- 筛选属性列表 -->
<el-form-item v-for="(filterProductAttr, index) in filterProductAttrList" <el-form-item v-for="(filterProductAttr, index) in filterProductAttrList"
:label="index | filterLabelFilter" :label="index | filterLabelFilter"
:key="filterProductAttr.key" :key="filterProductAttr.key">
>
<el-cascader <el-cascader
clearable clearable
v-model="filterProductAttr.value" v-model="filterProductAttr.value"
:options="filterAttrs"> :options="filterAttrs">
</el-cascader> </el-cascader>
<!-- 删除按钮 -->
<el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(filterProductAttr)">删除</el-button> <el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(filterProductAttr)">删除</el-button>
</el-form-item> </el-form-item>
<!-- 新增筛选属性按钮 -->
<el-form-item> <el-form-item>
<el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button> <el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
</el-form-item> </el-form-item>
<!-- 关键词输入框 -->
<el-form-item label="关键词："> <el-form-item label="关键词：">
<el-input v-model="productCate.keywords"></el-input> <el-input v-model="productCate.keywords"></el-input>
</el-form-item> </el-form-item>
<!-- 分类描述输入框 -->
<el-form-item label="分类描述："> <el-form-item label="分类描述：">
<el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input> <el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
</el-form-item> </el-form-item>
<!-- 提交和重置按钮 -->
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button> <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
<el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button> <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
@ -68,6 +92,7 @@
</template> </template>
<script> <script>
// API 引入
import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate'; import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate';
import {fetchListWithAttr} from '@/api/productAttrCate'; import {fetchListWithAttr} from '@/api/productAttrCate';
import {getProductAttrInfo} from '@/api/productAttr'; import {getProductAttrInfo} from '@/api/productAttr';
@ -85,9 +110,10 @@
sort: 0, sort: 0,
productAttributeIdList: [] productAttributeIdList: []
}; };
export default { export default {
name: "ProductCateDetail", name: "ProductCateDetail",
components: {SingleUpload}, components: { SingleUpload },
props: { props: {
isEdit: { isEdit: {
type: Boolean, type: Boolean,
@ -97,168 +123,114 @@
data() { data() {
return { return {
productCate: Object.assign({}, defaultProductCate), productCate: Object.assign({}, defaultProductCate),
selectProductCateList: [], selectProductCateList: [], // 上级分类列表
rules: { rules: {
name: [ name: [
{required: true, message: '请输入品牌名称', trigger: 'blur'}, { required: true, message: '请输入品牌名称', trigger: 'blur' },
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'} { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
] ]
}, },
filterAttrs: [], filterAttrs: [], // 筛选属性列表
filterProductAttrList: [{ filterProductAttrList: [{ value: [] }] // 已选筛选属性
value: [] };
}]
}
}, },
created() { created() {
if (this.isEdit) { if (this.isEdit) {
// 编辑模式下，获取分类详情数据
getProductCate(this.$route.query.id).then(response => { getProductCate(this.$route.query.id).then(response => {
this.productCate = response.data; this.productCate = response.data;
}); });
// 获取筛选属性数据
getProductAttrInfo(this.$route.query.id).then(response => { getProductAttrInfo(this.$route.query.id).then(response => {
if (response.data != null && response.data.length > 0) { if (response.data != null && response.data.length > 0) {
this.filterProductAttrList = []; this.filterProductAttrList = response.data.map((item, index) => ({
for (let i = 0; i < response.data.length; i++) { key: Date.now() + index,
this.filterProductAttrList.push({ value: [item.attributeCategoryId, item.attributeId]
key: Date.now() + i, }));
value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
})
}
} }
}); });
} else {
this.productCate = Object.assign({}, defaultProductCate);
} }
this.getSelectProductCateList(); this.getSelectProductCateList();
this.getProductAttrCateList(); this.getProductAttrCateList();
}, },
methods: { methods: {
// 获取上级分类列表
getSelectProductCateList() { getSelectProductCateList() {
fetchList(0, {pageSize: 100, pageNum: 1}).then(response => { fetchList(0, { pageSize: 100, pageNum: 1 }).then(response => {
this.selectProductCateList = response.data.list; this.selectProductCateList = response.data.list;
this.selectProductCateList.unshift({id: 0, name: '无上级分类'}); this.selectProductCateList.unshift({ id: 0, name: '无上级分类' });
}); });
}, },
// 获取筛选属性分类及其属性
getProductAttrCateList() { getProductAttrCateList() {
fetchListWithAttr().then(response => { fetchListWithAttr().then(response => {
let list = response.data; this.filterAttrs = response.data.map(category => ({
for (let i = 0; i < list.length; i++) { label: category.name,
let productAttrCate = list[i]; value: category.id,
let children = []; children: category.productAttributeList.map(attr => ({
if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) { label: attr.name,
for (let j = 0; j < productAttrCate.productAttributeList.length; j++) { value: attr.id
children.push({ }))
label: productAttrCate.productAttributeList[j].name, }));
value: productAttrCate.productAttributeList[j].id
})
}
}
this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
}
}); });
}, },
getProductAttributeIdList() { // 提交表单数据
//获取选中的筛选商品属性
let productAttributeIdList = [];
for (let i = 0; i < this.filterProductAttrList.length; i++) {
let item = this.filterProductAttrList[i];
if (item.value !== null && item.value.length === 2) {
productAttributeIdList.push(item.value[1]);
}
}
return productAttributeIdList;
},
onSubmit(formName) { onSubmit(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate(valid => {
if (valid) { if (valid) {
this.$confirm('是否提交数据', '提示', { this.$confirm('是否提交数据', '提示', { type: 'warning' }).then(() => {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
this.productCate.productAttributeIdList = this.getProductAttributeIdList(); this.productCate.productAttributeIdList = this.getProductAttributeIdList();
updateProductCate(this.$route.query.id, this.productCate).then(response => { if (this.isEdit) {
this.$message({ updateProductCate(this.$route.query.id, this.productCate).then(() => {
message: '修改成功', this.$message.success('修改成功');
type: 'success',
duration: 1000
});
this.$router.back(); this.$router.back();
}); });
} else { } else {
this.productCate.productAttributeIdList = this.getProductAttributeIdList(); createProductCate(this.productCate).then(() => {
createProductCate(this.productCate).then(response => {
this.$refs[formName].resetFields();
this.resetForm(formName); this.resetForm(formName);
this.$message({ this.$message.success('提交成功');
message: '提交成功',
type: 'success',
duration: 1000
});
}); });
} }
}); });
} else { } else {
this.$message({ this.$message.error('验证失败');
message: '验证失败',
type: 'error',
duration: 1000
});
return false;
} }
}); });
}, },
// 重置表单
resetForm(formName) { resetForm(formName) {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields();
this.productCate = Object.assign({}, defaultProductCate); this.productCate = Object.assign({}, defaultProductCate);
this.getSelectProductCateList();
this.filterProductAttrList = [{
value: []
}];
}, },
removeFilterAttr(productAttributeId) { // 获取选中的筛选属性ID列表
if (this.filterProductAttrList.length === 1) { getProductAttributeIdList() {
this.$message({ return this.filterProductAttrList
message: '至少要留一个', .filter(item => item.value.length === 2)
type: 'warning', .map(item => item.value[1]);
duration: 1000 },
}); // 删除筛选属性
return; removeFilterAttr(filterAttr) {
} const index = this.filterProductAttrList.indexOf(filterAttr);
var index = this.filterProductAttrList.indexOf(productAttributeId); if (index > -1) this.filterProductAttrList.splice(index, 1);
if (index !== -1) {
this.filterProductAttrList.splice(index, 1)
}
}, },
// 添加筛选属性
handleAddFilterAttr() { handleAddFilterAttr() {
if (this.filterProductAttrList.length === 3) { if (this.filterProductAttrList.length < 3) {
this.$message({ this.filterProductAttrList.push({ value: [], key: Date.now() });
message: '最多添加三个', } else {
type: 'warning', this.$message.warning('最多添加三个');
duration: 1000
});
return;
} }
this.filterProductAttrList.push({
value: null,
key: Date.now()
});
} }
}, },
filters: { filters: {
// 自定义过滤器，为第一个筛选属性设置标签
filterLabelFilter(index) { filterLabelFilter(index) {
if (index === 0) { return index === 0 ? '筛选属性：' : '';
return '筛选属性：';
} else {
return '';
}
}
} }
} }
};
</script> </script>
<style scoped> <style scoped>
/* 本地样式，样式只对当前组件生效 */
</style> </style>

179
src/views/pms/productCate/index.vue
Unescape View File

@ -1,35 +1,53 @@
<template> <template>
<!-- 页面主容器 -->
<div class="app-container"> <div class="app-container">
<!-- 操作栏，包含“添加”按钮 -->
<el-card class="operate-container" shadow="never"> <el-card class="operate-container" shadow="never">
<i class="el-icon-tickets" style="margin-top: 5px"></i> <i class="el-icon-tickets" style="margin-top: 5px"></i>
<span style="margin-top: 5px">数据列表</span> <span style="margin-top: 5px">数据列表</span>
<el-button <el-button
class="btn-add" class="btn-add"
@click="handleAddProductCate()" @click="handleAddProductCate"
size="mini"> size="mini">
添加 添加
</el-button> </el-button>
</el-card> </el-card>
<!-- 表格数据容器 -->
<div class="table-container"> <div class="table-container">
<el-table ref="productCateTable" <el-table
ref="productCateTable"
style="width: 100%" style="width: 100%"
:data="list" :data="list"
v-loading="listLoading" border> v-loading="listLoading"
border>
<!-- 列：编号 -->
<el-table-column label="编号" width="100" align="center"> <el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template> <template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column> </el-table-column>
<!-- 列：分类名称 -->
<el-table-column label="分类名称" align="center"> <el-table-column label="分类名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column> </el-table-column>
<!-- 列：级别 -->
<el-table-column label="级别" width="100" align="center"> <el-table-column label="级别" width="100" align="center">
<template slot-scope="scope">{{scope.row.level | levelFilter}}</template> <template slot-scope="scope">{{ scope.row.level | levelFilter }}</template>
</el-table-column> </el-table-column>
<!-- 列：商品数量 -->
<el-table-column label="商品数量" width="100" align="center"> <el-table-column label="商品数量" width="100" align="center">
<template slot-scope="scope">{{scope.row.productCount }}</template> <template slot-scope="scope">{{ scope.row.productCount }}</template>
</el-table-column> </el-table-column>
<!-- 列：数量单位 -->
<el-table-column label="数量单位" width="100" align="center"> <el-table-column label="数量单位" width="100" align="center">
<template slot-scope="scope">{{scope.row.productUnit }}</template> <template slot-scope="scope">{{ scope.row.productUnit }}</template>
</el-table-column> </el-table-column>
<!-- 列：导航栏显示状态 -->
<el-table-column label="导航栏" width="100" align="center"> <el-table-column label="导航栏" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
@ -40,6 +58,8 @@
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
<!-- 列：是否显示 -->
<el-table-column label="是否显示" width="100" align="center"> <el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
@ -50,9 +70,13 @@
</el-switch> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
<!-- 列：排序 -->
<el-table-column label="排序" width="100" align="center"> <el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort }}</template> <template slot-scope="scope">{{ scope.row.sort }}</template>
</el-table-column> </el-table-column>
<!-- 列：设置操作 -->
<el-table-column label="设置" width="200" align="center"> <el-table-column label="设置" width="200" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -66,6 +90,8 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<!-- 列：操作 -->
<el-table-column label="操作" width="200" align="center"> <el-table-column label="操作" width="200" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -81,14 +107,16 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 分页组件 -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper" layout="total, sizes, prev, pager, next, jumper"
:page-size="listQuery.pageSize" :page-size="listQuery.pageSize"
:page-sizes="[5,10,15]" :page-sizes="[5, 10, 15]"
:current-page.sync="listQuery.pageNum" :current-page.sync="listQuery.pageNum"
:total="total"> :total="total">
</el-pagination> </el-pagination>
@ -97,44 +125,46 @@
</template> </template>
<script> <script>
import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate' // API 引入
import {
fetchList,
deleteProductCate,
updateShowStatus,
updateNavStatus
} from '@/api/productCate';
export default { export default {
name: "productCateList", name: "productCateList",
data() { data() {
return { return {
list: null, list: null, // 数据列表
total: null, total: null, // 数据总数
listLoading: true, listLoading: true, // 加载状态
listQuery: { listQuery: { // 查询条件
pageNum: 1, pageNum: 1,
pageSize: 5 pageSize: 5
}, },
parentId: 0 parentId: 0 // 当前父级分类ID
} };
}, },
created() { created() {
this.resetParentId(); this.resetParentId();
this.getList(); this.getList();
}, },
watch: { watch: {
$route(route) { // 监听路由变化，重新获取列表
$route() {
this.resetParentId(); this.resetParentId();
this.getList(); this.getList();
} }
}, },
methods: { methods: {
resetParentId(){ // 重置父级分类ID
resetParentId() {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
if (this.$route.query.parentId != null) { this.parentId = this.$route.query.parentId || 0;
this.parentId = this.$route.query.parentId;
} else {
this.parentId = 0;
}
},
handleAddProductCate() {
this.$router.push('/pms/addProductCate');
}, },
// 获取数据列表
getList() { getList() {
this.listLoading = true; this.listLoading = true;
fetchList(this.parentId, this.listQuery).then(response => { fetchList(this.parentId, this.listQuery).then(response => {
@ -143,88 +173,77 @@
this.total = response.data.total; this.total = response.data.total;
}); });
}, },
handleSizeChange(val) { // 添加分类
this.listQuery.pageNum = 1; handleAddProductCate() {
this.listQuery.pageSize = val; this.$router.push('/pms/addProductCate');
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
}, },
// 修改导航栏状态
handleNavStatusChange(index, row) { handleNavStatusChange(index, row) {
let data = new URLSearchParams(); let data = new URLSearchParams();
let ids=[]; data.append('ids', row.id);
ids.push(row.id) data.append('navStatus', row.navStatus);
data.append('ids',ids); updateNavStatus(data).then(() => {
data.append('navStatus',row.navStatus); this.$message.success('修改成功');
updateNavStatus(data).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}); });
}, },
// 修改显示状态
handleShowStatusChange(index, row) { handleShowStatusChange(index, row) {
let data = new URLSearchParams(); let data = new URLSearchParams();
let ids=[]; data.append('ids', row.id);
ids.push(row.id) data.append('showStatus', row.showStatus);
data.append('ids',ids); updateShowStatus(data).then(() => {
data.append('showStatus',row.showStatus); this.$message.success('修改成功');
updateShowStatus(data).then(response=>{
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}); });
}, },
// 查看下级分类
handleShowNextLevel(index, row) { handleShowNextLevel(index, row) {
this.$router.push({path: '/pms/productCate', query: {parentId: row.id}}) this.$router.push({ path: '/pms/productCate', query: { parentId: row.id } });
},
handleTransferProduct(index, row) {
console.log('handleAddProductCate');
}, },
// 编辑分类
handleUpdate(index, row) { handleUpdate(index, row) {
this.$router.push({path:'/pms/updateProductCate',query:{id:row.id}}); this.$router.push({ path: '/pms/updateProductCate', query: { id: row.id } });
}, },
// 删除分类
handleDelete(index, row) { handleDelete(index, row) {
this.$confirm('是否要删除该品牌', '提示', { this.$confirm('是否要删除该分类？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
deleteProductCate(row.id).then(response => { deleteProductCate(row.id).then(() => {
this.$message({ this.$message.success('删除成功');
message: '删除成功',
type: 'success',
duration: 1000
});
this.getList(); this.getList();
}); });
}); });
},
// 分页大小变更
handleSizeChange(val) {
this.listQuery.pageSize = val;
this.getList();
},
// 当前页码变更
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 商品转移操作
handleTransferProduct() {
this.$message.info('功能待实现');
} }
}, },
filters: { filters: {
// 级别过滤器
levelFilter(value) { levelFilter(value) {
if (value === 0) { return value === 0 ? '一级' : '二级';
return '一级';
} else if (value === 1) {
return '二级';
}
}, },
// 禁用下级按钮过滤器
disableNextLevel(value) { disableNextLevel(value) {
if (value === 0) { return value !== 0;
return false;
} else {
return true;
}
}
} }
} }
};
</script> </script>
<style scoped> <style scoped>
/* 样式留空，按需添加 */
</style> </style>

22
src/views/pms/productCate/update.vue
Unescape View File

@ -1,14 +1,20 @@
<template>  <template>
<product-cate-detail :is-edit='true'></product-cate-detail> <!-- 渲染分类详情组件，is-edit 为 true 表示“编辑模式” -->
<product-cate-detail :is-edit="true"></product-cate-detail>
</template> </template>
<script> <script>
import ProductCateDetail from './components/ProductCateDetail' // 导入分类详情组件
import ProductCateDetail from './components/ProductCateDetail';
export default { export default {
name: 'updateProductCate', name: 'updateProductCate', // 组件名称，用于编辑商品分类页面
components: { ProductCateDetail } components: {
} ProductCateDetail, // 注册子组件 ProductCateDetail
},
};
</script> </script>
<style> <style>
/* 样式部分留空，便于后续根据页面需求自定义样式 */
</style> </style>

Write Preview
Loading…
Cancel
Save