feat(前端):终端列表
parent
88dea8dfd8
commit
08b9097d3f
|
|
@ -8,6 +8,8 @@ import {
|
|||
import { Avatar, Button, Dropdown, Layout, Menu, message } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { history, Outlet, useLocation } from 'umi';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import './index.less';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
|
@ -68,6 +70,7 @@ const MainLayout: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<Layout className="main-layout">
|
||||
<Sider
|
||||
trigger={null}
|
||||
|
|
@ -119,6 +122,7 @@ const MainLayout: React.FC = () => {
|
|||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
// custom-tree.tsx
|
||||
import React from 'react';
|
||||
import { Tree } from 'antd';
|
||||
import type { DataNode, TreeProps } from 'antd/es/tree';
|
||||
|
||||
interface CustomTreeProps extends Omit<TreeProps, 'treeData'> {
|
||||
treeData: any[];
|
||||
titleField: string;
|
||||
keyField: string;
|
||||
childrenField?: string;
|
||||
}
|
||||
|
||||
const CustomTree: React.FC<CustomTreeProps> = ({
|
||||
treeData,
|
||||
titleField,
|
||||
keyField,
|
||||
childrenField = 'children',
|
||||
...restProps
|
||||
}) => {
|
||||
// Transform the tree data to match Ant Design's expected structure
|
||||
const transformTreeData = (data: any[]): DataNode[] => {
|
||||
return data.map(item => {
|
||||
const node: DataNode = {
|
||||
title: item[titleField],
|
||||
key: item[keyField],
|
||||
...item
|
||||
};
|
||||
|
||||
// Handle children if they exist
|
||||
if (item[childrenField] && Array.isArray(item[childrenField])) {
|
||||
node.children = transformTreeData(item[childrenField]);
|
||||
}
|
||||
|
||||
return node;
|
||||
});
|
||||
};
|
||||
|
||||
const transformedData = transformTreeData(treeData);
|
||||
|
||||
return <Tree treeData={transformedData} {...restProps} />;
|
||||
};
|
||||
|
||||
export default CustomTree;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
export interface User {
|
||||
id: string;
|
||||
user_id:string,
|
||||
username: string;
|
||||
loginName: string;
|
||||
userGroup: string;
|
||||
userType: string;
|
||||
}
|
||||
|
||||
export interface OrganizationNode {
|
||||
id: string;
|
||||
name: string;
|
||||
children?: OrganizationNode[];
|
||||
}
|
||||
|
||||
export interface ModalBaseNode {
|
||||
visible:boolean;
|
||||
recordData: any;
|
||||
selectedOrg:string;
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.user_content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f7f8fa;
|
||||
.left_content {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
background-color: #fff;
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
}
|
||||
.tree_box {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
overflow: auto;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
.right_content {
|
||||
width: calc(100% - 400px);
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
.teble_content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
.teble_box {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global {
|
||||
:where(.css-dev-only-do-not-override-1vjf2v5).ant-pagination
|
||||
.ant-pagination-total-text {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,382 @@
|
|||
/* eslint-disable @typescript-eslint/no-use-before-define */
|
||||
import CustomTree from '@/pages/components/customTree';
|
||||
import { deleteUser } from '@/services/userList';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
PlusOutlined,
|
||||
TeamOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Input, message, Popconfirm, Popover, Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { OrganizationNode, Device } from './contast';
|
||||
import styles from './index.less';
|
||||
import EditModal from './mod/eidtDevice';
|
||||
import CreatGroup from './mod/group';
|
||||
|
||||
const UserListPage: React.FC = () => {
|
||||
const [orgTreeData, setOrgTreeData] = useState<OrganizationNode[]>([]);
|
||||
const [selectedOrg, setSelectedOrg] = useState<string>('');
|
||||
|
||||
// 用户列表
|
||||
const [dataSource, setDataSource] = useState<Device[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [searchText, setSearchText] = useState<string>('');
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<[]>([]);
|
||||
|
||||
// 分页参数
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
const [total, setTotal] = useState<number>(0);
|
||||
// 编辑用户
|
||||
const [currentUserInfo, setCurrentUserInfo] = useState<any>({
|
||||
visible: false,
|
||||
});
|
||||
|
||||
// 添加分组
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
|
||||
// 获取用户分组组织树
|
||||
useEffect(() => {
|
||||
getGroupList();
|
||||
}, []);
|
||||
|
||||
// 获取用户列表数据
|
||||
useEffect(() => {
|
||||
getDataSource();
|
||||
}, [selectedOrg, currentPage, pageSize]);
|
||||
|
||||
const getGroupList = () => {
|
||||
const mockOrgData: OrganizationNode[] = [
|
||||
{
|
||||
name: 'Headquartershdy',
|
||||
id: '1',
|
||||
children: [
|
||||
{
|
||||
name: 'HR Department',
|
||||
id: '2',
|
||||
},
|
||||
{
|
||||
name: 'IT Department',
|
||||
id: '3',
|
||||
children: [
|
||||
{
|
||||
name: 'Frontend Team',
|
||||
id: '4',
|
||||
},
|
||||
{
|
||||
name: 'Backend Team',
|
||||
id: '5',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Finance Department',
|
||||
id: '6',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
setSelectedOrg(mockOrgData[0].id as string);
|
||||
setOrgTreeData(mockOrgData);
|
||||
};
|
||||
|
||||
const getDataSource = () => {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const mockUsers: Device[] = Array.from(
|
||||
{ length: pageSize },
|
||||
(_, index) => ({
|
||||
id: `${startIndex + index + 1}`,
|
||||
username: `User ${startIndex + index + 1}`,
|
||||
loginName: `login${startIndex + index + 1}`,
|
||||
userGroup:
|
||||
index % 3 === 0 ? 'Admin' : index % 3 === 1 ? 'Manager' : 'User',
|
||||
userType:
|
||||
index % 4 === 0
|
||||
? 'Full-time'
|
||||
: index % 4 === 1
|
||||
? 'Part-time'
|
||||
: index % 4 === 2
|
||||
? 'Contractor'
|
||||
: 'Intern',
|
||||
}),
|
||||
);
|
||||
|
||||
setDataSource(mockUsers);
|
||||
setTotal(100);
|
||||
setLoading(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const onDelete = (device?: Device) => {
|
||||
const { user_id } = device || {};
|
||||
const payload = {
|
||||
ids: user_id ? [user_id] : selectedRowKeys,
|
||||
};
|
||||
deleteUser(payload as any).then((res) => {
|
||||
console.log('res=====', res);
|
||||
const { success } = res || {};
|
||||
if (success) {
|
||||
message.success('删除成功');
|
||||
setSelectedRowKeys([]);
|
||||
getDataSource();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditUserInfo = (device: Device) => {
|
||||
setCurrentUserInfo({
|
||||
recordData: { ...device },
|
||||
visible: true,
|
||||
});
|
||||
};
|
||||
|
||||
const columns: ColumnsType<Device> = [
|
||||
{
|
||||
title: '显示名称',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: '终端名称',
|
||||
dataIndex: 'loginName',
|
||||
key: 'loginName',
|
||||
},
|
||||
{
|
||||
title: '终端分组',
|
||||
dataIndex: 'userGroup',
|
||||
key: 'userGroup',
|
||||
},
|
||||
{
|
||||
title: 'IP地址',
|
||||
dataIndex: 'sex',
|
||||
key: 'sex',
|
||||
},
|
||||
{
|
||||
title: '终端标识',
|
||||
dataIndex: 'mac_addr',
|
||||
key: 'mac_addr',
|
||||
},
|
||||
{
|
||||
title: '终端类型',
|
||||
dataIndex: 'device_type',
|
||||
key: 'device_type',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
render: (_, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Button type="link" onClick={() => handleEditUserInfo(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Popover
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<div>
|
||||
<Popconfirm
|
||||
title=""
|
||||
description="删除操作不可逆，请确认是否删除?"
|
||||
onConfirm={() => onDelete(record)}
|
||||
// onCancel={cancel}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link">删除</Button>
|
||||
</Popconfirm>
|
||||
<div>
|
||||
<Button type="link" onClick={() => {}}>
|
||||
绑定用户
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="link" onClick={() => {}}>
|
||||
绑定镜像
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<a onClick={(e) => e.preventDefault()}>
|
||||
更多
|
||||
<DownOutlined style={{ fontSize: '0.7rem' }} />
|
||||
</a>
|
||||
</Popover>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const onOrgSelect = (selectedKeys: React.Key[]) => {
|
||||
if (selectedKeys.length > 0) {
|
||||
setSelectedOrg(selectedKeys[0] as string);
|
||||
setCurrentPage(1);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, size: number) => {
|
||||
setCurrentPage(page);
|
||||
setPageSize(size);
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (current: number, size: number) => {
|
||||
setCurrentPage(1);
|
||||
setPageSize(size);
|
||||
};
|
||||
|
||||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
|
||||
console.log('selectedRowKeys changed: ', newSelectedRowKeys);
|
||||
setSelectedRowKeys(newSelectedRowKeys as any);
|
||||
};
|
||||
|
||||
const onDeleteGroup = () => {};
|
||||
|
||||
return (
|
||||
<div className={styles.user_content}>
|
||||
<div className={styles.left_content}>
|
||||
<div className={styles.search}>
|
||||
<div style={{ paddingBottom: '5px' }}>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ marginRight: '8px', fontSize: '16px' }}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setVisible(true)}
|
||||
/>
|
||||
<Popconfirm
|
||||
title=""
|
||||
description="删除操作不可逆，请确认是否删除?"
|
||||
onConfirm={() => onDeleteGroup()}
|
||||
// onCancel={cancel}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
disabled={selectedOrg === ''}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ fontSize: '16px' }}
|
||||
icon={<DeleteOutlined />}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<Input.Search
|
||||
placeholder="请输入名称"
|
||||
style={{ marginBottom: 6 }}
|
||||
onSearch={(value) => console.log('Search org:', value)}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.tree_box}>
|
||||
<CustomTree
|
||||
treeData={orgTreeData}
|
||||
titleField="name"
|
||||
keyField="id"
|
||||
childrenField="children"
|
||||
defaultExpandAll
|
||||
onSelect={onOrgSelect}
|
||||
selectedKeys={[selectedOrg]}
|
||||
icon={<TeamOutlined style={{ fontSize: '15px' }} />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.right_content}>
|
||||
<div className={styles.teble_content}>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Popconfirm
|
||||
title=""
|
||||
description="删除操作不可逆，请确认是否删除?"
|
||||
onConfirm={() => onDelete()}
|
||||
// onCancel={cancel}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
disabled={selectedRowKeys.length === 0}
|
||||
>
|
||||
<Button
|
||||
disabled={selectedRowKeys.length === 0}
|
||||
style={{ marginRight: '8px' }}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Button style={{ marginRight: '8px' }} onClick={getDataSource}>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<Input.Search
|
||||
placeholder="Search users"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: 300 }}
|
||||
onSearch={(value) => {
|
||||
console.log('Search user:', value);
|
||||
setCurrentPage(1); // Reset to first page when searching
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.teble_box}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
loading={loading}
|
||||
rowKey="id"
|
||||
rowSelection={{
|
||||
selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}}
|
||||
pagination={{
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
total: total,
|
||||
onChange: handlePageChange,
|
||||
onShowSizeChange: handlePageSizeChange,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => {
|
||||
return `共${total}条数据`;
|
||||
},
|
||||
}}
|
||||
scroll={{ x: 'max-content', y: 55 * 12 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CreatGroup
|
||||
visible={visible}
|
||||
onCancel={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
selectedOrg={selectedOrg}
|
||||
onOk={() => {}}
|
||||
orgTreeData={orgTreeData}
|
||||
/>
|
||||
<EditModal
|
||||
selectedOrg={selectedOrg}
|
||||
orgTreeData={orgTreeData}
|
||||
currentUserInfo={currentUserInfo}
|
||||
onCancel={() => {
|
||||
setCurrentUserInfo({
|
||||
recordData: {},
|
||||
visible: false,
|
||||
});
|
||||
}}
|
||||
onOk={() => {}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserListPage;
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
// index.tsx
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Radio,
|
||||
Select,
|
||||
TreeSelect,
|
||||
} from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
import { ModalBaseNode, OrganizationNode } from '../../contast';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
interface UserEditModalProps {
|
||||
// visible: boolean;
|
||||
orgTreeData: OrganizationNode[];
|
||||
onCancel: () => void;
|
||||
onOk: (values: any) => void;
|
||||
confirmLoading?: boolean;
|
||||
currentUserInfo?: ModalBaseNode;
|
||||
selectedOrg?: string;
|
||||
}
|
||||
|
||||
const UserEditModal: React.FC<UserEditModalProps> = ({
|
||||
orgTreeData,
|
||||
onCancel,
|
||||
onOk,
|
||||
confirmLoading = false,
|
||||
currentUserInfo,
|
||||
}) => {
|
||||
const { recordData, visible, selectedOrg } = currentUserInfo || {};
|
||||
const { user_id } = recordData || {};
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
const initialValues = { user_group_id: [selectedOrg], status: 1 };
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [visible, form, recordData, selectedOrg]);
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
onOk(values);
|
||||
} catch (error) {
|
||||
message.error('请检查表单字段');
|
||||
}
|
||||
};
|
||||
|
||||
const validateMessages = {
|
||||
required: '${label} is required!',
|
||||
types: {
|
||||
email: '${label} is not a valid email!',
|
||||
number: '${label} is not a valid number!',
|
||||
cell_phone: '${label} is not a valid cell phone number!',
|
||||
},
|
||||
number: {
|
||||
range: '${label} must be between ${min} and ${max}',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={user_id ? '编辑用户信息' : '新增用户'}
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={handleOk}
|
||||
confirmLoading={confirmLoading}
|
||||
width={600}
|
||||
maskClosable={false}
|
||||
centered={true}
|
||||
destroyOnHidden={true}
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
// 按钮居中对其
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'right' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleOk}
|
||||
style={{ marginRight: '20px' }}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
<Button onClick={onCancel} style={{ marginRight: '20px' }}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
layout="horizontal"
|
||||
style={{ paddingTop: '20px', paddingBottom: '20px' }}
|
||||
validateMessages={validateMessages}
|
||||
>
|
||||
<Form.Item
|
||||
name="loginName"
|
||||
label="显示名称"
|
||||
rules={[{ required: true, message: '请输入显示名称' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="device_id"
|
||||
label="终端标识"
|
||||
rules={[{ required: true, message: '请输入终端标识' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="user_group_id"
|
||||
label="终端分组"
|
||||
rules={[{ required: true, message: '请选择终端分组' }]}
|
||||
>
|
||||
<TreeSelect
|
||||
showSearch
|
||||
allowClear={false}
|
||||
treeDefaultExpandAll
|
||||
placeholder="请选择终端分组"
|
||||
treeData={orgTreeData}
|
||||
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="认证方式"
|
||||
rules={[{ required: false, message: '请选择认证方式' }]}
|
||||
>
|
||||
<Radio.Group optionType="button">
|
||||
<Radio value={1}>用户认证</Radio>
|
||||
<Radio value={2}>终端认证</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="ip_addr"
|
||||
label="IP地址"
|
||||
rules={[{ required: false, message: '请输入IP地址' }]}
|
||||
>
|
||||
<Input placeholder="请输入IP地址" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="mac addr"
|
||||
label="MAC地址"
|
||||
rules={[{ required: false, message: '请输入MAC地址' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{/* <Form.Item
|
||||
name="终端厂商"
|
||||
label="mac_addr"
|
||||
rules={[{ required: true, message: '请输入终端厂商' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item> */}
|
||||
<Form.Item
|
||||
name="model"
|
||||
label="终端型号"
|
||||
rules={[{ required: false, message: '请输入终端型号' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="描述"
|
||||
rules={[{ required: false, message: '请输入终端型号' }]}
|
||||
>
|
||||
<Input.TextArea rows={4} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserEditModal;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
// d:\VDI\vdi\web-fe\src\pages\userList\mod\group\index.tsx
|
||||
import { Button, Form, Input, Modal, TreeSelect } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
// import type { DataNode } from 'antd/es/tree';
|
||||
import { OrganizationNode } from '../../contast';
|
||||
|
||||
interface CreatGroupProps {
|
||||
visible: boolean;
|
||||
selectedOrg: string;
|
||||
onCancel: () => void;
|
||||
onOk: (values: any) => void;
|
||||
orgTreeData: OrganizationNode[];
|
||||
}
|
||||
|
||||
const CreatGroup: React.FC<CreatGroupProps> = (props) => {
|
||||
const { visible, onCancel, onOk, orgTreeData, selectedOrg } = props;
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
const initialValues = { parent_device_group_id: [selectedOrg] };
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [visible, form, selectedOrg]);
|
||||
|
||||
// Flatten tree data for parent group selection
|
||||
// const flattenTreeData = (data: OrganizationNode[], result: { value: string; label: string }[] = []) => {
|
||||
// data.forEach(item => {
|
||||
// result.push({ value: item.id as string, label: item.name as string });
|
||||
// if (item.children) {
|
||||
// flattenTreeData(item.children, result);
|
||||
// }
|
||||
// });
|
||||
// return result;
|
||||
// };
|
||||
|
||||
// const parentGroupOptions = flattenTreeData(orgTreeData);
|
||||
|
||||
const handleOk = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
};
|
||||
|
||||
const handleFinish = (values: any) => {
|
||||
onOk(values);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="添加用户分组"
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
centered={true}
|
||||
destroyOnHidden={true}
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'right' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleOk}
|
||||
style={{ marginRight: '20px' }}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
<Button onClick={onCancel} style={{ marginRight: '20px' }}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div style={{ height: '300px' }}>
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
layout="horizontal"
|
||||
onFinish={handleFinish}
|
||||
style={{ paddingTop: '20px', paddingBottom: '20px' }}
|
||||
>
|
||||
<Form.Item
|
||||
name="device_group_name:"
|
||||
label="分组名"
|
||||
rules={[{ required: true, message: '请输入分组名!' }]}
|
||||
>
|
||||
<Input placeholder="请输入分组名" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="parent_device_group_id" label="父分组名">
|
||||
<TreeSelect
|
||||
showSearch
|
||||
allowClear={false}
|
||||
treeDefaultExpandAll
|
||||
placeholder="请选择用户分组"
|
||||
treeData={orgTreeData}
|
||||
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreatGroup;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
export interface User {
|
||||
id: string;
|
||||
user_id:string,
|
||||
username: string;
|
||||
loginName: string;
|
||||
userGroup: string;
|
||||
userType: string;
|
||||
}
|
||||
|
||||
export interface OrganizationNode {
|
||||
id: string;
|
||||
name: string;
|
||||
children?: OrganizationNode[];
|
||||
}
|
||||
|
||||
export interface ModalBaseNode {
|
||||
visible:boolean;
|
||||
recordData: any;
|
||||
selectedOrg:string;
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
.user_content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f7f8fa;
|
||||
.left_content {
|
||||
width: 100%;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
background-color: #fff;
|
||||
|
|
@ -19,13 +20,26 @@
|
|||
}
|
||||
}
|
||||
.right_content {
|
||||
width: 100%;
|
||||
width: calc(100% - 400px);
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
.teble_content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
.teble_box {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global {
|
||||
:where(.css-dev-only-do-not-override-1vjf2v5).ant-pagination
|
||||
.ant-pagination-total-text {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,89 +1,90 @@
|
|||
/* eslint-disable @typescript-eslint/no-use-before-define */
|
||||
import CustomTree from '@/pages/components/customTree';
|
||||
import { deleteUser } from '@/services/userList';
|
||||
import { DeleteOutlined, PlusOutlined, TeamOutlined } from '@ant-design/icons';
|
||||
import { Button, Col, Input, Pagination, Row, Table, Tree } from 'antd';
|
||||
import { Button, Input, Popconfirm, Table, message } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import CreatGroup from './mod/group';
|
||||
import { OrganizationNode, User } from './contast';
|
||||
import styles from './index.less';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
username: string;
|
||||
loginName: string;
|
||||
userGroup: string;
|
||||
userType: string;
|
||||
}
|
||||
|
||||
interface OrganizationNode {
|
||||
id: string;
|
||||
name: string;
|
||||
children?: OrganizationNode[];
|
||||
}
|
||||
import UserEditModal from './mod/eidtUser';
|
||||
import CreatGroup from './mod/group';
|
||||
import PasswordResetModal from './mod/passwordEdit';
|
||||
|
||||
const UserListPage: React.FC = () => {
|
||||
// State for organization tree
|
||||
const [orgTreeData, setOrgTreeData] = useState<DataNode[]>([]);
|
||||
const [orgTreeData, setOrgTreeData] = useState<OrganizationNode[]>([]);
|
||||
const [selectedOrg, setSelectedOrg] = useState<string>('');
|
||||
|
||||
// State for user list
|
||||
// 用户列表
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [searchText, setSearchText] = useState<string>('');
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<[]>([]);
|
||||
|
||||
// State for pagination
|
||||
// 分页参数
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
const [totalUsers, setTotalUsers] = useState<number>(0);
|
||||
// 编辑用户
|
||||
const [currentUserInfo, setCurrentUserInfo] = useState<any>({
|
||||
visible: false,
|
||||
});
|
||||
// 重置密码
|
||||
const [eidtPassword, setEidtPassword] = useState<any>({
|
||||
visible: false,
|
||||
});
|
||||
|
||||
// 添加分组
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
|
||||
// Mock data for organization tree
|
||||
// 获取用户分组组织树
|
||||
useEffect(() => {
|
||||
// In a real application, this would come from an API
|
||||
const mockOrgData: DataNode[] = [
|
||||
getUserGroupList();
|
||||
}, []);
|
||||
|
||||
// 获取用户列表数据
|
||||
useEffect(() => {
|
||||
getUserListInit();
|
||||
}, [selectedOrg, currentPage, pageSize]);
|
||||
|
||||
const getUserGroupList = () => {
|
||||
const mockOrgData: OrganizationNode[] = [
|
||||
{
|
||||
title: 'Headquarters',
|
||||
key: '1',
|
||||
name: 'Headquarters',
|
||||
id: '1',
|
||||
children: [
|
||||
{
|
||||
title: 'HR Department',
|
||||
key: '2',
|
||||
name: 'HR Department',
|
||||
id: '2',
|
||||
},
|
||||
{
|
||||
title: 'IT Department',
|
||||
key: '3',
|
||||
name: 'IT Department',
|
||||
id: '3',
|
||||
children: [
|
||||
{
|
||||
title: 'Frontend Team',
|
||||
key: '4',
|
||||
name: 'Frontend Team',
|
||||
id: '4',
|
||||
},
|
||||
{
|
||||
title: 'Backend Team',
|
||||
key: '5',
|
||||
name: 'Backend Team',
|
||||
id: '5',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Finance Department',
|
||||
key: '6',
|
||||
name: 'Finance Department',
|
||||
id: '6',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
setSelectedOrg(mockOrgData[0].key as string);
|
||||
setSelectedOrg(mockOrgData[0].id as string);
|
||||
setOrgTreeData(mockOrgData);
|
||||
}, []);
|
||||
};
|
||||
|
||||
// Mock data for users with pagination
|
||||
useEffect(() => {
|
||||
// In a real application, this would come from an API based on selected organization
|
||||
const getUserListInit = () => {
|
||||
setLoading(true);
|
||||
|
||||
// Simulate API call delay
|
||||
setTimeout(() => {
|
||||
// Generate mock users based on current page and page size
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const mockUsers: User[] = Array.from(
|
||||
{ length: pageSize },
|
||||
|
|
@ -105,12 +106,47 @@ const UserListPage: React.FC = () => {
|
|||
);
|
||||
|
||||
setUsers(mockUsers);
|
||||
setTotalUsers(100); // Mock total count
|
||||
setTotalUsers(100);
|
||||
setLoading(false);
|
||||
}, 300);
|
||||
}, [selectedOrg, currentPage, pageSize]);
|
||||
};
|
||||
|
||||
const onDelete = (user?: User) => {
|
||||
const { user_id } = user || {};
|
||||
const payload = {
|
||||
ids: user_id ? [user_id] : selectedRowKeys,
|
||||
};
|
||||
deleteUser(payload as any).then((res) => {
|
||||
console.log('res=====', res);
|
||||
const { success } = res || {};
|
||||
if (success) {
|
||||
message.success('删除成功');
|
||||
setSelectedRowKeys([]);
|
||||
getUserListInit();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handlePassword = (user: User) => {
|
||||
setEidtPassword({
|
||||
recordData: { ...user },
|
||||
visible: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreatUserInfo = () => {
|
||||
setCurrentUserInfo({
|
||||
visible: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditUserInfo = (user: User) => {
|
||||
setCurrentUserInfo({
|
||||
recordData: { ...user },
|
||||
visible: true,
|
||||
});
|
||||
};
|
||||
|
||||
// Define columns for the user table
|
||||
const columns: ColumnsType<User> = [
|
||||
{
|
||||
title: '登录名',
|
||||
|
|
@ -145,31 +181,33 @@ const UserListPage: React.FC = () => {
|
|||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
align: 'center',
|
||||
render: (_, record) => (
|
||||
<div>
|
||||
<Button type="link" onClick={() => handleUserAction(record)}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button type="link" onClick={() => handlePassword(record)}>
|
||||
重置密码
|
||||
</Button>
|
||||
<Button type="link" onClick={() => handleUserAction(record)}>
|
||||
<Button type="link" onClick={() => handleEditUserInfo(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" onClick={() => handleUserAction(record)}>
|
||||
删除
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title=""
|
||||
description="删除操作不可逆，请确认是否删除?"
|
||||
onConfirm={() => onDelete(record)}
|
||||
// onCancel={cancel}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link">删除</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleUserAction = (user: User) => {
|
||||
console.log('Editing user:', user);
|
||||
// Implement user edit logic here
|
||||
};
|
||||
|
||||
const onOrgSelect = (selectedKeys: React.Key[]) => {
|
||||
if (selectedKeys.length > 0) {
|
||||
setSelectedOrg(selectedKeys[0] as string);
|
||||
// Reset to first page when organization changes
|
||||
setCurrentPage(1);
|
||||
}
|
||||
};
|
||||
|
|
@ -180,118 +218,172 @@ const UserListPage: React.FC = () => {
|
|||
};
|
||||
|
||||
const handlePageSizeChange = (current: number, size: number) => {
|
||||
setCurrentPage(1); // Reset to first page when page size changes
|
||||
setCurrentPage(1);
|
||||
setPageSize(size);
|
||||
};
|
||||
|
||||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
|
||||
console.log('selectedRowKeys changed: ', newSelectedRowKeys);
|
||||
setSelectedRowKeys(newSelectedRowKeys);
|
||||
setSelectedRowKeys(newSelectedRowKeys as any);
|
||||
};
|
||||
|
||||
const onDeleteGroup = () => {};
|
||||
|
||||
return (
|
||||
<div className={styles.user_content}>
|
||||
<Row gutter={8} style={{ height: '100%' }}>
|
||||
<Col span={5}>
|
||||
<div className={styles.left_content}>
|
||||
<div className={styles.search}>
|
||||
<div style={{ paddingBottom: '5px' }}>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ marginRight: '8px', fontSize: '16px' }}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setVisible(true)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ fontSize: '16px' }}
|
||||
icon={<DeleteOutlined />}
|
||||
/>
|
||||
</div>
|
||||
<Input.Search
|
||||
placeholder="请输入名称"
|
||||
style={{ marginBottom: 6 }}
|
||||
onSearch={(value) => console.log('Search org:', value)}
|
||||
<div className={styles.left_content}>
|
||||
<div className={styles.search}>
|
||||
<div style={{ paddingBottom: '5px' }}>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ marginRight: '8px', fontSize: '16px' }}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setVisible(true)}
|
||||
/>
|
||||
<Popconfirm
|
||||
title=""
|
||||
description="删除操作不可逆，请确认是否删除?"
|
||||
onConfirm={() => onDeleteGroup()}
|
||||
// onCancel={cancel}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
disabled={selectedOrg === ''}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ fontSize: '16px' }}
|
||||
icon={<DeleteOutlined />}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.tree_box}>
|
||||
<Tree
|
||||
showIcon={true}
|
||||
treeData={orgTreeData}
|
||||
defaultExpandAll
|
||||
onSelect={onOrgSelect}
|
||||
selectedKeys={[selectedOrg]}
|
||||
icon={<TeamOutlined style={{fontSize:"15px"}} />}
|
||||
/>
|
||||
</div>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={19}>
|
||||
<div className={styles.right_content}>
|
||||
<div className={styles.teble_content}>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
<Input.Search
|
||||
placeholder="请输入名称"
|
||||
style={{ marginBottom: 6 }}
|
||||
onSearch={(value) => console.log('Search org:', value)}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.tree_box}>
|
||||
<CustomTree
|
||||
treeData={orgTreeData}
|
||||
titleField="name"
|
||||
keyField="id"
|
||||
childrenField="children"
|
||||
defaultExpandAll
|
||||
onSelect={onOrgSelect}
|
||||
selectedKeys={[selectedOrg]}
|
||||
icon={<TeamOutlined style={{ fontSize: '15px' }} />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.right_content}>
|
||||
<div className={styles.teble_content}>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Button
|
||||
style={{ marginRight: '8px' }}
|
||||
onClick={() => handleCreatUserInfo()}
|
||||
>
|
||||
<div>
|
||||
<Button style={{ marginRight: '8px' }}>刷新</Button>
|
||||
<Button
|
||||
disabled={selectedRowKeys.length === 0}
|
||||
style={{ marginRight: '8px' }}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<Input.Search
|
||||
placeholder="Search users"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: 300 }}
|
||||
onSearch={(value) => {
|
||||
console.log('Search user:', value);
|
||||
setCurrentPage(1); // Reset to first page when searching
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={users}
|
||||
loading={loading}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
rowSelection={{
|
||||
selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: 16, textAlign: 'right' }}>
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
pageSize={pageSize}
|
||||
total={totalUsers}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageSizeChange}
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
showTotal={(total, range) =>
|
||||
`Showing ${range[0]}-${range[1]} of ${total} items`
|
||||
}
|
||||
新建用户
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title=""
|
||||
description="删除操作不可逆，请确认是否删除?"
|
||||
onConfirm={() => onDelete()}
|
||||
// onCancel={cancel}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
disabled={selectedRowKeys.length === 0}
|
||||
>
|
||||
<Button
|
||||
disabled={selectedRowKeys.length === 0}
|
||||
style={{ marginRight: '8px' }}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Button style={{ marginRight: '8px' }} onClick={getUserListInit}>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<Input.Search
|
||||
placeholder="Search users"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: 300 }}
|
||||
onSearch={(value) => {
|
||||
console.log('Search user:', value);
|
||||
setCurrentPage(1); // Reset to first page when searching
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<CreatGroup visible={visible} onCancel={()=>{setVisible(false)}} onOk={()=>{}} orgTreeData={[]}/>
|
||||
<div className={styles.teble_box}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={users}
|
||||
loading={loading}
|
||||
rowKey="id"
|
||||
pagination={{
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
total: totalUsers,
|
||||
onChange: handlePageChange,
|
||||
onShowSizeChange: handlePageSizeChange,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => {
|
||||
return `共${total}条数据`;
|
||||
},
|
||||
}}
|
||||
rowSelection={{
|
||||
selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}}
|
||||
scroll={{ x: 'max-content', y: 55 * 12 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CreatGroup
|
||||
visible={visible}
|
||||
selectedOrg={selectedOrg}
|
||||
onCancel={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
onOk={() => {}}
|
||||
orgTreeData={orgTreeData}
|
||||
/>
|
||||
<UserEditModal
|
||||
selectedOrg={selectedOrg}
|
||||
orgTreeData={orgTreeData}
|
||||
currentUserInfo={currentUserInfo}
|
||||
onCancel={() => {
|
||||
setCurrentUserInfo({
|
||||
recordData: {},
|
||||
visible: false,
|
||||
});
|
||||
}}
|
||||
onOk={() => {}}
|
||||
/>
|
||||
<PasswordResetModal
|
||||
visible={eidtPassword.visible}
|
||||
onCancel={() => {
|
||||
setEidtPassword({
|
||||
recordData: {},
|
||||
visible: false,
|
||||
});
|
||||
}}
|
||||
onOk={() => {}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,209 @@
|
|||
// index.tsx
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Radio,
|
||||
Select,
|
||||
TreeSelect,
|
||||
} from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
import { ModalBaseNode, OrganizationNode } from '../../contast';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
interface UserEditModalProps {
|
||||
// visible: boolean;
|
||||
orgTreeData: OrganizationNode[];
|
||||
onCancel: () => void;
|
||||
onOk: (values: any) => void;
|
||||
confirmLoading?: boolean;
|
||||
currentUserInfo?: ModalBaseNode;
|
||||
selectedOrg?: string;
|
||||
}
|
||||
|
||||
const UserEditModal: React.FC<UserEditModalProps> = ({
|
||||
orgTreeData,
|
||||
onCancel,
|
||||
onOk,
|
||||
confirmLoading = false,
|
||||
currentUserInfo,
|
||||
}) => {
|
||||
const { recordData, visible, selectedOrg } = currentUserInfo || {};
|
||||
const { user_id } = recordData || {};
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
const initialValues = { user_group_id: [selectedOrg], status: 1 };
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [visible, form,recordData, selectedOrg]);
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
onOk(values);
|
||||
} catch (error) {
|
||||
message.error('请检查表单字段');
|
||||
}
|
||||
};
|
||||
|
||||
const validateMessages = {
|
||||
required: '${label} is required!',
|
||||
types: {
|
||||
email: '${label} is not a valid email!',
|
||||
number: '${label} is not a valid number!',
|
||||
cell_phone: '${label} is not a valid cell phone number!',
|
||||
},
|
||||
number: {
|
||||
range: '${label} must be between ${min} and ${max}',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={user_id ? '编辑用户信息' : '新增用户'}
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={handleOk}
|
||||
confirmLoading={confirmLoading}
|
||||
width={600}
|
||||
maskClosable={false}
|
||||
centered={true}
|
||||
destroyOnHidden={true}
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
// 按钮居中对其
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'right' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleOk}
|
||||
style={{ marginRight: '20px' }}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
<Button onClick={onCancel} style={{ marginRight: '20px' }}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
layout="horizontal"
|
||||
style={{ paddingTop: '20px', paddingBottom: '20px' }}
|
||||
validateMessages={validateMessages}
|
||||
>
|
||||
<Form.Item
|
||||
name="loginName"
|
||||
label="登录名"
|
||||
rules={[
|
||||
{ required: true, message: '请输入登录名' },
|
||||
{ min: 3, message: '登录名至少3个字符' },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="请输入登录名" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="userName"
|
||||
label="用户姓名"
|
||||
rules={[{ required: true, message: '请输入用户姓名' }]}
|
||||
>
|
||||
<Input placeholder="请输入用户姓名" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="user_group_id"
|
||||
label="用户分组"
|
||||
rules={[{ required: true, message: '请选择用户分组' }]}
|
||||
>
|
||||
<TreeSelect
|
||||
showSearch
|
||||
allowClear={false}
|
||||
treeDefaultExpandAll
|
||||
placeholder="请选择用户分组"
|
||||
treeData={orgTreeData}
|
||||
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value={1}>启用</Radio>
|
||||
<Radio value={2}>禁用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="userType"
|
||||
label="用户类别"
|
||||
rules={[{ required: true, message: '请选择用户类别' }]}
|
||||
>
|
||||
<Select placeholder="请选择用户类别">
|
||||
<Option value="internal">内部员工</Option>
|
||||
<Option value="external">外部用户</Option>
|
||||
<Option value="partner">合作伙伴</Option>
|
||||
<Option value="temporary">临时用户</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="idCard"
|
||||
label="身份证号"
|
||||
rules={[
|
||||
{ required: true, message: '请输入身份证号' },
|
||||
{
|
||||
pattern:
|
||||
/^[1-9]\d{5}(18|19|20|21|22|23|24|25|26|27|28|29|30|31)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20)$/,
|
||||
message: '请输入有效的身份证号',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input placeholder="请输入身份证号" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="gender"
|
||||
label="性别"
|
||||
rules={[{ required: false, message: '请选择性别' }]}
|
||||
>
|
||||
<Select placeholder="请选择性别">
|
||||
<Option value="male">男</Option>
|
||||
<Option value="female">女</Option>
|
||||
<Option value="other">其他</Option>
|
||||
<Option value="prefer-not-to-say">不愿透露</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
{/* 电话号码 */}
|
||||
<Form.Item
|
||||
name="cell_phone"
|
||||
label="电话号码"
|
||||
rules={[{ required: false, message: '请输入电话号码' }]}
|
||||
>
|
||||
<Input placeholder="请输入电话号码" />
|
||||
</Form.Item>
|
||||
{/* 邮箱 */}
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
rules={[
|
||||
{ required: false, message: '请输入邮箱' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="请输入邮箱" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserEditModal;
|
||||
|
|
@ -1,31 +1,38 @@
|
|||
// d:\VDI\vdi\web-fe\src\pages\userList\mod\group\index.tsx
|
||||
import React from 'react';
|
||||
import { Modal, Form, Input, Select } from 'antd';
|
||||
import type { DataNode } from 'antd/es/tree';
|
||||
import { Button, Form, Input, Modal, TreeSelect } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
// import type { DataNode } from 'antd/es/tree';
|
||||
import { OrganizationNode } from '../../contast';
|
||||
|
||||
interface CreatGroupProps {
|
||||
visible: boolean;
|
||||
selectedOrg: string;
|
||||
onCancel: () => void;
|
||||
onOk: (values: any) => void;
|
||||
orgTreeData: DataNode[];
|
||||
orgTreeData: OrganizationNode[];
|
||||
}
|
||||
|
||||
const CreatGroup: React.FC<CreatGroupProps> = (props) => {
|
||||
const { visible, onCancel, onOk, orgTreeData } = props;
|
||||
const { visible, onCancel, onOk, orgTreeData, selectedOrg } = props;
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// Flatten tree data for parent group selection
|
||||
const flattenTreeData = (data: DataNode[], result: { value: string; label: string }[] = []) => {
|
||||
data.forEach(item => {
|
||||
result.push({ value: item.key as string, label: item.title as string });
|
||||
if (item.children) {
|
||||
flattenTreeData(item.children, result);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
};
|
||||
useEffect(() => {
|
||||
const initialValues = { parent_id: [selectedOrg] };
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [visible, form, selectedOrg]);
|
||||
|
||||
const parentGroupOptions = flattenTreeData(orgTreeData);
|
||||
// Flatten tree data for parent group selection
|
||||
// const flattenTreeData = (data: OrganizationNode[], result: { value: string; label: string }[] = []) => {
|
||||
// data.forEach(item => {
|
||||
// result.push({ value: item.id as string, label: item.name as string });
|
||||
// if (item.children) {
|
||||
// flattenTreeData(item.children, result);
|
||||
// }
|
||||
// });
|
||||
// return result;
|
||||
// };
|
||||
|
||||
// const parentGroupOptions = flattenTreeData(orgTreeData);
|
||||
|
||||
const handleOk = () => {
|
||||
form.submit();
|
||||
|
|
@ -49,32 +56,54 @@ const CreatGroup: React.FC<CreatGroupProps> = (props) => {
|
|||
onCancel={handleCancel}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
centered={true}
|
||||
destroyOnHidden={true}
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'right' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleOk}
|
||||
style={{ marginRight: '20px' }}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
<Button onClick={onCancel} style={{ marginRight: '20px' }}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleFinish}
|
||||
>
|
||||
<Form.Item
|
||||
name="groupName"
|
||||
label="分组名"
|
||||
rules={[{ required: true, message: '请输入分组名!' }]}
|
||||
<div style={{ height: '300px' }}>
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
layout="horizontal"
|
||||
onFinish={handleFinish}
|
||||
style={{ paddingTop: '20px', paddingBottom: '20px' }}
|
||||
>
|
||||
<Input placeholder="请输入分组名" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="parentGroup"
|
||||
label="父分组名"
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择父分组"
|
||||
options={parentGroupOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Form.Item
|
||||
name="groupName"
|
||||
label="分组名"
|
||||
rules={[{ required: true, message: '请输入分组名!' }]}
|
||||
>
|
||||
<Input placeholder="请输入分组名" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="parent_id" label="父分组名">
|
||||
<TreeSelect
|
||||
showSearch
|
||||
allowClear={false}
|
||||
treeDefaultExpandAll
|
||||
placeholder="请选择父分组名"
|
||||
treeData={orgTreeData}
|
||||
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreatGroup;
|
||||
export default CreatGroup;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
// index.tsx
|
||||
import { Button, Form, Input, message, Modal } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface PasswordResetModalProps {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
onOk: (values: { password: string }) => void;
|
||||
confirmLoading?: boolean;
|
||||
username?: string;
|
||||
}
|
||||
|
||||
const PasswordResetModal: React.FC<PasswordResetModalProps> = ({
|
||||
visible,
|
||||
onCancel,
|
||||
onOk,
|
||||
confirmLoading = false,
|
||||
username,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [visible, form]);
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
onOk(values);
|
||||
} catch (error) {
|
||||
message.error('请检查表单字段');
|
||||
}
|
||||
};
|
||||
|
||||
// Password validation rule
|
||||
const passwordValidator = (_: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入新密码');
|
||||
}
|
||||
|
||||
if (value.length < 6) {
|
||||
return Promise.reject('密码长度至少6位');
|
||||
}
|
||||
|
||||
const hasNumber = /\d/.test(value);
|
||||
const hasLetter = /[a-zA-Z]/.test(value);
|
||||
// const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
|
||||
|
||||
if (!hasNumber) {
|
||||
return Promise.reject('密码必须包含数字');
|
||||
}
|
||||
|
||||
if (!hasLetter) {
|
||||
return Promise.reject('密码必须包含字母');
|
||||
}
|
||||
|
||||
// if (!hasSpecialChar) {
|
||||
// return Promise.reject('密码必须包含特殊字符');
|
||||
// }
|
||||
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={username ? `重置密码 - ${username}` : '重置密码'}
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={handleOk}
|
||||
confirmLoading={confirmLoading}
|
||||
width={600}
|
||||
maskClosable={false}
|
||||
centered={true}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
destroyOnHidden={true}
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'right' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleOk}
|
||||
style={{ marginRight: '20px' }}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
<Button onClick={onCancel} style={{ marginRight: '20px' }}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
layout="horizontal"
|
||||
style={{ paddingTop: '20px', paddingBottom: '20px' }}
|
||||
>
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="密码重置为"
|
||||
rules={[{ required: true, validator: passwordValidator }]}
|
||||
help="密码必须包含数字和字母，字母区分大小写，且至少6位"
|
||||
>
|
||||
<Input.Password placeholder="请输入新密码" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordResetModal;
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import { request } from '@umijs/max';
|
||||
|
||||
// 新建用户分组
|
||||
export async function addUserGroup(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
// 获取用户分组
|
||||
export async function getUserGroup(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除用户分组
|
||||
export async function deleteUserGroup(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询用户分组
|
||||
export async function getUserList(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
|
||||
// 新建用户
|
||||
export async function addUser(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑用户
|
||||
export async function editUser(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
|
||||
//获取某个用户信息
|
||||
export async function getUserById(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
|
||||
//删除用户
|
||||
export async function deleteUser(body?: APIS.UserInfoVO) {
|
||||
return request<APIS.Result_UserInfo_>('/api/v1/user', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
/* eslint-disable */
|
||||
// 该文件由 OneAPI 自动生成，请勿手动修改！
|
||||
|
||||
declare namespace APIS {
|
||||
interface PageInfo {
|
||||
/**
|
||||
1 */
|
||||
current?: number;
|
||||
pageSize?: number;
|
||||
total?: number;
|
||||
list?: Array<Record<string, any>>;
|
||||
}
|
||||
|
||||
interface PageInfo_UserInfo_ {
|
||||
/**
|
||||
1 */
|
||||
current?: number;
|
||||
pageSize?: number;
|
||||
total?: number;
|
||||
list?: Array<UserInfo>;
|
||||
}
|
||||
|
||||
interface Result {
|
||||
success?: boolean;
|
||||
errorMessage?: string;
|
||||
data?: Record<string, any>;
|
||||
}
|
||||
|
||||
interface Result_PageInfo_UserInfo__ {
|
||||
success?: boolean;
|
||||
errorMessage?: string;
|
||||
data?: PageInfo_UserInfo_;
|
||||
}
|
||||
|
||||
interface Result_UserInfo_ {
|
||||
success?: boolean;
|
||||
errorMessage?: string;
|
||||
data?: UserInfo;
|
||||
}
|
||||
|
||||
interface Result_string_ {
|
||||
success?: boolean;
|
||||
errorMessage?: string;
|
||||
data?: string;
|
||||
}
|
||||
|
||||
type UserGenderEnum = 'MALE' | 'FEMALE';
|
||||
|
||||
interface UserInfo {
|
||||
id?: string;
|
||||
name?: string;
|
||||
/** nick */
|
||||
nickName?: string;
|
||||
/** email */
|
||||
email?: string;
|
||||
gender?: UserGenderEnum;
|
||||
}
|
||||
|
||||
interface UserInfoVO {
|
||||
name?: string;
|
||||
/** nick */
|
||||
nickName?: string;
|
||||
/** email */
|
||||
email?: string;
|
||||
}
|
||||
|
||||
type definitions_0 = null;
|
||||
}
|
||||
|
|
@ -1898,7 +1898,7 @@
|
|||
|
||||
"@types/spark-md5@^3.0.5":
|
||||
version "3.0.5"
|
||||
resolved "http://10.208.10.36:8080/repository/npm/@types/spark-md5/-/spark-md5-3.0.5.tgz#eddec8639217e518c26e9e221ff56bf5f5f5c900"
|
||||
resolved "https://registry.npmmirror.com/@types/spark-md5/-/spark-md5-3.0.5.tgz#eddec8639217e518c26e9e221ff56bf5f5f5c900"
|
||||
integrity sha512-lWf05dnD42DLVKQJZrDHtWFidcLrHuip01CtnC2/S6AMhX4t9ZlEUj4iuRlAnts0PQk7KESOqKxeGE/b6sIPGg==
|
||||
|
||||
"@types/stylis@^4.0.2":
|
||||
|
|
@ -9278,7 +9278,7 @@ source-map@^0.7.3, source-map@^0.7.4:
|
|||
|
||||
spark-md5@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "http://10.208.10.36:8080/repository/npm/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
|
||||
resolved "https://registry.npmmirror.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
|
||||
integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==
|
||||
|
||||
spdx-correct@^3.0.0:
|
||||
|
|
@ -9412,7 +9412,16 @@ string-convert@^0.2.0:
|
|||
resolved "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
|
||||
integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
|
||||
|
||||
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
|
||||
"string-width-cjs@npm:string-width@^4.2.0":
|
||||
version "4.2.3"
|
||||
resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
|
||||
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
|
||||
dependencies:
|
||||
emoji-regex "^8.0.0"
|
||||
is-fullwidth-code-point "^3.0.0"
|
||||
strip-ansi "^6.0.1"
|
||||
|
||||
string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
|
||||
version "4.2.3"
|
||||
resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
|
||||
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
|
||||
|
|
@ -9502,7 +9511,14 @@ string_decoder@~1.1.1:
|
|||
dependencies:
|
||||
safe-buffer "~5.1.0"
|
||||
|
||||
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
|
||||
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
|
||||
version "6.0.1"
|
||||
resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
|
||||
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
|
||||
dependencies:
|
||||
ansi-regex "^5.0.1"
|
||||
|
||||
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
|
||||
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
|
||||
|
|
@ -10102,7 +10118,7 @@ utils-merge@1.0.1:
|
|||
|
||||
uuid@^11.1.0:
|
||||
version "11.1.0"
|
||||
resolved "http://10.208.10.36:8080/repository/npm/uuid/-/uuid-11.1.0.tgz#9549028be1753bb934fc96e2bca09bb4105ae912"
|
||||
resolved "https://registry.npmmirror.com/uuid/-/uuid-11.1.0.tgz#9549028be1753bb934fc96e2bca09bb4105ae912"
|
||||
integrity sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==
|
||||
|
||||
v8-compile-cache@^2.3.0:
|
||||
|
|
@ -10260,7 +10276,16 @@ word-wrap@^1.2.5:
|
|||
resolved "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
|
||||
integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
|
||||
|
||||
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
|
||||
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
|
||||
version "7.0.0"
|
||||
resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
|
||||
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
|
||||
dependencies:
|
||||
ansi-styles "^4.0.0"
|
||||
string-width "^4.1.0"
|
||||
strip-ansi "^6.0.0"
|
||||
|
||||
wrap-ansi@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
|
||||
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
|
||||
|
|
|
|||
Loading…
Reference in New Issue