From 7449eee8fa9f8a251e9c4e9162030f1e004bae0f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 15 十月 2020 09:17:04 +0800
Subject: [PATCH] 2020-10-15
---
src/templates/zshare/modalform/modaleditable/index.jsx | 141 +++++++++++++++++++++++++++-------------------
1 files changed, 82 insertions(+), 59 deletions(-)
diff --git a/src/templates/zshare/modalform/modaleditable/index.jsx b/src/templates/zshare/modalform/modaleditable/index.jsx
index 8a790c6..f24e275 100644
--- a/src/templates/zshare/modalform/modaleditable/index.jsx
+++ b/src/templates/zshare/modalform/modaleditable/index.jsx
@@ -1,4 +1,5 @@
import React, {Component} from 'react'
+import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Table, Input, Popconfirm, Form, Icon, Radio } from 'antd'
import { formRule } from '@/utils/option.js'
@@ -107,24 +108,44 @@
}
class EditTable extends Component {
- constructor(props) {
- super(props)
+ static propTpyes = {
+ dict: PropTypes.object, // 瀛楀吀椤�
+ type: PropTypes.string, // 琛ㄥ崟绫诲瀷
+ linkSubFields: PropTypes.array, // 鍏宠仈瀛楁
+ onChange: PropTypes.func // 鏁版嵁鍙樺寲
+ }
+
+ state = {
+ columns: [],
+ dataSource: [],
+ count: 0,
+ type: null,
+ linkSubFields: []
+ }
+
+ UNSAFE_componentWillMount () {
+ const { linkSubFields, type, dict } = this.props
+ let data = this.props['data-__meta'].initialValue
+
+ if (!data) {
+ data = []
+ }
let _width = '40%'
let fields = []
- let dataItem = props.data ? props.data[0] : ''
+ let dataItem = data[0] || ''
- if (props.type === 'link') {
+ if (type === 'link') {
_width = '27%'
- } else if (props.type === 'select') {
- _width = Math.floor(80 / (props.linkSubFields.length + 2)) + '%'
- fields = props.linkSubFields.map(field => {
+ } else if (type === 'select') {
+ _width = Math.floor(80 / (linkSubFields.length + 2)) + '%'
+ fields = linkSubFields.map(cell => {
return {
- title: field.label,
- dataIndex: field.field,
+ title: cell.label,
+ dataIndex: cell.field,
width: _width,
editable: true,
- datatype: dataItem && typeof(dataItem[field.field]) === 'number' ? 'number' : 'string'
+ datatype: dataItem && typeof(dataItem[cell.field]) === 'number' ? 'number' : 'string'
}
})
}
@@ -154,21 +175,21 @@
render: (text, record) =>
this.state.dataSource.length >= 1 ? (
<div>
- <span className="operation-btn" title={props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
- <span className="operation-btn" title={props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
+ <span className="operation-btn" title={dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
+ <span className="operation-btn" title={dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
<Popconfirm
overlayClassName="popover-confirm"
- title={props.dict['model.query.delete']}
+ title={dict['model.query.delete']}
onConfirm={() => this.handleDelete(record.key)
}>
- <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
+ <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span>
</Popconfirm>
</div>
) : null,
}
]
- if (props.type === 'link') {
+ if (type === 'link') {
columns.unshift({
title: 'ParentID',
dataIndex: 'ParentID',
@@ -178,18 +199,18 @@
})
}
- this.state = {
+ this.setState({
columns: columns.map(col => {
if (col.dataIndex !== 'operation') {
col = {...col, ...this.getColumnSearchProps(col)}
}
return col
}),
- dataSource: props.data,
- count: props.data.length,
- type: props.type,
- linkSubFields: props.linkSubFields
- }
+ dataSource: data,
+ count: data.length,
+ type: type,
+ linkSubFields: linkSubFields
+ })
}
getColumnSearchProps = column => ({
@@ -197,10 +218,10 @@
<div style={{ padding: 8 }}>
<Radio.Group onChange={(e) => this.changeDatatype(column, e)} value={column.datatype}>
<Radio style={{display: 'block', height: '30px', lineHeight: '30px'}} value="string">
- String
+ 瀛楃涓�
</Radio>
<Radio style={{display: 'block', height: '30px', lineHeight: '30px'}} value="number">
- Number
+ 鏁板瓧
</Radio>
</Radio.Group>
</div>
@@ -213,27 +234,28 @@
changeDatatype = (column, e) => {
const { columns, dataSource } = this.state
let value = e.target.value
-
- this.setState({
- dataSource: dataSource.map(item => {
- let val = item[column.dataIndex]
- if (value === 'number') {
- try {
- val = parseFloat(val)
- if (isNaN(val)) {
- val = ''
- }
- } catch {
+ let _data = dataSource.map(item => {
+ let val = item[column.dataIndex]
+ if (value === 'number') {
+ try {
+ val = parseFloat(val)
+ if (isNaN(val)) {
val = ''
}
- } else {
- val = '' + val
+ } catch {
+ val = ''
}
+ } else {
+ val = '' + val
+ }
- item[column.dataIndex] = val
+ item[column.dataIndex] = val
- return item
- }),
+ return item
+ })
+
+ this.setState({
+ dataSource: _data,
columns: columns.map(col => {
if (col.dataIndex === column.dataIndex) {
col.datatype = value
@@ -245,6 +267,8 @@
return col
})
+ }, () => {
+ this.props.onChange(_data)
})
}
@@ -271,12 +295,18 @@
this.setState({
dataSource: _data
+ }, () => {
+ this.props.onChange(_data)
})
}
handleDelete = key => {
- const dataSource = [...this.state.dataSource]
- this.setState({ dataSource: dataSource.filter(item => item.key !== key) })
+ const { dataSource } = this.state
+ let _data = dataSource.filter(item => item.key !== key)
+
+ this.setState({ dataSource: _data }, () => {
+ this.props.onChange(_data)
+ })
}
handleAdd = () => {
@@ -289,9 +319,14 @@
if (type === 'link') {
newData.ParentID = `${count}`
}
+
+ let _data = [...dataSource, newData]
+
this.setState({
- dataSource: [...dataSource, newData],
+ dataSource: _data,
count: count + 1
+ }, () => {
+ this.props.onChange(_data)
})
}
@@ -303,7 +338,9 @@
...item,
...row
})
- this.setState({ dataSource: newData })
+ this.setState({ dataSource: newData }, () => {
+ this.props.onChange(newData)
+ })
}
resetColumn = (type, linkSubFields) => {
@@ -392,28 +429,14 @@
}),
dataSource: dataSource,
type: type
+ }, () => {
+ this.props.onChange(dataSource)
})
}
UNSAFE_componentWillReceiveProps (nextProps) {
if (!is(fromJS(this.props.linkSubFields), fromJS(nextProps.linkSubFields)) || this.props.type !== nextProps.type) {
this.resetColumn(nextProps.type, nextProps.linkSubFields)
- } else if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
- let _data = []
- nextProps.data.forEach(item => {
- let _item = {key: Utils.getuuid()}
- this.state.columns.forEach(col => {
- _item[col.dataIndex] = item[col.dataIndex] || ''
- if (col.dataIndex !== 'ParentID' && !_item[col.dataIndex]) {
- _item[col.dataIndex] = item.Text
- }
- })
- _data.push(_item)
- })
- this.setState({
- dataSource: _data,
- count: nextProps.data.length
- })
}
}
--
Gitblit v1.8.0