master
parent
b4da146492
commit
3f034f4b9a
@ -0,0 +1,173 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Form, Button, Input, Col, Drawer, Row, Checkbox } from 'antd';
|
||||||
|
import { TableListItem } from '../data.d';
|
||||||
|
|
||||||
|
export interface FormValueType extends Partial<TableListItem> {
|
||||||
|
id?: number,
|
||||||
|
userName?: string,
|
||||||
|
userNo?: string,
|
||||||
|
password?: string,
|
||||||
|
permission?: string
|
||||||
|
permissions?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateFormProps {
|
||||||
|
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||||
|
onSubmit: (values: FormValueType) => void;
|
||||||
|
updateModalVisible: boolean;
|
||||||
|
values: Partial<TableListItem>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||||
|
const [formVals, setFormVals] = useState<FormValueType>({
|
||||||
|
id: props.values.id,
|
||||||
|
userNo: props.values.userNo,
|
||||||
|
userName: props.values.userName,
|
||||||
|
password: props.values.password,
|
||||||
|
permissions: props.values.permission ? JSON.parse(props.values.permission) : []
|
||||||
|
});
|
||||||
|
|
||||||
|
const permissions = [
|
||||||
|
{
|
||||||
|
label: '员工信息',
|
||||||
|
item: [
|
||||||
|
{
|
||||||
|
code: 'employeeQuery',
|
||||||
|
name: '查询'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'employeeSave',
|
||||||
|
name: '编辑'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据统计',
|
||||||
|
item: [
|
||||||
|
{
|
||||||
|
code: 'dataQuery',
|
||||||
|
name: '查询'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '基本信息设置',
|
||||||
|
item: [
|
||||||
|
{
|
||||||
|
code: 'settingSave',
|
||||||
|
name: '编辑'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '账号管理',
|
||||||
|
item: [
|
||||||
|
{
|
||||||
|
code: 'userSave',
|
||||||
|
name: '编辑'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const {
|
||||||
|
onSubmit: handleUpdate,
|
||||||
|
onCancel: handleUpdateModalVisible,
|
||||||
|
updateModalVisible,
|
||||||
|
values,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
const fieldsValue = await form.validateFields();
|
||||||
|
|
||||||
|
console.log(fieldsValue)
|
||||||
|
|
||||||
|
setFormVals({ ...formVals, ...fieldsValue });
|
||||||
|
|
||||||
|
handleUpdate({ ...formVals, ...fieldsValue, permission: fieldsValue.permissions ? JSON.stringify(fieldsValue.permissions) : undefined });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
title={values.id?`编辑用户`:`添加用户`}
|
||||||
|
width={520}
|
||||||
|
onClose={() => handleUpdateModalVisible(false, values)}
|
||||||
|
visible={updateModalVisible}
|
||||||
|
bodyStyle={{ paddingBottom: 80 }}
|
||||||
|
footer={
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'right',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button onClick={() => handleUpdateModalVisible(false, values)} style={{ marginRight: 8 }}>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSubmit} type="primary">
|
||||||
|
保存
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Form layout="vertical" form={form} initialValues={formVals}>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="userNo"
|
||||||
|
label="账号"
|
||||||
|
rules={[{ required: true, message: '请输入账号' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入账号" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="userName"
|
||||||
|
label="姓名"
|
||||||
|
rules={[{ required: true, message: '请输入姓名' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入姓名" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
name="password"
|
||||||
|
label="密码"
|
||||||
|
rules={[{ required: true, message: '请输入密码' }]}
|
||||||
|
>
|
||||||
|
<Input.Password placeholder="请输入密码" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
name="permissions"
|
||||||
|
label="权限设置"
|
||||||
|
rules={[{ required: true, message: '请选择权限' }]}
|
||||||
|
>
|
||||||
|
<Checkbox.Group style={{ width: '100%' }}>
|
||||||
|
{permissions.map(e => <Row>
|
||||||
|
<Col span={5}>
|
||||||
|
{e.label}
|
||||||
|
</Col>
|
||||||
|
{e.item.map(item => <Col span={4}>
|
||||||
|
<Checkbox value={item.code} style={{ lineHeight: '32px' }}>
|
||||||
|
{item.name}
|
||||||
|
</Checkbox>
|
||||||
|
</Col>)}
|
||||||
|
</Row>)}
|
||||||
|
</Checkbox.Group>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpdateForm;
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
export interface TableListItem {
|
||||||
|
id?: number,
|
||||||
|
userNo?: string,
|
||||||
|
userName?: string,
|
||||||
|
password?: string,
|
||||||
|
permission?: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TableListPagination {
|
||||||
|
total: number,
|
||||||
|
pageSize: number | undefined,
|
||||||
|
current: number | undefined,
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
@import '~antd/es/style/themes/default.less';
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
background: @component-background;
|
||||||
|
}
|
||||||
@ -0,0 +1,216 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Table, Card, message, Button, Popconfirm, Row, Col } from "antd";
|
||||||
|
import { ColumnsType } from "antd/es/table";
|
||||||
|
import { PageHeaderWrapper } from "@ant-design/pro-layout";
|
||||||
|
import { PaginationProps } from "antd/lib/pagination";
|
||||||
|
import { TableListItem } from "./data";
|
||||||
|
import { queryRule, updateRule, removeRule, addRule } from "./service";
|
||||||
|
import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在保存');
|
||||||
|
|
||||||
|
if (!fields.id) {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
delete fields.id
|
||||||
|
try {
|
||||||
|
const msg = await addRule({...fields});
|
||||||
|
hide();
|
||||||
|
if (msg.retcode) {
|
||||||
|
message.success('添加成功');
|
||||||
|
} else {
|
||||||
|
message.error(msg.retmsg);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const msg = await updateRule({...fields});
|
||||||
|
hide();
|
||||||
|
if (msg.retcode) {
|
||||||
|
message.success('保存成功');
|
||||||
|
} else {
|
||||||
|
message.error(msg.retmsg);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('保存失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
const handleRemove = async (id?: number) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!id) return false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const msg = await removeRule({
|
||||||
|
id
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
if (msg.retcode) {
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
} else {
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTableChange = async (params: any) => {
|
||||||
|
const param = {
|
||||||
|
pageNum: params.current,
|
||||||
|
pageSize: params.pageSize
|
||||||
|
}
|
||||||
|
const msg = await queryRule(param);
|
||||||
|
return {
|
||||||
|
data: msg.data?.list,
|
||||||
|
total: msg.data?.total,
|
||||||
|
success: msg.retcode,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const UserList: React.FC<{}> = () => {
|
||||||
|
const [data, handleDataChange] = useState<TableListItem[]>([]);
|
||||||
|
const [loading, handleLoadChange] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const [page, handlePageChange] = useState<PaginationProps>({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
current: 1,
|
||||||
|
pageSizeOptions: ['20'],
|
||||||
|
showTotal: ((total:number) => {
|
||||||
|
return `共 ${total} 条`;
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const handleChange = async (pagination: any) => {
|
||||||
|
handleLoadChange(true)
|
||||||
|
const res = await handleTableChange(pagination);
|
||||||
|
handleLoadChange(false)
|
||||||
|
handleDataChange(res.data)
|
||||||
|
handlePageChange({
|
||||||
|
total: res.total,
|
||||||
|
pageSize: pagination.pageSize,
|
||||||
|
current: pagination.current,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: ColumnsType<TableListItem> = [
|
||||||
|
{
|
||||||
|
title: "账号",
|
||||||
|
dataIndex: "userNo",
|
||||||
|
key: "userNo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "姓名",
|
||||||
|
dataIndex: "userName",
|
||||||
|
key: "userName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
key: "action",
|
||||||
|
render: (text, record) => (
|
||||||
|
<span>
|
||||||
|
<a style={{ marginRight: 8 }} onClick={()=>{
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}>编辑</a>
|
||||||
|
<Popconfirm title="确定删除该用户?" onConfirm={async () => {
|
||||||
|
const success = await handleRemove(record.id)
|
||||||
|
if (success) handleChange(page)
|
||||||
|
}}>
|
||||||
|
<a style={{color: 'red'}}>删除</a>
|
||||||
|
</Popconfirm>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchData() {
|
||||||
|
handleLoadChange(true)
|
||||||
|
page.current = 1
|
||||||
|
const res = await handleTableChange(page)
|
||||||
|
handleLoadChange(false)
|
||||||
|
page.total = res.total
|
||||||
|
handleDataChange(res.data)
|
||||||
|
}
|
||||||
|
fetchData()
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper>
|
||||||
|
<Card bordered={false}>
|
||||||
|
<div id="components-table-demo-basic">
|
||||||
|
<Row justify="space-between">
|
||||||
|
<Col span={14} />
|
||||||
|
<Col span={10}>
|
||||||
|
<div style={{textAlign: 'right'}}>
|
||||||
|
<Button style={{marginBottom: 15}} type="primary" onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues({
|
||||||
|
id: undefined,
|
||||||
|
});
|
||||||
|
}}>
|
||||||
|
新增用户
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
rowKey="id"
|
||||||
|
dataSource={data}
|
||||||
|
pagination={page}
|
||||||
|
loading={loading}
|
||||||
|
onChange={async pagination => {
|
||||||
|
handleChange(pagination)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async value => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
|
||||||
|
handleChange(page)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserList;
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import request from 'umi-request';
|
||||||
|
import { TableListItem } from './data.d';
|
||||||
|
|
||||||
|
export async function queryRule(params?: object) {
|
||||||
|
return request('/api/users/users-list', {
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addRule(params: TableListItem) {
|
||||||
|
return request('/api/users/save-users', {
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateRule(params: TableListItem) {
|
||||||
|
return request('/api/users/save-users', {
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function removeRule(params: TableListItem) {
|
||||||
|
return request('/api/users/del-users', {
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue