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