Skip to content

A
admin-ci-test
提交 3be456a3 作者: ZhangLingKun
操作

功能：账号管理联调

上级 78099ab9
正在显示 包含 467 行增加 和 11 行删除
src/api/interface/systemManageType.ts
......@@ -44,7 +44,7 @@ export type insertBAccountType = InterFunction<
email?: string;
id: number;
passWord: number;
phoneNum: number;
phoneNum: string;
provinceCode?: number;
remark?: string;
userName: string;
......@@ -69,7 +69,7 @@ export type updateBAccountType = InterFunction<
email?: string;
id: number;
passWord: number;
phoneNum: number;
phoneNum: string;
provinceCode?: number;
remark?: string;
userName: string;
......@@ -87,7 +87,7 @@ export type updatePasswordType = InterFunction<
email?: string;
id: number;
passWord: number;
phoneNum: number;
phoneNum: string;
provinceCode?: number;
remark?: string;
userName: string;
......
src/api/request.ts
......@@ -14,7 +14,7 @@ const service = axios.create({
service.interceptors.request.use(
(config: any) => {
const token = Cookies.get('SHAREFLY-TOKEN');
console.log('token --->', token);
// console.log('token --->', token);
if (token) {
config.headers.token = token;
}
......
src/components/layout/menu/index.tsx
......@@ -4,12 +4,15 @@ import { Layout, Menu } from 'antd';
import { RouteObjectType, routerList } from '~/router/router';
import { useLocation, useNavigate } from 'react-router-dom';
import { GetRouteByID, getRouteID, getRoutePid } from '~/utils/router';
import { useSelector } from 'react-redux';
type MenuItem = Required<MenuProps>['items'][number];
const { Sider } = Layout;
export function MenuView() {
// 侧边栏是否折叠状态
const collapsedActive = useSelector((state: any) => state.Menu.collapsedActive);
// 菜单路由列表
const [items, setItems] = useState<MenuItem[]>([]);
// 当选选中的项目
......@@ -71,7 +74,13 @@ export function MenuView() {
setSelectedKeys([getRouteID(routerList, location.pathname).toString()]);
}, []);
return (
<Sider style={{ paddingTop: '50px' }} collapsible collapsed={false} width={180} trigger={null}>
<Sider
style={{ paddingTop: '50px' }}
collapsible
width={180}
trigger={null}
collapsed={collapsedActive}
>
<Menu
openKeys={openKeys}
selectedKeys={selectedKeys}
......
src/pages/systemManage/accountManage/comp/addEditModal/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { InterListType, InterReqType } from '~/api/interface';
import { insertBAccountType, listBAccountPageType } from '~/api/interface/systemManageType';
import { Col, Form, Input, message, Modal, Row, Select, TreeSelect } from 'antd';
import { SystemManageAPI } from '~/api';
// 列表的类型
type TableType = InterListType<listBAccountPageType>;
// 请求的表单类型
type ReqType = InterReqType<insertBAccountType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const AddEditModal: React.FC<propType> = (props) => {
AddEditModal.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
/// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await SystemManageAPI[data?.id ? 'updateBAccount' : 'insertBAccount']({
...data,
...values,
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
form.setFieldsValue(data);
// console.log('data --->', data);
}, [open]);
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={600}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='账号'
name='accountNo'
rules={[{ required: true, message: '请输入账号' }]}
>
<Input placeholder={'请输入账号'} maxLength={20} allowClear />
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='姓名'
name='userName'
rules={[{ required: true, message: '请输入姓名' }]}
>
<Input placeholder={'请输入姓名'} maxLength={20} allowClear />
</Form.Item>
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='手机号'
name='phoneNum'
rules={[
{ required: true, message: '请输入手机号' },
// 校验手机号
() => ({
validator(_, value) {
if (!value || /^1[3-9]\d{9}$/.test(value)) {
return Promise.resolve();
}
return Promise.reject('请输入正确的手机号');
},
}),
]}
>
<Input placeholder={'请输入手机号'} maxLength={20} allowClear type={'number'} />
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='角色'
name='roleId'
rules={[{ required: true, message: '请选择角色' }]}
initialValue={1}
>
<Select
placeholder={'请选择角色'}
style={{ width: '168px' }}
options={[{ value: 1, label: '超级管理员' }]}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='邮箱'
name='email'
rules={[{ type: 'email', message: '请输入正确的邮箱' }]}
>
<Input placeholder={'请输入邮箱'} maxLength={48} allowClear />
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='账号类型'
name='userType'
rules={[{ required: true, message: '请选择账号类型' }]}
initialValue={1}
>
<Select
placeholder={'请选择账号类型'}
style={{ width: '168px' }}
options={[
{ value: 1, label: '员工' },
{ value: 0, label: '合伙人' },
]}
/>
</Form.Item>
</Col>
</Row>
<Form.Item
label='所属单位'
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
rules={[{ required: true, message: '请选择所属单位' }]}
name='companyId'
initialValue={1}
>
<TreeSelect
treeData={[{ id: 1, company: '科比特' }]}
placeholder='请选择所属单位'
fieldNames={{
children: 'children',
label: 'company',
value: 'id',
}}
allowClear
/>
</Form.Item>
<Form.Item
label='账号状态'
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
name='accountStatus'
initialValue={1}
>
<Select
placeholder={'请选择账号状态'}
options={[
{ value: 1, label: '可用' },
{ value: 0, label: '停用' },
]}
/>
</Form.Item>
{!data?.id && (
<>
<Form.Item
label='密码'
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
rules={[{ required: true, message: '请输入密码' }]}
name='passWord'
>
<Input.Password
placeholder='请输入密码'
maxLength={20}
autoComplete='new-password'
allowClear
/>
</Form.Item>
<Form.Item
label='确认密码'
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
name='alertPwd'
rules={[
{ required: true, message: '请输入密码' },
// 判断密码是否相同
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('passWord') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('两次密码不一致'));
},
}),
]}
>
<Input.Password
placeholder='请再次输入密码'
maxLength={20}
autoComplete='new-password'
allowClear
/>
</Form.Item>
</>
)}
<Form.Item label='备注' labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} name='remark'>
<Input.TextArea placeholder='请输入备注' maxLength={70} showCount rows={4} />
</Form.Item>
</Form>
</Modal>
);
};
export default AddEditModal;
src/pages/systemManage/accountManage/comp/changeModal/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { InterListType, InterReqType } from '~/api/interface';
import { insertBAccountType, listBAccountPageType } from '~/api/interface/systemManageType';
import { Form, Input, message, Modal } from 'antd';
import { SystemManageAPI } from '~/api';
// 列表的类型
type TableType = InterListType<listBAccountPageType>;
// 请求的表单类型
type ReqType = InterReqType<insertBAccountType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const ChangeModal: React.FC<propType> = (props) => {
// 参数
const { title, open, closed, data } = props;
/// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await SystemManageAPI.updatePassword({
...values,
id: Number(data?.id),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
form.setFieldsValue(data);
// console.log('data --->', data);
}, [open]);
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={600}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
>
<Form.Item
label='账号'
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
rules={[{ required: true, message: '请输入账号' }]}
name='accountNo'
>
{data?.accountNo}
</Form.Item>
<Form.Item
label='密码'
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
rules={[{ required: true, message: '请输入密码' }]}
name='passWord'
>
<Input.Password
placeholder='请输入密码'
maxLength={20}
autoComplete='new-password'
allowClear
/>
</Form.Item>
<Form.Item
label='确认密码'
labelCol={{ span: 4 }}
wrapperCol={{ span: 18 }}
name='alertPwd'
rules={[
{ required: true, message: '请输入密码' },
// 判断密码是否相同
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('passWord') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('两次密码不一致'));
},
}),
]}
>
<Input.Password
placeholder='请再次输入密码'
maxLength={20}
autoComplete='new-password'
allowClear
/>
</Form.Item>
</Form>
</Modal>
);
};
export default ChangeModal;
src/pages/systemManage/accountManage/index.tsx
......@@ -2,10 +2,12 @@ import { useEffect, useState } from 'react';
import { InterListType, InterReqType } from '~/api/interface';
import { listBAccountPageType } from '~/api/interface/systemManageType';
import SearchBox from '~/components/search-box';
import { Button, Table, Tooltip } from 'antd';
import { Button, message, Modal, Table, Tooltip } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import { SystemManageAPI } from '~/api';
import AddEditModal from '~/pages/systemManage/accountManage/comp/addEditModal';
import ChangeModal from '~/pages/systemManage/accountManage/comp/changeModal';
// 列表的数据类型
type TableType = InterListType<listBAccountPageType>;
......@@ -15,6 +17,13 @@ type ReqType = InterReqType<listBAccountPageType>;
let query: ReqType = {};
function AccountManageView() {
const { confirm } = Modal;
// 新增编辑弹窗是否开启
const [addEditModalVisible, setAddEditModalVisible] = useState(false);
// 变更密码弹窗是否开启
const [changeModalVisible, setChangeModalVisible] = useState(false);
// 需要编辑的数据
const [editData, setEditData] = useState<TableType[0]>();
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
// 表格分页配置
......@@ -54,6 +63,23 @@ function AccountManageView() {
query = data;
getTableList(data).then();
};
// 删除用户
const handleDelete = (value: TableType[0]) => {
confirm({
title: '提示',
content: '是否删除该账号？',
onOk: async () => {
const res = await SystemManageAPI.removeBAccount({ userAccountId: value.id });
if (res && res.code === '200') {
message.success('删除成功');
paginationChange(
tableData.length === 1 ? pagination.current - 1 : pagination.current,
pagination.pageSize,
);
}
},
});
};
// componentDidMount
useEffect(() => {
query = {};
......@@ -123,11 +149,27 @@ function AccountManageView() {
width: '160px',
fixed: 'right',
align: 'center',
render: (_text, _record) => (
render: (_text, record) => (
<>
<Button type='link'>变更</Button>
<Button type='link'>修改密码</Button>
<Button type='link' danger>
<Button
type='link'
onClick={() => {
setEditData(JSON.parse(JSON.stringify(record)));
setAddEditModalVisible(true);
}}
>
变更
</Button>
<Button
type='link'
onClick={() => {
setEditData(JSON.parse(JSON.stringify(record)));
setChangeModalVisible(true);
}}
>
修改密码
</Button>
<Button type='link' danger onClick={() => handleDelete(record)}>
删除
</Button>
</>
......@@ -174,7 +216,13 @@ function AccountManageView() {
]}
child={
<>
<Button type={'primary'} icon={<PlusOutlined />}>
<Button
type={'primary'}
icon={<PlusOutlined />}
onClick={() => {
setAddEditModalVisible(true);
}}
>
新增账号
</Button>
</>
......@@ -198,6 +246,26 @@ function AccountManageView() {
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
/>
<AddEditModal
open={addEditModalVisible}
title={editData ? '变更账号' : '新增账号'}
data={editData}
closed={() => {
setAddEditModalVisible(false);
setEditData(undefined);
paginationChange(pagination.current, pagination.pageSize);
}}
/>
<ChangeModal
open={changeModalVisible}
title={'修改密码'}
data={editData}
closed={() => {
setChangeModalVisible(false);
setEditData(undefined);
paginationChange(pagination.current, pagination.pageSize);
}}
/>
</>
);
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论