From 8b9effb98612ee8a00d76d639a5733d12e9ecce6 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 13 十一月 2019 22:09:35 +0800
Subject: [PATCH] 2019-11-13
---
src/components/sidemenu/comtableconfig/index.jsx | 359 +++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 284 insertions(+), 75 deletions(-)
diff --git a/src/components/sidemenu/comtableconfig/index.jsx b/src/components/sidemenu/comtableconfig/index.jsx
index 41e7b92..3fb2036 100644
--- a/src/components/sidemenu/comtableconfig/index.jsx
+++ b/src/components/sidemenu/comtableconfig/index.jsx
@@ -5,6 +5,7 @@
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Tabs } from 'antd'
import DragElement from './dragelement'
+import SourceElement from './dragelement/source'
import SearchForm from './searchform'
import ActionForm from './actionform'
import ColumnForm from './columnform'
@@ -14,14 +15,16 @@
import './index.scss'
const {TabPane} = Tabs
+const HeaderDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS
class ComTableConfig extends Component {
static propTpyes = {
- menuConfig: PropTypes.any
+ menuConfig: PropTypes.any,
+ handleConfig: PropTypes.func
}
state = {
- dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
+ dict: HeaderDict,
config: null,
visible: false,
formlist: null,
@@ -36,29 +39,54 @@
search: [{
id: 0,
uuid: Utils.getuuid(),
- label: 'fieldName1',
+ label: 'text',
+ field: 'field',
initval: '',
- type: 'text'
+ type: 'text',
+ resourceType: '0',
+ setAll: 'false',
+ options: [],
+ dataSource: '',
+ valueField: '',
+ valueText: '',
+ orderBy: '',
+ orderType: 'asc'
}, {
id: 1,
uuid: Utils.getuuid(),
- label: 'fieldName2',
+ label: 'select',
+ field: 'field',
initval: '',
type: 'select',
- resourceType: 0,
+ resourceType: '0',
+ setAll: 'false',
options: [],
- dataSource: ''
+ dataSource: '',
+ valueField: '',
+ valueText: '',
+ orderBy: '',
+ orderType: 'asc'
}, {
id: 2,
uuid: Utils.getuuid(),
- label: 'fieldName3',
+ label: 'date',
+ field: 'field',
initval: '',
- type: 'dateday'
+ type: 'dateday',
+ resourceType: '0',
+ setAll: 'false',
+ options: [],
+ dataSource: '',
+ valueField: '',
+ valueText: '',
+ orderBy: '',
+ orderType: 'asc'
}],
action: [{
id: 0,
uuid: Utils.getuuid(),
label: 'add',
+ func: '',
Ot: 'notRequired',
OpenType: 'pop',
icon: 'plus',
@@ -67,6 +95,7 @@
id: 1,
uuid: Utils.getuuid(),
label: 'update',
+ func: '',
Ot: 'requiredSgl',
OpenType: 'pop',
icon: 'form',
@@ -75,6 +104,7 @@
id: 2,
uuid: Utils.getuuid(),
label: 'delete',
+ func: '',
Ot: 'required',
OpenType: 'prompt',
icon: 'delete',
@@ -83,6 +113,7 @@
id: 3,
uuid: Utils.getuuid(),
label: 'freeze',
+ func: '',
Ot: 'requiredOnce',
OpenType: 'exec',
icon: '',
@@ -93,6 +124,7 @@
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName1',
+ field: 'field1',
Hide: 'false',
IsSort: 'true',
Width: 120
@@ -101,6 +133,7 @@
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName2',
+ field: 'field2',
Hide: 'false',
IsSort: 'true',
Width: 120
@@ -109,6 +142,7 @@
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName3',
+ field: 'field3',
Hide: 'false',
IsSort: 'true',
Width: 120
@@ -117,11 +151,90 @@
uuid: Utils.getuuid(),
Align: 'left',
label: 'fieldName4',
+ field: 'field4',
Hide: 'false',
IsSort: 'true',
Width: 120
}]
- }
+ },
+ searchItems: [
+ {
+ type: 'search',
+ label: '鏂囨湰妗�',
+ subType: 'text',
+ url: ''
+ },
+ {
+ type: 'search',
+ label: '涓嬫媺妗�',
+ subType: 'select',
+ url: ''
+ },
+ {
+ type: 'search',
+ label: '鏃堕棿妗嗭紙澶╋級',
+ subType: 'dateday',
+ url: ''
+ },
+ {
+ type: 'search',
+ label: '鏃堕棿妗嗭紙绉掞級',
+ subType: 'datetime',
+ url: ''
+ }
+ ],
+ actionItems: [
+ {
+ type: 'action',
+ label: HeaderDict['header.form.pop'],
+ subType: 'pop',
+ url: ''
+ },
+ {
+ type: 'action',
+ label: HeaderDict['header.form.prompt'],
+ subType: 'prompt',
+ url: ''
+ },
+ {
+ type: 'action',
+ label: HeaderDict['header.form.exec'],
+ subType: 'exec',
+ url: ''
+ },
+ {
+ type: 'action',
+ label: HeaderDict['header.form.tab'],
+ subType: 'tab',
+ url: ''
+ },
+ {
+ type: 'action',
+ label: HeaderDict['header.form.newpage'],
+ subType: 'newpage',
+ url: ''
+ },
+ {
+ type: 'action',
+ label: HeaderDict['header.form.blank'],
+ subType: 'blank',
+ url: ''
+ }
+ ],
+ columnItems: [
+ {
+ type: 'columns',
+ label: '鎺掑簭鍒�',
+ subType: 'true',
+ url: ''
+ },
+ {
+ type: 'columns',
+ label: '闈炴帓搴忓垪',
+ subType: 'false',
+ url: ''
+ }
+ ]
}
handleList = (list) => {
@@ -134,7 +247,7 @@
this.setState({
visible: true,
formtemp: 'search',
- madalwidth: 650,
+ madalwidth: 700,
card: card,
formlist: [
{
@@ -146,12 +259,26 @@
readonly: false
},
{
+ type: 'text',
+ key: 'field',
+ label: this.state.dict['header.form.field'],
+ initVal: card.field,
+ required: true,
+ readonly: false
+ },
+ {
+ type: 'text',
+ key: 'initval',
+ label: this.state.dict['header.form.initval'],
+ initVal: '',
+ required: false
+ },
+ {
type: 'select',
key: 'type',
label: this.state.dict['header.form.type'],
initVal: card.type,
required: true,
- card: card,
options: [{
MenuID: 'text',
text: this.state.dict['header.form.text']
@@ -167,11 +294,83 @@
}]
},
{
+ type: 'radio',
+ key: 'resourceType',
+ label: this.state.dict['header.form.resourceType'],
+ initVal: card.resourceType,
+ options: [{
+ MenuID: '0',
+ text: this.state.dict['header.form.custom']
+ }, {
+ MenuID: '1',
+ text: this.state.dict['header.form.datasource']
+ }]
+ },
+ {
+ type: 'radio',
+ key: 'setAll',
+ label: this.state.dict['header.form.setAll'],
+ initVal: card.setAll,
+ options: [{
+ MenuID: 'true',
+ text: this.state.dict['header.form.true']
+ }, {
+ MenuID: 'false',
+ text: this.state.dict['header.form.false']
+ }]
+ },
+ {
+ type: 'textarea',
+ key: 'dataSource',
+ label: this.state.dict['header.form.datasource'],
+ initVal: card.dataSource,
+ required: true,
+ readonly: false
+ },
+ {
+ type: 'options',
+ key: 'options',
+ label: '',
+ initVal: card.options,
+ required: true,
+ readonly: false
+ },
+ {
type: 'text',
- key: 'initval',
- label: this.state.dict['header.form.initval'],
- initVal: '',
- required: false
+ key: 'valueField',
+ label: this.state.dict['header.form.valueField'],
+ initVal: card.valueField,
+ required: true,
+ readonly: false
+ },
+ {
+ type: 'text',
+ key: 'valueText',
+ label: this.state.dict['header.form.valueText'],
+ initVal: card.valueText,
+ required: true,
+ readonly: false
+ },
+ {
+ type: 'text',
+ key: 'orderBy',
+ label: this.state.dict['header.form.orderBy'],
+ initVal: card.orderBy,
+ required: false,
+ readonly: false
+ },
+ {
+ type: 'select',
+ key: 'orderType',
+ label: this.state.dict['header.form.orderType'],
+ initVal: card.orderType,
+ options: [{
+ MenuID: 'asc',
+ text: this.state.dict['header.form.asc']
+ }, {
+ MenuID: 'desc',
+ text: this.state.dict['header.form.desc']
+ }]
}
]
})
@@ -189,6 +388,14 @@
key: 'label',
label: this.state.dict['header.form.name'],
initVal: card.label,
+ required: true,
+ readonly: false
+ },
+ {
+ type: 'text',
+ key: 'func',
+ label: this.state.dict['header.form.func'],
+ initVal: card.func,
required: true,
readonly: false
},
@@ -271,6 +478,14 @@
label: this.state.dict['header.form.name'],
initVal: card.label,
required: true
+ },
+ {
+ type: 'text',
+ key: 'field',
+ label: this.state.dict['header.form.field'],
+ initVal: card.field,
+ required: true,
+ readonly: false
},
{
type: 'select',
@@ -383,17 +598,12 @@
}, 300)
}
- dragstart = (e) => {
- console.log(e.target.id)
+ submitConfig = () => {
+ this.props.handleConfig()
}
- dragover = (e) => {
- e.preventDefault()
- }
-
- drop = (e) => {
- e.preventDefault()
- console.log(13)
+ cancelConfig = () => {
+ this.props.handleConfig()
}
UNSAFE_componentWillMount () {
@@ -411,71 +621,69 @@
render () {
return (
<div className="common-table-board">
- <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>
- <Button type="primary">{this.state.dict['header.submit']}</Button>
- <Button>{this.state.dict['header.cancel']}</Button>
- </div>
- } style={{ width: '100%' }}>
- <div className="search-list" onDragOver={this.dragover} onDrop={this.drop}>
- {this.state.config.search && !this.state.searchloading && <DndProvider backend={HTML5Backend}>
+ <DndProvider backend={HTML5Backend}>
+ <div className="tools">
+ <Tabs defaultActiveKey="1">
+ <TabPane tab="鎼滅储" key="1">
+ <ul className="search-element">
+ {this.state.searchItems.map((item, index) => {
+ return (<SourceElement key={index} content={item}/>)
+ })}
+ </ul>
+ </TabPane>
+ <TabPane tab="鎸夐挳" key="2">
+ <ul className="search-element">
+ {this.state.actionItems.map((item, index) => {
+ return (<SourceElement key={index} content={item}/>)
+ })}
+ </ul>
+ </TabPane>
+ <TabPane tab="鏄剧ず鍒�" key="3">
+ <ul className="search-element">
+ {this.state.columnItems.map((item, index) => {
+ return (<SourceElement key={index} content={item}/>)
+ })}
+ </ul>
+ </TabPane>
+ </Tabs>
+ </div>
+ <div className="setting">
+ <Card title="椤甸潰閰嶇疆" bordered={false} extra={
+ <div>
+ <Button type="primary" onClick={this.submitConfig}>{this.state.dict['header.submit']}</Button>
+ <Button onClick={this.cancelConfig}>{this.state.dict['header.cancel']}</Button>
+ </div>
+ } style={{ width: '100%' }}>
+ <div className="search-list">
+ {this.state.config.search && !this.state.searchloading &&
<DragElement
list={this.state.config.search}
type="search"
handleList={this.handleList}
handleMenu={this.handleSearch}
- />
- </DndProvider>}
- </div>
- <div className="action-list">
- {this.state.config.action && !this.state.actionloading && <DndProvider backend={HTML5Backend}>
+ />}
+ </div>
+ <div className="action-list">
+ {this.state.config.action && !this.state.actionloading &&
<DragElement
list={this.state.config.action}
type="action"
handleList={this.handleList}
handleMenu={this.handleAction}
- />
- </DndProvider>}
- </div>
- <div className="column-list">
- {this.state.config.columns && !this.state.columnsloading && <DndProvider backend={HTML5Backend}>
+ />}
+ </div>
+ <div className="column-list">
+ {this.state.config.columns && !this.state.columnsloading &&
<DragElement
list={this.state.config.columns}
type="columns"
handleList={this.handleList}
handleMenu={this.handleColumn}
- />
- </DndProvider>}
- </div>
- </Card>
- </div>
+ />}
+ </div>
+ </Card>
+ </div>
+ </DndProvider>
<Modal
title={this.state.dict['header.edit']}
visible={this.state.visible}
@@ -487,6 +695,7 @@
{this.state.formlist && this.state.formtemp === 'search' && <SearchForm
dict={this.state.dict}
formlist={this.state.formlist}
+ card={this.state.card}
wrappedComponentRef={(inst) => this.formRef = inst}
/>}
{this.state.formlist && this.state.formtemp === 'action' && <ActionForm
--
Gitblit v1.8.0