You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
11 KiB
237 lines
11 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Modal, Input, Form, Tabs, Avatar, Checkbox, Button, Select } from 'antd';
|
|
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
|
|
const { TabPane } = Tabs;
|
|
const { TextArea } = Input;
|
|
const CheckboxGroup = Checkbox.Group;
|
|
const ReleaseModal = ({ actions, dispatch, onConfirm, onCancel, editData = {} }) => {
|
|
|
|
const { metadataManagement } = actions;
|
|
const [activeKey, setActiveKeyl] = useState("field")
|
|
const [fieldList, setFiedList] = useState([])
|
|
const [fieldData, setFiedData] = useState([])
|
|
const [database, setDatabase] = useState({})
|
|
const [fieldValue, setFiedValue] = useState([])
|
|
const [indeterminate, setIndeterminate] = useState(false)
|
|
const [fromData, setFromData] = useState([{ value1: '', value2: '', value3: '' }])
|
|
const [sql, setSql] = useState()
|
|
const [form] = Form.useForm();
|
|
useEffect(() => {
|
|
|
|
dispatch(metadataManagement.listStructuredData({ id: editData?.id, parent: editData?.parent })).then(res => {
|
|
if (res.success) {
|
|
setFiedData(res.payload.data?.field || [])
|
|
setFiedList(res.payload.data?.field?.map(v => v.code) || [])
|
|
setDatabase(res.payload.data?.database || {})
|
|
}
|
|
|
|
})
|
|
}, []);
|
|
|
|
|
|
|
|
let operator = [{ value: '=', label: '=' },
|
|
{ value: '!=', label: '!=' },
|
|
{ value: '>', label: '>' },
|
|
{ value: '<', label: '<' },
|
|
{ value: '>=', label: '>=' },
|
|
{ value: '<=', label: '<=' },
|
|
{ value: 'BETWEEN', label: 'BETWEEN' },
|
|
{ value: 'LIKE', label: 'LIKE' },
|
|
{ value: 'IN', label: 'IN' }]
|
|
|
|
return (
|
|
<Modal title={'发布REST服务'} open={true} destroyOnClose
|
|
width={800}
|
|
// onOk={() => handleOk(null)}
|
|
onCancel={onCancel}
|
|
footer={null}
|
|
>
|
|
<div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
|
|
{[{ name: '选择字段', key: "field" },
|
|
{ name: '配置条件', key: "condition" },
|
|
{ name: '预览SQL', key: "SQL" },
|
|
{ name: '服务发布', key: "release" }].map((v, index) => {
|
|
let title = []
|
|
if (index > 0) {
|
|
title.push(<div style={{ width: '14%', border: '1px solid #0000004a' }}></div>)
|
|
}
|
|
title.push(<div style={{ width: '14%', color: activeKey == v.key ? '#1e6ee5' : "", }}>
|
|
<Avatar style={{
|
|
backgroundColor: activeKey == v.key ? "rgb(30 110 229 / 74%)" : 'rgb(200 192 185)'
|
|
}}
|
|
size="large" icon={index + 1} />
|
|
{v.name}
|
|
</div>)
|
|
return title
|
|
})}
|
|
</div>
|
|
<Tabs activeKey={activeKey} onChange={v => {
|
|
setActiveKeyl(v)
|
|
}} >
|
|
|
|
|
|
<TabPane key="field">
|
|
<div style={{ fontSize: 20, fontWeight: 600 }}>选择字段</div>
|
|
{/* <div style={{ marginLeft: 20 }}> */}
|
|
<Checkbox indeterminate={indeterminate} style={{ margin: '20px 40px' }} onChange={e => {
|
|
setFiedValue(e.target.checked ? fieldList : []);
|
|
setIndeterminate(e.target.checked);
|
|
}}>
|
|
全选
|
|
</Checkbox>
|
|
<div style={{ display: 'flex', marginLeft: 40 }}>
|
|
<div style={{ marginRight: 8 }}>字段:</div>
|
|
<CheckboxGroup options={fieldList} value={fieldValue} onChange={v => {
|
|
setFiedValue(v)
|
|
if (v?.length == fieldList?.length) {
|
|
setIndeterminate(true)
|
|
} else {
|
|
setIndeterminate(false)
|
|
}
|
|
}} />
|
|
</div>
|
|
</TabPane>
|
|
|
|
|
|
<TabPane key="condition">
|
|
<div style={{ fontSize: 20, margin: '20px 0', fontWeight: 600 }}>配置条件：</div>
|
|
{fromData?.map((f, index) => {
|
|
return <div key={'key' + index} style={{ display: 'flex', marginBottom: 16 }}>
|
|
<Select
|
|
style={{ width: 200, marginRight: 10 }} value={f.value1 || null}
|
|
placeholder="请选择字段"
|
|
onChange={v => {
|
|
fromData?.splice(index, 1, { value1: v, value2: f.value2, value3: f.value3 })
|
|
setFromData([...fromData])
|
|
}}
|
|
options={fieldValue?.map(d => ({ value: d, label: d })) || []}
|
|
allowClear
|
|
/>
|
|
<Select
|
|
style={{ width: 200, marginRight: 10 }} value={f.value2 || null}
|
|
placeholder="请选择条件"
|
|
onChange={v => {
|
|
fromData?.splice(index, 1, { value1: f.value1, value2: v, value3: f.value3 })
|
|
setFromData([...fromData])
|
|
}}
|
|
options={operator}
|
|
allowClear
|
|
/>
|
|
<Input
|
|
style={{ width: 200, marginRight: 10 }} value={f.value3}
|
|
placeholder="请输入值"
|
|
onChange={v => {
|
|
fromData?.splice(index, 1, { value1: f.value1, value2: f.value2, value3: v?.target?.value })
|
|
setFromData([...fromData])
|
|
}}
|
|
allowClear
|
|
/>
|
|
{index == 0 ?
|
|
<PlusCircleOutlined style={{ fontSize: 20, marginTop: 6 }} onClick={() => {
|
|
fromData?.splice(index, 0, { value1: '', value2: '', value3: '' })
|
|
setFromData([...fromData])
|
|
}} />
|
|
: <MinusCircleOutlined style={{ fontSize: 20, marginTop: 6 }} onClick={() => {
|
|
fromData?.splice(index, 1)
|
|
setFromData([...fromData])
|
|
}} />
|
|
}
|
|
</div>
|
|
})}
|
|
</TabPane>
|
|
|
|
<TabPane key="SQL">
|
|
<div style={{ fontSize: 20, marginBottom: 20, fontWeight: 600, display: 'flex', justifyContent: 'space-between' }}>预览SQL：<Button onClick={() => {
|
|
|
|
console.log(editData);
|
|
console.log(database);
|
|
console.log(fromData);
|
|
let whereOption = []
|
|
fromData.map(s => {
|
|
whereOption.push(`${editData?.code}.${s.value1} ${s.value2} ${s.value3}`);
|
|
})
|
|
|
|
let sqlData = `SELECT * FROM ${editData?.code} ${fromData.length ? 'WHERE ' + whereOption.join(' AND ') : ''}`
|
|
|
|
setSql(sqlData)
|
|
}}>生成SQL</Button></div>
|
|
<TextArea value={sql} autoSize={{ minRows: 5 }} disabled={true} />
|
|
|
|
|
|
</TabPane>
|
|
<TabPane key="release">
|
|
<div style={{ fontSize: 20, marginBottom: 10, fontWeight: 600 }}>服务发布：</div>
|
|
<div style={{ display: 'flex' }}>接口名称：<Input style={{ width: 180 }} placeholder='请输入' /></div>
|
|
<div style={{ display: 'flex', margin: '10px 0 10px 30px' }}>URL： <Select
|
|
style={{ width: 200, marginRight: 10 }}
|
|
onChange={v => {
|
|
|
|
}}
|
|
defaultValue={"GET"}
|
|
options={[{ value: "GET", label: "GET" },
|
|
{ value: "POST", label: "POST" },
|
|
{ value: "PUT", label: "PUT" },
|
|
{ value: "DEL", label: "DEL" },]}
|
|
allowClear
|
|
/>
|
|
<Input style={{ width: 180, marginLeft: 20 }} placeholder='请输入' />
|
|
</div>
|
|
<div style={{ display: 'flex', marginLeft: 20 }}>返回值：
|
|
<div style={{ display: 'flex', width: 310, flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>名称</div>
|
|
<div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>意义</div>
|
|
<div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>说明</div>
|
|
</div>
|
|
{fieldData?.map((s, index) => {
|
|
return <div key={'fieldData' + index} style={{ display: 'flex' }}>
|
|
<div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>{s.code}</div>
|
|
<div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>{s.name}</div>
|
|
<div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>{s.type}</div>
|
|
</div>
|
|
})}
|
|
</div>
|
|
</div>
|
|
</TabPane>
|
|
</Tabs >
|
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}>
|
|
{activeKey == 'condition' || activeKey == 'SQL' || activeKey == 'release' ? <Button type="primary" onClick={() => {
|
|
if (activeKey == 'condition') {
|
|
setActiveKeyl('field')
|
|
} else if (activeKey == 'SQL') {
|
|
setActiveKeyl('condition')
|
|
} else if (activeKey == 'release') {
|
|
setActiveKeyl('SQL')
|
|
}
|
|
}}>上一步</Button> : ""}
|
|
{activeKey == 'condition' || activeKey == 'SQL' || activeKey == 'field' ? <Button style={{ marginLeft: 10 }} type="primary" onClick={() => {
|
|
if (activeKey == 'field') {
|
|
setActiveKeyl('condition')
|
|
} else if (activeKey == 'condition') {
|
|
setActiveKeyl('SQL')
|
|
} else if (activeKey == 'SQL') {
|
|
setActiveKeyl('release')
|
|
}
|
|
}}>下一步</Button> : ""}
|
|
{activeKey == 'release' ? <Button type="primary" style={{ marginLeft: 10 }} onClick={() => {
|
|
|
|
}}>完成 </Button> : ""}
|
|
<Button style={{ marginLeft: 10 }} onClick={() => onCancel()}>取消</Button>
|
|
</div>
|
|
|
|
</Modal >
|
|
)
|
|
}
|
|
function mapStateToProps (state) {
|
|
const { global, auth, } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
clientHeight: global.clientHeight,
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(ReleaseModal)
|