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

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

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

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

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

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

@ -9,14 +9,24 @@ import {
import '../../style.less';
function StepOne(props) {
const { next, stepOneValues, stepOneValuesFinish } = props;
const { next, stepOneValues, stepOneValuesFinish, readOnly, dataSources, stepOneInitValue } = props;
const formRef = React.createRef();
const initialValues = stepOneValues ? stepOneValues : {
adapter: 'PostgreSQL采集适配器',
version: '9.x',
adapterName: 'PostgreSQL采集适配器',
adapterVersion: '9.x',
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 } };
return <>
<ProForm
@ -43,8 +53,10 @@ function StepOne(props) {
>
<ProFormText
rules={[{ required: true, message: '请输入数据源名称' },
rules={[
{ required: true, message: '请输入数据源名称' },
{ max: 255, message: '数据源名称长度不能大于255个字符' },
{ validator: checkName }
]}
name="name"
label="数据源名称"
@ -55,9 +67,9 @@ function StepOne(props) {
options={[
{ label: 'PostgreSQL采集适配器', value: 'PostgreSQL采集适配器' },
]}
name="adapter"
name="adapterName"
label="适配器"
disabled={true}
disabled={readOnly}
/>
<ProFormSelect
@ -65,9 +77,9 @@ function StepOne(props) {
options={[
{ label: '9.x', value: '9.x' },
]}
name="version"
name="adapterVersion"
label="工具版本"
disabled={true}
disabled={readOnly}
/>
<ProFormSelect
rules={[{ required: true, message: '请选择' }]}
@ -76,16 +88,16 @@ function StepOne(props) {
]}
name="mode"
label="采集模式"
disabled={true}
disabled={readOnly}
/>
<ProFormSelect
rules={[{ required: true, message: '请选择输入控件' }]}
options={[
{ label: '库表/目录1', value: '库表/目录1' },
{ label: '库表/目录1', value: 1 },
]}
name="source"
name="mountPath"
label="数据源挂载路径"
disabled={true}
// disabled={true}
/>
<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';
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 [connect, setConnet] = useState('')
const [loading, setLoading] = useState(false);
useEffect(() => {
setParams(stepTwoValues)
stepTwoValues && setParams(stepTwoValues)
}, [])
const dataSource = [
{
param: 'host',
@ -67,6 +68,7 @@ function StepTwo(props) {
key: 'value',
render: (text, record) => {
return <Input
type={text == "password" ? "password" : ''}
defaultValue={stepTwoValues ? stepTwoValues[text] : ''}
onChange={(e) => {
const obj = {};
@ -114,13 +116,13 @@ function StepTwo(props) {
<div className='step-footer'>
<Button style={{ margin: '0 8px', }} onClick={() => prev()}>上一步</Button>
<Button type="primary" onClick={() => {
<Button disabled={connect !== '连接成功'} type="primary" onClick={() => {
if (checkNext() === true) {
stepTwoValuesFinish(params)
next()
}
}}>
下一步
{stepProps > 2 ? '下一步' : '保存'}
</Button>
</div>
</Spin>

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

@ -35,7 +35,7 @@ const LatestMetadata = (props) => {
const onFinish = (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) {
dispatch(actions.metadataAcquisition.addDataSource({
name: stepOneValues?.name,

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

@ -86,7 +86,12 @@ function DataSourceManagement(props) {
valueType: 'option',
render: (text, record) => {
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(
<Popconfirm
key="del"
@ -107,9 +112,9 @@ function DataSourceManagement(props) {
const onFinish = (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) {
dispatch(actions.metadataAcquisition.addDataSource({
const dataToSave = {
name: stepOneValues?.name,
audited: true,
adapter: adapterInfo?.id,
@ -117,10 +122,18 @@ function DataSourceManagement(props) {
description: stepOneValues?.description,
config: stepTwoValues,
time: moment()
})).then(res => {
}
if (editData) {
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) => {
let filter = models?.find(s => s?.attributeName == value)
let filter = models?.find(s => s?.attributeName == value && value !== editData?.attributeName)
if (filter) {
return Promise.reject(new Error('已存该属性名称!'));
}
@ -24,7 +24,7 @@ export default (props) => {
}
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) {
return Promise.reject(new Error('已存该属性代码!'));
}

Loading…
Cancel
Save