[JavaScript知识库]Vue-8：分配角色 - 商品分类

63、完成分配角色功能

<!-- 分配角色的对话框 -->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
  <div>
    <p>当前用户：{{userInfo.username}} </p>
    <p>当前角色：{{userInfo.role_name}} </p>
    <p>分配新角色：
      <el-select v-model="selectedRoleId" placeholder="请选择">
        <el-option
          v-for="item in rolesList"
          :key="item.id"
          :label="item.roleName"
          :value="item.id">
        </el-option>
      </el-select>
    </p>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
  </span>
</el-dialog>

return{
// 控制分配角色对话框的显示与隐藏
setRoleDialogVisible:false,
// 需要被分配角色的用户信息
userInfo:{},
// 所有角色的数据列表
rolesList:[],
// 已选中的角色id值
selectedRoleId:''
}

// 展示分配角色的对话框
async setRole(userInfo){
  this.userInfo = userInfo;
  // 在展示对话框之前获取所有的角色列表
  const {data:res} = await this.$http.get('roles');
    if(res.meta.status !== 200){
      return this.$message.error('获取角色列表失败！');
    }
    this.rolesList = res.data;
    // this.$message.success('获取角色列表成功！');
    // this.getUserList();
    this.setRoleDialogVisible = true;
},
// 完成分配角色功能
async saveRoleInfo(){
  // 先判断是否选择了新的角色
  if(!this.selectedRoleId) {
    return this.$message.error('请选择要分配的角色！');
  }
  const {data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,
  {rid:this.selectedRoleId});
  if(res.meta.status !== 200) {
    return this.$message.error('更新角色失败！');
  }
  this.$message.success('更新角色成功！');
  this.getUserList();
  this.setRoleDialogVisible = false;
},
// 监听分配角色对话框的关闭事件
setRoleDialogClosed(){
  this.selectedRoleId = '',
  this.userInfo = {}
}

64、商品分类

<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>
  <!--  添加分类按钮区域 -->
  <el-row>
    <el-col>
      <el-button type="primary" @click="showAddCateDialog"
        >添加分类</el-button
      >
    </el-col>
  </el-row>

  <!-- 表格 -->
  <tree-table
    class="treeTable"
    :data="cateList"
    :columns="columns"
    :selection-type="false"
    :expand-type="false"
    show-index
    index-text="#"
    border
  >
    <!-- 是否有效 -->
    <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: red"></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"
        type="success"
        v-else-if="scope.row.cat_level === 1"
        >二级</el-tag
      >
      <el-tag size="mini" type="warning" v-else>三级</el-tag>
    </template>
    <!-- 操作 -->
    <template slot="opt" slot-scope="scope">
      <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
      <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
    </template>
  </tree-table>

  <!-- 分页区域 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="querInfo.pagenum"
    :page-sizes="[1, 3, 5, 7, 15]"
    :page-size="querInfo.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</el-card>

<!-- 商品添加分类的对话框 -->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
    <!-- 添加分类的表单 -->
  <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef"label-width="70px">
    <el-form-item label="分类名" prop="cat_name">
      <el-input v-model="addCateForm.cat_name"></el-input>
    </el-form-item>
    <el-form-item label="父级分类" prop="cat_pid">
        <!-- options用来指定数据源 -->
        <!-- props用来指定配置对象 -->
        <el-cascader expand-trigger="hover" v-model="selectedKeys" :options="parentsCateList" @change="parentCateChanged" :props="cascaderProps" clearable change-on-select>
        </el-cascader>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>
export default {
data(){
 return{
     // 查询条件
     querInfo:{
         type:3,
         pagenum:1,
         pagesize:5
     },
     // 商品分类的数据列表，默认为空
     cateList:[],
     // 总数据条数
     total:0,
     // 为table指定列的定义
     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:'',
         // 父级分类的id
         cat_pid:0,
         // 分类的等级，默认要添加的是一级分类
         cat_level:0
         // 父级分类的id
     },
     // 添加分类的表单验证规则对象
     addCateFormRules:{
         cat_name:[
             {required: true, message: '请输入分类名称', trigger: 'blur'}
             ]
     },
     // 父级分类的列表
     parentsCateList:[],
     // 指定级联选择器的配置对象
     cascaderProps:{
         value:'cat_id',
         label:'cat_name',
         children:'children'
     },
     // 选中的父级分类的Id数组
     selectedKeys:[],
     // 控制编辑分类对话框的显示与隐藏
     editCateDialogVisible:false
 }
},
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.console.error('获取商品分类失败！');
     }
     console.log(res.data);
     // 把数据列表，赋值给cateList
     this.cateList = res.data.result;
     // 为总数据条数赋值
     this.total = res.data.total
 },
 // 监听pagesize改变的事件
 handleSizeChange(newSize){
     // 只要接收到了最新的pagesize，就立即赋值给data里的querInfo的pagesize属性
     this.querInfo.pagesize = newSize;
     // 调用函数重新获取数据
     this.getCateList();
 },
 // 监听页码值改变的事件
 handleCurrentChange(newPage) {
     this.querInfo.newPage = newPage;
     this.getCateList();
 },
 // 点击按钮，展示添加分类的对话框
 showAddCateDialog(){
     // 先获取父级分类的数据列表，再展示出对话框
     this.getParentsCateList();
     this.addCateDialogVisible = true;
 },
 // 获取父级分类的数据列表
 async getParentsCateList() {
     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.parentsCateList = res.data;
 },
 // 选择项发生变化触发这个函数
 parentCateChanged(){
     console.log(this.selectedKeys);
     // 如果selectedKeys数组中的length大于0，说明选中了父级分类
     // 反之，就说明没有选中任何父级分类
     if(this.selectedKeys.length > 0) {
         // 父级分类的Id
         this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
         // 为当前分类的等级赋值
         this.addCateForm.cat_level = this.selectedKeys.length;
     }else {
         // 父级分类的Id
         this.addCateForm.cat_pid = 0;
         // 为当前分类的等级赋值
         this.addCateForm.cat_level = 0;
     }
 },
 // 点击按钮，添加新的分类
 addCate(){
     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.addCateDialogVisible = false;
         this.getCateList();
     })
     // console.log(this.addCateForm);
 },
 // 监听对话框的关闭事件，重置表单数据
 addCateDialogClosed(){
     this.$refs.addCateFormRef.resetFields();
     // 父级分类也需要重置
     this.selectedKeys = [];
     this.addCateForm.cat_level = 0;
     this.addCateForm.cat_pid = 0;
 }
}
}
</script>

<style lang="less" scoped>
.treeTable {
  margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>