09 分类参数

1参数管理

1.1 功能介绍

1.2 路由转发

2 参数列表

2.1 基本布局

2.2 添加警告

2.2.1 添加警告

2.2.2 去掉 叉号

2.2.3 添加图标

即：

       <el-alert
                title="警告提示的文案" type="warning"  :closable="false"   show-icon>
            </el-alert>

2.3 绘制选择分类区域

2.3.1 设置span

2.3.2 获取商品分类数据

我们要获取所有分类，且不需要分页

2.3.3 渲染

实际高度太高

在全局css文件中添加如下样式:（高度可以自行修改）

.el-cascader-panel{height: 200px;}

2.3.4 控制选择范围

只允许选择三级分类，不能只选择一级分类或者二级分类

解决：只需要监听选择器的change事件， 在事件中只用判断数组的长度即可

长度不等于三，证明你选择的不到三级分类

测试：

如果有的分类只有二级分类，没有三级分类。当你选择完二级分类， 输入框清空，不获取数据

现象就是没有选择东西

报错：

3渲染动态参数，静态属性

3.1 tab页使用

activename:'first' 默认展示第一个

@tab-click 点击一下，就会却换一个： 从first 却换到second

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

3.2 添加按钮

添加添加按钮， 同时控制他的禁用启用

当你没选择三级分类的时候，他都是禁用的

3.3 动态获取参数列表

3.1 获取数据

id： 三级分类id 定义一个计算属性（ 判断是不是三级分类id，是的话取出来。 他有一段逻辑，不能直接获取数据，所以用计算属性）

sel： 切换是静态参数 还是动态参数

调用时机： 三级分类点击出来--》变化的时候

3.4 有个bug

当你切换tab,发现他并没有调用重新接口

因为事件事放在三级分类的change事件，你切换tab，三级分类的change事件并没有改变，所以不会发请求

解决： 在三级分类的change事件， tab的切换事件 都调用该方法

3.5 还有个问题

抽取的方法，不能立马保存到data身上，你不知道是动态参数的返回结果，还是静态属性的返回结果

4渲染动态参数，静态属性

4.1 渲染 动态参数样式

4.2 添加参数,添加属性共用一个弹框

2.1 添加参数的form表单

2.2 取消时候清空input

4.3参数的添加

4.4修改

4.1 根据ID查询数据，显示到编辑框

4.2 编辑

4.5 删除

添加确认框

5 添加参数的配置项

5.1 循环tag项

将每个对象的属性attr_vals 从【字符串】重新赋值成【数组】

注意

空字符串进行分割，他会分割出来东西，

所以要进行判断

 item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []

对返回结果做处理，记得判空

5.2 按钮和文本框的切换

<!-- 输入的文本框 -->  
<el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>


变量两个：
            inputValue:'',
            inputVisible:false


方法： 点击变成 编辑框


 // 点击按钮显示文本输入框
    showInput() {
      this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
     
    },
    handleInputConfirm(){
        console.log()
    }
   

点击切换，input太长了，加个样式

.input-new-tag {
    width: 90px;
    margin: 5px 10px;
    vertical-align: bottom;
}

2.1 如上这样写有问题， 要修改都跟着修改了

因为渲染出来的tag 共用一个 inputVisible, inputValue ，

解决： 给【每一行】都提供一个 inputVisible, inputValue ，

在获取参数的时候， 给每一个对象都添加 inputVisible, inputValue ，

2.2 弹出input 框，使光标获得焦点

直接使用有问题，有可能页面的元素还没渲染完，你就去调用focus 就会报错

所以我们要等待一个时机，当页面的元素重新渲染完成之后， 再去获取文本框

 showInput(row) {
      row.inputVisible = true
      // 自动获取焦点
      // $nextTick 方法作用: 当页面上的元素被重新渲染之后,才会指定回调函数中的代码
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    }

2.3 当文本框失去焦点的时候，变成 button

  handleInputConfirm(row) {
            row.inputVisible = false
        }

2.4 优化

失去焦点，恢复到开始的样子

，但是再切换，发现数据还在

我们要把内容清空，否则下一次切换还有

2.5 保存

 // 文本框失去焦点和回车触发
    handleInputConfirm(row) {
      console.log('ok')
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
        return
      }
      // 如果没有return证明内容合法做后续处理
      row.attr_vals.push(row.inputValue.trim())
      row.inputValue = ''
      row.inputVisible = false
      // 需要发送请求,保存
      this.saveAttrVals(row)
    }

 async saveAttrVals(row) {
            const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
                attr_sel: this.activeName,
                attr_name: row.attr_name,
                attr_vals: row.attr_vals.join(' ')
            })
            if (res.meta.status !== 200) {
                return this.$message.error('修改参数项失败!')
            }
            this.$message.success('修改参数项成功!')
        },

2.6 删除

监听tage的close事件， 如果变化， 把这一个从数组vals中剔除， 在调用接口保存数据

<!-- 循环渲染Tag标签 -->
<el-tag closable v-for="(item, index) in scope.row.attr_vals" :key="index" @close="handleClosed(index, scope.row)"> {{ item }}</el-tag>
  

  // Tag标签的删除
    handleClosed(index, row) {
      row.attr_vals.splice(index, 1)
      this.saveAttrVals(row)
    },

5.3 解决小问题

当你选择了一个二级分类，没有选三级分类， input清空了，但是下边的内容并没有清空

错位：

只修改一个高度即可