Skip to content

W
WebPublic
提交 687a07d8 authored 作者: wanyielin's avatar wanyielin
浏览文件
操作

上传代码

上级 6b27371b
隐藏空白字符变更
内嵌 并排
正在显示 包含 251 行增加 和 209 行删除
one_stop_public/AffairButton/AuditButton/userTable/index.jsx
浏览文件 @ 687a07d8
......@@ -4,169 +4,213 @@
* 三次封装用户通过,驳回,拒绝状态
* @param { jsx } addition 附件按钮 由外部添加
*/
import React, { Component } from 'react'
import React, { Component } from 'react';
import { Input, Row, Col, Modal, Checkbox } from 'antd';
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: '该申请已提交！'
})
}
constructor() {
super();
this.state = {
// 路由位置
visibleOk: false, // 通过模态框状态
value: '', // 文本域输入
user: '', // 用于保存用户点击了对应按钮
returnText: '',
key: '', // 后端返回按钮规格
btnValue: '', // 后端返回按钮状态
checked: '', // 是否使用签名
};
}
/**
* 通过按钮点击事件
*/
showModal = (str, key, value) => {
switch (str) {
case '通过':
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 = () => {
returnText: '已通过该申请！',
});
break;
case '驳回':
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'
}
returnText: '已驳回该申请！',
});
break;
case '不通过':
this.setState({
returnText: '该申请未通过！',
});
break;
case '提交':
this.setState({
returnText: '该申请已提交！',
});
}
/**
* 用于确认用户输入
*/
postUser = () => {
let { key,btnValue,value } = this.state
this.props.affairOk(key,btnValue,value)
this.setState({
user: str,
visibleOk: true,
key,
btnValue: value,
});
};
/**
* 审核状态,返回对应样式html
*/
getUser = () => {
const { 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>;
}
/**
* 文本域同步
*/
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>
</>
)
};
/**
* 通过按钮模态框取消状态
*/
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 = () => {
const { key, btnValue, value, checked } = this.state;
this.props.affairOk(key, btnValue, value, checked);
};
/**
* 文本域同步
*/
onChange = ({ target: { value } }) => {
this.setState({ value });
};
/**
* 判断是否使用自己的签名
*/
onChange1 = e => {
this.setState({ checked: e.target.checked });
};
render() {
const { btnList, visibleOk, value, user, returnText } = this.state;
const {
affairOk,
btns,
isSecond,
isSumbitLoading,
addition, // 附件按钮 只负责显示
Sign, // 判断是否有签名
} = this.props;
return (
<>
<div className={styles.btn_page}>
{btns.length > 0
? btns.map((item, index) => {
const 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>
{Sign ? (
<div className={styles.body}>
<span>使用签名</span>
<span>
<Checkbox
defaultChecked={user.isUseBackImage}
onChange={this.onChange1}
></Checkbox>
</span>
</div>
) : (
''
)}
<div style={{ marginBottom: 20 }}>
<Btn
get="4"
isSumbitLoading={isSumbitLoading || false}
btnOne={this.handleCancelOk}
btnTwo={this.postUser}
/>
</div>
</div>
</MyModal>
</>
);
}
}
one_stop_public/AffairButton/AuditButton/userTable/styles.less
浏览文件 @ 687a07d8
/* 通过模态框状态 */
.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;
}
.is_ok {
min-height: 336px;
box-sizing: border-box;
padding: 60px 81px 0px 59px;
overflow: hidden;
.header {
margin-bottom: 23px;
span {
font-size: 14px;
line-height: 24px;
}
.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;
}
span:nth-child(1) {
color: #666666;
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;
span:nth-child(2) {
font-weight: bold;
}
.btn_no{
color: #FF5350;
border:1px solid #FF5350;
}
.body {
display: flex;
margin-bottom: 60px;
span {
font-size: 14px;
line-height: 24px;
color: #666666;
}
.btn_reject{
color: #FF9B00;
border:1px solid #FF9B00;
span:nth-child(1) {
text-align: right;
margin-right: 24px;
}
}
\ No newline at end of file
}
}
.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;
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论