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/locales/en-US/header.js | 3
src/components/sidemenu/comtableconfig/dragelement/index.jsx | 75 ++++++
src/components/sidemenu/comtableconfig/index.scss | 12
src/components/sidemenu/menuelement/itemtypes.js | 0
src/components/sidemenu/comtableconfig/dragelement/source.jsx | 13 +
src/components/sidemenu/comtableconfig/searchform/index.scss | 8
src/components/sidemenu/editsecmenu/index.jsx | 3
src/components/sidemenu/editthdmenu/index.jsx | 8
src/components/sidemenu/comtableconfig/searchform/index.jsx | 160 ++++++++-----
src/locales/zh-CN/header.js | 12 +
src/components/sidemenu/comtableconfig/editable/index.jsx | 31 +-
src/components/sidemenu/menuelement/card.jsx | 0
src/components/sidemenu/comtableconfig/index.jsx | 359 +++++++++++++++++++++++------
src/components/sidemenu/menuelement/index.scss | 0
src/components/sidemenu/comtableconfig/dragelement/card.jsx | 11
src/components/sidemenu/menuelement/index.jsx | 0
src/components/sidemenu/comtableconfig/dragelement/index.scss | 9
17 files changed, 542 insertions(+), 162 deletions(-)
diff --git a/src/components/sidemenu/comtableconfig/dragelement/card.jsx b/src/components/sidemenu/comtableconfig/dragelement/card.jsx
index a155017..9cc00e2 100644
--- a/src/components/sidemenu/comtableconfig/dragelement/card.jsx
+++ b/src/components/sidemenu/comtableconfig/dragelement/card.jsx
@@ -5,7 +5,7 @@
import ItemTypes from './itemtypes'
import './index.scss'
-const Card = ({ id, type, card, moveCard, findCard, editCard }) => {
+const Card = ({ id, type, card, moveCard, findCard, editCard, hasDrop }) => {
const originalIndex = findCard(id).index
const [{ isDragging }, drag] = useDrag({
item: { type: ItemTypes[type], id, originalIndex },
@@ -15,8 +15,14 @@
})
const [, drop] = useDrop({
accept: ItemTypes[type],
- canDrop: () => false,
+ canDrop: () => true,
+ drop: (item) => {
+ if (!item.hasOwnProperty('originalIndex')) {
+ hasDrop(card)
+ }
+ },
hover({ id: draggedId }) {
+ if (!draggedId) return
if (draggedId !== id) {
const { index: overIndex } = findCard(id)
moveCard(draggedId, overIndex)
@@ -28,7 +34,6 @@
const edit = () => {
editCard(id)
}
-
return (
<div className="page-card" style={type === 'columns' ? { flex: card.Width, opacity: opacity} : { opacity: opacity}}>
<div ref={node => drag(drop(node))}>
diff --git a/src/components/sidemenu/comtableconfig/dragelement/index.jsx b/src/components/sidemenu/comtableconfig/dragelement/index.jsx
index 7b0e33a..0201b40 100644
--- a/src/components/sidemenu/comtableconfig/dragelement/index.jsx
+++ b/src/components/sidemenu/comtableconfig/dragelement/index.jsx
@@ -2,11 +2,13 @@
import { useDrop } from 'react-dnd'
import update from 'immutability-helper'
import { Col } from 'antd'
+import Utils from '@/utils/utils.js'
import Card from './card'
import ItemTypes from './itemtypes'
import './index.scss'
const Container = ({list, type, handleList, handleMenu }) => {
+ let target = null
const [cards, setCards] = useState(list)
const moveCard = (id, atIndex) => {
const { card, index } = findCard(id)
@@ -27,7 +29,75 @@
const { card } = findCard(id)
handleMenu(card)
}
- const [, drop] = useDrop({ accept: ItemTypes[type] })
+
+ const hasDrop = (item) => {
+ target = item
+ }
+
+ const [, drop] = useDrop({
+ accept: ItemTypes[type],
+ drop(item) {
+ if (item.hasOwnProperty('originalIndex')) {
+ return
+ }
+ let newcard = {}
+ if (item.type === 'search') {
+ newcard.uuid = Utils.getuuid()
+ newcard.label = 'fieldName'
+ newcard.field = 'field'
+ newcard.initval = ''
+ newcard.type = item.subType
+ if (item.subType === 'select') {
+ newcard.resourceType = 0
+ newcard.options = []
+ newcard.dataSource = ''
+ }
+ } else if (item.type === 'action') {
+ newcard.uuid = Utils.getuuid()
+ newcard.label = 'button'
+ newcard.func = ''
+ newcard.Ot = 'notRequired'
+ newcard.OpenType = item.subType
+ newcard.icon = 'plus'
+ newcard.class = 'green'
+ } else if (item.type === 'columns') {
+ newcard.uuid = Utils.getuuid()
+ newcard.Align = 'left'
+ newcard.label = 'fieldName'
+ newcard.field = 'field'
+ newcard.Hide = 'false'
+ newcard.IsSort = item.subType
+ newcard.Width = 120
+ }
+
+ let indexes = cards.map(car => {return car.id})
+ let newid = 0
+ while (indexes.includes(newid)) {
+ newid++
+ }
+ newcard.id = newid
+
+ let targetId = indexes.length > 0 ? indexes[indexes.length - 1] : 0
+ if (target) {
+ targetId = target.id
+ }
+
+ const { index: overIndex } = findCard(`${targetId}`)
+ let targetIndex = overIndex
+ if (!target) {
+ targetIndex++
+ }
+ if (targetIndex < 0) {
+ targetIndex = 0
+ }
+
+ const _cards = update(cards, { $splice: [[targetIndex, 0, newcard]] })
+ setCards(_cards)
+ handleList({[type]: _cards})
+ target = null
+ }
+ })
+ // const [, drop] = useDrop({ accept: ItemTypes[type] })
return (
<div ref={drop} className="ant-row" style={type === 'columns' ? {display: 'flex'} : {}}>
{type === 'action' && cards.map(card => (
@@ -39,6 +109,7 @@
moveCard={moveCard}
editCard={editCard}
findCard={findCard}
+ hasDrop={hasDrop}
/>
))}
{type === 'search' && cards.map(card => (
@@ -51,6 +122,7 @@
moveCard={moveCard}
editCard={editCard}
findCard={findCard}
+ hasDrop={hasDrop}
/>
</Col>
))}
@@ -67,6 +139,7 @@
moveCard={moveCard}
editCard={editCard}
findCard={findCard}
+ hasDrop={hasDrop}
/>
))}
</div>
diff --git a/src/components/sidemenu/comtableconfig/dragelement/index.scss b/src/components/sidemenu/comtableconfig/dragelement/index.scss
index e69de29..a65cdc0 100644
--- a/src/components/sidemenu/comtableconfig/dragelement/index.scss
+++ b/src/components/sidemenu/comtableconfig/dragelement/index.scss
@@ -0,0 +1,9 @@
+.common-source-item {
+ display: block;
+ // border: 1px dashed gray;
+ box-shadow: 0px 0px 2px #bcbcbc;
+ padding: 0.5rem 1rem;
+ background-color: white;
+ margin: 0 10px 10px;
+ cursor: move;
+}
\ No newline at end of file
diff --git a/src/components/sidemenu/comtableconfig/dragelement/source.jsx b/src/components/sidemenu/comtableconfig/dragelement/source.jsx
new file mode 100644
index 0000000..ab22158
--- /dev/null
+++ b/src/components/sidemenu/comtableconfig/dragelement/source.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { useDrag } from 'react-dnd'
+import './index.scss'
+
+const SourceElement = ({content}) => {
+ const [, drag] = useDrag({ item: content })
+ return (
+ <div ref={drag} className="common-source-item">
+ {content.label}
+ </div>
+ )
+}
+export default SourceElement
\ No newline at end of file
diff --git a/src/components/sidemenu/comtableconfig/editable/index.jsx b/src/components/sidemenu/comtableconfig/editable/index.jsx
index dabea8c..93ac53f 100644
--- a/src/components/sidemenu/comtableconfig/editable/index.jsx
+++ b/src/components/sidemenu/comtableconfig/editable/index.jsx
@@ -1,5 +1,5 @@
import React, {Component} from 'react'
-import { Table, Input, Button, Popconfirm, Form } from 'antd'
+import { Table, Input, Button, Popconfirm, Form, Icon } from 'antd'
import Utils from '@/utils/utils.js'
import './index.scss'
@@ -94,30 +94,31 @@
{
title: 'ID',
dataIndex: 'ID',
- width: '35%',
+ width: '40%',
editable: true
},
{
title: 'Value',
dataIndex: 'value',
- width: '35%',
+ width: '40%',
editable: true
},
{
- title: 'operation',
+ title: '鎿嶄綔',
+ align: 'center',
dataIndex: 'operation',
render: (text, record) =>
this.state.dataSource.length >= 1 ? (
<Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
- <span style={{color: '#1890ff', cursor: 'pointer'}}>Delete</span>
+ <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
</Popconfirm>
) : null,
}
]
this.state = {
- dataSource: [],
- count: 0
+ dataSource: props.data,
+ count: props.data.length
}
}
@@ -150,14 +151,14 @@
this.setState({ dataSource: newData })
}
- UNSAFE_componentWillMount () {
- if (this.props.data) {
- this.setState({
- dataSource: this.props.data,
- count: this.props.data.length
- })
- }
- }
+ // UNSAFE_componentWillMount () {
+ // if (this.props.data) {
+ // this.setState({
+ // dataSource: this.props.data,
+ // count: this.props.data.length
+ // })
+ // }
+ // }
render() {
const { dataSource } = this.state
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
diff --git a/src/components/sidemenu/comtableconfig/index.scss b/src/components/sidemenu/comtableconfig/index.scss
index 49d9cf1..7137647 100644
--- a/src/components/sidemenu/comtableconfig/index.scss
+++ b/src/components/sidemenu/comtableconfig/index.scss
@@ -57,6 +57,9 @@
padding: 1px 24px 20px;
min-height: 87px;
border-bottom: 1px solid #d9d9d9;
+ > .ant-row {
+ min-height: 65px;
+ }
.ant-row .ant-col-6 {
padding: 0 12px!important;
}
@@ -125,10 +128,16 @@
display: inline-block;
}
}
+ .ant-calendar-picker {
+ min-width: 100px!important;
+ }
}
.action-list {
padding: 0px 20px 15px;
min-height: 72px;
+ > .ant-row {
+ min-height: 67px;
+ }
.page-card {
display: inline-block;
margin: 0px 0px 20px 0px;
@@ -161,9 +170,10 @@
}
.column-list {
padding: 0px 20px;
- .ant-row {
+ > .ant-row {
background: #fafafa;
border-radius: 4px;
+ min-height: 47px;
border: 1px solid #e8e8e8;
.page-card {
position: relative;
diff --git a/src/components/sidemenu/comtableconfig/searchform/index.jsx b/src/components/sidemenu/comtableconfig/searchform/index.jsx
index 319edf9..3f03957 100644
--- a/src/components/sidemenu/comtableconfig/searchform/index.jsx
+++ b/src/components/sidemenu/comtableconfig/searchform/index.jsx
@@ -24,23 +24,48 @@
openTypeChange = (key, value) => {
if (key === 'type') {
+ let resourceType = this.state.formlist.filter(cell => cell.key === 'resourceType')[0].initVal
+ let _options = ['label', 'field', 'initval', 'type']
+ if (value === 'select' && resourceType === '0') {
+ _options = [..._options, ...['resourceType', 'setAll', 'options']]
+ } else if (value === 'select' && resourceType === '1') {
+ _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']]
+ }
+
this.setState({
- inputType: value,
- selectType: 0
+ formlist: this.state.formlist.map(form => {
+ form.hidden = !_options.includes(form.key)
+ return form
+ })
})
}
}
- onChange = e => {
- this.setState({
- selectType: e.target.value
- })
+ onChange = (e, key) => {
+ let value = e.target.value
+ if (key === 'resourceType') {
+ let _options = ['label', 'field', 'initval', 'type', 'resourceType', 'setAll']
+ if (value === '0') {
+ _options = [..._options, ...['options']]
+ } else if (value === '1') {
+ _options = [..._options, ...['dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']]
+ }
+
+ this.setState({
+ formlist: this.state.formlist.map(form => {
+ form.hidden = !_options.includes(form.key)
+ return form
+ })
+ })
+ }
}
getFields() {
const { getFieldDecorator } = this.props.form
const fields = []
- this.props.formlist.forEach((item, index) => {
+ this.state.formlist.forEach((item, index) => {
+ if (item.hidden) return
+
if (item.type === 'text') { // 鏂囨湰鎼滅储
let placeholder = ''
if (item.key === 'initval' && this.state.inputType === 'dateday') {
@@ -49,7 +74,7 @@
placeholder = '渚嬶細' + moment().format('YYYY-MM-DD HH:mm:ss')
}
fields.push(
- <Col span={24} key={index}>
+ <Col span={12} key={index}>
<Form.Item label={item.label}>
{getFieldDecorator(item.key, {
initialValue: item.initVal || '',
@@ -65,7 +90,7 @@
)
} else if (item.type === 'select') { // 涓嬫媺鎼滅储
fields.push(
- <Col span={24} key={index}>
+ <Col span={12} key={index}>
<Form.Item label={item.label}>
{getFieldDecorator(item.key, {
initialValue: item.initVal || '',
@@ -92,35 +117,47 @@
</Form.Item>
</Col>
)
- if (item.key === 'type' && this.state.inputType === 'select') {
- fields.push(
- <Col span={24} key={'radio' + index}>
- <Form.Item label={'閫夐」'}>
- <Radio.Group onChange={this.onChange} value={this.state.selectType}>
- <Radio value={0}>鑷畾涔�</Radio>
- <Radio value={1}>鏁版嵁婧�</Radio>
- </Radio.Group>
- </Form.Item>
- </Col>
- )
- if (this.state.selectType === 0) {
- fields.push(
- <Col span={18} offset={6} key={'table' + index}>
- <EditTable data={this.state.card.options} ref="editTable"/>
- </Col>
- )
- } else {
- fields.push(
- <Col span={18} offset={6} key={'table' + index}>
- <Form.Item className="text-area">
- {getFieldDecorator('datasource', {
- initialValue: ''
- })(<TextArea rows={4} />)}
- </Form.Item>
- </Col>
- )
- }
- }
+ } else if (item.type === 'radio') {
+ fields.push(
+ <Col span={12} key={index}>
+ <Form.Item label={item.label}>
+ {getFieldDecorator(item.key, { initialValue: item.initVal })(
+ <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}>
+ {
+ item.options.map(option => {
+ return (
+ <Radio key={option.MenuID} value={option.MenuID}>{option.text}</Radio>
+ )
+ })
+ }
+ </Radio.Group>,
+ )}
+ </Form.Item>
+ </Col>
+ )
+
+ } else if (item.type === 'textarea') {
+ fields.push(
+ <Col span={20} offset={4} key={index}>
+ <Form.Item className="text-area">
+ {getFieldDecorator(item.key, {
+ initialValue: item.initVal,
+ rules: [
+ {
+ required: !!item.required,
+ message: this.props.dict['form.required.input'] + item.label + '!'
+ }
+ ]
+ })(<TextArea rows={4} />)}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'options') {
+ fields.push(
+ <Col span={20} offset={4} key={index}>
+ <EditTable data={item.initVal} ref="editTable"/>
+ </Col>
+ )
}
})
return fields
@@ -131,16 +168,15 @@
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
- if (this.state.inputType === 'select') {
- values.resourceType = this.state.selectType
- if (this.state.selectType === 0) {
- values.options = this.refs.editTable.state.dataSource
- } else {
- values.options = []
- }
+ if (values.type === 'select' && values.resourceType === '0') {
+ values.options = this.refs.editTable.state.dataSource
+ values.dataSource = ''
+ } else if (values.type === 'select' && values.resourceType === '1') {
+ values.options = []
}
- values.id = this.state.card.id
- values.uuid = this.state.card.uuid
+
+ values.id = this.props.card.id
+ values.uuid = this.props.card.uuid
resolve({
type: 'search',
values
@@ -154,19 +190,21 @@
resetForm = (formlist) => {
if (!formlist) return
- let _item = formlist.filter(cell => cell.key === 'type')[0]
- if (_item.initVal === 'select') {
- this.setState({
- inputType: 'select',
- card: _item.card,
- selectType: _item.card.resourceType
- })
- } else {
- this.setState({
- inputType: _item.card.type,
- card: _item.card
- })
+ let type = formlist.filter(cell => cell.key === 'type')[0].initVal
+ let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal
+ let _options = ['label', 'field', 'initval', 'type']
+ if (type === 'select' && resourceType === '0') {
+ _options = [..._options, ...['resourceType', 'setAll', 'options']]
+ } else if (type === 'select' && resourceType === '1') {
+ _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']]
}
+
+ this.setState({
+ formlist: formlist.map(form => {
+ form.hidden = !_options.includes(form.key)
+ return form
+ })
+ })
}
UNSAFE_componentWillMount () {
@@ -177,11 +215,11 @@
const formItemLayout = {
labelCol: {
xs: { span: 24 },
- sm: { span: 6 }
+ sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
- sm: { span: 18 }
+ sm: { span: 16 }
}
}
return (
diff --git a/src/components/sidemenu/comtableconfig/searchform/index.scss b/src/components/sidemenu/comtableconfig/searchform/index.scss
index 6c6c036..3ba26d4 100644
--- a/src/components/sidemenu/comtableconfig/searchform/index.scss
+++ b/src/components/sidemenu/comtableconfig/searchform/index.scss
@@ -1,12 +1,16 @@
.ant-advanced-search-form.commontable-search-form {
- .ant-col-offset-6 {
+ min-height: 180px;
+ .ant-col-offset-4 {
padding-left: 6px!important;
padding-bottom: 20px;
}
- .text-area {
+ .ant-form-item.text-area {
margin-bottom: 0px;
.ant-form-item-control-wrapper {
width: 100%;
}
}
+ .ant-form-item {
+ margin-bottom: 15px;
+ }
}
\ No newline at end of file
diff --git a/src/components/sidemenu/editsecmenu/index.jsx b/src/components/sidemenu/editsecmenu/index.jsx
index 8fb5671..213b161 100644
--- a/src/components/sidemenu/editsecmenu/index.jsx
+++ b/src/components/sidemenu/editsecmenu/index.jsx
@@ -4,10 +4,9 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin, Icon } from 'antd'
-// import { notification, Modal, Button, Icon } from 'antd'
import TransferForm from '@/components/transferform'
import Utils from '@/utils/utils.js'
-import DragElement from '../dragelement'
+import DragElement from '../menuelement'
import MenuForm from '../menuform'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
diff --git a/src/components/sidemenu/editthdmenu/index.jsx b/src/components/sidemenu/editthdmenu/index.jsx
index dbc4e52..2b7f5cf 100644
--- a/src/components/sidemenu/editthdmenu/index.jsx
+++ b/src/components/sidemenu/editthdmenu/index.jsx
@@ -7,7 +7,7 @@
import Preview from '@/components/preview'
import TransferForm from '@/components/transferform'
import Utils from '@/utils/utils.js'
-import DragElement from '../dragelement'
+import DragElement from '../menuelement'
import MenuForm from '../menuform'
import ComTableConfig from '../comtableconfig'
import Api from '@/api'
@@ -576,6 +576,10 @@
this.setState({tabview: ''})
}
+ handleConfig = () => {
+ this.setState({tabview: ''})
+ }
+
UNSAFE_componentWillMount () {
previewList = null
this.getUsedTemplate()
@@ -658,7 +662,7 @@
</div>
</div>}
{this.state.tabview === 'CommonTable' &&
- <ComTableConfig config={this.state.menuConfig} />
+ <ComTableConfig config={this.state.menuConfig} handleConfig={this.handleConfig} />
}
{/* 鍥剧墖棰勮 */}
<Preview cancel={this.cancelPrePicture} preview={this.state.preview}/>
diff --git a/src/components/sidemenu/dragelement/card.jsx b/src/components/sidemenu/menuelement/card.jsx
similarity index 100%
rename from src/components/sidemenu/dragelement/card.jsx
rename to src/components/sidemenu/menuelement/card.jsx
diff --git a/src/components/sidemenu/dragelement/index.jsx b/src/components/sidemenu/menuelement/index.jsx
similarity index 100%
rename from src/components/sidemenu/dragelement/index.jsx
rename to src/components/sidemenu/menuelement/index.jsx
diff --git a/src/components/sidemenu/dragelement/index.scss b/src/components/sidemenu/menuelement/index.scss
similarity index 100%
rename from src/components/sidemenu/dragelement/index.scss
rename to src/components/sidemenu/menuelement/index.scss
diff --git a/src/components/sidemenu/dragelement/itemtypes.js b/src/components/sidemenu/menuelement/itemtypes.js
similarity index 100%
rename from src/components/sidemenu/dragelement/itemtypes.js
rename to src/components/sidemenu/menuelement/itemtypes.js
diff --git a/src/locales/en-US/header.js b/src/locales/en-US/header.js
index ca8ca7c..81842ef 100644
--- a/src/locales/en-US/header.js
+++ b/src/locales/en-US/header.js
@@ -41,6 +41,8 @@
'header.menu.thawmenu.itemUnit': 'item',
'header.menu.thawmenu.itemsUnit': 'items',
'header.form.name': 'Name',
+ 'header.form.field': '瀛楁',
+ 'header.form.func': '瀛樺偍杩囩▼',
'header.form.type': 'Type',
'header.form.text': 'Text',
'header.form.select': 'Select',
@@ -70,5 +72,6 @@
'header.form.columnWidth': '鍒楀',
'header.form.true': '鏄�',
'header.form.false': '鍚�',
+ 'header.form.setAll': '璁剧疆鍏ㄩ儴椤�',
'form.required.input': 'Please enter the '
}
\ No newline at end of file
diff --git a/src/locales/zh-CN/header.js b/src/locales/zh-CN/header.js
index 54a0362..2a4f8e6 100644
--- a/src/locales/zh-CN/header.js
+++ b/src/locales/zh-CN/header.js
@@ -41,6 +41,8 @@
'header.menu.thawmenu.itemUnit': '椤�',
'header.menu.thawmenu.itemsUnit': '椤�',
'header.form.name': '鍚嶇О',
+ 'header.form.field': '瀛楁',
+ 'header.form.func': '瀛樺偍杩囩▼',
'header.form.type': '绫诲瀷',
'header.form.text': '鏂囨湰',
'header.form.select': '閫夋嫨',
@@ -70,6 +72,16 @@
'header.form.columnWidth': '鍒楀',
'header.form.true': '鏄�',
'header.form.false': '鍚�',
+ 'header.form.setAll': '璁剧疆鍏ㄩ儴',
+ 'header.form.resourceType': '閫夐」鏉ユ簮',
+ 'header.form.custom': '鑷畾涔�',
+ 'header.form.datasource': '鏁版嵁婧�',
+ 'header.form.valueField': '鍊悸峰瓧娈�',
+ 'header.form.valueText': '鏂囨湰路瀛楁',
+ 'header.form.orderBy': '鎺掑簭路瀛楁',
+ 'header.form.orderType': '鎺掑簭鏂瑰紡',
+ 'header.form.asc': '姝ｅ簭',
+ 'header.form.desc': '鍊掑簭',
'form.required.input': '璇疯緭鍏�'
}
\ No newline at end of file
--
Gitblit v1.8.0