Vue_shop学习98：商品分类页面数据删除操作的实现

删除的API

  <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.cat_id)">删除</el-button>

 async removeById(id){//删除用户操作
                //提示消息 标题文本 提示信息
                const confirmResult=  await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(error => //只有一个return 只有一个参数 可以省略return {} ()
                        error  //返回给confirmResult接收
                )
                //确认是confirm 取消就会报错-使用捕获错误
                //取消为cancel字段
                //console.log(confirmResult)
                if(confirmResult!=='confirm'){
                    return this.$message.info('已经取消删除')
                }
                const {data:res}= await this.$http.delete('categories/'+id)
                if(res.meta.status!==200) return this.$message.error('删除角色失败')
                this.$message.success('删除角色数据成功')
                //刷新列表
                this.getCateList()
            }

 

<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格区域 tree-table和我们前面注册的自定义名称一样-->
            <!-- data数据源cateList columns列配置  election-type除复选框 去除展开行expand-type show-index索引 index-text索引名称 border分割线 show-row-hover高亮效果-->
            <tree-table :data="cateList" :columns="columns"
                :selection-type="false" :expand-type="false" show-index
                index-text="#" border :show-row-hover="false" class="treeTable">
                <!-- 在内容节点定义模板 -->
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i style="color: lightgreen;" class="el-icon-success"
                        v-if="scope.row.cat_deleted===false"></i>
                    <i style="color: red;" class="el-icon-error"
                        v-if="scope.row.cat_deleted===true"></i>
                </template>
                <!-- 是否排序 -->
                <template slot="issort" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                    <el-tag type="success" size="mini"
                        v-if="scope.row.cat_level===1">二级</el-tag>
                    <el-tag type="warning" size="mini"
                        v-if="scope.row.cat_level===2">三级</el-tag>
                </template>
                <!-- 是否操作 -->
                <template slot="isopt" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editCate(scope.row.cat_id)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.cat_id)">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页区域 -->
            <!-- current-page当前页码数  page-sizes当前每页显示多少条数据 layout 展示菜单项 -->
            <!-- @size-change页码值发生改变 :current-page当前的页码值 :page-sizes 总共可选值  :page-size当前显示几条数据-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[3,5,10,15]"
                :page-size="queryInfo.pagesize"
                layout="total,sizes, prev, pager, next,jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 点击按钮弹出添加分类的对话框 -->
        <el-dialog title="添加分类" :visible.sync="addCateVisible" width="50%"
            @close="addDialogClose">
            <!--分类 内容主题区域 -->
            <!-- 表单数据 addFromRules验证规则 addFromRef索引-->
            <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef"
                label-width="100px">
                <!-- prop 属性设置为需校验的字段名即可 -->
                <el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="addFrom.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类：">
                    <!-- expandTrigger控制方式 :options数据源 :props指定配置对象 
                        v-model双向绑定道数据中 @change选择项发生变化触发函数
                       clearable支持清空
                    -->
                    <el-cascader
                        v-model="selectedKeys"
                        :options="parentCateList"
                        :props="cascaderProps"
                        @change="parentCateChanged"
                        clearable>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- 底部按钮区域 取消按钮的时候隐藏对话框 -->
                <el-button @click="addCateVisible= false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑用户 的对话框-->
        <el-dialog
            title="编辑用户"
            :visible.sync="editDialogVisible"
            width="50%">
            <!-- 内容主题区域 -->
            <el-form :model="editForm" :rules="editFromRules" ref="editFromRef"
                label-width="100px" status-icon>
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible= false">取 消</el-button>
                <el-button type="primary" @click="editCateInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                cateList: [],//商品分类的数据列表 默认为空
                queryInfo: {//查询条件
                    type: 3,//3级分类
                    pagenum: 1,//当前页码值
                    pagesize: 5//每页显示5条数据
                },
                total: 0,//总数据条数
                columns: [//表格各列的配置
                    {//列定义
                        label: '分类名称',//列标题名称
                        prop: 'cat_name',//对应列内容的属性名  
                    },
                    {
                        label: '是否有效',//列标题名称
                        type:'template',//表示将当前列渲染成为模板列
                        template:'isok',//表示当前使用这一类使用的模板名称-再表格内容节点中使用
                    },
                    {
                        label: '排序',//列标题名称
                        type:'template',//表示将当前列渲染成为模板列
                        template:'issort',//表示当前使用这一类使用的模板名称-再表格内容节点中使用
                    },
                    {
                        label: '操作',//列标题名称 
                        type:'template',//表示将当前列渲染成为模板列
                        template:'isopt',//表示当前使用这一类使用的模板名称-再表格内容节点中使用
                    },
                ],
                addCateVisible:false,//控制对话框的显示隐藏
                addFrom: {//添加角色的表单数据
                    roleName: '',//角色名称 
                    roleDesc: ''//角色描述
                },
                addFrom: {//添加角色的表单数据
                    cat_name: '',//分类名称 
                    cat_pid:0,//分类父 ID 默认添加1级分类
                    cat_level: 0//父级分类  默认添加1级分类
                },
                addFromRules: {//验证规则
                    cat_name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                    ],
                },
                parentCateList:[],//父级分类的数组
                cascaderProps:{//指定级联选择器的配置对象 映射数据
                    expandTrigger: 'hover' ,
                    value:'cat_id',//指定选项的值为选项对象的某个属性值
                    label:'cat_name',//指定选项的值为选项对象的某个属性值
                    children:'children',//指定选项的子选项为选项对象的某个属性值
                    checkStrictly:true,//父子节点取消选中关联，从而达到选择任意一级选项的目的
                },
                selectedKeys:[],//选中的父级分类的ID数组
                editDialogVisible:false,//编辑用户的显示与隐藏
                editForm:{},//查询到的用户信息对象
                editFromRules:{//验证规则
                    cat_name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                    ],
                
                },
              

            }  
        },
        created() {//一开始进行获取数据
            this.getCateList()//获取商品信息
        },
        methods: {
            async getCateList() {//获取商品分类数据-涉及分页 查询条件
                const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
                if (res.meta.status !== 200) return this.$message.error('获取商品分类数据失败')
                //console.log(res.data) 测试
                this.cateList = res.data.result//将商品分类数据赋值给cateList
                this.total = res.data.total//为总数据条数赋值
            },
            handleCurrentChange(val) {//监听页码值改变的事件 val最新的页码值
                this.queryInfo.pagenum=val//重新赋值
                this.getCateList()//并且重新发送数据请求
            },
            handleSizeChange(val) { //切换每页显示条触发 拿到最新的
                this.queryInfo.pagesize=val
                this.getCateList()//并且重新发送数据请求
            },
            showAddCateDialog(){//点击按钮达赖对话框
                this.getParentCateList()//获取数据
                this.addCateVisible=true
            },
            async getParentCateList(){//获取父级分类的数据列表
                const{data:res} = await this.$http.get('categories',{params:{type:2}})
                if (res.meta.status !== 200) return this.$message.error('获取商品分类数据失败')
                //console.log(res.data) //测试
                this.parentCateList=res.data//获取数据
            },
            addDialogClose(){//监听对话框关闭 重置表单数据
                this.$refs.addFromRef.resetFields() 
                //父级分类没有取消
                this.selectedKeys=[]      //双向绑定的数据
                //等级重置
                this.addFrom.cat_pid=0
                this.addFrom.cat_level=0

            },
            parentCateChanged(value) {//选择项发生变化触发函数
                //selectedKeys数组中的length大于o0说明选中了
                // console.log(value);//两种都一样
                //console.log(this.selectedKeys);//立即打印一下选择的值
                if(this.selectedKeys.length>0){
                    //ID永远是数组最后一项
                    this.addFrom.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
                    this.addFrom.cat_level=this.selectedKeys.length //选择一项 等级就是1 永远相同
                    return
                }else{
                    //父级ID是0 等级也是0
                    this.addFrom.cat_pid=0
                    this.addFrom.cat_level=0
                }
                
            },
            addCate(){//确定按钮
                    console.log(this.addFrom.cat_pid, this.addFrom.cat_level)
                    this.$refs.addFromRef.validate(async valid=>{
                        //拿到校验结果
                        if(!valid) return //校验失败
                        const { data: res } = await this.$http.post('categories',this.addFrom)
                        if (res.meta.status !== 201) {
                            return this.$message.error('添加分类失败')
                        }
                        this.$message.success('添加分类成功')
                        this.getCateList()//刷线列表
                        this.addCateVisible= false
                    })
                  
            },
            async editCate(id){//获取该行数据
                //获取当前角色数据 查询
                const {data:res}=await this.$http.get('categories/'+id)
                if(res.meta.status!==200) return this.$message.error('查询用户数据失败')
                    //查询到的数据
                    this.editForm=res.data//页面显示
                    this.editDialogVisible=true
            },
            editCateInfo(){//编辑角色信息并且提交
                 //第一步:预验证
                 this.$refs.editFromRef.validate(
                    async valid=>{
                        if(!valid) return
                        //发起修改分类信息的数据请求
                       const {data:res} =await this.$http.put('categories/'+this.editForm.cat_id,{
                            id:this.editForm.cat_id,
                            cat_name:this.editForm.cat_name,
                        })
                        if(res.meta.status!==200) return this.$message.error('修改分类数据失败')
                        //关闭对话框
                        this.editDialogVisible= false
                        //刷新数据列表
                        this.getCateList()
                        //提示修改成功
                        this.$message.success('修改分类数据成功')
                     
                    }
                )
            },
            async removeById(id){//删除用户操作
                //提示消息 标题文本 提示信息
                const confirmResult=  await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(error => //只有一个return 只有一个参数 可以省略return {} ()
                        error  //返回给confirmResult接收
                )
                //确认是confirm 取消就会报错-使用捕获错误
                //取消为cancel字段
                //console.log(confirmResult)
                if(confirmResult!=='confirm'){
                    return this.$message.info('已经取消删除')
                }
                const {data:res}= await this.$http.delete('categories/'+id)
                if(res.meta.status!==200) return this.$message.error('删除角色失败')
                this.$message.success('删除角色数据成功')
                //刷新列表
                this.getCateList()
            },
            
        },
    }
</script>
<style lang="less" scoped>
.treeTable{
    margin-top: 15px;
}
/* 占据宽度全部 */
.el-cascader{
    width: 100%;
}
</style>