feat: 添加抽屉嵌套业务表格控件

src/components/DrawerTable/index.less

+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 12px 16px 12px 0;
+  width: 100%;
+  text-align: right;
+  border-top: 1px solid #eee;
+  background-color: #fff;
+}

src/components/DrawerTable/index.tsx

+import React, { ReactText, useRef, useEffect, useLayoutEffect } from 'react';
+import {StandardTable} from 'god';
+import NestTable from '@/components/NestTable';
+import { IStandardTableProps } from 'god/dist/src/standard-table';
+import { Row, Col, Drawer, Space, Button } from 'antd';
+import styles from './index.less'
+
+/**
+ * 抽屉嵌套 业务表格控件
+ */
+
+export interface DrawerTableProps extends IStandardTableProps<any> {
+  width?: number,
+  drawerTitle?: ReactText,
+  /** 点确定按钮的回调 */
+  confirm?(),
+  /** 点击遮罩层或关闭或取消按钮的回调 */
+  cancel?(),
+  visible?: boolean,
+  /** Drawer属性配置 */
+  resetDrawer?: object,
+  /** 是否使用嵌套表格 */
+  useNestTable?: boolean,
+  nestColumns?: any[],
+  /** 嵌套表格配置属性 */
+  nestTableProps?: any,
+  // fix: 新增参数， 为true时每次开启弹窗都会重新reload接口
+  forceRender?: boolean,
+  searchName?: string,
+  /** schema 筛选的一些配置 */
+  formilyProps?: any,
+}
+
+const DrawerTable:React.FC<DrawerTableProps> = (props) => {
+  const {
+    width = 1000,
+    drawerTitle,
+    confirm,
+    cancel,
+    visible,
+    currentRef,
+    resetDrawer,
+    forceRender,
+    useNestTable = false,
+    nestColumns,
+    nestTableProps,
+    searchName,
+    formilyProps,
+    ...resetTable
+   } = props
+
+  const selfRef = currentRef || useRef<any>({})
+
+  useEffect(() => {
+    if (visible && forceRender) {
+      // 重新开启时需reload接口
+      // fix: 去掉自动reload接口, 防止重复请求
+      // fix: 新增forceRender接口， 用于控制弹窗是否需要reload
+      selfRef.current.reload && selfRef.current.reload()
+    } else {
+      selfRef.current.resetField && selfRef.current.resetField({
+        validate: false
+      })
+    }
+  }, [visible])
+
+  const onClick = () => {
+    confirm && confirm()
+  }
+
+  return (
+    <Drawer
+      width={width}
+      title={drawerTitle}
+      onClose={cancel}
+      visible={visible}
+      {...resetDrawer}
+    >
+      {
+        useNestTable ? (
+          <NestTable
+            NestColumns={nestColumns}
+            className="common_tb"
+            rowClassName={(_, index) => (index % 2) === 0 && "tb_bg"}
+            {...nestTableProps}
+          />
+        ) :  (
+            <StandardTable
+              currentRef={selfRef}
+              formilyProps={formilyProps}
+              {...resetTable}
+            />
+        )
+      }
+      <div style={{height: 56, width: '100%'}}></div>
+      <Row className={styles.footer}>
+        <Col span={24}>
+          <Space size={[16, 0]}>
+            <Button type="primary" onClick={onClick}>保存</Button>
+            <Button>取消</Button>
+          </Space>
+        </Col>
+      </Row>
+    </Drawer>
+  )
+}
+
+DrawerTable.defaultProps = {}
+
+export default DrawerTable

src/pages/procurement/callForBids/addRemarkBidExpert/index.tsx

-import React, { useRef, useState, useEffect, useContext } from 'react'
+import React, { useState } from 'react'
 import { history } from 'umi'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import ReutrnEle from '@/components/ReturnEle'
 import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
-import { Button, Card } from 'antd'
+import { Button, Card, Col, Row, Space } from 'antd'
 import { createFormActions } from '@formily/antd'
