<template>
<div>
<!-- A面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<!-- B卡片视图区域 -->
<el-card>
<el-row>
<el-col><el-button type="primary" @click="showAddCateDialog">
添加分类</el-button></el-col>
</el-row>
<!-- 表格 树型表格 需要在main.js引入一下 npm i vue-table-with-tree-grid -S -->
<tree-table class="treeTable" :data="catelist" :columns="columns"
:selection-type="false" :expand-type="false"
show-index index-text="#" border :show-row-hover="false">
<!-- 是否有效 -->
<template slot="isok" slot-scope="scope">
<i class="el-icon-success"
v-if="scope.row.cat_deleted===false"
style="color:lightgreen">
</i>
<i class="el-icon-error"
v-else
style="color:lightgreen">
</i>
</template>
<!-- 排序 -->
<template slot="order" slot-scope="scope">
<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
<el-tag size="mini" v-else-if="scope.row.cat_level===1" type="success">
二级</el-tag>
<el-tag size="mini" v-else type="warning">三级</el-tag>
</template>
<!-- 操作 编辑 删除按钮-->
<template slot="opt" slot-scope="scope">
<!-- {
{scope.row}} -->
<el-button size="mini" icon="el-icon-edit" type="primary" @click="showCateEditDialog(scope.row.cat_id)">
编辑</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="removeCateById(scope.row.cat_id)">
删除</el-button>
</template>
</tree-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="querInfo.pagenum"
:page-sizes="[3, 5,10,15]"
:page-size=" querInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total" background="">
</el-pagination>
</el-card>
<!-- C添加分类的对话框 -->
<el-dialog title="添加分类"
:visible.sync="addCateDialogVisible"
width="50%"
@close="addCateDialogClosed">
<!-- 添加分类的表单 -->
<el-form ref="addCateFormRef" :model="addCateForm"
label-width="100px" :rules="addCateFormRules">
<!-- b分类名称 -->
<el-form-item label="分类名称:" prop="cat_name">
<el-input v-model="addCateForm.cat_name"></el-input>
</el-form-item>
<!-- c父级分类 -->
<el-form-item label="父级分类:">
<!-- options用来指定数据源 级联选择器-->
<!-- props用来指定配置对象 -->
<el-cascader
expand-trigger="hover"
:options="parentCateList"
:props="cascaderProps"
v-model="selectedKeys"
@change="parentCateChanged" clearable change-on-select=" ">
<!-- {
{selectedKeys}} -->
</el-cascader>
</el-form-item>
</el-form>
<!-- d取消和确定按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCate">确 定</el-button>
</span>
</el-dialog>
<!-- D修改分类名称的对话框 -->
<el-dialog
title="修改分类"
:visible.sync="editCateDialogVisible"
width="50%"
@close="editCateDialogClosed">
<el-form ref="editCateFormRef" :model="editCateForm" label-width="70px"
:rules=" editCateFormRules">
<el-form-item label="分类名称" prop="">
<el-input v-model="editCateForm.cat_name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editCateInfo">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
//查询参数规则
querInfo:{
type:3,//获取三层分类列表
pagenum:1,
pagesize:10
},
catelist:[],//商品分类的数据列表，默认为空
total:0,//总数据条数
// 这个是树形表格的数据columns
columns:[
{label:"分类名称",prop:"cat_name"},
{label:"是否有效",
//表示将当前列定义为模板列
type:"template",
//表示当前这一列使用模板名称
template:"isok"},
{label:"排序",
type:"template",
template:"order"},
{label:"操作",
type:"template",
template:"opt"},
],
addCateDialogVisible:false,//控制添加分类对话框的显示隐藏
// 添加分类的表单数据对象
addCateForm:{
cat_name:"",//将要添加的分类的名称
cat_pid:0,//父级分类的ID
cat_level:0//分类的等级，默认要添加的是1级分类
},
// 添加分类的表单验证规则对象
addCateFormRules:{
cat_name:[{required: true, message: '请输入分类名称', trigger: 'blur'}]
},
// 父级分类的列表
parentCateList:[],
//指定级联选择器的配置对象
cascaderProps:{
value:"cat_id",//指定选中的那个值
label:"cat_name",//指定看到的值
children:"children"//指定嵌套的那个属性
},
editCateForm:{},// 修改角色的表单数据
editCateFormRules:{//修改角色的规则
cat_name:[{required: true, message: '请修改分类名称', trigger: 'blur'}]
},
editCateDialogVisible: false,
selectedKeys:[] //级联选择器的 v-model="selectedKeys"
}
},
created() {
this.getCateList()
},
methods: {
//获取商品分类数据
async getCateList(){
const {data:res}=await this.$http.get("categories",{params:this.querInfo})
if(res.meta.status!==200){
return this.$message.error("获取商品分类失败")
}
console.log("这里是getCatelist的res.data",res.data);
this.catelist=res.data.result//把数据列表.赋值给catelist
this.total=res.data.total//为总数据条数赋值
},
//监听pagesize改变
handleSizeChange(newSize){
this.querInfo.pagesize=newSize
this.getCateList()
},
//监听pagenum改变
handleCurrentChange(newPage){
this.querInfo.pagenum=newPage
this.getCateList()
},
// 点击按钮、展示添加分类对话框
showAddCateDialog(){
this.getParentCateList()//先获取父级分类的数据列表，再展示出对话框
this.addCateDialogVisible=true
},
// 获取父级分类的数据列表 (展示添加分类对话框时获取的)
async getParentCateList(){
const {data:res}=await this.$http.get("categories",{params:{type:2}})
if(res.meta.status!==200){
return this.$message.error("获取父级分类数据失败")
}else{
this.$message.success("获取父级分类数据成功")
console.log("这里是parentCatelist的res.data",res.data);
this.parentCateList=res.data
}
},
//级联的 选择项发生变化触发这个函数??????????????????????????????????????????????????
parentCateChanged(){
console.log("这里是selectedKeys",this.selectedKeys);
// 如果selectedkeys数组中的length大于01，证明选中了父级分类
// 反之，就说明没有选中任何父级分类
if(this.selectedKeys.length>0){//????????????????????????????????????
// 父级分类的id
this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]//(z这里巧用数组长度-1作为索引)
// 为当前分类的等级赋值
this.addCateForm.cat_level=this.selectedKeys.length
return
}else{
this.addCateForm.cat_pid=0
this.adddCateForm.cat_level=0
}
},
// 点击按钮。添加新的分类
addCate(){
console.log("这里是addCateForm",this.addCateForm);
this.$refs.addCateFormRef.validate(async valid=>{
if(!valid) return
const {data:res}=await this.$http.post("categories",this.addCateForm)
if(res.meta.status!==201){
return this.$message.error("添加分类失败")
}
this.$message.success('添加分类成功')
this.getCateList()
this.addCateDialogVisible=false
})
},
// 监听对话框的关闭事件，重置表单数据
addCateDialogClosed(){
this.$refs.addCateFormRef.resetFields()
this.selectedKeys=[]
this.addCateForm.cat_level=0
this.addCateForm.cat_pid=0
},
// 删除分类
async removeCateById(id){
//弹框询问用户是否删除数据
const confirmResult=await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err=>err)
// 如果用户点击确认 删除，则返回值confirmResult为字符串confirm
// 如果用户点击取消 删除，则返回值为字符串cancel
// console.log(confirmTResult);
if(confirmResult!=="confirm"){
return this.$message.info("已取消删除")
}
// console.log("确认了删除"); 确认删除后，下一步发送删除的请求
const {data:res}=await this.$http.delete("categories/"+id)
if(res.meta.status!==200){
return this.$messgae.error("删除用户失败")
}
this.$message.success("删除用户成功")
this.getCateList()
},
// 编辑修改分类
//展示编辑分类的对话框 @click="showCateEditDialog(scope.row.cat_id)
async showCateEditDialog(id){ //这个id就是cat_id
// console.log(id);
const {data:res}=await this.$http.get("categories/"+id)
if(res.meta.status!==200){
return this.$message.error("查询分类信息失败")
}
this.editCateForm=res.data
this.editCateDialogVisible=true
},
// 修改分类对话框关闭时触发这个事件
editCateDialogClosed(){
this.$refs.editCateFormRef.resetFields()
},
// 修改分类名称信息并提交(点击修改分类对话框的确定按钮时触发)
editCateInfo(){
this.$refs.editCateFormRef.validate(async valid=>{
if(!valid) return
//发起修改分类信息的数据请求
const {data:res}=await this.$http.put("categories/"+this.editCateForm.cat_id,{
cat_name:this.editCateForm.cat_name,
})
if(res.meta.status!==200) {
return this.$message.error("更新分类信息失败!")
}
// 关闭对话框
this.editCateDialogVisible=false
// 刷新数据列表
this.getCateList()
//提示修改成功
this.$message.success("更新分类信息成功")
})
},
},
}
</script>
<style lang="less" scoped>
.treeTable{
margin-top: 15px;
}
.el-cascader{
width: 100%;
}
</style>