后台管理系统【商品分类】

 <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>