09

VUE项目-第三天

01-反馈

姓名 意见或建议
*** 反馈太浪费时间了，每次一讲反馈半小时没了，心疼，建议减少讲反馈时间。拖堂问题每拖一分钟我就赚了一分钟美滋滋可以多学点东西。以上属个人意愿。请勿公愤 *** 老师，这个功能稍后还没有实现☺--------->“当你f5刷新页面 丢失当前选中的菜单” *** 视频杂音有点大
*** 刚哥，你的视频听的耳朵疼死了，能不能修一下电脑呢，，你看我们认认真真听课知识点没记牢，结果耳朵聋了..... ps:刚哥的课讲的很详细，好喜欢，每天看你认真的讲课讲完，卖力地注释一遍又笔记一遍莫名好心酸，爱你 *** 老师 ， ES6 中的 类 class 是什么意思啊
*** 啊啊啊 啊 刚哥 淑哥 周哥 我有一个建议 要不这么个,17:30您就把放了我们吧,咱出去酒足饭饱之后回来了接着上,何如 吱

02-回顾

• 嵌套路由
• 左菜单动态渲染 子菜单的index path代替 点击菜单根据path来跳转 el-menu 属性 router
• 用户列表：面包屑组件 卡片组件 栅格组件 输入框组件 按钮组件 表格组件 分页组件
• 表格组件：在组件内需要自定义内容 使用组件的数据 template 包裹内容 属性 slot-scope

优化：

• 按照模块功能 建文件目录 放组件
• mixin 混入: 把一些写好的代码 到下一个场景复用
  • less .a{color:red} .b{font-size:12px} .c{.a();.b();}
  • vue 有混入的功能 扩展
    • 定义一个 包含vue选项的对象 在另外一个js文件中,导出选项对象
    • 在vue文件导入，在vue选项中 mixins：[导入的选项对象]

bug-找不到dom,需要在渲染完毕后：

showDialogForm () {
  // 注意： 只有先渲染 找到dom
  // 显示添加对话框
  this.dialogFormVisible = true
  // 重置表单  内容  验证

  // 等对话框组件渲染完毕在去做dom操作
  // setTimeout(() => {
  //   this.$refs.addForm.resetFields()
  // }, 0)
  // 下一帧  要做的事情
  this.$nextTick(() => {
    this.$refs.addForm.resetFields()
  })
},

03-用户管理-编辑用户-准备对话框

<!--编辑用户-->
<el-dialog width="400px" title="编辑用户" :visible.sync="editDialogFormVisible">
  <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px" autocomplete="off">
    <el-form-item label="用户名">
      <el-input v-model="editForm.username" disabled></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="editForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="editForm.mobile"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="editDialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSubmit()">确 定</el-button>
  </div>
</el-dialog>

04-用户管理-编辑用户-填充待修改数据

async showEditDialogFormVisible (id) {
  // 显示编辑对话框
  this.editDialogFormVisible = true
  // 可能需要重置表单
  // 填充数据
  // 发请求需要用户的ID
  const {data: {data, meta}} = await this.$http.get(`users/${id}`)
  if (meta.status !== 200) return this.$message.error('获取用户数据失败')
  // 把数据展示表单内
  this.editForm = data
},

05-用户管理-编辑用户-添加校验

editRules: {
  email: [
    {required: true, message: '邮箱必填', trigger: 'blur'},
    {type: 'email', message: '邮箱格式错误', trigger: 'blur'}
  ],
  mobile: [
    {required: true, message: '手机号必填', trigger: 'blur'},
    // 手机号必须自定义校验规则  通过自己的函数来校验 （rule,value,callback）
    {validator: checkMobile, trigger: 'blur'}
  ]
}

06-用户管理-编辑用户-提交修改请求

editSubmit () {
  // 编辑的提交
  // 整个表单的校验
  this.$refs.editForm.validate(async valid => {
    if (valid) {
      // 校验成功
      const {data: {meta}} = await this.$http.put(`users/${this.editForm.id}`, {
        email: this.editForm.email,
        mobile: this.editForm.mobile
      })
      if (meta.status !== 200) return this.$message.error('修改失败')
      this.$message.success('修改成功')
      this.getData()
      this.editDialogFormVisible = false
    }
  })
},

