测试阶段模态框 - 配置应用信息和 SQL
import { Modal, Form, Table, Typography, Button } from 'antd'; import React, { useEffect, useState } from 'react'; import SqlTable from '../testConfig/SqlTable'; import { largeVersionV1LargeDeployList } from '@/services/fortest'; import { APPACTION_STATUS } from '@/constant/const'; import { largeVersionV1LargeDeploy } from '@/services/large-versionV1'; const { Title } = Typography;
const TestingStageModal = (props) => { const { children, stageData, test, largeVersionId } = props; const [visible, setVisible] = useState(false); const [form] = Form.useForm(); const [selectesRowkey, setSelectedRowKeys] = useState([]); const [datas, setDatas] = useState([]); const [dbConfigInfosData, setDbConfigInfosData] = useState([]); const [selectTestRows, setSelectTestRows] = useState([]); const [sqlRows, setSqlRows] = useState([]); const handleSelect = (selectedRowKeys, selectedRows) => { console.log(selectedRowKeys, 202020, selectedRows); setSelectedRowKeys(selectedRowKeys); setSelectTestRows(selectedRows); }; useEffect(() => { if (visible && stageData) { largeDeployList();//应用信息列表 }
}, [visible, stageData]);
const largeDeployList = async () => { const { data } = await largeVersionV1LargeDeployList({ largeVersionId: largeVersionId, env: 'test', projectId: stageData.projectId }); const applicationInfosData = data[0]?.largeVersionDeployConfigVO?.applicationInfos || []; setDatas(applicationInfosData); setDbConfigInfosData(data[0]?.largeVersionDeployConfigVO?.dbConfigInfos); } const handleUpdate = async () => { const params = { largeVersionId: largeVersionId, env: 'test', projectId: stageData.projectId, largeVersionDeployConfigVO: { largeVersionId: largeVersionId, env: 'test', projectId: stageData.projectId, projectName: stageData.projectName, applicationInfos: selectTestRows, dbConfigInfos: sqlRows, }, };
// const data = await largeVersionV1LargeDeploy(params);
console.log(params, 5444);
}; const columns = [ { title: '全选', dataIndex: 'name' }, { title: '部署顺序', dataIndex: 'deployOrder' }, { title: '制品镜像id', dataIndex: 'imageId' }, { title: '应用id', dataIndex: 'appId' }, { title: '部署状态', dataIndex: 'deployStatus', width: 160, fixed: 'right' }, // render: (_, record) => { return ({APPACTION_STATUS[record.deployStatus]}) } ]; return ( <> {React.cloneElement(children, { onClick: () => { setVisible(true); }, })} <Modal title={test === 'arrange' ? '部署' : '详情'} open={visible} width={800} layout="horizontal" onOk={handleUpdate} onCancel={() => setVisible(false)} maskClosable={false} footer=[ <> <Button onClick={() => setVisible(false)}>取消 <Button type='primary' onClick={handleUpdate} disabled={test === 'details'}>确定 </> ] > {/*
{/* </Form> */} </Modal>
</>
); }; export default TestingStageModal; import React, { useEffect, useState } from 'react'; import { Table, Typography } from 'antd'; import { SQL_STATUS } from '@/constant/const'; import { logDate } from 'utility'; const { Title } = Typography;
const SqlTable = (props) => { const { dbConfigInfosData, onSelectRowsChange } = props; const [selectesRowkey, setSelectedRowKeys] = useState([]); const [selectesRow, setSelectRow] = useState([]);
const onSelectChange = (selectedRowKeys, selectedRows) => { setSelectedRowKeys(selectedRowKeys); setSelectRow(selectedRows); onSelectRowsChange(selectedRows);
};
const columns = [ { title: '实例名称', dataIndex: 'instanceName' }, { title: '数据库名称', dataIndex: 'dbName' }, { title: 'SQL', dataIndex: 'sql', ellipsis: true }, { title: '执行状态', dataIndex: 'execStatus', width: 160, fixed: 'right', render: (_, record) => { return ({SQL_STATUS[record.execStatus]}) } }, ]; console.log(selectesRow, 21); return ( <> <div style={{ marginTop: 24 }}>