/** * 审核按钮封装 * 徐立 * 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);