8 changed files with 1495 additions and 1182 deletions
File diff suppressed because it is too large
@ -0,0 +1,237 @@ |
|||
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: 250, flexDirection: 'column', alignItems: 'center' }}> |
|||
<div key={'fieldData' + index} style={{ display: 'flex' }}> |
|||
<div style={{ width: 80, border: '1px solid #dcc' }}>名称</div> |
|||
<div style={{ width: 80, border: '1px solid #dcc' }}>意义</div> |
|||
<div style={{ width: 80, border: '1px solid #dcc' }}>说明</div> |
|||
</div> |
|||
{fieldData?.map((s, index) => { |
|||
return <div key={'fieldData' + index} style={{ display: 'flex' }}> |
|||
<div style={{ width: 80, border: '1px solid #dcc' }}>{s.code}</div> |
|||
<div style={{ width: 80, border: '1px solid #dcc' }}>{s.name}</div> |
|||
<div style={{ width: 80, border: '1px solid #dcc' }}>{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) |
|||
Loading…
Reference in new issue