工作中遇到的开发问题随记（1）

如何用js代码写出下面表格形式？

1、首先做需求前和后端沟通数据结构（方便给出更好的方案，避免因数据结构变更重新写结构）

后端数据格式为：

const testData = {

"reinsuranceInfo":{

"1":[

{

"id":null,

"gmtCreate":null,

"gmtModified":null,

"operator":null,

"levelId":null,

"title":"test0",

"stage":1,

"stepConfigList":[

{

"id":0,

"gmtCreate":null,

"gmtModified":null,

"startTime":1628653419396,

"finishTime":1628653419396,

"status":null,

"operator":null,

"reinsuranceProcedureId":null,

"content":'内容',

"director":null,

"workingMode":null

{

"id":1,

"gmtCreate":null,

"gmtModified":null,

"startTime":1628653419396,

"finishTime":1628653419396,

"status":null,

"operator":null,

"reinsuranceProcedureId":null,

"content":'内容1',

"director":null,

"workingMode":null

}

]

}

"2":[

{

"id":null,

"gmtCreate":null,

"gmtModified":null,

"operator":null,

"levelId":null,

"title":"test1",

"stage":2,

"stepConfigList":[

{

"id":1,

"gmtCreate":null,

"gmtModified":null,

"startTime":1628653419396,

"finishTime":1628653419396,

"status":null,

"operator":null,

"reinsuranceProcedureId":null,

"content":null,

"director":null,

"workingMode":null

}

]

}

"3":[

{

"id":null,

"gmtCreate":null,

"gmtModified":null,

"operator":null,

"levelId":null,

"title":"test1",

"stage":3,

"stepConfigList":[

{

"id":2,

"gmtCreate":null,

"gmtModified":null,

"startTime":1628653419396,

"finishTime":1628653419396,

"status":null,

"operator":null,

"reinsuranceProcedureId":null,

"content":null,

"director":null,

"workingMode":null

}

]

}

]

}

}

需要处理成如下格式：

const data = [

{

"stage":"准备阶段",

"project":[

{

"value":"项目1",

"content":[

{

"value":"人员计划",

"startTime":"开始时间",

"endTime":"结束时间"

{

"value": "人员计划",

"startTime": "开始时间",

"endTime":"结束时间"

{

"value": "人员计划",

"startTime": "开始时间",

"endTime":"结束时间"

}

]

}

]

{

"stage":"执行阶段",

"project":[

{

"value":"项目1",

"content":[

{

"value":"人员计划"

{

"value": "人员计划",

"startTime": "开始时间",

"endTime":"结束时间"

}

]

}

]

{

"stage":"总结阶段",

"project":[

{

"value":"项目1",

"content":[

{

"value":"人员计划"

}

]

}

]

}

]

这个数据处理过程很简单，只需要将key值转化一下即可。

2、根据现有数据格式，我考虑过使用现有组件table来展示，后来发现数据中的二级数组无法在组件中展现，会报结构错误。我也没有想出很好的方案。
后来决定用li这种方式来实现。

核心代码如下(个人感觉有点low,但是暂时找不到更好的想法，等我想到，再来更新)：

</ul>

{tableList.map((i, idx) => <ul className="ul-con" style={{ color: '#FFFFFF', height: '100%', width: '100%' }}>

<li style={{ height: `${(i.stage === '准备阶段' ? heightData : i.stage === '执行阶段' ? performData : conclusion)*44}px`, lineHeight: `${(i.stage === '准备阶段' ? heightData : i.stage === '执行阶段' ? performData : conclusion) * 44}px`,}}>{i.stage}</li>

</li>

{i.project.map((j, index) => <li id={`project-${index}`} style={{ height: `${j.stepConfigList.length * 44}px`, lineHeight: `${j.stepConfigList.length * 44}px`, borderBottom: '1px solid #353848'}}>{j.title}</li>)}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{t.content}</li>))}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{moment(t.startTime).format('YYYY-MM-DD HH:mm:ss')}</li>))}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{moment(t.finishTime).format('YYYY-MM-DD HH:mm:ss')}</li>))}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'标志物'}</li>))}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'st3'}</li>))}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'t.st4'}</li>))}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'t.st5'}</li>))}

</li>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'t.st6'}</li>))}

</li>

</ul>)}

<li style={{ flex: 6, borderRight:'1px solid #353848' }}>备注：完成情况或者异常</li>

<li style={{ flex: 1, borderRight:'1px solid #353848'}}>高温扫描仪已完成</li>

</ul>

3、小菜鸟的成长之路，至少以后遇到需求要自己思考方案，如同自己的路痴毛病一样，多试几次总会找到对的方向。

4、ps: 修改, 除了三个阶段是固定的之外，其余数据均不固定。表头的TS数量不固定，但是每个子任务的这个数据是一样的，那就好办了~

修改如下：首先获取一条子任务的ts数据当做表头。

const len = tableList && tableList.length !==0 && tableList[0].project[0].stepConfigList[0].idcList.length; （注: 第一次开发遇到后端不知道如何给前端数据格式的，还要告诉他怎么样给数据，有点心累呀~）

获取之后：

{

tableList && tableList.length !==0 && tableList[0].project[0].stepConfigList[0].idcList.map((i, idx) => <li style={{ borderRight: '1px solid #353848' }}>{`ST${idx + 3}`}</li> )

}

那么对应的数据是这样的

{

Array.from({ length: len }).map((j, num) => <li style={{ borderLeft: '1px solid #353848' }}>

{i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{t.idcList[num]}</li>))}

</li> )

}

最后一行也不固定，
修改如下：

{

Array.from({ length: len }).map((i) => <li style={{ flex: 1, borderLeft: '1px solid #353848'}}>已完成</li>)

}

posted @ 2021-08-13 14:20 Judy倩倩阅读(37) 评论(0) 收藏举报

刷新页面返回顶部

Judy倩倩

工作中遇到的开发问题随记（1）

公告