@bit-sun/business-component 2.0.30 → 2.0.32

package/src/components/Business/BsSulaQueryTable/setting.tsx

@@ -0,0 +1,817 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Table,
+  message,
+  Checkbox,
+  Modal,
+  Input,
+  Button,
+  Tooltip,
+} from 'antd';
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from 'react-sortable-hoc';
+import axios from 'axios';
+import { SearchOutlined } from '@ant-design/icons';
+import { arrayMoveImmutable } from 'array-move';
+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';
+
+const DragHandle = SortableHandle(() => <img src={drag} />);
+
+const SortableItem = SortableElement((props) => <tr {...props} />);
+const SortableBody = SortableContainer((props) => <tbody {...props} />);
+
+class SortableTable extends React.Component {
+  state = {
+    dataSource: [],
+    columns: [],
+    selectedRowKeys: [],
+    sortDataSource: [],
+    setVisible: false,
+    searchDataSource: false,
+    onSearchSort: false,
+    isDefaultValue: false,
+    defaultValue: [],
+  };
+
+  patchUserColumnConfig = (config) => {
+    let configvalue = config
+      ? config.map((item) => ({
+          key: item.key,
+          dataIndex: item.dataIndex,
+          width: item.width,
+          hidden: item.hidden,
+          fixed: item.fixed,
+        }))
+      : '';
+    axios({
+      url: '/user/appConfig/saveUserOrder',
+      method: 'POST',
+      data: {
+        code: window.location.hash,
+        detail: configvalue ? JSON.stringify(configvalue) : '',
+      },
+    }).then((res:any) => {
+      if (res?.data?.status === '0') {
+        this.patchConfigToLocalstorage(configvalue)
+      } else {
+        message.error('保存表头列自定义失败，请稍后尝试');
+      }
+    })
+  };
+
+  getConfigFromlocalstorage = () => {
+    let config = localStorage.getItem('columnCondition') || '[]';
+    let configArray = JSON.parse(config);
+    let configSetting = configArray.filter(
+      (item) => item.code === window.location.hash,
+    );
+
+    if (configSetting.length) {
+      return JSON.parse(configSetting[0].detail || '[]');
+    }
+    return [];
+  };
+
+  patchConfigToLocalstorage = (configvalue) => {
+    const { setValue, value } = this.props;
+    const { sortDataSource } = this.state;
+    let config = localStorage.getItem('columnCondition') || '[]'
+    let configArray = JSON.parse(config)
+    let currentSetting = configArray.filter(item => item.code === window.location.hash)
+    if (currentSetting.length) {
+      currentSetting[0].detail = JSON.stringify(configvalue)
+    } else {
+      configArray.push({
+        "code": window.location.hash,
+        "detail": JSON.stringify(configvalue)
+      })
+    }
+     
+    localStorage.setItem('columnCondition', JSON.stringify(configArray));
+    this.setState({
+      visible: false,
+    });
+    setValue({
+      ...value,
+      columns: [...sortDataSource],
+    });
+  };
+
+  setInitValue = (isClick = false) => {
+    const { datasource, checkedList, sortDataSource, showColumn }: any =
+      this.props;
+    const { defaultValue } = this.state;
+
+    let newColumns = datasource
+      .filter((item) => !item.hidden)
+      .map((item) => {
+        let showColumnItem = showColumn.filter(
+          (inneritem) =>
+            (inneritem.dataIndex && inneritem.dataIndex === item.dataIndex) ||
+            (inneritem.key && inneritem.key === item.key),
+        );
+        return {
+          ...item,
+          key: item.key || item.dataIndex,
+          width: showColumnItem.length ? showColumnItem[0].width : item.width,
+        };
+      });
+
+    if (isClick) {
+      this.setState({
+        dataSource: defaultValue,
+      });
+    }
+
+    this.setState({
+      sortDataSource: newColumns,
+      selectedRowKeys: [...checkedList],
+      isDefaultValue: true,
+    });
+  };
+
+  componentDidMount() {
+    const { datasource, checkedList, sortDataSource, showColumn }: any =
+      this.props;
+    let config = this.getConfigFromlocalstorage();
+
+    this.setState({
+      dataSource: datasource.map((item) => {
+        let innerItem = config.filter(
+          (inneritem) =>
+            (inneritem.dataIndex && inneritem.dataIndex === item.dataIndex) ||
+            (inneritem.key && inneritem.key === item.key),
+        );
+        return {
+          ...item,
+          key: item.key || item.dataIndex,
+          width: innerItem[0]?.width || item.width,
+          hidden: config.length && !innerItem.length,
+        };
+      }),
+      defaultValue: datasource.map((item) => {
+        let innerItem = config.filter(
+          (inneritem) =>
+            (inneritem.dataIndex && inneritem.dataIndex === item.dataIndex) ||
+            (inneritem.key && inneritem.key === item.key),
+        );
+        return {
+          ...item,
+          key: item.key || item.dataIndex,
+          width: innerItem[0]?.width || item.width,
+          hidden: config.length && !innerItem.length,
+        };
+      }),
+      sortDataSource: datasource
+        .filter((item) => !item.hidden)
+        .map((item) => ({
+          ...item,
+          key: item.key || item.dataIndex,
+          width:
+            showColumn.filter(
+              (inneritem) =>
+                (inneritem.dataIndex &&
+                  inneritem.dataIndex === item.dataIndex) ||
+                (inneritem.key && inneritem.key === item.key),
+            )[0]?.width || item.width,
+        })),
+      selectedRowKeys: [...checkedList],
+    });
+  }
+
+  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'),
+                  ],
+                  isDefaultValue: false,
+                  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'),
+                  ],
+                  isDefaultValue: false,
+                  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'),
+                  ],
+                  isDefaultValue: false,
+                  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'),
+                  ],
+                  isDefaultValue: false,
+                  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, record) => {
+        return (
+          <span
+            onClick={() => {
+              this.setState({
+                sortDataSource: this.state.sortDataSource.filter((item) => {
+                  return item.title !== record.title;
+                }),
+                isDefaultValue: false,
+                dataSource: [
+                  ...this.state.dataSource.map((item) => {
+                    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 = () => {
+    this.setState({
+      visible: true,
+    });
+    this.setInitValue();
+  };
+
+  handleOk = (e?: React.MouseEvent<HTMLElement>) => {
+    const { sortDataSource, isDefaultValue, defaultValue } = this.state;
+    const { setValue, value } = this.props;
+    if (!sortDataSource.length) {
+      message.warning('至少选择一列!');
+      return;
+    }
+    // this.setState({
+    //   visible: false,
+    // });
+    console.log(sortDataSource);
+    if (isDefaultValue) {
+      this.patchUserColumnConfig('');
+      return;
+    }
+    // setValue({
+    //   ...value,
+    //   columns: [...sortDataSource],
+    // });
+    this.patchUserColumnConfig(sortDataSource);
+  };
+
+  handleCancel = (e: React.MouseEvent<HTMLElement>) => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleTableHeadHidden = (title: string) => {
+    const { sortDataSource, dataSource } = this.state;
+    this.setState(
+      {
+        sortDataSource: sortDataSource.filter((item) => {
+          return item.title !== title;
+        }),
+        dataSource: [
+          ...dataSource.map((item) => {
+            if (item.title === title) {
+              return {
+                ...item,
+                hidden: true,
+              };
+            }
+
+            return item;
+          }),
+        ],
+      },
+      () => {
+        this.handleOk();
+      },
+    );
+  };
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const { sortDataSource } = this.state;
+    const { value, setValue } = 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'),
+        ],
+        isDefaultValue: false,
+      });
+    }
+  };
+
+  DraggableContainer = (props) => (
+    <SortableBody
+      useDragHandle
+      disableAutoscroll
+      helperClass="row-dragging"
+      onSortEnd={this.onSortEnd}
+      {...props}
+    />
+  );
+
+  DraggableBodyRow = ({ className, style, ...restProps }) => {
+    const { sortDataSource } = this.state;
+    // function findIndex base on Table rowKey props and should always be a right array index
+    const index = sortDataSource.findIndex(
+      (x) => x.key === restProps['data-row-key'],
+    );
+    return <SortableItem index={index} {...restProps} />;
+  };
+
+  onChange = (e: CheckboxChangeEvent, title) => {
+    const { sortDataSource, dataSource } = this.state;
+    if (!e.target.checked) {
+      this.setState({
+        sortDataSource: sortDataSource.filter((item) => {
+          return item.title !== title;
+        }),
+        isDefaultValue: false,
+        dataSource: [
+          ...dataSource.map((item) => {
+            if (item.title === title) {
+              return {
+                ...item,
+                hidden: true,
+              };
+            }
+
+            return item;
+          }),
+        ],
+      });
+    } else {
+      let fixedLeft: any[] = [];
+      let fixedRight: any[] = [];
+      let noFixedSortSource: any = [];
+      let newSortData = [
+        ...sortDataSource,
+        ...dataSource
+          .filter((item) => item.title === title)
+          .map((source) => {
+            return {
+              ...source,
+              hidden: false,
+            };
+          }),
+      ];
+      newSortData.forEach((item) => {
+        if (item?.fixed === 'left') {
+          fixedLeft.push(item);
+        } else if (item?.fixed === 'right') {
+          fixedRight.push(item);
+        } else {
+          noFixedSortSource.push(item);
+        }
+      });
+      this.setState({
+        sortDataSource: [...fixedLeft, ...noFixedSortSource, ...fixedRight],
+        isDefaultValue: false,
+        dataSource: [
+          ...dataSource.map((item) => {
+            if (item.title === title) {
+              return {
+                ...item,
+                hidden: false,
+              };
+            }
+
+            return item;
+          }),
+        ],
+      });
+    }
+  };
+
+  handleReset = () => {
+    this.setInitValue(true);
+  };
+
+  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,
+    } = this.state;
+
+    let seatchDataSource = dataSource.filter(
+      (item) => item?.title?.indexOf(searchDataSource || '') > -1,
+    );
+
+    console.log(dataSource);
+
+    return (
+      <div className={'sort_table_wrapper'}>
+        {visible && (
+          <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.handleCancel}>
+                取消
+              </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) => {
+                            if (item.hidden) return true;
+
+                            return false;
+                          })
+                        }
+                        onClick={(e) => {
+                          this.setState({
+                            isDefaultValue: false,
+                            dataSource: [
+                              ...dataSource.map((item) => {
+                                return {
+                                  ...item,
+                                  hidden: !e.target.checked,
+                                };
+                              }),
+                            ],
+                            sortDataSource: e.target.checked
+                              ? [
+                                  ...dataSource
+                                    .filter((item) => item.fixed === 'left')
+                                    .map((item) => ({
+                                      ...item,
+                                      hidden: false,
+                                    })),
+                                  ...dataSource
+                                    .filter((item) => !item.fixed)
+                                    .map((item) => ({
+                                      ...item,
+                                      hidden: false,
+                                    })),
+                                  ...dataSource
+                                    .filter((item) => item.fixed === 'right')
+                                    .map((item) => ({
+                                      ...item,
+                                      hidden: false,
+                                    })),
+                                ]
+                              : [],
+                          });
+                        }}
+                      >
+                        全选
+                      </Checkbox>
+                    )}
+                  </div>
+                  <div className={'sort_table_column_all'}>
+                    {searchDataSource
+                      ? seatchDataSource.map((item) => {
+                          return (
+                            <Checkbox
+                              checked={!item.hidden}
+                              onChange={(e) => {
+                                this.onChange(e, item.title);
+                              }}
+                            >
+                              {item.title}
+                            </Checkbox>
+                          );
+                        })
+                      : 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>
+                            );
+                          })}
+                    {!!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) => 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>
+        )}
+        <img width={32} onClick={this.showModal} src={shezhi} />
+      </div>
+    );
+  }
+}
+
+export default SortableTable;