提交 8acafe2d authored 作者: 李仕聪's avatar 李仕聪

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

上级 b145ba4f
/*
* @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,
});
}}
/>
</>
);
};
......@@ -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>
)}
......
......@@ -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
......@@ -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' &&
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论