@bit-sun/business-component 2.4.19 → 2.4.21

package/src/plugin/TableColumnSetting/index.tsx

@@ -1,725 +1,725 @@
-// @ts-nocheck
-import React from 'react';
-import { Table, message, Checkbox, Modal, Input, Button, Tooltip } from 'antd';
-import axios from 'axios';
-// import { request } from 'umi';
-import {
-  SortableContainer,
-  SortableElement,
-  SortableHandle,
-} from 'react-sortable-hoc';
-import { MenuOutlined, SearchOutlined } from '@ant-design/icons';
-import { arrayMoveImmutable } from 'array-move';
-import { setConfigTableColumns, getConfigTableColumns } from '@/utils/LocalstorageUtils';
-import shezhi from '../../assets/icon-shezhi.svg';
-import close from '../../assets/close.svg';
-import drag from '../../assets/drag.svg';
-import fixedLeft from '../../assets/fixed-left.svg';
-import fixedLeftActive from '../../assets/fixed-left-active.svg';
-import fixedRight from '../../assets/fixed-right.svg';
-import fixedRightActive from '../../assets/fixed-right-active.svg';
-import './index.less';
-import { handleRequestUrl, judgeIsRequestSuccess } from '@/utils/requestUtils';
-
-interface TableColumnSettingProps {
-  /** tableCode必填，做用户存储关键key，*/
-  tableCode: string;
-  /** datasource必填，为要操作的表头（即原始表头），*/
-  datasource: any;
-  /** showColumns必填，为当前用户设置的表头，*/
-  showColumns: any;
-  /** setShowColumns必填，设置当前表头的方法，*/
-  setShowColumns: void;
-  /** settingImgAttribute非必填，设置当前设置img样式，*/
-  settingImgAttribute: {
-    [propName: string]: any;
-  };
-  [propName: string]: any;
-}
-const { Search } = Input;
-
-const DragHandle = SortableHandle(() => <img src={drag} />);
-
-const SortableItem = SortableElement((props: any) => <tr {...props} />);
-const SortableBody = SortableContainer((props: any) => <tbody {...props} />);
-
-class TableColumnSetting extends React.Component<TableColumnSettingProps> {
-  state = {
-    dataSource: [],
-    columns: [],
-    selectedRowKeys: [],
-    sortDataSource: [],
-    setVisible: false,
-    searchDataSource: false,
-    onSearchSort: false,
-  };
-
-  patchUserColumnConfig = (config: any) => {
-    const { tableCode, appRequestConfig }: any = this.props;
-    if (!tableCode) return;
-    let configvalue = config.map((item:any) => ({
-      key: item.key,
-      dataIndex: item.dataIndex,
-      width: item.width,
-      hidden: item.hidden,
-      fixed: item.fixed
-    }))
-
-    axios({
-      url: handleRequestUrl('/user','/appConfig/saveUserOrder',appRequestConfig),
-      method:'POST',
-      data: {
-        "code": tableCode,
-        "detail": JSON.stringify(configvalue)
-      },
-    }).then((res:any) => {
-      if (judgeIsRequestSuccess(res?.data)) {
-        setConfigTableColumns(configvalue, tableCode)
-      } else {
-        message.error('保存表头列自定义失败，请稍后尝试');
-      }
-    })
-  }
-
-  setInitValue = (datasource: any[]) => {
-    const { showColumns=[], tableCode } = this.props;
-    // 获取当前列表定义数据
-    let columnConfig = getConfigTableColumns(tableCode);
-    let initialDataSourceData = columnConfig.length ? datasource.map(item => {
-        let inner = columnConfig.filter((innerItem: any) => (
-          innerItem.dataIndex && innerItem.dataIndex === item.dataIndex
-        ) || (innerItem.key && innerItem.key === item.key));
-        let showColumnItem = showColumns.filter((inneritem:any) => ((inneritem.dataIndex && inneritem.dataIndex === item.dataIndex) || (inneritem.key && inneritem.key === item.key)))
-        return {
-          ...item,
-          fixed: inner.length ? inner[0]?.fixed : item?.fixed,
-          key: item.key || item.dataIndex,
-          width: showColumnItem[0]?.width || inner[0]?.width || item.width,
-          hidden: columnConfig.length && !inner.length,
-        }
-      })
-      : [...datasource]
-    this.setState({
-      dataSource: initialDataSourceData.map((item: any) => ({
-        ...item,
-        key: item.key || item.dataIndex,
-      })),
-      sortDataSource: initialDataSourceData.filter((item: any) => !item.hidden)
-        .map((item: any) => ({
-          ...item,
-          key: item.key || item.dataIndex,
-        })),
-    });
-  };
-
-  componentWillReceiveProps(nextProps: any) {
-    if (
-      this.props?.datasource &&
-      JSON.stringify(this.props?.datasource) !=
-      JSON.stringify(nextProps?.datasource)
-    ) {
-      this.setInitValue(nextProps?.datasource || []);
-    }
-  }
-
-  componentDidMount() {
-    const { datasource = [] }: any = this.props;
-    this.setInitValue(datasource);
-  }
-
-  columns = [
-    {
-      title: '列名称',
-      dataIndex: 'title',
-      className: 'drag-visible',
-      width: 100,
-    },
-    {
-      title: '列首',
-      dataIndex: 'fixedLeft',
-      render: (text, record) => {
-        return (
-          <span
-            onClick={() => {
-              const { sortDataSource } = this.state;
-              if (record?.fixed !== 'left') {
-                let newSortData = sortDataSource.map((item) => {
-                  if (item.title === record.title) {
-                    return {
-                      ...item,
-                      fixed: 'left',
-                    };
-                  }
-                  return item;
-                });
-                this.setState({
-                  sortDataSource: [
-                    ...newSortData.filter((item) => item.fixed === 'left'),
-                    ...newSortData.filter((item) => !item.fixed),
-                    ...newSortData.filter((item) => item.fixed === 'right'),
-                  ],
-                  dataSource: [
-                    ...this.state.dataSource.map((item) => {
-                      if (item.title === record.title) {
-                        return {
-                          ...item,
-                          fixed: 'left',
-                        };
-                      }
-                      return item;
-                    }),
-                  ],
-                });
-              } else {
-                let newSortData = sortDataSource.map((item) => {
-                  if (item.title === record.title) {
-                    return {
-                      ...item,
-                      fixed: null,
-                    };
-                  }
-                  return item;
-                });
-                this.setState({
-                  sortDataSource: [
-                    ...newSortData.filter((item) => item.fixed === 'left'),
-                    ...newSortData.filter((item) => !item.fixed),
-                    ...newSortData.filter((item) => item.fixed === 'right'),
-                  ],
-                  dataSource: [
-                    ...this.state.dataSource.map((item) => {
-                      if (item.title === record.title) {
-                        return {
-                          ...item,
-                          fixed: null,
-                        };
-                      }
-                      return item;
-                    }),
-                  ],
-                });
-              }
-            }}
-          >
-            <Tooltip
-              placement="top"
-              title={record?.fixed === 'left' ? '取消固定' : '固定列首'}
-            >
-              <img
-                src={record?.fixed === 'left' ? fixedLeftActive : fixedLeft}
-              />
-            </Tooltip>
-          </span>
-        );
-      },
-    },
-    {
-      title: '列尾',
-      dataIndex: 'fixedRight',
-      render: (text, record) => {
-        return (
-          <span
-            onClick={() => {
-              const { sortDataSource } = this.state;
-              if (record?.fixed !== 'right') {
-                let newSortData = sortDataSource.map((item) => {
-                  if (item.title === record.title) {
-                    return {
-                      ...item,
-                      fixed: 'right',
-                    };
-                  }
-                  return item;
-                });
-                this.setState({
-                  sortDataSource: [
-                    ...newSortData.filter((item) => item.fixed === 'left'),
-                    ...newSortData.filter((item) => !item.fixed),
-                    ...newSortData.filter((item) => item.fixed === 'right'),
-                  ],
-                  dataSource: [
-                    ...this.state.dataSource.map((item) => {
-                      if (item.title === record.title) {
-                        return {
-                          ...item,
-                          fixed: 'right',
-                        };
-                      }
-                      return item;
-                    }),
-                  ],
-                });
-              } else {
-                let newSortData = sortDataSource.map((item) => {
-                  if (item.title === record.title) {
-                    return {
-                      ...item,
-                      fixed: null,
-                    };
-                  }
-                  return item;
-                });
-                this.setState({
-                  sortDataSource: [
-                    ...newSortData.filter((item) => item.fixed === 'left'),
-                    ...newSortData.filter((item) => !item.fixed),
-                    ...newSortData.filter((item) => item.fixed === 'right'),
-                  ],
-                  dataSource: [
-                    ...this.state.dataSource.map((item) => {
-                      if (item.title === record.title) {
-                        return {
-                          ...item,
-                          fixed: null,
-                        };
-                      }
-                      return item;
-                    }),
-                  ],
-                });
-              }
-            }}
-          >
-            <Tooltip
-              placement="top"
-              title={record?.fixed === 'right' ? '取消固定' : '固定列尾'}
-            >
-              <img
-                src={record?.fixed === 'right' ? fixedRightActive : fixedRight}
-              />
-            </Tooltip>
-          </span>
-        );
-      },
-    },
-    {
-      title: '删除',
-      dataIndex: 'title1',
-      render: (text: any, record: any) => {
-        return (
-          <span
-            onClick={() => {
-              this.setState({
-                sortDataSource: this.state.sortDataSource.filter((item:any) => {
-                  return item.title !== record.title;
-                }),
-                dataSource: [
-                  ...this.state.dataSource.map((item:any) => {
-                    if (item.title === record.title) {
-                      return {
-                        ...item,
-                        hidden: true,
-                      };
-                    }
-
-                    return item;
-                  }),
-                ],
-              });
-            }}
-          >
-            <img src={close} />
-          </span>
-        );
-      },
-    },
-    {
-      title: 'Sort',
-      dataIndex: 'sort',
-      className: 'drag-visible',
-      render: () => <DragHandle />,
-    },
-  ];
-
-  showModal = () => {
-    const { datasource = [] }: any = this.props;
-    this.setState({
-      visible: true,
-    });
-    this.setInitValue(datasource);
-  };
-
-  handleOk = (e?: React.MouseEvent<HTMLElement>) => {
-    const { sortDataSource }: any = this.state;
-    const { setShowColumns }: any = this.props;
-    if (!sortDataSource.length) {
-      message.warning('至少选择一列!')
-      return;
-    }
-    this.setState({
-      visible: false,
-    });
-    setShowColumns([...sortDataSource]);
-    this.patchUserColumnConfig(sortDataSource)
-  };
-
-  handleCancel = (e: React.MouseEvent<HTMLElement>) => {
-    this.setState({
-      visible: false,
-    });
-  };
-
-  handleTableHeadHidden = (title: string) => {
-    const { sortDataSource, dataSource } = this.state;
-    this.setState(
-      {
-        sortDataSource: sortDataSource.filter((item: any) => {
-          return item.title !== title;
-        }),
-        dataSource: [
-          ...dataSource.map((item:any) => {
-            if (item.title === title) {
-              return {
-                ...item,
-                hidden: true,
-              };
-            }
-
-            return item;
-          }),
-        ],
-      },
-      () => {
-        this.handleOk();
-      },
-    );
-  };
-
-  onSortEnd = ({ oldIndex, newIndex }: any) => {
-    const { sortDataSource } = this.state;
-    const { value, setValue }: any = this.props;
-    // if (sortDataSource[oldIndex]['fixed']) {
-    //   message.warning('固定列不可移动');
-    //   return;
-    // }
-    if (oldIndex !== newIndex) {
-      const newData = arrayMoveImmutable(
-        [].concat(sortDataSource),
-        oldIndex,
-        newIndex,
-      ).filter((el) => !!el);
-      this.setState({
-        sortDataSource: [
-          ...newData.filter((item) => item.fixed === 'left'),
-          ...newData.filter((item) => !item.fixed),
-          ...newData.filter((item) => item.fixed === 'right'),
-        ],
-      });
-    }
-  };
-
-  DraggableContainer = (props: any) => (
-    <SortableBody
-      useDragHandle
-      disableAutoscroll
-      helperClass="row-dragging"
-      onSortEnd={this.onSortEnd}
-      {...props}
-    />
-  );
-
-  DraggableBodyRow = ({ className, style, ...restProps }: any) => {
-    const { sortDataSource } = this.state;
-    // function findIndex base on Table rowKey props and should always be a right array index
-    const index = sortDataSource.findIndex(
-      (x:any) => x.key === restProps['data-row-key'],
-    );
-    return <SortableItem index={index} {...restProps} />;
-  };
-
-  onChange = (e: any, title: any) => {
-    const { sortDataSource, dataSource } = this.state;
-    if (!e.target.checked) {
-      this.setState({
-        sortDataSource: sortDataSource.filter((item: any) => {
-          return item.title !== title;
-        }),
-        dataSource: [
-          ...dataSource.map((item: any) => {
-            if (item.title === title) {
-              return {
-                ...item,
-                hidden: true,
-              };
-            }
-
-            return item;
-          }),
-        ],
-      });
-    } else {
-      let fixedLeft: any[] = [];
-      let fixedRight: any[] = [];
-      let noFixedSortSource: any = [];
-      sortDataSource.forEach((item: any) => {
-        if (item?.fixed === 'left') {
-          fixedLeft.push(item);
-        } else if (item?.fixed === 'right') {
-          fixedRight.push(item);
-        } else {
-          noFixedSortSource.push(item);
-        }
-      });
-      this.setState({
-        sortDataSource: [
-          ...fixedLeft,
-          ...noFixedSortSource,
-          ...dataSource
-            .filter((item: any) => item.title === title)
-            .map((source: any) => {
-              return {
-                ...source,
-                hidden: false,
-              };
-            }),
-          ...fixedRight,
-        ],
-        dataSource: [
-          ...dataSource.map((item: any) => {
-            if (item.title === title) {
-              return {
-                ...item,
-                hidden: false,
-              };
-            }
-
-            return item;
-          }),
-        ],
-      });
-    }
-  };
-
-  handleReset = () => {
-    const { datasource = [] }: any = this.props;
-    this.setInitValue(datasource);
-  };
-
-  onSearch = (e: any) => {
-    this.setState({
-      searchDataSource: e.target.value,
-    });
-  };
-
-  onSearchSort = (e: any) => {
-    this.setState({
-      onSearchSort: e.target.value,
-    });
-  };
-
-  render() {
-    const {
-      dataSource,
-      searchDataSource,
-      sortDataSource,
-      visible,
-      onSearchSort,
-    }: any = this.state;
-    const { settingImgAttribute={} } = this.props;
-    const settingImgAttributeProps={width: 32,...settingImgAttribute};
-
-    let seatchDataSource = dataSource.filter(
-      (item: any) => item?.title?.indexOf(searchDataSource || '') > -1,
-    );
-
-    return (
-      <div className={'sort_table_wrapper'}>
-        <Modal
-          title="设置表头内容"
-          wrapClassName={'sort_table_wrapper'}
-          width={820}
-          visible={visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={[
-            <Button key="back" onClick={this.handleReset}>
-              恢复默认
-            </Button>,
-            <Button key="submit" onClick={this.handleOk}>
-              取消
-            </Button>,
-            <Button key="submit" type="primary" onClick={this.handleOk}>
-              确认
-            </Button>,
-          ]}
-        >
-          <div className={'sort_table'}>
-            <div className={'sort_table_column_wrapper'}>
-              <span className={'sort_table_column_count'}>
-                可选字段 <span>（共{dataSource.length}个）</span>
-              </span>
-              <div className={'sort_table_column'}>
-                <Input
-                  prefix={<SearchOutlined className="site-form-item-icon" />}
-                  placeholder="搜索"
-                  allowClear
-                  onChange={this.onSearch}
-                  style={{ width: 540 }}
-                />
-                <div>
-                  {!searchDataSource && (
-                    <Checkbox
-                      checked={
-                        !dataSource.some((item: any) => {
-                          if (item.hidden) return true;
-
-                          return false;
-                        })
-                      }
-                      onClick={(e:any) => {
-                        this.setState({
-                          dataSource: [
-                            ...dataSource.map((item: any) => {
-                              return {
-                                ...item,
-                                hidden: !e.target.checked,
-                              };
-                            }),
-                          ],
-                          sortDataSource: e.target.checked
-                            ? [
-                              ...dataSource.map((item: any) => {
-                                return {
-                                  ...item,
-                                  hidden: false,
-                                };
-                              }),
-                            ]
-                            : [],
-                        });
-                      }}
-                    >
-                      全选
-                    </Checkbox>
-                  )}
-                </div>
-                <div className={'sort_table_column_all'}>
-                  {searchDataSource
-                    ? seatchDataSource.map((item: any) => {
-                      return (
-                        <Checkbox
-                          checked={!item.hidden}
-                          onChange={(e) => {
-                            this.onChange(e, item.title);
-                          }}
-                        >
-                          {item.title}
-                        </Checkbox>
-                      );
-                    })
-                    : dataSource
-                      .filter(
-                        (item: any) =>
-                          item?.title?.indexOf('人') === -1 &&
-                          item?.title?.indexOf('日期') === -1,
-                      )
-                      .map((item: any) => {
-                        return (
-                          <Checkbox
-                            checked={!item.hidden}
-                            onChange={(e) => {
-                              this.onChange(e, item.title);
-                            }}
-                          >
-                            {item.title}
-                          </Checkbox>
-                        );
-                      })}
-                  {!!seatchDataSource.length && (
-                    <span style={{ width: '144px' }}></span>
-                  )}
-
-                  {!seatchDataSource.length && (
-                    <div className={'sort_table_column_all_empty'}>
-                      未查询到结果
-                    </div>
-                  )}
-                </div>
-                {!searchDataSource && (
-                  <div>
-                    <div className={'sort_table_column_special'}>
-                      <span>人员时间字段</span>
-                    </div>
-                    <div className={'sort_table_column_all'}>
-                      {[...dataSource]
-                        .filter(
-                          (item) =>
-                            item?.title?.indexOf('人') > -1 ||
-                            item?.title?.indexOf('日期') > -1,
-                        )
-                        .map((item) => {
-                          return (
-                            <Checkbox
-                              checked={!item.hidden}
-                              onChange={(e) => {
-                                this.onChange(e, item.title);
-                              }}
-                            >
-                              {item.title}
-                            </Checkbox>
-                          );
-                        })}
-                      <span style={{ width: '144px' }}></span>
-                    </div>
-                  </div>
-                )}
-
-                {/* <Checkbox.Group
-                options={dataSource.map(item => {
-                  return {
-                    label: item.title,
-                    value: item.title,
-                  }
-                })}
-                defaultValue={selectedRowKeys}
-                onChange={() => {}}
-              /> */}
-              </div>
-            </div>
-            <div className={'sort_table_content_wrapper'}>
-              <span className={'sort_table_content_count'}>
-                已选字段 <span>（共{sortDataSource.length}个）</span>
-              </span>
-              <div className={'sort_table_content'}>
-                <span style={{ paddingLeft: '10px' }}>
-                  <Input
-                    prefix={<SearchOutlined className="site-form-item-icon" />}
-                    placeholder="搜索"
-                    allowClear
-                    onChange={this.onSearchSort}
-                    style={{ width: 190 }}
-                  />
-                </span>
-                <Table
-                  pagination={false}
-                  showHeader={false}
-                  dataSource={
-                    onSearchSort
-                      ? sortDataSource.filter(
-                      (item:any) => item?.title?.indexOf(onSearchSort) > -1,
-                      )
-                      : sortDataSource
-                  }
-                  columns={this.columns}
-                  rowKey="key"
-                  // rowSelection={rowSelection}
-                  components={{
-                    body: {
-                      wrapper: this.DraggableContainer,
-                      row: this.DraggableBodyRow,
-                    },
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        </Modal>
-        <Tooltip title="列设置">
-          <img {...settingImgAttributeProps} onClick={this.showModal} src={shezhi} />
-        </Tooltip>
-      </div>
-    );
-  }
-}
-
-export default TableColumnSetting;
+// @ts-nocheck
+import React from 'react';
+import { Table, message, Checkbox, Modal, Input, Button, Tooltip } from 'antd';
+import axios from 'axios';
+// import { request } from 'umi';
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from 'react-sortable-hoc';
+import { MenuOutlined, SearchOutlined } from '@ant-design/icons';
+import { arrayMoveImmutable } from 'array-move';
+import { setConfigTableColumns, getConfigTableColumns } from '@/utils/LocalstorageUtils';
+import shezhi from '../../assets/icon-shezhi.svg';
+import close from '../../assets/close.svg';
+import drag from '../../assets/drag.svg';
+import fixedLeft from '../../assets/fixed-left.svg';
+import fixedLeftActive from '../../assets/fixed-left-active.svg';
+import fixedRight from '../../assets/fixed-right.svg';
+import fixedRightActive from '../../assets/fixed-right-active.svg';
+import './index.less';
+import { handleRequestUrl, judgeIsRequestSuccess } from '@/utils/requestUtils';
+
+interface TableColumnSettingProps {
+  /** tableCode必填，做用户存储关键key，*/
+  tableCode: string;
+  /** datasource必填，为要操作的表头（即原始表头），*/
+  datasource: any;
+  /** showColumns必填，为当前用户设置的表头，*/
+  showColumns: any;
+  /** setShowColumns必填，设置当前表头的方法，*/
+  setShowColumns: void;
+  /** settingImgAttribute非必填，设置当前设置img样式，*/
+  settingImgAttribute: {
+    [propName: string]: any;
+  };
+  [propName: string]: any;
+}
+const { Search } = Input;
+
+const DragHandle = SortableHandle(() => <img src={drag} />);
+
+const SortableItem = SortableElement((props: any) => <tr {...props} />);
+const SortableBody = SortableContainer((props: any) => <tbody {...props} />);
+
+class TableColumnSetting extends React.Component<TableColumnSettingProps> {
+  state = {
+    dataSource: [],
+    columns: [],
+    selectedRowKeys: [],
+    sortDataSource: [],
+    setVisible: false,
+    searchDataSource: false,
+    onSearchSort: false,
+  };
+
+  patchUserColumnConfig = (config: any) => {
+    const { tableCode, appRequestConfig }: any = this.props;
+    if (!tableCode) return;
+    let configvalue = config.map((item:any) => ({
+      key: item.key,
+      dataIndex: item.dataIndex,
+      width: item.width,
+      hidden: item.hidden,
+      fixed: item.fixed
+    }))
+
+    axios({
+      url: handleRequestUrl('/user','/appConfig/saveUserOrder',appRequestConfig),
+      method:'POST',
+      data: {
+        "code": tableCode,
+        "detail": JSON.stringify(configvalue)
+      },
+    }).then((res:any) => {
+      if (judgeIsRequestSuccess(res?.data)) {
+        setConfigTableColumns(configvalue, tableCode)
+      } else {
+        message.error('保存表头列自定义失败，请稍后尝试');
+      }
+    })
+  }
+
+  setInitValue = (datasource: any[]) => {
+    const { showColumns=[], tableCode } = this.props;
+    // 获取当前列表定义数据
+    let columnConfig = getConfigTableColumns(tableCode);
+    let initialDataSourceData = columnConfig.length ? datasource.map(item => {
+        let inner = columnConfig.filter((innerItem: any) => (
+          innerItem.dataIndex && innerItem.dataIndex === item.dataIndex
+        ) || (innerItem.key && innerItem.key === item.key));
+        let showColumnItem = showColumns.filter((inneritem:any) => ((inneritem.dataIndex && inneritem.dataIndex === item.dataIndex) || (inneritem.key && inneritem.key === item.key)))
+        return {
+          ...item,
+          fixed: inner.length ? inner[0]?.fixed : item?.fixed,
+          key: item.key || item.dataIndex,
+          width: showColumnItem[0]?.width || inner[0]?.width || item.width,
+          hidden: columnConfig.length && !inner.length,
+        }
+      })
+      : [...datasource]
+    this.setState({
+      dataSource: initialDataSourceData.map((item: any) => ({
+        ...item,
+        key: item.key || item.dataIndex,
+      })),
+      sortDataSource: initialDataSourceData.filter((item: any) => !item.hidden)
+        .map((item: any) => ({
+          ...item,
+          key: item.key || item.dataIndex,
+        })),
+    });
+  };
+
+  componentWillReceiveProps(nextProps: any) {
+    if (
+      this.props?.datasource &&
+      JSON.stringify(this.props?.datasource) !=
+      JSON.stringify(nextProps?.datasource)
+    ) {
+      this.setInitValue(nextProps?.datasource || []);
+    }
+  }
+
+  componentDidMount() {
+    const { datasource = [] }: any = this.props;
+    this.setInitValue(datasource);
+  }
+
+  columns = [
+    {
+      title: '列名称',
+      dataIndex: 'title',
+      className: 'drag-visible',
+      width: 100,
+    },
+    {
+      title: '列首',
+      dataIndex: 'fixedLeft',
+      render: (text, record) => {
+        return (
+          <span
+            onClick={() => {
+              const { sortDataSource } = this.state;
+              if (record?.fixed !== 'left') {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: 'left',
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: 'left',
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              } else {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: null,
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: null,
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              }
+            }}
+          >
+            <Tooltip
+              placement="top"
+              title={record?.fixed === 'left' ? '取消固定' : '固定列首'}
+            >
+              <img
+                src={record?.fixed === 'left' ? fixedLeftActive : fixedLeft}
+              />
+            </Tooltip>
+          </span>
+        );
+      },
+    },
+    {
+      title: '列尾',
+      dataIndex: 'fixedRight',
+      render: (text, record) => {
+        return (
+          <span
+            onClick={() => {
+              const { sortDataSource } = this.state;
+              if (record?.fixed !== 'right') {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: 'right',
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: 'right',
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              } else {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: null,
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: null,
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              }
+            }}
+          >
+            <Tooltip
+              placement="top"
+              title={record?.fixed === 'right' ? '取消固定' : '固定列尾'}
+            >
+              <img
+                src={record?.fixed === 'right' ? fixedRightActive : fixedRight}
+              />
+            </Tooltip>
+          </span>
+        );
+      },
+    },
+    {
+      title: '删除',
+      dataIndex: 'title1',
+      render: (text: any, record: any) => {
+        return (
+          <span
+            onClick={() => {
+              this.setState({
+                sortDataSource: this.state.sortDataSource.filter((item:any) => {
+                  return item.title !== record.title;
+                }),
+                dataSource: [
+                  ...this.state.dataSource.map((item:any) => {
+                    if (item.title === record.title) {
+                      return {
+                        ...item,
+                        hidden: true,
+                      };
+                    }
+
+                    return item;
+                  }),
+                ],
+              });
+            }}
+          >
+            <img src={close} />
+          </span>
+        );
+      },
+    },
+    {
+      title: 'Sort',
+      dataIndex: 'sort',
+      className: 'drag-visible',
+      render: () => <DragHandle />,
+    },
+  ];
+
+  showModal = () => {
+    const { datasource = [] }: any = this.props;
+    this.setState({
+      visible: true,
+    });
+    this.setInitValue(datasource);
+  };
+
+  handleOk = (e?: React.MouseEvent<HTMLElement>) => {
+    const { sortDataSource }: any = this.state;
+    const { setShowColumns }: any = this.props;
+    if (!sortDataSource.length) {
+      message.warning('至少选择一列!')
+      return;
+    }
+    this.setState({
+      visible: false,
+    });
+    setShowColumns([...sortDataSource]);
+    this.patchUserColumnConfig(sortDataSource)
+  };
+
+  handleCancel = (e: React.MouseEvent<HTMLElement>) => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleTableHeadHidden = (title: string) => {
+    const { sortDataSource, dataSource } = this.state;
+    this.setState(
+      {
+        sortDataSource: sortDataSource.filter((item: any) => {
+          return item.title !== title;
+        }),
+        dataSource: [
+          ...dataSource.map((item:any) => {
+            if (item.title === title) {
+              return {
+                ...item,
+                hidden: true,
+              };
+            }
+
+            return item;
+          }),
+        ],
+      },
+      () => {
+        this.handleOk();
+      },
+    );
+  };
+
+  onSortEnd = ({ oldIndex, newIndex }: any) => {
+    const { sortDataSource } = this.state;
+    const { value, setValue }: any = this.props;
+    // if (sortDataSource[oldIndex]['fixed']) {
+    //   message.warning('固定列不可移动');
+    //   return;
+    // }
+    if (oldIndex !== newIndex) {
+      const newData = arrayMoveImmutable(
+        [].concat(sortDataSource),
+        oldIndex,
+        newIndex,
+      ).filter((el) => !!el);
+      this.setState({
+        sortDataSource: [
+          ...newData.filter((item) => item.fixed === 'left'),
+          ...newData.filter((item) => !item.fixed),
+          ...newData.filter((item) => item.fixed === 'right'),
+        ],
+      });
+    }
+  };
+
+  DraggableContainer = (props: any) => (
+    <SortableBody
+      useDragHandle
+      disableAutoscroll
+      helperClass="row-dragging"
+      onSortEnd={this.onSortEnd}
+      {...props}
+    />
+  );
+
+  DraggableBodyRow = ({ className, style, ...restProps }: any) => {
+    const { sortDataSource } = this.state;
+    // function findIndex base on Table rowKey props and should always be a right array index
+    const index = sortDataSource.findIndex(
+      (x:any) => x.key === restProps['data-row-key'],
+    );
+    return <SortableItem index={index} {...restProps} />;
+  };
+
+  onChange = (e: any, title: any) => {
+    const { sortDataSource, dataSource } = this.state;
+    if (!e.target.checked) {
+      this.setState({
+        sortDataSource: sortDataSource.filter((item: any) => {
+          return item.title !== title;
+        }),
+        dataSource: [
+          ...dataSource.map((item: any) => {
+            if (item.title === title) {
+              return {
+                ...item,
+                hidden: true,
+              };
+            }
+
+            return item;
+          }),
+        ],
+      });
+    } else {
+      let fixedLeft: any[] = [];
+      let fixedRight: any[] = [];
+      let noFixedSortSource: any = [];
+      sortDataSource.forEach((item: any) => {
+        if (item?.fixed === 'left') {
+          fixedLeft.push(item);
+        } else if (item?.fixed === 'right') {
+          fixedRight.push(item);
+        } else {
+          noFixedSortSource.push(item);
+        }
+      });
+      this.setState({
+        sortDataSource: [
+          ...fixedLeft,
+          ...noFixedSortSource,
+          ...dataSource
+            .filter((item: any) => item.title === title)
+            .map((source: any) => {
+              return {
+                ...source,
+                hidden: false,
+              };
+            }),
+          ...fixedRight,
+        ],
+        dataSource: [
+          ...dataSource.map((item: any) => {
+            if (item.title === title) {
+              return {
+                ...item,
+                hidden: false,
+              };
+            }
+
+            return item;
+          }),
+        ],
+      });
+    }
+  };
+
+  handleReset = () => {
+    const { datasource = [] }: any = this.props;
+    this.setInitValue(datasource);
+  };
+
+  onSearch = (e: any) => {
+    this.setState({
+      searchDataSource: e.target.value,
+    });
+  };
+
+  onSearchSort = (e: any) => {
+    this.setState({
+      onSearchSort: e.target.value,
+    });
+  };
+
+  render() {
+    const {
+      dataSource,
+      searchDataSource,
+      sortDataSource,
+      visible,
+      onSearchSort,
+    }: any = this.state;
+    const { settingImgAttribute={} } = this.props;
+    const settingImgAttributeProps={width: 32,...settingImgAttribute};
+
+    let seatchDataSource = dataSource.filter(
+      (item: any) => item?.title?.indexOf(searchDataSource || '') > -1,
+    );
+
+    return (
+      <div className={'sort_table_wrapper'}>
+        <Modal
+          title="设置表头内容"
+          wrapClassName={'sort_table_wrapper'}
+          width={820}
+          visible={visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          footer={[
+            <Button key="back" onClick={this.handleReset}>
+              恢复默认
+            </Button>,
+            <Button key="submit" onClick={this.handleOk}>
+              取消
+            </Button>,
+            <Button key="submit" type="primary" onClick={this.handleOk}>
+              确认
+            </Button>,
+          ]}
+        >
+          <div className={'sort_table'}>
+            <div className={'sort_table_column_wrapper'}>
+              <span className={'sort_table_column_count'}>
+                可选字段 <span>（共{dataSource.length}个）</span>
+              </span>
+              <div className={'sort_table_column'}>
+                <Input
+                  prefix={<SearchOutlined className="site-form-item-icon" />}
+                  placeholder="搜索"
+                  allowClear
+                  onChange={this.onSearch}
+                  style={{ width: 540 }}
+                />
+                <div>
+                  {!searchDataSource && (
+                    <Checkbox
+                      checked={
+                        !dataSource.some((item: any) => {
+                          if (item.hidden) return true;
+
+                          return false;
+                        })
+                      }
+                      onClick={(e:any) => {
+                        this.setState({
+                          dataSource: [
+                            ...dataSource.map((item: any) => {
+                              return {
+                                ...item,
+                                hidden: !e.target.checked,
+                              };
+                            }),
+                          ],
+                          sortDataSource: e.target.checked
+                            ? [
+                              ...dataSource.map((item: any) => {
+                                return {
+                                  ...item,
+                                  hidden: false,
+                                };
+                              }),
+                            ]
+                            : [],
+                        });
+                      }}
+                    >
+                      全选
+                    </Checkbox>
+                  )}
+                </div>
+                <div className={'sort_table_column_all'}>
+                  {searchDataSource
+                    ? seatchDataSource.map((item: any) => {
+                      return (
+                        <Checkbox
+                          checked={!item.hidden}
+                          onChange={(e) => {
+                            this.onChange(e, item.title);
+                          }}
+                        >
+                          {item.title}
+                        </Checkbox>
+                      );
+                    })
+                    : dataSource
+                      .filter(
+                        (item: any) =>
+                          item?.title?.indexOf('人') === -1 &&
+                          item?.title?.indexOf('日期') === -1,
+                      )
+                      .map((item: any) => {
+                        return (
+                          <Checkbox
+                            checked={!item.hidden}
+                            onChange={(e) => {
+                              this.onChange(e, item.title);
+                            }}
+                          >
+                            {item.title}
+                          </Checkbox>
+                        );
+                      })}
+                  {!!seatchDataSource.length && (
+                    <span style={{ width: '144px' }}></span>
+                  )}
+
+                  {!seatchDataSource.length && (
+                    <div className={'sort_table_column_all_empty'}>
+                      未查询到结果
+                    </div>
+                  )}
+                </div>
+                {!searchDataSource && (
+                  <div>
+                    <div className={'sort_table_column_special'}>
+                      <span>人员时间字段</span>
+                    </div>
+                    <div className={'sort_table_column_all'}>
+                      {[...dataSource]
+                        .filter(
+                          (item) =>
+                            item?.title?.indexOf('人') > -1 ||
+                            item?.title?.indexOf('日期') > -1,
+                        )
+                        .map((item) => {
+                          return (
+                            <Checkbox
+                              checked={!item.hidden}
+                              onChange={(e) => {
+                                this.onChange(e, item.title);
+                              }}
+                            >
+                              {item.title}
+                            </Checkbox>
+                          );
+                        })}
+                      <span style={{ width: '144px' }}></span>
+                    </div>
+                  </div>
+                )}
+
+                {/* <Checkbox.Group
+                options={dataSource.map(item => {
+                  return {
+                    label: item.title,
+                    value: item.title,
+                  }
+                })}
+                defaultValue={selectedRowKeys}
+                onChange={() => {}}
+              /> */}
+              </div>
+            </div>
+            <div className={'sort_table_content_wrapper'}>
+              <span className={'sort_table_content_count'}>
+                已选字段 <span>（共{sortDataSource.length}个）</span>
+              </span>
+              <div className={'sort_table_content'}>
+                <span style={{ paddingLeft: '10px' }}>
+                  <Input
+                    prefix={<SearchOutlined className="site-form-item-icon" />}
+                    placeholder="搜索"
+                    allowClear
+                    onChange={this.onSearchSort}
+                    style={{ width: 190 }}
+                  />
+                </span>
+                <Table
+                  pagination={false}
+                  showHeader={false}
+                  dataSource={
+                    onSearchSort
+                      ? sortDataSource.filter(
+                      (item:any) => item?.title?.indexOf(onSearchSort) > -1,
+                      )
+                      : sortDataSource
+                  }
+                  columns={this.columns}
+                  rowKey="key"
+                  // rowSelection={rowSelection}
+                  components={{
+                    body: {
+                      wrapper: this.DraggableContainer,
+                      row: this.DraggableBodyRow,
+                    },
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </Modal>
+        <Tooltip title="列设置">
+          <img {...settingImgAttributeProps} onClick={this.showModal} src={shezhi} />
+        </Tooltip>
+      </div>
+    );
+  }
+}
+
+export default TableColumnSetting;