12-23-上传master
This commit is contained in:
xingsy
25
src/pages/ListTableList/components/CreateForm.tsx
Normal file
25
src/pages/ListTableList/components/CreateForm.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Modal } from 'antd';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建规则"
|
||||
visible={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
214
src/pages/ListTableList/components/UpdateForm.tsx
Normal file
214
src/pages/ListTableList/components/UpdateForm.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Form, Button, DatePicker, Input, Modal, Radio, Select, Steps } from 'antd';
|
||||
|
||||
import { TableListItem } from '../data.d';
|
||||
|
||||
export interface FormValueType extends Partial<TableListItem> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => void;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<TableListItem>;
|
||||
}
|
||||
const FormItem = Form.Item;
|
||||
const { Step } = Steps;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
export interface UpdateFormState {
|
||||
formVals: FormValueType;
|
||||
currentStep: number;
|
||||
}
|
||||
|
||||
const formLayout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const [formVals, setFormVals] = useState<FormValueType>({
|
||||
name: props.values.name,
|
||||
desc: props.values.desc,
|
||||
key: props.values.key,
|
||||
target: '0',
|
||||
template: '0',
|
||||
type: '1',
|
||||
time: '',
|
||||
frequency: 'month',
|
||||
});
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<number>(0);
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const {
|
||||
onSubmit: handleUpdate,
|
||||
onCancel: handleUpdateModalVisible,
|
||||
updateModalVisible,
|
||||
values,
|
||||
} = props;
|
||||
|
||||
const forward = () => setCurrentStep(currentStep + 1);
|
||||
|
||||
const backward = () => setCurrentStep(currentStep - 1);
|
||||
|
||||
const handleNext = async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
|
||||
setFormVals({ ...formVals, ...fieldsValue });
|
||||
|
||||
if (currentStep < 2) {
|
||||
forward();
|
||||
} else {
|
||||
handleUpdate({ ...formVals, ...fieldsValue });
|
||||
}
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<FormItem name="target" label="监控对象">
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">表一</Option>
|
||||
<Option value="1">表二</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem name="template" label="规则模板">
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">规则模板一</Option>
|
||||
<Option value="1">规则模板二</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem name="type" label="规则类型">
|
||||
<RadioGroup>
|
||||
<Radio value="0">强</Radio>
|
||||
<Radio value="1">弱</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return (
|
||||
<>
|
||||
<FormItem
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
>
|
||||
<DatePicker
|
||||
style={{ width: '100%' }}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="frequency" label="调度周期">
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="month">月</Option>
|
||||
<Option value="week">周</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
>
|
||||
<Input placeholder="请输入" readOnly />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="desc"
|
||||
label="规则描述"
|
||||
rules={[{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}
|
||||
>
|
||||
<TextArea rows={4} placeholder="请输入至少五个字符" />
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFooter = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<Button style={{ float: 'left' }} onClick={backward}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
|
||||
<Button type="primary" onClick={() => handleNext()}>
|
||||
下一步
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return (
|
||||
<>
|
||||
<Button style={{ float: 'left' }} onClick={backward}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
|
||||
<Button type="primary" onClick={() => handleNext()}>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
|
||||
<Button type="primary" onClick={() => handleNext()}>
|
||||
下一步
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
visible={updateModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="配置规则属性" />
|
||||
<Step title="设定调度周期" />
|
||||
</Steps>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
target: formVals.target,
|
||||
template: formVals.template,
|
||||
type: formVals.type,
|
||||
frequency: formVals.frequency,
|
||||
name: formVals.name,
|
||||
desc: formVals.desc,
|
||||
}}
|
||||
>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateForm;
|
||||
36
src/pages/ListTableList/data.d.ts
vendored
Normal file
36
src/pages/ListTableList/data.d.ts
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
export interface TableListItem {
|
||||
key: number;
|
||||
disabled?: boolean;
|
||||
href: string;
|
||||
avatar: string;
|
||||
name: string;
|
||||
owner: string;
|
||||
desc: string;
|
||||
callNo: number;
|
||||
status: number;
|
||||
updatedAt: Date;
|
||||
createdAt: Date;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
export interface TableListPagination {
|
||||
total: number;
|
||||
pageSize: number;
|
||||
current: number;
|
||||
}
|
||||
|
||||
export interface TableListData {
|
||||
list: TableListItem[];
|
||||
pagination: Partial<TableListPagination>;
|
||||
}
|
||||
|
||||
export interface TableListParams {
|
||||
status?: string;
|
||||
name?: string;
|
||||
desc?: string;
|
||||
key?: number;
|
||||
pageSize?: number;
|
||||
currentPage?: number;
|
||||
filter?: { [key: string]: any[] };
|
||||
sorter?: { [key: string]: any };
|
||||
}
|
||||
267
src/pages/ListTableList/index.tsx
Normal file
267
src/pages/ListTableList/index.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Divider, message, Input, Drawer } from 'antd';
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
|
||||
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
|
||||
import ProDescriptions from '@ant-design/pro-descriptions';
|
||||
import CreateForm from './components/CreateForm';
|
||||
import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||
import { TableListItem } from './data.d';
|
||||
import { queryRule, updateRule, addRule, removeRule } from './service';
|
||||
|
||||
/**
|
||||
* 添加节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleAdd = async (fields: TableListItem) => {
|
||||
const hide = message.loading('正在添加');
|
||||
try {
|
||||
await addRule({ ...fields });
|
||||
console.log('handleAdd'+{ ...fields });
|
||||
|
||||
hide();
|
||||
message.success('添加成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('添加失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleUpdate = async (fields: FormValueType) => {
|
||||
const hide = message.loading('正在配置');
|
||||
try {
|
||||
await updateRule({
|
||||
name: fields.name,
|
||||
desc: fields.desc,
|
||||
key: fields.key,
|
||||
});
|
||||
hide();
|
||||
|
||||
message.success('配置成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('配置失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除节点
|
||||
* @param selectedRows
|
||||
*/
|
||||
const handleRemove = async (selectedRows: TableListItem[]) => {
|
||||
const hide = message.loading('正在删除');
|
||||
if (!selectedRows) return true;
|
||||
try {
|
||||
await removeRule({
|
||||
key: selectedRows.map((row) => row.key),
|
||||
});
|
||||
hide();
|
||||
message.success('删除成功，即将刷新');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('删除失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const TableList: React.FC<{}> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<TableListItem>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
|
||||
const columns: ProColumns<TableListItem>[] = [
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
tip: '规则名称是唯一的 key',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '规则名称为必填项',
|
||||
},
|
||||
],
|
||||
},
|
||||
render: (dom, entity) => {
|
||||
return <a onClick={() => setRow(entity)}>{dom}</a>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'desc',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
hideInForm: true,
|
||||
renderText: (val: string) => `${val} 万`,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
hideInForm: true,
|
||||
valueEnum: {
|
||||
0: { text: '关闭', status: 'Default' },
|
||||
1: { text: '运行中', status: 'Processing' },
|
||||
2: { text: '已上线', status: 'Success' },
|
||||
3: { text: '异常', status: 'Error' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '上次调度时间',
|
||||
dataIndex: 'updatedAt',
|
||||
sorter: true,
|
||||
valueType: 'dateTime',
|
||||
hideInForm: true,
|
||||
renderFormItem: (item, { defaultRender, ...rest }, form) => {
|
||||
const status = form.getFieldValue('status');
|
||||
if (`${status}` === '0') {
|
||||
return false;
|
||||
}
|
||||
if (`${status}` === '3') {
|
||||
return <Input {...rest} placeholder="请输入异常原因！" />;
|
||||
}
|
||||
return defaultRender(item);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
render: (_, record) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
配置
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">订阅警报</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<TableListItem>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button type="primary" onClick={() => handleModalVisible(true)}>
|
||||
<PlusOutlined /> 新建
|
||||
</Button>,
|
||||
]}
|
||||
request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择 <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a> 项
|
||||
<span>
|
||||
服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)} 万
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
|
||||
<ProTable<TableListItem, TableListItem>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="key"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
visible={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<TableListItem>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
38
src/pages/ListTableList/service.ts
Normal file
38
src/pages/ListTableList/service.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import request from '@/utils/request';
|
||||
import { TableListParams, TableListItem } from './data.d';
|
||||
|
||||
export async function queryRule(params?: TableListParams) {
|
||||
return request('/api/rule', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export async function removeRule(params: { key: number[] }) {
|
||||
return request('/api/rule', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
...params,
|
||||
method: 'delete',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function addRule(params: TableListItem) {
|
||||
return request('/api/rule', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
...params,
|
||||
method: 'post',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateRule(params: TableListParams) {
|
||||
return request('/api/rule', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
...params,
|
||||
method: 'update',
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user