antd demand data stream

Disclaimer: This blog is used as a note, the contents of the original but also learn from other bloggers, open - learning - learn https://blog.csdn.net/chushoufengli/article/details/91562757

 https://blog.csdn.net/ws995339251/article/details/88089418

https://blog.csdn.net/zl1zl2zl3/article/details/81357146

---

 

 

equipment/index.tsx

import React, { PureComponent } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TableHeaderWrapper from '@/components/TableHeaderWrapper';
import { connect } from 'dva';
import moment from 'moment';
import {
  Card,
  Form,
  Input,
  Divider,
  Table,
  Modal,
  Row,
  Col,
  Button,
  Popconfirm,
  Checkbox,
  Select,
} from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { PaginationConfig } from 'antd/lib/table';
import WindowModal from './modal/WindowModal';

const { Option } = Select;

interface IProps extends FormComponentProps {
  list: any[];
  roleList: any[];
  loading: any;
  dispatch: any;
  pagination: PaginationConfig;
}

interface IState {
  visible;
  isCreate;
  currentRecord;
}

@connect(({ equipment, loading }) => ({
  ...equipment, // 解析store所有值
  loading: loading.models.equipment,
}))
@Form.create()
class BasicList extends PureComponent<IProps, IState> {
  index = 0;

  state = {
    visible: false,
    isCreate: true,
    currentRecord: {},
    routes: [],
  };

  columns = [
    {
      title: '设备编号',
      dataIndex: 'deviceNo',
    },
    {
      title: '设备型号',
      dataIndex: 'model',
    },
    {
      title: '添加日期',
      dataIndex: 'creationTime',
      render: (text, record) => {
        return moment(text).format('YYYY-MM-DD HH:mm')
      },
    },
    {
      title: '操作',
      render: (text, record) => (
        <div>
          <a onClick={() => this.onEditCLick(record)}>编辑</a>
          <Divider type="vertical" />
          {record.enable === 0 ?
            <Popconfirm title="是否启用此设备？" onConfirm={() => this.onStartOrStop({id: record.id, enable: 1})}>
              <a>启用</a>
            </Popconfirm>
            :
            <Popconfirm title="是否禁用此设备？" onConfirm={() => this.onStartOrStop({id: record.id, enable: 0})}>
              <a>禁用</a>
            </Popconfirm>
          }
        </div>
      ),
    },
  ];

  componentDidMount() {
    this.fetchList();
  }

  fetchList = (payload?) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'equipment/fetch',
      payload,
    });
  };

  handlePagination = ({ current = 1 }) => {
    const queryParams = this.props.form.getFieldsValue();
    this.fetchList({ page: current, ...queryParams });
  };

  // 新增
  onAddCLick = (payload = {}) => {
    this.setState({
      currentRecord: {},
      isCreate: true,
      visible: true,
    });
  };

  // 编辑
  onEditCLick = record => {
    this.setState({
      currentRecord: record,
      isCreate: false,
      visible: true,
    });
  };

  // 新增或编辑用户信息
  saveOrAdd = (payload = {}) => {
    console.log('payload', payload);

    const { dispatch, pagination } = this.props;
    const { isCreate } = this.state;

    const callback = () => {
      this.setState({
        visible: false,
        currentRecord: {},
      });
      this.handlePagination(pagination);
    };
    if (isCreate) {
      dispatch({
        type: 'equipment/add',
        payload,
        callback,
      });
    } else {
      dispatch({
        type: 'equipment/update',
        payload,
        callback,
      });
    }
  };

  // 启用或禁用
  onStartOrStop = payload => {
    const { dispatch, pagination } = this.props;
    dispatch({
      type: 'equipment/update',
      payload,
      callback: () => {
        this.handlePagination(pagination);
      },
    });
  };

  render() {
    const {
      list = [],
      pagination,
      loading,
      form: { getFieldDecorator },
      form,
    } = this.props;
    const { visible, currentRecord, routes, isCreate } = this.state;
    const onCancel = () => {
      this.setState({ visible: false });
      Modal.destroyAll();
    };

    return (
      <PageHeaderWrapper title="设备管理">
        <WindowModal
          width={1000}
          dataSource={currentRecord}
          visible={visible}
          title={isCreate ? '添加设备' : '编辑'}
          destroyOnClose
          onCancel={onCancel}
          onOk={this.saveOrAdd}
        />
        <Card bordered={false}>
          <TableHeaderWrapper>
            <Row className="header-group" gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={16} sm={24}>
                <Button type="primary" onClick={() => this.onAddCLick({})}>
                  添加设备
                </Button>
              </Col>
            </Row>
          </TableHeaderWrapper>
          <Table
            rowKey="id"
            loading={loading}
            columns={this.columns}
            dataSource={list}
            pagination={pagination}
            onChange={this.handlePagination}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default BasicList;

 

model.js

import { query, addEquipment, updateEquipment } from '@/services/equipment';

export default {
  namespace: 'equipment',

  state: {
    list: [],
    pagination: {},
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(query, payload);
      console.log('response', response);

      yield put({
        type: 'save',
        payload: response.data,
      });
    },
    *add({ payload, callback }, { call, put }) {
      const response = yield call(addEquipment, payload);
      yield put({
        type: 'save',
        payload: response,
      });
      if (callback) callback();
    },
    // *remove({ payload, callback }, { call, put }) {
    //   const response = yield call(updateUser, payload);
    //   yield put({
    //     type: 'save',
    //     payload: response,
    //   });
    //   if (callback) callback();
    // },
    *update({ payload, callback }, { call, put }) {
      const response = yield call(updateEquipment, payload.id, payload);
      yield put({
        type: 'save',
        payload: response,
      });
      if (callback) callback();
    },
  },

  reducers: {
    save(state, action) {
      const { items: list, totalCount: total } = action.payload;
      const { pagination } = state;
      console.log('action.payload', list, total);

      return {
        ...state,
        list,
        pagination: {
          ...pagination,
          total,
        },
      };
    },
  },
};

equipment.js

import request from '@/utils/request';

export async function query(params) {
  return request('/devices',{ params });
}

export async function addEquipment(data) {
  return request('/devices', {
    method: 'POST',
    data,
  });
}

export async function updateEquipment(id, data) {
  return request(`/devices/${id}`, {
    method: 'PUT',
    data,
  });
}

export async function queryCurrent() {
  return request('/currentDevices');
}