feat: 完成3577 低代码平台增加功能

one_stop_public/libs/PageTable.jsx

+/*
+ * @Author: LSC
+ * @Date: 2024-08-09 10:02:04
+ * @LastEditTime: 2024-08-09 13:36:14
+ */
+import React, { useEffect, useState } from 'react';
+import { Button, Table, Input } from 'antd';
+import { getServicesNomal } from '../Services/services';
+import { getSqlDataApi } from '../Services/apiConfig';
+import styles from './style.less';
+
+// eslint-disable-next-line import/prefer-default-export
+export const PageTable = (props) => {
+	const {
+		isMultiple,
+		isShowQuanXuan,
+		selectAll,
+		cancelAll,
+		valueName,
+		columns3,
+		allWidth,
+		get,
+		sqlKey,
+		allValues,
+		visiable,
+		modalWidth,
+	} = props;
+	console.log("🚀 ~ file: PageTable.jsx:27 ~ props:", props);
+	const [pagination, setPagination] = useState({
+		total: 0,
+		pageNo: 1,
+		pageSize: 15,
+	});
+	const [queryParams, setQueryParams] = useState({});
+	const [dataSource, setDataSource] = useState([]);
+	useEffect(
+		() => {
+			init();
+		},
+		[visiable, pagination.pageNo, pagination.pageSize],
+	);
+	const init = () => {
+		const params = {
+			sqlKey,
+			allValues,
+			isCache: false,
+			jsParams: JSON.stringify([queryParams]),
+			pageNo: pagination?.pageNo,
+			pageSize: pagination?.pageSize,
+		};
+		getServicesNomal(getSqlDataApi, params).then((list) => {
+			setPagination({
+				...pagination,
+				total: parseInt(list?.total) || 0,
+			});
+			setDataSource(list?.rows);
+		});
+	};
+
+	const pageProps = {
+		pageSize: pagination.pageSize,
+		current: pagination.pageNo,
+		total: pagination.total,
+		showSizeChanger: true,
+		showQuickJumper: true,
+	};
+	let widthThis = 
+		get === 'mobile' ? '100%' : !!Number(modalWidth) ? Number(modalWidth) : modalWidth || '90%';
+	return (
+		<>
+			<div
+				className={styles.searchGrid}
+				style={{
+					width: widthThis,
+				}}>
+				{columns3.filter((y) => y?.isQuery)?.map((g) => {
+					return (
+						<div key={g.dataIndex} className={styles.itemX}>
+							<span className={styles.searchSpan}>{g.title}</span> :{' '}
+							<Input
+								onChange={(e) => {
+									setQueryParams({ ...queryParams, [g.dataIndex]: e.target.value });
+								}}
+								value={queryParams[g.dataIndex]}
+								style={{
+									display: 'inline-block',
+									width: '150px',
+								}}
+							/>
+						</div>
+					);
+				})}
+				<Button onClick={init} type="primary">
+					查询
+				</Button>
+			</div>
+			<div>
+				{isMultiple &&
+					isShowQuanXuan !== false && (
+						<>
+							{' '}
+							<Button
+								id={'quanXuanButton'}
+								type={'primary'}
+								style={{ margin: '0 10px 10px 0' }}
+								onClick={selectAll}>
+								全选
+							</Button>
+							<Button
+								id={'quXiaoQuanXuanButton'}
+								type={'primary'}
+								style={{ marginBottom: '10px' }}
+								onClick={cancelAll}>
+								取消全选
+							</Button>
+						</>
+					)}
+			</div>
+
+			<Table
+				rowKey={valueName}
+				size="small"
+				dataSource={dataSource}
+				columns={columns3}
+				scroll={{ x: get === 'mobile' ? 'max-content' : allWidth }}
+				pagination={pageProps}
+				onChange={(newPagination, filters, sorter) => {
+					const { current, pageSize } = newPagination;
+					if (pagination.pageSize !== pageSize) {
+						setPagination({
+							...pagination,
+							pageNo: 1,
+							pageSize,
+						});
+						return;
+					}
+					setPagination({
+						...pagination,
+						pageNo: current,
+						pageSize,
+					});
+				}}
+			/>
+		</>
+	);
+};

one_stop_public/libs/TableSelect.js

@@ -5,6 +5,7 @@ import { connect } from 'dva';
 import { getModal } from '@/webPublic/one_stop_public/utils/utils';
 import TableSelectNormal from '@/webPublic/one_stop_public/libs/Split/TableSelectNormal';
 import styles from './Split/styles.less';
+import { PageTable } from './PageTable';
 
 const Modal = getModal();
 
@@ -210,12 +211,16 @@ export default class TableSelect extends React.Component {
         sql,
         optionType,
         showTable,
-        isShowQuanXuan
+        isShowQuanXuan,
+        isOpenPage,
+        modalWidth,
       },
       dataColumn: { referenceObjId },
       sqlModel,
       columns,
       dataSource,
+      sqlKey,
+      allValues,
     } = this.props;
     let disabled = this.props.disabled || this.props.json.disabled; // 禅道 28713
     const { cardSelectModalProps = {} } = this.otherProps;
@@ -249,9 +254,25 @@ export default class TableSelect extends React.Component {
         render: (val, record) => <a onClick={this.remove.bind(this, record.selectKey)}>移除</a>,
       },);
     }
