Skip to content

GitLab

P
pro-blocks
Commit 68809608 authored by 陈帅's avatar 陈帅
Browse files
Options

Tablist finish

parent 5d25742b
Show whitespace changes
Inline Side-by-side
Showing with 497 additions and 303 deletions
TableList/src/_mock.js → TableList/src/_mock.ts
View file @ 68809608
import { parse } from 'url';
import { TableListItem, TableListParams } from './data';
// mock tableListDataSource
let tableListDataSource = [];
for (let i = 0; i < 46; i += 1) {
let tableListDataSource: TableListItem[] = [];
for (let i = 0; i < 8; i += 1) {
tableListDataSource.push({
key: i,
disabled: i % 6 === 0,
......@@ -23,13 +24,24 @@ for (let i = 0; i < 46; i += 1) {
});
}
function getRule(req, res, u) {
function getRule(
req: { url: any },
res: {
json: (
arg0: {
list: TableListItem[];
pagination: { total: number; pageSize: number; current: number };
}
) => void;
},
u: any
) {
let url = u;
if (!url || Object.prototype.toString.call(url) !== '[object String]') {
url = req.url; // eslint-disable-line
}
const params = parse(url, true).query;
const params = (parse(url, true).query as unknown) as TableListParams;
let dataSource = tableListDataSource;
......@@ -45,10 +57,15 @@ function getRule(req, res, u) {
if (params.status) {
const status = params.status.split(',');
let filterDataSource = [];
let filterDataSource: TableListItem[] = [];
status.forEach(s => {
filterDataSource = filterDataSource.concat(
dataSource.filter(data => parseInt(data.status, 10) === parseInt(s[0], 10))
dataSource.filter(item => {
if (parseInt(item.status + '', 10) === parseInt(s.split('')[0], 10)) {
return true;
}
return false;
})
);
});
dataSource = filterDataSource;
......@@ -60,7 +77,7 @@ function getRule(req, res, u) {
let pageSize = 10;
if (params.pageSize) {
pageSize = params.pageSize * 1;
pageSize = parseInt(params.pageSize) * 1;
}
const result = {
......@@ -75,7 +92,12 @@ function getRule(req, res, u) {
return res.json(result);
}
function postRule(req, res, u, b) {
function postRule(
req: { url: any; body: any },
res: { json: (arg0: { list: TableListItem[]; pagination: { total: number } }) => void },
u: any,
b: { body: any }
) {
let url = u;
if (!url || Object.prototype.toString.call(url) !== '[object String]') {
url = req.url; // eslint-disable-line
......
TableList/src/components/CreateForm.tsx 0 → 100644
View file @ 68809608
import React from 'react';
import { Input, Modal, Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
const FormItem = Form.Item;
interface CreateFormProps extends FormComponentProps {
modalVisible: boolean;
handleAdd: (
fieldsValue: {
desc: string;
}
) => void;
handleModalVisible: () => void;
}
const CreateForm: React.SFC<CreateFormProps> = props => {
const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd(fieldsValue);
});
};
return (
<Modal
destroyOnClose
title="新建规则"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
})(<Input placeholder="请输入" />)}
</FormItem>
</Modal>
);
};
export default CreateForm;
TableList/src/components/StandardTable/index.js → TableList/src/components/StandardTable/index.tsx
View file @ 68809608
import React, { PureComponent, Fragment } from 'react';
import React, { Component, Fragment } from 'react';
import { Table, Alert } from 'antd';
import { TableProps, ColumnProps, SorterResult } from 'antd/lib/table';
import styles from './index.less';
import { TableListItem } from '../../data';
function initTotalList(columns) {
const totalList = [];
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
export interface StandardTableProps<T> extends Omit<TableProps<T>, 'columns'> {
columns: StandardTableColumnProps[];
data: {
list: Array<TableListItem>;
pagination: StandardTableProps<TableListItem>['pagination'];
};
selectedRows: TableListItem[];
onSelectRow: (rows: any) => void;
}
export type StandardTableColumnProps = ColumnProps<TableListItem> & {
needTotal?: boolean;
total?: number;
};
function initTotalList(columns: StandardTableColumnProps[]) {
if (!columns) {
return [];
}
const totalList: StandardTableColumnProps[] = [];
columns.forEach(column => {
if (column.needTotal) {
totalList.push({ ...column, total: 0 });
......@@ -12,8 +34,13 @@ function initTotalList(columns) {
return totalList;
}
class StandardTable extends PureComponent {
constructor(props) {
interface StandardTableState {
selectedRowKeys: string[];
needTotalList: StandardTableColumnProps[];
}
class StandardTable extends Component<StandardTableProps<TableListItem>, StandardTableState> {
constructor(props: StandardTableProps<TableListItem>) {
super(props);
const { columns } = props;
const needTotalList = initTotalList(columns);
......@@ -24,7 +51,7 @@ class StandardTable extends PureComponent {
};
}
static getDerivedStateFromProps(nextProps) {
static getDerivedStateFromProps(nextProps: StandardTableProps<TableListItem>) {
// clean state
if (nextProps.selectedRows.length === 0) {
const needTotalList = initTotalList(nextProps.columns);
......@@ -36,7 +63,7 @@ class StandardTable extends PureComponent {
return null;
}
handleRowSelectChange = (selectedRowKeys, selectedRows) => {
handleRowSelectChange = (selectedRowKeys: string[], selectedRows: TableListItem[]) => {
let { needTotalList } = this.state;
needTotalList = needTotalList.map(item => ({
...item,
......@@ -50,10 +77,15 @@ class StandardTable extends PureComponent {
this.setState({ selectedRowKeys, needTotalList });
};
handleTableChange = (pagination, filters, sorter) => {
handleTableChange = (
pagination: StandardTableProps<TableListItem>['pagination'],
filters: Record<keyof TableListItem, string[]>,
sorter: SorterResult<TableListItem>,
...rest
) => {
const { onChange } = this.props;
if (onChange) {
onChange(pagination, filters, sorter);
onChange(pagination, filters, sorter, ...rest);
}
};
......@@ -63,8 +95,8 @@ class StandardTable extends PureComponent {
render() {
const { selectedRowKeys, needTotalList } = this.state;
const { data = {}, rowKey, ...rest } = this.props;
const { list = [], pagination } = data;
const { data, rowKey, ...rest } = this.props;
const { list = [], pagination = false } = data || {};
const paginationProps = {
showSizeChanger: true,
......@@ -75,7 +107,7 @@ class StandardTable extends PureComponent {
const rowSelection = {
selectedRowKeys,
onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
getCheckboxProps: (record: TableListItem) => ({
disabled: record.disabled,
}),
};
......@@ -87,12 +119,14 @@ class StandardTable extends PureComponent {
message={
<Fragment>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
{needTotalList.map(item => (
{needTotalList.map((item, index) => (
<span style={{ marginLeft: 8 }} key={item.dataIndex}>
{item.title}
总计&nbsp;
<span style={{ fontWeight: 600 }}>
{item.render ? item.render(item.total) : item.total}
{item.render
? item.render(item.total, item as TableListItem, index)
: item.total}
</span>
</span>
))}
......
TableList/src/components/UpdateForm.tsx 0 → 100644
View file @ 68809608
import React, { Component } from 'react';
import { Input, Select, Button, DatePicker, Form, Modal, Steps, Radio } from 'antd';
import { TableListItem } from '../data';
import { FormComponentProps } from 'antd/lib/form';
export type IFormValsType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<TableListItem>;
export interface UpdateFormProps extends FormComponentProps {
handleUpdateModalVisible: (flag?: boolean, formVals?: IFormValsType) => void;
handleUpdate: (values: IFormValsType) => 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: IFormValsType;
currentStep: number;
}
class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
static defaultProps = {
handleUpdate: () => {},
handleUpdateModalVisible: () => {},
values: {},
};
formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
constructor(props: UpdateFormProps) {
super(props);
this.state = {
formVals: {
name: props.values.name,
desc: props.values.desc,
key: props.values.key,
target: '0',
template: '0',
type: '1',
time: '',
frequency: 'month',
},
currentStep: 0,
};
}
handleNext = (currentStep: number) => {
const { form, handleUpdate } = this.props;
const { formVals: oldValue } = this.state;
form.validateFields((err, fieldsValue) => {
if (err) return;
const formVals = { ...oldValue, ...fieldsValue };
this.setState(
{
formVals,
},
() => {
if (currentStep < 2) {
this.forward();
} else {
handleUpdate(formVals);
}
}
);
});
};
backward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep - 1,
});
};
forward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep + 1,
});
};
renderContent = (currentStep: number, formVals: IFormValsType) => {
const { form } = this.props;
if (currentStep === 1) {
return [
<FormItem key="target" {...this.formLayout} label="监控对象">
{form.getFieldDecorator('target', {
initialValue: formVals.target,
})(
<Select style={{ width: '100%' }}>
<Option value="0">表一</Option>
<Option value="1">表二</Option>
</Select>
)}
</FormItem>,
<FormItem key="template" {...this.formLayout} label="规则模板">
{form.getFieldDecorator('template', {
initialValue: formVals.template,
})(
<Select style={{ width: '100%' }}>
<Option value="0">规则模板一</Option>
<Option value="1">规则模板二</Option>
</Select>
)}
</FormItem>,
<FormItem key="type" {...this.formLayout} label="规则类型">
{form.getFieldDecorator('type', {
initialValue: formVals.type,
})(
<RadioGroup>
<Radio value="0">强</Radio>
<Radio value="1">弱</Radio>
</RadioGroup>
)}
</FormItem>,
];
}
if (currentStep === 2) {
return [
<FormItem key="time" {...this.formLayout} label="开始时间">
{form.getFieldDecorator('time', {
rules: [{ required: true, message: '请选择开始时间！' }],
})(
<DatePicker
style={{ width: '100%' }}
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间"
/>
)}
</FormItem>,
<FormItem key="frequency" {...this.formLayout} label="调度周期">
{form.getFieldDecorator('frequency', {
initialValue: formVals.frequency,
})(
<Select style={{ width: '100%' }}>
<Option value="month">月</Option>
<Option value="week">周</Option>
</Select>
)}
</FormItem>,
];
}
return [
<FormItem key="name" {...this.formLayout} label="规则名称">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入规则名称！' }],
initialValue: formVals.name,
})(<Input placeholder="请输入" />)}
</FormItem>,
<FormItem key="desc" {...this.formLayout} label="规则描述">
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
initialValue: formVals.desc,
})(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
</FormItem>,
];
};
renderFooter = (currentStep: number) => {
const { handleUpdateModalVisible, values } = this.props;
if (currentStep === 1) {
return [
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
上一步
</Button>,
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
下一步
</Button>,
];
}
if (currentStep === 2) {
return [
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
上一步
</Button>,
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
完成
</Button>,
];
}
return [
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
下一步
</Button>,
];
};
render() {
const { updateModalVisible, handleUpdateModalVisible, values } = this.props;
const { currentStep, formVals } = this.state;
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
destroyOnClose
title="规则配置"
visible={updateModalVisible}
footer={this.renderFooter(currentStep)}
onCancel={() => handleUpdateModalVisible(false, values)}
afterClose={() => handleUpdateModalVisible()}
>
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="配置规则属性" />
<Step title="设定调度周期" />
</Steps>
{this.renderContent(currentStep, formVals)}
</Modal>
);
}
}
export default UpdateForm;
TableList/src/data.d.ts 0 → 100644
View file @ 68809608
export interface TableListItem {
key: number;
disabled?: boolean;
href: string;
avatar: string;
name: string;
title: 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 TableListDate {
list: TableListItem[];
pagination: Partial<TableListPagination>;
}
export interface TableListParams {
sorter: string;
status: string;
name: string;
pageSize: number;
currentPage: number;
}
TableList/src/index.js → TableList/src/index.tsx
View file @ 68809608
import React, { PureComponent, Fragment } from 'react';
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
......@@ -14,271 +14,65 @@ import {
Menu,
InputNumber,
DatePicker,
Modal,
message,
Badge,
Divider,
Steps,
Radio,
} from 'antd';
import StandardTable from './components/StandardTable';
import { FormComponentProps } from 'antd/lib/form';
import { SorterResult } from 'antd/lib/table';
import StandardTable, { StandardTableColumnProps } from './components/StandardTable';
import { TableListItem, TableListParams, TableListPagination } from './data';
import { Dispatch } from 'redux';
import { IStateType } from './model';
import styles from './style.less';
import UpdateForm, { IFormValsType } from './components/UpdateForm';
import CreateForm from './components/CreateForm';
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const getValue = obj =>
const getValue = (obj: { [x: string]: string[] }) =>
Object.keys(obj)
.map(key => obj[key])
.join(',');
type IStatusMapType = 'default' | 'processing' | 'success' | 'error';
const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['关闭', '运行中', '已上线', '异常'];
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd(fieldsValue);
});
};
return (
<Modal
destroyOnClose
title="新建规则"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
})(<Input placeholder="请输入" />)}
</FormItem>
</Modal>
);
});
@Form.create()
class UpdateForm extends PureComponent {
static defaultProps = {
handleUpdate: () => {},
handleUpdateModalVisible: () => {},
values: {},
};
constructor(props) {
super(props);
this.state = {
formVals: {
name: props.values.name,
desc: props.values.desc,
key: props.values.key,
target: '0',
template: '0',
type: '1',
time: '',
frequency: 'month',
},
currentStep: 0,
};
this.formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
}
handleNext = currentStep => {
const { form, handleUpdate } = this.props;
const { formVals: oldValue } = this.state;
form.validateFields((err, fieldsValue) => {
if (err) return;
const formVals = { ...oldValue, ...fieldsValue };
this.setState(
{
formVals,
},
() => {
if (currentStep < 2) {
this.forward();
} else {
handleUpdate(formVals);
}
}
);
});
};
backward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep - 1,
});
};
forward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep + 1,
});
};
renderContent = (currentStep, formVals) => {
const { form } = this.props;
if (currentStep === 1) {
return [
<FormItem key="target" {...this.formLayout} label="监控对象">
{form.getFieldDecorator('target', {
initialValue: formVals.target,
})(
<Select style={{ width: '100%' }}>
<Option value="0">表一</Option>
<Option value="1">表二</Option>
</Select>
)}
</FormItem>,
<FormItem key="template" {...this.formLayout} label="规则模板">
{form.getFieldDecorator('template', {
initialValue: formVals.template,
})(
<Select style={{ width: '100%' }}>
<Option value="0">规则模板一</Option>
<Option value="1">规则模板二</Option>
</Select>
)}
</FormItem>,
<FormItem key="type" {...this.formLayout} label="规则类型">
{form.getFieldDecorator('type', {
initialValue: formVals.type,
})(
<RadioGroup>
<Radio value="0">强</Radio>
<Radio value="1">弱</Radio>
</RadioGroup>
)}
</FormItem>,
];
}
if (currentStep === 2) {
return [
<FormItem key="time" {...this.formLayout} label="开始时间">
{form.getFieldDecorator('time', {
rules: [{ required: true, message: '请选择开始时间！' }],
})(
<DatePicker
style={{ width: '100%' }}
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间"
/>
)}
</FormItem>,
<FormItem key="frequency" {...this.formLayout} label="调度周期">
{form.getFieldDecorator('frequency', {
initialValue: formVals.frequency,
})(
<Select style={{ width: '100%' }}>
<Option value="month">月</Option>
<Option value="week">周</Option>
</Select>
)}
</FormItem>,
];
}
return [
<FormItem key="name" {...this.formLayout} label="规则名称">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入规则名称！' }],
initialValue: formVals.name,
})(<Input placeholder="请输入" />)}
</FormItem>,
<FormItem key="desc" {...this.formLayout} label="规则描述">
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
initialValue: formVals.desc,
})(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
</FormItem>,
];
};
renderFooter = currentStep => {
const { handleUpdateModalVisible, values } = this.props;
if (currentStep === 1) {
return [
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
上一步
</Button>,
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
下一步
</Button>,
];
}
if (currentStep === 2) {
return [
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
上一步
</Button>,
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
完成
</Button>,
];
}
return [
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
下一步
</Button>,
];
};
render() {
const { updateModalVisible, handleUpdateModalVisible, values } = this.props;
const { currentStep, formVals } = this.state;
interface TableListProps extends FormComponentProps {
dispatch: Dispatch;
loading: boolean;
BLOCK_NAME_CAMEL_CASE: IStateType;
}
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
destroyOnClose
title="规则配置"
visible={updateModalVisible}
footer={this.renderFooter(currentStep)}
onCancel={() => handleUpdateModalVisible(false, values)}
afterClose={() => handleUpdateModalVisible()}
>
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="配置规则属性" />
<Step title="设定调度周期" />
</Steps>
{this.renderContent(currentStep, formVals)}
</Modal>
);
}
interface TableListState {
modalVisible: boolean;
updateModalVisible: boolean;
expandForm: boolean;
selectedRows: Array<TableListItem>;
formValues: { [key: string]: string };
stepFormValues: Partial<TableListItem>;
}
/* eslint react/no-multi-comp:0 */
@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => ({
@connect(
({
BLOCK_NAME_CAMEL_CASE,
loading,
}: {
BLOCK_NAME_CAMEL_CASE: IStateType;
loading: {
models: {
[key: string]: boolean;
};
};
}) => ({
BLOCK_NAME_CAMEL_CASE,
loading: loading.models.rule,
}))
@Form.create()
class TableList extends PureComponent {
state = {
})
)
class TableList extends Component<TableListProps, TableListState> {
state: TableListState = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
......@@ -287,7 +81,7 @@ class TableList extends PureComponent {
stepFormValues: {},
};
columns = [
columns: StandardTableColumnProps[] = [
{
title: '规则名称',
dataIndex: 'name',
......@@ -301,7 +95,7 @@ class TableList extends PureComponent {
dataIndex: 'callNo',
sorter: true,
align: 'right',
render: val => `${val} 万`,
render: (val: string) => `${val} 万`,
// mark to display a total number
needTotal: true,
},
......@@ -311,22 +105,22 @@ class TableList extends PureComponent {
filters: [
{
text: status[0],
value: 0,
value: '0',
},
{
text: status[1],
value: 1,
value: '1',
},
{
text: status[2],
value: 2,
value: '2',
},
{
text: status[3],
value: 3,
value: '3',
},
],
render(val) {
render(val: IStatusMapType) {
return <Badge status={statusMap[val]} text={status[val]} />;
},
},
......@@ -334,7 +128,7 @@ class TableList extends PureComponent {
title: '上次调度时间',
dataIndex: 'updatedAt',
sorter: true,
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
render: (val: string) => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
},
{
title: '操作',
......@@ -355,7 +149,11 @@ class TableList extends PureComponent {
});
}
handleStandardTableChange = (pagination, filtersArg, sorter) => {
handleStandardTableChange = (
pagination: Partial<TableListPagination>,
filtersArg: Record<keyof TableListItem, string[]>,
sorter: SorterResult<TableListItem>
) => {
const { dispatch } = this.props;
const { formValues } = this.state;
......@@ -365,7 +163,7 @@ class TableList extends PureComponent {
return newObj;
}, {});
const params = {
const params: Partial<TableListParams> = {
currentPage: pagination.current,
pageSize: pagination.pageSize,
...formValues,
......@@ -400,7 +198,7 @@ class TableList extends PureComponent {
});
};
handleMenuClick = e => {
handleMenuClick = (e: { key: string }) => {
const { dispatch } = this.props;
const { selectedRows } = this.state;
......@@ -424,13 +222,13 @@ class TableList extends PureComponent {
}
};
handleSelectRows = rows => {
handleSelectRows = (rows: TableListItem[]) => {
this.setState({
selectedRows: rows,
});
};
handleSearch = e => {
handleSearch = (e: React.FormEvent) => {
e.preventDefault();
const { dispatch, form } = this.props;
......@@ -454,20 +252,20 @@ class TableList extends PureComponent {
});
};
handleModalVisible = flag => {
handleModalVisible = (flag?: boolean) => {
this.setState({
modalVisible: !!flag,
});
};
handleUpdateModalVisible = (flag, record) => {
handleUpdateModalVisible = (flag?: boolean, record?: IFormValsType) => {
this.setState({
updateModalVisible: !!flag,
stepFormValues: record || {},
});
};
handleAdd = fields => {
handleAdd = (fields: { desc: any }) => {
const { dispatch } = this.props;
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/add',
......@@ -480,7 +278,7 @@ class TableList extends PureComponent {
this.handleModalVisible();
};
handleUpdate = fields => {
handleUpdate = (fields: IFormValsType) => {
const { dispatch } = this.props;
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/update',
......@@ -496,9 +294,8 @@ class TableList extends PureComponent {
};
renderSimpleForm() {
const {
form: { getFieldDecorator },
} = this.props;
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
......@@ -618,7 +415,9 @@ class TableList extends PureComponent {
const {
BLOCK_NAME_CAMEL_CASE: { data },
loading,
form,
} = this.props;
const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
const menu = (
<Menu onClick={this.handleMenuClick} selectedKeys={[]}>
......@@ -665,12 +464,13 @@ class TableList extends PureComponent {
/>
</div>
</Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} />
<CreateForm {...parentMethods} modalVisible={modalVisible} form={form} />
{stepFormValues && Object.keys(stepFormValues).length ? (
<UpdateForm
{...updateMethods}
updateModalVisible={updateModalVisible}
values={stepFormValues}
form={form}
/>
) : null}
</Fragment>
......@@ -678,4 +478,4 @@ class TableList extends PureComponent {
}
}
export default TableList;
export default Form.create()(TableList);
TableList/src/model.js → TableList/src/model.ts
View file @ 68809608
import { queryRule, removeRule, addRule, updateRule } from './service';
import { TableListDate } from './data';
import { Reducer } from 'redux';
import { EffectsCommandMap } from 'dva';
import { AnyAction } from 'redux';
export default {
export interface IStateType {
data: TableListDate;
}
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
) => void;
export interface ModelType {
namespace: string;
state: IStateType;
effects: {
fetch: Effect;
add: Effect;
remove: Effect;
update: Effect;
};
reducers: {
save: Reducer<IStateType>;
};
}
const Model: ModelType = {
namespace: 'BLOCK_NAME_CAMEL_CASE',
state: {
......@@ -53,3 +80,5 @@ export default {
},
},
};
export default Model;
TableList/src/service.js → TableList/src/service.ts
View file @ 68809608
import request from 'umi-request';
import { TableListParams } from './data';
export async function queryRule(params) {
export async function queryRule(params: TableListParams) {
return request(`/api/BLOCK_NAME`, {
params,
});
}
export async function removeRule(params) {
export async function removeRule(params: TableListParams) {
return request('/api/BLOCK_NAME', {
method: 'POST',
data: {
......@@ -16,7 +17,7 @@ export async function removeRule(params) {
});
}
export async function addRule(params) {
export async function addRule(params: TableListParams) {
return request('/api/BLOCK_NAME', {
method: 'POST',
data: {
......@@ -26,7 +27,7 @@ export async function addRule(params) {
});
}
export async function updateRule(params) {
export async function updateRule(params: TableListParams) {
return request('/api/BLOCK_NAME', {
method: 'POST',
data: {
......
package.json
View file @ 68809608
{
"private": true,
"scripts": {
"dev": "cross-env PAGES_PATH='StepForm/src' umi dev",
"dev": "cross-env PAGES_PATH='TableList/src' umi dev",
"lint:style": "stylelint \"src/**/*.less\" --syntax less",
"lint": "eslint --ext .js src mock tests && npm run lint:style",
"lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment