[Vue.js]实战 -- 电商项目(五)

参数管理

参数管理概述

商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到

 

商品分类选择

选择商品分类

• 页面布局

<div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
        <!-- 警告区域 -->
        <el-alert title="注意: 只允许为第三级分类设置相关参数!" type="warning" :closable="false" show-icon></el-alert>
        <!-- 选择商品分类区域-->
        <el-row class="cat_opt">
            <el-col>
                <span>选择商品分类: </span>
                <!-- 选择商品分类的级联选择框 -->
                <el-cascader
                             expand-trigger="hover"
                             :options="catelist"
                             v-model="selectedCateKeys"
                             @change="handleChange"
                             :props="cateProps"
                             :change-on-select="true"
                             ></el-cascader>
            </el-col>
        </el-row>
        <el-table>

        </el-table>
    </el-card>

</div>

• 加载商品分类数据

// 商品分类列表
catelist: [],
// 选中的分类id值
selectedCateKeys: [],

//获取所有的商品分类列表
async getCateList() {
    const {data: res} = await this.$http.get('categories')
    if (res.meta.status !== 200) {
        return this.$message.error("获取商品分类失败!")
    }
    this.catelist = res.data

    console.log(this.catelist);
},

• 实现商品分类的级联选择效果

  • 级联选择框的配置对象

  // 级联选择框的配置对象
  cateProps: {
      // 指定选项的值为数据源对象的某个属性
      value: 'cat_id',
          // 指定选项标签为数据源对象的某个属性
          label: 'cat_name',
              // 指定选项的子选项为选项对象的某个属性值
              children: 'children'
  }, 
  

  • 级联选择框选中项变化,会触发这个函数

  // 级联选择框选中项变化,会触发这个函数
  handleChange() {
  
  },
  

 

控制级联菜单分类选择

• 只允许选择三级分类

cascaderChanged() {
    if (this.selectedCateList.length !== 3) {
        // 没有选中三级分类，把分类重置为空
        this.selectedCateList = []
        this.manyTableData = []
        this.onlyTableData = []
    } else {
        // 选中了三级分类后，获取该分类对应的参数列表数据
        this.getParamsList()
    }
}

• 通过计算属性方式获取分类id

cateId() {
    if (this.selectedCateList.length === 3) {
        return this.selectedCateList[this.selectedCateList.length - 1]
    } else {
        return null
    }
}

 

实现参数列表

根据选择的商品分类加载对应的参数数据

• 参数列表布局
• 根据分类id加载参数列表数据

// 获取所有商品的分类列表
const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
    params: { sel: this.activeName }
})

 

处理标签数据格式

将字符串形式的数据分隔为数组

res.data.forEach(item => {
    // 把字符串的可选项，分割为数组，重新赋值给 attr_vals
    item.attr_vals = item.attr_vals.length > 0 ? item.attr_vals.split(‘，') : []
})

 

控制添加标签文本框的显示

$nextTick的执行时机： DOM更新完毕之后

<el-button size="small" v-else @click="showTagInput(scope.row)">+ New Tag</el-button>

showTagInput(row) {
    row.tagInputVisible = true
    // 当我们修改了 data 中 tagInputVisible 的值以后，如果要操作文本框，必须等页面重新渲染完毕之后
    才可以，所以，必须把操作文本框的代码放到 $nextTick 中，当作回调去执行（$nextTick 的执行时机，是在
    DOM 更新完毕之后）
    this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
    })
}

 

实现标签动态添加的文本框控制逻辑

• 控制标签输入域的显示和隐藏
• 对输入的内容进行数据绑定

res.data.forEach(item => {
    // 把字符串的可选项，分割为数组，重新赋值给 attr_vals
    item.attr_vals = item.attr_vals.length > 0 ? item.attr_vals.split(‘，') : []
	// 为每个数据行，添加自己的 tagInputVisible ，从而控制自己展开行中的输入框的显示与隐藏
	item.tagInputVisible = false
	// 把文本框中输入的值，双向绑定到 item.tagInputValue 上
	item.tagInputValue = ''
})

 

实现标签的添加和删除操作

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) {
    return this.$message.error('更新参数项失败！')
}
this.$message.success('更新参数项成功！')

 

实现动态参数与静态属性添加

• 动态参数与静态属性表单重用

• 添加动态参数与静态属性使用的是同一个接口，参数是一样的

const { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`, {
    // 参数的名称
    attr_name: this.addForm.attr_name,
    // 参数类型 many only
    attr_sel: this.activeName
})
if (res.meta.status !== 201) return this.$message.error('添加参数失败！')
this.$message.success('添加参数成功！')