-    const columns3 = [
-      ...columns,
+    let columns3;
+		if(isOpenPage) {
+			columns3 = [
+				...columns?.map(i => {
+					delete i.filterDropdown;
+					delete i.onFilter;
+					delete i.onFilterDropdownOpenChange;
+					return {
+						...i,
+						filterSearch: false,
+						filterIcon: false,
+					}
+				}),
+			];
+		} else {
+			columns3 = [
+				...columns
 			];
+		}
     if (!disabled) {
       columns3.push( {
         title: '操作',
@@ -329,7 +350,7 @@ export default class TableSelect extends React.Component {
         {visiable && (
           <Modal
             className={styles.ModalDiy}
-            width={this.props.get === 'mobile' ? '100%' : '60%'}
+            width={this.props.get === 'mobile' ? '100%' : '80%'}
             maskClosable={false}
             title={`请选择`}
             visible={true}
@@ -380,6 +401,22 @@ export default class TableSelect extends React.Component {
                 sql={sql}
               />
             ) : (
+              <>
+                { isOpenPage ? <PageTable isMultiple={isMultiple}
+                                 allWidth={allWidth}
+                                 cancelAll={this.cancelAll}
+                                 selectAll={this.selectAll}
+                                 isShowQuanXuan={isShowQuanXuan}
+                                 valueName={valueName}
+                                 columns3={columns3}
+                                 get={this.props.get}
+                                 selects={this.state.selects}
+                                 callback={this.select}
+                                 sqlKey={sqlKey}
+                                 allValues={allValues}
+                                 visiable={visiable}
+                                 modalWidth={modalWidth}
+              /> : 
               <TableSelectNormal isMultiple={isMultiple}
                                  allWidth={allWidth}
                                  cancelAll={this.cancelAll}
@@ -394,6 +431,8 @@ export default class TableSelect extends React.Component {
                                  callback={this.select}
 
               />
+            }
+              </>
             )}
           </Modal>
         )}

one_stop_public/libs/style.less

@@ -281,3 +281,16 @@
     padding: 5px;
   }
 }
+
+
+.searchGrid{
+	display: grid;
+	justify-items: center;
+	align-items: center;
+	margin-bottom: 10px;
+	grid-template-columns: repeat(auto-fill, 250px);
+	gap: 10px;
+	.itemX{
+		width: 250px;
+	}
+}
\ No newline at end of file

one_stop_public/tableCompon/index.jsx

@@ -149,6 +149,8 @@ export default class TableCom extends Component {
         list: [],
         pagination: false,
       },
+      sqlKey:'',
+      allValues:{},
     };
     this.excludeKeys = ['defaultValues', ''];
     this.otherProps = {};
@@ -454,6 +456,28 @@ export default class TableCom extends Component {
 
   dataFilter = ['Select', 'Radio', 'Checkbox', 'Cascader', 'TreeSelect'];
 
+  queryModal = () => {
+    const {sqlKey,allValues} =this.state
+    const {json} =this.props
+    const isOpenPage = json?.isOpenPage
+    const params = {
+      sqlKey,
+      allValues,
+      isCache: this.otherProps?.isCache || false,
+    }
+            // 分页走PageTable
+            if(isOpenPage) {
+              return
+            }
+                getServicesNomal(getSqlDataApi, params).then(list => {
+                  const x = {
+                    list: list,
+                    pagination: false,
+                  }
+              this.setState({ dataSource: x });
+            });
+  }
+
   getData = (json, dataColumn, obj, init) => {
     const { formKey, uuid } = this.props;
     let jsonStatic = json;
@@ -523,6 +547,7 @@ export default class TableCom extends Component {
                   column = {
                     ...this.getColumnSearchProps(cll[k].name, cll[k].title),
                     ...column,
+                    isQuery: cll[k].isQuery,
                   };
                 }
 
@@ -532,17 +557,11 @@ export default class TableCom extends Component {
               }
               this.setState({ columns });
             }
-            getServicesNomal(getSqlDataApi, {
+            this.setState({
               sqlKey,
               allValues,
-              isCache: this.otherProps?.isCache || false,
-            }).then(list => {
-              const x = {
-                list: list,
-                pagination: false,
-              };
-              this.setState({ dataSource: x });
-            });
+            })
+            this.queryModal()
           }
         });
       } else if (optionType == 'reference' && dataColumn.referenceObjId) {
@@ -3396,7 +3415,8 @@ ${obj[dataColumn.base52]}
                   },
                 ],
           })(
-            <TableSelect
+            <>
+            { this.props.json?.isOpenPage ? <TableSelect
               get={get}
               json={json}
               disabled={!isEdit}
@@ -3405,7 +3425,20 @@ ${obj[dataColumn.base52]}
               dataSource={this.state.dataSource}
               sqlModel={this.state.sqlModel}
               resetSearchText={this.resetSearchText}
-            />,
+              setPagination={this.setPagination}
+              sqlKey={this.state.sqlKey}
+              allValues={this.state.allValues}
+            /> : <TableSelect
+            get={get}
+            json={json}
+            disabled={!isEdit}
+            dataColumn={dataColumn}
+            columns={this.state.columns}
+            dataSource={this.state.dataSource}
+            sqlModel={this.state.sqlModel}
+            resetSearchText={this.resetSearchText}
+          />}
+            </>,
           );
           if (
             get === 'mobile' &&