Skip to content

W
WebPublic
提交 61f1341e authored 作者: 王绍森's avatar 王绍森
浏览文件
操作

修改审核按钮

上级 ef958eb6
隐藏空白字符变更
内嵌 并排
正在显示 包含 459 行增加 和 4 行删除
FormInsertDiy/AuditButton/index.js 0 → 100644
浏览文件 @ 61f1341e
/**
* 审核按钮封装
* 徐立
* 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() {
const { dispatch, callback, data, form } = props;
const { oldKey, btnValue } = affairOkParams;
form.validateFieldsAndScroll((err, values) => {
if (err) return;
setSubmitLoading(true);
preHandle(values);
dispatch({
type: 'affair/getExamineProcess',
payload: {
taskIds: [data.taskId], // 接口里面的taskId 任务Id
code: data.code,
// 审核相关内容
examineMap: JSON.stringify({
[oldKey]: btnValue, // 每个配置按钮对应的对象内容 oldkey = 接口中 key btnValue = 接口中 value
// reason: value, // 审批理由
code: 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);
FormInsertDiy/AuditButton/pagesBtn/index.jsx 0 → 100644
浏览文件 @ 61f1341e
/**
* 徐立
* 2019年9月29日
* 该组件为按钮设计汇总，通过传入get值调取对应组件
* btn+数字，为对应按钮方法，从左到右计算
* 以下为样式类名说明
* .btn_margin 按钮右边距
* .btn 按钮通用样式
* .btn_no 不通过专属样式
* .btn_reject 驳回专属样式
* 以下为自定义按钮数组说明
* btnList 为传入数组，具体参数参考为以下
* [
* {
* type:primary, // 按钮基础样式 参考antd
* click:()=>{}, // 点击事件
* style:{}, // 自定义按钮样式,传入为对象
* content: '', // 自定义按钮内容
* margin: boolean, // 是否使用默认margin
* }
* ]
*/
import React from 'react';
import { Button } from 'antd';
import Item from 'antd-mobile/lib/popover/Item';
import styles from './styles.less';
export default function pagesBtn(props) {
const {
get,
btnOne,
disabled, // 按钮控制状态
btnTwo,
btnThree,
btnList, // 自定义按钮时使用，传入数组进行按钮组装
style, // 自定义单个按钮样式
text, // 自定义按钮文本
isSumbitLoading, // 提交状态
} = props;
switch (get) {
/**
* 常用于发起流程底部按钮
*/
case '1':
return (
<div className={styles.btn_page}>
<Button
shape="round"
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')}
disabled={disabled}
onClick={btnOne}
loading={isSumbitLoading}
>
暂存草稿
</Button>
<Button
shape="round"
loading={isSumbitLoading}
className={styles.btn}
onClick={btnTwo}
disabled={disabled}
type="primary"
>
提交
</Button>
</div>
);
/**
* 常用于审核用底部按钮
*/
case '2':
return (
<div className={styles.btn_page}>
<Button
shape="round"
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}
>
不通过
</Button>
<Button
shape="round"
disabled={disabled}
loading={isSumbitLoading && isSumbitLoading}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ')}
onClick={btnTwo}
>
驳回
</Button>
<Button
shape="round"
disabled={disabled}
className={styles.btn}
type="primary"
loading={isSumbitLoading && isSumbitLoading}
onClick={btnThree}
>
通过
</Button>
</div>
);
/**
* 查询类底部按钮
*/
case '3':
return (
<div className={styles.btn_page}>
<Button
shape="round"
disabled={disabled}
className={styles.btn}
type="primary"
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}
>
查询
</Button>
</div>
);
/**
* 模态框常用底部按钮
*/
case '4':
return (
<div className={styles.btn_page}>
<Button
shape="round"
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}
>
取消
</Button>
<Button
shape="round"
disabled={disabled}
className={styles.btn}
type="primary"
onClick={btnTwo}
loading={isSumbitLoading && isSumbitLoading}
>
确定
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '5':
return (
<div className={styles.btn_page}>
<Button
shape="round"
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}
>
驳回
</Button>
<Button
shape="round"
disabled={disabled}
className={styles.btn}
loading={isSumbitLoading && isSumbitLoading}
type="primary"
onClick={btnTwo}
>
通过
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '6':
return (
<div className={styles.btn_page}>
<Button
shape="round"
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}
>
拒绝
</Button>
<Button
shape="round"
disabled={disabled}
className={styles.btn}
loading={isSumbitLoading && isSumbitLoading}
type="primary"
onClick={btnTwo}
>
通过
</Button>
</div>
);
/**
* 自定义按钮数量 样式 以及按钮内容
*/
case '7':
return (
<div className={styles.btn_page}>
{btnList.length > 0
? btnList.map((item, index) => {
return (
<Button
shape="round"
disabled={disabled}
key={index}
type={Item.type}
style={item.style}
onClick={item.click}
loading={isSumbitLoading && isSumbitLoading}
className={[`${item.margin ? styles.btn_margin : ''}`, `${styles.btn}`].join(
' '
)}
>
{item.content}
</Button>
);
})
: ''}
</div>
);
/**
* 自定义单个组件按钮
*/
case '8':
return (
<Button
shape='round'
type={style === 'deafalut' ? 'primary' : ''}
className={style !== 'deafalut' ? style : ''}
style={{ minHeight: 32, minWidth: 90, marginLeft: style === 'deafalut' ? 16 : '' }}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}
>
{text}
</Button>
);
default:
return null;
}
}
FormInsertDiy/AuditButton/pagesBtn/styles.less 0 → 100644
浏览文件 @ 61f1341e
.btn_page{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.btn{
min-width: 90px;
min-height: 32px;
border-radius: 2px;
}
.btn_margin{
margin-right: 16px;
}
.btn_no{
color: #FF5350;
border:1px solid #FF5350;
}
.btn_reject{
color: #FF9B00;
border:1px solid #FF9B00;
}
}
\ No newline at end of file
FormInsertDiy/AuditButton/styles.less 0 → 100644
浏览文件 @ 61f1341e
/* 通过模态框状态 */
.is_ok{
height: 336px;
box-sizing: border-box;
padding: 60px 81px 0px 59px;
overflow: hidden;
.header{
margin-bottom: 23px;
span{
font-size: 14px;
line-height: 24px;
}
span:nth-child(1){
color: #666666;
text-align: right;
margin-right: 24px;
}
span:nth-child(2){
font-weight: bold;
}
}
.body{
display: flex;
margin-bottom: 60px;
span{
font-size: 14px;
line-height: 24px;
color: #666666;
}
span:nth-child(1){
text-align: right;
margin-right: 24px;
}
}
}
.btn_page{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.btn{
min-width: 90px;
min-height: 32px;
}
.btn_margin{
margin-left: 24px;
}
.btn_no{
color: #FF5350;
border:1px solid #FF5350;
}
.btn_reject{
color: #FF9B00;
border:1px solid #FF9B00;
}
}
FormInsertDiy/AuditPage/AuditForm.js
浏览文件 @ 61f1341e
import React, { useState, useEffect } from 'react';
import router from 'umi/router';
import { Form, Spin } from 'antd';
import Shell from '@/baseComponent/Shell';
import { ModalInfo } from '@/baseComponent/Modal';
import HistoryForm from '@/webPublic/one_stop_public/Entrance/historyForm';
import React, { useState, useEffect } from 'react';
import { getHistoryFormDetail } from '../../Services';
import AuditButton from '@/webPublic/one_stop_public/AffairButton/AuditButton';
import withGoBack from '@/highOrderComponent/withGoBack';
import HistoryForm from '@/webPublic/one_stop_public/Entrance/historyForm';
import AuditButton from '../AuditButton';
let AuditForm = ({ code, isNewForm, form }) => {
function submitCb(res) {
ModalInfo(`提交${res ? '成功' : '失败'}！`);
ModalInfo(`提交${res ? '成功' : '失败'}！`, {onOk: () => router.goBack()});
}
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论