09

时间 2019-11-16

原文原文链接

VUE项目-第三天html

01-反馈vue

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

02-回顾ajax

嵌套路由
左菜单动态渲染子菜单的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,须要在渲染完毕后：less

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

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

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

<!--编辑用户-->
<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

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-权限管理-角色列表-分配权限-提交修改后的权限