事件排序组件

需求分析

HTML部分

<div class="time-line">
   <el-timeline>
     <el-timeline-item
       v-for="(item, index) in sportsPerformanceList"
       :key="index"
       :timestamp="item.date"
       placement="top"
     >
       <div
         slot="dot"
         class="df ai icon"
         @click="itemClick(index)"
       >
         <div class="left"></div>
         <div class="right">
           <i
             v-if="tlIndex === index"
             class="el-icon-arrow-down"
           ></i>
           <i v-else class="el-icon-arrow-up"></i>
         </div>
       </div>
       <div v-show="tlIndex === index">
         <div
           class="tl-type"
           v-for="(listItem, i) in item.list"
           :key="i"
         >
           <el-tag :type="statusClass[listItem.eventType]">
             {{
               listItem.eventType
                 | valueToText(
                   DROPDOWNBOX.EVENT_TYPE,
                   'value',
                   'label'
                 )
             }}
           </el-tag>
           <div
             class="li-item"
             v-for="(threeItem, j) in listItem.threeList"
             :key="j"
           >
             <span
               >{{ threeItem.date }} &emsp;
               {{ threeItem.eventName }} &emsp;
               {{ threeItem.eventResults }}</span
             >
             <el-button
               type="text"
               @click="editAchievement(threeItem)"
             >编辑</el-button>
             <el-button
               type="text"
               @click="deleteAchievement(threeItem)"
             >删除</el-button>
           </div>
         </div>
       </div>
     </el-timeline-item>
   </el-timeline>
 </div>

css

.time-line {
 margin-top: 10px;
 max-height: 240px;
 overflow-y: auto;
 padding-left: 2px;
 /deep/.el-timeline {
   position: relative;
   left: -40px;
   .el-timeline-item__timestamp {
     color: #333333;
     font-weight: bold;
     padding-top: 2px !important;
   }
 }
 .tl-type {
   width: 90%;
   margin: 10px 0 15px;
 }
 .li-item {
   // width: 755px;
   line-height: 20px;
   font-size: 14px;
   color: #666666;
   span {
     padding-right: 30px;
   }
   el-button {
     line-height: 20px !important;
   }
 }
 .icon {
   position: relative;
   top: -4px;
   left: -1px;
   cursor: pointer;
   z-index: 9;
 }
 .left {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #e4e7ed;
   margin-right: 60px;
 }
}

JS

其中sportsPerformanceList是用来存储格式化过的数据，是一个三层的嵌套数组，sportsPerformance是只有一层的数组，用于提交数据。

• 当新增时，就往sportsPerformance中push一条数据，并进行数据格式化（调用formatDateData(sportsPerformance)），存储至sportsPerformanceList。
• 当点击编辑时需要找出sportsPerformance中与当前点击事件相同的数据，获取索引，并进行表单回填操作，然后进行编辑，保存时对sportsPerformance进行修改，之后进行格式化。
• 当删除时与编辑相同，找到索引，对sportsPerformance进行删除操作，之后进行格式化。

格式化代码如下：

// 格式化时间数据
formatDateData(data) {
  let newArr = [] // 按年份排序数组
  let lastArr = [] // 最终要输出的结果
  data.forEach(item => {
    let index = -1
    let isExists = newArr.some((newItem, j) => {
      if (new Date(item.date).getFullYear() === newItem.date) {
        index = j
        return true
      }
    })
    if (!isExists) {
      newArr.push({
        date: new Date(item.date).getFullYear(),
        subList: [item]
      })
    } else {
      newArr[index].subList.push(item)
    }
  })
  newArr.forEach(a => {
    const list = this.formatEventTypeData(a).map(item => {
      // 比赛类型内的时间排序
      const threeList = item.threeList.sort((p, n) => {
        return +new Date(n.date) - +new Date(p.date)
      })
      return { ...item, threeList }
    })
    lastArr.push({
      list,
      date: a.date + ''
    })
  })
  this.sportsPerformanceList = lastArr
},
// 格式化赛事类型
formatEventTypeData(data) {
  let newEventArr = []
  data.subList.forEach(item => {
    let index = -1
    let isExists = newEventArr.some((newItem, j) => {
      if (item.eventType === newItem.eventType) {
        index = j
        return true
      }
    })
    if (!isExists) {
      newEventArr.push({
        eventType: item.eventType,
        threeList: [item]
      })
    } else {
      newEventArr[index].threeList.push(item)
    }
  })
  newEventArr = newEventArr.sort(function (p, n) {
    return +p.eventType - +n.eventType
  })
  return newEventArr
}

新增

this.sportsPerformance.push(data)
this.formatDateData(this.sportsPerformance)

编辑

this.sportsPerformance.splice(index, 1, data)
this.formatDateData(this.sportsPerformance)

删除

this.sportsPerformance.splice(index, 1)
this.formatDateData(this.sportsPerformance)