import React, { PureComponent } from 'react'; import { Tabs, Select, Input, Button, Modal, Alert } from 'antd'; import style from 'styled-components'; import PTable from '../../components/Pro/PTable'; import { taskSalaryTempCopyComSalaryTemp, //澶嶅埗浼佷笟钖叕妯℃澘 taskSalaryTempDelComSalaryTemp //鍒犻櫎浼佷笟钖叕妯℃澘 } from '../../services/api'; const { TabPane } = Tabs; // const dateFormat = 'YYYY-MM-DD'; const { Option } = Select; const { confirm } = Modal; export default class Template extends PureComponent { constructor(props, context) { super(props, context); this.state = { name: '', effectStatus: '', forceUpdate: false, pageParm: { pageSize: '10', pageNumber: '1', name: '', effectStatus: '' } }; } componentDidMount = () => { // this.taskComSalaryPageForPersalary(); // this.taskSalaryTempPageComSalaryTemp(); }; /*********************Ajax璇锋眰********************* */ //澶嶅埗浼佷笟钖叕妯℃澘 taskSalaryTempCopyComSalaryTemp = comSalaryTempId => { taskSalaryTempCopyComSalaryTemp({ comSalaryTempId }).then( res => { console.log(res, 'res'); this.resetting(); }, err => { console.log('err', err); } ); }; //鍒犻櫎浼佷笟钖叕妯℃澘 taskSalaryTempDelComSalaryTemp = comSalaryTempId => { taskSalaryTempDelComSalaryTemp({ comSalaryTempId }).then( res => { console.log(res, 'res'); this.resetting(); }, err => { console.log('err', err); } ); }; //浜哄憳鏈堝害宸ヨ祫鍒嗛〉鏌ヨ // taskComSalaryPageForPersalary = () => { // taskComSalaryPageForPersalary({}).then( // res => { // console.log(res, 'res'); // }, // err => { // console.log('err', err); // } // ); // }; //浼佷笟钖叕妯℃澘鍒楄〃鍒嗛〉鏌ヨ // taskSalaryTempPageComSalaryTemp = () => { // taskSalaryTempPageComSalaryTemp({}).then( // res => { // console.log(res, 'res'); // }, // err => { // console.log('err', err); // } // ); // }; //澶嶅埗浼佷笟钖叕妯℃澘 copyTemplate = comSalaryTempId => { this.taskSalaryTempCopyComSalaryTemp(comSalaryTempId); }; //鍒犻櫎浼佷笟钖叕妯℃澘 deleteTemplate = (comSalaryTempId, perNum) => { if (perNum > 0) { const self = this; confirm({ title: '璇ユā鏉挎湁鍏宠仈浜哄憳锛岀‘璁よ鍒犻櫎锛�', content: ( <span style={{ color: 'red' }}>宸茬敓鎴愮殑鏍哥畻鏁版嵁锛屼笉浼氳鍒犻櫎銆�</span> ), okText: '纭', cancelText: '鍙栨秷', onOk() { console.log('OK'); self.taskSalaryTempDelComSalaryTemp(comSalaryTempId); }, onCancel() { console.log('Cancel'); } }); } else { this.taskSalaryTempDelComSalaryTemp(comSalaryTempId); } }; //杈撳叆妗嗙殑涔﹀啓 inputKeywordChange = e => { console.log(e.target.value.trim()); this.setState({ name: e.target.value.trim() }); }; handleChangeEffectStatus = value => { console.log(`selected ${value}`); this.setState({ effectStatus: value }); }; //鐐瑰嚮鎼滅储 search = () => { const pageParm = { ...this.state.pageParm }; pageParm.name = this.state.name; pageParm.effectStatus = this.state.effectStatus; this.setState({ pageParm }); }; //閲嶇疆 resetting = () => { this.setState( { name: '', //杈撳叆妗嗙殑鍊� effectStatus: '', forceUpdate: true }, () => { this.search(); } ); }; //琛ㄦ牸娓叉煋 renderTable = () => { const columns = [ { title: '妯℃澘鍚嶇О', dataIndex: 'name', key: 'name' }, { title: '寮€濮嬫湀浠�', dataIndex: 'startYears', key: 'startYears' }, { title: '缁撴潫鏈堜唤', dataIndex: 'endYears', key: 'endYears' }, { title: '鐢熸晥鐘舵€�', dataIndex: 'effectStatus', key: 'effectStatus', render: (text, record) => ( <span> {record.effectStatus === '鏈紑濮�' && ( <span style={{ color: '#ccc' }}>{record.effectStatus}</span> )} {record.effectStatus === '浣跨敤涓�' && ( <span style={{ color: '#080' }}>{record.effectStatus}</span> )} {record.effectStatus === '宸茶繃鏈�' && ( <span style={{ color: '#f00' }}>{record.effectStatus}</span> )} </span> ) }, { title: '浣跨敤浜哄憳', dataIndex: 'perNum', key: 'perNum', render: (text, record) => <span> {record.perNum}浜�</span> }, { title: '鎿嶄綔', dataIndex: 'operate', key: 'operate', render: (text, record) => ( <div> <Opton onClick={() => { this.props.history.push( `/salarymanagement/template/add/${record.comSalaryTempId}/1` ); }} > 缂栬緫 </Opton> <Opton onClick={this.copyTemplate.bind(this, record.comSalaryTempId)} > 澶嶅埗 </Opton> <Opton onClick={this.deleteTemplate.bind( this, record.comSalaryTempId, record.perNum )} > 鍒犻櫎 </Opton> </div> ) } ]; return ( <PTable style={{ marginTop: 20 }} columns={columns} url='taskSalaryTempPageComSalaryTemp' pageParm={this.state.pageParm} forceUpdate={this.state.forceUpdate} showTotal={total => `鍏辨悳绱犲埌${total}鏉¤褰昤} /> ); }; render() { return ( <Container> <Tabs> <TabPane tab='钖叕妯℃澘绠$悊' key='1' /> </Tabs> <Alert message={ <div style={{ color: '#f90' }}> <div> 1銆佽柂閰ā鏉匡細闇€瑕佷负浜哄憳璁剧疆钖叕妯℃澘骞惰缃浉搴旂殑瑙勫垯鍚庯紝鎵嶅彲鏍规嵁瀵瑰簲鐨勮€冨嫟鏁版嵁璁$畻鐢熸垚钖叕鏁版嵁锛岀浉鍚屾湀浠借寖鍥村唴锛屼竴涓汉浠呴檺褰掑睘涓€涓柂閰ā鏉匡紱 </div> <div> 2銆佸鍒讹細绯荤粺鑷姩澶嶅埗宸叉湁钖叕妯℃澘璁剧疆鐨勮鍒欎俊鎭紝澶嶅埗鍚庤璋冩暣钖叕妯℃澘鍚嶇О鍙婅缃浉搴斾娇鐢ㄤ汉鍛橈紱 </div> <div> 3銆佸垹闄わ細妯℃澘鍒犻櫎鍚庯紝涓嶄細褰卞搷宸茬敓鎴愮殑钖叕鏍哥畻鏁版嵁锛屼絾璇峰敖蹇负鐩稿叧浜哄憳璁剧疆鏂版ā鏉匡紝浠ラ槻鏃犳硶鐢熸垚鏂扮殑鏍哥畻鏁版嵁銆� </div> </div> } type='warning' showIcon style={{ marginBottom: '15px' }} /> <div className='searchpanel'> <span>妯℃澘鍚嶇О锛�</span> <Input style={{ marginBottom: '10px', width: '214px' }} onChange={this.inputKeywordChange} value={this.state.name} placeholder='璇疯緭鍏ユā鏉垮悕绉�' maxLength={50} /> <span className='post'>鐢熸晥鐘舵€�:</span> <Select value={this.state.effectStatus} style={{ width: '214px', marginRight: '17px' }} onChange={this.handleChangeEffectStatus} placeholder='璇烽€夋嫨鐢熸晥鐘舵€�' > <Option value=''>鍏ㄩ儴</Option> <Option value='0'>鏈紑濮�</Option> <Option value='1'>浣跨敤涓�</Option> <Option value='2'>宸茶繃鏈�</Option> </Select> <Button style={{ marginRight: '17px', marginBottom: '16px' }} type='primary' onClick={this.search} > 鎼滅储 </Button> <Button style={{ marginBottom: '16px' }} onClick={this.resetting}> 閲嶇疆 </Button> <div className='btns'> <Button type='primary' onClick={() => { this.props.history.push(`/salarymanagement/template/add/00/1`); }} > 鏂板妯℃澘 </Button> </div> </div> {this.renderTable()} </Container> ); } } const Container = style.div` padding:10px 24px 24px; width:100%; height:100%; font-size: 14px; color: rgba(0,0,0,0.65); .searchpanel{ margin-bottom:16px; .post{ margin:0 8px 0 16px; } } `; const Opton = style.span`{ font-size: 12px; color: #0F71FF; cursor:pointer; margin-right:8px; }`;