| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Tooltip, Modal, notification, Switch, message } from 'antd' |
| | | import { Modal, notification, Switch, message } from 'antd' |
| | | import { CopyOutlined } from '@ant-design/icons' |
| | | |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | |
| | | import GridBtnForm from './gridbtnform' |
| | | import DragElement from './dragcolumn' |
| | | import MarkColumn from './markcolumn' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | const { confirm } = Modal |
| | |
| | | this.setState({ |
| | | columnlist: fromJS(this.props.config.columns).toJS() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 监听到显示列复制时,触发显示列编辑 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { config } = this.props |
| | | const { columnlist } = this.state |
| | | |
| | | if (!is(fromJS(nextProps.config.columns), fromJS(config.columns)) && !is(fromJS(nextProps.config.columns), fromJS(columnlist))) { |
| | | this.setState({columnlist: fromJS(nextProps.config.columns).toJS()}) |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | columns: columnlist |
| | | } |
| | | |
| | | let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId') |
| | | if (srcid) { |
| | | val.$srcId = srcid |
| | | } |
| | | |
| | | oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val))) |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | |
| | | }) |
| | | } |
| | | |
| | | plusColumns = (MenuId, items) => { |
| | | const { config } = this.props |
| | | const { columnlist } = this.state |
| | | |
| | | if (MenuId !== config.uuid) return |
| | | |
| | | let list = [...columnlist, ...items] |
| | | |
| | | if (list[0] && list[0].origin) { |
| | | list = list.filter(col => !col.origin) |
| | | } |
| | | |
| | | this.setState({ |
| | | columnlist: list |
| | | }, () => { |
| | | this.props.updatecolumn({...config, columns: list}) |
| | | }) |
| | | } |
| | | |
| | | revert = () => { |
| | | this.setState({ |
| | | columnlist: fromJS(this.props.config.columns).toJS() |
| | | }) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('revert', this.revert) |
| | | MKEmitter.addListener('plusColumns', this.plusColumns) |
| | | } |
| | | |
| | | /** |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('revert', this.revert) |
| | | MKEmitter.removeListener('plusColumns', this.plusColumns) |
| | | } |
| | | |
| | | render() { |
| | |
| | | |
| | | return ( |
| | | <div className="model-table-column-list"> |
| | | <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.column.guide']}> |
| | | <Icon type="question-circle" /> |
| | | </Tooltip> |
| | | {columnlist && columnlist.length > 0 ? |
| | | <Icon className="column-copy" title="copy" type="copy" onClick={this.copycolumn} /> : null |
| | | } |
| | | {columnlist && columnlist.length > 0 ? <CopyOutlined className="column-copy" title="copy" onClick={this.copycolumn} /> : null} |
| | | <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={this.onFieldChange} /> |
| | | <DragElement |
| | | list={columnlist} |
| | |
| | | markMenu={this.markElement} |
| | | handleGridBtn={this.handleGridBtn} |
| | | showfield={this.state.showField} |
| | | placeholder={this.state.dict['header.form.column.placeholder']} |
| | | /> |
| | | {/* 显示列编辑 */} |
| | | <Modal |
| | | title={dict['header.modal.column.edit']} |
| | | title="显示列-编辑" |
| | | visible={modaltype === 'columns'} |
| | | width={800} |
| | | width={850} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | onCancel={this.editModalCancel} |
| | |
| | | <Modal |
| | | title={dict['model.form.colspan'] + '-' + dict['model.edit']} |
| | | visible={modaltype === 'colspan'} |
| | | width={800} |
| | | width={850} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | onCancel={this.editModalCancel} |
| | |
| | | </Modal> |
| | | {/* 操作列编辑 */} |
| | | <Modal |
| | | title={dict['header.modal.gridbtn.edit']} |
| | | title="操作列-编辑" |
| | | visible={modaltype === 'gridbtn'} |
| | | width={800} |
| | | width={850} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | onCancel={this.editModalCancel} |