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/editTable/index.jsx | 289 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 197 insertions(+), 92 deletions(-)
diff --git a/src/templates/zshare/editTable/index.jsx b/src/templates/zshare/editTable/index.jsx
index 0319a12..3f0e3fe 100644
--- a/src/templates/zshare/editTable/index.jsx
+++ b/src/templates/zshare/editTable/index.jsx
@@ -3,20 +3,17 @@
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Input, InputNumber, Popconfirm, Form, Select, Radio, Cascader, notification, message, Modal, Typography } from 'antd'
-import { CopyOutlined, EditOutlined, DeleteOutlined, SnippetsOutlined, SwapOutlined } from '@ant-design/icons'
+import { CopyOutlined, EditOutlined, DeleteOutlined, SwapOutlined } from '@ant-design/icons'
import Utils from '@/utils/utils.js'
import ColorSketch from '@/mob/colorsketch'
-import PasteForm from '@/templates/zshare/pasteform'
import asyncComponent from '@/utils/asyncComponent'
import CusSwitch from './cusSwitch'
-import zhCN from '@/locales/zh-CN/model.js'
-import enUS from '@/locales/en-US/model.js'
import MKEmitter from '@/utils/events.js'
import './index.scss'
const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))
-let eTDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
+const PasteBoard = asyncComponent(() => import('@/components/pasteboard'))
const EditableContext = React.createContext()
const { confirm } = Modal
let dragingIndex = -1
@@ -144,7 +141,7 @@
rules: [
{
required: required,
- message: ['number', 'text', 'input'].includes(inputType) ? `${eTDict['form.required.input']} ${title}!` : `${eTDict['form.required.select']} ${title}!`,
+ message: ['number', 'text', 'input'].includes(inputType) ? `璇疯緭鍏�${title}!` : `璇烽�夋嫨${title}!`,
},
...rules
],
@@ -166,6 +163,7 @@
class EditTable extends Component {
static propTpyes = {
actions: PropTypes.any, // 鎿嶄綔椤�
+ searchKey: PropTypes.any, // 鎼滅储鏉′欢
data: PropTypes.any, // 鏁版嵁鍒楄〃
columns: PropTypes.array, // 鏄剧ず鍒�
onChange: PropTypes.func // 鏁版嵁鍙樺寲
@@ -174,7 +172,6 @@
state = {
data: [],
editingKey: '',
- visible: false,
editLineId: '',
columns: []
}
@@ -183,6 +180,15 @@
const { data, actions } = this.props
let columns = fromJS(this.props.columns).toJS()
let operation = null
+ let extra = null
+
+ if (actions) {
+ actions.forEach(item => {
+ if (/^extra/.test(item)) {
+ extra = item.split(':')
+ }
+ })
+ }
if (actions && (actions.includes('edit') || actions.includes('copy') || actions.includes('del'))) {
let _operation = null
@@ -195,10 +201,10 @@
operation = {
title: (<div>
- {eTDict['model.operation']}
+ 鎿嶄綔
<span className="copy-control">
{actions.includes('copy') ? <CopyOutlined title="澶嶅埗" onClick={() => this.copy()} /> : null}
- {actions.includes('copy') ? <SnippetsOutlined title="绮樿创" onClick={this.paste} /> : null}
+ {actions.includes('copy') ? <PasteBoard getPasteValue={this.pasteSubmit}/> : null}
{actions.includes('clear') ? <DeleteOutlined title="娓呯┖" onClick={this.clear} /> : null}
</span>
</div>),
@@ -212,20 +218,21 @@
<EditableContext.Consumer>
{form => (
<span onClick={() => this.save(form, record.uuid)} style={{ marginRight: 8 , color: '#1890ff', cursor: 'pointer'}}>
- {eTDict['model.save']}
+ 淇濆瓨
</span>
)}
</EditableContext.Consumer>
- <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{eTDict['model.cancel']}</span>
+ <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>鍙栨秷</span>
</div>
) : (
<div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px', whiteSpace: 'nowrap'}}>
- {actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> : null}
- {actions.includes('copy') ? <span className="copy" onClick={() => {editingKey === '' && this.copy(record)}}><CopyOutlined /></span> : null}
- {actions.includes('status') ? <span className="status" onClick={() => {editingKey === '' && this.handleStatus(record)}}><SwapOutlined /></span> : null}
+ {actions.includes('edit') ? <span className="primary" title="缂栬緫" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> : null}
+ {extra ? <span className="status" title={extra[2]} onClick={() => {editingKey === '' && this.handleStatus(record, extra[1])}}><SwapOutlined /></span> : null}
+ {actions.includes('status') ? <span className="status" title="鏄惁鍚敤" onClick={() => {editingKey === '' && this.handleStatus(record, 'status')}}><SwapOutlined /></span> : null}
+ {actions.includes('copy') ? <span className="copy" title="澶嶅埗" onClick={() => {editingKey === '' && this.copy(record)}}><CopyOutlined /></span> : null}
{actions.includes('del') && editingKey === '' ? <Popconfirm
overlayClassName="popover-confirm"
- title={eTDict['model.query.delete']}
+ title="纭畾鍒犻櫎鍚�?"
onConfirm={() => this.handleDelete(record.uuid)
}>
<span className="danger"><DeleteOutlined /></span>
@@ -354,27 +361,76 @@
}
}
- paste = () => {
- this.setState({visible: true})
- }
-
- pasteSubmit = () => {
+ pasteSubmit = (res, callback) => {
const { type } = this.props
const { columns } = this.state
let data = fromJS(this.state.data).toJS()
- this.pasteFormRef.handleConfirm().then(res => {
- if (res.key !== type) {
- message.warning('閰嶇疆淇℃伅鏍煎紡閿欒锛�')
- return
- }
+ if (res.copyType === 'columns' && type === 'datasourcefield') {
+ res.type = 'array'
+ res.data = []
+ res.columns.forEach(col => {
+ if (!col.field) return
+ if (col.type === 'number') {
+ let datatype = 'Int'
+ if (col.decimal) {
+ datatype = `Decimal(18,${col.decimal})`
+ }
- if (res.type === 'line') {
- let unique = true
- res.data.uuid = Utils.getuuid()
- columns.forEach(col => {
- if (col.unique !== true || !unique) return
+ res.data.push({
+ $index: res.data.length + 1,
+ datatype: datatype,
+ field: col.field,
+ decimal: col.decimal,
+ label: col.label,
+ type: 'number',
+ uuid: Utils.getuuid()
+ })
+ } else {
+ let datatype = 'Nvarchar(50)'
+ let fieldlength = 50
+ if (col.fieldlength && [10, 20, 50, 100, 256, 512, 1024, 2048].includes(col.fieldlength)) {
+ fieldlength = col.fieldlength
+ datatype = `Nvarchar(${fieldlength})`
+ }
+ res.data.push({
+ $index: res.data.length + 1,
+ datatype: datatype,
+ field: col.field,
+ fieldlength: fieldlength,
+ label: col.label,
+ type: 'text',
+ uuid: Utils.getuuid()
+ })
+ }
+ })
+ } else if (res.key !== type) {
+ message.warning('閰嶇疆淇℃伅鏍煎紡閿欒锛�')
+ return
+ }
+
+ if (res.type === 'line') {
+ let unique = true
+ res.data.uuid = Utils.getuuid()
+ columns.forEach(col => {
+ if (col.unique !== true || !unique) return
+
+ if (col.uniqueFunc) {
+ unique = col.uniqueFunc(data, res.data)
+ } else if (col.strict) {
+ let key = res.data[col.dataIndex].toLowerCase()
+ let _index = data.findIndex(item => key === item[col.dataIndex].toLowerCase())
+
+ if (_index > -1) {
+ notification.warning({
+ top: 92,
+ message: col.title + '涓嶅彲閲嶅锛�',
+ duration: 5
+ })
+ unique = false
+ }
+ } else {
let _index = data.findIndex(item => res.data[col.dataIndex] === item[col.dataIndex])
if (_index > -1) {
@@ -385,44 +441,57 @@
})
unique = false
}
- })
+ }
+ })
- if (!unique) return
+ if (!unique) return
- data.unshift(res.data)
- this.setState({ data, editingKey: '', visible: false }, () => {
- this.props.onChange(data)
- })
- } else if (res.type === 'array') {
- res.data.forEach(cell => {
- let unique = true
- cell.uuid = Utils.getuuid()
- columns.forEach(col => {
- if (col.unique !== true || !unique) return
+ data.unshift(res.data)
+ this.setState({ data, editingKey: '', editLineId: res.data.uuid || '' }, () => {
+ this.props.onChange(data)
+ })
+ } else if (res.type === 'array') {
+ res.data.forEach(cell => {
+ let unique = true
+ cell.uuid = Utils.getuuid()
+ columns.forEach(col => {
+ if (col.unique !== true || !unique) return
+
+ if (col.uniqueFunc) {
+ unique = col.uniqueFunc(data, cell)
+ } else if (col.strict) {
+ let _index = data.findIndex(item => cell[col.dataIndex].toLowerCase() === item[col.dataIndex].toLowerCase())
+
+ if (_index > -1) {
+ unique = false
+ }
+ } else {
let _index = data.findIndex(item => cell[col.dataIndex] === item[col.dataIndex])
if (_index > -1) {
unique = false
}
- })
-
- if (!unique) return
-
- data.push(cell)
+ }
})
- this.setState({ data, editingKey: '', visible: false }, () => {
- this.props.onChange(data)
- })
- }
- message.success('绮樿创鎴愬姛銆�')
- })
+ if (!unique) return
+
+ data.push(cell)
+ })
+
+ this.setState({ data, editingKey: '' }, () => {
+ this.props.onChange(data)
+ })
+ }
+
+ callback()
+ message.success('绮樿创鎴愬姛銆�')
}
- handleStatus = (record) => {
+ handleStatus = (record, type) => {
const { data } = this.state
- record.status = record.status === 'false' ? 'true' : 'false'
+ record[type] = record[type] === 'false' ? 'true' : 'false'
let newData = data.map(item => {
if (record.uuid === item.uuid) return record
@@ -453,15 +522,32 @@
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 (col.uniqueFunc) {
+ unique = col.uniqueFunc(newData, record)
+ return
+ } else if (col.strict) {
+ let key = record[col.dataIndex].toLowerCase()
+ let _index = newData.findIndex(item => record.uuid !== item.uuid && key === item[col.dataIndex].toLowerCase())
- if (_index > -1) {
- notification.warning({
- top: 92,
- message: col.title + '涓嶅彲閲嶅锛�',
- duration: 5
- })
- unique = false
+ if (_index > -1) {
+ notification.warning({
+ top: 92,
+ message: col.title + '涓嶅彲閲嶅锛�',
+ duration: 5
+ })
+ unique = false
+ }
+ } else {
+ 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
+ }
}
})
@@ -492,31 +578,49 @@
}
const newData = [...this.state.data]
const index = newData.findIndex(item => uuid === item.uuid)
+ if (index > -1) {
+ row = {...newData[index], ...row}
+ } else {
+ row.uuid = 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 (col.uniqueFunc) {
+ unique = col.uniqueFunc(newData, row)
+ return
+ } else if (col.strict) {
+ let key = row[col.dataIndex].toLowerCase()
+ let _index = newData.findIndex(item => row.uuid !== item.uuid && key === item[col.dataIndex].toLowerCase())
+
+ if (_index > -1) {
+ notification.warning({
+ top: 92,
+ message: col.title + '涓嶅彲閲嶅锛�',
+ duration: 5
+ })
+ unique = false
+ }
+ } else {
+ let _index = newData.findIndex(item => row.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, {
- ...item,
- ...row,
- })
+ newData.splice(index, 1, row)
this.setState({ data: newData, editingKey: '' }, () => {
this.props.onChange(newData)
})
@@ -549,7 +653,7 @@
}
render() {
- const { actions, indexShow } = this.props
+ const { actions, indexShow, searchKey } = this.props
const { editLineId } = this.state
let components = {
@@ -559,7 +663,7 @@
}
let moveprops = {}
- if (actions.includes('move')) {
+ if (actions.includes('move') && !searchKey) {
components.body.row = DragableBodyRow
moveprops.moveAble = !this.state.editingKey
moveprops.moveRow = this.moveRow
@@ -605,6 +709,8 @@
return item
})
+ let reg = searchKey ? new RegExp(searchKey, 'i') : null
+
return (
<EditableContext.Provider value={this.props.form}>
<div className="modal-edit-table">
@@ -615,7 +721,18 @@
components={components}
dataSource={data}
columns={columns}
- rowClassName={record => !editLineId || editLineId !== record.uuid ? 'editable-row' : 'editable-row active'}
+ rowClassName={record => {
+ let className = 'editable-row'
+ if (editLineId && editLineId === record.uuid) {
+ className += ' active'
+ }
+ if (searchKey) {
+ if (!reg.test(record.field) && !reg.test(record.label)) {
+ className += ' hidden'
+ }
+ }
+ return className
+ }}
pagination={false}
onRow={(record, index) => ({
index,
@@ -623,18 +740,6 @@
})}
/>
</DndProvider>
- {/* 淇℃伅绮樿创 */}
- <Modal
- title={eTDict['header.form.paste']}
- visible={this.state.visible}
- width={600}
- maskClosable={false}
- onOk={this.pasteSubmit}
- onCancel={() => {this.setState({visible: false})}}
- destroyOnClose
- >
- <PasteForm dict={eTDict} wrappedComponentRef={(inst) => this.pasteFormRef = inst} inputSubmit={this.pasteSubmit}/>
- </Modal>
</div>
</EditableContext.Provider>
)
--
Gitblit v1.8.0