美文网首页
payload传参

payload传参

作者: 逸笛 | 来源:发表于2020-01-15 19:26 被阅读0次

    Model:

    import { message } from "antd";
    import router from "umi/router";
    import { MATCHMAKER_NAMESPACE } from "../actions/matchmaker";
    import {
      list,
      submit,
      detail,
      remove,
      checkList,
      auditAnchor
    } from "../services/member";
    
    export default {
      namespace: MATCHMAKER_NAMESPACE,
      state: {
        data: {
          list: [],
          pagination: false
        },
        detail: {}
      },
      effects: {
        *fetchList({ payload }, { call, put }) {
          const { phone } = payload;
          const response = yield call(list, { isAnchor: 2, phone: phone });
          if (response.success) {
            yield put({
              type: "saveList",
              payload: {
                list: response.data.records,
                pagination: {
                  total: response.data.total,
                  current: response.data.current,
                  pageSize: response.data.size
                }
              }
            });
          }
        },
        *fetchAllList({ payload }, { call, put }) {
          const response = yield call(list, payload);
          if (response.success) {
            yield put({
              type: "saveList",
              payload: {
                list: response.data.records,
                pagination: {
                  total: response.data.total,
                  current: response.data.current,
                  pageSize: response.data.size
                }
              }
            });
          }
        },
        *fetchDetail({ payload }, { call, put }) {
          const response = yield call(detail, payload);
          if (response.success) {
            yield put({
              type: "saveDetail",
              payload: {
                detail: response.data
              }
            });
          }
        },
        *clearDetail({ payload }, { put }) {
          yield put({
            type: "removeDetail",
            payload: { payload }
          });
        },
        *submit({ payload }, { call }) {
          const response = yield call(submit, payload);
          if (response.success) {
            message.success("提交成功");
            router.push("/member/member");
          }
        },
        *remove({ payload }, { call }) {
          const {
            data: { keys },
            success
          } = payload;
          const response = yield call(remove, { ids: keys });
          if (response.success) {
            success();
          }
        }
      },
      reducers: {
        saveList(state, action) {
          return {
            ...state,
            data: action.payload
          };
        },
        saveDetail(state, action) {
          return {
            ...state,
            detail: action.payload.detail
          };
        },
        removeDetail(state) {
          return {
            ...state,
            detail: {}
          };
        }
      }
    };
    
    

    action:

    export const MATCHMAKER_NAMESPACE = "matchmaker";
    
    export function MATCHMAKER_LIST(payload) {
      return {
        type: `${MATCHMAKER_NAMESPACE}/fetchList`,
        payload
      };
    }
    
    
    export function MATCHMAKER_DETAIL(memberId) {
      return {
        type: `${MATCHMAKER_NAMESPACE}/fetchDetail`,
        payload: { memberId }
      };
    }
    
    export function MATCHMAKER_CLEAR_DETAIL() {
      return {
        type: `${MATCHMAKER_NAMESPACE}/clearDetail`,
        payload: {}
      };
    }
    
    export function MATCHMAKER_SUBMIT(payload) {
      return {
        type: `${MATCHMAKER_NAMESPACE}/submit`,
        payload
      };
    }
    
    export function MATCHMAKER_REMOVE(payload) {
      return {
        type: `${MATCHMAKER_NAMESPACE}/remove`,
        payload
      };
    }
    

    view:

    import React, { PureComponent } from "react";
    import { connect } from "dva";
    import { Button, Col, Form, Input, Row } from "antd";
    import Panel from "../../../components/Panel";
    import {
      MATCHMAKER_LIST
    } from "../../../actions/matchmaker";
    import Grid from "../../../components/Sword/Grid";
    
    const FormItem = Form.Item;
    
    @connect(({ matchmaker, loading }) => ({
      matchmaker,
      loading: loading.models.matchmaker
    }))
    @Form.create()
    class Matchmaker extends PureComponent {
      // ============ 查询 ===============
      handleSearch = params => {
        const { dispatch } = this.props;
        dispatch(MATCHMAKER_LIST(params));
      };
    
      // ============ 查询表单 ===============
      renderSearchForm = onReset => {
        const { form } = this.props;
        const { getFieldDecorator } = form;
    
        return (
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={6} sm={24}>
              <FormItem label="查询手机号">
                {getFieldDecorator("phone")(<Input placeholder="查询手机号" />)}
              </FormItem>
            </Col>
    
            <Col>
              <div style={{ float: "right" }}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={onReset}>
                  重置
                </Button>
              </div>
            </Col>
          </Row>
        );
      };
    
      render() {
        const code = "matchmaker";
    
        const {
          form,
          loading,
          matchmaker: { data }
        } = this.props;
    
        const columns = [
          {
            title: "红娘/月老流水号",
            dataIndex: "id"
          },
          {
            title: "红娘/月老头像",
            dataIndex: "avatar",
            render: avatar =>
              avatar && (
                <img
                  src={`${avatar}`}
                  alt="avatar"
                  style={{ width: "3rem", height: "3rem" }}
                />
              )
          },
          {
            title: "牵手号",
            dataIndex: "account"
          },
          {
            title: "手机号",
            dataIndex: "phone"
          },
          {
            title: "红娘/月老昵称",
            dataIndex: "nickName"
          },
    
          {
            title: "实名认证",
            dataIndex: "isRealNameAuthenticationValue"
          },
          {
            title: "性别",
            dataIndex: "sexValue"
          },
          {
            title: "会员类型",
            dataIndex: "typeValue"
          },
          {
            title: "会员状态",
            dataIndex: "statusValue"
          }
        ];
    
        return (
          <Panel>
            <Grid
              code={code}
              form={form}
              onSearch={this.handleSearch}
              renderSearchForm={this.renderSearchForm}
              loading={loading}
              data={data}
              columns={columns}
            />
          </Panel>
        );
      }
    }
    export default Matchmaker;
    
    

    相关文章

      网友评论

          本文标题:payload传参

          本文链接:https://www.haomeiwen.com/subject/gdfxzctx.html