/** * 钟是志 * 2019年11月4日 17:39:34 * 流程引擎 TableSelect */ import { Divider, Modal, Popconfirm } from 'antd'; import React, { Component, Fragment } from 'react'; import ButtonDiy from '@/baseComponent/ButtonDiy'; import StandardTable from '@/components/StandardTable'; import { Link } from 'react-router-dom'; import { handleSqlData } from '../publicApiService'; import { date, format } from '../../config'; import moment from 'moment'; import { deepCopy } from '@/baseComponent/utils'; export default class TableSelect extends Component { constructor(props) { super(props); this.state = { showModal: false, formValues: {}, selectedRows: [], showDetail: true, list: [], pagination: { current: 1, total: 1, pageSize: 10, showQuickJumper: true, onChange: (current, size) => { this.pageChange(current, size); }, }, }; } handleSelectRows = rows => { this.setState({ selectedRows: rows, }); }; /*formStateChange = (value, key) => { let oldValue = this.state.formValues; oldValue[key] = value; this.setState({ formValues: oldValue, }); };*/ showModal = () => { this.setState( { showModal: true, }, () => { this.getPeopleInfo(); }); }; pageChange = (current, size) => { this.setState({ pagination: { ...this.state.pagination, current: current, pageSize: size, }, }, () => { // this.getPeopleInfo(); }); }; componentDidMount() { // this.getPeopleInfo(); } getPeopleInfo = () => { const { config, value } = this.props; const { componentProps: { sqlKey, allValues, valueName } } = config; const { pagination, formValues } = this.state; const data = { ...formValues, sqlKey, allValues, }; data.pageSize = pagination.pageSize; data.pageNo = pagination.current; handleSqlData(data).then((response) => { if (response.total) { // 后续增加分页. } else { pagination.total = response.length; } for (let item of response) { item[valueName] = item[valueName] + ''; } this.setState({ list: response, pagination, }); }); }; stateChange = (key, value) => { this.setState({ [key]: value, }); }; onChange = (value) => { const { config } = this.props; this.setState({ showDetail: false, },()=>{ this.props.onChange(value, config.key); setTimeout(()=>{ this.setState({ showDetail: true, }) }, 50); }); }; cancelSelect = (record) => { const { config } = this.props; let value = deepCopy(this.props.value); const { labelName, valueName } = config.componentProps; if (value && typeof value === 'object' && value.selects) { delete value.selects[record[valueName]]; } this.onChange(value); }; handleSelect = (record) => { const { config } = this.props; let value = deepCopy(this.props.value); const { labelName, valueName, isMultiple } = config.componentProps; if (typeof value === 'object') { if (value.selects && isMultiple === true) { value.selects[record[valueName]] = { ...record, }; } else { value.selects = { [record[valueName]]: { ...record, }, }; } } else { value = { selects: { [record[valueName]]: { ...record, }, }, }; } this.onChange(value); }; handleColumns = () => { const { config, value } = this.props; const { showDetail } = this.state; const { valueName } = config.componentProps; const info = value && typeof value === 'object' && value.selects ? value.selects : {}; let keys = Object.keys(info); const { componentProps: { columnsData } } = config; const { cols } = columnsData; let columns = []; for (let item in cols) { columns.push( { dataIndex: cols[item].name, title: cols[item].title, dataType: cols[item].type, }, ); } for (let item of columns) { if (item.dataType && date.indexOf(item.dataType) > -1) { item.render = (text, record) => { if (!text) { return ''; } if (!isNaN(parseInt(text, 10)) && parseInt(text, 10) > 10000000) { text = parseInt(text, 10); } return moment(text).format(format[item.dataType]); }; } } if (columns.length && showDetail) { columns.push( { title: '操作', // fixed: 'right', dataIndex: 'operation', render: (text, record) => { if (keys.indexOf(record[valueName]) > -1) { return (<a style={{color: 'red'}} onClick={() => { this.cancelSelect(record); }}> 取消选择 </a>); } return (<a onClick={() => { this.handleSelect(record); }}>选择</a>); }, }, ); } return columns; }; render() { const { config, disabled } = this.props; const { labelName, valueName } = config.componentProps; const { showModal, list, pagination, selectedRows } = this.state; const value = deepCopy(this.props.value); const columns = this.handleColumns(); const info = value && typeof value === 'object' && value.selects ? value.selects : {}; const re = []; for (let item in info) { const one = info[item]; re.push( { name: one[labelName], value: one[valueName], }, ); } return ( <Fragment> {!showModal ? <Fragment> <span> {re.length ? re.map((x) => { return <span key={x.value}>{x.name} </span>; }) : ''} </span> {disabled ? null : <ButtonDiy name={'选择'} className={'defaultBlue'} handleClick={this.showModal}/>} </Fragment> : <Modal title={'选择'} visible={true} width={1200} maskClosable={false} footer={null} onCancel={() => { this.stateChange('showModal', false); }}> <div style={{ overflowY: 'auto', maxHeight: '600px' }}> <StandardTable rowKey={valueName} selectedRows={selectedRows} data={{ list, pagination }} columns={columns} onSelectRow={this.handleSelectRows} noSelectRow={true} /> </div> </Modal> } </Fragment> ); } }