From 8cdfdd9914d1c4f6cd59176d61869522f51f39e4 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 10 十月 2021 13:53:57 +0800
Subject: [PATCH] 2021-10-10
---
src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 496 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 454 insertions(+), 42 deletions(-)
diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
index dfdbc74..0881563 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
@@ -1,9 +1,12 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Table, Typography, Icon, Switch, Input, InputNumber, Tooltip } from 'antd'
+import { Table, Typography, Icon, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message } from 'antd'
+import moment from 'moment'
+import Api from '@/api'
import asyncComponent from '@/utils/asyncComponent'
+import Utils, { getEditTableSql } from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
@@ -11,6 +14,7 @@
import './index.scss'
const { Paragraph } = Typography
+const { confirm } = Modal
const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList'))
class BodyRow extends React.Component {
@@ -203,8 +207,9 @@
MKEmitter.emit('tdFocus', col.enter + record.$Index)
}
- let _record = {...record, [col.field]: value}
- MKEmitter.emit('changeRecord', _record)
+ if (value !== record[col.field]) {
+ MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value})
+ }
}
focus = () => {
@@ -239,8 +244,9 @@
this.setState({editing: false})
- let _record = {...record, [col.field]: value}
- MKEmitter.emit('changeRecord', _record)
+ if (value !== record[col.field]) {
+ MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value})
+ }
}
onChange = (val) => {
@@ -375,6 +381,11 @@
children = (
<CardCellComponent data={record} cards={config} elements={col.elements}/>
)
+ } else if (col.type === 'operation') {
+ style.padding = '0px 5px'
+ children = (
+ <Button type="link" style={{color: 'rgb(255, 77, 79)', backgroundColor: 'transparent'}} onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})}>鍒犻櫎</Button>
+ )
}
return (<td className={className} style={style}>{children}</td>)
@@ -389,7 +400,7 @@
columns: PropTypes.array, // 琛ㄦ牸鍒�
lineMarks: PropTypes.any, // 琛屾爣璁�
fields: PropTypes.array, // 缁勪欢瀛楁闆�
- BData: PropTypes.any, // 涓昏〃鏁版嵁
+ BID: PropTypes.any, // 涓昏〃ID
data: PropTypes.any, // 琛ㄦ牸鏁版嵁
total: PropTypes.any, // 鎬绘暟
loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓�
@@ -399,24 +410,42 @@
state = {
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
data: [],
+ edData: [],
+ edColumns: [],
tableId: '', // 琛ㄦ牸ID
pageIndex: 1, // 鍒濆椤甸潰绱㈠紩
pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟
columns: null, // 鏄剧ず鍒�
+ fields: [],
pickup: false, // 鏀惰捣鏈�夋嫨椤�
- orderfields: {} // 鎺掑簭id涓巉ield杞崲
+ orderfields: {}, // 鎺掑簭id涓巉ield杞崲
+ loading: false
}
UNSAFE_componentWillMount () {
const { setting, fields, columns, data } = this.props
let orderfields = {}
let initEditLine = null
+ let edColumns = []
+ let tableId = (() => {
+ let uuid = []
+ let _options = 'abcdefghigklmnopqrstuv'
+ for (let i = 0; i < 19; i++) {
+ uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
+ }
+ return uuid.join('')
+ }) ()
- let _columns = columns.map(item => {
+ let _columns = []
+ columns.forEach(item => {
+ if (item.Hide === 'true') return
if (item.type === 'index') {
item.field = '$Index'
item.type = 'text'
}
+
+ item.tableId = tableId
+
if (!initEditLine && item.editable === 'true') {
initEditLine = item
}
@@ -429,7 +458,7 @@
orderfields[item.uuid] = item.field
}
- return {
+ let _item = {
align: item.Align,
dataIndex: item.uuid,
title: item.label,
@@ -441,16 +470,26 @@
config: item.type === 'custom' || item.type === 'action' ? {setting, columns: fields} : null,
})
}
+
+ if (item.type !== 'action') {
+ let _copy = fromJS(_item).toJS()
+ _copy.sorter = false
+ edColumns.push(_copy)
+ }
+ _columns.push(_item)
})
- let tableId = (() => {
- let uuid = []
- let _options = 'abcdefghigklmnopqrstuv'
- for (let i = 0; i < 19; i++) {
- uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
- }
- return uuid.join('')
- }) ()
+ edColumns.push({
+ align: 'center',
+ dataIndex: 'mkoperation',
+ title: '鎿嶄綔',
+ sorter: false,
+ width: 100,
+ onCell: record => ({
+ record,
+ col: {type: 'operation', tableId: tableId},
+ })
+ })
if (setting.borderColor) { // 杈规棰滆壊
let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${setting.borderColor}}`
@@ -462,6 +501,7 @@
this.setState({
data,
columns: _columns,
+ edColumns,
tableId,
orderfields,
initEditLine
@@ -473,8 +513,28 @@
}
componentDidMount () {
- MKEmitter.addListener('resetTable', this.resetTable)
+ const { fields, columns } = this.props
+
+ let _fields = []
+
+ let fieldType = {}
+ fields.forEach(item => {
+ fieldType[item.field] = item.datatype
+ })
+
+ columns.forEach(col => {
+ if (!col.field || col.type === 'index') return
+
+ _fields.push({...col, datatype: fieldType[col.field] || 'Nvarchar(50)'})
+ })
+
+ this.setState({
+ fields: _fields,
+ })
+
MKEmitter.addListener('nextLine', this.nextLine)
+ MKEmitter.addListener('delRecord', this.delRecord)
+ MKEmitter.addListener('resetTable', this.resetTable)
MKEmitter.addListener('changeRecord', this.changeRecord)
}
@@ -485,8 +545,9 @@
this.setState = () => {
return
}
- MKEmitter.removeListener('resetTable', this.resetTable)
MKEmitter.removeListener('nextLine', this.nextLine)
+ MKEmitter.removeListener('delRecord', this.delRecord)
+ MKEmitter.removeListener('resetTable', this.resetTable)
MKEmitter.removeListener('changeRecord', this.changeRecord)
}
@@ -497,16 +558,88 @@
}
nextLine = (col, index) => {
- const { data, initEditLine } = this.state
+ const { setting } = this.props
+ const { edData, initEditLine, tableId } = this.state
+
+ if (col.tableId !== tableId) return
+
index = +index
- if (index < data.length && initEditLine) {
+ if (index < edData.length && initEditLine) {
MKEmitter.emit('tdFocus', initEditLine.uuid + (index + 1))
+ } else if (col.footEnter === 'add' && setting.addable === 'true') {
+ setTimeout(() => {
+ this.plusLine(initEditLine)
+ }, 10)
+ } else if (col.footEnter === 'sub') {
+ setTimeout(() => {
+ this.checkData()
+ }, 10)
}
}
- changeRecord = (record) => {
- let _data = this.state.data.map(item => {
+ plusLine = (initEditLine) => {
+ const { edData, fields } = this.state
+
+ let item = {...edData[edData.length - 1]}
+
+ item.key = item.key + 1
+ item.$$uuid = '$new'
+ item.$Index = item.key + 1 + ''
+
+ fields.forEach(col => {
+ item[col.field] = item[col.field] !== undefined ? item[col.field] : ''
+
+ if (col.initval !== '$copy') {
+ item[col.field] = col.initval
+ }
+ if (col.type === 'number') {
+ item[col.field] = +item[col.field]
+ if (isNaN(item[col.field])) {
+ item[col.field] = 0
+ }
+ }
+ })
+
+ this.setState({edData: [...edData, item]}, () => {
+ MKEmitter.emit('tdFocus', initEditLine.uuid + item.$Index)
+ })
+ }
+
+ delRecord = (id, record) => {
+ const { tableId, edData } = this.state
+
+ if (id !== tableId) return
+
+ let _data = []
+
+ if (record.$$uuid === '$new') {
+ _data = edData.filter(item => item.$Index !== record.$Index)
+ _data = _data.map((item, index) => {
+ item.key = index
+ item.$Index = 1 + index + ''
+ return item
+ })
+ } else {
+ _data = edData.map(item => {
+ if (item.$Index === record.$Index) {
+ record.$deleted = true
+ return record
+ } else {
+ return item
+ }
+ })
+ }
+
+ this.setState({edData: _data})
+ }
+
+ changeRecord = (id, record) => {
+ const { tableId } = this.state
+
+ if (id !== tableId) return
+
+ let _data = this.state.edData.map(item => {
if (item.$Index === record.$Index) {
return record
} else {
@@ -514,7 +647,255 @@
}
})
- this.setState({data: _data})
+ this.setState({edData: _data})
+ }
+
+ addLine = () => {
+ const { BID } = this.props
+ const { edData, fields } = this.state
+
+ let item = {}
+ if (edData.length > 0) {
+ item = {...edData[edData.length - 1]}
+ item.key = item.key + 1
+ item.$$uuid = '$new'
+ item.$Index = item.key + 1 + ''
+ } else {
+ item.key = 0
+ item.$$uuid = '$new'
+ item.$Index = item.key + 1 + ''
+ item.$$BID = BID || ''
+ }
+
+ fields.forEach(col => {
+ item[col.field] = item[col.field] !== undefined ? item[col.field] : ''
+
+ if (col.initval !== '$copy') {
+ item[col.field] = col.initval
+ }
+ if (col.type === 'number') {
+ item[col.field] = +item[col.field]
+ if (isNaN(item[col.field])) {
+ item[col.field] = 0
+ }
+ }
+ })
+
+ this.setState({edData: [...edData, item]})
+ }
+
+ checkData = () => {
+ const { edData, fields } = this.state
+
+ if (edData.length === 0) {
+ notification.warning({
+ top: 92,
+ message: '鎻愪氦鏁版嵁涓嶅彲涓虹┖锛�',
+ duration: 5
+ })
+ return
+ }
+ let err = ''
+ let data = fromJS(edData).toJS().map(item => {
+ let line = []
+ fields.forEach(col => {
+ if (col.editable !== 'true' || item.$deleted) {
+ if (col.type === 'number') {
+ item[col.field] = +item[col.field]
+ if (isNaN(item[col.field])) {
+ item[col.field] = 0
+ }
+ } else {
+ item[col.field] = item[col.field] !== undefined ? (item[col.field] + '') : ''
+ }
+ return
+ }
+ if (col.type === 'text') {
+ let val = item[col.field] !== undefined ? (item[col.field] + '') : ''
+ if (col.required === 'true' && !val) {
+ line.push(`${col.label}涓嶅彲涓虹┖`)
+ }
+ item[col.field] = val
+ } else if (col.type === 'number') {
+ let val = item[col.field]
+ if (!val && val !== 0) {
+ line.push(`${col.label}涓嶅彲涓虹┖`)
+ return
+ }
+ val = +val
+ if (isNaN(val)) {
+ line.push(`${col.label}鏁版嵁鏍煎紡閿欒`)
+ return
+ }
+
+ val = +val.toFixed(col.decimal || 0)
+
+ if (typeof(col.max) === 'number' && val > col.max) {
+ line.push(`${col.label}涓嶅彲澶т簬${col.max}`)
+ } else if (typeof(col.min) === 'number' && val < col.min) {
+ line.push(`${col.label}涓嶅彲灏忎簬${col.min}`)
+ }
+
+ item[col.field] = val
+ }
+ })
+
+ if (line.length > 0) {
+ err += `绗�${item.$Index}琛岋細` + line.join('锛�') + '锛�'
+ }
+
+ return item
+ })
+
+ if (err) {
+ notification.warning({
+ top: 92,
+ message: err,
+ duration: 5
+ })
+ } else {
+ this.submit(data)
+ }
+ }
+
+ submit = (data) => {
+ const { submit, BID } = this.props
+ const { fields } = this.state
+
+ let result = getEditTableSql(submit, data, fields)
+
+ let param = {
+ excel_in: result.lines,
+ BID: BID || ''
+ }
+
+ this.setState({
+ loading: true
+ })
+
+ if (submit.intertype === 'system') { // 绯荤粺瀛樺偍杩囩▼
+ param.func = 'sPC_TableData_InUpDe'
+
+ if (sessionStorage.getItem('dataM') === 'true') { // 鏁版嵁鏉冮檺
+ result.sql = result.sql.replace(/\$@/ig, '/*')
+ result.sql = result.sql.replace(/@\$/ig, '*/')
+ result.bottom = result.bottom.replace(/\$@/ig, '/*')
+ result.bottom = result.bottom.replace(/@\$/ig, '*/')
+ } else {
+ result.sql = result.sql.replace(/@\$|\$@/ig, '')
+ result.bottom = result.bottom.replace(/@\$|\$@/ig, '')
+ }
+
+ param.excel_in_type = 'true'
+ param.LText1 = Utils.formatOptions(result.insert)
+ param.LText2 = Utils.formatOptions(result.bottom)
+ param.LText = Utils.formatOptions(result.sql)
+ param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
+ param.secretkey = Utils.encrypt(param.LText, param.timestamp)
+
+ param.menuname = submit.logLabel
+
+ if (window.GLOB.probation) {
+ param.s_debug_type = 'Y'
+ }
+
+ Api.genericInterface(param).then((res) => {
+ if (res.status) {
+ this.execSuccess(res)
+ } else {
+ this.execError(res)
+ }
+ }, () => {
+ this.execError({})
+ })
+ } else if (submit.intertype === 'inner' && submit.innerFunc) { // 鑷畾涔夊瓨鍌ㄨ繃绋�
+ param.func = submit.innerFunc
+
+ Api.genericInterface(param).then((res) => {
+ if (res.status) {
+ this.execSuccess(res)
+ } else {
+ this.execError(res)
+ }
+ }, () => {
+ this.execError({})
+ })
+ }
+ }
+
+ execSuccess = (res) => {
+ const { submit } = this.props
+
+ if (res && res.ErrCode === 'S') { // 鎵ц鎴愬姛
+ notification.success({
+ top: 92,
+ message: res.ErrMesg || this.state.dict['main.action.confirm.success'],
+ duration: submit.stime ? submit.stime : 2
+ })
+ } else if (res && res.ErrCode === 'Y') { // 鎵ц鎴愬姛
+ Modal.success({
+ title: res.ErrMesg || this.state.dict['main.action.confirm.success']
+ })
+ } else if (res && res.ErrCode === '-1') { // 瀹屾垚鍚庝笉鎻愮ず
+
+ }
+
+ this.setState({
+ loading: false
+ })
+
+ if (submit.execSuccess !== 'never') {
+ this.repick()
+ MKEmitter.emit('refreshByButtonResult', submit.$menuId, submit.execSuccess, submit)
+ }
+ }
+
+ execError = (res) => {
+ const { submit } = this.props
+
+ if (res.ErrCode === 'E') {
+ Modal.error({
+ title: res.message || res.ErrMesg,
+ })
+ } else if (res.ErrCode === 'N') {
+ notification.error({
+ top: 92,
+ message: res.message || res.ErrMesg,
+ duration: submit.ntime ? submit.ntime : 10
+ })
+ } else if (res.ErrCode === 'F') {
+ notification.error({
+ className: 'notification-custom-error',
+ top: 92,
+ message: res.message || res.ErrMesg,
+ duration: submit.ftime ? submit.ftime : 10
+ })
+ } else if (res.ErrCode === 'NM') {
+ message.error(res.message || res.ErrMesg)
+ }
+
+ this.setState({
+ loading: false
+ })
+
+ if (submit.execError !== 'never') {
+ this.repick()
+ MKEmitter.emit('refreshByButtonResult', submit.$menuId, submit.execError, submit)
+ }
+ }
+
+ repick = () => {
+ const { data } = this.state
+
+ this.setState({
+ data: [],
+ edData: [],
+ pickup: false,
+ }, () => {
+ this.setState({
+ data: data,
+ })
+ })
}
changeTable = (pagination, filters, sorter) => {
@@ -522,8 +903,7 @@
this.setState({
pageIndex: pagination.current,
- pageSize: pagination.pageSize,
- pickup: false
+ pageSize: pagination.pageSize
})
sorter.field = orderfields[sorter.field] || ''
@@ -536,27 +916,54 @@
if (id !== MenuID) return
- if (repage === 'false') {
+ if (repage !== 'false') {
this.setState({
- pickup: false
- })
- } else {
- this.setState({
- pageIndex: 1,
- pickup: false
+ pageIndex: 1
})
}
}
pickupChange = () => {
- this.setState({
- pickup: !this.state.pickup
- })
+ const { data } = this.state
+
+ let pickup = !this.state.pickup
+
+ if (!pickup && !is(fromJS(data), fromJS(this.state.edData))) {
+ const _this = this
+ confirm({
+ title: '鏁版嵁宸蹭慨鏀癸紝纭畾鏀惧純淇濆瓨鍚楋紵',
+ onOk() {
+ _this.setState({
+ data: [],
+ edData: [],
+ pickup
+ }, () => {
+ _this.setState({
+ data: data,
+ edData: pickup ? fromJS(data).toJS() : []
+ })
+ })
+ },
+ onCancel() {}
+ })
+ } else {
+ this.setState({
+ data: [],
+ edData: [],
+ pickup,
+ loading: false
+ }, () => {
+ this.setState({
+ data: data,
+ edData: pickup ? fromJS(data).toJS() : []
+ })
+ })
+ }
}
render() {
const { setting, statFValue, lineMarks } = this.props
- const { pickup, tableId, data } = this.state
+ const { pickup, tableId, data, edData, columns, edColumns, loading } = this.state
const components = {
body: {
@@ -566,14 +973,17 @@
}
// 鏁版嵁鏀惰捣鏃讹紝杩囨护宸查�夋暟鎹�
- let _data = data || []
+ let _data = data
+ let _columns = columns
if (pickup) {
+ _data = edData
_data = _data.filter(item => !item.$deleted)
+ _columns = edColumns
}
-
+
let _pagination = false
- if (setting.laypage !== 'false' && setting.laypage !== false) {
+ if (!pickup && setting.laypage !== 'false' && setting.laypage !== false) {
_pagination = {
current: this.state.pageIndex,
pageSize: this.state.pageSize,
@@ -586,7 +996,7 @@
let _footer = ''
- if (statFValue && statFValue.length > 0) {
+ if (!pickup && statFValue && statFValue.length > 0) {
_footer = statFValue.map(f => `${f.label}(鍚堣)锛�${f.value}`).join('锛�')
}
@@ -595,12 +1005,13 @@
return (
<div className={`edit-custom-table ${pickup ? 'editable' : ''} ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''}`} id={tableId}>
<Switch title="缂栬緫" className="main-pickup" checkedChildren="寮�" unCheckedChildren="鍏�" checked={pickup} onChange={this.pickupChange} />
+ {pickup ? <Button onClick={() => setTimeout(() => {this.checkData()}, 10)} loading={loading} className="submit-table" type="link">鎻愪氦</Button> : null}
<Table
components={components}
style={setting.style}
size={setting.size || 'middle'}
bordered={setting.bordered !== 'false'}
- columns={this.state.columns}
+ columns={_columns}
dataSource={_data}
loading={this.props.loading}
scroll={{ x: '100%', y: height }}
@@ -614,6 +1025,7 @@
pagination={_pagination}
/>
{_footer ? <div className={'normal-table-footer ' + (_pagination ? 'pagination' : '')}>{_footer}</div> : null}
+ {pickup && setting.addable === 'true' ? <Button onClick={this.addLine} style={{display: 'block', width: '100%', color: '#26C281'}} icon="plus" type="link"></Button> : null}
</div>
)
}
--
Gitblit v1.8.0