新增表格表头筛选功能

one_stop_public/libs/formList/TableList.less

 @import '~antd/lib/style/themes/default.less';
 @import './utils.less';
-.clearfix{
-  width:110px;
-  height:90px;
+.clearfix {
+  width: 110px;
+  height: 90px;
 }
-.headBox{
+.headBox {
   position: absolute;
-  top:55px;
+  top: 55px;
   right: 100px;
 }
-.infoBox label{
+.infoBox label {
   width: 100px;
-  text-align: right
+  text-align: right;
 }
-.pagBox{
+.pagBox {
   position: relative;
   width: 100%;
-
 }
-.infoBox{
+.infoBox {
   position: relative;
   width: 100%;
 }
-.boxTitle{
+.boxTitle {
   font-size: 18px;
-  border-bottom: 1px solid #F0F0F0;
-  color:#333;
-  padding-bottom:10px;
+  border-bottom: 1px solid #f0f0f0;
+  color: #333;
+  padding-bottom: 10px;
 }
 .tableList {
   .tableListOperator {
@@ -74,3 +73,13 @@
     margin-right: 8px;
   }
 }
+
+.filter_btn {
+  font-size: 14px;
+  font-weight: 400;
+  color: #1998f0;
+  height: 30px;
+  background: #ffffff;
+  border-radius: 2px;
+  border-color: #1998f0;
+}

one_stop_public/libs/formList/index.js

@@ -16,6 +16,8 @@ import {
   Popconfirm,
   Tooltip,
   Spin,
+  Popover,
+  Checkbox,
 } from 'antd';
 import { connect } from 'dva';
 import PageHeaderWrapper from './PageHeaderWrapper';
@@ -35,6 +37,8 @@ import { isEmpty } from 'lodash';
 import FilePreview from '@/webPublic/one_stop_public/filePreview';
 import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
 import UploadCom from '@/webPublic/one_stop_public/libs/UploadCom';
+import ButtonDiy from '../../App/ButtonDiy/ButtonDiy';
+import { cloneDeep } from '../../copy/index';
 const FormItem = Form.Item;
 let AllWidth = 0; // 表格总长度
 const { RangePicker } = DatePicker;
@@ -176,9 +180,12 @@ class FormList extends React.Component {
     showDiv: '',
     showMobileDiv: '',
     isView: false,
+    checkedList: [], // 复选框默认选中
+    cacheColumns: '', // 初始表头缓存数据 后续不做增删改查
   };
 
   columns = [];
+  checkList = []; // 复选框内容
   getOptions = () => {
     const refIds = [];
     for (var i = 0; i < this.state.formItem.length; i++) {
@@ -308,7 +315,6 @@ class FormList extends React.Component {
         showMobileDiv,
       });
     }
-    console.log(showMobileDiv);
   };
   //渲染值
   componentDidMount() {
@@ -432,7 +438,20 @@ class FormList extends React.Component {
           if (datas) {
             this.state.formItem = datas;
             let i = 0;
-
+            let cacheList = [];
+            let cacheChecked = [];
+            // 表头筛选逻辑
+            datas.map(item => {
+              cacheList.push({
+                label: item.title,
+                value: item.name,
+              });
+              cacheChecked.push(item.name);
+            });
+            this.checkList = cacheList;
+            this.setState({
+              checkedList: cacheChecked,
+            });
             for (let t in datas) {
               if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
               if (datas[t].isHidden) {
@@ -506,7 +525,9 @@ class FormList extends React.Component {
 
               this.setState({ tableWidth: (datas.length - 1) * 200 });
               this.columns.push(column);
-
+              this.setState({
+                cacheColumns: this.columns,
+              });
               if (datas[t].isShowQuery) {
                 querys.push(datas[t]);
                 if (datas[t].referenceObjId != null) {
@@ -994,6 +1015,30 @@ class FormList extends React.Component {
       </Form>
     );
   }
+  /**
+   * @description: 表头筛选复选框 根据用户筛选将表头内容重置
+   * @param { Array<string> } 用户选择参数
+   * @return:
+   */
+
+  CheckboxChange = checkedValues => {
+    if (checkedValues.length === 0) {
+      message.error('至少选择一项');
+      return;
+    }
+    const { cacheColumns } = this.state;
+    let initList = [];
+    checkedValues.map(item => {
+      let ary = cacheColumns.filter(data => data.dataIndex === item);
+      if (ary.length !== 0) {
+        initList.push(ary[0]);
+      }
+    });
+    this.columns = initList;
+    this.setState({
+      checkedList: checkedValues,
+    });
+  };
   render() {
     const { modalVisible, selectedRows, querys, tableWidth, rights, data, isReady } = this.state;
     if (!isReady) {
@@ -1155,10 +1200,12 @@ class FormList extends React.Component {
         !isEmpty(this.columns[this.columns.length - 1]) &&
         this.columns[this.columns.length - 1].title === '操作'
       ) {
+        if (this.columns[this.columns.length - 2]) {
           this.columns[this.columns.length - 2].width = '';
           AllWidth += 100;
         }
       }
+    }
     const xxxx = (
       <>
         <Card bordered={false} bodyStyle={{ padding: 0 }}>
@@ -1224,6 +1271,35 @@ class FormList extends React.Component {
                       </Popconfirm>
                     </span>
                   )}
+              {rights && !rights.includes('headerFilter') ? (
+                ''
+              ) : (
+                <Popover // 划入选择栏
+                  content={
+                    <div
+                      style={{
+                        width: 150,
+                      }}
+                    >
+                      <Checkbox.Group
+                        onChange={this.CheckboxChange}
+                        value={this.state.checkedList}
+                        options={this.checkList}
+                      />
+                    </div>
+                  }
+                  title="请选择表头展示"
+                  trigger="click"
+                  placement="bottom"
+                >
+                  <Button // 表头筛选控件
+                    className={styles.filter_btn}
+                    icon="filter"
+                  >
+                    表头筛选
+                  </Button>
+                </Popover>
+              )}
             </div>
             {!istableCom || (this.props.value && this.props.value.columns) ? (
               <StandardTable