From f9e4be602f547ec849e2567003943a238c670e4d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 30 五月 2024 16:25:51 +0800
Subject: [PATCH] 2024-05-30
---
src/templates/zshare/editTable/index.jsx | 215 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 194 insertions(+), 21 deletions(-)
diff --git a/src/templates/zshare/editTable/index.jsx b/src/templates/zshare/editTable/index.jsx
index 159a4c8..9ce9e95 100644
--- a/src/templates/zshare/editTable/index.jsx
+++ b/src/templates/zshare/editTable/index.jsx
@@ -2,13 +2,12 @@
import PropTypes from 'prop-types'
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, SwapOutlined } from '@ant-design/icons'
+import { Table, Input, InputNumber, Popconfirm, Switch, Form, Select, Radio, Cascader, notification, message, Modal, Typography } from 'antd'
+import { CopyOutlined, EditOutlined, DeleteOutlined, SwapOutlined, PlusOutlined, ConsoleSqlOutlined } from '@ant-design/icons'
import Utils from '@/utils/utils.js'
import ColorSketch from '@/mob/colorsketch'
import asyncComponent from '@/utils/asyncComponent'
-import CusSwitch from './cusSwitch'
import MKEmitter from '@/utils/events.js'
import './index.scss'
@@ -18,6 +17,52 @@
const { confirm } = Modal
let dragingIndex = -1
const { Paragraph } = Typography
+
+class CusSwitch extends Component {
+ static propTpyes = {
+ defaultValue: PropTypes.any,
+ value: PropTypes.any,
+ onChange: PropTypes.func
+ }
+ state = {
+ status: true
+ }
+
+ UNSAFE_componentWillMount () {
+ const { defaultValue, value } = this.props
+ let initVal = 'true'
+
+ if (this.props['data-__meta']) {
+ initVal = this.props['data-__meta'].initialValue
+ } else if (defaultValue) {
+ initVal = defaultValue
+ } else if (value) {
+ initVal = value
+ }
+
+ if (initVal === 'false') {
+ initVal = false
+ } else {
+ initVal = true
+ }
+
+ this.setState({status: initVal})
+ }
+
+ changeStatus = (val) => {
+ this.setState({ status: val }, () => {
+ let _val = val ? 'true' : 'false'
+ this.props.onChange && this.props.onChange(_val)
+ })
+ }
+
+ render() {
+ const { status } = this.state
+ return (
+ <Switch checkedChildren="鏄�" unCheckedChildren="鍚�" checked={status} onChange={this.changeStatus} />
+ )
+ }
+}
class BodyRow extends React.Component {
render() {
@@ -78,7 +123,7 @@
class EditableCell extends Component {
getInput = (form) => {
- const { inputType, options, min, max, unlimit, allowClear } = this.props
+ const { inputType, options, min, max, unlimit, allowClear, typeChange } = this.props
if (inputType === 'number' && unlimit) {
return <InputNumber onPressEnter={() => this.getValue(form)} />
@@ -92,7 +137,7 @@
return <CusSwitch />
} else if (inputType === 'select') {
return (
- <Select>
+ <Select onChange={typeChange}>
{options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))}
</Select>
)
@@ -131,11 +176,18 @@
renderCell = (form) => {
const { getFieldDecorator } = form
- const { editing, dataIndex, title, record, children, className, required, inputType, rules } = this.props
+ const { editing, pass, dataIndex, title, record, children, className, required, inputType, rules } = this.props
+ if (!editing) {
+ return (
+ <td className={className}>
+ {children}
+ </td>
+ )
+ }
return (
<td className={className}>
- {editing ? (
+ {pass ? (
<Form.Item style={{ margin: 0 }}>
{getFieldDecorator(dataIndex, {
rules: [
@@ -149,7 +201,7 @@
})(this.getInput(form))}
</Form.Item>
) : (
- children
+ null
)}
</td>
)
@@ -173,7 +225,9 @@
data: [],
editingKey: '',
editLineId: '',
- columns: []
+ columns: [],
+ keyCol: null,
+ keyVal: ''
}
UNSAFE_componentWillMount () {
@@ -181,6 +235,7 @@
let columns = fromJS(this.props.columns).toJS()
let operation = null
let extra = null
+ let keyCol = null
if (actions) {
actions.forEach(item => {
@@ -192,9 +247,17 @@
if (actions && (actions.includes('edit') || actions.includes('copy') || actions.includes('del'))) {
let _operation = null
+ let render = null
columns = columns.filter(item => {
if (item.dataIndex === 'operation') {
_operation = item
+ }
+ if (item.keyCol) {
+ keyCol = item.dataIndex
+ }
+ if (item.dataIndex === 'sqlRender') {
+ render = item.render
+ return false
}
return item.dataIndex !== 'operation'
})
@@ -226,7 +289,7 @@
</div>
) : (
<div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px', whiteSpace: 'nowrap'}}>
- {actions.includes('edit') ? <span className="primary" title="缂栬緫" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> : null}
+ {actions.includes('edit') ? <span className="primary" title="缂栬緫" onClick={() => {editingKey === '' && this.edit(record)}}><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}
@@ -234,10 +297,11 @@
overlayClassName="popover-confirm"
title="纭畾鍒犻櫎鍚�?"
onConfirm={() => this.handleDelete(record.uuid)
- }>
+ }>
<span className="danger"><DeleteOutlined /></span>
</Popconfirm> : null}
{actions.includes('del') && editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null}
+ {actions.includes('sql') ? <span className="primary" title="SQL" onClick={() => {editingKey === '' && this.showSql(record, render)}}><ConsoleSqlOutlined /></span> : null}
</div>
)
}
@@ -253,11 +317,13 @@
this.setState({
data: data || [],
operation,
- columns
+ columns,
+ keyCol
})
}
UNSAFE_componentWillReceiveProps (nextProps) {
+
if (!is(fromJS(this.state.data), fromJS(nextProps.data))) {
this.setState({data: nextProps.data, editingKey: ''})
} else if (!is(fromJS(this.props.columns), fromJS(nextProps.columns))) {
@@ -292,6 +358,20 @@
return
}
MKEmitter.removeListener('editLineId', this.getEditLineId)
+ }
+
+ showSql = (record, render) => {
+ let list = render(record)
+
+ if (list) {
+ Modal.info({
+ title: '',
+ width: 700,
+ className: 'sql-example',
+ icon: null,
+ content: list.map((n, index) => <div key={index} dangerouslySetInnerHTML={{ __html: n }}></div>)
+ })
+ }
}
getEditLineId = (id) => {
@@ -389,7 +469,7 @@
} else {
let datatype = 'Nvarchar(50)'
let fieldlength = 50
- if (col.fieldlength && [10, 20, 50, 100, 256, 512, 1024, 2048].includes(col.fieldlength)) {
+ if (col.fieldlength && [10, 20, 50, 100, 256, 512, 1024, 2048, 4000].includes(col.fieldlength)) {
fieldlength = col.fieldlength
datatype = `Nvarchar(${fieldlength})`
}
@@ -518,6 +598,26 @@
return
}
+ let forbid = false
+
+ columns.forEach(col => {
+ if (!col.forbids || forbid) return
+
+ let key = record[col.dataIndex].toLowerCase()
+ if (col.forbids.includes(key)) {
+ forbid = col.title + '涓嶅彲浣跨敤' + record[col.dataIndex]
+ }
+ })
+
+ if (forbid) {
+ notification.warning({
+ top: 92,
+ message: forbid,
+ duration: 5
+ })
+ return
+ }
+
let unique = true
columns.forEach(col => {
if (col.unique !== true || !unique) return
@@ -527,7 +627,7 @@
return
} else if (col.strict) {
let key = record[col.dataIndex].toLowerCase()
- let _index = newData.findIndex(item => key === item[col.dataIndex].toLowerCase())
+ let _index = newData.findIndex(item => record.uuid !== item.uuid && key === item[col.dataIndex].toLowerCase())
if (_index > -1) {
notification.warning({
@@ -584,6 +684,26 @@
row.uuid = uuid
}
+ let forbid = false
+
+ columns.forEach(col => {
+ if (!col.forbids || forbid) return
+
+ let key = row[col.dataIndex].toLowerCase()
+ if (col.forbids.includes(key)) {
+ forbid = col.title + '涓嶅彲浣跨敤' + row[col.dataIndex]
+ }
+ })
+
+ if (forbid) {
+ notification.warning({
+ top: 92,
+ message: forbid,
+ duration: 5
+ })
+ return
+ }
+
let unique = true
columns.forEach(col => {
if (col.unique !== true || !unique) return
@@ -593,7 +713,7 @@
return
} else if (col.strict) {
let key = row[col.dataIndex].toLowerCase()
- let _index = newData.findIndex(item => key === item[col.dataIndex].toLowerCase())
+ let _index = newData.findIndex(item => row.uuid !== item.uuid && key === item[col.dataIndex].toLowerCase())
if (_index > -1) {
notification.warning({
@@ -633,8 +753,14 @@
})
}
- edit(uuid) {
- this.setState({ editingKey: uuid })
+ edit(record) {
+ const { keyCol } = this.state
+
+ this.setState({ editingKey: record.uuid, keyVal: keyCol ? record[keyCol] : '' })
+ }
+
+ typeChange = (val) => {
+ this.setState({ keyVal: val })
}
moveRow = (dragIndex, hoverIndex) => {
@@ -652,9 +778,40 @@
})
}
+ handleAdd = () => {
+ const { columns } = this.props
+ const { data } = this.state
+
+ let _index = data.length + 1
+ let item = {
+ uuid: Utils.getuuid()
+ }
+
+ columns.forEach(col => {
+ if (!col.dataIndex) return
+
+ item[col.dataIndex] = col.initval || ''
+
+ if (col.unique) {
+ while (data.filter(cell => cell[col.dataIndex] === item[col.dataIndex]).length > 0) {
+ _index++
+ item[col.dataIndex] = col.initval + _index
+ }
+ }
+ })
+
+ let _data = [...data, item]
+
+ this.setState({
+ data: _data
+ }, () => {
+ this.props.onChange(_data)
+ })
+ }
+
render() {
const { actions, indexShow, searchKey } = this.props
- const { editLineId } = this.state
+ const { editLineId, keyVal } = this.state
let components = {
body: {
@@ -671,9 +828,11 @@
let columns = this.state.columns.map(col => {
if (col.copy) {
- col.render = (text) => (<Paragraph copyable>{text}</Paragraph>)
+ col.render = (text, record) => (<Paragraph copyable={{ text: text, onCopy: () => this.setState({editLineId: record.uuid}) }}>{text}</Paragraph>)
}
+
if (!col.editable) return col
+
return {
...col,
onCell: record => ({
@@ -687,9 +846,12 @@
unlimit: col.unlimit,
required: col.required !== false ? true : false,
allowClear: col.allowClear === true,
+ keyCol: col.keyCol === true,
title: col.title,
editing: this.isEditing(record),
+ pass: col.keyVals ? col.keyVals.includes(keyVal) : true,
onSave: this.onSave,
+ typeChange: this.typeChange,
}),
}
})
@@ -709,11 +871,22 @@
return item
})
- let reg = searchKey ? new RegExp(searchKey, 'i') : null
+ let reg = null
+ let regs = []
+
+ if (searchKey) {
+ reg = new RegExp(searchKey, 'i')
+ this.state.columns.forEach(col => {
+ if (col.searchable) {
+ regs.push(col.dataIndex)
+ }
+ })
+ }
return (
<EditableContext.Provider value={this.props.form}>
<div className="modal-edit-table">
+ {actions.includes('add') ? <PlusOutlined className="add-row" onClick={this.handleAdd} /> : null}
<DndProvider>
<Table
bordered
@@ -727,7 +900,7 @@
className += ' active'
}
if (searchKey) {
- if (!reg.test(record.field) && !reg.test(record.label)) {
+ if (regs.findIndex(f => reg.test(record[f])) === -1) {
className += ' hidden'
}
}
--
Gitblit v1.8.0