-import { LinkOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons'
+import { LinkOutlined } from '@ant-design/icons'
 import NiceForm from '@/components/NiceForm'
+import { PublicApi } from '@/services/api'
 import './index.less'
 import { formSchema } from './schema'
 import { Input, ArrayTable } from '@formily/antd-components'
+import DrawerTable from '@/components/DrawerTable'
+import { FORM_FILTER_PATH } from '@/formSchema/const'
+import Search from '@/components/NiceForm/components/Search'
+import Submit from '@/components/NiceForm/components/Submit'
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
 
 export interface AddRemarkBidExpertProps {}
 
@@ -22,6 +28,11 @@ const AddRemarkBidExpert:React.FC<AddRemarkBidExpertProps> = (props) => {
   const [btnLoading, setBtnLoading] = useState(false)
   const [initFormValue, setInitFormValue] = useState<any>({})
 
+  const [visible, setVisible] = useState(false)
+  const [selectRow, setSelectRow] = useState<any[]>([]) // 抽屉选择的行数据
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
+  const [totalNumber, setTotalNumber] = useState<number>(0)
+
   const {
     id,
     preview,
@@ -34,11 +45,69 @@ const AddRemarkBidExpert:React.FC<AddRemarkBidExpertProps> = (props) => {
   }
 
   const handleSelectExpert = () => {
+    setVisible(true)
     console.log('选择专家')
   }
 
   const selectButton = pageStatus === PageStatus.ADD && <div className='connectBtn' onClick={handleSelectExpert}><LinkOutlined style={{marginRight: 4}}/>选择</div>
 
+  const fetchData = (params: any) => {
+    return new Promise((resolve, reject) => {
+      //@ts-ignore
+      PublicApi.getProductPlatformGetAttributeList({ ...params, name: params.name || '', groupName: params.groupName || '', isEnable: true }).then(res => {
+        console.log(res)
+        setTotalNumber(res.data.totalCount)
+        resolve(res.data)
+      })
+    })
+  }
+
+  const columns: any[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '属性名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '属性组名',
+      dataIndex: 'groupName',
+      key: 'groupName',
+    },
+    {
+      title: '展示方式',
+      dataIndex: 'type',
+      key: 'type',
+      render: (text: number) => {
+        let txt = new Map([[1, '单选'], [2, '多选'], [3, '输入']])
+        return txt.get(text)
+      }
+    },
+    {
+      title: '是否必填',
+      dataIndex: 'isEmpty',
+      key: 'isEmpty',
+      render: (text: boolean) => text ? '是' : '否'
+    }
+  ]
+
+  const rowSelection: any = {
+    type: 'radio',
+    selectedRowKeys: selectedRowKeys,
+    onChange: (selectedRowKeys: any, selectedRows: any) => {
+      setSelectRow(selectedRows)
+      setSelectedRowKeys(selectedRowKeys)
+    }
+  }
+
+  const onConfirm = () => {
+    setVisible(false)
+    console.log('确定')
+  }
 
   return (
     <PageHeaderWrapper
@@ -46,11 +115,11 @@ const AddRemarkBidExpert:React.FC<AddRemarkBidExpertProps> = (props) => {
       onBack={() => history.goBack()}
       backIcon={<ReutrnEle description="返回"/>}
       title="新建评标模板"
-      extra={[
-        <Button key="1" onClick={() => addSchemaAction.submit()} loading={btnLoading} type="primary" icon={<SaveOutlined />}>
-          保存
-        </Button>,
-      ]}
+      // extra={[
+      //   <Button key="1" onClick={() => addSchemaAction.submit()} loading={btnLoading} type="primary" icon={<SaveOutlined />}>
+      //     保存
+      //   </Button>,
+      // ]}
     >
       <Card>
         <NiceForm
@@ -73,10 +142,94 @@ const AddRemarkBidExpert:React.FC<AddRemarkBidExpertProps> = (props) => {
             selectButton
           }}
         />
-        <Button>保存</Button>
+        <Row>
+          <Col span={8} offset={4}>
+            <Space size={[16, 0]}>
+              <Button type="primary">保存</Button>
               <Button>取消</Button>
+            </Space>
+          </Col>
+        </Row>
       </Card>
-
+      {/* 选择专家抽屉 */}
+      <DrawerTable
+        drawerTitle='选择专家'
+        confirm={onConfirm}
+        cancel={() => setVisible(false)}
+        visible={visible}
+        columns={columns}
+        rowSelection={rowSelection}
+        fetchTableData={(params: any) => fetchData(params)}
+        formilyProps={
+          {
+            ctx: {
+              schema: {
+                type: 'object',
+                properties: {
+                  groupName: {
+                    type: 'string',
+                    'x-component': 'ModalSearch',
+                    'x-component-props': {
+                      placeholder: '属性组名称',
+                      align: 'flex-left',
+                    },
+                  },
+                  [FORM_FILTER_PATH]: {
+                    type: 'object',
+                    'x-component': 'flex-layout',
+                    'x-component-props': {
+                      rowStyle: {
+                        flexWrap: 'wrap',
+                        width: '100%',
+                        justifyContent: 'flex-start',
+                        style: {
+                          marginRight: 0,
+                        }
+                      },
+                      colStyle: {
+                        marginTop: 20,
+                      },
+                    },
+                    properties: {
+                      name: {
+                        type: 'string',
+                        'x-component-props': {
+                          placeholder: '属性名称'
+                        },
+                      },
+                      submit: {
+                        "x-component": 'Submit',
+                        "x-mega-props": {
+                          span: 1
+                        },
+                        "x-component-props": {
+                          children: '查询'
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              components: { ModalSearch: Search, Submit } ,
+              effects: ($, actions) => {
+                actions.reset()
+                useStateFilterSearchLinkageEffect(
+                  $,
+                  actions,
+                  'groupName',
+                  FORM_FILTER_PATH,
+                );
+              }
+            }
+          }
+        }
+        // resetDrawer={{
+        //   destroyOnClose: true
+        // }}
+        tableProps={{
+          rowKey: 'id',
+        }}
+      />
     </PageHeaderWrapper>
   )
 }