copy from src/tabviews/custom/components/form/normal-form/index.jsx
copy to src/tabviews/custom/components/form/simple-form/index.jsx
File was copied from src/tabviews/custom/components/form/normal-form/index.jsx |
| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { connect } from 'react-redux' |
| | | import { Spin, notification, Button } from 'antd' |
| | | import { Spin, notification } from 'antd' |
| | | |
| | | import Api from '@/api' |
| | | import UtilsDM from '@/utils/utils-datamanage.js' |
| | |
| | | |
| | | const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform')) |
| | | const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton')) |
| | | const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) |
| | | |
| | | class NormalForm extends Component { |
| | | class SimpleForm extends Component { |
| | | static propTpyes = { |
| | | BID: PropTypes.any, // 父级Id |
| | | data: PropTypes.array, // 统一查询数据 |
| | |
| | | _data = {$$empty: true} |
| | | } |
| | | |
| | | if (!config.wrap.groupLabel) { |
| | | if (config.subcards.length > 1) { |
| | | config.wrap.groupLabel = 'show' |
| | | } else { |
| | | config.wrap.groupLabel = 'hidden' |
| | | } |
| | | } |
| | | |
| | | config.subcards = config.subcards.map((group, i) => { |
| | | group.sort = i + 1 |
| | | if (i === 0) { |
| | | group.prevButton.enable = 'false' |
| | | } |
| | | if (i + 1 === config.subcards.length) { |
| | | group.nextButton.enable = 'false' |
| | | } |
| | | |
| | | if (group.subButton.enable === 'false') { |
| | | group.subButton.style.display = 'none' |
| | | } |
| | | |
| | | if (group.prevButton.enable === 'false' && group.subButton.enable === 'false' && group.nextButton.enable === 'false') { |
| | | group.$button = 'no-button' |
| | | } |
| | | |
| | | return group |
| | | }) |
| | | |
| | | let _group = config.subcards[0] |
| | | |
| | | if (_data && config.wrap.statusControl && _data[config.wrap.statusControl]) { |
| | | let _status = _data[config.wrap.statusControl] |
| | | |
| | | let _groups = config.subcards.filter(item => item.setting.status === _status)[0] |
| | | _group = _groups || _group |
| | | if (_group.subButton.enable === 'false') { |
| | | _group.subButton.style.display = 'none' |
| | | _group.$button = 'no-button' |
| | | } |
| | | |
| | | this.setState({ |
| | | sync: _sync, |
| | | data: _data, |
| | | group: _group, |
| | | step: _group.sort - 1, |
| | | BID: BID || '', |
| | | BData: BData || '', |
| | | config: config, |
| | | arr_field: config.columns.map(col => col.field).join(','), |
| | | }, () => { |
| | | if (config.wrap.datatype !== 'static' && config.setting && config.setting.sync !== 'true' && config.setting.onload === 'true') { |
| | | if (config.wrap.datatype !== 'static' && config.setting.sync !== 'true' && config.setting.onload === 'true') { |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, config.setting.delay || 0) |
| | |
| | | * @description 图表数据更新,刷新内容 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { sync, config, group } = this.state |
| | | const { sync, config } = this.state |
| | | |
| | | if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) { |
| | | let _data = {$$empty: true} |
| | | let _group = group |
| | | if (nextProps.data && nextProps.data[config.dataName]) { |
| | | _data = nextProps.data[config.dataName] |
| | | if (Array.isArray(_data)) { |
| | |
| | | } |
| | | } |
| | | |
| | | if (config.wrap.statusControl && _data[config.wrap.statusControl]) { |
| | | let _status = _data[config.wrap.statusControl] |
| | | let _groups = config.subcards.filter(item => item.setting.status === _status)[0] |
| | | _group = _groups || _group |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data, group: _group, step: _group.sort - 1,}) |
| | | this.setState({sync: false, data: _data}) |
| | | } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | |
| | | } |
| | | |
| | | execSuccess = (btn, id) => { |
| | | const { config, group } = this.state |
| | | |
| | | if (config.subcards.length > group.sort) { |
| | | let _group = config.subcards.filter(item => item.sort === (group.sort + 1))[0] |
| | | |
| | | this.setState({group: null, step: group.sort}, () => { |
| | | this.setState({group: _group}) |
| | | }) |
| | | } else { |
| | | this.setState({step: group.sort}) |
| | | } |
| | | |
| | | if (btn.linkmenu && btn.linkmenu.length > 0) { |
| | | let menu_id = btn.linkmenu[btn.linkmenu.length - 1] |
| | | let menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || '' |
| | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | | let _data = result.data && result.data[0] ? result.data[0] : {$$empty: true} |
| | | let _group = this.state.group |
| | | |
| | | if (type === 'refresh') { |
| | | _group = config.subcards[0] |
| | | } |
| | | |
| | | if (config.wrap.statusControl && _data[config.wrap.statusControl]) { |
| | | let _status = _data[config.wrap.statusControl] |
| | | let _groups = config.subcards.filter(item => item.setting.status === _status)[0] |
| | | _group = _groups || _group |
| | | } |
| | | |
| | | let step = this.state.step |
| | | |
| | | if (config.subcards.length !== _group.sort || config.subcards.length !== step) { |
| | | step = _group.sort - 1 |
| | | } |
| | | |
| | | this.setState({ |
| | | group: null, |
| | | step: step, |
| | | data: _data, |
| | | data: null, |
| | | loading: false |
| | | }, () => { |
| | | this.setState({group: _group}) |
| | | this.setState({data: _data}) |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | |
| | | }) |
| | | } |
| | | |
| | | prevStep = () => { |
| | | const { config, group } = this.state |
| | | |
| | | let _group = config.subcards.filter(item => item.sort === (group.sort - 1))[0] |
| | | |
| | | this.setState({group: null, step: group.sort - 2}, () => { |
| | | this.setState({group: _group}) |
| | | }) |
| | | } |
| | | |
| | | nextStep = () => { |
| | | const { config, group } = this.state |
| | | |
| | | let _group = config.subcards.filter(item => item.sort === (group.sort + 1))[0] |
| | | |
| | | this.setState({group: null, step: group.sort}, () => { |
| | | this.setState({group: _group}) |
| | | }) |
| | | } |
| | | |
| | | render() { |
| | | const { config, loading, BID, BData, data, group, dict, step } = this.state |
| | | const { config, loading, BID, BData, data, group, dict } = this.state |
| | | |
| | | return ( |
| | | <div className="custom-normal-form-box" id={'anchor' + config.uuid} style={{...config.style}}> |
| | | <div className="custom-simple-form-box" id={'anchor' + config.uuid} style={{...config.style}}> |
| | | {loading ? |
| | | <div className="loading-mask"> |
| | | <div className="ant-spin-blur"></div> |
| | | <Spin /> |
| | | </div> : null |
| | | } |
| | | {config.wrap.groupLabel !== 'hidden' ? <div className="mk-normal-form-title"> |
| | | {config.subcards.map(card => ( |
| | | <div key={card.uuid} className={'form-title' + (card.sort <= step ? ' active' : '')}> |
| | | <span className="form-sort" style={{background: config.wrap.color}}>{card.sort}</span> |
| | | <span className="before-line" style={{background: config.wrap.color}}></span> |
| | | <span className="after-line" style={{background: config.wrap.color}}></span> |
| | | {card.setting.title} |
| | | </div>)) |
| | | } |
| | | </div> : null} |
| | | {group && data ? <MutilForm |
| | | <NormalHeader config={config} /> |
| | | {data ? <MutilForm |
| | | BID={BID} |
| | | BData={BData} |
| | | dict={dict} |
| | |
| | | inputSubmit={() => this.mkFormSubmit(group.uuid)} |
| | | wrappedComponentRef={(inst) => this.formRef = inst} |
| | | /> : null} |
| | | {group && data ? <div className={'mk-form-action ' + (group.$button || '')}> |
| | | {group.prevButton.enable === 'true' ? <Button type="link" className="prev" onClick={this.prevStep} style={group.prevButton.style}>{group.prevButton.label}</Button> : null} |
| | | {data ? <div className={'mk-form-action ' + (group.$button || '')}> |
| | | <NormalButton |
| | | BID={BID} |
| | | btn={group.subButton} |
| | |
| | | columns={config.columns} |
| | | selectedData={data.$$empty ? [] : [data]} |
| | | /> |
| | | {group.nextButton.enable === 'true' ? <Button type="link" className="skip" onClick={this.nextStep} style={group.nextButton.style}>{group.nextButton.label}</Button> : null} |
| | | </div> : null} |
| | | </div> |
| | | ) |
| | |
| | | return {} |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(NormalForm) |
| | | export default connect(mapStateToProps, mapDispatchToProps)(SimpleForm) |