数据处理的方法

1. 通过 Object.keys 进行数据处理

接口返回数据

{

"neverUsed": 33,
"inDepository": 0,
"onTheShelf": 29,
"takeDown": 1,
"toBeRepair": 0,
"repairing": 1,
"toBeScrap": 0,
"scrapping": 1,
"scrapped": 0

}

需要处理成的数据

[
    {
        "name": "在库",
        "value": 0
    },
    {
        "name": "未使用",
        "value": 33
    },
    {
        "name": "已上架",
        "value": 29
    },
    {
        "name": "维修中",
        "value": 1
    },
    {
        "name": "已报废",
        "value": 0
    },
    {
        "name": "报废中",
        "value": 1
    },
    {
        "name": "已下架",
        "value": 1
    },
    {
        "name": "待维修",
        "value": 0
    },
    {
        "name": "待报废",
        "value": 0
    }
]

实现过程

getAssetsStatus().then((res) => {
    if (res.data.code == 200) {
      let list = res.data.data
      let data = []

      // 将 对应字段的名称 定义一个 对象(map)
      let map = {
        inDepository: '在库', // 在库
        neverUsed: '未使用', //  未使用
        onTheShelf: '已上架', //已上架
        repairing: '维修中', // 维修中
        scrapped: '已报废', // 已报废
        scrapping: '报废中', //报废中
        takeDown: '已下架', // 已下架
        toBeRepair: '待维修', //  待维修
        toBeScrap: '待报废', //待报废
      }
      
      // 拿到 定义的对象的 key ，并遍历里面的每一项
      Object.keys(map).map((item) => {
        data.push({
          name: map[item], // 利用中括号取值法 拿到名字
          value: list[item],// 利用中括号取值法 拿到 value 值。
        })
      })
      console.log('data',data)
      this.initPieEcharts(data)
    }

2. 星期 数据处理

后端返回数据

• dayOfWeek: 6
• dutyDay: “2022-08-06”

希望处理的结果

• 2022-08-06 星期六

改善前的处理方法

weekTranslate(date, weekIndex) {
  // if (week == 0) {
  //   return date + '星期天'
  // }
  // if (week == 1) {
  //   return date + ' 星期一'
  // }
  // if (week == 2) {
  //   return date + ' 星期二'
  // }
  // if (week == 3) {
  //   return date + ' 星期三'
  // }
  // if (week == 4) {
  //   return date + ' 星期四'
  // }
  // if (week == 5) {
  //   return date + ' 星期五'
  // }
  // if (week == 6) {
  //   return date + ' 星期六'
  // }
},

改善后的处理方法

weekTranslate(date, weekIndex) {
  const weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
  const dateWeek = date + '  '+ weeks[weekIndex]
  return dateWeek
},

3. 封装组件中 button 触发事件的处理

思路一：

遍历渲染多个 button ，触发按钮事件的时候，把 text 传回给父组件，最后父组件根据 text 动态判断，执行增删改查相关逻辑

父组件配置需要添加的button：
 opBuList: [
        {
    
    
          type: 'text',
          text: '编辑',
        },
        {
    
    
          type: 'text',
          text: '删除',
        }
      ],
editHandle()
deleteHandle()

testHandle(text){
    
    
    if(text === '编辑') this.editHandle()
    if(text === '删除') this.deleteHandle()
}

封装组件中的for 渲染：

 <Button
            v-for="(o, i) in opBuList"
            :key="i"
            size="mini"
            :type="o.type"
            :disabled="scope.row.disabled && o.disabled"
            @click="operationHander(text, scope.row)"
            >{
    
    {
    
     o.text }}</Button
          >

operationHander(text){
    
    
    this.$emit('testHandle',text)
}

思路二 ：

配置好 增删改查 相关方法的 方法名称，遍历渲染多个 button ，触发 button 事件的时候，将方法名 传回给 父组件。父组件根据 this方法名 调用父组件中 定义好的 增删改查 的相关方法。

父组件配置需要添加的button：
 opBuList: [
        {
    
    
          type: 'text',
          func: 'editFunc'
        },
        {
    
    
          type: 'text',
          func: 'deleteFunc'
        }
      ],
// 编辑事件
editFunc(){
    
    }
// 删除事件
deleteFunc(){
    
    }

testHandle(func){
    
    
    this[func]()
}

封装组件中的for 渲染：

 <Button
            v-for="(o, i) in opBuList"
            :key="i"
            size="mini"
            :type="o.type"
            :disabled="scope.row.disabled && o.disabled"
            @click="operationHander(o.func, scope.row)"
            >{
    
    {
    
     o.text }}</Button
          >

operationHander(func){
    
    
    this.$emit('testHandle',func)
}