Skip to content

W
WebPublic
提交 27568f67 authored 作者: 徐立's avatar 徐立
浏览文件
操作

新增审核按钮

上级 adfefd92
显示空白字符变更
内嵌 并排
正在显示 包含 752 行增加 和 4 行删除
one_stop_public/AffairButton/AuditButton/Modal/index.jsx 0 → 100644
浏览文件 @ 27568f67
/**
* 徐立
* 2019年9月16日
* Modal定制样式
*/
import React, { Component } from 'react'
import { Modal, Button } from 'antd';
import styles from './index.less'
export default class WebModal extends Component {
/**
* visible为显示装态
* handleCancel为取消函数
* title为定制标题内容
* width可以为收到输入
*/
render() {
let { visible, handleCancel, title, width } =this.props
return (
<div>
<Modal
closable={false}
visible={visible}
footer={null}
destroyOnClose={true}
width={!!width ? width : 800}
handleCancel={handleCancel}
style={{borderRadius:4}}
>
<div className={styles.content_div}>
<div className={styles.title}>{title}<Button className={styles.button} onClick={handleCancel}>X</Button></div>
{this.props.children}
</div>
</Modal>
</div>
)
}
}
one_stop_public/AffairButton/AuditButton/Modal/index.less 0 → 100644
浏览文件 @ 27568f67
.content_div{
margin:-24px;
position: relative;
.title{
color: #333333;
font-size: 16px;
font-weight: bold;
width: 100%;
line-height: 44px;
text-align: center;
background-color: #E0E7EE;
.button{
background-color: rgba(255, 255, 255, 0);
border:0 solid #cccccc;
float: right;
margin-top: 5px;
}
}
}
\ No newline at end of file
one_stop_public/AffairButton/AuditButton/index.jsx 0 → 100644
浏览文件 @ 27568f67
/**
* 审核按钮封装
* 徐立
* 2020-3-28
* data 为 'affair/getIdFormDetail' 接口请求到的数据
* callback 提交完成后执行回调函数
* form form表单控件
*/
import React, { Component } from 'react'
import BtnOk from './userTable';
import { preHandle } from '../../utils/myutils';
import { connect } from 'dva';
@connect()
export default class index extends Component {
constructor(props){
super(props)
this.state = {
isSumbitLoading:false,
isHandle: false,
}
}
affairOk = (oldkey, btnValue, value) => {
const { dispatch,callback,data } = this.props
this.setState({
isSumbitLoading: true,
},() => {
this.props.form.validateFieldsAndScroll((err, values) => {
if(!err){
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 => {
this.setState({
isSumbitLoading: false,
isHandle: false,
})
if(callback){
callback(val)
}
}
})
}
})
})
}
componentDidMount(){
const { data } = this.props
this.setState({
isHandle: data.isHandle
})
}
componentWillReceiveProps(nextProps){
const { data } = nextProps
this.setState({
isHandle: data.isHandle
})
}
render() {
const {
isSumbitLoading,
isHandle
} = this.state
const {
data
} = this.props
return (
<>
{
isHandle?
<BtnOk
isSecond = { data.isSecond }
affairOk = { this.affairOk }
isSumbitLoading = { isSumbitLoading }
btns = { data.btns }
/>
:null
}
</>
)
}
}
one_stop_public/AffairButton/AuditButton/pagesBtn/index.jsx 0 → 100644
浏览文件 @ 27568f67
/**
* 徐立
* 2019年9月29日
* 该组件为按钮设计汇总，通过传入get值调取对应组件
* btn+数字，为对应按钮方法，从左到右计算
* 以下为样式类名说明
* .btn_margin 按钮右边距
* .btn 按钮通用样式
* .btn_no 不通过专属样式
* .btn_reject 驳回专属样式
* 以下为自定义按钮数组说明
* btnList 为传入数组，具体参数参考为以下
* [
* {
* type:primary, // 按钮基础样式 参考antd
* click:()=>{}, // 点击事件
* style:{}, // 自定义按钮样式,传入为对象
* content: '', // 自定义按钮内容
* margin: boolean, // 是否使用默认margin
* }
* ]
*/
import React, { Component } from 'react';
import { Button } from 'antd';
import styles from './styles.less';
import Item from 'antd-mobile/lib/popover/Item';
export default class pagesBtn extends Component {
render() {
let {
get,
btnOne,
disabled, // 按钮控制状态
btnTwo,
btnThree,
btnList, // 自定义按钮时使用，传入数组进行按钮组装
style, // 自定义单个按钮样式
text, // 自定义按钮文本
isSumbitLoading, // 提交状态
} = this.props;
switch (get) {
/**
* 常用于发起流程底部按钮
*/
case '1':
return (
<div className={styles.btn_page}>
<Button
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')}
disabled={disabled}
onClick={btnOne}
loading={isSumbitLoading}
>
暂存草稿
</Button>
<Button loading={isSumbitLoading} className={styles.btn} onClick={btnTwo} disabled={disabled} type="primary">
提交
</Button>
</div>
);
/**
* 常用于审核用底部按钮
*/
case '2':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading&&isSumbitLoading}
>
不通过
</Button>
<Button
disabled={disabled}
loading={isSumbitLoading&&isSumbitLoading}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(
' ',
)}
onClick={btnTwo}
>
驳回
</Button>
<Button
disabled={disabled}
className={styles.btn}
type="primary"
loading={isSumbitLoading&&isSumbitLoading}
onClick={btnThree}>
通过
</Button>
</div>
);
/**
* 查询类底部按钮
*/
case '3':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={styles.btn}
type="primary"
onClick={btnOne}
loading={isSumbitLoading&&isSumbitLoading}>
查询
</Button>
</div>
);
/**
* 模态框常用底部按钮
*/
case '4':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading&&isSumbitLoading}
>
取消
</Button>
<Button
disabled={disabled}
className={styles.btn}
type="primary"
onClick={btnTwo}
loading={isSumbitLoading&&isSumbitLoading}
>
确定
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '5':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(
' ',
)}
onClick={btnOne}
loading={isSumbitLoading&&isSumbitLoading}
>
驳回
</Button>
<Button
disabled={disabled}
className={styles.btn}
loading={isSumbitLoading&&isSumbitLoading}
type="primary"
onClick={btnTwo}>
通过
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '6':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading&&isSumbitLoading}
>
拒绝
</Button>
<Button
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
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
type={style === 'deafalut' ? 'primary' : ''}
className={style !== 'deafalut' ? style : ''}
style={{ minHeight: 32, minWidth: 90,marginLeft:style === 'deafalut' ?16:'' }}
onClick={btnOne}
loading={isSumbitLoading&&isSumbitLoading}
>
{text}
</Button>
);
}
}
}
one_stop_public/AffairButton/AuditButton/pagesBtn/styles.less 0 → 100644
浏览文件 @ 27568f67
.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
one_stop_public/AffairButton/AuditButton/userTable/index.jsx 0 → 100644
浏览文件 @ 27568f67
/**
* 徐立
* 2019年9月29日
* 三次封装用户通过,驳回,拒绝状态
*/
import React, { Component } from 'react'
import Btn from '../pagesBtn';
import MyModal from '../Modal';
import styles from './styles.less';
import { Input,Row,Col,Modal } from 'antd';
const { TextArea } = Input;
export default class userButton extends Component {
constructor(){
super()
this.state = {
// 路由位置
visibleOk: false, // 通过模态框状态
value:'', // 文本域输入
user: '', // 用于保存用户点击了对应按钮
returnText: '',
key: '',// 后端返回按钮规格
btnValue: '',// 后端返回按钮状态
}
}
/**
* 通过按钮点击事件
*/
showModal = (str,key,value) => {
switch (str) {
case '通过':
this.setState({
returnText: '已通过该申请！'
})
break
case '驳回':
this.setState({
returnText: '已驳回该申请！'
})
break
case '不通过':
this.setState({
returnText: '该申请未通过！'
})
break
case '提交':
this.setState({
returnText: '该申请已提交！'
})
}
this.setState({
user: str,
visibleOk: true,
key,
btnValue:value
})
}
/**
* 审核状态,返回对应样式html
*/
getUser = () => {
let { user } = this.state
switch (user) {
case '通过':
return (<span style={{color:'#31C93F'}}>{user}</span>)
case '驳回':
return (<span style={{color:'#FF9B00'}}>{user}</span>)
case '拒绝':
return (<span style={{color:'#FF5350'}}>{user}</span>)
case '不通过':
return (<span style={{color:'#FF5350'}}>{user}</span>)
default:
return (<span >{user}</span>)
}
}
/**
* 通过按钮模态框取消状态
*/
handleCancelOk = () => {
this.setState({
visibleOk : false
})
}
/**
* 根据不同值,返回对应样式
*/
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'
}
} else {
return 'deafalut'
}
}
/**
* 用于确认用户输入
*/
postUser = () => {
let { key,btnValue,value } = this.state
this.props.affairOk(key,btnValue,value)
}
/**
* 文本域同步
*/
onChange = ({ target: { value } }) => {
this.setState({ value });
};
render() {
let { btnList,visibleOk,value,user,returnText } = this.state
let { affairOk,btns,isSecond,isSumbitLoading } = this.props
return (
<>
<div className={styles.btn_page}>
{
btns.length>0?(
btns.map((item,index) => {
let className = this.getStyle(item.key,item.value)
return <Btn get='8' key={index} btnOne={()=>{this.showModal(item.name,item.key,item.value)}} text={item.name} style={className} />
})
):''
}
</div>
{/* <Btn get='2' btnOne={()=>{this.showModal('不同意')}} btnTwo={()=>{this.showModal('驳回')}} btnThree={()=>{this.showModal('通过')}}/> */}
<MyModal
visible={ visibleOk }
title = {isSecond?'重新发起':'通过审批'}
width = {600}
handleCancel = { this.handleCancelOk }
>
<div className={styles.is_ok}>
<p className={styles.header}><span>{isSecond?'当前状态':'审批结果'}</span>{this.getUser()}</p>
<div className={styles.body}>
<span>{isSecond?'发起说明':'审批说明'}</span>
<span>
<TextArea
value={value}
onChange={this.onChange}
placeholder="请输入审批理由"
style={{width:380,height:120,color:'#7F8B95'}}
/>
</span>
</div>
<div>
<Btn get='4' isSumbitLoading={isSumbitLoading?isSumbitLoading:false} btnOne={this.handleCancelOk} btnTwo={ this.postUser }/>
</div>
</div>
</MyModal>
</>
)
}
}
one_stop_public/AffairButton/AuditButton/userTable/styles.less 0 → 100644
浏览文件 @ 27568f67
/* 通过模态框状态 */
.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;
border-radius: 2px;
}
.btn_margin{
margin-left: 16px;
}
.btn_no{
color: #FF5350;
border:1px solid #FF5350;
}
.btn_reject{
color: #FF9B00;
border:1px solid #FF9B00;
}
}
\ No newline at end of file
one_stop_public/AffairButton/AuditButton/userTable/twoTable.jsx 0 → 100644
浏览文件 @ 27568f67
/**
* 徐立
* 2019年9月30日
* 三次封装用户通过,拒绝状态
* affairOk 需要外部传入,进行请求相关
*/
import React, { Component } from 'react'
import Btn from '../pagesBtn';
import MyModal from '../Modal';
import styles from './styles.less';
import { Input,Row,Col,Modal } from 'antd';
const { TextArea } = Input;
export default class userButton extends Component {
constructor(){
super()
this.state = {
// 路由位置
visibleOk: false, // 通过模态框状态
value:'', // 文本域输入
user: '', // 用于保存用户点击了对应按钮
returnText: '', //
}
}
/**
* 通过按钮点击事件
*/
showModal = (str) => {
switch (str) {
case '通过':
this.setState({
returnText: '已通过该申请！'
})
break
case '驳回':
this.setState({
returnText: '已驳回该申请！'
})
break
}
this.setState({
user: str,
visibleOk: true,
})
}
/**
* 审核状态,返回对应样式html
*/
getUser = () => {
let { user } = this.state
switch (user) {
case '通过':
return (<span style={{color:'#31C93F'}}>{user}</span>)
case '驳回':
return (<span style={{color:'#FF9B00'}}>{user}</span>)
}
}
/**
* 通过按钮模态框取消状态
*/
handleCancelOk = () => {
this.setState({
visibleOk : false
})
}
/**
* 文本域同步
*/
onChange = ({ target: { value } }) => {
this.setState({ value });
};
render() {
let { btnList,visibleOk,value,user,returnText } = this.state
let { affairOk } = this.props
return (
<>
<Btn get='5' btnOne={()=>{this.showModal('驳回')}} btnTwo={()=>{this.showModal('通过')}} />
<MyModal
visible={ visibleOk }
title = '通过审批'
width = {600}
handleCancel = { this.handleCancelOk }
>
<div className={styles.is_ok}>
<p className={styles.header}><span>审批结果</span>{this.getUser()}</p>
<div className={styles.body}>
<span>审批说明</span>
<span>
<TextArea
value={value}
onChange={this.onChange}
placeholder="请输入审批理由"
style={{width:380,height:120,color:'#7F8B95'}}
/>
</span>
</div>
<div>
<Btn get='4' btnOne={this.handleCancelOk} btnTwo={ () => {affairOk(user,returnText,value)} }/>
</div>
</div>
</MyModal>
</>
)
}
}
one_stop_public/AffairButton/按钮使用文档.md
浏览文件 @ 27568f67
## 提交按钮使用文档 ## SumbitButton提交按钮使用文档
## 引入 ###引入
```js ```js
import SumbitButton from '@/webPublic/one_stop_public/AffairButton/SumbitButton' import SumbitButton from '@/webPublic/one_stop_public/AffairButton/SumbitButton'
``` ```
## 使用 ###使用
```js ```js
<SumbitButton <SumbitButton
...@@ -18,3 +17,21 @@ import SumbitButton from '@/webPublic/one_stop_public/AffairButton/SumbitButton' ...@@ -18,3 +17,21 @@ import SumbitButton from '@/webPublic/one_stop_public/AffairButton/SumbitButton'
/> />
``` ```
## AuditButton审核按钮使用文档
###引入
```js
import AuditButton from '@/webPublic/one_stop_public/AffairButton/AuditButton'
```
## 使用
```jsx
<AuditButton
data = {this.state.data} // 为 'affair/getIdFormDetail' 接口请求到的数据
callback = {() => {}} // 提交完成后回调函数
form = { form } // form表单控件
/>
```
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论