| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Tooltip, Modal, notification, Switch, message } from 'antd' |
| | | import { QuestionCircleOutlined, CopyOutlined } from '@ant-design/icons' |
| | | 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 { getColumnForm } from '@/templates/zshare/formconfig' |
| | | import { getColumnForm } from './formconfig' |
| | | |
| | | import ColumnForm from './columnform' |
| | | import ColspanForm from './colspanform' |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | columnlist: null, // 显示列 |
| | | showField: true, // 显示列字段 |
| | | modaltype: '', // 模态框控制 |
| | |
| | | */ |
| | | deleteElement = (card) => { |
| | | const { config } = this.props |
| | | const { dict } = this.state |
| | | let _this = this |
| | | let that = this |
| | | |
| | | confirm({ |
| | | content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} ?`, |
| | | content: `确定删除 - ${card.label} ?`, |
| | | onOk() { |
| | | let _columnlist = fromJS(_this.state.columnlist).toJS() |
| | | let _columnlist = fromJS(that.state.columnlist).toJS() |
| | | |
| | | _columnlist = _columnlist.filter(item => item.uuid !== card.uuid) |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | _this.setState({ |
| | | that.setState({ |
| | | columnlist: _columnlist |
| | | }, ()=> { |
| | | _this.props.updatecolumn({...config, columns: _columnlist}) |
| | | that.props.updatecolumn({...config, columns: _columnlist}) |
| | | }) |
| | | }, |
| | | onCancel() {} |
| | |
| | | let val = { |
| | | copyType: 'columns', |
| | | columns: columnlist |
| | | } |
| | | |
| | | let srcid = localStorage.getItem(window.GLOB.sysSign + 'srcId') |
| | | if (srcid) { |
| | | val.$srcId = srcid |
| | | } |
| | | |
| | | oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val))) |
| | |
| | | }) |
| | | } |
| | | |
| | | revert = () => { |
| | | this.setState({ |
| | | columnlist: fromJS(this.props.config.columns).toJS() |
| | | }) |
| | | } |
| | | // 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('revert', this.revert) |
| | | MKEmitter.addListener('plusColumns', this.plusColumns) |
| | | } |
| | | |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('revert', this.revert) |
| | | // MKEmitter.removeListener('revert', this.revert) |
| | | MKEmitter.removeListener('plusColumns', this.plusColumns) |
| | | } |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { modaltype, columnlist, dict, card } = this.state |
| | | const { modaltype, columnlist, card } = this.state |
| | | |
| | | return ( |
| | | <div className="model-table-column-list"> |
| | | <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.column.guide']}> |
| | | <QuestionCircleOutlined style={{color: '#c49f47', position: 'relative', left: '-15px', top: '5px'}} /> |
| | | </Tooltip> |
| | | {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} /> |
| | | {columnlist && columnlist.length > 0 ? <CopyOutlined className="column-copy" title="copy" onClick={this.copycolumn} /> : null} |
| | | <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={this.onFieldChange} /> |
| | | <DragElement |
| | | list={columnlist} |
| | | setting={config.setting} |
| | |
| | | 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} |
| | | destroyOnClose |
| | | > |
| | | <ColumnForm |
| | | dict={dict} |
| | | card={card} |
| | | MenuID={this.props.menu.MenuID} |
| | | inputSubmit={this.handleSubmit} |
| | |
| | | </Modal> |
| | | {/* 合并列编辑 */} |
| | | <Modal |
| | | title={dict['model.form.colspan'] + '-' + dict['model.edit']} |
| | | title="合并列-编辑" |
| | | visible={modaltype === 'colspan'} |
| | | width={800} |
| | | width={850} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | onCancel={this.editModalCancel} |
| | | destroyOnClose |
| | | > |
| | | <ColspanForm |
| | | dict={dict} |
| | | card={card} |
| | | inputSubmit={this.handleSubmit} |
| | | columns={columnlist} |
| | |
| | | </Modal> |
| | | {/* 操作列编辑 */} |
| | | <Modal |
| | | title={dict['header.modal.gridbtn.edit']} |
| | | title="操作列-编辑" |
| | | visible={modaltype === 'gridbtn'} |
| | | width={800} |
| | | width={850} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | onCancel={this.editModalCancel} |
| | | destroyOnClose |
| | | > |
| | | <GridBtnForm |
| | | dict={dict} |
| | | inputSubmit={this.handleSubmit} |
| | | card={config.gridBtn} |
| | | wrappedComponentRef={(inst) => this.gridBtnFormRef = inst} |
| | |
| | | visible={modaltype === 'mark'} |
| | | width={'75vw'} |
| | | maskClosable={false} |
| | | okText={dict['model.submit']} |
| | | okText="提交" |
| | | onOk={this.markSubmit} |
| | | onCancel={() => { this.setState({ modaltype: '' }) }} |
| | | destroyOnClose |
| | |
| | | <MarkColumn |
| | | ref="markRef" |
| | | card={card} |
| | | dict={dict} |
| | | columns={columnlist} |
| | | /> |
| | | </Modal> |