vue项目封装方法

很多页面都用到了一样的逻辑

this.dialogForm.id = taskData.id
        const cycleIds = taskData.supervisionCycleIds ? taskData.supervisionCycleIds.split(',') : []
        // 周期回显
        this.subMissionData.type = taskData.cycleType || 'week'
        this.subMissionData.weeklySelect = []
        this.subMissionData.tableData = []
        if (taskData.cycleType === 'week') {
          this.subMissionData.weeklySelect = cycleIds
        } else if (taskData.cycleType === 'dataTime') {
          cycleIds.forEach((element, index, arr) => {
            const dataObj = { sort: index + 1, date: element }
            this.subMissionData.tableData.push(dataObj)
          })
          console.log('1030', this.subMissionData)
        } else if (taskData.cycleType === 'month') {
          cycleIds.forEach((element, index, arr) => {
            const dataObj = { sort: index + 1, month: element }
            this.subMissionData.tableData.push(dataObj)
          })
        } else if (taskData.cycleType === 'quarter') {
          const cycleData = JSON.parse(cycleIds)
          const cycleList = cycleData.map((item, index) => {
            const obj = {}
            obj.sort = index + 1
            for (const kye in item) {
              obj.quarter = parseInt(kye)
              obj.quartMonth = item[kye]
            }
            return obj
          })
          this.subMissionData.tableData = cycleList
        }

就可以将他们封装在一个公共js文件中

初级的封装

再调用方法的页面，将相应的值传过去

periodicEcho(taskData, ids, this.subMissionData)

在js文件中接受

export function periodicEcho(taskData, ids, subMissionData) {
  if (taskData.cycleType === 'week') {
    subMissionData.weeklySelect = ids
  } else if (taskData.cycleType === 'dataTime') {
    ids.forEach((element, index, arr) => {
      const dataObj = { sort: index + 1, date: element }
      subMissionData.tableData.push(dataObj)
    })
    console.log('1030', subMissionData)
  } else if (taskData.cycleType === 'month') {
    ids.forEach((element, index, arr) => {
      const dataObj = { sort: index + 1, month: element }
      subMissionData.tableData.push(dataObj)
    })
  } else if (taskData.cycleType === 'quarter') {
    const cycleData = JSON.parse(ids)
    const cycleList = cycleData.map((item, index) => {
      const obj = {
        sort: '',
        quarter: {},
        quartMonth: []
      }
      obj.sort = index + 1
      for (const kye in item) {
        obj.quarter = parseInt(kye)
        obj.quartMonth = item[kye]
      }
      return obj
    })
    subMissionData.tableData = cycleList
  }
}

这样子虽然能够达到效果，但是灵活性差。

高级用法

在调用方法的页面

 const {
          cycleIds,
          cycleTableData,
          cycleList } = periodicEcho(taskData, ids)
        cycleIds && (this.subMissionData.weeklySelect = cycleIds)
        // cycleList && (this.$set(this.subMissionData, 'tableData', cycleList))
        cycleTableData && (this.$set(this.subMissionData, 'tableData', cycleTableData))
        cycleList && (this.subMissionData.tableData = cycleList)
        console.log('this.subMissionData', this.subMissionData)

在js文件中

export function periodicEcho(taskData, ids) {
  let cycleIds = ''
  const cycleTableData = []
  let cycleList
  console.log('1747', taskData.cycleType)
  ids = Array.from(ids)
  console.log('14565', ids)
  if (taskData.cycleType === 'week') {
    cycleIds = ids
  } else if (taskData.cycleType === 'dataTime') {
    ids.forEach((element, index, arr) => {
      cycleTableData.push({ sort: index + 1, date: element })
    })
  } else if (taskData.cycleType === 'month') {
    ids.forEach((element, index, arr) => {
      cycleTableData.push({ sort: index + 1, month: element })
    })
  } else if (taskData.cycleType === 'quarter') {
    const cycleData = JSON.parse(ids)
    const obj = {
      sort: '',
      quarter: {},
      quartMonth: []
    }
    cycleList = cycleData.map((item, index) => {
      obj.sort = index + 1
      for (const kye in item) {
        obj.quarter = parseInt(kye)
        obj.quartMonth = item[kye]
      }
      return obj
    })
  }
  console.log('1803', cycleTableData)
  return {
    cycleIds,
    cycleTableData,
    cycleList
  }
}

封装的方法是在js文件中处理好的值再返回来页面中，在到页面中判断，赋值

大大增加了灵活性

在汕尾督办的领导批示中有用到