很多页面都用到了一样的逻辑
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文件中处理好的值再返回来页面中,在到页面中判断,赋值
大大增加了灵活性
在汕尾督办的领导批示中有用到