一、商品列表
1.进行商品列表的展示，查询商品，删除商品，分页功能（略）
效果图：
2.自定义格式化时间的全局过滤器
代码：
效果图：
3.步骤条的实现
代码：
效果：
4.实现步骤条与tab栏的数据联动效果
代码：
这里的v-model可以实现切换tab栏时给activeIndex赋值，值为tab属性的name的值
效果图：
5.分析表单的组成部分（这里需要注意的是需要把form表单嵌套在tag标签页的外面）
6.绘制基本信息面板的UI结构
效果图:
7.阻止标签页的切换
代码：
其中:before-leave="beforeTabLeave"是在左侧tab导航栏切换时使用，两个参数activeName,oldactiveName分别代表现在tab标签页的名字（name），和原来标签页的名字（name），当return是false的时候则能阻止标签页的切换
效果图：
8.获取动态参数列表数据
代码：
9.绘制动态参数列表的复选框
代码：
效果图：
10.上传商品图片（upload上传组件）
代码：
效果图：
11.为upload组件绑定headers请求头
12.监听upload组件的on-success事件
13.监听upload组件的on-remove事件
代码：
14.实现图片预览效果
代码：
效果图：
15.富文本编辑器
代码：
16.添加商品预验证
效果图：
vue-quill-editor插件github地址和使用方法： github.com/surmon-chin…
17.添加商品
代码：
二、分类参数
1.介绍商品分类参数功能的作用
2.创建Params.vue组件
3.渲染分类参数页面的基本UI结构
4.调用API获取商品分类列表数据
API接口：
代码：
5.渲染级联选择框
6.控制级联选择框的选中范围
handleChange() {
// console.log(this.selectedCateKeys);
// 证明选中的不是三级分类
if (this.selectedCateKeys.length !== 3) {
this.selectedCateKeys = []
return
}
}
7.渲染分类参数的Tabs标签页
<el-tabs v-model="activeName" @tab-click="handleClick">
<!-- 添加动态参数的面板 -->
<el-tab-pane label="动态参数" name="many">
<!-- 添加参数按钮 -->
<el-button type="primary" size="mini" :disabled="isBtnDisabled">添加参数</el-button>
</el-tab-pane>
<!-- 添加静态属性的面板 -->
<el-tab-pane label="静态属性" name="only">
<!-- 添加属性按钮 -->
<el-button type="primary" size="mini" :disabled="isBtnDisabled">添加属性</el-button>
</el-tab-pane>
</el-tabs>
activeName为标签页的name属性的值,在哪个标签页activeName就等于谁的name值，@tab-click为切换标签页触发的事件
8.渲染添几件参数按钮，并控制按钮为禁用状态，通过级联中的数组来判断是否选中三级分类来控制
9.获取参数列表数据
API:
代码：
// 根据所选分类的ID，和当前所处的面板，获取对应的参数
const {data:res}= await this.$http.get(`categories/${this.cateID}/attributes`,{params:{
sel:this.activeName
}})
if(res.meta.status !== 200){
return this.$message.error('获取参数列表失败')
}else{
console.log(res.data);
}
10.渲染添加参数对话框（与之前类似）
11.完成动态参数和静态属性的添加操作
API接口:
代码：
addParams(){
// 表单验证
this.$refs.addFormRef.validate(async valid =>{
if(!valid){
return
}else{
// 添加参数
const {data:res} = await this.$http.post(`categories/${this.cateID}/attributes`,{
attr_name:this.addForm.attr_name,
attr_sel:this.activeName
})
if(res.meta.status !==201){
return this.$message.error('添加失败!')
}else{
this.$message.success('添加成功!')
this.addParamsDialogVisible = false
this.getParamsData()
}
}
})
}
12.对参数的编辑
api接口：
// 编辑对话框点击确定按钮触发按钮
editParams() {
this.$refs.editFormRef.validate( async valid=>{
if(!valid){
return
}else{
const {data:res} =await this.$http.put(`categories/${this.cateID}/attributes/${this.editForm.attr_id}`,{
attr_name:this.editForm.attr_name,attr_sel:this.activeName
})
if(res.meta.status !==200){
return this.$message.error('更新失败')
}else{
this.$message.success('更新成功')
this.editParamsDialogVisible = false
this.getParamsData()
}
}
})
},
13.对参数的删除
api接口:
代码:
// 删除参数
async removeParams(attr_id){
const confirmResult=await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
if(confirmResult !=='confirm'){
return this.$message.info('已经取消删除')
}else{
const {data:res} =await this.$http.delete(`categories/${this.cateID}/attributes/${attr_id}`)
if(res.meta.status !==200){
this.$message.error('删除失败')
}else{
this.getParamsData()
this.$message.success('删除成功')
}
}
}
14.渲染参数下的可选择
代码：
效果图：
15.为每—行数据提供单独的inputVisible和inputValue（主要是为了防止不同参数的数据绑定）
16.让添加参数可选择文本框自动获得焦点
其中$nextTick是为使得页面上元素调用后，才会进入回调函数执行代码
17.完成参数项的添加
// 文本框失去焦点，或者按下enter键触发这个函数
async handleInputConfirm(row) {
if (row.inputValue.trim().length === 0) {
row.inputValue = ''
row.inputVisible = false
return
}else{
// 如果没有return,则证明输入的内容需要做后续处理
row.attr_vals.push(row.inputValue.trim())
const {data:res} =await this.$http.put(`categories/${this.cateID}/attributes/${row.attr_id}`,{
attr_name:row.attr_name,
attr_sel:row.attr_sel,
attr_vals:row.attr_vals.join(' ')
})
console.log(res);
// 清空文本框
row.inputValue = ''
// 关闭输入框
row.inputVisible = false
if(res.meta.status !== 200){
this.$message.error('修改参数项失败')
}else{
this.$message.success('修改参数项成功')
}
}
效果图：
18.删除参数的可选项
// 删除参数项
handleClosed(i,row){
row.attr_vals.splice(i,1)
this.saveAttrVals(row)
},
async saveAttrVals(row){
const {data:res} =await this.$http.put(`categories/${this.cateID}/attributes/${row.attr_id}`,{
attr_name:row.attr_name,
attr_sel:row.attr_sel,
attr_vals:row.attr_vals.join(' ')
})
if(res.meta.status !== 200){
this.$message.error('修改参数项失败')
}else{
this.$message.success('修改参数项成功')
}
}
三、商品分类
1.通过路由加载商品分类组件
2.完成商品分类的基本布局
3.调用API获取商品分类列表数据
代码：
//获取商品分类数据
async getCateList() {
const {data:res}=await this.$http.get('categories',{params:this.queryInfo})
if (res.meta.status !== 200) {
return this.$message.error('获取商品分类列表失败')
} else {
// 把数据赋值给catelist
this.cateList =res.data.result
this.total =res.data.total
}
4.初步使用vue-table-with-tree-grid树形表格组件（vue-table-with-tree-grid）
1.vue-table-with-tree-grid的使用
（1）安装依赖
npm install vue-table-with-tree-grid
（2）使用vue-table-with-tree-grid
首先在main.js里面导入：
import treeTable from 'vue-table-with-tree-grid'
然后把其注册为全局组件：
Vue.component('tree-table',treeTable)
然后就可以在想要引入的组件里引入就行
2.实际使用
<!-- 表格 -->
<tree-table class="table" :data="cateList" :columns="columns" :show-row-hover="false" show-index index-text="#" :selection-type="false" :expand-type="false" border></tree-table>
其中各属性的作用可见这个链接github.com/MisterTaki/… 使用实例可见这个链接github.com/MisterTaki/…
效果图：
5.利用自定义模板列渲染是否符合列
效果图：
6.渲染排序和操作列的UI结构
1.‘排序’列模板渲染
效果图：
2.‘操作’列模板渲染
效果图:
7.实现分页功能
8.渲染添加分类的对话框和表单(与前面的类似)
9.获取父级分类列表
接口文档：
代码：
// 获取父级分类列表
async getParentCateList() {
const { data: res } = await this.$http.get('categories', {
params: {
// 表示只获取一级和二级分类列表
type: 2
}
})
if (res.meta.status !== 200) {
return this.$message.error('获取父级分类列表失败')
} else {
this.parentCateList = res.data
}
}
10.渲染级联选择器
代码：
效果图：
