From bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 22 十二月 2021 14:36:03 +0800
Subject: [PATCH] 2021-12-22
---
src/templates/zshare/modalform/modaleditable/index.jsx | 185 +++++++++++++++++++++++----------------------
1 files changed, 95 insertions(+), 90 deletions(-)
diff --git a/src/templates/zshare/modalform/modaleditable/index.jsx b/src/templates/zshare/modalform/modaleditable/index.jsx
index b74b4de..2713db5 100644
--- a/src/templates/zshare/modalform/modaleditable/index.jsx
+++ b/src/templates/zshare/modalform/modaleditable/index.jsx
@@ -1,6 +1,9 @@
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 { Table, Input, Popconfirm, Form, Radio } from 'antd'
+import { ArrowUpOutlined, ArrowDownOutlined, DeleteOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons'
+
import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import './index.scss'
@@ -107,42 +110,52 @@
}
class EditTable extends Component {
- constructor(props) {
- super(props)
+ static propTpyes = {
+ type: PropTypes.string, // 琛ㄥ崟绫诲瀷
+ linkSubFields: PropTypes.array, // 鍏宠仈瀛楁
+ onChange: PropTypes.func // 鏁版嵁鍙樺寲
+ }
- let _width = '40%'
+ state = {
+ columns: [],
+ dataSource: [],
+ count: 0,
+ type: null,
+ linkSubFields: []
+ }
+
+ UNSAFE_componentWillMount () {
+ const { linkSubFields, type } = this.props
+ let data = this.props['data-__meta'].initialValue
+
+ if (!data) {
+ data = []
+ }
+
let fields = []
- let dataItem = props.data ? props.data[0] : ''
+ let dataItem = data[0] || ''
- if (props.type === 'link') {
- _width = '27%'
- } else if (props.type === 'select') {
- _width = Math.floor(80 / (props.linkSubFields.length + 2)) + '%'
- fields = props.linkSubFields.map(field => {
+ if (type === 'select' || type === 'radio' || type === 'link') {
+ fields = linkSubFields.map(cell => {
return {
- title: field.label,
- dataIndex: field.field,
- width: _width,
+ title: cell.label,
+ dataIndex: cell.field,
editable: true,
- datatype: dataItem && typeof(dataItem[field.field]) === 'number' ? 'number' : 'string'
+ datatype: dataItem && typeof(dataItem[cell.field]) === 'number' ? 'number' : 'string'
}
})
}
-
-
let columns = [
{
title: 'Value',
dataIndex: 'Value',
- width: _width,
editable: true,
datatype: dataItem && typeof(dataItem.Value) === 'number' ? 'number' : 'string'
},
{
title: 'Text',
dataIndex: 'Text',
- width: _width,
editable: true,
datatype: dataItem && typeof(dataItem.Text) === 'number' ? 'number' : 'string'
},
@@ -150,47 +163,45 @@
{
title: '鎿嶄綔',
align: 'center',
+ width: '20%',
dataIndex: 'operation',
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" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span>
+ <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span>
<Popconfirm
- title={props.dict['header.form.query.delete']}
- okText={props.dict['model.confirm']}
- cancelText={props.dict['model.cancel']}
+ overlayClassName="popover-confirm"
onConfirm={() => this.handleDelete(record.key)
}>
- <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
+ <span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></span>
</Popconfirm>
</div>
) : null,
}
]
- if (props.type === 'link') {
+ if (type === 'link') {
columns.unshift({
title: 'ParentID',
dataIndex: 'ParentID',
- width: '27%',
editable: true,
datatype: dataItem && typeof(dataItem.ParentID) === 'number' ? 'number' : 'string'
})
}
- 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 => ({
@@ -198,43 +209,44 @@
<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>
),
filterIcon: () => (
- <Icon type="swap" style={{ color: column.datatype === 'number' ? '#1890ff' : undefined}} />
+ <SwapOutlined style={{ color: column.datatype === 'number' ? '#1890ff' : ''}} />
)
})
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 (e) {
+ 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
@@ -246,6 +258,8 @@
return col
})
+ }, () => {
+ this.props.onChange(_data)
})
}
@@ -272,15 +286,22 @@
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 = () => {
+ handleAdd = (e) => {
+ e.stopPropagation()
const { type, count, dataSource } = this.state
const newData = {
key: Utils.getuuid(),
@@ -290,9 +311,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)
})
}
@@ -304,16 +330,17 @@
...item,
...row
})
- this.setState({ dataSource: newData })
+ this.setState({ dataSource: newData }, () => {
+ this.props.onChange(newData)
+ })
}
resetColumn = (type, linkSubFields) => {
let dataSource = JSON.parse(JSON.stringify(this.state.dataSource))
- let _width = '40%'
let fields = []
- if (type === 'select' && linkSubFields.length > this.state.linkSubFields) {
- let addcol = linkSubFields[linkSubFields.length - 1]
+ if ((type === 'select' || type === 'radio') && linkSubFields.length > this.state.linkSubFields) {
+ let addcol = linkSubFields.slice(-1)[0]
dataSource = dataSource.map(data => {
data[addcol.field] = data.Text
return data
@@ -322,15 +349,11 @@
let dataItem = dataSource ? dataSource[0] : ''
- if (type === 'link') {
- _width = '27%'
- } else if (type === 'select') {
- _width = Math.floor(80 / (linkSubFields.length + 2)) + '%'
+ if (type === 'select' || type === 'radio' || type === 'link') {
fields = linkSubFields.map(field => {
return {
title: field.label,
dataIndex: field.field,
- width: _width,
editable: true,
datatype: dataItem && typeof(dataItem[field.field]) === 'number' ? 'number' : 'string'
}
@@ -341,14 +364,12 @@
{
title: 'Value',
dataIndex: 'Value',
- width: _width,
editable: true,
datatype: dataItem && typeof(dataItem.Value) === 'number' ? 'number' : 'string'
},
{
title: 'Text',
dataIndex: 'Text',
- width: _width,
editable: true,
datatype: dataItem && typeof(dataItem.Text) === 'number' ? 'number' : 'string'
},
@@ -356,19 +377,18 @@
{
title: '鎿嶄綔',
align: 'center',
+ width: '20%',
dataIndex: 'operation',
render: (text, record) =>
this.state.dataSource.length >= 1 ? (
<div>
- <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
- <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
+ <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span>
+ <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span>
<Popconfirm
- title={this.props.dict['header.form.query.delete']}
- okText={this.props.dict['model.confirm']}
- cancelText={this.props.dict['model.cancel']}
+ overlayClassName="popover-confirm"
onConfirm={() => this.handleDelete(record.key)
}>
- <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
+ <span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></span>
</Popconfirm>
</div>
) : null,
@@ -379,7 +399,6 @@
columns.unshift({
title: 'ParentID',
dataIndex: 'ParentID',
- width: '27%',
editable: true,
datatype: dataItem && typeof(dataItem.ParentID) === 'number' ? 'number' : 'string'
})
@@ -394,28 +413,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
- })
}
}
@@ -445,7 +450,7 @@
})
return (
<div className="common-modal-edit-table">
- <Icon className="add-row" type="plus" onClick={this.handleAdd} />
+ <PlusOutlined className="add-row" onClick={this.handleAdd} />
<Table
components={components}
rowClassName={() => 'editable-row'}
--
Gitblit v1.8.0