Commit 7b851f3d by zhaochengxiang

衍生表静态页面

parent dd86b2c6
import React from "react";
import { Modal, Space, Button, Form } from "antd";
import ImportAction from "./ImportAction";
const FC = (props) => {
const { visible, id, onCancel } = props;
const [form] = Form.useForm();
const onOk = () => {
}
return (
<Modal
title='编辑衍生表'
visible={visible}
onCancel={() => { onCancel?.(); }}
width='95%'
footer={
<Space>
<Button onClick={ () => { onCancel?.(); } }>取消</Button>
<Button type="primary" onClick={ onOk }>确定</Button>
</Space>
}
centered={true}
bodyStyle={{
height: '80vh',
overflow: 'auto'
}}
>
<ImportAction form={form} action='edit' modelerId={id} />
</Modal>
)
}
export default FC;
\ No newline at end of file
......@@ -45,7 +45,7 @@ const ImportAction = (props) => {
//初始化form状态
if (action==='add'||action==='edit'||action==='flow') {
form.resetFields();
form?.resetFields();
}
if (action === 'detail'|| action ==='flow' || action === 'detail-version') {
......@@ -174,7 +174,6 @@ const ImportAction = (props) => {
}
const getCurrentDataModel = () => {
if ((modelerId||'') === '') {
setLoading(false);
return;
......@@ -201,7 +200,8 @@ const ImportAction = (props) => {
} else if (action==='edit' && permitCheckOut) {
type = 'datamodel.checkOutDataModel';
} else if (action==='edit') {
const _action = getQueryParam(Action, props.location.search);
const _action = getQueryParam(Action, props.location?.search);
if (_action === 'flow') {
params.ignoreNamespace = true;
......
......@@ -29,11 +29,25 @@ const FC = (props) => {
</div>
}}
>
<Tabs.TabPane tab={<Checkbox onChange={(e) => { setGenerateHistory(e.target.checked); }}>历史表</Checkbox>} key='history'>
<Preview />
<Tabs.TabPane
tab={
<span>
<Checkbox className='mr-2' onChange={(e) => { setGenerateHistory(e.target.checked); }}></Checkbox>历史表
</span>
}
key='history'
>
{ !collapse && <Preview /> }
</Tabs.TabPane>
<Tabs.TabPane tab={<Checkbox onChange={(e) => { setGenerateZipper(e.target.checked); }}>拉链表</Checkbox>} key='zipper'>
<Preview />
<Tabs.TabPane
tab={
<span>
<Checkbox className='mr-2' onChange={(e) => { setGenerateZipper(e.target.checked); }}></Checkbox>拉链表
</span>
}
key='zipper'
>
{ !collapse && <Preview /> }
</Tabs.TabPane>
</Tabs>
</div>
......
import React from "react";
import { Row, Col, Descriptions } from "antd";
import React, { useState } from "react";
import { Row, Col, Tooltip, Typography, Space, Button } from "antd";
import DataGrid from '../../VirtualTable';
import EditInherited from './EditInherited';
const FC = (props) => {
const [editInheritedParams, setEditInheritedParms] = useState({ visible: false, id: undefined });
const { visible, id } = editInheritedParams;
return (
<Row>
<Col span={12}>
<Basic />
</Col>
<Col span={12}>
<div className='flex'>
<div className='mr-3' style={{ flex: 1 }}>
<Table />
</div>
<Button type='primary' size='small' onClick={() => {
setEditInheritedParms({ visible: true, id: '643df3039e14e61e90acdfe7-1' });
}}>编辑</Button>
</div>
</Col>
<EditInherited visible={visible} id={id} onCancel={() => { setEditInheritedParms({ visible: false, id: undefined }) }} />
</Row>
)
}
......@@ -18,15 +32,135 @@ export default FC;
const Basic = () => {
return (
<Descriptions column={2}>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} ></Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>} ></Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>分区键</div>} ></Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>技术主键</div>} ></Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据类型</div>} ></Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>绑定加载范围</div>} ></Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>更新时间</div>} ></Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据情况</div>} ></Descriptions.Item>
</Descriptions>
<Row gutter={10}>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
中文名称:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
英文名称:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
分区键:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
技术主键:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
数据类型:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
绑定加载范围:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
更新时间:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
<Col className='mb-4' span={12}>
<Tooltip title=''>
<Typography.Text ellipsis={true}>
数据情况:&nbsp;<Typography.Text></Typography.Text>
</Typography.Text>
</Tooltip>
</Col>
</Row>
)
}
const Table = () => {
const cols = [
{
name: '序号',
key: 'index',
width: 60,
// resizable: true,
},
{
name: '中文名称',
key: 'cnName',
resizable: true,
formatter(props) {
return (
<Tooltip title={props.row.cnName||''}>
<Typography.Text ellipsis={true}>{props.row.cnName}</Typography.Text>
</Tooltip>
)
}
},
{
name: '英文名称',
key: 'name',
resizable: true,
formatter(props) {
return (
<Tooltip title={props.row.name||''}>
<Typography.Text ellipsis={true}>{props.row.name}</Typography.Text>
</Tooltip>
)
}
},
{
name: '类型',
key: 'datatype',
resizable: true,
formatter(props) {
if (props.row.datatype) {
let datatype = props.row.datatype;
if ((datatype.name==='Char'||datatype.name==='Varchar') && datatype.parameterValues?.length>0) {
return `${datatype.name||''}(${(datatype.parameterValues[0]?datatype.parameterValues[0]:0)})`;
} else if ((datatype.name==='Decimal'||datatype.name==='Numeric') && datatype.parameterValues?.length>1) {
return `${datatype.name||''}(${(datatype.parameterValues[0]?datatype.parameterValues[0]:0)},${(datatype.parameterValues[1]?datatype.parameterValues[1]:0)})`;
}
return datatype.name||'';
}
return '';
}
},
];
return (
<DataGrid
style={{ blockSize: 146 }}
columns={cols}
rows={Array.from({ length: 10000 }).map((_, i) => ({
name: `test${i}`,
}))}
// rows={data||[]}
headerHeight={30}
rowHeight={36}
rowClassName={(row) => {
return ''
}}
/>
)
}
\ No newline at end of file
......@@ -43,6 +43,7 @@ interface Props<Row> {
selectedRows?: Array<any>
onSelectedRowsChange?: (selectedRows: Array<any>) => void
rowHeight?: number
headerHeight?: number
rowClassName?: (row: RowData) => string
scrollRowIndex: number
}
......@@ -112,7 +113,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
expandable,
getComparator,
loadMoreRows,
onSelectedRowsChange, columns, rows, checkable, selectedRows, rowHeight = 45, rowClassName, onContextMenu, scrollRowIndex, ...rest } = props
onSelectedRowsChange, columns, rows, checkable, selectedRows, rowHeight = 45, headerHeight = 38, rowClassName, onContextMenu, scrollRowIndex, ...rest } = props
const rowKeyGetter = (row: Row): K => {
return row.id as K;
......@@ -268,7 +269,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
}}
onRowsChange={onRowsChange}
headerRowHeight={38}
headerRowHeight={headerHeight}
rowHeight={(args) => (args.type === 'ROW' && args.row.__type__ === RowType.Detail ? (expandable?.expandedRowHeight||100) : rowHeight)}
// 排序
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment