Skip to content

S
szse
Commit 7b4642b6 by zhaochengxiang
Options

模型编辑页面调整

parent 507ac4b9
Showing with 250 additions and 170 deletions
src/index.less
......@@ -111,6 +111,30 @@ div[id^='__qiankun_microapp_wrapper_'] {
word-break: break-all;
}
.yy-table-thead > tr > th {
padding: 8px 16px !important;
}
.yy-table-tbody > tr > td {
padding: 12px 16px !important;
}
.yy-table-tbody > .yy-table-measure-row > td {
padding: 0px !important;
}
.yy-table-tbody > tr.yy-table-row-selected > td {
background: #fff !important;
}
tr.yy-table-expanded-row > td {
background: #fff !important;
}
.yy-table-thead > tr > th {
background-color: #F2F5FC !important;
}
.yy-popover-content {
pointer-events: auto !important;
}
......
src/view/Manage/Model/Component/EditModel.jsx
......@@ -9,6 +9,8 @@ import { getQueryParam, showMessage } from '../../../../util';
import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, VersionId } from '../../../../util/constant';
import HistoryAndVersionDrawer from './HistoryAndVersionDrawer';
import './EditModel.less';
const EditModel = (props) => {
const [ actionData, setActionData ] = useState({ action: '', catalogId: '', modelerId: '', hints: [], roughModelerData: null, permitCheckOut: false, editable: false, stateId: '', versionId: '' });
......@@ -159,6 +161,7 @@ const EditModel = (props) => {
type='primary'
onClick={save}
loading={confirmLoading}
danger
>
保存
</Button>
......@@ -166,63 +169,53 @@ const EditModel = (props) => {
} else if (action === 'detail') {
actionsBtn = (
<Space>
<Button onClick={onHistory} >版本历史</Button>
{
(editable==='true') && <Button type='primary' onClick={edit} >
(editable==='true') && <Button type='primary' onClick={edit} danger >
编辑
</Button>
}
<Button type='primary' onClick={onHistory} danger >版本历史</Button>
</Space>
);
} else if (action === 'edit') {
actionsBtn = (
<Space>
<Button onClick={cancelEdit} >
取消
</Button>
<Button onClick={onHistory} >
版本历史
</Button>
<Button
type='primary'
onClick={save}
loading={confirmLoading}
danger
>
保存
</Button>
<Button type='primary' onClick={onHistory} danger >
版本历史
</Button>
<Button onClick={cancelEdit} >
取消
</Button>
</Space>
)
} else if (action === 'flow') {
actionsBtn = (
<Button onClick={onHistory} >
<Button type='primary' onClick={onHistory} danger>
版本历史
</Button>
);
}
return (
<div className='position-relative'>
<div
className='flex'
style={{
width: '100%',
height: 64,
padding: '0 15px',
backgroundColor: '#fff',
alignItems: 'center',
position: 'fixed',
justifyContent: 'space-between',
borderBottom: '1px solid #EFEFEF',
zIndex: 100
}}
>
<span style={{ fontSize: 16, fontWeight: 'bold', color: '#000' }}>{title}</span>
{actionsBtn}
<div className='edit-model position-relative'>
<div className='edit-header'>
<span style={{ fontSize: 16, fontWeight: 'bold', color: '#fff' }}>{title}</span>
</div>
<div className='position-absolute' style={{ top: 64, width: '100%' }}>
<div className='position-relative' style={{ margin: 15 }}>
<div className='edit-container'>
<div className='edit-container-card'>
<ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} terms={terms} roughModelerData={roughModelerData} permitCheckOut={permitCheckOut} stateId={stateId} versionId={versionId} />
</div>
</div>
</div>
<div className='edit-footer'>
{actionsBtn}
</div>
<CatalogModal
visible={catalogModalVisible}
......
src/view/Manage/Model/Component/EditModel.less 0 → 100644
.edit-model {
.edit-header {
display: flex;
width: 100%;
height: 44px;
padding: 0 15px;
background-color: #464d6e;
align-items: center;
position: fixed;
justify-content: space-between;
border-bottom: 1px solid #EFEFEF;
z-index: 100;
}
.edit-container {
top: 44px;
width: 100%;
height: calc(100vh - 44px - 64px);
overflow: auto;
background: #EDF0F5;
padding: 10px 20px;
position: absolute;
}
.edit-container-card {
padding: 20px 20px 0;
background: #fff;
}
.edit-footer {
display: flex;
bottom: 0;
width: 100%;
height: 64px;
position: fixed;
justify-content: flex-end;
opacity: 0.9;
background: #fff;
box-shadow: 0 -1px 4px 0 #e5e9ea;
padding: 0 20px;
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ImportAction.jsx
import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';
import { Spin, Tabs, Popover, Divider, Button, Space } from 'antd';
import LocalStorage from 'local-storage';
import { QuestionCircleOutlined } from '@ant-design/icons';
import ImportActionHeader from './ImportActionHeader';
import ImportActionTable from './ImportActionTable';
......@@ -9,6 +10,8 @@ import ImportActionPartition from './ImportActionPartition';
import { dispatch } from '../../../../model';
const { TabPane } = Tabs;
const ImportAction = (props) => {
const { action, hints, onChange, form, modelerId, terms, ddl, roughModelerData, stateId, versionId, permitCheckOut } = props;
......@@ -20,6 +23,7 @@ const ImportAction = (props) => {
const [ supportedDatatypes, setSupportedDatatypes ] = useState([]);
const [ supportedPartitionTypes, setSupportedPartitionTypes ] = useState([]);
const [ validateReports, setValidateReports ] = useState([]);
const [ tabKey, setTabKey ] = useState('1');
const [ loading, setLoading ] = useState(false);
useEffect(() =>{
......@@ -331,54 +335,116 @@ const ImportAction = (props) => {
return newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
}
const container = (<React.Fragment>
<ImportActionHeader
form={form}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
modelerData={modelerData||{}}
constraints={constraints}
templates={templates}
validateReports={validateReports}
onTemplateChange={onTemplateChange}
onConstraintChange={onConstraintChange}
onChange={onHeaderChange}
terms={terms}
/>
<ImportActionTable
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedDatatypes={supportedDatatypes}
onChange={onTableChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
action={action}
terms={terms}
/>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
<ImportActionPartition
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedPartitionTypes={supportedPartitionTypes}
onChange={onPartitionChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
</React.Fragment>);
const onTabChange = (key) => {
setTabKey(key);
}
const prevStep = () => {
setTabKey(`${Number(tabKey)-1}`);
}
const nextStep = () => {
setTabKey(`${Number(tabKey)+1}`);
}
return (
<Spin spinning={loading}>
{ container }
<Tabs activeKey={tabKey} onChange={onTabChange}>
<TabPane tab='基本信息' key='1'>
<ImportActionHeader
form={form}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
modelerData={modelerData||{}}
constraints={constraints}
templates={templates}
validateReports={validateReports}
onTemplateChange={onTemplateChange}
onConstraintChange={onConstraintChange}
onChange={onHeaderChange}
terms={terms}
/>
</TabPane>
<TabPane
tab={
<span>
<span>数据表结构</span>
{
(action!=='detail'&&action!=='flow'&&action!=='detail-version') && (
<Popover content='表格可以通过拖拽来排序'>
<QuestionCircleOutlined className='ml-1 pointer' />
</Popover>
)
}
</span>
}
key='2'
>
<ImportActionTable
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedDatatypes={supportedDatatypes}
onChange={onTableChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
action={action}
terms={terms}
/>
</TabPane>
<TabPane
tab={
<span>
<span>数据表索引</span>
{
(action!=='detail'&&action!=='flow'&&action!=='detail-version') && (
<Popover content='表格可以通过拖拽来排序'>
<QuestionCircleOutlined className='ml-1 pointer' />
</Popover>
)
}
</span>
}
key='3'
>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
</TabPane>
<TabPane
tab='数据表分区'
key='4'
>
<ImportActionPartition
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedPartitionTypes={supportedPartitionTypes}
onChange={onPartitionChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
</TabPane>
</Tabs>
{
action!=='detail'&&action!=='flow'&&action!=='detail-version'&&(
<React.Fragment>
<Divider style={{ margin: 0 }} />
<div className='flex' style={{ justifyContent: 'flex-end', height: 64, alignItems: 'center' }}>
<Space size='small'>
<Button type='primary' onClick={prevStep} disabled={tabKey==='1'} danger>上一步</Button>
<Button type='primary' onClick={nextStep} disabled={tabKey==='4'} danger>下一步</Button>
</Space>
</div>
</React.Fragment>
)
}
</Spin>
);
};
......
src/view/Manage/Model/Component/ImportActionHeader.jsx
......@@ -6,6 +6,7 @@ import { dispatchLatest } from '../../../../model';
import './ImportActionHeader.less';
const { TextArea } = Input;
const { Option } = Select;
const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => {
......@@ -170,7 +171,7 @@ const ImportActionHeader = (props) => {
{...formItemLayout}
onValuesChange={onValuesChange}
>
<Row gutter={10}>
<Row >
<Col span={8}>
<Form.Item
label="中文名称"
......@@ -189,21 +190,10 @@ const ImportActionHeader = (props) => {
rules={[{ required: true, message: '请输入英文名称!' }]}
>
<AutoComplete options={options} onSearch={onSearch} style={{ width: 300 }} />
{/* <Input /> */}
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="描述"
name="remark"
labelAlign="left"
rules={[{ required: true, message: '请输入描述!' }]}
>
<Input style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
<Row gutter={10}>
<Row >
<Col span={8}>
<Form.Item
label="规范"
......@@ -233,9 +223,21 @@ const ImportActionHeader = (props) => {
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
label="描述"
name="remark"
labelAlign="left"
rules={[{ required: true, message: '请输入描述!' }]}
>
<TextArea row={4} style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
</Form>
) : (
<Descriptions column={5}>
<Descriptions column={2}>
<Descriptions.Item label="中文名称">{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
<Descriptions.Item label="英文名称">
{
......
src/view/Manage/Model/Component/ImportActionHeader.less
.model-import-action-header {
.yy-form-item {
margin-bottom: 10px;
margin-bottom: 24px;
}
.yy-form-item-has-error {
margin-bottom: 0px;
}
.yy-descriptions-row > th, .yy-descriptions-row > td {
padding-bottom: 10px;
padding-bottom: 20px;
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ImportActionIndex.jsx
import React, { useState, useCallback, useRef, useEffect } from 'react';
import { Input, Form, Typography, Divider, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
import { QuestionCircleOutlined, DeleteOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
import { DeleteOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
......@@ -422,7 +422,7 @@ const ImportActionIndex = (props) => {
title: '序号',
dataIndex: 'key',
editable: false,
width: 50,
width: 60,
render: (_, __, index) => {
return (index+1).toString();
}
......@@ -640,21 +640,12 @@ const ImportActionIndex = (props) => {
}
return (
<div className='model-import-action-index mt-7'>
<Divider orientation='left'>
<>
<span>数据表索引</span>
{ editable && (
<Popover content='表格可以通过拖拽来排序'>
<QuestionCircleOutlined className='ml-1 pointer' />
</Popover>
)
<div className='model-import-action-index'>
<div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
{
editable && <Button onClick={onAddClick} disabled={ editingKey!==null || keyword!=='' } >新建</Button>
}
</>
</Divider>
<div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
<div className='d-flex' style={{ alignItems: 'center' }}>
<span className='mr-3'>索引搜索:</span>
<Input
placeholder="请输入索引名称"
allowClear
......@@ -663,11 +654,8 @@ const ImportActionIndex = (props) => {
style={{ width: 230 }}
/>
</div>
{
editable && <Button className='ml-3' type="primary" onClick={onAddClick} disabled={ editingKey!==null || keyword!=='' } >新增索引</Button>
}
</div>
<div id="containerId">
<div className='mb-3' id="containerId">
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
......
src/view/Manage/Model/Component/ImportActionPartition.jsx
import React, { useState, useEffect } from 'react';
import { Form, Typography, Divider, Button, Select, Row, Col, Tooltip, Table } from 'antd';
import { Form, Typography, Button, Select, Row, Col, Tooltip, Table } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { showMessage, highlightSearchContentByTerms } from '../../../../util';
......@@ -289,7 +289,7 @@ const ImportActionPartition = (props) => {
title: '序号',
dataIndex: 'key',
editable: false,
width: 50,
width: 60,
render: (_, __, index) => {
return (index+1).toString();
}
......@@ -393,18 +393,13 @@ const ImportActionPartition = (props) => {
}
return (
<div className='model-import-action-index mt-7'>
<Divider orientation='left'>
<>
<span>数据表分区</span>
</>
</Divider>
<div className='model-import-action-index'>
{
editable && <div className='d-flex mb-3' style={{ justifyContent: 'flex-end' }}>
<Button type="primary" onClick={onAddClick} disabled={ data||isEditing } >新增分区</Button>
editable && <div className='d-flex mb-3'>
<Button onClick={onAddClick} disabled={ data||isEditing } >新建</Button>
</div>
}
<div id="containerId">
<div className='mb-3' id="containerId">
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
components={{
......
src/view/Manage/Model/Component/ImportActionTable.jsx
import React, { useState, useCallback, useRef, useEffect } from 'react';
import { Input, Form, Typography, Radio, Divider, Button, Popconfirm, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
import { QuestionCircleOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons';
import { Input, Form, Typography, Radio, Button, Popconfirm, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
......@@ -489,7 +489,7 @@ const ImportActionTable = (props) => {
title: '序号',
dataIndex: 'key',
editable: false,
width: 50,
width: 60,
fixed: 'left',
render: (text, record, index) => {
return (index+1).toString();
......@@ -553,7 +553,7 @@ const ImportActionTable = (props) => {
},
{
title: '可否为空',
width: 80,
width: 100,
dataIndex: 'nullable',
editable: (type==='model'?true:false),
render: (nullable, record, index) => {
......@@ -610,7 +610,7 @@ const ImportActionTable = (props) => {
},
{
title: '重点关注',
width: 80,
width: 100,
dataIndex: 'needAttention',
editable: (type==='model'?true:false),
render: (needAttention, record, index) => {
......@@ -914,20 +914,11 @@ const ImportActionTable = (props) => {
return (
<div className='model-import-action-table'>
<Divider orientation='left'>
<>
<span>数据表结构</span>
{ editable && (
<Popover content='表格可以通过拖拽来排序'>
<QuestionCircleOutlined className='ml-1 pointer' />
</Popover>
)
<div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
{
editable && <Button onClick={onAddClick} disabled={ editingKey!=='' || keyword!=='' } >新建</Button>
}
</>
</Divider>
<div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
<div className='d-flex' style={{ alignItems: 'center' }}>
<span className='mr-3'>字段搜索:</span>
<Input
placeholder="请输入中文名称或者英文名称"
allowClear
......@@ -936,11 +927,8 @@ const ImportActionTable = (props) => {
style={{ width: 230 }}
/>
</div>
{
editable && <Button className='ml-3' type="primary" onClick={onAddClick} disabled={ editingKey!=='' || keyword!=='' } >新增字段</Button>
}
</div>
<div id="containerId">
<div className='mb-3' id="containerId">
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
......
src/view/Manage/Model/Component/ModelTable.jsx
......@@ -146,7 +146,7 @@ const ModelTable = (props) => {
<div style={{ margin: '0 5px' }}>
<Divider type='vertical' />
</div>
<Dropdown overlay={moreMenu(record)} placement="bottomLeft">
<Dropdown overlay={moreMenu(record)} trigger={['click']} placement="bottomLeft">
<Button
type='link'
size='small'
......
src/view/Manage/Model/Component/ModelTable.less
......@@ -5,30 +5,6 @@
overflow: auto !important;
}
.yy-table-thead > tr > th {
padding: 8px 16px !important;
}
.yy-table-tbody > tr > td {
padding: 12px 16px !important;
}
.yy-table-tbody > .yy-table-measure-row > td {
padding: 0px !important;
}
.yy-table-tbody > tr.yy-table-row-selected > td {
background: #fff !important;
}
tr.yy-table-expanded-row > td {
background: #fff !important;
}
.yy-table-thead > tr > th {
background-color: #F2F5FC !important;
}
.yy-pro-table {
.yy-card-body {
padding: 0 !important;
......
src/view/Manage/Model/index.jsx
......@@ -473,7 +473,7 @@ class Model extends React.Component {
</Tooltip>
</Space>
<Space>
<Dropdown overlay={moreMenu} placement="bottomLeft">
<Dropdown overlay={moreMenu} trigger={['click']} placement="bottomLeft">
<Button>更多<DownOutlined /></Button>
</Dropdown>
</Space>
......
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