XJQ124 / Some-notes

本仓库记录一些电脑方面的小技巧,包含各个方面
0 stars 0 forks source link

记录近来的工作日志的一些问题及总结 #66

Open XJQ124 opened 5 months ago

XJQ124 commented 5 months ago

任务:实现365的空间界面,且从后端拿到数据填充到表格中

进度:已完成

效果如图: image

客户敏感信息已打码

昨天跟老师revier代码以后,提出一些代码上的问题,这些是实践的经验,我接触的不多

我这边总结一下: 1、做排序时我使用了错误的一个写法

    {
        title: '序号',
        width: 80,
        dataIndex: 'number',
        key: 'number',
        fixed: 'left',
        align: 'center',
        render: (text, record, index) => (
            <span>{index + 1}</span>
        )
    },

这种写法虽然也可以显示出来排序,但是会对第二页的部分造成副作用,比如第二页数据不会跟着继续加,而是又从0开始

2、在代码去重部分写的比较复杂,可以简化

//从 getRoomsByCompanyId 中的 deviceType 中拿到 code 
                const codes = docs.map(device => device.deviceType.code);
                const devicetypestempmap = {};

                const devicetypestemp = devicetypes.filter(deviceType => codes.includes(deviceType.code)).map(deviceType => deviceType.endpoints).flat(Infinity).map(endpoint => {
                    //这里其实就是把 code 和 name 放到了 devicetypestempmap里了
                    devicetypestempmap[endpoint.code] = endpoint.name 
                    return endpoint.code
                });
                //lodash,取交集
                const devicetypestempset = [...new Set(devicetypestemp)];
                const DynamicColumn = devicetypestempset.map((code) => {
                    return {
                        title: devicetypestempmap[code],
                        key: code,
                        dataIndex: code,
                        align: 'center',
                        width: 170,
                        sorter: (a, b) => a.code - b.code,
                        render: (text, record) => {
                            return record.states[code] ? <img src={yes} alt='flase Icon' style={{ height: 16, width: 16 }} /> : null;
                            //4种 int string 布尔 ints strings 
                            //灰标、标签、进度条、
                        }
                    }
                })

这部分我写的比较复杂,建议使用lodash的取并集方法intersection

3、搜索部分、选择框、还有分页的组件过滤数据时不是从界面上拿,而是再次从接口当中调

4、跟我明确了一些其他类型的数据,如何显示,让我把int string ints strings这四个类型的数据再处理一下显示出来