From b68697ccdce3f7de67c3a918701c814497b6b41a Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 12 十一月 2019 22:05:24 +0800
Subject: [PATCH] 2019-11-12
---
src/components/sidemenu/comtableconfig/index.jsx | 326 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 285 insertions(+), 41 deletions(-)
diff --git a/src/components/sidemenu/comtableconfig/index.jsx b/src/components/sidemenu/comtableconfig/index.jsx
index d24cbd9..41e7b92 100644
--- a/src/components/sidemenu/comtableconfig/index.jsx
+++ b/src/components/sidemenu/comtableconfig/index.jsx
@@ -1,15 +1,19 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { is, fromJS } from 'immutable'
+// import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
-import { Button, Card, Modal } from 'antd'
+import { Button, Card, Modal, Tabs } from 'antd'
import DragElement from './dragelement'
-import MenuForm from './menuform'
+import SearchForm from './searchform'
+import ActionForm from './actionform'
+import ColumnForm from './columnform'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import Utils from '@/utils/utils.js'
import './index.scss'
+
+const {TabPane} = Tabs
class ComTableConfig extends Component {
static propTpyes = {
@@ -21,6 +25,12 @@
config: null,
visible: false,
formlist: null,
+ formtemp: '',
+ madalwidth: 520,
+ card: null,
+ searchloading: false,
+ actionloading: false,
+ columnsloading: false,
baseconfig: {
type: 'system',
search: [{
@@ -83,46 +93,49 @@
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName1',
- Hide: false,
- IsSort: true,
+ Hide: 'false',
+ IsSort: 'true',
Width: 120
}, {
id: 1,
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName2',
- Hide: false,
- IsSort: true,
+ Hide: 'false',
+ IsSort: 'true',
Width: 120
}, {
id: 2,
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName3',
- Hide: false,
- IsSort: true,
+ Hide: 'false',
+ IsSort: 'true',
Width: 120
}, {
id: 3,
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName4',
- Hide: false,
- IsSort: true,
+ Hide: 'false',
+ IsSort: 'true',
Width: 120
}]
}
}
- handlesearchList = (searchlist) => {
+ handleList = (list) => {
+ console.log(list)
let config = this.state.config
- config.search = searchlist
- this.setState({config})
+ this.setState({config: {...config, ...list}})
}
handleSearch = (card) => {
this.setState({
visible: true,
+ formtemp: 'search',
+ madalwidth: 650,
+ card: card,
formlist: [
{
type: 'text',
@@ -164,20 +177,191 @@
})
}
- handleactionList = (actionlist) => {
- let config = this.state.config
- config.action = actionlist
- this.setState({config})
+ handleAction = (card) => {
+ this.setState({
+ visible: true,
+ formtemp: 'action',
+ madalwidth: 520,
+ card: card,
+ formlist: [
+ {
+ type: 'text',
+ key: 'label',
+ label: this.state.dict['header.form.name'],
+ initVal: card.label,
+ required: true,
+ readonly: false
+ },
+ {
+ type: 'select',
+ key: 'Ot',
+ label: this.state.dict['header.form.isRequired'],
+ initVal: card.Ot,
+ required: true,
+ options: [{
+ MenuID: 'notRequired',
+ text: this.state.dict['header.form.notRequired']
+ }, {
+ MenuID: 'requiredSgl',
+ text: this.state.dict['header.form.requiredSgl']
+ }, {
+ MenuID: 'required',
+ text: this.state.dict['header.form.required']
+ }, {
+ MenuID: 'requiredOnce',
+ text: this.state.dict['header.form.requiredOnce']
+ }]
+ },
+ {
+ type: 'select',
+ key: 'OpenType',
+ label: this.state.dict['header.form.openType'],
+ initVal: card.OpenType,
+ required: true,
+ options: [{
+ MenuID: 'pop',
+ text: this.state.dict['header.form.pop']
+ }, {
+ MenuID: 'prompt',
+ text: this.state.dict['header.form.prompt']
+ }, {
+ MenuID: 'exec',
+ text: this.state.dict['header.form.exec']
+ }, {
+ MenuID: 'tab',
+ text: this.state.dict['header.form.tab']
+ }, {
+ MenuID: 'newpage',
+ text: this.state.dict['header.form.newpage']
+ }, {
+ MenuID: 'blank',
+ text: this.state.dict['header.form.blank']
+ }]
+ },
+ {
+ type: 'select',
+ key: 'icon',
+ label: this.state.dict['header.form.icon'],
+ initVal: card.icon,
+ required: false,
+ options: []
+ },
+ {
+ type: 'select',
+ key: 'class',
+ label: this.state.dict['header.form.class'],
+ initVal: card.class,
+ required: true,
+ options: []
+ }
+ ]
+ })
}
- handleAction = (card) => {
- console.log(card)
+ handleColumn = (card) => {
+ this.setState({
+ visible: true,
+ formtemp: 'columns',
+ madalwidth: 520,
+ card: card,
+ formlist: [
+ {
+ type: 'text',
+ key: 'label',
+ label: this.state.dict['header.form.name'],
+ initVal: card.label,
+ required: true
+ },
+ {
+ type: 'select',
+ key: 'Align',
+ label: this.state.dict['header.form.align'],
+ initVal: card.Align,
+ required: true,
+ options: [{
+ MenuID: 'left',
+ text: this.state.dict['header.form.alignLeft']
+ }, {
+ MenuID: 'right',
+ text: this.state.dict['header.form.alignRight']
+ }, {
+ MenuID: 'center',
+ text: this.state.dict['header.form.alignCenter']
+ }]
+ },
+ {
+ type: 'select',
+ key: 'Hide',
+ label: this.state.dict['header.form.Hide'],
+ initVal: card.Hide,
+ required: true,
+ options: [{
+ MenuID: 'true',
+ text: this.state.dict['header.form.true']
+ }, {
+ MenuID: 'false',
+ text: this.state.dict['header.form.false']
+ }]
+ },
+ {
+ type: 'select',
+ key: 'IsSort',
+ label: this.state.dict['header.form.IsSort'],
+ initVal: card.IsSort,
+ required: true,
+ options: [{
+ MenuID: 'true',
+ text: this.state.dict['header.form.true']
+ }, {
+ MenuID: 'false',
+ text: this.state.dict['header.form.false']
+ }]
+ },
+ {
+ type: 'spinner',
+ key: 'Width',
+ label: this.state.dict['header.form.columnWidth'],
+ initVal: card.Width,
+ required: true
+ }
+ ]
+ })
}
handleSubmit = () => {
- this.formRef.handleConfirm().then(values => {
- console.log(values)
+ this.formRef.handleConfirm().then(res => {
+ let _config = this.state.config
+ _config[res.type] = _config[res.type].map(item => {
+ if (item.uuid === res.values.uuid) {
+ return res.values
+ } else {
+ return item
+ }
+ })
+ this.setState({
+ config: _config,
+ [res.type + 'loading']: true,
+ visible: false
+ })
+ this.resetFrom()
})
+ }
+
+ deleteElement = () => {
+ let _config = this.state.config
+ _config[this.state.formtemp] = _config[this.state.formtemp].filter(item => {
+ if (item.uuid === this.state.card.uuid) {
+ return false
+ } else {
+ return true
+ }
+ })
+ this.setState({
+ config: _config,
+ [this.state.formtemp + 'loading']: true,
+ visible: false
+ })
+ this.resetFrom()
}
handleCancel = () => {
@@ -190,9 +374,26 @@
resetFrom = () => {
setTimeout(() => {
this.setState({
+ formtemp: '',
+ searchloading: false,
+ actionloading: false,
+ columnsloading: false,
formlist: null
})
}, 300)
+ }
+
+ dragstart = (e) => {
+ console.log(e.target.id)
+ }
+
+ dragover = (e) => {
+ e.preventDefault()
+ }
+
+ drop = (e) => {
+ e.preventDefault()
+ console.log(13)
}
UNSAFE_componentWillMount () {
@@ -207,16 +408,35 @@
}
}
- UNSAFE_componentWillReceiveProps (nextProps) {
- if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
-
- }
- }
-
render () {
return (
<div className="common-table-board">
- <div className="tools"></div>
+ <div className="tools">
+ <Tabs defaultActiveKey="1">
+ <TabPane tab="鎼滅储" key="1">
+ <ul className="search-element">
+ <li>
+ <div draggable="true" id="search-text" onDragStart={(e) => {this.dragstart(e)}}>鏂囨湰妗�</div>
+ </li>
+ <li>
+ <div draggable="true" id="search-select" onDragStart={this.dragstart}>涓嬫媺妗�</div>
+ </li>
+ <li>
+ <div draggable="true" id="search-dateday" onDragStart={this.dragstart}>鏃堕棿妗嗭紙澶╋級</div>
+ </li>
+ <li>
+ <div draggable="true" id="search-datetime" onDragStart={this.dragstart}>鏃堕棿妗嗭紙绉掞級</div>
+ </li>
+ </ul>
+ </TabPane>
+ <TabPane tab="鎸夐挳" key="2">
+ 鎸夐挳
+ </TabPane>
+ <TabPane tab="鏄剧ず鍒�" key="3">
+ 鍒�
+ </TabPane>
+ </Tabs>
+ </div>
<div className="setting">
<Card title="椤甸潰閰嶇疆" bordered={false} extra={
<div>
@@ -224,23 +444,33 @@
<Button>{this.state.dict['header.cancel']}</Button>
</div>
} style={{ width: '100%' }}>
- <div className="search-list">
- {this.state.config.search && <DndProvider backend={HTML5Backend}>
+ <div className="search-list" onDragOver={this.dragover} onDrop={this.drop}>
+ {this.state.config.search && !this.state.searchloading && <DndProvider backend={HTML5Backend}>
<DragElement
list={this.state.config.search}
type="search"
- handleList={this.handlesearchList}
+ handleList={this.handleList}
handleMenu={this.handleSearch}
/>
</DndProvider>}
</div>
<div className="action-list">
- {this.state.config.action && <DndProvider backend={HTML5Backend}>
+ {this.state.config.action && !this.state.actionloading && <DndProvider backend={HTML5Backend}>
<DragElement
list={this.state.config.action}
type="action"
- handleList={this.handleactionList}
+ handleList={this.handleList}
handleMenu={this.handleAction}
+ />
+ </DndProvider>}
+ </div>
+ <div className="column-list">
+ {this.state.config.columns && !this.state.columnsloading && <DndProvider backend={HTML5Backend}>
+ <DragElement
+ list={this.state.config.columns}
+ type="columns"
+ handleList={this.handleList}
+ handleMenu={this.handleColumn}
/>
</DndProvider>}
</div>
@@ -248,22 +478,36 @@
</div>
<Modal
title={this.state.dict['header.edit']}
- okText={this.state.dict['header.confirm']}
- cancelText={this.state.dict['header.cancel']}
visible={this.state.visible}
- onOk={this.handleSubmit}
- confirmLoading={this.state.confirmLoading}
+ width={this.state.madalwidth}
onCancel={this.handleCancel}
- className="commontable-edit-modal"
+ footer={null}
+ destroyOnClose
>
- {this.state.formlist && <MenuForm
+ {this.state.formlist && this.state.formtemp === 'search' && <SearchForm
dict={this.state.dict}
formlist={this.state.formlist}
wrappedComponentRef={(inst) => this.formRef = inst}
/>}
+ {this.state.formlist && this.state.formtemp === 'action' && <ActionForm
+ dict={this.state.dict}
+ card={this.state.card}
+ formlist={this.state.formlist}
+ wrappedComponentRef={(inst) => this.formRef = inst}
+ />}
+ {this.state.formlist && this.state.formtemp === 'columns' && <ColumnForm
+ dict={this.state.dict}
+ card={this.state.card}
+ formlist={this.state.formlist}
+ wrappedComponentRef={(inst) => this.formRef = inst}
+ />}
+ <div className="edit-modal-footer">
+ <Button type="danger" onClick={this.deleteElement}>{this.state.dict['header.delete']}</Button>
+ <Button onClick={this.handleCancel}>{this.state.dict['header.cancel']}</Button>
+ <Button type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button>
+ </div>
</Modal>
</div>
-
)
}
}
--
Gitblit v1.8.0