07-权限管理-权限列表

• 权限列表 路由配置和组件骨架

  {path: '/rights', name: 'rights', component: Rights}

新建一个mixin文件 Rights-Mixin.js

动态的渲染表格：

<template>
  <div class="rights_container">
    <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>
    <el-card>
      <el-table
        height="400px"
        :data="rightsList"
        style="width: 100%">
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column
          property="authName"
          label="权限名称">
        </el-table-column>
        <el-table-column
          property="path"
          label="路径">
        </el-table-column>
        <el-table-column
          label="权限等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level==='0'">一级权限</el-tag>
            <el-tag v-if="scope.row.level==='1'" type="success">二级权限</el-tag>
            <el-tag v-if="scope.row.level==='2'" type="warning">三级权限</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

js实现代码

export default {
  name: 'Rights',
  data () {
    return {
      rightsList: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      // 获取权限列表数据
      const {data: {data, meta}} = await this.$http.get('rights/list')
      if (meta.status !== 200) return this.$message.error('获取权限列表数据失败')
      this.rightsList = data
      console.log(data)
    }
  }
}

实现刷新页面保持子菜单选中

• 根据url地址去选中当前的菜单
• 而且刷新页面后也需要选中
• default-active=“users” 当前激活菜单的 index
• el-menu-item :index="lastItem.path"
• 使用当前路由的name的值去设置菜单的默认选中子菜单
• 实现：获取name数据 $route.name 获取当前路由的name
• :default-active=“$route.name”

08-权限管理-角色列表-准备布局

<template>
  <div class="roles_container">
    <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>
    <el-card>
      <el-button type="primary" plain>添加角色</el-button>
      <el-table :data="rolesList">
        <el-table-column type="index" width="100px"></el-table-column>
        <el-table-column property="roleName" label="角色名称"></el-table-column>
        <el-table-column property="roleDesc" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button icon="el-icon-edit"  round></el-button>
              <el-button icon="el-icon-delete"  round></el-button>
              <el-button icon="el-icon-setting" round></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

09-权限管理-角色列表-列表渲染

export default {
  name: 'Roles',
  data () {
    return {
      rolesList: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const {data: {data, meta}} = await this.$http.get('roles')
      if (meta.status !== 200) return this.$message.error('获取角色失败')
      // 表格的data对数据格式是有固定的要求
      // 以前数据中没有 children 选项
      // 默认认为 有展开内容 而且会去使用children数据
      // 如果数据的结构不符合要求  报错
      // {id: 1, roleName: '管理员', roleDesc: '管理员123'}
      // 把后台返回的数据 处理一下  去除children数据  保留children有的数据
      data.forEach(item => {
        item.child = item.children
        delete item.children
        item.child.forEach(item => {
          item.child = item.children
          delete item.children
          item.child.forEach(item => {
            item.child = item.children
            delete item.children
          })
        })
      })
      this.rolesList = data
    }
  }
}

展开内容：

<template slot-scope="scope">
  <!--一级权限-->
  <el-row>
    <el-col :span="4">
      <el-tag closable>权限管理</el-tag>
      <span class="el-icon-caret-right"></span>
    </el-col>
    <el-col :span="20">
      <!--二级权限-->
      <el-row>
        <el-col :span="8">
          <el-tag closable type="success">角色列表</el-tag>
          <span class="el-icon-caret-right"></span>
        </el-col>
        <el-col :span="16">
          <!--三级权限-->
          <el-tag closable type="warning">添加角色</el-tag>
        </el-col>
      </el-row>
      <!--二级权限-->
      <el-row>
        <el-col :span="8">
          <el-tag closable type="success">角色列表</el-tag>
          <span class="el-icon-caret-right"></span>
        </el-col>
        <el-col :span="16">
          <!--三级权限-->
          <el-tag closable type="warning">添加角色</el-tag>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

动态渲染展开内容：

