From 46f79b491173d284a4900d19e7aecf7509481438 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 21 一月 2022 17:21:25 +0800
Subject: [PATCH] 2022-01-21
---
src/templates/zshare/modalform/modaleditable/index.jsx | 204 +++++++++++++++++++++-----------------------------
1 files changed, 85 insertions(+), 119 deletions(-)
diff --git a/src/templates/zshare/modalform/modaleditable/index.jsx b/src/templates/zshare/modalform/modaleditable/index.jsx
index 7944d0c..8670071 100644
--- a/src/templates/zshare/modalform/modaleditable/index.jsx
+++ b/src/templates/zshare/modalform/modaleditable/index.jsx
@@ -1,7 +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, message } 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'
@@ -38,6 +40,9 @@
if (datatype === 'number') {
Object.keys(values).forEach(key => {
values[key] = parseFloat(values[key])
+ if (isNaN(values[key])) {
+ values[key] = 0
+ }
})
}
handleSave({ ...record, ...values })
@@ -66,8 +71,8 @@
{form.getFieldDecorator(dataIndex, {
rules: [
{
- required: dataIndex === 'Value' || dataIndex === 'Text',
- message: 'NOT NULL.',
+ required: dataIndex === 'Text',
+ message: '涓嶅彲涓虹┖.',
},
...rules
],
@@ -109,98 +114,28 @@
class EditTable extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
type: PropTypes.string, // 琛ㄥ崟绫诲瀷
linkSubFields: PropTypes.array, // 鍏宠仈瀛楁
+ transfield: PropTypes.object, // 琛ㄥ崟瀛楁鍚嶇О
onChange: PropTypes.func // 鏁版嵁鍙樺寲
}
state = {
columns: [],
dataSource: [],
- count: 0,
- type: null,
- linkSubFields: []
+ count: 0
}
UNSAFE_componentWillMount () {
- const { linkSubFields, type, dict } = this.props
- let data = this.props['data-__meta'].initialValue
+ const { linkSubFields, type } = this.props
+ let data = this.props['data-__meta'].initialValue || []
- if (!data) {
- data = []
- }
-
- let fields = []
- let dataItem = data[0] || ''
-
- if (type === 'select' || type === 'radio' || type === 'link') {
- fields = linkSubFields.map(cell => {
- return {
- title: cell.label,
- dataIndex: cell.field,
- editable: true,
- datatype: dataItem && typeof(dataItem[cell.field]) === 'number' ? 'number' : 'string'
- }
- })
- }
-
- let columns = [
- {
- title: 'Value',
- dataIndex: 'Value',
- editable: true,
- datatype: dataItem && typeof(dataItem.Value) === 'number' ? 'number' : 'string'
- },
- {
- title: 'Text',
- dataIndex: 'Text',
- editable: true,
- datatype: dataItem && typeof(dataItem.Text) === 'number' ? 'number' : 'string'
- },
- ...fields,
- {
- title: '鎿嶄綔',
- align: 'center',
- width: '20%',
- dataIndex: 'operation',
- render: (text, record) =>
- this.state.dataSource.length >= 1 ? (
- <div>
- <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={dict['model.query.delete']}
- onConfirm={() => this.handleDelete(record.key)
- }>
- <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span>
- </Popconfirm>
- </div>
- ) : null,
- }
- ]
-
- if (type === 'link') {
- columns.unshift({
- title: 'ParentID',
- dataIndex: 'ParentID',
- editable: true,
- datatype: dataItem && typeof(dataItem.ParentID) === 'number' ? 'number' : 'string'
- })
- }
+ const { columns } = this.getColumns(type, linkSubFields, data)
this.setState({
- columns: columns.map(col => {
- if (col.dataIndex !== 'operation') {
- col = {...col, ...this.getColumnSearchProps(col)}
- }
- return col
- }),
+ columns: columns,
dataSource: data,
- count: data.length,
- type: type,
- linkSubFields: linkSubFields
+ count: data.length
})
}
@@ -218,7 +153,7 @@
</div>
),
filterIcon: () => (
- <Icon type="swap" style={{ color: column.datatype === 'number' ? '#1890ff' : undefined}} />
+ <SwapOutlined style={{ color: column.datatype === 'number' ? '#1890ff' : ''}} />
)
})
@@ -228,13 +163,9 @@
let _data = dataSource.map(item => {
let val = item[column.dataIndex]
if (value === 'number') {
- try {
- val = parseFloat(val)
- if (isNaN(val)) {
- val = ''
- }
- } catch (e) {
- val = ''
+ val = parseFloat(val)
+ if (isNaN(val)) {
+ val = 0
}
} else {
val = '' + val
@@ -302,15 +233,18 @@
handleAdd = (e) => {
e.stopPropagation()
- const { type, count, dataSource } = this.state
+ const { linkSubFields } = this.props
+ const { count, dataSource } = this.state
const newData = {
key: Utils.getuuid(),
Value: `${count}`,
- Text: `${count}`
+ Text: `${count}`,
+ ParentID: ''
}
- if (type === 'link') {
- newData.ParentID = `${count}`
- }
+
+ linkSubFields.forEach(m => {
+ newData[m] = newData[m] || ''
+ })
let _data = [...dataSource, newData]
@@ -323,9 +257,21 @@
}
handleSave = row => {
+ const { type } = this.props
const newData = [...this.state.dataSource]
const index = newData.findIndex(item => row.key === item.key)
const item = newData[index]
+
+ if (type === 'link') {
+ if (newData.filter(m => row.key !== m.key && row.Value === m.Value && row.ParentID === m.ParentID).length > 0) {
+ message.warning('鐩稿悓ParentID涓嬶紝姝alue鍊煎凡瀛樺湪锛�')
+ }
+ } else {
+ if (newData.filter(m => row.key !== m.key && row.Value === m.Value).length > 0) {
+ message.warning('姝alue鍊煎凡瀛樺湪锛�')
+ }
+ }
+
newData.splice(index, 1, {
...item,
...row
@@ -335,29 +281,35 @@
})
}
- resetColumn = (type, linkSubFields) => {
- let dataSource = JSON.parse(JSON.stringify(this.state.dataSource))
- let fields = []
+ getColumns = (type, linkSubFields, dataSource) => {
+ const { transfield } = this.props
- 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
+ let _dataSource = fromJS(dataSource).toJS()
+ let fields = []
+ let dataItem = ''
+ let subFields = linkSubFields.filter(m => m !== 'Value' && m !== 'Text')
+
+ if (subFields.length > 0) {
+ _dataSource = _dataSource.map(data => {
+ subFields.forEach(n => {
+ if (data[n] !== undefined) return
+ data[n] = data.Text || ''
+ })
return data
})
- }
- let dataItem = dataSource ? dataSource[0] : ''
+ dataItem = _dataSource ? _dataSource[0] : ''
- if (type === 'select' || type === 'radio' || type === 'link') {
- fields = linkSubFields.map(field => {
+ fields = subFields.map(field => {
return {
- title: field.label,
- dataIndex: field.field,
+ title: transfield[field] || field,
+ dataIndex: field,
editable: true,
- datatype: dataItem && typeof(dataItem[field.field]) === 'number' ? 'number' : 'string'
+ datatype: dataItem && typeof(dataItem[field]) === 'number' ? 'number' : 'string'
}
})
+ } else {
+ dataItem = _dataSource ? _dataSource[0] : ''
}
let columns = [
@@ -381,15 +333,15 @@
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>
+ <div style={{fontSize: '15px'}}>
+ <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="纭畾鍒犻櫎鍚楋紵"
overlayClassName="popover-confirm"
- title={this.props.dict['model.query.delete']}
onConfirm={() => this.handleDelete(record.key)
}>
- <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span>
+ <span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></span>
</Popconfirm>
</div>
) : null,
@@ -405,18 +357,32 @@
})
}
- this.setState({
+ return {
columns: columns.map(col => {
if (col.dataIndex !== 'operation') {
col = {...col, ...this.getColumnSearchProps(col)}
}
return col
}),
- dataSource: dataSource,
- type: type
- }, () => {
- this.props.onChange(dataSource)
- })
+ dataSource: _dataSource
+ }
+ }
+
+ resetColumn = (type, linkSubFields) => {
+ const { columns, dataSource } = this.getColumns(type, linkSubFields, this.state.dataSource)
+
+ if (!is(fromJS(dataSource), fromJS(this.state.dataSource))) {
+ this.setState({
+ columns,
+ dataSource
+ }, () => {
+ this.props.onChange(dataSource)
+ })
+ } else {
+ this.setState({
+ columns
+ })
+ }
}
UNSAFE_componentWillReceiveProps (nextProps) {
@@ -451,7 +417,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