动态表格

## 启动: npm run dev
## 本地打包: npm run build
## 发布到私服: npm run pub

## 在宿主项目中，引用该npm包的项目，本地联调时：
## 1.在验证项目的目录下 执行   cd node_modules/react && npm link
## 2.在模块包项目目录下执行    npm link react

## 以上两步为：npm包中的react依赖于，宿主项目nodeModules中的react，本地引用就不会报错引入不同react版本的问题了
## 3.npm包项目本地 npm run build，打包之后生成了dist文件夹,这时可以在宿主 npm link ysxs-dynamic-table,
## 4.npm包本地启动: npm run dev，启动之后 本地编译的文件是在demo文件夹中验证的,比如给npm传参都可以在demo/demo.js中 操作
## 5.在src/components中新建组件的文件夹,在src/index.js中导出, 宿主项目安装引用时就可以引入对应的组件,比如: 
## import YsxsDynamicTable from'ysxs-dynamic-table'
## 6.如果需要做成组件库，产出多个组件,需要在src/index.js中导出对应的多个组件

## 解除关联引用可以使用 npm unlink ysxs-dynamic-table
## 解除全局link npm unlink


## 引用时需传入指定参数如下：

## 动态节点: searchOptions=> 默认搜索节点, operationButtons=> 表格外上方的按钮, tableColumns=> 表格中默认展示列的节点
## 关于operator的:
    EQ 等于
    LT 小于
    GT 大于
    LTE 小于等于
    GTE 大于等于
    IN 存在于
    LIKE 全模糊
    LEFT_LIKE 左模糊
    RIGHT_LIKE 右模糊
## 关于 组件类型componentType:   
    INPUT: 'INPUT',
    SELECT_SINGLE: 'SELECT_SINGLE',
    SELECT_MULTI: 'SELECT_MULTI',
    DATEPICKER: 'DATEPICKER',
    DATE_PICKER_TIME: 'DATE_PICKER_TIME',
    DATE_PICKER_RANGE: 'DATE_PICKER_RANGE',
    DATE_PICKER_TIME_RANGE: 'DATE_PICKER_TIME_RANGE',
    TEXTAREA: 'TEXTAREA',
    INPUT_NUMBER: 'INPUT_NUMBER',
    INPUT_NUMBER_RANGE: 'INPUT_NUMBER_RANGE' 
    
const dynamicNodes = {
    searchOptions: [
        {
            operator: "IN",
            key: 'name',
            fieldKey: 'name',
            fieldName: '姓名',
            searchType: 'LABEL',          
            componentType: 'SELECT_MULTI',
            boxValue: [
                { value: 'zhangsan', label: '张三' },
                { value: 'lisi', label: '李四' },
            ],
            render: () => {
                return (
                    <Select
                        showSearch
                        allowClear
                        mode="multiple"
                        placeholder="请选择姓名"
                        style={{ width: '80%' }}
                        onChange={(e) => handleChangeSearch(e, 'name')}
                    >
                        {
                            [
                                { value: 'zhangsan', label: '张三' },
                                { value: 'lisi', label: '李四' },
                            ].map(item => {
                                return (
                                    <Option key={item.value} value={item.value}>{item.label}</Option>
                                )
                            })
                        }
                    </Select>  
                )
            }
        },
        {
            operator: "EQ",
            key: 'mobile',
            fieldKey: 'mobile',
            fieldName: '联系方式',  
            searchType: 'ATTR',      
            componentType: 'SELECT_SINGLE',
            boxValue: [
                { value: '14698707567', label: '14698707567' },
                { value: '18898980909', label: '18898980909' },
            ],
        },
        {
            operator: "EQ",
            key: 'id_card',
            fieldKey: 'id_card',
            fieldName: '身份证号',
            componentType: 'INPUT'
        }
    ],
    operationButtons: [
        {
            btn: (
                <Button type="primary" onClick={handleClick}>
                    新建
                </Button>
            ),
            key: "add",
        },
        {
            btn: (
                <Space>
                    <Dropdown
                        overlay={workMenu}
                        disabled={selectedRowKeys.length === 0}
                        key={1}
                    >
                        <Button>
                            更多操作 <DownOutlined/>
                        </Button>
                    </Dropdown>
                </Space>
            ),
            key: "moreOperation",
        },
    ],
    tableColumns: [
        {
            isLeft: true,
            title: "姓名",
            dataIndex: "name",
            render: (text, record) => {
                return <a onClick={() => handleClickTd(record, 'name')}>{text}</a>;
            },
        },
        {
            isLeft: true,
            title: "id",
            dataIndex: "id",
            render: (text, record) => {
                return <a onClick={() => handleClickTd(record, 'id')}>{text}</a>;
            },
        },
        {
            isLeft: true,
            title: "联系方式",
            dataIndex: "mobile",
            render: (text, record) => {
                return <>
                    <a onClick={() => handleClickTd(record, 'mobile')}>{text}</a>
                    {
                        text &&
                        <MessageOutlined style={{ marginLeft: 5 }} />
                    }
                </>;
            },
        },
        {
            isLeft: true,
            title: "年龄",
            dataIndex: "age",
            render: (text, record) => {
                return <a onClick={() => handleClickTd(record, 'age')}>{text}</a>;
            },
        },
        {
            isLeft: false,
            position: 'right',
            title: "操作",
            dataIndex: "option",
            width: 150,
            fixed: "right",
            onCell: () => {
                return {
                    onClick: (event) => {
                        if (event.stopPropagation) {
                            event.stopPropagation();
                        } else {
                            event.cancelBubble = true;
                        }
                    },
                };
            },
            render: (text, record) => {
                return <a onClick={() => handleEdit(record)}>编辑</a>;
            },
        },
    ],
};

