From 3fc643dea8f8c957a95a86d250b5d8b06fb740e1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 03 三月 2022 23:48:59 +0800
Subject: [PATCH] 2022-03-03
---
src/tabviews/custom/components/table/edit-table/normalTable/index.scss | 88 ++++---
src/tabviews/custom/components/table/edit-table/index.jsx | 99 +++++++
src/menu/components/table/edit-table/options.jsx | 24 ++
src/menu/components/table/edit-table/index.jsx | 8
src/tabviews/custom/components/table/edit-table/normalTable/cusSwitch/index.jsx | 5
src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 476 ++++++++++++++++++++++++++++++++++++++-
6 files changed, 638 insertions(+), 62 deletions(-)
diff --git a/src/menu/components/table/edit-table/index.jsx b/src/menu/components/table/edit-table/index.jsx
index 7ff7cb0..933ea98 100644
--- a/src/menu/components/table/edit-table/index.jsx
+++ b/src/menu/components/table/edit-table/index.jsx
@@ -310,7 +310,13 @@
}
updateWrap = (res) => {
- this.updateComponent({...this.state.card, wrap: res})
+ let card = {...this.state.card, wrap: res}
+
+ if (res.tableType) {
+ card.switchable = true
+ }
+
+ this.updateComponent(card)
}
clickComponent = (e) => {
diff --git a/src/menu/components/table/edit-table/options.jsx b/src/menu/components/table/edit-table/options.jsx
index cd7c543..b842966 100644
--- a/src/menu/components/table/edit-table/options.jsx
+++ b/src/menu/components/table/edit-table/options.jsx
@@ -111,6 +111,18 @@
},
{
type: 'radio',
+ field: 'editType',
+ label: '缂栬緫妯″紡',
+ initval: wrap.editType || 'simple',
+ tooltip: '鍙紪杈戣〃鍗曟槸鍚﹀叏閮ㄦ斁寮�銆�',
+ required: false,
+ options: [
+ {value: 'simple', label: '鍗曢」'},
+ {value: 'multi', label: '鏁翠綋'},
+ ]
+ },
+ {
+ type: 'radio',
field: 'cache',
label: '缂撳瓨',
initval: wrap.cache || 'true',
@@ -123,6 +135,18 @@
},
{
type: 'radio',
+ field: 'tableType',
+ label: '琛ㄦ牸灞炴��',
+ initval: wrap.tableType || '',
+ required: false,
+ options: [
+ {value: '', label: '涓嶅彲閫�'},
+ {value: 'radio', label: '鍗曢��'},
+ {value: 'checkbox', label: '澶氶��'},
+ ]
+ },
+ {
+ type: 'radio',
field: 'bordered',
label: '杈规',
initval: wrap.bordered || 'true',
diff --git a/src/tabviews/custom/components/table/edit-table/index.jsx b/src/tabviews/custom/components/table/edit-table/index.jsx
index e612d75..09e5078 100644
--- a/src/tabviews/custom/components/table/edit-table/index.jsx
+++ b/src/tabviews/custom/components/table/edit-table/index.jsx
@@ -36,6 +36,7 @@
arr_field: '', // 浣跨敤 sPC_Get_TableData 鏃剁殑鏌ヨ瀛楁闆�
setting: null, // 椤甸潰鍏ㄥ眬璁剧疆锛氭暟鎹簮銆佹寜閽強鏄剧ず鍒楀浐瀹氥�佷富閿瓑
data: [], // 鍒楄〃鏁版嵁闆�
+ selectedData: [], // 宸查�夎〃鏍兼暟鎹�
total: 0, // 鎬绘暟
loading: false, // 鍒楄〃鏁版嵁鍔犺浇涓�
pageIndex: 1, // 椤电爜
@@ -162,6 +163,7 @@
if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇�
this.setState({
data: [],
+ selectedData: [],
total: 0
})
reset && MKEmitter.emit('resetTable', config.uuid, repage) // 鍒楄〃閲嶇疆
@@ -210,7 +212,84 @@
item.$origin = true
return item
}),
+ selectedData: [],
total: result.total,
+ loading: false
+ })
+ } else {
+ this.setState({
+ loading: false
+ })
+ notification.error({
+ top: 92,
+ message: result.message,
+ duration: 10
+ })
+ }
+ }
+
+ /**
+ * @description 鑾峰彇鍗曡鏁版嵁
+ */
+ async loadmainLinedata (id) {
+ const { mainSearch } = this.props
+ const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state
+
+ let searches = fromJS(search).toJS()
+ if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢
+ let keys = searches.map(item => item.key.toLowerCase())
+ mainSearch.forEach(item => {
+ if (!keys.includes(item.key.toLowerCase())) {
+ searches.push(item)
+ }
+ })
+ }
+
+ this.setState({
+ loading: true
+ })
+
+ let _orderBy = orderBy || setting.order
+ let param = UtilsDM.getQueryDataParams(setting, arr_field, searches, _orderBy, pageIndex, pageSize, BID, this.props.menuType, id)
+
+ let result = await Api.genericInterface(param)
+ if (result.status) {
+ let data = fromJS(this.state.data).toJS()
+ let selectedData = fromJS(this.state.selectedData).toJS()
+ if (result.data && result.data[0]) {
+ let _data = result.data[0] || {}
+ _data.$$uuid = _data[setting.primaryKey] || ''
+ _data.$$BID = BID || ''
+ _data.$$BData = BData || ''
+ _data.$type = 'upt'
+ _data.$origin = true
+
+ try {
+ data = data.map(item => {
+ if (item.$$uuid === _data.$$uuid) {
+ _data.key = item.key
+ _data.$Index = item.$Index
+ return _data
+ } else {
+ return item
+ }
+ })
+ selectedData = selectedData.map(item => {
+ if (_data.$$uuid === item.$$uuid) {
+ return _data
+ }
+ return item
+ })
+ } catch (e) {
+ console.warn('鏁版嵁鏌ヨ閿欒')
+ }
+
+ MKEmitter.emit('resetSelectLine', config.uuid, _data.$$uuid || '', _data)
+ }
+
+ this.setState({
+ data,
+ selectedData,
loading: false
})
} else {
@@ -387,8 +466,13 @@
const { config } = this.state
if (config.uuid !== menuId) return
+ if (id === 'empty') return
- this.reloadtable()
+ if (!id) {
+ this.reloadtable()
+ } else {
+ this.loadmainLinedata(id)
+ }
}
resetParentParam = (MenuID, id, data) => {
@@ -413,12 +497,16 @@
* @param {*} position // 鍒锋柊浣嶇疆
* @param {*} btn // 鎵ц鐨勬寜閽�
*/
- refreshByButtonResult = (menuId, position, btn) => {
+ refreshByButtonResult = (menuId, position, btn, id, lines) => {
const { config, BID } = this.state
if (config.uuid !== menuId) return
- this.reloadtable(btn) // 鏁版嵁鍒锋柊
+ if (position === 'line' && lines && lines.length === 1) {
+ this.loadmainLinedata(lines[0].$$uuid)
+ } else {
+ this.reloadtable(btn) // 鏁版嵁鍒锋柊
+ }
if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) {
MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊
@@ -467,7 +555,7 @@
}
render() {
- const { BID, setting, searchlist, actions, config, columns, BData, data } = this.state
+ const { BID, setting, searchlist, actions, config, columns, BData, data, selectedData } = this.state
return (
<div className="custom-edit-table" style={config.style}>
@@ -481,7 +569,7 @@
actions={actions}
BData={BData}
columns={config.columns}
- selectedData={[]}
+ selectedData={selectedData}
/>
<div className={'main-table-box ' + (!actions || actions.length === 0 ? 'no-action' : '')}>
<MainTable
@@ -496,6 +584,7 @@
lineMarks={config.lineMarks}
loading={this.state.loading}
refreshdata={this.refreshbytable}
+ chgSelectData={(selects) => this.setState({selectedData: selects})}
statFValue={this.state.statFValue}
/>
</div>
diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/cusSwitch/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/cusSwitch/index.jsx
index 88e4302..82fcb96 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/cusSwitch/index.jsx
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/cusSwitch/index.jsx
@@ -8,6 +8,7 @@
class ColorSketch extends Component {
static propTpyes = {
defaultValue: PropTypes.any,
+ autoFocus: PropTypes.any,
config: PropTypes.object,
onChange: PropTypes.func
}
@@ -36,10 +37,10 @@
}
render() {
- const { config } = this.props
+ const { config, autoFocus } = this.props
const { status } = this.state
return (
- <Switch checkedChildren={config.openText} autoFocus={true} onBlur={this.props.onBlur} unCheckedChildren={config.closeText} checked={status} onChange={this.changeStatus} />
+ <Switch checkedChildren={config.openText} autoFocus={autoFocus} onBlur={this.props.onBlur} unCheckedChildren={config.closeText} checked={status} onChange={this.changeStatus} />
)
}
}
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 987b60d..6ef85b0 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
@@ -270,8 +270,10 @@
}
render() {
- let { col, config, record, style, className } = this.props
+ let { col, config, record, style, className, ...resProps } = this.props
const { editing, value, err } = this.state
+
+ if (!col) return (<td {...resProps} className={className} style={style}/>)
let children = null
if (col.type === 'text') {
@@ -314,7 +316,7 @@
} else if (col.editType === 'switch') {
let _value = record[col.field] !== undefined ? record[col.field] : ''
return (<td className="editing_table_cell">
- <CusSwitch config={col} defaultValue={_value} onChange={this.onSwitchChange} onBlur={this.switchBlur}/>
+ <CusSwitch config={col} defaultValue={_value} autoFocus={true} onChange={this.onSwitchChange} onBlur={this.switchBlur}/>
</td>)
} else {
let _value = record[col.field] !== undefined ? record[col.field] : ''
@@ -332,7 +334,11 @@
</td>)
}
} else {
- return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>)
+ return (<td className={className + ' pointer'} style={style}>
+ {col.addable ? <PlusCircleOutlined onClick={() => MKEmitter.emit('addRecord', col.tableId, {...record})} className="mk-editable mk-plus"/> : null}
+ <div className="mk-mask" onClick={this.focus}></div>{content}
+ {col.delable ? <DeleteOutlined onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})} className="mk-editable mk-del"/> : null}
+ </td>)
}
} else {
children = content
@@ -387,7 +393,11 @@
{err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null}
</td>)
} else {
- return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>)
+ return (<td className={className + ' pointer'} style={style}>
+ {col.addable ? <PlusCircleOutlined onClick={() => MKEmitter.emit('addRecord', col.tableId, {...record})} className="mk-editable mk-plus"/> : null}
+ <div className="mk-mask" onClick={this.focus}></div>{content}
+ {col.delable ? <DeleteOutlined onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})} className="mk-editable mk-del"/> : null}
+ </td>)
}
} else {
children = content
@@ -475,6 +485,338 @@
}
}
+class BodyAllCell extends React.Component {
+ state = {
+ err: null
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props.record), fromJS(nextProps.record)) ||
+ nextState.err !== this.state.err
+ }
+
+ componentDidMount () {
+ MKEmitter.addListener('tdFocus', this.tdFocus)
+ }
+
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ MKEmitter.removeListener('tdFocus', this.tdFocus)
+ }
+
+ tdFocus = (id) => {
+ const { col, record } = this.props
+
+ if (id !== col.uuid + record.$$uuid) return
+ this.focus()
+ }
+
+ enterPress = () => {
+ const { col, record } = this.props
+
+ setTimeout(() => {
+ if (col.enter === '$next') {
+ MKEmitter.emit('nextLine', col, record.$$uuid)
+ } else {
+ MKEmitter.emit('tdFocus', col.enter + record.$$uuid)
+ }
+ }, 50)
+ }
+
+ focus = () => {
+ const { col, record } = this.props
+
+ if (col.editType === 'switch' || col.editType === 'select') {
+ let node = document.getElementById(col.uuid + record.$$uuid)
+ node && node.click()
+ } else {
+ let err = null
+ let val = record[col.field] !== undefined ? record[col.field] : ''
+
+ if (col.type === 'number') {
+ val = +val
+ if (isNaN(val)) {
+ val = 0
+ }
+ if (typeof(col.max) === 'number' && val > col.max) {
+ err = col.label + '鏈�澶т负' + col.max
+ } else if (typeof(col.min) === 'number' && val < col.min) {
+ err = col.label + '鏈�灏忎负' + col.min
+ }
+ } else if (col.required === 'true' && !val) {
+ err = '璇峰～鍐�' + col.label
+ }
+
+ this.setState({err}, () => {
+ let node = document.getElementById(col.uuid + record.$$uuid)
+ node && node.select()
+ })
+ }
+ }
+
+ onChange = (val) => {
+ const { col, record } = this.props
+
+ let err = null
+
+ if (col.type === 'number') {
+ val = +val
+ if (isNaN(val)) {
+ val = 0
+ }
+ if (typeof(col.max) === 'number' && val > col.max) {
+ err = col.label + '鏈�澶т负' + col.max
+ } else if (typeof(col.min) === 'number' && val < col.min) {
+ err = col.label + '鏈�灏忎负' + col.min
+ }
+ } else if (col.required === 'true' && !val) {
+ err = '璇峰～鍐�' + col.label
+ }
+ this.setState({err})
+ MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: val})
+ }
+
+ onSwitchChange = (val) => {
+ const { col, record } = this.props
+
+ setTimeout(() => {
+ if (col.enter === '$next') {
+ MKEmitter.emit('nextLine', col, record.$$uuid)
+ } else {
+ MKEmitter.emit('tdFocus', col.enter + record.$$uuid)
+ }
+ }, 50)
+
+ MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: val})
+ }
+
+ onSelectChange = (val, option) => {
+ const { col, record } = this.props
+
+ let values = {}
+ let _option = col.options.filter(m => m.key === option.key)[0]
+
+ if (_option) {
+ if (col.linkSubField) {
+ col.linkSubField.forEach(m => {
+ values[m] = _option[m] !== undefined ? _option[m] : ''
+ })
+ }
+
+ if (col.editField) {
+ values[col.field] = _option.label
+ values[col.editField] = val
+ } else {
+ values[col.field] = val
+ }
+ }
+
+ setTimeout(() => {
+ if (col.enter === '$next') {
+ MKEmitter.emit('nextLine', col, record.$$uuid)
+ } else {
+ MKEmitter.emit('tdFocus', col.enter + record.$$uuid)
+ }
+ }, 50)
+
+ MKEmitter.emit('changeRecord', col.tableId, {...record, ...values})
+ }
+
+ render() {
+ let { col, config, record, style, className } = this.props
+ const { err } = this.state
+
+ let children = null
+ if (col.type === 'text') {
+ if (col.editable === 'true') {
+ let _value = record[col.field] !== undefined ? record[col.field] : ''
+ if (!col.editType || col.editType === 'text') {
+ children = (<>
+ <Input id={col.uuid + record.$$uuid} defaultValue={_value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/>
+ {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null}
+ </>)
+ } else if (col.editType === 'switch') {
+ children = (
+ <CusSwitch config={col} autoFocus={false} defaultValue={_value} onChange={this.onSwitchChange} onBlur={() => {}}/>
+ )
+ } else {
+ children = (<>
+ <Select
+ showSearch
+ defaultValue={_value}
+ id={col.uuid + record.$$uuid}
+ onBlur={() => this.setState({editing: false})}
+ filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ onSelect={this.onSelectChange}
+ >
+ {col.options.map((item, i) => (<Select.Option key={item.key} disabled={item.$disabled} value={item.value}>{item.label}</Select.Option>))}
+ </Select>
+ </>)
+ }
+ } else {
+ let content = ''
+ if (record[col.field] !== undefined) {
+ content = `${record[col.field]}`
+ }
+
+ if (content !== '') {
+ if (col.textFormat === 'YYYY-MM-DD' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1])/.test(content)) {
+ content = `${content.substr(0, 4)}-${content.substr(5, 2)}-${content.substr(8, 2)}`
+ } else if (col.textFormat === 'YYYY-MM-DD HH:mm:ss' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1]).([0-1][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]/.test(content)) {
+ content = `${content.substr(0, 4)}-${content.substr(5, 2)}-${content.substr(8, 2)} ${content.substr(11, 2)}:${content.substr(14, 2)}:${content.substr(17, 2)}`
+ }
+
+ content = (col.prefix || '') + content + (col.postfix || '')
+ }
+
+ if (col.marks) {
+ let mark = getMark(col.marks, record, style)
+
+ style = mark.style
+
+ if (mark.icon) {
+ if (mark.position === 'front') {
+ content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span>
+ } else {
+ content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span>
+ }
+ }
+ }
+ children = content
+ }
+ } else if (col.type === 'number') {
+ if (col.editable === 'true') {
+ let _value = record[col.field] !== undefined ? record[col.field] : ''
+ children = (<>
+ <InputNumber id={col.uuid + record.$$uuid} defaultValue={_value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress}/>
+ {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null}
+ </>)
+ } else {
+ let content = ''
+ try {
+ content = parseFloat(record[col.field])
+ if (isNaN(content)) {
+ content = ''
+ }
+ } catch (e) {
+ content = ''
+ }
+
+ if (content !== '') {
+ let decimal = col.decimal || 0
+ if (col.format === 'percent') {
+ content = content * 100
+ decimal = decimal > 2 ? decimal - 2 : 0
+ } else if (col.format === 'abs') {
+ content = Math.abs(content)
+ }
+
+ content = content.toFixed(decimal)
+
+ if (col.format === 'thdSeparator') {
+ content = content.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
+ }
+
+ content = col.prefix + content + col.postfix
+ }
+
+ if (col.marks) {
+ let mark = getMark(col.marks, record, style)
+
+ style = mark.style
+
+ if (mark.icon) {
+ if (mark.position === 'front') {
+ content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span>
+ } else {
+ content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span>
+ }
+ }
+ }
+ children = content
+ }
+ } else if (col.type === 'textarea') {
+ let content = ''
+ if (record[col.field] !== undefined) {
+ content = `${record[col.field]}`
+ }
+
+ if (content) {
+ content = col.prefix + content + col.postfix
+ }
+
+ children = (
+ <div>
+ {content ? <Paragraph copyable ellipsis={{ rows: 3, expandable: true }}>{content}</Paragraph> : null }
+ </div>
+ )
+ } else if (col.type === 'formula') {
+ let content = col.formula
+ Object.keys(record).forEach(key => {
+ let reg = new RegExp('@' + key + '@', 'ig')
+ content = content.replace(reg, record[key])
+ })
+
+ if (col.eval !== 'false') {
+ try {
+ // eslint-disable-next-line
+ content = eval(content)
+ } catch (e) {
+ content = ''
+ }
+ }
+
+ content = content === undefined ? '' : content
+
+ if (content !== '') {
+ content = `${col.prefix || ''}${content}${col.postfix || ''}`
+
+ if (col.eval === 'false') {
+ content = content.replace(/\n/ig, '<br/>').replace(/\s/ig, ' ')
+ content = <span dangerouslySetInnerHTML={{__html: content}}></span>
+ }
+ }
+
+ if (col.marks) {
+ let mark = getMark(col.marks, record, style)
+
+ style = mark.style
+
+ if (mark.icon) {
+ if (mark.position === 'front') {
+ content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span>
+ } else {
+ content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span>
+ }
+ }
+ }
+
+ children = content
+ } else if (col.type === 'custom') {
+ style.padding = '0px'
+ if (col.style) {
+ style = {...style, ...col.style}
+ }
+
+ 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={'editing_all_table_cell ' + className} style={style}>{col.addable ? <PlusCircleOutlined onClick={() => MKEmitter.emit('addRecord', col.tableId, {...record})} className="mk-editable mk-plus"/> : null}{children}{col.delable ? <DeleteOutlined onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})} className="mk-editable mk-del"/> : null}</td>)
+ }
+}
+
class NormalTable extends Component {
static propTpyes = {
statFValue: PropTypes.any, // 鍚堣瀛楁鏁版嵁
@@ -495,6 +837,7 @@
data: [],
edData: [],
edColumns: [],
+ selectedRowKeys: [], // 琛ㄦ牸涓�変腑琛�
tableId: '', // 琛ㄦ牸ID
pageIndex: 1, // 鍒濆椤甸潰绱㈠紩
pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟
@@ -551,7 +894,7 @@
_copy.sorter = false
if (item.editable === 'true') {
- _copy.title = <span>{item.label}<EditOutlined className="system-color" style={{position: 'absolute', bottom: '2px', right: '5px'}}/></span>
+ _copy.title = <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span>
}
edColumns.push(_copy)
}
@@ -617,6 +960,7 @@
})
if (editable === 'true' && data && data.length > 0) {
+ this.setState({editable: 'false'})
setTimeout(() => {
this.pickupChange()
}, 200)
@@ -647,6 +991,7 @@
if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
this.setState({data: nextProps.data || []})
if (this.state.editable === 'true' && !this.state.pickup) {
+ this.setState({editable: 'false'})
setTimeout(() => {
this.pickupChange()
}, 200)
@@ -805,21 +1150,28 @@
return item
})
- this.setState({edColumns: []}, () => {
+ if (this.state.pickup) {
+ this.setState({
+ pickup: false
+ }, () => {
+ this.setState({pickup: true, edColumns: _edColumns})
+ })
+ } else {
this.setState({edColumns: _edColumns})
- })
+ }
}
- nextLine = (col, index) => {
+ nextLine = (col, uuid) => {
const { setting } = this.props
const { edData, initEditLine, tableId } = this.state
if (col.tableId !== tableId) return
- index = +index
+ let index = edData.findIndex(item => item.$$uuid === uuid)
+ let next = edData[index + 1] || null
- if (index < edData.length && initEditLine) {
- MKEmitter.emit('tdFocus', initEditLine.uuid + (index + 1))
+ if (next && initEditLine) {
+ MKEmitter.emit('tdFocus', initEditLine.uuid + next.$$uuid)
} else if (col.footEnter === 'add' && setting.addable === 'true') {
setTimeout(() => {
this.plusLine()
@@ -1205,12 +1557,82 @@
})
}
+ /**
+ *
+ */
+ onSelectChange = selectedRowKeys => {
+ this.setState({ selectedRowKeys })
+
+ let activeId = ''
+ if (selectedRowKeys.length > 0) {
+ activeId = selectedRowKeys.slice(-1)[0]
+ }
+ this.changedata(activeId)
+ this.selectdata(selectedRowKeys)
+ }
+
+ /**
+ * @description 鐐瑰嚮鏁磋锛岃Е鍙戝垏鎹紝 鍒ゆ柇鏄惁鍙�夛紝鍗曢�夋垨澶氶�夛紝杩涜瀵瑰簲鎿嶄綔
+ */
+ changeRow = (index) => {
+ const { setting } = this.props
+
+ if (!setting.tableType || this.state.pickup) return
+
+ let newkeys = fromJS(this.state.selectedRowKeys).toJS()
+
+ let activeId = ''
+ if (setting.tableType === 'radio') {
+ activeId = index
+ newkeys = [index]
+ this.setState({ selectedRowKeys: newkeys })
+ } else {
+ if (newkeys.includes(index)) {
+ newkeys = newkeys.filter(item => item !== index)
+
+ if (newkeys.length > 0) {
+ activeId = newkeys.slice(-1)[0]
+ }
+ } else {
+ activeId = index
+ newkeys.push(index)
+ }
+
+ this.setState({ selectedRowKeys: newkeys })
+ }
+
+ this.changedata(activeId)
+ this.selectdata(newkeys)
+ }
+
+ changedata = (id) => {
+ const { MenuID } = this.props
+ const { data } = this.state
+
+ let _data = ''
+
+ if (id) {
+ _data = data.filter(item => item.$$uuid === id)[0] || ''
+ }
+
+ MKEmitter.emit('resetSelectLine', MenuID, id, _data)
+ }
+
+ selectdata = (keys) => {
+ const { data } = this.state
+
+ let _data = data.filter(item => keys.includes(item.$$uuid))
+
+ this.props.chgSelectData(_data)
+ }
+
changeTable = (pagination, filters, sorter) => {
const { orderfields } = this.state
this.setState({
pageIndex: pagination.current,
- pageSize: pagination.pageSize
+ pageSize: pagination.pageSize,
+ selectedRowKeys: [],
})
sorter.field = orderfields[sorter.field] || ''
@@ -1223,15 +1645,20 @@
if (id !== MenuID) return
- if (repage !== 'false') {
+ if (repage === 'false') {
this.setState({
- pageIndex: 1
+ selectedRowKeys: [],
+ })
+ } else {
+ this.setState({
+ pageIndex: 1,
+ selectedRowKeys: [],
})
}
}
pickupChange = () => {
- const { submit } = this.props
+ const { submit, MenuID } = this.props
const { data } = this.state
let pickup = !this.state.pickup
@@ -1264,6 +1691,7 @@
onCancel() {}
})
} else {
+ pickup && MKEmitter.emit('resetSelectLine', MenuID, '', '')
this.setState({
data: [],
edData: [],
@@ -1281,12 +1709,12 @@
render() {
const { setting, statFValue, lineMarks, submit } = this.props
- const { pickup, tableId, data, edData, columns, edColumns, loading, pageOptions } = this.state
+ const { pickup, tableId, data, edData, columns, edColumns, loading, pageOptions, selectedRowKeys } = this.state
const components = {
body: {
row: BodyRow,
- cell: BodyCell
+ cell: setting.editType !== 'multi' || !pickup ? BodyCell : BodyAllCell
}
}
@@ -1298,6 +1726,16 @@
_data = edData
_data = _data.filter(item => !item.$deleted)
_columns = edColumns
+ }
+
+ // 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙��
+ let rowSelection = null
+ if (setting.tableType && !pickup) {
+ rowSelection = {
+ selectedRowKeys,
+ type: (setting.tableType === 'radio') ? 'radio' : 'checkbox',
+ onChange: this.onSelectChange
+ }
}
let _pagination = false
@@ -1330,6 +1768,7 @@
style={setting.style}
size={setting.size || 'middle'}
bordered={setting.bordered !== 'false'}
+ rowSelection={rowSelection}
columns={_columns}
dataSource={_data}
loading={this.props.loading}
@@ -1337,7 +1776,8 @@
onRow={(record, index) => {
return {
lineMarks,
- data: record
+ data: record,
+ onClick: () => {this.changeRow(record.$$uuid)},
}
}}
onChange={this.changeTable}
diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.scss b/src/tabviews/custom/components/table/edit-table/normalTable/index.scss
index 92c6847..c66d3dc 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/index.scss
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.scss
@@ -18,6 +18,12 @@
color: inherit;
font-size: inherit;
}
+ .mk-edit-sign {
+ position: absolute;
+ bottom: 2px;
+ right: 5px;
+ opacity: 0.7;
+ }
table {
max-width: 100%;
@@ -135,28 +141,7 @@
}
}
}
- .ant-input {
- border: none;
- box-shadow: none!important;
- height: auto;
- border-radius: 0;
- }
- .ant-input-number {
- border: none;
- box-shadow: none!important;
- height: auto;
- border-radius: 0;
- position: unset;
-
- .ant-input-number-handler-wrap {
- display: none;
- }
- .ant-input-number-input {
- border-radius: 0;
- padding: 0;
- height: auto;
- }
- }
+
.editing_table_cell {
.ant-input {
padding: 0px;
@@ -165,7 +150,10 @@
left: 0px;
right: 0px;
bottom: 0px;
- border: 1px solid #1890ff;
+ border: 1px solid var(--antd-wave-shadow-color);
+ height: auto;
+ border-radius: 0;
+ box-shadow: none!important;
}
.ant-select {
padding: 0px;
@@ -183,18 +171,46 @@
}
}
}
- .ant-input-number-input {
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- border: 1px solid #1890ff;
+ .ant-input-number {
+ height: auto;
+ border-radius: 0;
+ position: unset;
+ border: none;
+ box-shadow: none!important;
+
+ .ant-input-number-handler-wrap {
+ display: none;
+ }
+ .ant-input-number-input {
+ border-radius: 0;
+ padding: 0;
+ height: auto;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ border: 1px solid var(--antd-wave-shadow-color);
+ }
}
- .anticon {
+ .anticon-exclamation-circle {
color: #ff4d4f;
position: absolute;
right: 3px;
+ top: calc(50% - 8px);
+ }
+ }
+ .editing_all_table_cell {
+ .ant-select {
+ width: 100%;
+ }
+ .ant-input-number-handler-wrap {
+ display: none;
+ }
+ .anticon-exclamation-circle {
+ color: #ff4d4f;
+ position: absolute;
+ right: 13px;
top: calc(50% - 8px);
}
}
@@ -214,12 +230,11 @@
}
.mk-editable {
position: absolute;
- display: inline-block;
- top: calc(50% - 13px);
+ display: none;
+ top: calc(50% - 18px);
cursor: pointer;
padding: 10px 5px;
opacity: 0;
- // transition: opacity 0.3s 0.1s, left 0.1s;
}
tr:hover {
.mk-editable {
@@ -234,13 +249,11 @@
}
.mk-plus {
left: 0px;
- // left: -25px;
color: rgb(38, 194, 129);
padding-right: 10px;
}
.mk-del {
right: 0px;
- // right: -25px;
color: rgb(255, 77, 79);
padding-left: 10px;
}
@@ -280,6 +293,9 @@
.ant-table-placeholder {
display: none;
}
+ .mk-editable {
+ display: inline-block;
+ }
}
.edit-custom-table:not(.fixed-height) {
.ant-table-body::-webkit-scrollbar {
--
Gitblit v1.8.0