10

VUE项目-第十天

01-反馈

姓名 意见或建议
*** 亲亲，这边建议您换一台电脑。杂音真的...
*** 刚哥 你早上吃的什么饭啊
*** 彪哥走了,,缘起不知为何 怪想他的
*** 老师,虽然你讲的挺好的,也很喜欢你.奈何基础差也不聪明,有的地方还是好模糊,甚至到了看视频都不明白的地步,好难过.

02-回顾

• 优化处理
  • mixins
    • *.vue文件 布局
    • *-Mixin.js 实现业务
    • 混入：vue实例化的时候 选项 mixins:[配置对象]
  • $nextTick
    • dom渲染的时候是有时间消耗
    • 下一帧 做什么事情
  • $route.name
    • 当前路由的名称 users,roles,rights
    • 二级菜单，需要根据当前路由去选中的，渲染二级菜单的时候给index='users|roles|rights'
    • el-menu 组件 default-active=$route.name
• 注意细节
  • 编辑时使用row数据
    • 当前行数据--->data中的数据--->把当前数据赋值表单--->重置表单---->修改对应的row数据
    • 问题：也修改了data中的数据
    • 解决：使用ajax的数据
  • 表格数据children字段
    • 表格组件：默认支持树状表格，默认取的数据字段children
    • 如果你有children字段，去渲染成树状的表格，必须有row-key属性
    • children字段改成child字段
  • 勿修改admin权限
    • 重新导入数据
    • 重新执行一遍 shop.sql脚本
    • 新加用户：默认的名称是 超级管理员 没有任何权限
    • 激活，分配权限

03-角色列表-分配权限-渲染树状控件

• 怎么获取树状的所有全局数据？
  • 使用接口： rights/tree
• 什么时候获取数据？

  • 打开分配权限对话框的时候

    // 显示分配权限的对话框 async showRightDialog () { this.rightDialogFormVisible = true // 获取树状的所有权限数据 const {data: {data, meta}} = await this.message.error('获取所有权限失败') this.rightTree = data },

细节：

defaultProps: {
  // 数据结构中 下一级数据的字段名称
  children: 'children',
  // 显示的文字  的数据字段的名称
  label: 'authName'
}

04-角色列表-分配权限-选中已有权限

• 当你点击某一个角色去分配权限的时候，获取所有的权限，且把当前角色的权限在
• 树状的控件体现出来 需要去选中已有的权限
• 已有的权限 怎么去获取？
  • row的时候这会是可以使用的，不会去修改row的数据。
• 依赖这个数据去选中控件？

  • default-checked-keys 可以去做选中

  • 你的已有的权限的id放进数组，且赋值给default-checked-keys

  • 注意：不能有父节点，子需要三级权限ID即可

    // row 目的 获取当前角色的已有权限 // 已有权限 row.child // 问题：获取到父节点的id 获取到子节点的id // 父节点如果选项 下面所有的子节点都会选中 // 半选中 子节点没有全部选中 // 注意：不能有父节点，子需要三级权限ID即可 const arr = [] row.child.forEach(item => { item.child.forEach(item => { item.child.forEach(item => { arr.push(item.id) }) }) }) this.rightCheckedList = arr

数据：

// 选中的权限ID列表
rightCheckedList: [],

05-角色列表-分配权限-合并选中与半选中

• 需要获取到所有的 选中的权限

• 选中

• 半选中

  • 父级选项 子选项没有全部选中

• 因为后需要这样的数据;

• 通过控制提供的API获取选中的和半选中：

  • getCheckedKeys 获取选中
  • getHalfCheckedKeys 获取半选中

• 怎么合并：两个数组

• ... 展开符 const arr = [1,2,3] console.log(...arr)

• const arr = [...arr1,...arr2]

  // 合并全选与半选 const treeDom = this.$refs.tree const checkedArr = treeDom.getCheckedKeys() const halfCheckArr = treeDom.getHalfCheckedKeys() const arr = [...checkedArr, ...halfCheckArr] console.log(arr)

