From 0f79daefced8980fa571dd3d2c781a0e3646614f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 24 十一月 2020 16:57:19 +0800
Subject: [PATCH] 2020-11-24
---
src/templates/zshare/editTable/index.jsx | 88 ++++++++++++++++++++++++++++++++++++++++---
1 files changed, 81 insertions(+), 7 deletions(-)
diff --git a/src/templates/zshare/editTable/index.jsx b/src/templates/zshare/editTable/index.jsx
index 7597a13..bfeffd6 100644
--- a/src/templates/zshare/editTable/index.jsx
+++ b/src/templates/zshare/editTable/index.jsx
@@ -1,9 +1,10 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader } from 'antd'
+import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader, notification } from 'antd'
import ColorSketch from '@/mob/colorsketch'
+import CusSwitch from './cusSwitch'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'
@@ -13,15 +14,25 @@
class EditableCell extends Component {
getInput = (form) => {
- const { inputType, options } = this.props
+ const { inputType, options, min, max, unlimit } = this.props
- if (inputType === 'number') {
- return <InputNumber min={12} max={50} precision={0} onPressEnter={() => this.getValue(form)} />
+ if (inputType === 'number' && unlimit) {
+ return <InputNumber onPressEnter={() => this.getValue(form)} />
+ } else if (inputType === 'number') {
+ return <InputNumber min={min} max={max} precision={0} onPressEnter={() => this.getValue(form)} />
} else if (inputType === 'color') {
return <ColorSketch />
+ } else if (inputType === 'switch') {
+ return <CusSwitch />
} else if (inputType === 'select') {
return (
<Select>
+ {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))}
+ </Select>
+ )
+ } else if (inputType === 'multiStr') {
+ return (
+ <Select mode="multiple">
{options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))}
</Select>
)
@@ -65,7 +76,7 @@
message: ['number', 'text', 'input'].includes(inputType) ? `${eTDict['form.required.input']} ${title}!` : `${eTDict['form.required.select']} ${title}!`,
}
],
- initialValue: record[dataIndex],
+ initialValue: inputType === 'multiStr' ? (record[dataIndex] ? record[dataIndex].split(',') : []) : record[dataIndex],
})(this.getInput(form))}
</Form.Item>
) : (
@@ -117,7 +128,7 @@
<span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{eTDict['model.cancel']}</span>
</span>
) : (
- <div className={'operation-btn' + (editingKey !== '' ? ' disabled' : '')}>
+ <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')}>
{!actions || actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> : null}
{!actions || actions.includes('up') ? <span className="primary" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'up')}}><Icon type="arrow-up" /></span> : null}
{!actions || actions.includes('down') ? <span className="danger" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'down')}}><Icon type="arrow-down" /></span> : null}
@@ -136,6 +147,7 @@
this.setState({
data: data || [],
+ oricolumns: fromJS(this.props.columns).toJS(),
columns
})
}
@@ -143,6 +155,19 @@
UNSAFE_componentWillReceiveProps (nextProps) {
if (!is(fromJS(this.state.data), fromJS(nextProps.data))) {
this.setState({data: nextProps.data, editingKey: ''})
+ } else if (!is(fromJS(this.state.oricolumns), fromJS(nextProps.columns))) {
+ let cols = {}
+ nextProps.columns.forEach(col => {cols[col.dataIndex] = col})
+
+ this.setState({
+ oricolumns: fromJS(nextProps.columns).toJS(),
+ columns: this.state.columns.map(col => {
+ if (cols[col.dataIndex]) {
+ return cols[col.dataIndex]
+ }
+ return col
+ })
+ })
}
}
@@ -153,10 +178,36 @@
}
onSave = (record) => {
+ const { columns } = this.state
const newData = [...this.state.data]
const index = newData.findIndex(item => record.uuid === item.uuid)
- if (index === -1) return
+ if (index === -1) {
+ notification.warning({
+ top: 92,
+ message: '鏁版嵁閿欒锛屾棤娉曟壘鍒拌ID锛�',
+ duration: 5
+ })
+ return
+ }
+
+ let unique = true
+ columns.forEach(col => {
+ if (col.unique !== true || !unique) return
+
+ let _index = newData.findIndex(item => record.uuid !== item.uuid && record[col.dataIndex] === item[col.dataIndex])
+
+ if (_index > -1) {
+ notification.warning({
+ top: 92,
+ message: col.title + '涓嶅彲閲嶅锛�',
+ duration: 5
+ })
+ unique = false
+ }
+ })
+
+ if (!unique) return
newData.splice(index, 1, record)
this.setState({ data: newData, editingKey: '' }, () => {
@@ -197,12 +248,32 @@
}
save(form, uuid) {
+ const { columns } = this.state
form.validateFields((error, row) => {
if (error) {
return;
}
const newData = [...this.state.data]
const index = newData.findIndex(item => uuid === item.uuid)
+
+ let unique = true
+ columns.forEach(col => {
+ if (col.unique !== true || !unique) return
+
+ let _index = newData.findIndex(item => uuid !== item.uuid && row[col.dataIndex] === item[col.dataIndex])
+
+ if (_index > -1) {
+ notification.warning({
+ top: 92,
+ message: col.title + '涓嶅彲閲嶅锛�',
+ duration: 5
+ })
+ unique = false
+ }
+ })
+
+ if (!unique) return
+
if (index > -1) {
const item = newData[index]
newData.splice(index, 1, {
@@ -241,6 +312,9 @@
inputType: col.inputType,
dataIndex: col.dataIndex,
options: col.options || [],
+ min: col.min || 0,
+ max: col.max || 500,
+ unlimit: col.unlimit,
required: col.required !== false ? true : false,
title: col.title,
editing: this.isEditing(record),
--
Gitblit v1.8.0