Tablist finish

TableList/src/_mock.js → TableList/src/_mock.ts

 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

+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

-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

+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

+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

-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/locales/en-US.js

-export default {};

TableList/src/locales/pt-BR.js

-export default {};

TableList/src/locales/zh-CN.js

-export default {};

TableList/src/locales/zh-TW.js

-export default {};

TableList/src/model.js → TableList/src/model.ts

 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

 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

 {
   "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",