From 57da72c823fab94a3ec6fadab2bc75173c8a03b1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 01 十二月 2020 13:45:25 +0800
Subject: [PATCH] 2020-12-01
---
src/menu/components/table/normal-table/columns/index.jsx | 94 +++++++++++++++++++++++++++++++++++++---------
1 files changed, 75 insertions(+), 19 deletions(-)
diff --git a/src/menu/components/table/normal-table/columns/index.jsx b/src/menu/components/table/normal-table/columns/index.jsx
index 9ca8013..8a5d67c 100644
--- a/src/menu/components/table/normal-table/columns/index.jsx
+++ b/src/menu/components/table/normal-table/columns/index.jsx
@@ -2,21 +2,56 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
-import { Table, Form } from 'antd'
+import { Table, Form, Popover, Icon } from 'antd'
+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 './index.scss'
+const coldict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
+const EditColumn = asyncIconComponent(() => import('./editColumn'))
+
class HeaderCol extends Component {
+ updateCol = (values) => {
+ const { column } = this.props
+ this.props.updateCol({...column, ...values})
+ }
+
+ deleteCol = () => {
+ this.props.deleteCol(this.props.column)
+ }
+
render() {
- const { connectDragSource, connectDropTarget, moveCol, index, ...restProps } = this.props
+ const { connectDragSource, connectDropTarget, moveCol, updateCol, deleteCol, index, column, fields, children, ...restProps } = this.props
if (index !== undefined) {
return connectDragSource(
- connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move' }}/>),
+ connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move' }}>
+ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+ <div className="mk-popover-control">
+ <EditColumn column={column} dict={coldict} fields={fields} updateCol={this.updateCol} deleteCol={this.deleteCol}/>
+ <Icon className="close" title="delete" type="delete" onClick={this.deleteCol} />
+ </div>
+ } trigger="hover">
+ {children}
+ </Popover>
+ </th>),
)
} else {
- return (<th {...restProps} index={index}/>)
+ return (
+ <th {...restProps}>
+ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+ <div className="mk-popover-control">
+ <EditColumn column={column} dict={coldict} fields={fields} updateCol={this.updateCol} deleteCol={this.deleteCol}/>
+ <Icon className="close" title="delete" type="delete" onClick={this.deleteCol} />
+ </div>
+ } trigger="hover">
+ {children}
+ </Popover>
+ </th>
+ )
}
}
}
@@ -81,20 +116,24 @@
state = {
data: [{uuid: Utils.getuuid()}],
- columns: []
+ columns: [],
+ fields: []
}
UNSAFE_componentWillMount () {
this.setState({
- columns: fromJS(this.props.config.cols).toJS()
+ columns: fromJS(this.props.config.cols).toJS(),
+ fields: fromJS(this.props.config.columns).toJS()
})
}
- // UNSAFE_componentWillReceiveProps (nextProps) {
- // if (!is(fromJS(this.state.data), fromJS(nextProps.data))) {
- // this.setState({data: nextProps.data})
- // }
- // }
+ UNSAFE_componentWillReceiveProps (nextProps) {
+ if (!is(fromJS(this.state.columns), fromJS(nextProps.config.cols))) {
+ this.setState({columns: fromJS(nextProps.config.cols).toJS()})
+ } else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) {
+ this.setState({fields: fromJS(nextProps.config.columns).toJS()})
+ }
+ }
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.state), fromJS(nextState))
}
@@ -111,8 +150,17 @@
})
}
+ updateCol = (col) => {
+
+ }
+
+ deleteCol = (col) => {
+
+ }
+
render() {
- let components = {
+ const { fields } = this.state
+ const components = {
header: {
cell: DragableHeaderCol
},
@@ -123,28 +171,36 @@
const columns = this.state.columns.map((col, index) => {
return {
- ...col,
title: col.label,
dataIndex: col.field,
align: 'right',
sorter: col.IsSort === 'true',
onCell: () => ({
- column: col
+ column: col,
+ fields: fields
}),
children: col.subcols && col.subcols.length > 0 ? col.subcols.map(cell => ({
align: 'left',
title: cell.label,
key: cell.uuid,
- width: 120,
onCell: () => ({
- column: cell
+ column: cell,
+ fields: fields
}),
+ onHeaderCell: () => ({
+ column: cell,
+ fields: fields,
+ updateCol: this.updateCol,
+ deleteCol: this.deleteCol,
+ })
})) : null,
- onHeaderCell: column => ({
+ onHeaderCell: () => ({
index,
- key: column.uuid,
- title: column.label,
+ column: col,
+ fields: fields,
moveCol: this.moveCol,
+ updateCol: this.updateCol,
+ deleteCol: this.deleteCol,
})
}
})
--
Gitblit v1.8.0