Vue实战之 8.商品管理 -- 分类参数

1. 参数管理概述

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

2. 商品分类选择

1. 选择商品分类

• 页面基本布局
• 加载商品分类数据
• 实现商品分类的级联选择效果

 // 获取所有的商品分类列表
    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)
    }

2. 控制级联菜单分类选择

• 只允许选择三级分类
• 通过计算属性的方式获取分类id

// 级联选择框选中项变化，会触发这个函数
    handleChange () {
      // 证明选中的不是三级分类
      if (this.selectedCateKeys.length !== 3) {
        this.selectedCateKeys = []
      }

      // 证明选中的是三级分类
      console.log(this.selectedCateKeys)
    }

若没有选中第三级分类，则“添加参数”按钮和“添加属性”按钮需要被禁用，反之，则启用。

禁用和启用与级联选择器对应的数组有关，如果数组长度为3，则证明选中了第三级分类。
可以定义一个计算属性，根据长度返回一个布尔值，来控制按钮的启用和禁用

 computed: {
  // 如果按钮需要被禁用，则返回true
    isBtnDisabled () {
      if (this.selectedCateKeys.length !== 3) {
        return true
      }
      return false
    },
    // 当前选中的三级分类的id
    cateId () {
      if (this.selectedCateKeys.length === 3) {
        return this.selectedCateKeys[2]
      }
      return null
    }
  }

 <!-- 添加参数的按钮 -->
    <el-button type="primary" size="mini"
    :disabled="isBtnDisabled">添加参数</el-button>

3. 实现参数列表

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

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

// 获取参数的列表数据
    async getParamsData () {
      // 证明选中的不是三级分类
      if (this.selectedCateKeys.length !== 3) {
        this.selectedCateKeys = []
      }

      // 证明选中的是三级分类
      console.log(this.selectedCateKeys)
      // 根据所选分类的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('获取参数列表失败!')
      }
      console.log(res.data)
    }

2. 处理标签数据格式

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

• 如果本来就为空，则返回空数组

 res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        // console.log(item.attr_vals)
      })

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

<!-- 添加的按钮 -->
          <el-button v-else class="button-new-tag"
           size="small"
          @click="showInput(scope.row)">+ New Tag</el-button>

// 点击按钮后，展示文本输入框
    showInput (row) {
      // console.log(row)
      row.inputVisible = true
      // 让文本框自动获得焦点
      // $nextTick 方法的作用：当页面上元素被重新渲染之后，才会执行回调函数中的代码
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    }

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

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

 res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        // console.log(item.attr_vals)
        // 控制文本框的显示与隐藏
        item.inputVisible = false
        // 文本框中输入的值
        item.inputValue = ''
      })

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

// 将对attr_vals的操作，保存到数据库
    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) {
        return this.$message.error('修改参数项失败!')
      }
      this.$message.success('修改参数项成功!')
    }

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

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

 // 动态计算标题的文本
    titleText () {
      if (this.activeName === 'many') {
        return '动态参数'
      } else {
        return '静态属性'
      }
    }

// 点击按钮，添加参数
    addParams () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        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('添加参数失败!')
        }
        this.$message.success('添加参数成功!')
        this.addDialogVisible = false
        this.getParamsData()
      })
    }