@bit-sun/business-component 3.1.10-alpha.1 → 3.1.10-alpha.11

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

@@ -1,566 +1,568 @@
-// @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 request from '@/utils/request';
-import { SearchOutlined } from '@ant-design/icons';
-import { arrayMoveImmutable } from 'array-move';
-import close from '../../../assets/close.svg';
-import drag from '../../../assets/drag.svg';
-import './index.less';
-import ENUM from '@/utils/enumConfig';
-import { handleRequestUrl, judgeIsRequestSuccess } from '@/utils/requestUtils';
-
-const DragHandle = SortableHandle(() => <img width={25} src={drag} />);
-const SortableItem = SortableElement((props) => <tr {...props} />);
-const SortableBody = SortableContainer((props) => <tbody {...props} />);
-
-
-class SearchItemTable extends React.Component {
-  state = {
-    dataSource: [],
-    columns: [],
-    sortDataSource: [],
-    setVisible: false,
-    searchDataSource: false,
-    onSearchSort: false,
-    isDefaultValue: false,
-    defaultValue: [],
-    bsTableCode: '', //设置table 列的标识
-  };
-
-  patchUserSearchFieldsConfig = (config) => {
-    const { appRequestConfig } = this.props;
-    let that = this;
-    let configvalue = config
-      ? config.map((item) => ({
-          name: item.name,
-          hidden: item.hidden,
-        }))
-      : '';
-
-    request({
-      url: handleRequestUrl('/user','/appConfig/saveQueryCriteria', appRequestConfig),
-      method: 'POST',
-      data: {
-        code: that.state.bsTableCode,
-        detail: configvalue ? JSON.stringify(configvalue) : '',
-      },
-    }).then((res:any) => {
-      if (judgeIsRequestSuccess(res?.data)) {
-        this.patchConfigToLocalstorage(configvalue)
-      } else {
-        message.error('保存搜索项自定义失败，请稍后尝试');
-      }
-    })
-  };
-
-  getConfigFromlocalstorage = () => {
-    let config = localStorage.getItem(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION) || '[]';
-    let configArray = JSON.parse(config);
-    let configSetting = configArray.filter(
-      (item) => item.code === this.state.bsTableCode,
-    );
-
-    if (configSetting.length && configSetting[0].detail) {
-      return JSON.parse(configSetting[0].detail);
-    }
-    return [];
-  };
-
-  patchConfigToLocalstorage = (configvalue) => {
-    const { setShowSearchFields, datasource = [] } = this.props;
-    const { sortDataSource, bsTableCode } = this.state;
-    let config = localStorage.getItem(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION) || '[]'
-    let configArray = JSON.parse(config)
-    let currentSetting = configArray.filter(item => item.code === bsTableCode)
-    if (currentSetting.length) {
-      currentSetting[0].detail = JSON.stringify(configvalue)
-    } else {
-      configArray.push({
-        "code": bsTableCode,
-        "detail": JSON.stringify(configvalue)
-      })
-    }
-     
-    localStorage.setItem(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION, JSON.stringify(configArray));
-    this.setState({
-      visible: false,
-    });
-    if(configvalue){
-      setShowSearchFields([...sortDataSource]);
-    }else{
-      this.setState({
-        isDefaultValue: true,
-        dataSource: [...datasource.map((item)=>({
-          ...item,
-          hidden: false
-        }))],
-        sortDataSource: [...datasource.map((item)=>({
-          ...item,
-          hidden: false
-        }))]
-      });
-      setShowSearchFields([...datasource]);
-    }
-  };
-
-  setInitValue = (isClick = false) => {
-    const { datasource = [], showSearchFields =[] }: any =
-      this.props;
-    let config = this.getConfigFromlocalstorage();
-    this.setState({
-      isDefaultValue: true,
-      dataSource: datasource.map((item) => {
-        let innerItem = config.filter(
-          (inneritem) => {
-            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
-            let itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
-            return innerKey && innerKey === itemKey;
-          }
-        );
-        return {
-          ...item,
-          hidden: config.length && !innerItem.length,
-        };
-      }),
-      defaultValue: datasource.map((item) => {
-        let innerItem = config.filter(
-          (inneritem) => {
-            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
-            let itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
-            return innerKey && innerKey === itemKey;
-          }
-        );
-        return {
-          ...item,
-          hidden: config.length && !innerItem.length,
-        };
-      }),
-      sortDataSource: [...showSearchFields]
-    });
-  };
-
-  componentDidMount() {
-    const { 
-      datasource, 
-      showSearchFields, 
-      bsTableCode 
-    }: any = this.props;
-
-    let config = this.getConfigFromlocalstorage();
-
-    this.setState({
-      dataSource: datasource.map((item) => {
-        let innerItem = config.filter(
-          (inneritem) => {
-            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
-            let  itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
-            return innerKey && innerKey === itemKey;
-          }
-        );
-        return {
-          ...item,
-          hidden: config.length && !innerItem.length,
-        };
-      }),
-      defaultValue: datasource.map((item) => {
-        let innerItem = config.filter(
-          (inneritem) => {
-            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
-            let  itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
-            return innerKey && innerKey === itemKey;
-          }
-        );
-        return {
-          ...item,
-          hidden: config.length && !innerItem.length,
-        };
-      }),
-      sortDataSource: datasource
-        .filter((item) => !item.hidden)
-        .map((item) => ({
-          ...item,
-        })),
-      bsTableCode
-    });
-  }
-
-  columns = [
-    {
-      title: '搜索字段名称',
-      dataIndex: 'label',
-      className: 'drag-visible',
-      width: 100,
-    },
-    {
-      title: '删除',
-      dataIndex: 'title1',
-      render: (text, record) => {
-        return (
-          <span
-            onClick={() => {
-              this.setState({
-                sortDataSource: this.state.sortDataSource.filter((item) => {
-                  return item.label !== record.label;
-                }),
-                isDefaultValue: false,
-                dataSource: [
-                  ...this.state.dataSource.map((item) => {
-                    if (item.label === record.label) {
-                      return {
-                        ...item,
-                        hidden: true,
-                      };
-                    }
-                    return item;
-                  }),
-                ],
-              });
-            }}
-          >
-            <img width={24} 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;
-    if (!sortDataSource.length) {
-      message.warning('至少选择一个搜索项!');
-      return;
-    }
-    this.patchUserSearchFieldsConfig(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;
-    if (oldIndex !== newIndex) {
-      const newData = arrayMoveImmutable(
-        [].concat(sortDataSource),
-        oldIndex,
-        newIndex,
-      ).filter((el) => !!el);
-      this.setState({
-        sortDataSource: [ ...newData],
-        isDefaultValue: false,
-      });
-    }
-  };
-
-  DraggableContainer = (props) => (
-    <SortableBody
-      useDragHandle
-      disableAutoscroll
-      helperClass="row-dragging"
-      onSortEnd={this.onSortEnd}
-      {...props}
-    />
-  );
-
-  DraggableBodyRow = ({ className, style, ...restProps }) => {
-    const { sortDataSource } = this.state;
-    const index = sortDataSource.findIndex(
-      (x) => x.name === restProps['data-row-key'],
-    );
-    return <SortableItem index={index} {...restProps} />;
-  };
-
-  onChange = (e: CheckboxChangeEvent, label) => {
-    const { sortDataSource, dataSource } = this.state;
-    if (!e.target.checked) {
-      this.setState({
-        sortDataSource: sortDataSource.filter((item) => {
-          return item.label !== label;
-        }),
-        isDefaultValue: false,
-        dataSource: [
-          ...dataSource.map((item) => {
-            if (item.label === label) {
-              return {
-                ...item,
-                hidden: true,
-              };
-            }
-            return item;
-          }),
-        ],
-      });
-    } else {
-      let newSortData = [
-        ...sortDataSource,
-        ...dataSource
-          .filter((item) => item.label === label)
-          .map((source) => {
-            return {
-              ...source,
-              hidden: false,
-            };
-          }),
-      ];
-      this.setState({
-        sortDataSource: [...newSortData],
-        isDefaultValue: false,
-        dataSource: [
-          ...dataSource.map((item) => {
-            if (item.label === label) {
-              return {
-                ...item,
-                hidden: false,
-              };
-            }
-            return item;
-          }),
-        ],
-      });
-    }
-  };
-
-  handleReset = () => {
-    this.setInitValue(true);
-  };
-
-  handleResetSetting = () =>{
-    this.patchUserSearchFieldsConfig('');
-  }
-
-  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 newSearchSource = dataSource.filter(
-      (item) => item?.label?.indexOf(searchDataSource||'') > -1,
-    );
-    return (
-      <div className={'sort_table_wrapper'}>
-        {visible && (
-          <Modal
-            title="设置搜索项内容"
-            wrapClassName={'sort_table_wrapper'}
-            width={820}
-            visible={visible}
-            onOk={this.handleOk}
-            onCancel={this.handleCancel}
-            footer={[
-              <div>
-                <Button key="back" onClick={this.handleReset} style={{marginRight: 0}}>
-                  恢复默认
-                </Button>
-                <Button key="back" onClick={this.handleResetSetting}>
-                  重置设置
-                </Button>
-              </div>,
-              <div>
-                <Button key="submit" onClick={this.handleCancel} style={{marginRight: 0}}>
-                  取消
-                </Button>
-                <Button key="submit" type="primary" onClick={this.handleOk}>
-                  确认
-                </Button>
-              </div>,
-            ]}
-          >
-            <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.map((item) => ({...item,hidden: false}))]
-                              : [],
-                          });
-                        }}
-                      >
-                        全选
-                      </Checkbox>
-                    )}
-                  </div>
-                  <div className={'sort_table_column_all'}>
-                    {searchDataSource
-                      ? newSearchSource.map((item) => {
-                          return (
-                            <Checkbox
-                              checked={!item.hidden}
-                              onChange={(e) => {
-                                this.onChange(e, item.label);
-                              }}
-                            >
-                              {item.label}
-                            </Checkbox>
-                          );
-                        })
-                      : dataSource.map((item) => {
-                          return (
-                            <Checkbox
-                              checked={!item.hidden}
-                              onChange={(e) => {
-                                this.onChange(e, item.label);
-                              }}
-                            >
-                              {item.label}
-                            </Checkbox>
-                          );
-                        })}
-                    {!!newSearchSource.length && (
-                      <span style={{ width: '144px' }}></span>
-                    )}
-
-                    {!newSearchSource.length && (
-                      <div className={'sort_table_column_all_empty'}>
-                        未查询到结果
-                      </div>
-                    )}
-                  </div>
-                </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?.label?.indexOf(onSearchSort) > -1,
-                          )
-                        : sortDataSource
-                    }
-                    columns={this.columns}
-                    rowKey="name"
-                    components={{
-                      body: {
-                        wrapper: this.DraggableContainer,
-                        row: this.DraggableBodyRow,
-                      },
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          </Modal>
-        )}
-        <div onClick={this.showModal} style={{fontSize:14, textAlign: 'center'}}>搜索项设置</div>
-      </div>
-    );
-  }
-}
-
-export default SearchItemTable;
+// @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 request from '@/utils/request';
+import { SearchOutlined } from '@ant-design/icons';
+import { arrayMoveImmutable } from 'array-move';
+import close from '../../../assets/close.svg';
+import drag from '../../../assets/drag.svg';
+import './index.less';
+import ENUM from '@/utils/enumConfig';
+import { handleRequestUrl, judgeIsRequestSuccess } from '@/utils/requestUtils';
+
+const DragHandle = SortableHandle(() => <img width={25} src={drag} />);
+const SortableItem = SortableElement((props) => <tr {...props} />);
+const SortableBody = SortableContainer((props) => <tbody {...props} />);
+
+
+class SearchItemTable extends React.Component {
+  state = {
+    dataSource: [],
+    columns: [],
+    sortDataSource: [],
+    setVisible: false,
+    searchDataSource: false,
+    onSearchSort: false,
+    isDefaultValue: false,
+    defaultValue: [],
+    bsTableCode: '', //设置table 列的标识
+  };
+
+  patchUserSearchFieldsConfig = (config) => {
+    const { appRequestConfig } = this.props;
+    let that = this;
+    let configvalue = config
+      ? config.map((item) => ({
+          name: item.name,
+          hidden: item.hidden,
+        }))
+      : '';
+
+    request({
+      url: handleRequestUrl('/user','/appConfig/saveQueryCriteria', appRequestConfig),
+      method: 'POST',
+      data: {
+        code: that.state.bsTableCode,
+        detail: configvalue ? JSON.stringify(configvalue) : '',
+      },
+    }).then((res:any) => {
+      if (judgeIsRequestSuccess(res?.data)) {
+        this.patchConfigToLocalstorage(configvalue)
+      } else {
+        message.error('保存搜索项自定义失败，请稍后尝试');
+      }
+    })
+  };
+
+  getConfigFromlocalstorage = () => {
+    let config = localStorage.getItem(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION) || '[]';
+    let configArray = JSON.parse(config);
+    let configSetting = configArray.filter(
+      (item) => item.code === this.state.bsTableCode,
+    );
+
+    if (configSetting.length && configSetting[0].detail) {
+      return JSON.parse(configSetting[0].detail);
+    }
+    return [];
+  };
+
+  patchConfigToLocalstorage = (configvalue) => {
+    const { setShowSearchFields, datasource = [] } = this.props;
+    const { sortDataSource, bsTableCode } = this.state;
+    let config = localStorage.getItem(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION) || '[]'
+    let configArray = JSON.parse(config)
+    let currentSetting = configArray.filter(item => item.code === bsTableCode)
+    if (currentSetting.length) {
+      currentSetting[0].detail = JSON.stringify(configvalue)
+    } else {
+      configArray.push({
+        "code": bsTableCode,
+        "detail": JSON.stringify(configvalue)
+      })
+    }
+     
+    localStorage.setItem(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION, JSON.stringify(configArray));
+    this.setState({
+      visible: false,
+    });
+    if(configvalue){
+      setShowSearchFields([...sortDataSource]);
+    }else{
+      this.setState({
+        isDefaultValue: true,
+        dataSource: [...datasource.map((item)=>({
+          ...item,
+          hidden: false
+        }))],
+        sortDataSource: [...datasource.map((item)=>({
+          ...item,
+          hidden: false
+        }))]
+      });
+      setShowSearchFields([...datasource]);
+    }
+  };
+
+  setInitValue = (isClick = false) => {
+    const { datasource = [], showSearchFields =[] }: any =
+      this.props;
+    let config = this.getConfigFromlocalstorage();
+    this.setState({
+      isDefaultValue: true,
+      dataSource: datasource.map((item) => {
+        let innerItem = config.filter(
+          (inneritem) => {
+            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
+            let itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
+            return innerKey && innerKey === itemKey;
+          }
+        );
+        return {
+          ...item,
+          hidden: config.length && !innerItem.length,
+        };
+      }),
+      defaultValue: datasource.map((item) => {
+        let innerItem = config.filter(
+          (inneritem) => {
+            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
+            let itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
+            return innerKey && innerKey === itemKey;
+          }
+        );
+        return {
+          ...item,
+          hidden: config.length && !innerItem.length,
+        };
+      }),
+      sortDataSource: [...showSearchFields]
+    });
+  };
+
+  componentDidMount() {
+    const { 
+      datasource, 
+      showSearchFields, 
+      bsTableCode 
+    }: any = this.props;
+
+    let config = this.getConfigFromlocalstorage();
+
+    this.setState({
+      dataSource: datasource.map((item) => {
+        let innerItem = config.filter(
+          (inneritem) => {
+            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
+            let  itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
+            return innerKey && innerKey === itemKey;
+          }
+        );
+        return {
+          ...item,
+          hidden: config.length && !innerItem.length,
+        };
+      }),
+      defaultValue: datasource.map((item) => {
+        let innerItem = config.filter(
+          (inneritem) => {
+            let innerKey = Array.isArray(inneritem.name) ? JSON.stringify(inneritem.name) : (inneritem.name);
+            let  itemKey = Array.isArray(item.name) ? JSON.stringify(item.name) : (item.name);
+            return innerKey && innerKey === itemKey;
+          }
+        );
+        return {
+          ...item,
+          hidden: config.length && !innerItem.length,
+        };
+      }),
+      sortDataSource: datasource
+        .filter((item) => !item.hidden)
+        .map((item) => ({
+          ...item,
+        })),
+      bsTableCode
+    });
+  }
+
+  columns = [
+    {
+      title: '搜索字段名称',
+      dataIndex: 'label',
+      className: 'drag-visible',
+      width: 100,
+    },
+    {
+      title: '删除',
+      dataIndex: 'title1',
+      render: (text, record) => {
+        return (
+          <span
+            onClick={() => {
+              this.setState({
+                sortDataSource: this.state.sortDataSource.filter((item) => {
+                  return item.label !== record.label;
+                }),
+                isDefaultValue: false,
+                dataSource: [
+                  ...this.state.dataSource.map((item) => {
+                    if (item.label === record.label) {
+                      return {
+                        ...item,
+                        hidden: true,
+                      };
+                    }
+                    return item;
+                  }),
+                ],
+              });
+            }}
+          >
+            <img width={24} src={close} />
+          </span>
+        );
+      },
+    },
+    {
+      title: 'Sort',
+      dataIndex: 'sort',
+      className: 'drag-visible',
+      render: () => <DragHandle />,
+    },
+  ];
+
+  showModal = () => {
+    this.setState({
+      visible: true,
+      onSearchSort: false,
+      searchDataSource: false,
+    });
+    this.setInitValue();
+  };
+
+  handleOk = (e?: React.MouseEvent<HTMLElement>) => {
+    const { sortDataSource, isDefaultValue, defaultValue } = this.state;
+    if (!sortDataSource.length) {
+      message.warning('至少选择一个搜索项!');
+      return;
+    }
+    this.patchUserSearchFieldsConfig(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;
+    if (oldIndex !== newIndex) {
+      const newData = arrayMoveImmutable(
+        [].concat(sortDataSource),
+        oldIndex,
+        newIndex,
+      ).filter((el) => !!el);
+      this.setState({
+        sortDataSource: [ ...newData],
+        isDefaultValue: false,
+      });
+    }
+  };
+
+  DraggableContainer = (props) => (
+    <SortableBody
+      useDragHandle
+      disableAutoscroll
+      helperClass="row-dragging"
+      onSortEnd={this.onSortEnd}
+      {...props}
+    />
+  );
+
+  DraggableBodyRow = ({ className, style, ...restProps }) => {
+    const { sortDataSource } = this.state;
+    const index = sortDataSource.findIndex(
+      (x) => x.name === restProps['data-row-key'],
+    );
+    return <SortableItem index={index} {...restProps} />;
+  };
+
+  onChange = (e: CheckboxChangeEvent, label) => {
+    const { sortDataSource, dataSource } = this.state;
+    if (!e.target.checked) {
+      this.setState({
+        sortDataSource: sortDataSource.filter((item) => {
+          return item.label !== label;
+        }),
+        isDefaultValue: false,
+        dataSource: [
+          ...dataSource.map((item) => {
+            if (item.label === label) {
+              return {
+                ...item,
+                hidden: true,
+              };
+            }
+            return item;
+          }),
+        ],
+      });
+    } else {
+      let newSortData = [
+        ...sortDataSource,
+        ...dataSource
+          .filter((item) => item.label === label)
+          .map((source) => {
+            return {
+              ...source,
+              hidden: false,
+            };
+          }),
+      ];
+      this.setState({
+        sortDataSource: [...newSortData],
+        isDefaultValue: false,
+        dataSource: [
+          ...dataSource.map((item) => {
+            if (item.label === label) {
+              return {
+                ...item,
+                hidden: false,
+              };
+            }
+            return item;
+          }),
+        ],
+      });
+    }
+  };
+
+  handleReset = () => {
+    this.setInitValue(true);
+  };
+
+  handleResetSetting = () =>{
+    this.patchUserSearchFieldsConfig('');
+  }
+
+  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 newSearchSource = dataSource.filter(
+      (item) => item?.label?.indexOf(searchDataSource||'') > -1,
+    );
+    return (
+      <div className={'sort_table_wrapper'}>
+        {visible && (
+          <Modal
+            title="设置搜索项内容"
+            wrapClassName={'sort_table_wrapper'}
+            width={820}
+            visible={visible}
+            onOk={this.handleOk}
+            onCancel={this.handleCancel}
+            footer={[
+              <div>
+                <Button key="back" onClick={this.handleReset} style={{marginRight: 0}}>
+                  恢复默认
+                </Button>
+                <Button key="back" onClick={this.handleResetSetting}>
+                  重置设置
+                </Button>
+              </div>,
+              <div>
+                <Button key="submit" onClick={this.handleCancel} style={{marginRight: 0}}>
+                  取消
+                </Button>
+                <Button key="submit" type="primary" onClick={this.handleOk}>
+                  确认
+                </Button>
+              </div>,
+            ]}
+          >
+            <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.map((item) => ({...item,hidden: false}))]
+                              : [],
+                          });
+                        }}
+                      >
+                        全选
+                      </Checkbox>
+                    )}
+                  </div>
+                  <div className={'sort_table_column_all'}>
+                    {searchDataSource
+                      ? newSearchSource.map((item) => {
+                          return (
+                            <Checkbox
+                              checked={!item.hidden}
+                              onChange={(e) => {
+                                this.onChange(e, item.label);
+                              }}
+                            >
+                              {item.label}
+                            </Checkbox>
+                          );
+                        })
+                      : dataSource.map((item) => {
+                          return (
+                            <Checkbox
+                              checked={!item.hidden}
+                              onChange={(e) => {
+                                this.onChange(e, item.label);
+                              }}
+                            >
+                              {item.label}
+                            </Checkbox>
+                          );
+                        })}
+                    {!!newSearchSource.length && (
+                      <span style={{ width: '144px' }}></span>
+                    )}
+
+                    {!newSearchSource.length && (
+                      <div className={'sort_table_column_all_empty'}>
+                        未查询到结果
+                      </div>
+                    )}
+                  </div>
+                </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?.label?.indexOf(onSearchSort) > -1,
+                          )
+                        : sortDataSource
+                    }
+                    columns={this.columns}
+                    rowKey="name"
+                    components={{
+                      body: {
+                        wrapper: this.DraggableContainer,
+                        row: this.DraggableBodyRow,
+                      },
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          </Modal>
+        )}
+        <div onClick={this.showModal} style={{fontSize:14, textAlign: 'center'}}>搜索项设置</div>
+      </div>
+    );
+  }
+}
+
+export default SearchItemTable;