后台管理项目进展（第七天）

完成了商品列表相关的功能

因为大部分跟前面几个页面实现方法相似，所以只记录较为特殊的几个方面

一、时间格式化

引入dayjs插件，独立封装一个处理时间的模块

// 封装时间格式处理模块
import dayjs from 'dayjs'

// 格式化时间为 YYYY-MM-DD HH:mm:ss
export const formatTime = timeStamp => {
  return dayjs(timeStamp).format('YYYY-MM-DD HH:mm:ss')
}

由于当前需求只有一种时间格式，以后若有变动，可以自行增加处理时间函数

二、步骤条与tabs的联动

 

只需将控制步骤条变化的参数同步绑定到tabs栏切换的参数，即可实现点击tabs与步骤条同步变化

三、动态属性标签的渲染

从后台获取的标签属性是一个以空格隔开的字符串，为了方便循环渲染，需对标签进行转化数组处理

 res.data.data.forEach(item => {
          item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')
        })
        this.activeParams = res.data.data

四、图片预览

在上传成功后后台返回了一个临时的存储图片地址，设置一个图片展示弹窗，动态绑定返回的图片地址

 

 五、移除上传的图片

       获取到被移除图片的临时路径，在得到该图片在存放图片数组中的索引值，通过数组方法移除

   // 移除以上传的图片
    handleRemove(file) {
      // 获取移除图片的临时路径
      const removepic = file.response.data.tmp_path
      // 得到图片在pics数组中的索引值 (难点)
      const index = this.addForm.pics.findIndex(x => x.pic === removepic)
      // splice移除图片
      this.addForm.pics.splice(index, 1)
    },

六、处理添加商品的数据

由于双向绑定的数据与发请求的数据格式上有一些出入，需要对发送请求的数据进行处理，但直接处理会影响到渲染的界面，这里采用深拷贝的方法

 // 执行添加业务逻辑
        // 由于多个表单双向绑定addForm数据，发起请求中goods_cat，attrs为字符串，直接改动会影响到原页面，并报错，所以采用深拷贝
        const form = _.cloneDeep(this.addForm)
        // 将good_cat转化为字符串
        form.goods_cat = form.goods_cat.join(',')
        // 设置attrs参数
        // 处理动态参数
        this.activeParams.forEach(item => {
          const newInfo = {}
          // 传入id
          newInfo.attr_id = item.attr_id
          // 是渲染的动态属性tag同步选中的参数，否则点击其他步骤再返回会重置
          item.attr_vals = this.checkedParams
          // 将被选中的动态参数转换为字符串重新赋与newInfo.attr_vals
          newInfo.attr_vals = this.checkedParams.join(' ')
          form.attrs.push(newInfo)
        })
        // 处理静态属性
        this.staticAttribute.forEach(item => {
          const newInfo = {}
          newInfo.attr_id = item.attr_id
          newInfo.attr_vals = item.attr_vals
          form.attrs.push(newInfo)
        })
        // 发送添加商品请求
        const res = await addGoods(form)
        if (res.data.meta.status !== 201) {
          return this.$message.error('添加商品失败')
        }
        this.$message.success('添加商品成功')
        this.$router.push('/goods')