<template slot-scope="scope">
  <!--一级权限-->
  <el-row style="border-bottom: 1px solid #eee"
          :style="{'border-top':i===0?'1px solid #eee':'none'}"
          v-for="(item,i) in scope.row.child"
          :key="item.id">
    <el-col :span="4">
      <el-tag closable>{{item.authName}}</el-tag>
      <span class="el-icon-caret-right"></span>
    </el-col>
    <el-col :span="20">
      <!--二级权限-->
      <el-row :style="{'border-top':i===0?'none':'1px solid #eee'}" v-for="(secondItem,i) in item.child" :key="secondItem.id">
        <el-col :span="8">
          <el-tag closable type="success">{{secondItem.authName}}</el-tag>
          <span class="el-icon-caret-right"></span>
        </el-col>
        <el-col :span="16">
          <!--三级权限-->
          <el-tag v-for="lastItem in secondItem.child" :key="lastItem.id" closable type="warning">{{lastItem.authName}}</el-tag>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

样式：

.el-row{
  display: flex;
  align-items: center;
}
.el-tag{
  margin: 5px;
}

11-权限管理-角色列表-添加角色-对话框准备

<!--添加的对话框-->
<el-dialog width="400px" title="添加角色" :visible.sync="addDialogFormVisible">
  <el-form :model="addForm" label-width="80px">
    <el-form-item label="角色名称">
      <el-input v-model="addForm.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色描述">
      <el-input v-model="addForm.roleDesc"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addDialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSubmit()">确 定</el-button>
  </div>
</el-dialog>

数据 方法

 /* 添加相关的数据 */
    addDialogFormVisible: false,
    addForm: {
      roleName: '',
      roleDesc: ''
    }
  }
},
mounted () {
  this.getData()
},
methods: {
  // 显示添加对话框
  showAddDialog () {
    this.addDialogFormVisible = true
  },
  // 添加操作
  addSubmit () {
  },

12-权限管理-角色列表-添加角色-校验规则

addRules: {
  roleName: [
    {required: true, message: '角色名称必填', trigger: 'blur'}
  ],
  roleDesc: [
    {required: true, message: '角色描述必填', trigger: 'blur'}
  ]
}

13-权限管理-角色列表-添加角色-提交添加

// 显示添加对话框
showAddDialog () {
  this.addDialogFormVisible = true
  this.$nextTick(() => {
    this.$refs.addForm.resetFields()
  })
},
// 添加操作
addSubmit () {
  // 整个表单验证
  this.$refs.addForm.validate(async valid => {
    if (valid) {
      // 提交添加请求
      const {data: {meta}} = await this.$http.post('roles', this.addForm)
      if (meta.status !== 201) return this.$message.error('添加角色失败')
      this.$message.success('添加角色成功')
      // 关闭对话框  更新列表数据
      this.addDialogFormVisible = false
      this.getData()
    }
  })
},

14-权限管理-角色列表-删除角色

<el-button icon="el-icon-delete" @click="delRoles(scope.row.id)"  round></el-button>

// 删除
delRoles (id) {
  this.$confirm('是否删除该数据?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 点击了确认  发请求
    const {data: {meta}} = await this.$http.delete(`roles/${id}`)
    if (meta.status !== 200) return this.$message.error('删除失败')
    this.$message.success('删除成功')
    this.getData()
  }).catch(() => {})
},

16-权限管理-角色列表-编辑角色-对话框准备

html结构

<!--编辑的对话框-->
<el-dialog width="400px" title="编辑角色" :visible.sync="editDialogFormVisible">
  <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
    <el-form-item label="角色名称" prop="roleName">
      <el-input v-model="editForm.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" prop="roleDesc">
      <el-input v-model="editForm.roleDesc"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="editDialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSubmit()">确 定</el-button>
  </div>
</el-dialog>

数据和方法：