06-角色列表-分配权限-提交请求

// 提交
const {data: {meta}} = await this.$http.post(`roles/${this.rightRoleId}/rights`, {
  rids: arr.join(',')
})
if (meta.status !== 200) return this.$message.error('分配权限失败')
this.$message.success('分配权限成功')
// 善后
this.rightDialogFormVisible = false
this.getData()

07-商品分类-路由与组件准备

Categories.vue 文件

<template>
  <div class="cate_container">
    Categories
  </div>
</template>

<script>
import mixin from './Categories-Mixin'
export default {
  mixins: [mixin]
}
</script>

<style scoped>

</style>

Categories-Mixin.js 文件

export default {
  name: 'Categories'
}

配置路由：

{path: '/categories', name: 'categories', component: Categories}

08-商品分类-组件基础布局

<template>
  <div class="cate_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="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
      <div class="pager_container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

09-商品分类-树状表格渲染

• 分析结果：数据嵌套的关系通过children字段指定，必须指定 row-key 的属性为唯一标识
• 获取后台的分类数据：

  • type 传 3 或者 不传 需要三层数据

    mounted () { this.getData() }, methods: { async getData () { // 获取树状表格依赖的数据 const {data: {data, meta}} = await this.message.error('获取分类数据失败') // data 数据结构 {total,result} this.categories = data.result this.total = data.total } }

data数据：

// 列表数据相关
reqParams: {
  pagenum: 1,
  pagesize: 5
},
categories: [],
total: 0

注意：row-key 指定存在的唯一标识

10-商品分类-实现分页功能

<!-- @current-change 绑定当前页改变 点击分页的页码按钮和上一页下一页-->
<!-- 根据当前页码去更新列表changePager 默认传递参数 当前页码methods:{changePager(newPage)} -->
<!-- 计算总共多少页=总条数（total）/每页显示多少条（page-size） -->    
<!-- current-page 当前显示是第几页 组件去选中当前的页码按钮 --> 
<el-pagination
    @current-change="changePager"
    :page-size="reqParams.pagesize"
    :current-page="reqParams.pagenum"
    background
    layout="prev, pager, next"
    :total="total">
  </el-pagination>
</div>

changePager (newPage) {
  // 改变页码
  this.reqParams.pagenum = newPage
  // 获取数据
  this.getData()
}

注意：由于数据问题 当你点击第6页时会报错

如果想解决： 去数据库删除脏数据 护肤套装

11-商品分类-添加分类-对话框准备

<!-- 添加分类对话框  title 对话框的标题-->
<!-- addDialogFormVisible 通过数据控制对话框的显示和隐藏 -->
<el-dialog title="添加分类" width="400px" :visible.sync="addDialogFormVisible">
  <!-- model属性绑定表单数据对象  label-width 文字的宽度-->
  <el-form :model="addForm" label-width="100px" autocomplete="off">
    <el-form-item label="父级分类">
      <!-- 需要级联显示 -->
    </el-form-item>
    <el-form-item label="分类名称">
      <el-input v-model="addForm.cat_name"></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="addDialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

对应的数据：

// 添加分类相关
addDialogFormVisible: false,
addForm: {
  // 字段 需要和后台接口保持一致
  // cat_level 数据 会依赖 父级数据 的值
  cat_pid: 0,
  cat_name: '',
  cat_level: 0
}

12-商品分类-添加分类-分类级联准备

第一步：分析结构和属性的作用

<!-- 需要级联显示 -->
<!-- expand-trigger hover 鼠标经过就展开-->
<!-- options 指定选项的数据 -->
<!-- v-model 指定选择级联数据的时候去修改的  字段 -->
<!-- 级联的选择的结果：是一个数组 [一级分类ID,二级分类的ID] -->
<!-- @change="handleChange" 选择事件 指定了一个处理函数 handleChange-->
<el-cascader
  style="width: 100%"
  expand-trigger="hover"
  :options="categoryList"
  v-model="categoryValues"
  @change="handleChange">
</el-cascader>

第二步：申明级联对应的数据

// 级联相关数据
    categoryList: [],
    categoryValues: []
  }
},
methods: {
  // 选择了级联后触发
  handleChange () {

  },

第三步：动态渲染 categories 注意：只需要二层分类 type=2即可

// 获取数据 渲染级联
const {data: {data, meta}} = await this.$http.get('categories', {
  params: {type: 2}
})
if (meta.status !== 200) return this.$message.error('获取分类数据失败')
// 设置下拉选项数据
this.categoryList = data

数据中的字段名称和级联控件默认需要的不一致，需要通过props的数据指定字段的名称

<!-- props =｛value:'选项对象的id字段',label:'选项对象的名称字段'｝ -->
el-cascader  :props="{value:'cat_id',label:'cat_name'}"

13-商品分类-添加分类-表单数据校验

校验的规则使用的步骤：

第一步：定义校验规则 其实数据data中的某一项

addRules: {
  cat_name: [
    {required: true, message: '分类名称必填', trigger: 'blur'}
  ]
},

第二步：给el-form添加一个数据 rules='校验规则对象'

<el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px" autocomplete="off">

第三步：给需要校验的表单元素的父级 el-form-item 指定prop属性 指定使用什么校验规则

<el-form-item label="分类名称" prop="cat_name">

如果整个表单一起校验：

this.$refs.addForm.validate()

14-商品分类-添加分类-提交请求

第一步：准备需要提交的数据

// 提交数据
// cat_name v-model绑定好的不需要关心
// cat_pid cat_level 都和  选择的父级分类有关系 categoryValues
// 0表示一级分类；1表示二级分类；2表示三级分类
// cat_pid 和 categoryValues 有长度 最后一项的值 没长度 默认0
// cat_level 和 categoryValues 的长度一致
const len = this.categoryValues.length
if (len) {
  this.addForm.cat_pid = this.categoryValues[len - 1]
} else {
  this.addForm.cat_pid = 0
}
this.addForm.cat_level = len
console.log(this.addForm)

第二步：进行提交

// 提交
const {data: {meta}} = await this.$http.post('categories', this.addForm)
if (meta.status !== 201) return this.$message.error('添加分类失败')
this.$message.success('添加分类成功')
this.getData()
this.addDialogFormVisible = false

注意：打开添加对话框时重置 级联和表单 在打开对话框函数操作showAddDialog

// 重置级联之前选择的值
this.categoryValues = []

// 重置表单
this.$nextTick(() => {
  this.$refs.addForm.resetFields()
})

15-商品分类-编辑分类-对话框准备

步骤：和添加的时候相似 注意只有一个表单元素。

16-商品分类-编辑分类-表单数据填充

17-商品分类-编辑分类-表单数据校验

// 重置表单
this.$nextTick(async () => {
  this.$refs.editForm.resetFields()
  // 填充表单的时候 在重置之后
  // 获取数据
  const {data: {data, meta}} = await this.$http.get(`categories/${id}`)
  if (meta.status !== 200) return this.$message.error('获取分类失败')
  // 填充数据
  this.editForm = data
})

18-商品分类-编辑分类-提交请求

editSubmit () {
  this.$refs.editForm.validate(async valid => {
    if (valid) {
      const {data: {meta}} = await this.$http.put(`categories/${this.editForm.cat_id}`, {
        cat_name: this.editForm.cat_name
      })
      if (meta.status !== 200) return this.$message.error('编辑分类失败')
      this.$message.success('编辑分类成功')
      this.getData()
      this.editDialogFormVisible = false
    }
  })

19-商品分类-删除分类

// 删除
delCategory (id) {
  this.$confirm('是否删除该分类?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 发请求去删除
    const {data: {meta}} = await this.$http.delete(`categories/${id}`)
    if (meta.status !== 200) return this.$message.error('删除分类失败')
    this.$message.success('删除分类成功')
    this.getData()
  }).catch(() => {})
},

20-分类参数-路由与组件准备

21-分类参数-组件基础布局

22-分类参数-分类级联准备