ModalBatch.js 5.2 KB
Newer Older
王绍森's avatar
王绍森 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
/**
 * 赖井平
 * 2019年3月2日
 * 用于 批量弹窗操作
 * */


import ButtonDiy from '@/baseComponent/ButtonDiy';
import ModalDiy from '@/baseComponent/ModalDiy';
import FormArray from '../component/FormArray';
import React, { Component, Fragment } from 'react';
import { checkDate } from '@/baseComponent/utils';
import { message } from 'antd';
import PropTypes from 'prop-types';

export default class ModalBatch extends Component {

  constructor(props) {
    super(props);
    const { values } = this.props;
    this.state = {
      showModal: false,
      formValues: { ...values }, // 将默认值传进去 用于新增时可能遇到的需要传值的情况
    };
  }

  componentWillUnmount() {
  }

  changeShow = () => {
    const { beforeShowModel, selectRows, initFormValues } = this.props;
    const { formValues, showModal } = this.state;
    if (!selectRows.length && !this.state.showModal) {
      message.warning('请至少选择一条数据');
      return false;
    }
    if(initFormValues && !showModal){
       initFormValues(selectRows,formValues).then((response)=>{
         this.setState({
           formValues: response ,
         },()=>{
           //console.log(this.state.formValues);
         })
      });

    }



    /**
     * 设置modal是否显示
     * */
    let flag;
    if (!showModal && beforeShowModel) {
      beforeShowModel(this.props, ({ text, type, isNotShow }) => {
        flag = isNotShow;
        if (isNotShow && text) {
          message[type](text);
        }
      });
    }
    if (flag) {
      return false;
    }
    /**
     * 设置modal是否显示
     * */

    this.clearData();
    this.setState({
      showModal: !showModal,
    });
  };

  formStateChange = (value, key) => {
    let oldValue = this.state.formValues;
    oldValue[key] = value;
    this.setState({
      formValues: oldValue,
    });
  };

  clearData = () => {
    const { values, giveDefaultValue, selectRows} = this.props;
    let formValues = {
      ...values,
    };
    if(giveDefaultValue){
      formValues = giveDefaultValue(selectRows,formValues);
    }
    this.setState({
      formValues,
    });
  };

  handleOk = () => {
    let { formValues } = this.state;
    let param = { ...formValues };
    const { fields, url, responseCallBack, getPage,
      beforeSubmit, selectRows, postKey, sourceKey,
      handleSelectRows, apiServiceApi } = this.props;
    for (let item of fields) {
      if (item.required && !formValues[item.key] && formValues[item.key] !== 0) {
        message.warning(`${item.name}是必填项,请填写`);
        return false;
      }
      /**
       * 校验开始时间必须在结束时间之前
       * */
      if (item.rule && item.rule === 'mustAfterStart') {
        const check = checkDate(formValues[item.key], formValues[item.checkKey]);
        if (!check) {
          message.warning(`${item.name}必须在${item.checkKeyName}之后`);
          return false;
        }
      }
    }

    param[postKey] = selectRows.map((item) => {
      return item[sourceKey];
    });
    if (beforeSubmit) {
      let postData = beforeSubmit(this.props, formValues);
      param = {
        ...param,
        ...postData,
      };
    }

    apiServiceApi(param).then((response) => {
      if (response) {
        if (responseCallBack && !responseCallBack(response)) {
          this.changeShow();
          return false;
        } else {
          handleSelectRows([]);
          message.success('保存成功');
          this.changeShow();
          getPage();
        }
      } else {
        this.changeShow();
        return false;
      }
    });

  };

  render() {
    const { showModal, formValues } = this.state;
    const { name, className, fields, nameSpan, fileSpan } = this.props;

    return (
      <Fragment>
        <ButtonDiy name={name}
                   className={className}
                   handleClick={this.changeShow}/>

        {showModal ?
          <ModalDiy handleOk={this.handleOk}
                    title={name}
                    handleCancel={this.changeShow}
          >
            <FormArray  config={fields}
                        value={formValues}
                        changeValue={this.formStateChange}
                        nameSpan={nameSpan}
                        fileSpan={fileSpan}
                        style={{ paddingTop: '0px' }}
            />
          </ModalDiy> : null}
      </Fragment>);
  }
}
ModalBatch.propTypes = {
  name: PropTypes.string, // 按钮名称和 弹窗的标题
  className: PropTypes.string, // 按钮样式
  fields: PropTypes.array.isRequired,  // 填写的字段的配置
  values: PropTypes.object, // 如果有默认参数  则在页面的业务逻辑中传进来
  url: PropTypes.string.isRequired,  // 接口url
  responseCallBack: PropTypes.func, // 接口返回数据检查
  getPage: PropTypes.func,  // 刷新页面的方法
  nameSpan: PropTypes.object, // 页面排版
  fileSpan: PropTypes.object, // 页面排版
};

ModalBatch.defaultProps = {
  name: '新增',
  className: 'primaryBlue',
  values: {},
  sourceKey: 'id',
  postKey: 'ids',
  selectRows: [],
  url: 'asdasd/asdasd',
  responseCallBack: (response) => {
    return !!response;
  },
  /*beforeShowModel: (props, callback) => {

  },*/
  nameSpan: { big: 4, small: 4 },
  fileSpan: { big: 1, small: 1 },
};