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
/**
* 徐立
* 2019年9月29日
* 三次封装用户通过,驳回,拒绝状态
* @param { jsx } addition 附件按钮 由外部添加
*/
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,
addition, // 附件按钮 只负责显示
} = 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} />
})
):''
}
{
addition&&!isSumbitLoading&&addition
}
</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>
</>
)
}
}