健身计划生成周期为表格中的列,后台返回是json数据格式的planingDetail,数据示例如下
{"planCycle":{ "execDate": [1,2,3],
"execTime": "2021-05-28T07:57:45.000Z",
"planType": 1},
"planingRate": "1",
"planingValue": "10",
"planingNumber": "1",
"stepplaningRate": [{"key": 1623378161453,
"max": "22",
"min": "2",
"range": ["2", "3"],
"value": "2"}],
"stepplaningNumber": [{"key": 1623378161453,
"max": "22",
"min": "2",
"range": [],
"value": ""}]
}
现在,想取出key为planCycle的三个map各自对应的值,
planType为0时,计划周期取execTime的值显示为每天,
planType为1,时,计划周期取execDate(数组表示计划为多天)的值显示为每周周几,
planType为2时,计划周期取execDate(数组表示计划为多天)的值显示为每月几号,
{
label: '健身计划周期',
minWidth: 130,
show: true,
vif: () => this.visible,
//visible为Boolean值,控制该字段是否显示,
//详情请搜v-if和v-show的区别
formatter: (row, column, cellValue) => {
return this.formatCycleType(row)
}
},
需要在methods中定义formatCycleType函数
formatCycleType(row, vue) {
if (!row.planingDetail) {
return null
}
const planingDetailDate = JSON.parse(row.planingDetail)
if (!planingDetailDate.planCycle) {
return null
}
const cycleType = planingDetailDate.planCycle.cycleType
let cycleTypeValue = ''
if (cycleType === 2) {
if (!planingDetailDate.planCycle.execDate) {
return ''
}
cycleTypeValue += '每月' + [planingDetailDate.planCycle.execDate]
}
if (cycleType === 1) {
var newArr = planingDetailDate.planCycle.execDate.map(function(value, index) {
return value + 1
})
newArr.sort((a, b) => a - b)
cycleTypeValue = '每周' + newArr
}
if (cycleType === 0) {
if (!planingDetailDate.planCycle.execTime) {
return ''
}
cycleTypeValue += '按天' + this.$portal.parseTime(new Date(planingDetailDate.planCycle.execTime).getTime(), '{y}-{m}-{d}')
}
return cycleTypeValue
},
上面的newArr.sort((a, b) => a - b) 可保证日期是按从小到大排序,如每周1 2 3,
效果如下