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