8 changed files with 1495 additions and 1182 deletions
@ -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