Skip to content

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

上传代码

上级 6b27371b
显示空白字符变更
内嵌 并排
正在显示 包含 131 行增加 和 88 行删除
one_stop_public/AffairButton/AuditButton/userTable/index.jsx
浏览文件 @ 687a07d8
...@@ -4,169 +4,213 @@ ...@@ -4,169 +4,213 @@
* 三次封装用户通过,驳回,拒绝状态 * 三次封装用户通过,驳回,拒绝状态
* @param { jsx } addition 附件按钮 由外部添加 * @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 Btn from '../pagesBtn';
import MyModal from '../Modal'; import MyModal from '../Modal';
import styles from './styles.less'; import styles from './styles.less';
import { Input,Row,Col,Modal } from 'antd';
const { TextArea } = Input; const { TextArea } = Input;
export default class userButton extends Component { export default class userButton extends Component {
constructor(){ constructor() {
super() super();
this.state = { this.state = {
// 路由位置 // 路由位置
visibleOk: false, // 通过模态框状态 visibleOk: false, // 通过模态框状态
value:'', // 文本域输入 value: '', // 文本域输入
user: '', // 用于保存用户点击了对应按钮 user: '', // 用于保存用户点击了对应按钮
returnText: '', returnText: '',
key: '',// 后端返回按钮规格 key: '', // 后端返回按钮规格
btnValue: '',// 后端返回按钮状态 btnValue: '', // 后端返回按钮状态
} checked: '', // 是否使用签名
};
} }
/** /**
* 通过按钮点击事件 * 通过按钮点击事件
*/ */
showModal = (str,key,value) => { showModal = (str, key, value) => {
switch (str) { switch (str) {
case '通过': case '通过':
this.setState({ this.setState({
returnText: '已通过该申请！' returnText: '已通过该申请！',
}) });
break break;
case '驳回': case '驳回':
this.setState({ this.setState({
returnText: '已驳回该申请！' returnText: '已驳回该申请！',
}) });
break break;
case '不通过': case '不通过':
this.setState({ this.setState({
returnText: '该申请未通过！' returnText: '该申请未通过！',
}) });
break break;
case '提交': case '提交':
this.setState({ this.setState({
returnText: '该申请已提交！' returnText: '该申请已提交！',
}) });
} }
this.setState({ this.setState({
user: str, user: str,
visibleOk: true, visibleOk: true,
key, key,
btnValue:value btnValue: value,
}) });
} };
/** /**
* 审核状态,返回对应样式html * 审核状态,返回对应样式html
*/ */
getUser = () => { getUser = () => {
let { user } = this.state const { user } = this.state;
switch (user) { switch (user) {
case '通过': case '通过':
return (<span style={{color:'#31C93F'}}>{user}</span>) return <span style={{ color: '#31C93F' }}>{user}</span>;
case '驳回': case '驳回':
return (<span style={{color:'#FF9B00'}}>{user}</span>) return <span style={{ color: '#FF9B00' }}>{user}</span>;
case '拒绝': case '拒绝':
return (<span style={{color:'#FF5350'}}>{user}</span>) return <span style={{ color: '#FF5350' }}>{user}</span>;
case '不通过': case '不通过':
return (<span style={{color:'#FF5350'}}>{user}</span>) return <span style={{ color: '#FF5350' }}>{user}</span>;
default: default:
return (<span >{user}</span>) return <span>{user}</span>;
}
} }
};
/** /**
* 通过按钮模态框取消状态 * 通过按钮模态框取消状态
*/ */
handleCancelOk = () => { handleCancelOk = () => {
this.setState({ this.setState({
visibleOk : false visibleOk: false,
}) });
} };
/** /**
* 根据不同值,返回对应样式 * 根据不同值,返回对应样式
*/ */
getStyle = (key,value) => { getStyle = (key, value) => {
if(key === "examine"){ if (key === 'examine') {
switch (value) { switch (value) {
case 1: case 1:
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_reject}`].join(' ') return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
case 2: case 2:
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_no}`].join(' ') return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
case 0: case 0:
return 'deafalut' return 'deafalut';
case '1': case '1':
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_reject}`].join(' ') return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
case '2': case '2':
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_no}`].join(' ') return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
case '0': case '0':
return 'deafalut' return 'deafalut';
} }
} else { } else {
return 'deafalut' return 'deafalut';
}
} }
};
/** /**
* 用于确认用户输入 * 用于确认用户输入
*/ */
postUser = () => { postUser = () => {
let { key,btnValue,value } = this.state const { key, btnValue, value, checked } = this.state;
this.props.affairOk(key,btnValue,value) this.props.affairOk(key, btnValue, value, checked);
} };
/** /**
* 文本域同步 * 文本域同步
*/ */
onChange = ({ target: { value } }) => { onChange = ({ target: { value } }) => {
this.setState({ value }); this.setState({ value });
}; };
/**
* 判断是否使用自己的签名
*/
onChange1 = e => {
this.setState({ checked: e.target.checked });
};
render() { render() {
let { btnList,visibleOk,value,user,returnText } = this.state const { btnList, visibleOk, value, user, returnText } = this.state;
let { const {
affairOk, affairOk,
btns, btns,
isSecond, isSecond,
isSumbitLoading, isSumbitLoading,
addition, // 附件按钮 只负责显示 addition, // 附件按钮 只负责显示
} = this.props Sign, // 判断是否有签名
} = this.props;
return ( return (
<> <>
<div className={styles.btn_page}> <div className={styles.btn_page}>
{ {btns.length > 0
btns.length>0?( ? btns.map((item, index) => {
btns.map((item,index) => { const className = this.getStyle(item.key, item.value);
let className = this.getStyle(item.key,item.value) return (
return <Btn get='8' key={index} btnOne={()=>{this.showModal(item.name,item.key,item.value)}} text={item.name} style={className} /> <Btn
get="8"
key={index}
btnOne={() => {
this.showModal(item.name, item.key, item.value);
}}
text={item.name}
style={className}
/>
);
}) })
):'' : ''}
} {addition && !isSumbitLoading && addition}
{
addition&&!isSumbitLoading&&addition
}
</div> </div>
{/* <Btn get='2' btnOne={()=>{this.showModal('不同意')}} btnTwo={()=>{this.showModal('驳回')}} btnThree={()=>{this.showModal('通过')}}/> */} {/* <Btn get='2' btnOne={()=>{this.showModal('不同意')}} btnTwo={()=>{this.showModal('驳回')}} btnThree={()=>{this.showModal('通过')}}/> */}
<MyModal <MyModal
visible={ visibleOk } visible={visibleOk}
title = {isSecond?'重新发起':'通过审批'} title={isSecond ? '重新发起' : '通过审批'}
width = {600} width={600}
handleCancel = { this.handleCancelOk } handleCancel={this.handleCancelOk}
> >
<div className={styles.is_ok}> <div className={styles.is_ok}>
<p className={styles.header}><span>{isSecond?'当前状态':'审批结果'}</span>{this.getUser()}</p> <p className={styles.header}>
<span>{isSecond ? '当前状态' : '审批结果'}</span>
{this.getUser()}
</p>
<div className={styles.body}> <div className={styles.body}>
<span>{isSecond?'发起说明':'审批说明'}</span> <span>{isSecond ? '发起说明' : '审批说明'}</span>
<span> <span>
<TextArea <TextArea
value={value} value={value}
onChange={this.onChange} onChange={this.onChange}
placeholder="请输入审批理由" placeholder="请输入审批理由"
style={{width:380,height:120,color:'#7F8B95'}} style={{ width: 380, height: 120, color: '#7F8B95' }}
/> />
</span> </span>
</div> </div>
<div> {Sign ? (
<Btn get='4' isSumbitLoading={isSumbitLoading?isSumbitLoading:false} btnOne={this.handleCancelOk} btnTwo={ this.postUser }/> <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>
</div> </div>
</MyModal> </MyModal>
</> </>
) );
} }
} }
one_stop_public/AffairButton/AuditButton/userTable/styles.less
浏览文件 @ 687a07d8
/* 通过模态框状态 */ /* 通过模态框状态 */
.is_ok{ .is_ok {
height: 336px; min-height: 336px;
box-sizing: border-box; box-sizing: border-box;
padding: 60px 81px 0px 59px; padding: 60px 81px 0px 59px;
overflow: hidden; overflow: hidden;
.header{ .header {
margin-bottom: 23px; margin-bottom: 23px;
span{ span {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
span:nth-child(1){ span:nth-child(1) {
color: #666666; color: #666666;
text-align: right; text-align: right;
margin-right: 24px; margin-right: 24px;
} }
span:nth-child(2){ span:nth-child(2) {
font-weight: bold; font-weight: bold;
} }
} }
.body{ .body {
display: flex; display: flex;
margin-bottom: 60px; margin-bottom: 60px;
span{ span {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
color: #666666; color: #666666;
} }
span:nth-child(1){ span:nth-child(1) {
text-align: right; text-align: right;
margin-right: 24px; margin-right: 24px;
} }
} }
} }
.btn_page{ .btn_page {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
.btn{ .btn {
min-width: 90px; min-width: 90px;
min-height: 32px; min-height: 32px;
border-radius: 2px; border-radius: 2px;
} }
.btn_margin{ .btn_margin {
margin-left: 16px; margin-left: 16px;
} }
.btn_no{ .btn_no {
color: #FF5350; color: #ff5350;
border:1px solid #FF5350; border: 1px solid #ff5350;
} }
.btn_reject{ .btn_reject {
color: #FF9B00; color: #ff9b00;
border:1px solid #FF9B00; border: 1px solid #ff9b00;
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论