十五、分类参数

动态参数供用户选择、静态参数供用户参考

（1）通过路由加载分类参数组件页面

创建文件goods/Params.vue,并添加路由

（2）渲染分类参数界面的基本UI结构

使用到了组件Alert显示警告信息（不要忘记引入组件Alert）

（3）调用API获取商品分类列表数据

打印的catelist中的数据

（4）渲染商品分类的级联选择框

添加级联选择框，并修改定义相关的参数

                 

（5）控制级联选择框只选择三级分类

只要存放选中项id的数组selectedCateKeys长度不等于3，就是没有选中三级分类，将该数组置为空并返回

        

（6）渲染分类参数的Tabs页签

用到组件Tabs：

1. 引入组件

2. 使用页签

3. 点击页签时触发方法

（7）渲染添加参数的按钮，并控制按钮的禁用状态

如果已选中的分类id数组 长度小于3，则说明没有选中三级分类，按钮不可用

只有选中三级分类时，按钮才可用

         

（8）获取参数列表数据

1. 要想请求参数列表，我们需要当前选中的分类id 以及 sel值（only或many 用来标记是静态还是动态的）

2. 首先定义选中分类id的方法cateId

3. 然后将两个页签的name分别改为many和only。我们通过获取activeName的值，就可知道当前选中的是哪个页签

4. 级联选择框选中时，获取参数列表，并打印到控制面板

                 

（9）切换Tabs面板后，重新获取参数列表数据

问题: 当我们从动态参数切换到静态属性时，并没有发起获取参数列表数据请求

解决：将获取数据请求的方法抽离出来。当选中三级分类和切换tabs面板时都调用该方法

（10）将获取的参数数列表数据，根据动态和静态分别存到不同的数组中

（11）渲染动态参数和静态属性的table表格

（12）渲染添加参数的对话框

使添加动态参数和静态属性的对话框共用一个

1. 首先定义titleText方法。根据当前所选的页签是静态还是动态，进行确定。

2. 通过在对话框调用该方法，显示对应的标题。并在对话框的内容区域显示form表单

3. 为添加参数和添加属性按钮添加点击事件，点击时显示对话框

4. 重置对话框中的表单

（13）完成动态参数和静态属性的添加操作

1. 首先对对话框中的确定按钮添加点击事件。（即点击确定，添加属性或参数）

2. 在点击事件所对应的方法中，对提交的表单数据进行预验证。

3. 验证通过后，发起添加属性请求

4. 添加成功后，显示添加成功的消息，重新获取参数列表，关闭当前对话框

           

         

（14）渲染编辑参数的对话框

参考添加参数的对话框，进行修改复用

1. 为编辑按钮添加点击事件，点击时，显示修改对话框

2. 创建修改对话框

3.添加相应的变量定义和方法

   

（15）修改参数，完成修改参数的操作

1. 点击编辑按钮时，触发事件，并传入该参数的id。（分别在动态参数和静态属性添加）

2. 通过该参数的id请求要编辑参数的原始数据，显示在表单中。并将获取的值赋给修改数据editForm（castId指分类id，attrId指该分类的参数id）

3. 点击编辑对话框的确定按钮，发送修改请求，修改成功后，提示修改成功信息、重新获取参数列表、关闭对话框

           

（16）完成删除参数的业务逻辑

1. 分别为静态和动态删除按钮添加点击事件，并将相应参数的id传入

2. 在该方法中，首先弹出删除提示框

3. 如果选择确定删除，则发送删除请求

4. 删除成功后，重新获取参数列表，提示删除成功

（17）渲染参数下的可选项（展开列）

1. 首先在获取参数的getParamsData方法中，将attr_vals转化为字符数组（用空格分隔）

2. 在展开列，先用作用域插槽获取数据，再使用for循环和Tag组件，将数组中的标签显示出来

问题：当参数没有对应的标签时，会显示空标签（我们用空格对字符串进行分割时，对于空的字符串，直接分割成了数组[""]）

解决： 在分割时进行判断，如果该字符串是空的，直接转化为空数组[]

（18）控制 添加标签按钮 与 文本框 的切换显示

当点击添加标签按钮时，按钮消失，文本框出现。（图1-》图2）

当文本框失去焦点时，文本框消失，添加标签按钮出现 （图2 -》 图3）

               

通过if和else实现，可使用tag组件：

1. 使用标签

2. 用到的变量

3. 用到的方法

4. 样式

         

（19） 为每一行数据（一个参数）提供单独的布尔值inputVisible和输入参数inputValue

问题：点击添加标签按钮时，两行都出现了文本框

原因：每一行的数据都共用了同一个布尔值inputVisible和输入参数inputValue

解决：在获取当前分类的参数方法getParamsData中，为当前分类的每一个参数添加布尔值inputVisible和输入参数inputValue

1. getParamsData 方法

2. tag组件

3. 显示文本框方法

（20） 让文本框自动获取焦点

（21）实现文本框与按钮的切换显示

1. 传入当前数据，以确定是哪个参数所对应的文本框

2. 如果文本框中的前后有空格，则输入不合法，重置为空；否则合法，做进一步的处理

（22）完成参数可选项的添加操作（即完成添加标签的操作）

在方法handleInputConfirm中进行操作（输入框失去焦点或点击enter时触发）

1. 首先将输入框中输入的数据保存到当前的row.inputValue

2. 再发起添加标签的请求，将我们添加的标签 在数据库中更新（注意需要将标签数组转化为字符串的形式）

（23）删除参数下的可选项（即删除参数下的标签）

1. 点击删除的按钮，触发close事件，并传入当前标签在标签数组中的下标，以及当前的数据scope.row

2. 在close触发的方法中，删除对应的标签

3. 并将当前对attr_vals（标签数组）的修改保存到数据库中（可以将该操作抽取到一个方法中，直接调用该方法即可）

抽离出的方法：将对attr_vals（标签数组）的修改保存到数据库中

（24）清空表格数据

问题：当选择二级或一级分类时（不存在还在的分类），表格中的原始数据不会清空

解决：在获取参数信息时，如果没有选择三级目录就将manyTableData和onlyTableData中的数据清空

（25）完成静态属性表格中的展开行效果

直接用动态参数的展开行效果