Skip to content

C
CivManage
Commit 6e8b3970 authored by 张烨's avatar 张烨
Browse files
Options

Merge branch 'master' of https://g.civnet.cn:8443/test/maintenance

parents 7b5cda46 dc9158f4
Hide whitespace changes
Inline Side-by-side
Showing with 2164 additions and 329 deletions
src/pages/appConfig/AppMenu.js
View file @ 6e8b3970
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { message, Form, Input, notification, Button, Select } from 'antd'; import {
import { get, post } from '../../services'; message,
notification,
Form,
Spin,
Tree,
Tooltip,
Modal,
Input,
Button,
} from 'antd';
import {
FileAddTwoTone,
FolderAddTwoTone,
EditTwoTone,
DeleteTwoTone,
} from '@ant-design/icons';
import { getTree, addMenuApi, getRoleList } from '../../services/appConfig/api';
import ListCardItem from '../orgnazation/listCardItem';
import styles from './AppMenu.less';
const SevenParams = () => { const SevenParams = () => {
const { Option } = Select; const [treeLoading, setTreeLoading] = useState(true);
// const [transParams, setTransParams] = useState({});
// 根据转换类型 transType 渲染 输入框参数 params const [treeData, setTreeData] = useState([]); // 菜单树
const [transType, setTransType] = useState('1'); const [rolelist, setRolelist] = useState([]);
const [sevenForm] = Form.useForm();
const transTypeChange = value => { const [menuID, setMenuID] = useState('');
// console.log(`selected ${value}`); const [menuTitle, setMenuTitle] = useState('菜单管理');
setTransType(value);
get(`/Cityinterface/rest/services/OMS.svc/M_GetSevenParamsByTransType`, { const [addMenuVisible, setAddMenuVisible] = useState(false);
_version: 9999, const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false);
_dc: new Date().getTime(), const [tipVisible, setTipVisible] = useState(false);
transType: value, // const [editMenuVisible, setEditMenuVisible] = useState(false);
}) const [deleteMenuVisible, setDeleteMenuVisible] = useState(false);
const [addMenuForm] = Form.useForm();
const [addMenuGroupForm] = Form.useForm();
const getRoleValueCallback = useCallback((value, index) => {
// roleValueList[index] = value;
// setRoleValueList({ ...roleValueList });
}, []);
// 获取菜单树
useEffect(() => {
updateTrees();
}, []);
const updateTrees = () => {
setTreeLoading(true);
getTree()
.then(res => { .then(res => {
if (res) { if (res.length > 0) {
sevenForm.setFieldsValue({ setTreeLoading(false);
// transType 1 2 setTreeData(res[0].children[0].children[2].children);
angle: res.angle, console.log(res[0].children[0].children[2].children);
m: res.m,
// transType 1 3 5 6
x_off: res.x_off,
y_off: res.y_off,
// transType 2
x0_gps: res.x0_gps,
x0_local: res.x0_local,
y0_gps: res.y0_gps,
y0_local: res.y0_local,
// transType 3 4 6
seven_m: res.seven_m,
seven_x_angle: res.seven_x_angle,
seven_x_off: res.seven_x_off,
seven_y_angle: res.seven_y_angle,
seven_y_off: res.seven_y_off,
seven_z_angle: res.seven_z_angle,
seven_z_off: res.seven_z_off,
// transType 4
four_angle: res.four_angle,
four_m: res.four_m,
four_x_off: res.four_x_off,
four_y_off: res.four_y_off,
});
} }
}) })
.catch(err => { .catch(err => {
setTreeLoading(false);
message.error(err); message.error(err);
}); });
}; };
const submitSevenParams = () => { // 获取角色列表
const sevenFormData = new FormData(); useEffect(() => {
sevenFormData.append('ellipseType', sevenForm.getFieldValue('ellipseType')); getRoleList()
sevenFormData.append('transType', sevenForm.getFieldValue('transType')); .then(res => {
sevenFormData.append('middleLine', sevenForm.getFieldValue('middleLine')); if (res && res.list) {
sevenFormData.append('rev', sevenForm.getFieldValue('rev')); setRolelist(res.list);
if (transType === '1') { } else {
sevenFormData.append('x_off', sevenForm.getFieldValue('x_off')); notification.error({
sevenFormData.append('y_off', sevenForm.getFieldValue('y_off')); message: '获取失败',
sevenFormData.append('angle', sevenForm.getFieldValue('angle')); description: res.message,
sevenFormData.append('m', sevenForm.getFieldValue('m')); });
} }
if (transType === '2') { })
sevenFormData.append('angle', sevenForm.getFieldValue('angle')); .catch(err => {
sevenFormData.append('m', sevenForm.getFieldValue('m')); message.error(err);
sevenFormData.append('x0_local', sevenForm.getFieldValue('x0_local')); });
sevenFormData.append('y0_local', sevenForm.getFieldValue('y0_local')); }, []);
sevenFormData.append('x0_gps', sevenForm.getFieldValue('x0_gps'));
sevenFormData.append('y0_gps', sevenForm.getFieldValue('y0_gps'));
}
if (transType === '3') {
sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
sevenFormData.append(
'seven_x_off',
sevenForm.getFieldValue('seven_x_off'),
);
sevenFormData.append(
'seven_y_off',
sevenForm.getFieldValue('seven_y_off'),
);
sevenFormData.append(
'seven_z_off',
sevenForm.getFieldValue('seven_z_off'),
);
sevenFormData.append(
'seven_x_angle',
sevenForm.getFieldValue('seven_x_angle'),
);
sevenFormData.append(
'seven_y_angle',
sevenForm.getFieldValue('seven_y_angle'),
);
sevenFormData.append(
'seven_z_angle',
sevenForm.getFieldValue('seven_z_angle'),
);
sevenFormData.append('seven_m', sevenForm.getFieldValue('seven_m'));
}
if (transType === '4') {
sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
sevenFormData.append(
'seven_x_off',
sevenForm.getFieldValue('seven_x_off'),
);
sevenFormData.append(
'seven_y_off',
sevenForm.getFieldValue('seven_y_off'),
);
sevenFormData.append(
'seven_z_off',
sevenForm.getFieldValue('seven_z_off'),
);
sevenFormData.append(
'seven_x_angle',
sevenForm.getFieldValue('seven_x_angle'),
);
sevenFormData.append(
'seven_y_angle',
sevenForm.getFieldValue('seven_y_angle'),
);
sevenFormData.append(
'seven_z_angle',
sevenForm.getFieldValue('seven_z_angle'),
);
sevenFormData.append('seven_m', sevenForm.getFieldValue('seven_m'));
sevenFormData.append('four_x_off', sevenForm.getFieldValue('four_x_off'));
sevenFormData.append('four_y_off', sevenForm.getFieldValue('four_y_off'));
sevenFormData.append('four_angle', sevenForm.getFieldValue('four_angle'));
sevenFormData.append('four_m', sevenForm.getFieldValue('four_m'));
}
if (transType === '5') {
sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
}
if (transType === '6') {
sevenFormData.append(
'seven_x_off',
sevenForm.getFieldValue('seven_x_off'),
);
sevenFormData.append(
'seven_y_off',
sevenForm.getFieldValue('seven_y_off'),
);
sevenFormData.append(
'seven_z_off',
sevenForm.getFieldValue('seven_z_off'),
);
sevenFormData.append(
'seven_x_angle',
sevenForm.getFieldValue('seven_x_angle'),
);
sevenFormData.append(
'seven_y_angle',
sevenForm.getFieldValue('seven_y_angle'),
);
sevenFormData.append(
'seven_z_angle',
sevenForm.getFieldValue('seven_z_angle'),
);
sevenFormData.append('seven_m', sevenForm.getFieldValue('seven_m'));
sevenFormData.append('x_off', sevenForm.getFieldValue('x_off'));
sevenFormData.append('y_off', sevenForm.getFieldValue('y_off'));
}
post( // 渲染菜单树
`/Cityinterface/rest/services/OMS.svc/M_SetSevenParams?_version=9999`, const mapTree = menu => {
sevenFormData, const haveChildren =
) Array.isArray(menu.children) && menu.children.length > 0;
return {
title: (
<>
<span>{menu.text}</span>
<div className={styles.iconWraper1}>
{menu.menuType === 'MiniAppMenuGroup' && (
<>
<Tooltip title="添加菜单组">
<FolderAddTwoTone
onClick={e => addMenuGroup(e, menu.text, menu.menuID)}
/>
</Tooltip>
</>
)}
{menu.menuType === 'MiniAppMenuGroupTwo' && (
<>
<Tooltip title="添加菜单">
<FileAddTwoTone
onClick={e => addMenu(e, menu.text, menu.menuID)}
/>
</Tooltip>
</>
)}
<Tooltip title="编辑当前菜单">
<EditTwoTone onClick={e => editMenu(e, menu.text, menu.menuID)} />
</Tooltip>
<Tooltip title="删除当前菜单">
<DeleteTwoTone
onClick={e => deleteMenu(e, menu.text, menu.menuID)}
/>
</Tooltip>
</div>
</>
),
key: menu.menuID,
// icon: <SolutionOutlined />,
// 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
children: haveChildren ? menu.children.map(i => mapTree(i)) : [],
};
};
// 左侧目录树相关操作
const addMenu = (e, title, id) => {
setAddMenuVisible(true);
setMenuTitle(`在${title}下添加菜单`);
setMenuID(id);
addMenuForm.setFieldsValue({
menuName: '',
shortName: '',
imageUrl: '',
pageUrl: '',
funParam: '',
});
};
const addMenuGroup = (e, title, id) => {
setAddMenuGroupVisible(true);
setMenuTitle(`在${title}下添加菜单组`);
setMenuID(id);
};
const editMenu = (e, title, id) => {
setAddMenuVisible(true);
setMenuTitle(`编辑${title}`);
setMenuID(id);
addMenuApi(`/Cityinterface/rest/services/OMS.svc/M_GetMenu`, {
_version: 9999,
_dc: new Date().getTime(),
menuID: id,
})
.then(res => { .then(res => {
if (res.success) { if (res.success) {
notification.success({ addMenuForm.setFieldsValue({
message: '提交成功', menuName: res.menuName,
menuAlias: res.menuAlias,
menuIcon: res.menuIcon,
relatedRoleList: res.relatedRoleList || [],
}); });
} else { } else {
notification.error({ notification.error({
...@@ -187,163 +172,246 @@ const SevenParams = () => { ...@@ -187,163 +172,246 @@ const SevenParams = () => {
message.error(err); message.error(err);
}); });
}; };
const deleteMenu = (e, title, id) => {
useEffect(() => { setDeleteMenuVisible(true);
get(`/Cityinterface/rest/services/OMS.svc/M_GetSevenParams`, { setMenuTitle(`删除菜单${title}`);
setMenuID(id);
};
// 提交添加菜单
const submitAddMenu = () => {
console.log(menuID);
let menuName = addMenuForm.getFieldValue('menuName');
let shortName = addMenuForm.getFieldValue('shortName');
let imageUrl = addMenuForm.getFieldValue('imageUrl');
let pageUrl = addMenuForm.getFieldValue('pageUrl');
let funParam = addMenuForm.getFieldValue('funParam');
if (menuName && shortName && imageUrl && pageUrl) {
addMenuApi(menuID, menuName, shortName, imageUrl, pageUrl, funParam)
.then(res => {
if (res.success) {
setAddMenuVisible(false);
notification.success({
message: '提交成功',
});
updateTrees();
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
} else {
setTipVisible(true);
}
};
// 提交添加菜单组
const submitAddMenuGroup = () => {
let menuName = addMenuGroupForm.getFieldValue('menuName');
let shortName = addMenuGroupForm.getFieldValue('shortName');
let imageUrl = addMenuGroupForm.getFieldValue('imageUrl');
let pageUrl = addMenuGroupForm.getFieldValue('pageUrl');
let funParam = addMenuGroupForm.getFieldValue('funParam');
if (menuName && shortName && imageUrl && pageUrl) {
addMenuApi(menuID, menuName, shortName, imageUrl, pageUrl, funParam)
.then(res => {
if (res.success) {
setAddMenuGroupVisible(false);
notification.success({
message: '提交成功',
});
updateTrees();
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
} else {
setTipVisible(true);
}
};
// 提交删除菜单
const submitDeleteMenu = () => {
addMenuApi(`/Cityinterface/rest/services/OMS.svc/W4_DeleteMenu`, {
_version: 9999, _version: 9999,
_dc: new Date().getTime(), _dc: new Date().getTime(),
menuID,
subSystemValue: '手持系统',
}) })
.then(res => { .then(res => {
if (res.success) { if (res.success) {
sevenForm.setFieldsValue({ setDeleteMenuVisible(false);
middleLine: res.transParams.middleLine, notification.success({
rev: res.transParams.rev, message: '删除成功',
x_off: res.params.x_off, });
y_off: res.params.y_off, updateTrees();
angle: res.params.angle, } else {
m: res.params.m, notification.error({
message: '删除失败',
description: res.message,
}); });
} }
}) })
.catch(err => { .catch(err => {
setTreeLoading(false);
message.error(err); message.error(err);
}); });
}, []); };
return ( return (
<Form <div className={styles.contentContainer}>
form={sevenForm} <div className={styles.menuContainer}>
labelCol={{ span: 4, offset: 4 }} {treeData.length > 0 && (
wrapperCol={{ span: 16, offset: 1 }} <Spin spinning={treeLoading} tip="loading...">
style={{ width: '900px' }} <Tree
onFinish={submitSevenParams} showIcon="true"
initialValues={{ ellipseType: '1', transType: '1' }} showLine={{ showLeafIcon: false }}
> defaultExpandAll="true"
<Form.Item name="ellipseType" label="椭球类型"> // selectedKeys={[currentSelectMenu]}
<Select> // onSelect={onSelect}
<Option value="1">54椭球</Option> treeData={treeData.map(t => mapTree(t))}
<Option value="2">80椭球</Option> />
<Option value="3">84椭球</Option> </Spin>
<Option value="4">2000椭球</Option> )}
</Select> </div>
</Form.Item> <div className={styles.previewContainer}>123</div>
<Form.Item name="transType" label="转换类型"> {/* 必填项提示 */}
<Select onChange={transTypeChange}> <Modal
<Option value="1">四参数</Option> title="提示"
<Option value="2">六参数</Option> visible={tipVisible}
<Option value="3">七参数</Option> onCancel={() => setTipVisible(false)}
<Option value="4">七参数+四参数</Option> width="300px"
<Option value="5">中央经线投影（二参数）</Option> centered
<Option value="6">七参数+二参数反转</Option> footer={[
</Select> <Button
</Form.Item> key="back"
<Form.Item type="primary"
name="middleLine" onClick={() => setTipVisible(false)}
label="中央经线" >
rules={[{ required: true, message: '不能为空' }]} 关闭
</Button>,
]}
> >
<Input placeholder="请输入中央经线" /> <p>
</Form.Item> 标记<span className={styles.redText}>*</span>的为必填项
<Form.Item </p>
name="rev" </Modal>
label="rev" {/* 添加菜单 */}
rules={[{ required: true, message: '不能为空' }]} <Modal
title={menuTitle}
visible={addMenuVisible}
onOk={submitAddMenu}
onCancel={() => setAddMenuVisible(false)}
okText="确认"
cancelText="取消"
centered
> >
<Input placeholder="请输入rev" /> <Form form={addMenuForm}>
</Form.Item> <Form.Item
{(transType === '1' || transType === '2') && ( name="menuName"
<> label="菜单名称"
<Form.Item name="angle" label="angle"> rules={[{ required: true, message: '不能为空' }]}
<Input placeholder="请输入旋转角度" /> >
<Input placeholder="请输入菜单名称" />
</Form.Item> </Form.Item>
<Form.Item name="m" label="m"> <Form.Item
<Input placeholder="请输入尺度因子" /> name="shortName"
label="菜单别名"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单别名" />
</Form.Item> </Form.Item>
</> <Form.Item
)} name="imageUrl"
{(transType === '1' || label="菜单图标"
transType === '3' || rules={[{ required: true, message: '不能为空' }]}
transType === '5' || >
transType === '6') && ( <Input placeholder="请输入菜单图标" />
<>
<Form.Item name="x_off" label="x_off">
<Input placeholder="请输入x坐标平移量" />
</Form.Item>
<Form.Item name="y_off" label="y_off">
<Input placeholder="请输入y坐标平移量" />
</Form.Item>
</>
)}
{transType === '2' && (
<>
<Form.Item name="x0_gps" label="x0_gps">
<Input placeholder="请输入gps-x坐标" />
</Form.Item>
<Form.Item name="y0_gps" label="y0_gps">
<Input placeholder="请输入gps-y坐标" />
</Form.Item>
<Form.Item name="x0_local" label="x0_local">
<Input placeholder="请输入local-x坐标" />
</Form.Item>
<Form.Item name="y0_local" label="y0_local">
<Input placeholder="请输入local-y坐标" />
</Form.Item>
</>
)}
{(transType === '3' || transType === '4' || transType === '6') && (
<>
<Form.Item name="seven_m" label="seven_m">
<Input placeholder="请输入尺度因子" />
</Form.Item>
<Form.Item name="seven_x_off" label="seven_x_off">
<Input placeholder="请输入x方向偏移量" />
</Form.Item>
<Form.Item name="seven_y_off" label="seven_y_off">
<Input placeholder="请输入y方向偏移量" />
</Form.Item>
<Form.Item name="seven_z_off" label="seven_z_off">
<Input placeholder="请输入z方向偏移量" />
</Form.Item> </Form.Item>
<Form.Item name="seven_x_angle" label="seven_x_angle"> <Form.Item
<Input placeholder="请输入x方向偏转角度" /> name="pageUrl"
label="功能路径"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入功能路径" />
</Form.Item> </Form.Item>
<Form.Item name="seven_y_angle" label="seven_y_angle"> <Form.Item name="funParam" label="功能参数">
<Input placeholder="请输入y方向偏转角度" /> <Input placeholder="请输入功能参数" />
</Form.Item> </Form.Item>
<Form.Item name="seven_z_angle" label="seven_z_angle"> </Form>
<Input placeholder="请输入z方向偏转角度" /> <ListCardItem
itemid="1"
key="1"
userList={rolelist}
OUName="关联角色"
getValueCallback={getRoleValueCallback}
/>
</Modal>
{/* 添加菜单组 */}
<Modal
title={menuTitle}
visible={addMenuGroupVisible}
onOk={submitAddMenuGroup}
onCancel={() => setAddMenuGroupVisible(false)}
okText="确认"
cancelText="取消"
centered
>
<Form form={addMenuGroupForm}>
<Form.Item
name="menuName"
label="分组名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入分组名称" />
</Form.Item> </Form.Item>
</> <Form.Item
)} name="shortName"
{transType === '4' && ( label="分组别名"
<> rules={[{ required: true, message: '不能为空' }]}
<Form.Item name="four_x_off" label="four_x_off"> >
<Input placeholder="请输入x方向偏移量" /> <Input placeholder="请输入分组别名" />
</Form.Item> </Form.Item>
<Form.Item name="four_y_off" label="four_y_off"> <Form.Item
<Input placeholder="请输入y方向偏移量" /> name="imageUrl"
label="菜单图标"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单图标" />
</Form.Item> </Form.Item>
<Form.Item name="four_angle" label="four_angle"> <Form.Item
<Input placeholder="请输入偏转角度" /> name="pageUrl"
label="离线图标"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入离线图标" />
</Form.Item> </Form.Item>
<Form.Item name="four_m" label="four_m"> <Form.Item name="funParam" label="功能参数">
<Input placeholder="请输入尺度因子" /> <Input placeholder="请输入功能参数" />
</Form.Item> </Form.Item>
</> </Form>
)} </Modal>
<Form.Item {/* 删除菜单 */}
wrapperCol={{ <Modal
sm: { title={menuTitle}
span: 16, visible={deleteMenuVisible}
offset: 16, onOk={submitDeleteMenu}
}, onCancel={() => setDeleteMenuVisible(false)}
}} okText="确认"
cancelText="取消"
centered
> >
<Button type="primary" htmlType="submit"> <span>确定删除？</span>
提交 </Modal>
</Button> </div>
</Form.Item>
</Form>
); );
}; };
......
src/pages/appConfig/AppMenu.less 0 → 100644
View file @ 6e8b3970
.contentContainer{
// min-height: calc(100vh - 194px);
display: flex;
.menuContainer{
min-width: 300px;
.ant-tree-list{
padding: 10px;
border:1px solid #abaeb1;
height:calc(100vh - 300px);
.ant-tree-switcher{
line-height: 1;
color:#1890FF;
}
}
}
.previewContainer{
margin-left: 12px;
flex: 1;
float: left;
// background: white;
.ant-table-pagination-right{
padding-right: 12px;
}
}
.ant-tree-treenode{
width: 100% !important;
.ant-tree-node-content-wrapper{
display: inline-block;
width: 100%;
}
.iconWraper1{
float: right;
span{
display: none;
}
}
}
.ant-tree-treenode:hover{
.iconWraper1>span{
margin-left: 12px;
font-size: 18px;
display: inline-block;
}
}
}
.redText{
color: red;
cursor: pointer;
}
// .ant-modal-root{
// .ant-tree-switcher{
// line-height: 1;
// color:#1890FF;
// }
// }
// .menuContainer{
// width: 300px;
// padding: 10px;
// background: #1890FF;
// }
\ No newline at end of file
src/pages/appConfig/index.js
View file @ 6e8b3970
import React from 'react'; import React from 'react';
import { Tabs } from 'antd'; import { Tabs, Card } from 'antd';
import { PageContainer } from '@ant-design/pro-layout'; import { PageContainer } from '@ant-design/pro-layout';
import SevenParams from './SevenParams'; import SevenParams from './SevenParams';
// import AppMenu from './AppMenu'; import AppMenu from './AppMenu';
const AppConfigPage = () => { const AppConfigPage = () => {
const { TabPane } = Tabs; const { TabPane } = Tabs;
return ( return (
<PageContainer> <PageContainer>
<Tabs defaultActiveKey="1"> <Card>
<TabPane tab="七参数" key="1"> <Tabs defaultActiveKey="1" type="card">
<SevenParams /> <TabPane tab="应用配置" key="1">
</TabPane> <SevenParams />
<TabPane tab="菜单管理" key="2"> </TabPane>
{/* <AppMenu /> */} <TabPane tab="菜单管理" key="2" type="card">
123 <AppMenu />
</TabPane> </TabPane>
</Tabs> </Tabs>
</Card>
</PageContainer> </PageContainer>
); );
}; };
......
src/pages/database/CurrentSolution.less
View file @ 6e8b3970
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
min-height: 200px; min-height: 200px;
} }
.btnBox{ .btnBox{
margin-top: 70px; margin-top: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
......
src/pages/database/InitDataBase.jsx
View file @ 6e8b3970
...@@ -177,11 +177,6 @@ const InitDataBase = props => { ...@@ -177,11 +177,6 @@ const InitDataBase = props => {
.catch(err => { .catch(err => {
setCardLoading(false); setCardLoading(false);
console.log(err); console.log(err);
notification.error({
message: '提示',
duration: 3,
description: err || '保存失败',
});
}); });
}; };
// 测试连接 // 测试连接
......
src/pages/database/databaseConfig/DatabaseConfig.jsx 0 → 100644
View file @ 6e8b3970
import React, { useState } from 'react';
import { Card, Tabs } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import SQLServerTable from './sqlServer/SQLServerTable';
import OracleTable from './oracle/OracleTable';
import MongDBTable from './mongDB/MongDBTable';
import MySQLTable from './mysqltable/MySQLTable';
const { TabPane } = Tabs;
const dataArr = [
{
title: 'SQLServer数据库连接',
key: '0',
component: <SQLServerTable />,
},
{
title: 'Oracle数据库连接',
key: '1',
component: <OracleTable />,
},
{
title: 'MongoDB数据库连接',
key: '2',
component: <MongDBTable />,
},
{
title: 'MySQL数据库连接',
key: '3',
component: <MySQLTable />,
},
];
const DatabaseConnectConfig = props => {
const [flag, setFlag] = useState(false);
const [active, setActive] = useState('3');
const handleChange = e => {
console.log(e);
setActive(e);
};
return (
<PageContainer>
<Card>
<Tabs activeKey={active} onChange={e => handleChange(e)}>
{dataArr.map(item => (
<TabPane tab={item.title} key={item.key}>
{active === item.key && item.component}
</TabPane>
))}
</Tabs>
</Card>
</PageContainer>
);
};
export default DatabaseConnectConfig;
src/pages/database/databaseConfig/mongDB/AddModal.jsx 0 → 100644
View file @ 6e8b3970
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
addMongoDBConnString,
editMongoDBConnString,
} from '@/services/database/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
const { callBackSubmit = () => {}, type, formObj, visible } = props;
const [loading, setLoading] = useState(false);
const [showReplicaSet, setShowReplicaSet] = useState(false);
const [form] = Form.useForm();
// 提交
const onSubmit = () => {
form.validateFields().then(validate => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
if (type === 'add') {
addMongoDBConnString({
_version: 9999,
_dc: Date.now(),
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '新增成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '新增失败',
});
}
})
.catch(err => {
setLoading(false);
console.error(err);
});
} else if (type === 'edit') {
handleEdit();
}
}
});
};
const handleEdit = () => {
let obj = form.getFieldsValue();
editMongoDBConnString({
_version: 9999,
_dc: Date.now(),
...obj,
oldName: formObj.name,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
})
.catch(err => setLoading(false));
};
const onFinish = value => {};
const handleSelect = e => {
console.log(e);
e === '复制集' ? setShowReplicaSet(true) : setShowReplicaSet(false);
console.log(form.getFieldsValue());
};
useEffect(() => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
formObj.type === '复制集'
? setShowReplicaSet(true)
: setShowReplicaSet(false);
form.setFieldsValue({ ...formObj });
break;
default:
break;
}
return () => {
form.getFieldsValue().type === '复制集'
? setShowReplicaSet(true)
: setShowReplicaSet(false);
};
}, [visible]);
useEffect(() => {
console.log(form.getFieldsValue(), '103');
}, [type === 'edit']);
const layout = {
layout: 'horizontal',
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
const selectArr = [
{
key: '0',
title: '单实例',
value: '单实例',
},
{
key: '1',
title: '复制集',
value: '复制集',
},
{
key: '2',
title: '分片群',
value: '分片群',
},
];
return (
<Modal
title={`${type === 'add' ? '添加' : '编辑'}MongDB数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
>
{visible && (
<Form form={form} {...layout} onFinish={onFinish}>
<Item
label="实例类型"
name="type"
rules={[{ required: true, message: '请选择实例类型' }]}
>
<Select onChange={e => handleSelect(e)}>
{selectArr &&
selectArr.map(item => (
<Option key={item.key} value={item.value}>
{item.title}
</Option>
))}
</Select>
</Item>
<Item
label="标签"
name="name"
rules={[{ required: true, message: '请输入标签' }]}
>
<Input placeholder="请输入标签" allowClear />
</Item>
<Item
label="IP"
name="ip"
rules={[{ required: true, message: '请输入IP' }]}
>
<Input placeholder="请输入IP" allowClear />
</Item>
<Item
label="端口"
name="port"
rules={[{ required: true, message: '请输入端口号' }]}
>
<Input placeholder="请输入端口号" allowClear />
</Item>
<Item
label="数据库名"
name="dbName"
rules={[{ required: true, message: '请输入数据库名' }]}
>
<Input placeholder="请输入数据库名" allowClear />
</Item>
{showReplicaSet && (
<Item
label="复制集名称"
name="replicaSet"
rules={[{ required: true, message: '请输入复制集名称' }]}
>
<Input placeholder="请输入数据库名" allowClear />
</Item>
)}
{/* <Item
label="用户名"
name="userName"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" allowClear />
</Item>
<Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码" allowClear />
</Item> */}
</Form>
)}
</Modal>
);
};
export default AddModal;
src/pages/database/databaseConfig/mongDB/MongDBTable.jsx 0 → 100644
View file @ 6e8b3970
import React, { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Popconfirm, notification } from 'antd';
import {
getMongoDBConnString,
deleteConnString,
getMongoDBConnectionTest,
} from '@/services/database/api';
import AddModal from './AddModal';
const MongDBTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
const [visible, setVisible] = useState(false); // 弹窗
const [tableLoading, setTableLoading] = useState(false); // tableLoading
const [type, setType] = useState('add'); // 弹窗类型
const [formObj, setFormObj] = useState({});
useEffect(() => {
setTableLoading(true);
getMongoDBConnString({
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res) {
setDataList(res);
}
})
.catch(err => {
setTableLoading(false);
});
}, [flag]);
// 新增
const handleAdd = (val, item) => {
setType('add');
setVisible(true);
};
// 测试连接
const handleCon = (val, item) => {
setTableLoading(true);
getMongoDBConnectionTest({
name: item.name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
notification.success({
message: '通知',
description: res.message || '连接成功',
duration: 3,
});
} else {
notification.error({
message: '通知',
description: res.message || '连接失败',
duration: 3,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
// 删除
const handleDel = (val, item) => {
const { name = '' } = item;
deleteConnString({
name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setFlag(flag + 1);
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: res.message || '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '删除失败',
});
}
})
.catch(err => console.error(err));
};
// 编辑
const handleEdit = (val, item) => {
setType('edit');
setFormObj(item);
setVisible(true);
};
const onSubmit = prop => {
console.log(prop);
setVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '标签',
dataIndex: 'name',
key: 'name',
},
{
title: 'ip',
dataIndex: 'ip',
key: 'ip',
},
{
title: '端口',
dataIndex: 'port',
key: 'port',
},
{
title: '数据库名',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
},
{
title: '复制集',
dataIndex: 'replicaSet',
key: 'replicaSet',
},
// {
// title: '用户名',
// dataIndex: 'userName',
// key: 'userName',
// },
// {
// title: '密码',
// dataIndex: 'password',
// key: 'password',
// },
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: 300,
render: (val, item) => [
<Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
测试连接
</Tag>,
<Tag color="gold" onClick={() => handleEdit(val, item)}>
编辑
</Tag>,
<Popconfirm
title={`是否删除连接${item.name}`}
cancelText="取消"
okText="确认"
// placement="right"
onConfirm={() => handleDel(val, item)}
>
<Tag color="#f50">删除</Tag>
</Popconfirm>,
],
},
];
return (
<>
<ProTable
headerTitle="MongDB数据库"
rowKey="key"
search={false}
columns={columns}
bordered
loading={tableLoading}
dataSource={dataList}
options={{ reload: false, fullScreen: false }}
toolBarRender={() => [
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
添加MongDB数据库连接
</Button>,
]}
/>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</>
);
};
export default MongDBTable;
src/pages/database/databaseConfig/mysqltable/AddModal.jsx 0 → 100644
View file @ 6e8b3970
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
addMySQLConnString,
editMySQLConnString,
} from '@/services/database/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
console.log(props);
const { callBackSubmit = () => {}, type, formObj, visible } = props;
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
// 提交
const onSubmit = () => {
form.validateFields().then(validate => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
if (type === 'add') {
addMySQLConnString({
_version: 9999,
_dc: Date.now(),
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '新增成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '新增失败',
});
}
})
.catch(err => {
setLoading(false);
console.error(err);
});
} else if (type === 'edit') {
handleEdit();
}
}
});
};
const handleEdit = () => {
let obj = form.getFieldsValue();
editMySQLConnString({
_version: 9999,
_dc: Date.now(),
...obj,
oldName: formObj.name,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
})
.catch(err => setLoading(false));
};
const onFinish = value => {
console.log(value, 'value');
};
useEffect(() => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
form.setFieldsValue({ ...formObj });
break;
default:
break;
}
}, [visible]);
const layout = {
layout: 'horizontal',
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
return (
<Modal
title={`${type === 'add' ? '添加' : '编辑'}MySQL数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
>
{visible && (
<Form form={form} {...layout} onFinish={onFinish}>
<Item
label="标签"
name="name"
rules={[{ required: true, message: '请输入标签' }]}
>
<Input placeholder="请输入标签" allowClear />
</Item>
<Item
label="IP"
name="ip"
rules={[{ required: true, message: '请输入IP' }]}
>
<Input placeholder="请输入IP" allowClear />
</Item>
<Item
label="数据库名"
name="dbName"
rules={[{ required: true, message: '请输入数据库名' }]}
>
<Input placeholder="请输入数据库名" allowClear />
</Item>
<Item
label="用户名"
name="userName"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" allowClear />
</Item>
<Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码" allowClear />
</Item>
</Form>
)}
</Modal>
);
};
export default AddModal;
src/pages/database/databaseConfig/mysqltable/MySQLTable.jsx 0 → 100644
View file @ 6e8b3970
import React, { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Popconfirm, notification } from 'antd';
import {
getMySQLConnString,
getMySQLConnectionTest,
deleteConnString,
} from '@/services/database/api';
import AddModal from './AddModal';
const MySQLTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
const [visible, setVisible] = useState(false); // 弹窗
const [tableLoading, setTableLoading] = useState(false); // tableLoading
const [type, setType] = useState('add'); // 弹窗类型
const [formObj, setFormObj] = useState({});
useEffect(() => {
setTableLoading(true);
getMySQLConnString({
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res) {
setDataList(res);
}
})
.catch(err => {
setTableLoading(false);
});
}, [flag]);
// 新增
const handleAdd = (val, item) => {
setType('add');
setVisible(true);
};
// 测试连接
const handleCon = (val, item) => {
setTableLoading(true);
getMySQLConnectionTest({
name: item.name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
notification.success({
message: '通知',
description: res.message || '连接成功',
duration: 3,
});
} else {
notification.error({
message: '通知',
description: res.message || '连接失败',
duration: 3,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
// 删除
const handleDel = (val, item) => {
const { name = '' } = item;
deleteConnString({
name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setFlag(flag + 1);
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: res.message || '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '删除失败',
});
}
})
.catch(err => console.error(err));
};
// 编辑
const handleEdit = (val, item) => {
setType('edit');
setFormObj(item);
setVisible(true);
};
const onSubmit = prop => {
console.log(prop);
setVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '标签',
dataIndex: 'name',
key: 'name',
},
{
title: 'IP',
dataIndex: 'ip',
key: 'ip',
},
{
title: '数据库名',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '用户名',
dataIndex: 'userName',
key: 'userName',
},
{
title: '密码',
dataIndex: 'password',
key: 'password',
},
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: 300,
render: (val, item) => [
<Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
测试连接
</Tag>,
<Tag color="gold" onClick={() => handleEdit(val, item)}>
编辑
</Tag>,
<Popconfirm
title={`是否删除连接${item.name}`}
cancelText="取消"
okText="确认"
// placement="right"
onConfirm={() => handleDel(val, item)}
>
<Tag color="#f50">删除</Tag>
</Popconfirm>,
],
},
];
return (
<>
<ProTable
headerTitle="MySQL数据库"
rowKey="key"
search={false}
columns={columns}
bordered
loading={tableLoading}
dataSource={dataList}
options={{ reload: false, fullScreen: false }}
toolBarRender={() => [
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
添加MySQL连接
</Button>,
]}
/>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</>
);
};
export default MySQLTable;
src/pages/database/databaseConfig/oracle/AddModal.jsx 0 → 100644
View file @ 6e8b3970
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
addOracleConnString,
editOracleConnString,
} from '@/services/database/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
const { callBackSubmit = () => {}, type, formObj, visible } = props;
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
// 提交
const onSubmit = () => {
form.validateFields().then(validate => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
if (type === 'add') {
addOracleConnString({
_version: 9999,
_dc: Date.now(),
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '新增成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '新增失败',
});
}
})
.catch(err => {
setLoading(false);
console.error(err);
});
} else if (type === 'edit') {
handleEdit();
}
}
});
};
const handleEdit = () => {
let obj = form.getFieldsValue();
editOracleConnString({
_version: 9999,
_dc: Date.now(),
...obj,
oldName: formObj.name,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
})
.catch(err => setLoading(false));
};
const onFinish = value => {
console.log(value, 'value');
};
useEffect(() => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
form.setFieldsValue({ ...formObj });
break;
default:
break;
}
}, [visible]);
const layout = {
layout: 'horizontal',
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
return (
<Modal
title={`${type === 'add' ? '添加' : '编辑'}Oracle数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
>
{visible && (
<Form form={form} {...layout} onFinish={onFinish}>
<Item
label="标签"
name="name"
rules={[{ required: true, message: '请输入标签' }]}
>
{/* <Select>
<Option value={item.value}>{item.title}</Option>
</Select> */}
<Input placeholder="请输入标签" allowClear />
</Item>
<Item
label="网络服务名"
name="dbName"
rules={[{ required: true, message: '请输入网络服务名' }]}
>
<Input placeholder="请输入网络服务名" allowClear />
</Item>
<Item
label="用户名"
name="userName"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" allowClear />
</Item>
<Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码" allowClear />
</Item>
</Form>
)}
</Modal>
);
};
export default AddModal;
src/pages/database/databaseConfig/oracle/OracleTable.jsx 0 → 100644
View file @ 6e8b3970
import React, { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Popconfirm, notification } from 'antd';
import {
getOracleConnString,
getOracleConnectionTest,
deleteConnString,
} from '@/services/database/api';
import AddModal from './AddModal';
const OracleTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
const [visible, setVisible] = useState(false); // 弹窗
const [tableLoading, setTableLoading] = useState(false); // tableLoading
const [type, setType] = useState('add'); // 弹窗类型
const [formObj, setFormObj] = useState({});
useEffect(() => {
setTableLoading(true);
getOracleConnString({
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res) {
setDataList(res);
}
})
.catch(err => {
setTableLoading(false);
});
}, [flag]);
// 新增
const handleAdd = (val, item) => {
setType('add');
setVisible(true);
};
// 测试连接
const handleCon = (val, item) => {
setTableLoading(true);
getOracleConnectionTest({
name: item.name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
notification.success({
message: '通知',
description: res.message || '连接成功',
duration: 3,
});
} else {
notification.error({
message: '通知',
description: res.message || '连接失败',
duration: 3,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
// 删除
const handleDel = (val, item) => {
const { name = '' } = item;
deleteConnString({
name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setFlag(flag + 1);
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: res.message || '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '删除失败',
});
}
})
.catch(err => console.error(err));
};
// 编辑
const handleEdit = (val, item) => {
setType('edit');
setFormObj(item);
setVisible(true);
};
const onSubmit = prop => {
console.log(prop);
setVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '标签',
dataIndex: 'name',
key: 'name',
},
{
title: '网络服务名/(ip:port/实例名)',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '用户名',
dataIndex: 'userName',
key: 'userName',
},
{
title: '密码',
dataIndex: 'password',
key: 'password',
},
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: 300,
render: (val, item) => [
<Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
测试连接
</Tag>,
<Tag color="gold" onClick={() => handleEdit(val, item)}>
编辑
</Tag>,
<Popconfirm
title={`是否删除连接${item.name}`}
cancelText="取消"
okText="确认"
// placement="right"
onConfirm={() => handleDel(val, item)}
>
<Tag color="#f50">删除</Tag>
</Popconfirm>,
],
},
];
return (
<>
<ProTable
headerTitle="Oracle数据库"
rowKey="key"
search={false}
columns={columns}
bordered
loading={tableLoading}
dataSource={dataList}
options={{ reload: false, fullScreen: false }}
toolBarRender={() => [
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
添加Oracle连接
</Button>,
]}
/>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</>
);
};
export default OracleTable;
src/pages/database/databaseConfig/sqlServer/AddModal.jsx 0 → 100644
View file @ 6e8b3970
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
addSQLServerConnString,
editSQLServerConnString,
} from '@/services/database/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
console.log(props);
const { callBackSubmit = () => {}, type, formObj, visible } = props;
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
// 提交
const onSubmit = () => {
form.validateFields().then(validate => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
if (type === 'add') {
addSQLServerConnString({
_version: 9999,
_dc: Date.now(),
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '新增成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '新增失败',
});
}
})
.catch(err => {
setLoading(false);
console.error(err);
});
} else if (type === 'edit') {
handleEdit();
}
}
});
};
const handleEdit = () => {
let obj = form.getFieldsValue();
editSQLServerConnString({
_version: 9999,
_dc: Date.now(),
...obj,
oldName: formObj.name,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
})
.catch(err => setLoading(false));
};
const onFinish = value => {
console.log(value, 'value');
};
useEffect(() => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
form.setFieldsValue({ ...formObj });
break;
default:
break;
}
}, [visible]);
const layout = {
layout: 'horizontal',
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
return (
<Modal
title={`${type === 'add' ? '添加' : '编辑'}SQL数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
>
{visible && (
<Form form={form} {...layout} onFinish={onFinish}>
<Item
label="标签"
name="name"
rules={[{ required: true, message: '请输入标签' }]}
>
{/* <Select>
<Option value={item.value}>{item.title}</Option>
</Select> */}
<Input placeholder="请输入标签" allowClear />
</Item>
<Item
label="IP"
name="ip"
rules={[{ required: true, message: '请输入IP' }]}
>
<Input placeholder="请输入IP" allowClear />
</Item>
<Item
label="数据库名"
name="dbName"
rules={[{ required: true, message: '请输入数据库名' }]}
>
<Input placeholder="请输入数据库名" allowClear />
</Item>
<Item
label="用户名"
name="userName"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" allowClear />
</Item>
<Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码" allowClear />
</Item>
</Form>
)}
</Modal>
);
};
export default AddModal;
src/pages/database/databaseConfig/sqlServer/SQLServerTable.jsx 0 → 100644
View file @ 6e8b3970
import React, { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Popconfirm, notification } from 'antd';
import {
getSQLServerConnString,
deleteConnString,
getSQLServerConnectionTest,
} from '@/services/database/api';
import AddModal from './AddModal';
const SQLServerTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
const [visible, setVisible] = useState(false); // 弹窗
const [tableLoading, setTableLoading] = useState(false); // tableLoading
const [type, setType] = useState('add'); // 弹窗类型
const [formObj, setFormObj] = useState({});
useEffect(() => {
setTableLoading(true);
getSQLServerConnString({
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res) {
setDataList(res);
}
})
.catch(err => {
setTableLoading(false);
});
}, [flag]);
// 新增
const handleAdd = (val, item) => {
setType('add');
setVisible(true);
};
// 测试连接
const handleCon = (val, item) => {
setTableLoading(true);
getSQLServerConnectionTest({
name: item.name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
notification.success({
message: '通知',
description: '连接成功',
duration: 3,
});
} else {
notification.error({
message: '通知',
description: res.message || '连接失败',
duration: 3,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
// 删除
const handleDel = (val, item) => {
const { name = '' } = item;
deleteConnString({
name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setFlag(flag + 1);
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: res.message || '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '删除失败',
});
}
})
.catch(err => console.error(err));
};
// 编辑
const handleEdit = (val, item) => {
setType('edit');
setFormObj(item);
setVisible(true);
};
const onSubmit = prop => {
console.log(prop);
setVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '标签',
dataIndex: 'name',
key: 'name',
},
{
title: 'ip',
dataIndex: 'ip',
key: 'ip',
},
{
title: '数据库名',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '用户名',
dataIndex: 'userName',
key: 'userName',
},
{
title: '密码',
dataIndex: 'password',
key: 'password',
},
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: 300,
render: (val, item) => [
<Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
测试连接
</Tag>,
<Tag color="gold" onClick={() => handleEdit(val, item)}>
编辑
</Tag>,
<Popconfirm
title={`是否删除连接${item.name}`}
cancelText="取消"
okText="确认"
// placement="right"
onConfirm={() => handleDel(val, item)}
>
<Tag color="#f50">删除</Tag>
</Popconfirm>,
],
},
];
return (
<>
<ProTable
headerTitle="SQL数据库"
rowKey="key"
search={false}
columns={columns}
bordered
loading={tableLoading}
dataSource={dataList}
options={{ reload: false, fullScreen: false }}
toolBarRender={() => [
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
添加SQL数据库连接
</Button>,
]}
/>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</>
);
};
export default SQLServerTable;
src/pages/mobileConfig/SiteConfig.jsx
View file @ 6e8b3970
...@@ -38,7 +38,7 @@ const SiteConfig = props => { ...@@ -38,7 +38,7 @@ const SiteConfig = props => {
getWebsite({ getWebsite({
_version: 9999, _version: 9999,
_dc: Date.now(), _dc: Date.now(),
title: '新运维测试小程序222', title: '熊猫掌天下小程序',
}).then(res => { }).then(res => {
let obj = { ...form.getFieldsValue() }; let obj = { ...form.getFieldsValue() };
let arr = Object.keys({ ...form.getFieldsValue() }); let arr = Object.keys({ ...form.getFieldsValue() });
......
src/pages/userCenter/UserManage.js
View file @ 6e8b3970
...@@ -76,6 +76,7 @@ const UserManage = () => { ...@@ -76,6 +76,7 @@ const UserManage = () => {
const [deleteUserVisible, setDeleteUserVisible] = useState(false); const [deleteUserVisible, setDeleteUserVisible] = useState(false);
const [orgTitle, setOrgTitle] = useState('机构'); const [orgTitle, setOrgTitle] = useState('机构');
const [tableTitle, setTableTitle] = useState('机构');
const [orgID, setOrgID] = useState(); const [orgID, setOrgID] = useState();
const [newOrgID, setNewOrgID] = useState(); const [newOrgID, setNewOrgID] = useState();
const [currentUser, setCurrentUser] = useState({}); const [currentUser, setCurrentUser] = useState({});
...@@ -118,6 +119,12 @@ const UserManage = () => { ...@@ -118,6 +119,12 @@ const UserManage = () => {
key: 'userName', key: 'userName',
width: 100, width: 100,
}, },
{
title: '所在机构',
dataIndex: 'OUName',
key: 'OUName',
width: 150,
},
{ {
title: '手机号码', title: '手机号码',
dataIndex: 'phone', dataIndex: 'phone',
...@@ -141,7 +148,7 @@ const UserManage = () => { ...@@ -141,7 +148,7 @@ const UserManage = () => {
title: '操作', title: '操作',
key: 'action', key: 'action',
fixed: 'right', fixed: 'right',
width: 300, width: 250,
align: 'center', align: 'center',
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
...@@ -169,12 +176,27 @@ const UserManage = () => { ...@@ -169,12 +176,27 @@ const UserManage = () => {
style={{ fontSize: '16px' }} style={{ fontSize: '16px' }}
/> />
</Tooltip> </Tooltip>
<Tooltip title="冻结用户">
<StopOutlined {(record.state === '0' || record.state === null) && (
onClick={() => freezeUser(record)} <>
style={{ fontSize: '16px', color: '#1890FF' }} <Tooltip title="冻结用户">
/> <StopOutlined
</Tooltip> onClick={() => freezeUser(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
</>
)}
{record.state === '1' && (
<>
<Tooltip title="解冻用户">
<StopOutlined
onClick={() => freezeUser(record)}
style={{ fontSize: '16px' }}
/>
</Tooltip>
</>
)}
<Tooltip title="删除用户"> <Tooltip title="删除用户">
<DeleteTwoTone <DeleteTwoTone
onClick={() => deleteUser(record)} onClick={() => deleteUser(record)}
...@@ -289,6 +311,7 @@ const UserManage = () => { ...@@ -289,6 +311,7 @@ const UserManage = () => {
// 获取用户机构树 // 获取用户机构树
useEffect(() => { useEffect(() => {
setTreeLoading(true);
updateTrees(); updateTrees();
}, []); }, []);
...@@ -303,9 +326,12 @@ const UserManage = () => { ...@@ -303,9 +326,12 @@ const UserManage = () => {
setOrgID(props[0] || currentSelectOrg); setOrgID(props[0] || currentSelectOrg);
getOneOUUserListNew(props[0] || currentSelectOrg) getOneOUUserListNew(props[0] || currentSelectOrg)
.then(res => { .then(res => {
if (res.success) { if (res.IsSuccess) {
setTableLoading(false); setTableLoading(false);
const table = res.root.map((item, index) => { const temp = flatten(getUsers(res.Data));
console.log(temp);
setTableTitle(temp.length);
const table = temp.map((item, index) => {
item.key = index; item.key = index;
item.phone = item.phone || '-'; item.phone = item.phone || '-';
item.ddid = item.ddid ? '已绑定' : '未绑定'; item.ddid = item.ddid ? '已绑定' : '未绑定';
...@@ -320,7 +346,25 @@ const UserManage = () => { ...@@ -320,7 +346,25 @@ const UserManage = () => {
message.error(err); message.error(err);
}); });
}; };
// 返回数据结构处理，扁平化
const getUsers = orgObj => {
let result = orgObj.Users;
result.map(item => {
item.OUID = orgObj.GroupId;
item.OUName = orgObj.GroupName;
return item;
});
if (orgObj.Childs.length > 0)
result = [...result, ...orgObj.Childs.map(o => getUsers(o))];
return result;
};
const flatten = arr => {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
};
const getTableTitle = () => `当前机构用户总数（ ${tableTitle} ）`;
// 左侧目录树相关操作 // 左侧目录树相关操作
const searchUser = () => { const searchUser = () => {
setSearchUserVisible(true); setSearchUserVisible(true);
...@@ -586,7 +630,7 @@ const UserManage = () => { ...@@ -586,7 +630,7 @@ const UserManage = () => {
}); });
}; };
const submitChangeOrg = () => const submitChangeOrg = () =>
addToOrg(currentUser.userID, orgID, newOrgID) addToOrg(currentUser.userID, currentUser.OUID, newOrgID)
.then(res => { .then(res => {
if (res.success) { if (res.success) {
setChangeOrgVisible(false); setChangeOrgVisible(false);
...@@ -658,7 +702,13 @@ const UserManage = () => { ...@@ -658,7 +702,13 @@ const UserManage = () => {
message.error(err); message.error(err);
}); });
const submitFreezeUser = () => { const submitFreezeUser = () => {
postSetUserState(currentUser.userID, +!currentUser.state) let state = '';
if (currentUser.state === '0') {
state = '1';
} else {
state = '0';
}
postSetUserState(currentUser.userID, state)
.then(res => { .then(res => {
if (res.success) { if (res.success) {
setFreezeUserVisible(false); setFreezeUserVisible(false);
...@@ -746,6 +796,7 @@ const UserManage = () => { ...@@ -746,6 +796,7 @@ const UserManage = () => {
</div> </div>
<div className={styles.userContainer}> <div className={styles.userContainer}>
<Table <Table
title={getTableTitle}
bordered bordered
columns={columns} columns={columns}
dataSource={tableData} dataSource={tableData}
...@@ -1008,7 +1059,7 @@ const UserManage = () => { ...@@ -1008,7 +1059,7 @@ const UserManage = () => {
</Form> </Form>
</Modal> </Modal>
<Modal <Modal
title="请确认冻结用户" title="请确认"
visible={freezeUserVisible} visible={freezeUserVisible}
onOk={submitFreezeUser} onOk={submitFreezeUser}
onCancel={() => setFreezeUserVisible(false)} onCancel={() => setFreezeUserVisible(false)}
......
src/routes/config.js
View file @ 6e8b3970
...@@ -17,6 +17,7 @@ import Welcome from '../pages/Welcome'; ...@@ -17,6 +17,7 @@ import Welcome from '../pages/Welcome';
import RequestTest from '../pages/testPages/request'; import RequestTest from '../pages/testPages/request';
import InitDataBase from '../pages/database/InitDataBase'; import InitDataBase from '../pages/database/InitDataBase';
import ManagementDataBase from '../pages/database/ManagementDataBase'; import ManagementDataBase from '../pages/database/ManagementDataBase';
import DatabaseConnectConfig from '@/pages/database/databaseConfig/DatabaseConfig';
import CurrentSolution from '@/pages/database/CurrentSolution'; import CurrentSolution from '@/pages/database/CurrentSolution';
import UserManage from '../pages/userCenter/UserManage'; import UserManage from '../pages/userCenter/UserManage';
import RoleManage from '@/pages/userCenter/roleManage/RoleManage'; import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
...@@ -89,6 +90,12 @@ export default { ...@@ -89,6 +90,12 @@ export default {
authority: superAuthority, authority: superAuthority,
component: ManagementDataBase, component: ManagementDataBase,
}, },
{
path: '/dbm/connectConfig',
name: '数据库连接配置',
authority: superAuthority,
component: DatabaseConnectConfig,
},
], ],
}, },
{ {
......
src/services/appConfig/api.js
View file @ 6e8b3970
import { get, post } from '@/services/index'; import { get, post } from '@/services/index';
/** ***网站配置*** */
// 七参数初始化 // 七参数初始化
export const getSevenParams = () => export const getSevenParams = () =>
get(`/Cityinterface/rest/services/OMS.svc/M_GetSevenParams`, { get(`/Cityinterface/rest/services/OMS.svc/M_GetSevenParams`, {
...@@ -19,3 +20,45 @@ export const postSevenParams = sevenFormData => ...@@ -19,3 +20,45 @@ export const postSevenParams = sevenFormData =>
`/Cityinterface/rest/services/OMS.svc/M_SetSevenParams?_version=9999`, `/Cityinterface/rest/services/OMS.svc/M_SetSevenParams?_version=9999`,
sevenFormData, sevenFormData,
); );
/** ***菜单管理*** */
// 获取菜单树
export const getTree = () =>
get(`/Cityinterface/rest/services/OMS.svc/MiniAppSiteTree`, {
_version: 9999,
_dc: new Date().getTime(),
node: -2,
userMode: 'super',
// subSystemValue: '手持系统',
// subSystemName: '手持系统',
select: '',
});
// 添加菜单
export const addMenuApi = (
menuID,
menuName,
shortName,
imageUrl,
pageUrl,
funParam,
) =>
get(`/Cityinterface/rest/services/OMS.svc/MiniApp_AddMenu`, {
_version: 9999,
_dc: new Date().getTime(),
parentID: menuID,
menuName,
shortName,
imageUrl,
pageUrl,
funParam,
subSystemValue: 'miniapp',
relatedRoleList: '',
});
// 添加菜单
export const getRoleList = () =>
get(`/Cityinterface/rest/services/OMS.svc/P_GetRoleListPlain`, {
_version: 9999,
_dc: new Date().getTime(),
subSystemValue: 'miniapp',
});
src/services/database/api.js
View file @ 6e8b3970
...@@ -26,3 +26,70 @@ export const updateDateBase = params => ...@@ -26,3 +26,70 @@ export const updateDateBase = params =>
'/Cityinterface/rest/services/OMS.svc/DatabaseStandard_UpdateDateBase', '/Cityinterface/rest/services/OMS.svc/DatabaseStandard_UpdateDateBase',
params, params,
); );
/**
* @数据库连接配置
*/
// 删除数据库连接
export const deleteConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_DeleteConnString', params);
// SQL数据库连接
export const getSQLServerConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetSQLServerConnString', params);
// 新增SQLServer数据库连接
export const addSQLServerConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddSQLServerConnString', params);
// 删除SQL连接
export const editSQLServerConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditSQLServerConnString', params);
// SQL数据库测试连接
export const getSQLServerConnectionTest = params =>
get(
'/Cityinterface/rest/services/OMS.svc/S_GetSQLServerConnectionTest',
params,
);
/**
* @Oracle数据库
*/
// Oracle连接记录
export const getOracleConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetOracleConnString', params);
// 新增Oracle连接
export const addOracleConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddOracleConnString', params);
// 编辑Oracle连接
export const editOracleConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditOracleConnString', params);
// 测试连接
export const getOracleConnectionTest = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetOracleConnectionTest', params);
/**
* @MongoDB连接
*/
// MongoDB连接记录
export const getMongoDBConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetMongoDBConnString', params);
// 新增连接配置
export const addMongoDBConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddMongoDBConnString', params);
// 编辑分享
export const editMongoDBConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditMongoDBConnString', params);
// 测试连接
export const getMongoDBConnectionTest = params =>
get('/Cityinterface/rest/services/OMS.svc/S_MongoDBConnectionTest', params);
/**
* @MySQL连接
*/
// MySQL连接记录
export const getMySQLConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetMySQLConnString', params);
// 新增配置连接
export const addMySQLConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddMySQLConnString', params);
// 测试连接
export const getMySQLConnectionTest = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetMySQLConnectionTest', params);
export const editMySQLConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditMySQLConnString', params);
src/services/userCenter/userManage/api.js
View file @ 6e8b3970
import { get, post } from '@/services/index'; // import { get, post } from '@/services/index';
import qs from 'qs'; import qs from 'qs';
import { CITY_SERVICE, get, post, PUBLISH_SERVICE } from '@/services/index';
export const getUserTree = (selectOU, node) => export const getUserTree = (selectOU, node) =>
get(`/Cityinterface/rest/services/OMS.svc/U_GetOUTree`, { get(`/Cityinterface/rest/services/OMS.svc/U_GetOUTree`, {
...@@ -9,11 +10,18 @@ export const getUserTree = (selectOU, node) => ...@@ -9,11 +10,18 @@ export const getUserTree = (selectOU, node) =>
node, node,
}); });
// export const getOneOUUserListNew = OUID =>
// get(`/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew`, {
// _version: 9999,
// _dc: new Date().getTime(),
// OUID,
// });
export const getOneOUUserListNew = OUID => export const getOneOUUserListNew = OUID =>
get(`/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew`, { get(`${PUBLISH_SERVICE}/UserCenter/GroupUserList`, {
_version: 9999, _version: 9999,
_dc: new Date().getTime(), _dc: new Date().getTime(),
OUID, GroupId: OUID,
}); });
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment