Browse Source

(*)编辑数据源提交

master
peng.peng 2 years ago
parent
commit
87eb35195f
  1. 20
      web/client/src/sections/metadataAcquisition/components/adapterStep.js
  2. 6
      web/client/src/sections/metadataAcquisition/components/dataSourceManagementModal.js
  3. 4
      web/client/src/sections/metadataAcquisition/components/steps/index.js
  4. 42
      web/client/src/sections/metadataAcquisition/components/steps/postgre/stepOne.js
  5. 10
      web/client/src/sections/metadataAcquisition/components/steps/postgre/stepTwo.js
  6. 2
      web/client/src/sections/metadataAcquisition/containers/adapter.js
  7. 27
      web/client/src/sections/metadataAcquisition/containers/dataSourceManagement.js
  8. 4
      web/client/src/sections/metadataManagement/components/modelModal.js

20
web/client/src/sections/metadataAcquisition/components/adapterStep.js

@ -7,15 +7,18 @@ const AdapterStep = (props) => {
const { const {
type = 'postgre', type = 'postgre',
stepProps = 3,//步骤配置 适配器显示3步 数据源显示2步 stepProps = 3,//步骤配置 适配器显示3步 数据源显示2步
currentChange currentChange,
editData,
stepOneInitValue,
stepTwoInitValue
} = props; } = props;
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const [stepOneValues, setStepOneValues] = useState(); const [stepOneValues, setStepOneValues] = useState(editData ? stepOneInitValue : null);
const [stepTwoValues, setStepTwoValues] = useState({}); const [stepTwoValues, setStepTwoValues] = useState(editData ? stepTwoInitValue : null);
const { StepOne, StepTwo, StepThree } = STEP_CONFIG[type]; //记录第一页表单数据用于切换步骤时展示上一次填写的值 const { StepOne, StepTwo, StepThree } = STEP_CONFIG[type]; //记录第一页表单数据用于切换步骤时展示上一次填写的值
useEffect(() => { useEffect(() => {
currentChange(current) currentChange && currentChange(current)
}, [current]); }, [current]);
const next = () => { const next = () => {
@ -35,19 +38,20 @@ const AdapterStep = (props) => {
const stepOneValuesFinish = (values) => { const stepOneValuesFinish = (values) => {
setStepOneValues(values) setStepOneValues(values)
} }
const stepTwoValuesFinish = (values) => { const stepTwoValuesFinish = (values) => {
stepProps == 2 ? onFinish() : setStepTwoValues(values) setStepTwoValues(values)
if (stepProps == 2) onFinish()
} }
const steps = [ const steps = [
{ {
title: '配置数据源基本信息', title: '配置数据源基本信息',
content: <StepOne stepOneValues={stepOneValues} stepOneValuesFinish={stepOneValuesFinish} next={next} />, content: <StepOne {...props} editData={editData} readOnly={stepProps == 3 || editData} stepOneValues={stepOneValues} stepOneValuesFinish={stepOneValuesFinish} next={next} />,
}, },
{ {
title: '数据源参数配置', title: '数据源参数配置',
content: <StepTwo stepTwoValues={stepTwoValues} prev={prev} next={next} stepTwoValuesFinish={stepTwoValuesFinish} {...props} />, content: <StepTwo {...props} stepProps={stepProps} editData={editData} stepTwoValues={stepTwoValues} prev={prev} next={next} stepTwoValuesFinish={stepTwoValuesFinish} />,
}, },
{ {
title: '配置计划任务', title: '配置计划任务',

6
web/client/src/sections/metadataAcquisition/components/dataSourceManagementModal.js

@ -4,7 +4,7 @@ import AdapterStep from './adapterStep';
import { BellOutlined } from '@ant-design/icons' import { BellOutlined } from '@ant-design/icons'
function DataSourceModal(props) { function DataSourceModal(props) {
const { visible, editData, onFinish, onCancel } = props; const { visible, editData, onFinish, onCancel, adapterInfo } = props;
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
// const onFinish = () => { } // const onFinish = () => { }
return <> return <>
@ -16,12 +16,14 @@ function DataSourceModal(props) {
width={1200} width={1200}
destroyOnClose={true} destroyOnClose={true}
> >
<div style={{ fontSize: 17 }}><BellOutlined />数据源基本信息</div> <div style={{ fontSize: 17 }}><BellOutlined style={{ marginRight: 15 }} />{current == 0 ? '数据源基本信息' : '数据源参数配置'}</div>
<AdapterStep <AdapterStep
type={'postgre'} //当前卡片的key (目前只有postgre,支持后续扩展) type={'postgre'} //当前卡片的key (目前只有postgre,支持后续扩展)
onFinish={onFinish} onFinish={onFinish}
stepProps={2} stepProps={2}
currentChange={c => { setCurrent(c) }} currentChange={c => { setCurrent(c) }}
stepOneInitValue={{ ...editData, ...editData?.adapterInfo }}
stepTwoInitValue={{ ...editData?.config }}
{...props} {...props}
/> />
</Modal> </Modal>

4
web/client/src/sections/metadataAcquisition/components/steps/index.js

@ -1,9 +1,9 @@
import * as postgre from './postgre/index'; import * as postgre from './postgre/index';
// 配置适配器步骤 目前只有potgres配置类型,后续支持扩展 目前其他类型配置步骤不确定
export const STEP_CONFIG = { export const STEP_CONFIG = {
'postgre': { 'postgre': {
StepOne: postgre.stepOne, StepOne: postgre.stepOne,
StepTwo: postgre.stepTwo, StepTwo: postgre.stepTwo,
StepThree: postgre.stepThree StepThree: postgre.stepThree
} },
} }

42
web/client/src/sections/metadataAcquisition/components/steps/postgre/stepOne.js

@ -9,14 +9,24 @@ import {
import '../../style.less'; import '../../style.less';
function StepOne(props) { function StepOne(props) {
const { next, stepOneValues, stepOneValuesFinish } = props; const { next, stepOneValues, stepOneValuesFinish, readOnly, dataSources, stepOneInitValue } = props;
const formRef = React.createRef(); const formRef = React.createRef();
const initialValues = stepOneValues ? stepOneValues : { const initialValues = stepOneValues ? stepOneValues : {
adapter: 'PostgreSQL采集适配器', adapterName: 'PostgreSQL采集适配器',
version: '9.x', adapterVersion: '9.x',
mode: '数据库连接', mode: '数据库连接',
source: '库表/目录1', mountPath: 1,
} }
const checkName = async (rule, value) => {
let filter = dataSources?.rows?.find(s => s?.name == value && value !== stepOneInitValue?.name)
if (filter) {
return Promise.reject(new Error('已存该数据源名称!'));
}
return Promise.resolve();
}
const formItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 10 } }; const formItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 10 } };
return <> return <>
<ProForm <ProForm
@ -41,10 +51,12 @@ function StepOne(props) {
}, },
}} }}
> >
<ProFormText <ProFormText
rules={[{ required: true, message: '请输入数据源名称' }, rules={[
{ max: 255, message: '数据源名称长度不能大于255个字符' }, { required: true, message: '请输入数据源名称' },
{ max: 255, message: '数据源名称长度不能大于255个字符' },
{ validator: checkName }
]} ]}
name="name" name="name"
label="数据源名称" label="数据源名称"
@ -55,9 +67,9 @@ function StepOne(props) {
options={[ options={[
{ label: 'PostgreSQL采集适配器', value: 'PostgreSQL采集适配器' }, { label: 'PostgreSQL采集适配器', value: 'PostgreSQL采集适配器' },
]} ]}
name="adapter" name="adapterName"
label="适配器" label="适配器"
disabled={true} disabled={readOnly}
/> />
<ProFormSelect <ProFormSelect
@ -65,9 +77,9 @@ function StepOne(props) {
options={[ options={[
{ label: '9.x', value: '9.x' }, { label: '9.x', value: '9.x' },
]} ]}
name="version" name="adapterVersion"
label="工具版本" label="工具版本"
disabled={true} disabled={readOnly}
/> />
<ProFormSelect <ProFormSelect
rules={[{ required: true, message: '请选择' }]} rules={[{ required: true, message: '请选择' }]}
@ -76,16 +88,16 @@ function StepOne(props) {
]} ]}
name="mode" name="mode"
label="采集模式" label="采集模式"
disabled={true} disabled={readOnly}
/> />
<ProFormSelect <ProFormSelect
rules={[{ required: true, message: '请选择输入控件' }]} rules={[{ required: true, message: '请选择输入控件' }]}
options={[ options={[
{ label: '库表/目录1', value: '库表/目录1' }, { label: '库表/目录1', value: 1 },
]} ]}
name="source" name="mountPath"
label="数据源挂载路径" label="数据源挂载路径"
disabled={true} // disabled={true}
/> />
<ProFormTextArea <ProFormTextArea

10
web/client/src/sections/metadataAcquisition/components/steps/postgre/stepTwo.js

@ -4,13 +4,14 @@ import '../../style.less';
import { Func, useMockRequest, useFsRequest, ApiTable } from '$utils'; import { Func, useMockRequest, useFsRequest, ApiTable } from '$utils';
function StepTwo(props) { function StepTwo(props) {
const { prev, next, dispatch, actions, stepTwoValues, stepTwoValuesFinish } = props; const { prev, next, dispatch, actions, stepTwoValues, stepTwoValuesFinish, stepProps } = props;
const [params, setParams] = useState({}) const [params, setParams] = useState({})
const [connect, setConnet] = useState('') const [connect, setConnet] = useState('')
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
useEffect(() => { useEffect(() => {
setParams(stepTwoValues) stepTwoValues && setParams(stepTwoValues)
}, []) }, [])
const dataSource = [ const dataSource = [
{ {
param: 'host', param: 'host',
@ -67,6 +68,7 @@ function StepTwo(props) {
key: 'value', key: 'value',
render: (text, record) => { render: (text, record) => {
return <Input return <Input
type={text == "password" ? "password" : ''}
defaultValue={stepTwoValues ? stepTwoValues[text] : ''} defaultValue={stepTwoValues ? stepTwoValues[text] : ''}
onChange={(e) => { onChange={(e) => {
const obj = {}; const obj = {};
@ -114,13 +116,13 @@ function StepTwo(props) {
<div className='step-footer'> <div className='step-footer'>
<Button style={{ margin: '0 8px', }} onClick={() => prev()}>上一步</Button> <Button style={{ margin: '0 8px', }} onClick={() => prev()}>上一步</Button>
<Button type="primary" onClick={() => { <Button disabled={connect !== '连接成功'} type="primary" onClick={() => {
if (checkNext() === true) { if (checkNext() === true) {
stepTwoValuesFinish(params) stepTwoValuesFinish(params)
next() next()
} }
}}> }}>
下一步 {stepProps > 2 ? '下一步' : '保存'}
</Button> </Button>
</div> </div>
</Spin> </Spin>

2
web/client/src/sections/metadataAcquisition/containers/adapter.js

@ -35,7 +35,7 @@ const LatestMetadata = (props) => {
const onFinish = (values) => { const onFinish = (values) => {
const { stepOneValues, stepTwoValues } = values; const { stepOneValues, stepTwoValues } = values;
const adapterInfo = adapters?.find(x => x.adapterName == x.name == stepOneValues?.adapter) const adapterInfo = adapters?.find(x => x.adapterName == stepOneValues?.adapterName)
if (adapterInfo) { if (adapterInfo) {
dispatch(actions.metadataAcquisition.addDataSource({ dispatch(actions.metadataAcquisition.addDataSource({
name: stepOneValues?.name, name: stepOneValues?.name,

27
web/client/src/sections/metadataAcquisition/containers/dataSourceManagement.js

@ -86,7 +86,12 @@ function DataSourceManagement(props) {
valueType: 'option', valueType: 'option',
render: (text, record) => { render: (text, record) => {
const options = []; const options = [];
options.push(<a style={{ marginRight: 8 }}>编辑</a>) options.push(<a onClick={() => {
const adapterInfo = adapters?.find(x => x.id == record?.adapter)
setVisible(true)
record.adapterInfo = adapterInfo
setEditData(record)
}} style={{ marginRight: 8 }}>编辑</a>)
options.push( options.push(
<Popconfirm <Popconfirm
key="del" key="del"
@ -107,9 +112,9 @@ function DataSourceManagement(props) {
const onFinish = (values) => { const onFinish = (values) => {
const { stepOneValues, stepTwoValues } = values; const { stepOneValues, stepTwoValues } = values;
const adapterInfo = adapters?.find(x => x.adapterName == stepOneValues?.adapter) const adapterInfo = adapters?.find(x => x.adapterName == stepOneValues?.adapterName)
if (adapterInfo) { if (adapterInfo) {
dispatch(actions.metadataAcquisition.addDataSource({ const dataToSave = {
name: stepOneValues?.name, name: stepOneValues?.name,
audited: true, audited: true,
adapter: adapterInfo?.id, adapter: adapterInfo?.id,
@ -117,10 +122,18 @@ function DataSourceManagement(props) {
description: stepOneValues?.description, description: stepOneValues?.description,
config: stepTwoValues, config: stepTwoValues,
time: moment() time: moment()
})).then(res => { }
setVisible(false) if (editData) {
queryData(); dispatch(actions.metadataAcquisition.modifyDataSource(editData?.id, dataToSave)).then(res => {
}) setVisible(false)
queryData();
})
} else {
dispatch(actions.metadataAcquisition.addDataSource(dataToSave)).then(res => {
setVisible(false)
queryData();
})
}
} }
} }

4
web/client/src/sections/metadataManagement/components/modelModal.js

@ -16,7 +16,7 @@ export default (props) => {
} : {}; } : {};
const checkName = async (rule, value) => { const checkName = async (rule, value) => {
let filter = models?.find(s => s?.attributeName == value) let filter = models?.find(s => s?.attributeName == value && value !== editData?.attributeName)
if (filter) { if (filter) {
return Promise.reject(new Error('已存该属性名称!')); return Promise.reject(new Error('已存该属性名称!'));
} }
@ -24,7 +24,7 @@ export default (props) => {
} }
const checkCode = async (rule, value) => { const checkCode = async (rule, value) => {
let filter = models?.find(s => s?.attributeCode == value) let filter = models?.find(s => s?.attributeCode == value && value !== editData?.attributeCode)
if (filter) { if (filter) {
return Promise.reject(new Error('已存该属性代码!')); return Promise.reject(new Error('已存该属性代码!'));
} }

Loading…
Cancel
Save