| | |
| | | import { is, fromJS } from 'immutable' |
| | | import { DndProvider, DragSource, DropTarget } from 'react-dnd' |
| | | import { Table, Popover, Modal, message } from 'antd' |
| | | import { PlusOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' |
| | | import { PlusOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | | import Utils from '@/utils/utils.js' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | |
| | | const EditColumn = asyncIconComponent(() => import('./editColumn')) |
| | | const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) |
| | | const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent')) |
| | | const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/components/paste')) |
| | | |
| | | class HeaderCol extends Component { |
| | |
| | | {column && column.type === 'custom' ? <PasteComponent options={['customCardElement']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} |
| | | {column && column.type === 'custom' ? <FontColorsOutlined className="style" title="调整样式" onClick={() => this.props.changeStyle(column)}/> : null} |
| | | <DeleteOutlined className="close" title="删除" onClick={this.deleteCol} /> |
| | | {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | </div> |
| | | } trigger="hover"> |
| | | {children} |
| | |
| | | <EditOutlined className="edit" title="编辑" onClick={() => this.props.editColumn(column)} /> |
| | | {column.type === 'custom' ? <PasteComponent options={['customCardElement']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null} |
| | | <DeleteOutlined className="close" title="删除" onClick={this.deleteCol} /> |
| | | {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } |
| | | </div> |
| | | } trigger="hover"> |
| | | {children} |
| | |
| | | |
| | | return !is(fromJS(column), fromJS(nextProps.column)) || |
| | | !is(fromJS(config.columns), fromJS(nextProps.config.columns)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) |
| | | } |
| | | |
| | | render() { |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | tableId: '', |
| | | data: [{uuid: Utils.getuuid()}], |
| | | refresh: false, // 强制刷新 |
| | |
| | | |
| | | return !is(fromJS(this.state), fromJS(nextState)) || |
| | | !is(fromJS(config.wrap), fromJS(nextProps.config.wrap)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | config.setting.laypage !== nextProps.config.setting.laypage |
| | | } |
| | |
| | | cell.uuid = Utils.getuuid() |
| | | cell.focus = true |
| | | |
| | | MKEmitter.emit('cardAddElement', [this.props.config.uuid, col.uuid], cell) |
| | | MKEmitter.emit('cardAddElement', col.uuid, cell) |
| | | } |
| | | |
| | | addElement = (col) => { |
| | | const { config } = this.props |
| | | let column = fromJS(col).toJS() |
| | | |
| | | if (column.type === 'colspan') { |
| | |
| | | let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } else if (column.type === 'action') { |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | |
| | | } |
| | | |
| | | // 注册事件-添加元素 |
| | | MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) |
| | | MKEmitter.emit('cardAddElement', column.uuid, newcard) |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | deleteCol = (col) => { |
| | | const { appType } = this.state |
| | | let _columns = fromJS(this.state.columns).toJS() |
| | | |
| | | _columns = this.loopDelCol(_columns, col) |
| | |
| | | this.props.updatecolumn({...this.props.config, cols: _columns}) |
| | | }) |
| | | |
| | | if (col.type !== 'action' || appType === 'mob') return |
| | | if (col.type !== 'action') return |
| | | |
| | | let uuids = [] |
| | | col.elements && col.elements.forEach(c => { |
| | | if (appType === 'pc' && c.OpenType !== 'popview') return |
| | | if (c.OpenType !== 'popview') return |
| | | |
| | | uuids.push(c.uuid) |
| | | }) |
| | |
| | | }) |
| | | } |
| | | |
| | | syncfield = () => { |
| | | const { fields } = this.state |
| | | let columns = fromJS(this.state.columns).toJS() |
| | | |
| | | columns = columns.filter(c => !c.origin) |
| | | |
| | | let keys = columns.map(col => col.field) |
| | | |
| | | fields.forEach(item => { |
| | | if (keys.includes(item.field)) return |
| | | |
| | | let cell = { uuid: Utils.getuuid(), label: item.label, field: item.field, Align: 'left', Hide: 'false', IsSort: 'true', Width: 120, blacklist: [], postfix: '', prefix: '', linkmenu: [], marks: [], perspective: 'linkmenu' } |
| | | |
| | | if (/Nvarchar|date/ig.test(item.datatype)) { |
| | | cell.type = 'text' |
| | | cell.rowspan = 'false' |
| | | cell.textFormat = 'none' |
| | | } else { |
| | | cell.type = 'number' |
| | | cell.format = 'none' |
| | | cell.sum = 'false' |
| | | cell.decimal = item.decimal || 0 |
| | | cell.Width = 80 |
| | | } |
| | | |
| | | columns.push(cell) |
| | | }) |
| | | |
| | | const _this = this |
| | | |
| | | confirm({ |
| | | content: '确定同步字段集吗?', |
| | | onOk() { |
| | | _this.setState({columns}, () => { |
| | | _this.props.updatecolumn({..._this.props.config, cols: columns}) |
| | | }) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | clear = () => { |
| | | const _this = this |
| | | |
| | | confirm({ |
| | | content: '确定清空显示列吗?', |
| | | onOk() { |
| | | _this.setState({columns: []}, () => { |
| | | _this.props.updatecolumn({..._this.props.config, cols: []}) |
| | | }) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新,清除快捷键设置 |
| | | */ |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { fields, card, lineMarks, dict, tableId, appType } = this.state |
| | | const { fields, card, lineMarks, tableId } = this.state |
| | | const components = { |
| | | header: { |
| | | cell: DragableHeaderCol |
| | |
| | | <div className="col-control"> |
| | | <CopyOutlined title="复制显示列" onClick={this.copycolumn} /> |
| | | <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} /> |
| | | <FileSyncOutlined title="同步字段集" onClick={this.syncfield} /> |
| | | <DeleteOutlined title="清空显示列" onClick={this.clear}/> |
| | | </div> |
| | | <DndProvider> |
| | | <Table |
| | |
| | | dataSource={this.state.data} |
| | | rowSelection={config.wrap.tableType ? { type: 'radio' } : null} |
| | | columns={columns} |
| | | pagination={appType !== 'mob' ? { |
| | | pagination={{ |
| | | current: 1, |
| | | pageSize: 10, |
| | | pageSizeOptions: ['10', '25', '50', '100', '500', '1000'], |
| | | showSizeChanger: true, |
| | | total: 58, |
| | | showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条` |
| | | } : false} |
| | | }} |
| | | /> |
| | | {appType === 'mob' && config.setting.laypage !== 'fasle' ? <MobPagination /> : null} |
| | | </DndProvider> |
| | | <EditColumn column={card} dict={dict} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> |
| | | <EditColumn column={card} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> |
| | | </div> |
| | | ) |
| | | } |