## 默认搜索节点的key, 与searchOptions中的key保持一致
const defaultSearchOption = ["name", "mobile", "id_card"];

## 默认列的key,正常情况下 与 tableColumns中的非操作的节点的key保持一直，导出时以这个数组中的key为准
const defaultColumnOption = ['name', 'id', 'mobile', 'age'];

## 修改动态展示列时，禁止修改哪些列
const defaultDisabledColumns = ['姓名', '身份证号', '联系方式', '创建人', '创建时间', '标签', '职业', 'id'];

## 请求需要的参数
const apiParams = {
    displayKey: 'wenhua_displayKey_test',
    modelKey: 'tb_resident',
    tenantId: 'GOV',
    queryKey: 'wenhua_queryKey_test'
}

## 接口地址
const apiUrl = {
    // 查询已设置的展示字段 
    DISPLAY_QUERY: '/dataStore/dynamicTable/api/display/query',
    // 查询全部可展示字段 
    DISPLAY_QUERY_ALL: '/dataStore/dynamicTable/api/display/queryAll',
    // 修改自定义展示属性  
    DISPLAY_SAVE: '/dataStore/dynamicTable/api/display/save',
    // 查询 table数据 => 必传
    QUERY_DATA: '/dataStore/dynamicTable/api/data/query',
    // 查询已设置的搜索字段
    QUERY_QUERY: '/dataStore/dynamicTable/api/query/query',
    // 查询全部可搜索字段 
    QUERY_QUERY_ALL: '/dataStore/dynamicTable/api/query/queryAll',
    // 修改自定义搜索属性 
    QUERY_SAVE: '/dataStore/dynamicTable/api/query/save',
    // 导出 => 必传
    DATA_EXPORT: '/dataStore/dynamicTable/api/data/export',
}

## 表格内选中，全选 or 单选
const handleGetSelectedRowKeys = (selectedRowKeys, dataItem) => {
        console.log(selectedRowKeys, dataItem);
        setSelectedRowKeys(selectedRowKeys);
    };
## 表格外的全选 checkAll
const handleGetCheckAll = (checkAll, dataSource) => {
    console.log(checkAll, dataSource);
    setCheckAll(checkAll);
};

## 获取已有查询条件，全部查询条件
const handleChangeSearchOptions = (data) => {
    console.log(data)
}
## 获取查询过table列表数据的查询条件的值
const handleChangeSearchOptionsValues = (data) => {
    console.log(data)
}

## dynamicNodes 中的render方法 如果是动态的可修改的，那么dynamicNodes 也需要是动态可修改, 便于子组件检测到外部组件传入的参数有变动
/**
 * dynamicNodes 中的render方法 如果是动态的可修改的，那么dynamicNodes 也需要是动态可修改, 便于子组件检测到外部组件传入的参数有变动
 */
// render方法的列表渲染的列表数据 如有改变，需要修改dynamicNodes
const [dynamicNodesResult, setDynamicNodes] = useState({...dynamicNodes})
useEffect(() => {
    const { searchOptions } = dynamicNodesResult;
    const searchOptionsCopy = JSON.parse(JSON.stringify(searchOptions));
    searchOptionsCopy[0] = {
        operator: "LIKE",
        key: 'name',
        fieldKey: 'name',
        fieldName: '姓名',
        searchType: 'LABEL',          
        componentType: 'INPUT',
        boxValue: [
            { value: 'zhangsan', label: '张三' },
            { value: 'lisi', label: '李四' },
        ],
        render: () => {
            return (
                <Select
                    showSearch
                    allowClear
                    mode="multiple"
                    placeholder="请选择姓名"
                    style={{ width: '80%' }}
                    onChange={(e) => handleChangeSearch(e, 'name')}
                >
                    {
                        nameList.map(item => {
                            return (
                                <Option key={item.value} value={item.value}>{item.label}</Option>
                            )
                        })
                    }
                </Select>  
            )
        }
    }
    setDynamicNodes({
        ...dynamicNodesResult,
        searchOptions: [...searchOptionsCopy],
        nameListLen: nameList.length
    })
}, [nameList])