From da64ab0923bf8817fc8599a6e37b953ce38f64c8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 27 八月 2023 18:37:36 +0800
Subject: [PATCH] 2023-08-27
---
src/templates/zshare/modalform/modaleditable/index.jsx | 319 +++++++++++++++++++++-------------------------------
1 files changed, 128 insertions(+), 191 deletions(-)
diff --git a/src/templates/zshare/modalform/modaleditable/index.jsx b/src/templates/zshare/modalform/modaleditable/index.jsx
index 2713db5..b8ca161 100644
--- a/src/templates/zshare/modalform/modaleditable/index.jsx
+++ b/src/templates/zshare/modalform/modaleditable/index.jsx
@@ -1,10 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Table, Input, Popconfirm, Form, Radio } from 'antd'
+import { Table, Input, Popconfirm, Form, 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'
@@ -35,13 +34,8 @@
}
save = e => {
- const { record, handleSave, datatype } = this.props
+ const { record, handleSave } = this.props
this.form.validateFields((error, values) => {
- if (datatype === 'number') {
- Object.keys(values).forEach(key => {
- values[key] = parseFloat(values[key])
- })
- }
handleSave({ ...record, ...values })
if (error && error[e.currentTarget.id]) {
return
@@ -52,26 +46,17 @@
renderCell = form => {
this.form = form
- const { children, dataIndex, record, datatype } = this.props
+ const { children, dataIndex, record } = this.props
const { editing } = this.state
- let rules = []
- if (datatype === 'number') {
- rules.push({
- pattern: /^(-?\d+)(\.\d+)?$/,
- message: formRule.input.numbermsg
- })
- }
-
return editing ? (
- <Form.Item style={{ margin: 0 }}>
+ <Form.Item style={{ margin: '0 -5px 0 -5px' }}>
{form.getFieldDecorator(dataIndex, {
rules: [
{
- required: dataIndex === 'Value' || dataIndex === 'Text',
- message: 'NOT NULL.',
- },
- ...rules
+ required: dataIndex === 'Text',
+ message: '涓嶅彲涓虹┖.',
+ }
],
initialValue: record[dataIndex]
})(<Input ref={node => (this.input = node)} autoComplete="off" onPressEnter={this.save} onBlur={this.save} />)}
@@ -112,154 +97,28 @@
class EditTable extends Component {
static propTpyes = {
type: PropTypes.string, // 琛ㄥ崟绫诲瀷
+ module: 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 } = this.props
- let data = this.props['data-__meta'].initialValue
+ 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" 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
- overlayClassName="popover-confirm"
- onConfirm={() => this.handleDelete(record.key)
- }>
- <span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></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
- })
- }
-
- getColumnSearchProps = column => ({
- filterDropdown: () => (
- <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">
- 瀛楃涓�
- </Radio>
- <Radio style={{display: 'block', height: '30px', lineHeight: '30px'}} value="number">
- 鏁板瓧
- </Radio>
- </Radio.Group>
- </div>
- ),
- filterIcon: () => (
- <SwapOutlined style={{ color: column.datatype === 'number' ? '#1890ff' : ''}} />
- )
- })
-
- changeDatatype = (column, e) => {
- const { columns, dataSource } = this.state
- let value = e.target.value
- let _data = dataSource.map(item => {
- let val = item[column.dataIndex]
- if (value === 'number') {
- try {
- val = parseFloat(val)
- if (isNaN(val)) {
- val = ''
- }
- } catch (e) {
- val = ''
- }
- } else {
- val = '' + val
- }
-
- item[column.dataIndex] = val
-
- return item
- })
-
- this.setState({
- dataSource: _data,
- columns: columns.map(col => {
- if (col.dataIndex === column.dataIndex) {
- col.datatype = value
- }
-
- if (col.dataIndex !== 'operation') {
- col = {...col, ...this.getColumnSearchProps(col)}
- }
-
- return col
- })
- }, () => {
- this.props.onChange(_data)
+ count: data.length
})
}
@@ -291,6 +150,20 @@
})
}
+ handleHide = (record) => {
+ let _data = this.state.dataSource.map(item => {
+ if (item.key === record.key) {
+ item.Hide = !item.Hide
+ }
+ return item
+ })
+ this.setState({
+ dataSource: _data
+ }, () => {
+ this.props.onChange(_data)
+ })
+ }
+
handleDelete = key => {
const { dataSource } = this.state
let _data = dataSource.filter(item => item.key !== key)
@@ -302,15 +175,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 +199,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,27 +223,28 @@
})
}
- 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 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] : ''
-
- 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,
+ $title: transfield[field] || field,
+ dataIndex: field,
editable: true,
- datatype: dataItem && typeof(dataItem[field.field]) === 'number' ? 'number' : 'string'
}
})
}
@@ -363,15 +252,15 @@
let columns = [
{
title: 'Value',
+ $title: 'Value',
dataIndex: 'Value',
- editable: true,
- datatype: dataItem && typeof(dataItem.Value) === 'number' ? 'number' : 'string'
+ editable: true
},
{
title: 'Text',
+ $title: 'Text',
dataIndex: 'Text',
- editable: true,
- datatype: dataItem && typeof(dataItem.Text) === 'number' ? 'number' : 'string'
+ editable: true
},
...fields,
{
@@ -381,10 +270,12 @@
dataIndex: 'operation',
render: (text, record) =>
this.state.dataSource.length >= 1 ? (
- <div>
+ <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>
+ <span className="operation-btn" title="鏄剧ず/闅愯棌" onClick={() => this.handleHide(record)} style={{color: 'rgb(142, 68, 173)'}}><SwapOutlined /></span>
<Popconfirm
+ title="纭畾鍒犻櫎鍚楋紵"
overlayClassName="popover-confirm"
onConfirm={() => this.handleDelete(record.key)
}>
@@ -398,24 +289,69 @@
if (type === 'link') {
columns.unshift({
title: 'ParentID',
+ $title: 'ParentID',
dataIndex: 'ParentID',
- editable: true,
- datatype: dataItem && typeof(dataItem.ParentID) === 'number' ? 'number' : 'string'
+ editable: true
})
}
- this.setState({
+ return {
columns: columns.map(col => {
if (col.dataIndex !== 'operation') {
- col = {...col, ...this.getColumnSearchProps(col)}
+ col.title = <div>
+ {col.$title}
+ </div>
}
return col
}),
- dataSource: dataSource,
- type: type
- }, () => {
- this.props.onChange(dataSource)
+ dataSource: _dataSource
+ }
+ }
+
+ handleEmpty = (e) => {
+ e.stopPropagation()
+ const { linkSubFields, module } = this.props
+ const { dataSource } = this.state
+
+ if (dataSource.filter(item => item.Value === '').length > 0) {
+ message.warning('Value涓虹┖宸插瓨鍦紒')
+ return
+ }
+ const newData = {
+ key: Utils.getuuid(),
+ Value: '',
+ Text: module === 'form' ? '绌�' : '鍏ㄩ儴',
+ ParentID: ''
+ }
+
+ linkSubFields.forEach(m => {
+ newData[m] = newData[m] || ''
})
+
+ let _data = [newData, ...dataSource]
+
+ this.setState({
+ dataSource: _data,
+ }, () => {
+ this.props.onChange(_data)
+ })
+ }
+
+ 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) {
@@ -425,6 +361,7 @@
}
render() {
+ const { module } = this.props
const { dataSource } = this.state
const components = {
body: {
@@ -443,17 +380,17 @@
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
- datatype: col.datatype,
- handleSave: this.handleSave,
+ handleSave: this.handleSave
})
}
})
return (
<div className="common-modal-edit-table">
+ <span className="add-row add-row-empty" onClick={this.handleEmpty}>{module === 'form' ? '绌�' : '鍏ㄩ儴'}</span>
<PlusOutlined className="add-row" onClick={this.handleAdd} />
<Table
components={components}
- rowClassName={() => 'editable-row'}
+ rowClassName={(record) => record.Hide ? 'editable-row hide' : 'editable-row'}
bordered
dataSource={dataSource}
columns={columns}
--
Gitblit v1.8.0