每日工作问题记录总结(好习惯 打卡12/？)

今日工作小记录和学习日报

今天在公司主要是要做之前的人脸库项目

1. 修改 3.26.18 版本的 antd 的form表单的默认值设置错误，上午尝试了几次发现问题暂时无法解决。
2. 修改人员管理界面新增组织及新增人员功能弹窗及相应表单的样式错误及功能错误，除默认组织及组织定位的问题外，新增人员表单已开发完成等待后台接口ing.
3. 下午修改数据下发页面下的新增特征值下发弹窗及对应表单，修改过程中始终警告无法找到props (因为antd 3.26.18 的 form表单需要单独创建，而其中的自定义组件也需要单独创建，故可能是多层嵌套导致props紊乱所致)，但其在下班时转为正常(明天排查)
4. 今天下午后端提了一个让前端做excel导出的需求，让我去学习一下，询问前端同事，他们用的是exceljs,但在公司电脑的vscode安装失败
5. 今天晚上学习了解了另一种导出excel的插件，js-export-excel
   相关知识点 js-export-excel使用案例

下面是我的仿写案例(具体均有注释)

import ExportJsonExcel from 'js-export-excel'
import React , { Component }  from 'react'
import { Table, Button } from 'antd'

class EXCELtest extends Component {
    constructor(props){
        super(props);
        this.state = {
        // 表格数据
            Data:[
                {
                    name: 'one',
                    age: '19',
                    IDnumber: '3701111550552123'     
                },
                {
                    name: 'two',
                    age: '20',
                    IDnumber: '3701111550csacca'     
                },
                {
                    name: 'three',
                    age: '23',
                    IDnumber: '3701111535343534353'     
                },
                {
                    name: 'four',
                    age: '15',
                    IDnumber: '370acsccacascscccs'     
                },
                {
                    name: 'five',
                    age: '30',
                    IDnumber: '370sacascsaccscacs'     
                },
            ]
        }
    }
    // 表格列数据
    columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age'
        },
        {
            title: 'ID账号',
            dataIndex: 'IDnumber',
            key: 'IDnumber'
        }
    ]
    // 导出excel表格(js-export-excel)
    DownLoadExcel = () => {
        // 检测表格数据是否存在
        const data = this.state.Data ? this.state.Data : '';
        // 创建储存表格信息字段
        var option = {};
        // 创建储存表格数据字段
        let dataTable = [];
        // 当数据不为空时循环数据
        if(data) {
            for(let i in data) {
                if(data) {
                    // 创建表格列数对象
                    let obj = {
                        '姓名': data[i].name,
                        '年龄': data[i].age,
                        '身份ID': data[i].IDnumber
                    }
                    // 将每个列数据对象都存入表格数据存储字段
                    dataTable.push(obj)
                }
            }
        }
        // 定义表格文件名
        option.fileName = '人员信息二'
        option.datas=[
            {
                // 定义表格数据源
                sheetData:dataTable,
                // 定义单个表的表名
                sheetName:'sheet',
                // 定义要显示的数据字段
                sheetFilter:['姓名','年龄','身份ID'],
                // 定义要显示的列名
                sheetHeader:['人员姓名','人员年龄','人员ID'],
            }
        ];
        // console.log('EXCELdata',option)
        // 将数据赋予导出插件方法
        var toExcel = new ExportJsonExcel(option);
        // 使用插件方法导出表格
        toExcel.saveExcel();
    }

    render(){
        return(
            <div className='excelDiv'>
                <div className='excelButton'>
                	// 导出按钮
                    <Button onClick={this.DownLoadExcel}>导出excel表格(js-export-excel)</Button>
                </div>
                // antd表格数据展示
                <Table dataSource={this.state.Data} columns={this.columns} />
            </div>
        )
    }
}

export default EXCELtest

exceljs也有看，但较为复杂，只写了一点点，后面会完成。

ok 今日记录完成 打卡