index.js

/**
 * 审核按钮封装
 * 徐立
 * 2020-3-28
 * data 为 'affair/getIdFormDetail' 接口请求到的数据
 * callback 提交完成后执行回调函数
 * form form表单控件
 */
import React, { useState } from 'react';
import { preHandle } from '@/webPublic/one_stop_public/utils/myutils';
import { connect } from 'dva';
import Btn from './pagesBtn';
import styles from './styles.less';
import ModalDiy from '@/baseComponent/ModalDiy';

function AuditButton(props) {
  const [visible, setVisible] = useState(false);
  const [modalContent, setModalContent] = useState('');
  const [isSubmitLoading, setSubmitLoading] = useState(false);
  const [affairOkParams, setAffairParams] = useState({});

  function affairOk() {
    // 有taskIds属性时，是批量审核，
    const { dispatch, callback, data, form, taskIds } = props;
    const { oldKey, btnValue } = affairOkParams;

    form.validateFieldsAndScroll((err, values) => {
      if (err) return;
      setSubmitLoading(true);
      preHandle(values);
      dispatch({
        type: 'affair/getExamineProcess',
        payload: {
          taskIds: taskIds || [data.taskId], // 接口里面的taskId 任务Id
          code: taskIds ? undefined : data.code,
          // 审核相关内容
          examineMap: JSON.stringify({
            [oldKey]: btnValue, // 每个配置按钮对应的对象内容 oldkey = 接口中 key btnValue = 接口中 value
            // reason: value, // 审批理由
            code: taskIds ? undefined : data.code,
          }),
          taskForm: JSON.stringify(values), // 审批表单的参数值
        },
        callback: val => {
          setSubmitLoading(false);
          setVisible(false);
          if (callback) {
            callback(val);
          }
        },
      });
    });
  }

  function hideModal() {
    setVisible(false);
  }

  /**
   * 根据不同值,返回对应样式
   */
  function getStyle(key, value) {
    if (key === 'examine') {
      switch (value) {
        case 1:
          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
        case 2:
          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
        case 0:
          return 'deafalut';
        case '1':
          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
        case '2':
          return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
        case '0':
          return 'deafalut';
        default:
          return 'deafalut';
      }
    } else {
      return 'deafalut';
    }
  }

  function showModal(str, key, value) {
    setModalContent(`确定${str}吗？`);
    setAffairParams({ oldKey: key, btnValue: value });
    setVisible(true);
  }

  const {
    data: { isHandle, btns },
  } = props;
  if (!isHandle || !Array.isArray(btns) || btns.length < 1) return null;
  return (
    <>
      <div className={styles.btn_page}>
        {btns.map(item => (
          <Btn
            get="8"
            key={item.value}
            btnOne={() => {
              showModal(item.name, item.key, item.value);
            }}
            text={item.name}
            style={getStyle(item.key, item.value)}
          />
        ))}
      </div>
      <ModalDiy
        visible={visible}
        title="提示"
        handleCancel={hideModal}
        handleOk={affairOk}
        confirmLoading={isSubmitLoading}
      >
        <div style={{ fontSize: 16, textAlign: 'center', height: 150, lineHeight: '150px' }}>{modalContent}</div>
      </ModalDiy>
    </>
  );
}

export default connect()(AuditButton);