/* 编辑相关的数据 */
    editDialogFormVisible: false,
    editForm: {},
    editRules: {
      roleName: [
        {required: true, message: '角色名称必填', trigger: 'blur'}
      ],
      roleDesc: [
        {required: true, message: '角色描述必填', trigger: 'blur'}
      ]
    }
  }
},
mounted () {
  this.getData()
},
methods: {
  // 显示编辑对话框
  showEditDialog () {
    this.editDialogFormVisible = true
  },
  // 提交编辑
  editSubmit () {

  },

17-权限管理-角色列表-编辑角色-填充数据和校验规则

使用的是当前行的数据 你也可使用ajax的

<el-button icon="el-icon-edit" @click="showEditDialog(scope.row)" round></el-button>

// 显示编辑对话框
    showEditDialog (role) {
      this.editDialogFormVisible = true
      // 填充默认数据
      this.$nextTick(async () => {
        this.$refs.editForm.resetFields()
        // 获取 填充  问题：重置表单的数据  会 清除row的数据
        // this.editForm = role
        // 使用ajax的数据
        const {data: {data, meta}} = await this.$http.get(`roles/${role.id}`)
        if (meta.status !== 200) return this.$message.error('获取角色失败')
        this.editForm = data
      })
    },

18-权限管理-角色列表-编辑角色-提交修改

// 提交编辑
editSubmit () {
  this.$refs.editForm.validate(async valid => {
    if (valid) {
      // 注意ID是 roleId
      const {data: {meta}} = await this.$http.put(`roles/${this.editForm.roleId}`, {
        roleName: this.editForm.roleName,
        roleDesc: this.editForm.roleDesc
      })
      if (meta.status !== 200) return this.$message.error('编辑角色失败')
      this.$message.success('编辑角色成功')
      // 关闭编辑对话框  更新列表
      this.editDialogFormVisible = false
      this.getData()
    }
  })
},

19-权限管理-角色列表-分配权限-展开tag删除权限

• el-tag @close="delRights(scope.row,item.id)"

• @close="delRights(scope.row,secondItem.id)"

• @close="delRights(scope.row,lastItem.id)"

  // 删除权限 delRights (row, rightId) { this.http.delete(roles/${row.id}/rights/${rightId}) if (meta.status !== 200) return this.message.success('删除成功') // 更新整个列表 重新展开后 看到操作结果 // this.getData() // 局部更新 当前行的数据 child 数据 // 当前修改后返回的数据 就是child数据 // 处理成需要的数据结构 data.forEach(item => { item.child = item.children delete item.children item.child.forEach(item => { item.child = item.children delete item.children }) }) row.child = data }).catch(() => {}) },

20-权限管理-角色列表-分配权限-对话框准备

<!--分配权限的对话框-->
<el-dialog width="400px" title="分配权限" :visible.sync="rightDialogFormVisible">
  <h1>树形控件</h1>
  <div slot="footer" class="dialog-footer">
    <el-button @click="rightDialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="rightSubmit()">确 定</el-button>
  </div>
</el-dialog>

/* 分配权限相关的数据 */
    rightDialogFormVisible: false
  }
},
mounted () {
  this.getData()
},
methods: {
  // 显示分配权限的对话框
  showRightDialog () {
    this.rightDialogFormVisible = true
  },
  // 分配权限
  rightSubmit () {
  },

21-权限管理-角色列表-分配权限-树状控件

<el-tree
  :data="rightTree"
  show-checkbox
  node-key="id"
  :default-expand-all="true"
  :props="defaultProps">
</el-tree>

数据：

rightTree: [{
  id: 1,
  label: '一级 1',
  children: [{
    id: 4,
    label: '二级 1-1',
    children: [{
      id: 9,
      label: '三级 1-1-1'
    }, {
      id: 10,
      label: '三级 1-1-2'
    }]
  }]
}, {
  id: 2,
  label: '一级 2',
  children: [{
    id: 5,
    label: '二级 2-1'
  }, {
    id: 6,
    label: '二级 2-2'
  }]
}, {
  id: 3,
  label: '一级 3',
  children: [{
    id: 7,
    label: '二级 3-1'
  }, {
    id: 8,
    label: '二级 3-2'
  }]
}],
defaultProps: {
  // 数据结构中 下一级数据的字段名称
  children: 'children',
  // 显示的文字  的数据字段的名称
  label: 'label'
}

22-权限管理-角色列表-分配权限-渲染树形控件

23-权限管理-角色列表-分配权限-选中拥有的权限

24-权限管理-角色列表-分配权限-提交修改后的权限