From d3edd6d592db12fbec67e2700d168e07546aed29 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 15 十一月 2019 09:46:00 +0800 Subject: [PATCH] 2019-11-15 --- src/locales/en-US/header.js | 34 + src/components/sidemenu/comtableconfig/dragelement/index.jsx | 57 + src/components/sidemenu/comtableconfig/index.scss | 37 + src/components/sidemenu/comtableconfig/columnform/index.scss | 4 src/components/sidemenu/comtableconfig/menuform/index.scss | 0 src/components/sidemenu/editthdmenu/index.jsx | 528 +++++++++----------- src/components/sidemenu/comtableconfig/searchform/index.jsx | 100 ++- src/locales/zh-CN/header.js | 26 src/components/sidemenu/comtableconfig/editable/index.jsx | 104 +++ src/components/sidemenu/comtableconfig/index.jsx | 328 ++++++++++-- src/components/sidemenu/comtableconfig/dragelement/card.jsx | 14 src/components/sidemenu/comtableconfig/actionform/index.jsx | 170 ++++-- src/components/sidemenu/comtableconfig/menuform/index.jsx | 102 +++ src/components/sidemenu/comtableconfig/actionform/index.scss | 1 src/components/sidemenu/comtableconfig/columnform/index.jsx | 35 + src/components/sidemenu/comtableconfig/dragelement/index.scss | 10 16 files changed, 1,034 insertions(+), 516 deletions(-) diff --git a/src/components/sidemenu/comtableconfig/actionform/index.jsx b/src/components/sidemenu/comtableconfig/actionform/index.jsx index e701bbc..4beb9ba 100644 --- a/src/components/sidemenu/comtableconfig/actionform/index.jsx +++ b/src/components/sidemenu/comtableconfig/actionform/index.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Select, Icon } from 'antd' +import { Form, Row, Col, Input, Select, Icon, Radio } from 'antd' import './index.scss' const btnIcons = [{ @@ -60,16 +60,62 @@ } state = { + formlist: null, + openType: null, + interType: null + } + openTypeChange = (key, value) => { + if (key === 'OpenType') { + let _options = null + if (value === 'newpage') { + _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class'] + } else { + if (this.state.interType === 'outer') { + _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class'] + } else { + _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class'] + } + } + this.setState({ + openType: value, + formlist: this.state.formlist.map(item => { + item.hidden = !_options.includes(item.key) + return item + }) + }) + } + } + + onChange = (e, key) => { + let value = e.target.value + if (key === 'intertype') { + let _options = null + if (value === 'outer') { + _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class'] + } else { + _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class'] + } + this.setState({ + interType: value, + formlist: this.state.formlist.map(item => { + item.hidden = !_options.includes(item.key) + return item + }) + }) + } } getFields() { const { getFieldDecorator } = this.props.form const fields = [] - this.props.formlist.forEach((item, index) => { + console.log(this.state.formlist) + this.state.formlist.forEach((item, index) => { + if (item.hidden) return + if (item.type === 'text') { // 鏂囨湰鎼滅储 fields.push( - <Col span={24} key={index}> + <Col span={12} key={index}> <Form.Item label={item.label}> {getFieldDecorator(item.key, { initialValue: item.initVal || '', @@ -83,9 +129,9 @@ </Form.Item> </Col> ) - } else if (item.type === 'select' && item.key === 'icon') { // 涓嬫媺鎼滅储 + } 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 || '', @@ -99,70 +145,41 @@ <Select showSearch filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} - getPopupContainer={() => document.getElementById('winter')} - > - {btnIcons.map(option => - <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}> - <Icon type={option.MenuID} /> {option.text} - </Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'select' && item.key === 'class') { // 涓嬫媺鎼滅储 - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Select - showSearch - filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} - getPopupContainer={() => document.getElementById('winter')} - > - {btnClasses.map(option => - <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}> - {option.text} - </Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'select') { // 涓嬫媺鎼滅储 - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Select - showSearch - filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onChange={(value) => {this.openTypeChange(item.key, value)}} getPopupContainer={() => document.getElementById('winter')} > {item.options.map(option => <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}> - {option.text} + {item.key === 'icon' && <Icon type={option.MenuID} />} {option.text} </Select.Option> )} </Select> + )} + </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, + rules: [ + { + required: !!item.required, + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <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> @@ -190,6 +207,35 @@ }) } + UNSAFE_componentWillMount () { + let _opentype = this.props.formlist.filter(form => form.key === 'OpenType')[0].initVal + let _intertype = this.props.formlist.filter(form => form.key === 'intertype')[0].initVal + // let _options = ['label', 'intertype', 'interface', 'func', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class'] + let _options = null + if (_opentype === 'newpage') { + _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class'] + } else { + if (_intertype === 'outer') { + _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class'] + } else { + _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class'] + } + } + this.setState({ + openType: _opentype, + interType: _intertype, + formlist: this.props.formlist.map(item => { + if (item.key === 'class') { + item.options = btnClasses + } else if (item.key === 'icon') { + item.options = btnIcons + } + item.hidden = !_options.includes(item.key) + return item + }) + }) + } + render() { const formItemLayout = { labelCol: { diff --git a/src/components/sidemenu/comtableconfig/actionform/index.scss b/src/components/sidemenu/comtableconfig/actionform/index.scss index ae56384..31e0221 100644 --- a/src/components/sidemenu/comtableconfig/actionform/index.scss +++ b/src/components/sidemenu/comtableconfig/actionform/index.scss @@ -1,4 +1,5 @@ .ant-advanced-search-form.commontable-action-form { + min-height: 190px; .ant-form-item { margin-bottom: 15px; } diff --git a/src/components/sidemenu/comtableconfig/columnform/index.jsx b/src/components/sidemenu/comtableconfig/columnform/index.jsx index 1be720f..438c092 100644 --- a/src/components/sidemenu/comtableconfig/columnform/index.jsx +++ b/src/components/sidemenu/comtableconfig/columnform/index.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Select, InputNumber } from 'antd' +import { Form, Row, Col, Input, Select, InputNumber, Radio } from 'antd' import './index.scss' class MainSearch extends Component { @@ -20,7 +20,7 @@ this.props.formlist.forEach((item, index) => { if (item.type === 'text') { // 鏂囨湰鎼滅储 fields.push( - <Col span={24} key={index}> + <Col span={12} key={index}> <Form.Item label={item.label}> {getFieldDecorator(item.key, { initialValue: item.initVal || '', @@ -36,7 +36,7 @@ ) } else if (item.type === 'spinner') { // 鏂囨湰鎼滅储 fields.push( - <Col span={24} key={index}> + <Col span={12} key={index}> <Form.Item label={item.label}> {getFieldDecorator(item.key, { initialValue: item.initVal || '', @@ -52,7 +52,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 || '', @@ -78,6 +78,33 @@ </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, + rules: [ + { + required: !!item.required, + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <Radio.Group> + { + item.options.map(option => { + return ( + <Radio key={option.MenuID} value={option.MenuID}>{option.text}</Radio> + ) + }) + } + </Radio.Group> + )} + </Form.Item> + </Col> + ) + } }) return fields diff --git a/src/components/sidemenu/comtableconfig/columnform/index.scss b/src/components/sidemenu/comtableconfig/columnform/index.scss index f535ff0..4f7e976 100644 --- a/src/components/sidemenu/comtableconfig/columnform/index.scss +++ b/src/components/sidemenu/comtableconfig/columnform/index.scss @@ -1,5 +1,9 @@ .ant-advanced-search-form.commontable-column-form { + min-height: 190px; .ant-form-item { margin-bottom: 15px; + .ant-input-number { + width: 100%; + } } } \ No newline at end of file diff --git a/src/components/sidemenu/comtableconfig/dragelement/card.jsx b/src/components/sidemenu/comtableconfig/dragelement/card.jsx index 9cc00e2..cb1c735 100644 --- a/src/components/sidemenu/comtableconfig/dragelement/card.jsx +++ b/src/components/sidemenu/comtableconfig/dragelement/card.jsx @@ -1,6 +1,6 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Button, Select, DatePicker } from 'antd' +import { Icon, Button, Select, DatePicker, Input } from 'antd' import moment from 'moment' import ItemTypes from './itemtypes' import './index.scss' @@ -43,14 +43,10 @@ </div> <div className="ant-col ant-form-item-control-wrapper"> {card.type === 'text' && - <div className="ant-form-item-control"> - <span className="ant-form-item-children"> - <input placeholder="" autoComplete="off" type="text" readOnly={true} className="ant-input" /> - </span> - </div> + <Input style={{marginTop: '4px'}} defaultValue={card.initval} /> } - {card.type === 'select' && - <Select defaultValue="lucy"></Select> + {(card.type === 'select' || card.type === 'link') && + <Select defaultValue={card.initval}></Select> } {card.type === 'dateday' && <DatePicker defaultValue={card.initval ? moment(card.initval, 'YYYY-MM-DD') : null} /> @@ -70,7 +66,7 @@ } {type === 'columns' && <span className="ant-table-header-column"> - <div className="ant-table-column-sorters" style={{textAlign: card.Align}}> + <div className="ant-table-column-sorters" title={card.label} style={{textAlign: card.Align}}> <span className="ant-table-column-title">{card.label}</span> {card.IsSort === 'true' && <span className="ant-table-column-sorter"> <Icon type="caret-up" /> diff --git a/src/components/sidemenu/comtableconfig/dragelement/index.jsx b/src/components/sidemenu/comtableconfig/dragelement/index.jsx index 0201b40..c89134c 100644 --- a/src/components/sidemenu/comtableconfig/dragelement/index.jsx +++ b/src/components/sidemenu/comtableconfig/dragelement/index.jsx @@ -7,7 +7,7 @@ import ItemTypes from './itemtypes' import './index.scss' -const Container = ({list, type, handleList, handleMenu }) => { +const Container = ({list, type, placeholder, handleList, handleMenu }) => { let target = null const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { @@ -97,9 +97,18 @@ target = null } }) - // const [, drop] = useDrop({ accept: ItemTypes[type] }) + let columns = [] + if (type === 'columns' && cards.length > 12) { + let number = Math.ceil(cards.length / Math.ceil(cards.length / 12)) + for (let i = 0, len = cards.length; i < len; i += number) { + columns.push(cards.slice(i, i + number)) + } + } else if (type === 'columns') { + columns.push(cards) + } + return ( - <div ref={drop} className="ant-row" style={type === 'columns' ? {display: 'flex'} : {}}> + <div ref={drop} className="ant-row"> {type === 'action' && cards.map(card => ( <Card key={card.uuid} @@ -127,21 +136,33 @@ </Col> ))} {type === 'columns' && cards.length > 0 && - <div className="page-card" style={{flex: 60}}> - <span className="ant-checkbox-inner"></span> - </div>} - {type === 'columns' && cards.map(card => ( - <Card - key={card.uuid} - id={`${card.id}`} - type={type} - card={card} - moveCard={moveCard} - editCard={editCard} - findCard={findCard} - hasDrop={hasDrop} - /> - ))} + columns.map((column, i) => ( + <div key={i} className="column-box"> + {i === 0 && + <div className="page-card" style={{flex: 60}}> + <span className="ant-checkbox-inner"></span> + </div> + } + {column.map(card => ( + <Card + key={card.uuid} + id={`${card.id}`} + type={type} + card={card} + moveCard={moveCard} + editCard={editCard} + findCard={findCard} + hasDrop={hasDrop} + /> + ))} + </div> + )) + } + {cards.length === 0 && + <div className="common-drawarea-placeholder"> + {placeholder} + </div> + } </div> ) } diff --git a/src/components/sidemenu/comtableconfig/dragelement/index.scss b/src/components/sidemenu/comtableconfig/dragelement/index.scss index a65cdc0..8c9d54b 100644 --- a/src/components/sidemenu/comtableconfig/dragelement/index.scss +++ b/src/components/sidemenu/comtableconfig/dragelement/index.scss @@ -1,9 +1,15 @@ .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; + margin: 0px 0px 10px; cursor: move; + border-radius: 4px; +} +.common-drawarea-placeholder { + width: 100%; + line-height: 65px; + text-align: center; + color: #bcbcbc; } \ 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 93ac53f..65a30fd 100644 --- a/src/components/sidemenu/comtableconfig/editable/index.jsx +++ b/src/components/sidemenu/comtableconfig/editable/index.jsx @@ -30,17 +30,19 @@ save = e => { const { record, handleSave } = this.props this.form.validateFields((error, values) => { + handleSave({ ...record, ...values }) if (error && error[e.currentTarget.id]) { return } this.toggleEdit() - handleSave({ ...record, ...values }) + // handleSave({ ...record, ...values }) }) } renderCell = form => { this.form = form - const { children, dataIndex, record, title } = this.props + // const { children, dataIndex, record, title } = this.props + const { children, dataIndex, record } = this.props const { editing } = this.state return editing ? ( <Form.Item style={{ margin: 0 }}> @@ -48,11 +50,12 @@ rules: [ { required: true, - message: `${title} is required.`, + // message: `${title} is required.`, + message: 'NOT NULL.', }, ], initialValue: record[dataIndex] - })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)} + })(<Input ref={node => (this.input = node)} autoComplete="off" onPressEnter={this.save} onBlur={this.save} />)} </Form.Item> ) : ( <div @@ -90,17 +93,17 @@ class EditTable extends Component { constructor(props) { super(props) - this.columns = [ + let columns = [ { - title: 'ID', - dataIndex: 'ID', - width: '40%', + title: 'Value', + dataIndex: 'Value', + width: props.type === 'link' ? '27%' : '40%', editable: true }, { - title: 'Value', - dataIndex: 'value', - width: '40%', + title: 'Text', + dataIndex: 'Text', + width: props.type === 'link' ? '27%' : '40%', editable: true }, { @@ -116,9 +119,20 @@ } ] + if (props.type === 'link') { + columns.unshift({ + title: 'ParentID', + dataIndex: 'ParentID', + width: '27%', + editable: true + }) + } + this.state = { + columns: columns, dataSource: props.data, - count: props.data.length + count: props.data.length, + type: props.type } } @@ -128,11 +142,14 @@ } handleAdd = () => { - const { count, dataSource } = this.state + const { type, count, dataSource } = this.state const newData = { key: Utils.getuuid(), - ID: `${count}`, - value: `${count}` + Value: `${count}`, + Text: `${count}` + } + if (type === 'link') { + newData.ParentID = `${count}` } this.setState({ dataSource: [...dataSource, newData], @@ -151,14 +168,53 @@ this.setState({ dataSource: newData }) } - // UNSAFE_componentWillMount () { - // if (this.props.data) { - // this.setState({ - // dataSource: this.props.data, - // count: this.props.data.length - // }) - // } - // } + resetColumn = (type) => { + let columns = [ + { + title: 'Value', + dataIndex: 'Value', + width: type === 'link' ? '27%' : '40%', + editable: true + }, + { + title: 'Text', + dataIndex: 'Text', + width: type === 'link' ? '27%' : '40%', + editable: true + }, + { + 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'}}><Icon type="delete" /></span> + </Popconfirm> + ) : null, + } + ] + + if (type === 'link') { + columns.unshift({ + title: 'ParentID', + dataIndex: 'ParentID', + width: '27%', + editable: true + }) + } + + this.setState({ + columns: columns, + type: type + }) + } + + UNSAFE_componentWillReceiveProps (nextProps) { + if (this.props.type !== nextProps.type) { + this.resetColumn(nextProps.type) + } + } render() { const { dataSource } = this.state @@ -168,7 +224,7 @@ cell: EditableCell } } - const columns = this.columns.map(col => { + const columns = this.state.columns.map(col => { if (!col.editable) { return col } diff --git a/src/components/sidemenu/comtableconfig/index.jsx b/src/components/sidemenu/comtableconfig/index.jsx index 3fb2036..830cc59 100644 --- a/src/components/sidemenu/comtableconfig/index.jsx +++ b/src/components/sidemenu/comtableconfig/index.jsx @@ -3,33 +3,40 @@ // import { is, fromJS } from 'immutable' import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' -import { Button, Card, Modal, Tabs } from 'antd' +import { Button, Card, Modal, Collapse, Input, notification } from 'antd' import DragElement from './dragelement' import SourceElement from './dragelement/source' +import Api from '@/api' import SearchForm from './searchform' import ActionForm from './actionform' import ColumnForm from './columnform' +import MenuForm from './menuform' 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 +const { Panel } = Collapse +const { Search } = Input const HeaderDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS class ComTableConfig extends Component { static propTpyes = { - menuConfig: PropTypes.any, - handleConfig: PropTypes.func + menu: PropTypes.any, + handleConfig: PropTypes.func, + supMenuList: PropTypes.array, + supMenu: PropTypes.object, } state = { dict: HeaderDict, config: null, visible: false, + tableVisible: false, + addType: '', + menuformlist: null, formlist: null, formtemp: '', - madalwidth: 520, card: null, searchloading: false, actionloading: false, @@ -47,10 +54,12 @@ setAll: 'false', options: [], dataSource: '', + linkField: '', valueField: '', valueText: '', orderBy: '', - orderType: 'asc' + orderType: 'asc', + display: 'dropdown' }, { id: 1, uuid: Utils.getuuid(), @@ -62,10 +71,12 @@ setAll: 'false', options: [], dataSource: '', + linkField: '', valueField: '', valueText: '', orderBy: '', - orderType: 'asc' + orderType: 'asc', + display: 'dropdown' }, { id: 2, uuid: Utils.getuuid(), @@ -77,47 +88,65 @@ setAll: 'false', options: [], dataSource: '', + linkField: '', valueField: '', valueText: '', orderBy: '', - orderType: 'asc' + orderType: 'asc', + display: 'dropdown' }], action: [{ id: 0, uuid: Utils.getuuid(), label: 'add', + intertype: 'inner', + interface: '', func: '', + callbackFunc: '', Ot: 'notRequired', OpenType: 'pop', + pageTemplate: '', icon: 'plus', class: 'green' }, { id: 1, uuid: Utils.getuuid(), label: 'update', + intertype: 'inner', + interface: '', func: '', + callbackFunc: '', Ot: 'requiredSgl', OpenType: 'pop', + pageTemplate: '', icon: 'form', class: 'purple' }, { id: 2, uuid: Utils.getuuid(), label: 'delete', + intertype: 'inner', + interface: '', func: '', + callbackFunc: '', Ot: 'required', OpenType: 'prompt', + pageTemplate: '', icon: 'delete', class: 'red' }, { id: 3, uuid: Utils.getuuid(), label: 'freeze', + intertype: 'inner', + interface: '', func: '', + callbackFunc: '', Ot: 'requiredOnce', OpenType: 'exec', + pageTemplate: '', icon: '', - class: '' + class: 'default' }], columns: [{ id: 0, @@ -238,7 +267,6 @@ } handleList = (list) => { - console.log(list) let config = this.state.config this.setState({config: {...config, ...list}}) } @@ -247,7 +275,6 @@ this.setState({ visible: true, formtemp: 'search', - madalwidth: 700, card: card, formlist: [ { @@ -270,7 +297,7 @@ type: 'text', key: 'initval', label: this.state.dict['header.form.initval'], - initVal: '', + initVal: card.initval, required: false }, { @@ -286,6 +313,9 @@ MenuID: 'select', text: this.state.dict['header.form.select'] }, { + MenuID: 'link', + text: this.state.dict['header.form.link'] + }, { MenuID: 'dateday', text: this.state.dict['header.form.dateday'] }, { @@ -298,6 +328,7 @@ key: 'resourceType', label: this.state.dict['header.form.resourceType'], initVal: card.resourceType, + required: true, options: [{ MenuID: '0', text: this.state.dict['header.form.custom'] @@ -337,6 +368,14 @@ }, { type: 'text', + key: 'linkField', + label: this.state.dict['header.form.linkField'], + initVal: card.linkField, + required: true, + readonly: false + }, + { + type: 'text', key: 'valueField', label: this.state.dict['header.form.valueField'], initVal: card.valueField, @@ -371,6 +410,20 @@ MenuID: 'desc', text: this.state.dict['header.form.desc'] }] + }, + { + type: 'select', + key: 'display', + label: this.state.dict['header.form.display'], + initVal: card.display, + required: true, + options: [{ + MenuID: 'dropdown', + text: this.state.dict['header.form.dropdown'] + }, { + MenuID: 'button', + text: this.state.dict['header.form.button'] + }] } ] }) @@ -380,7 +433,6 @@ this.setState({ visible: true, formtemp: 'action', - madalwidth: 520, card: card, formlist: [ { @@ -388,6 +440,62 @@ key: 'label', label: this.state.dict['header.form.name'], initVal: card.label, + required: true, + readonly: false + }, + { + 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: 'blank', + text: this.state.dict['header.form.blank'] + }, { + MenuID: 'newpage', + text: this.state.dict['header.form.newpage'] + }] + }, + { + type: 'select', + key: 'pageTemplate', + label: this.state.dict['header.form.pageTemplate'], + initVal: card.pageTemplate, + required: true, + options: [] + }, + { + type: 'radio', + key: 'intertype', + label: this.state.dict['header.form.intertype'], + initVal: card.intertype, + required: true, + options: [{ + MenuID: 'inner', + text: this.state.dict['header.form.interface.inner'] + }, { + MenuID: 'outer', + text: this.state.dict['header.form.interface.outer'] + }] + }, + { + type: 'text', + key: 'interface', + label: this.state.dict['header.form.interface'], + initVal: card.interface, required: true, readonly: false }, @@ -420,30 +528,12 @@ }] }, { - 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: 'text', + key: 'callbackFunc', + label: this.state.dict['header.form.callbackFunc'], + initVal: card.callbackFunc, + required: false, + readonly: false }, { type: 'select', @@ -458,7 +548,7 @@ key: 'class', label: this.state.dict['header.form.class'], initVal: card.class, - required: true, + required: false, options: [] } ] @@ -469,7 +559,6 @@ this.setState({ visible: true, formtemp: 'columns', - madalwidth: 520, card: card, formlist: [ { @@ -505,7 +594,7 @@ }] }, { - type: 'select', + type: 'radio', key: 'Hide', label: this.state.dict['header.form.Hide'], initVal: card.Hide, @@ -545,6 +634,7 @@ handleSubmit = () => { this.formRef.handleConfirm().then(res => { + console.log(res) let _config = this.state.config _config[res.type] = _config[res.type].map(item => { if (item.uuid === res.values.uuid) { @@ -598,24 +688,110 @@ }, 300) } + changeTemplate = () => { + this.props.handleConfig('template') + } + submitConfig = () => { - this.props.handleConfig() + this.menuformRef.handleConfirm().then(res => { + console.log(res) + }) + // this.props.handleConfig('') } cancelConfig = () => { - this.props.handleConfig() + this.props.handleConfig('') + } + + queryField = (type, name) => { + if (!name) { + notification.warning({ + top: 92, + message: '璇疯緭鍏ヨ〃鍚嶏紒', + duration: 10 + }) + return + } + if (type === 'search') { + Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => { + if (res.status) { + this.setState({ + tableVisible: true, + addType: type + }) + } else { + notification.warning({ + top: 92, + message: res.message, + duration: 10 + }) + } + }) + } + } + + addFieldSubmit = () => { + console.log(13) + } + + cancelFieldSubmit = () => { + this.setState({ + tableVisible: false, + addType: '' + }) } UNSAFE_componentWillMount () { - if (!this.props.menuConfig) { - this.setState({ - config: JSON.parse(JSON.stringify((this.state.baseconfig))) - }) + let _config = '' + if (!this.props.menu.LongParam) { + _config = JSON.parse(JSON.stringify((this.state.baseconfig))) } else { - this.setState({ - config: this.props.menuConfig - }) + _config = this.props.menu.LongParam } + this.setState({ + config: _config, + menuformlist: [ + { + type: 'select', + key: 'parentId', + label: this.state.dict['header.menu.supMenu'], + initVal: this.props.supMenu.MenuID, + required: true, + readonly: false, + options: this.props.supMenuList + }, + { + type: 'text', + key: 'menuName', + label: this.state.dict['header.menu.menuName'], + initVal: this.props.menu.MenuName, + required: true, + readonly: false + }, + { + type: 'text', + key: 'menuNo', + label: this.state.dict['header.menu.menuNo'], + initVal: this.props.menu.MenuNo, + required: true, + readonly: false + }, + { + type: 'select', + key: 'opentype', + label: this.state.dict['header.menu.openType'], + initVal: this.props.menu.PageParam.OpenType, + required: true, + options: [{ + MenuID: 'newtab', + text: this.state.dict['header.form.tab'] + }, { + MenuID: 'newpage', + text: this.state.dict['header.form.newpage'] + }] + } + ] + }) } render () { @@ -623,33 +799,43 @@ <div className="common-table-board"> <DndProvider backend={HTML5Backend}> <div className="tools"> - <Tabs defaultActiveKey="1"> - <TabPane tab="鎼滅储" key="1"> - <ul className="search-element"> + <Collapse accordion defaultActiveKey="0" bordered={false}> + <Panel header="鍩烘湰淇℃伅" key="0"> + <MenuForm + dict={this.state.dict} + formlist={this.state.menuformlist} + wrappedComponentRef={(inst) => this.menuformRef = inst} + /> + </Panel> + <Panel header="鎼滅储" key="1"> + <Search placeholder="input table name." onSearch={value => this.queryField('search', value)} enterButton /> + <div 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"> + </div> + </Panel> + <Panel header="鎸夐挳" key="2"> + <div 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"> + </div> + </Panel> + <Panel header="鏄剧ず鍒�" key="3"> + <Search placeholder="input table name." onSearch={value => this.queryField('column', value)} enterButton /> + <div className="search-element"> {this.state.columnItems.map((item, index) => { return (<SourceElement key={index} content={item}/>) })} - </ul> - </TabPane> - </Tabs> + </div> + </Panel> + </Collapse> </div> <div className="setting"> <Card title="椤甸潰閰嶇疆" bordered={false} extra={ <div> + <Button type="primary" onClick={this.changeTemplate}>{this.state.dict['header.menu.template.change']}</Button> <Button type="primary" onClick={this.submitConfig}>{this.state.dict['header.submit']}</Button> <Button onClick={this.cancelConfig}>{this.state.dict['header.cancel']}</Button> </div> @@ -659,6 +845,7 @@ <DragElement list={this.state.config.search} type="search" + placeholder={this.state.dict['header.form.search.placeholder']} handleList={this.handleList} handleMenu={this.handleSearch} />} @@ -668,6 +855,7 @@ <DragElement list={this.state.config.action} type="action" + placeholder={this.state.dict['header.form.action.placeholder']} handleList={this.handleList} handleMenu={this.handleAction} />} @@ -677,6 +865,7 @@ <DragElement list={this.state.config.columns} type="columns" + placeholder={this.state.dict['header.form.column.placeholder']} handleList={this.handleList} handleMenu={this.handleColumn} />} @@ -687,7 +876,7 @@ <Modal title={this.state.dict['header.edit']} visible={this.state.visible} - width={this.state.madalwidth} + width={700} onCancel={this.handleCancel} footer={null} destroyOnClose @@ -716,6 +905,17 @@ <Button type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button> </div> </Modal> + <Modal + title={this.state.dict['header.edit']} + visible={this.state.tableVisible} + width={'65vw'} + style={{minWidth: '900px', maxWidth: '1200px'}} + onOk={this.addFieldSubmit} + onCancel={this.cancelFieldSubmit} + destroyOnClose + > + {this.state.addType === 'search' && <div>djfiafadf</div>} + </Modal> </div> ) } diff --git a/src/components/sidemenu/comtableconfig/index.scss b/src/components/sidemenu/comtableconfig/index.scss index 7137647..5f6e425 100644 --- a/src/components/sidemenu/comtableconfig/index.scss +++ b/src/components/sidemenu/comtableconfig/index.scss @@ -12,17 +12,31 @@ flex: 1; background: #ffffff; border-right: 1px solid #d9d9d9; - .ant-tabs-nav { - .ant-tabs-tab { - padding: 12px 0px; - width: 60px; - text-align: center; - } - .ant-tabs-tab:not(:last-child) { - margin: 0 20px 0 0; + .ant-collapse-item { + border: 0; + } + .ant-input-search { + margin-top: 10px; + } + .ant-collapse-item.ant-collapse-item-active { + border-bottom: 1px solid #d9d9d9; + } + .ant-collapse-header { + padding: 11px 16px 10px 40px; + border-bottom: 1px solid #d9d9d9; + } + .ant-collapse-content-box { + .ant-form-item { + margin-bottom: 10px; + .ant-form-item-label { + text-align: left; + height: 25px; + line-height: 25px; + } } } .search-element { + padding-top: 10px; li { padding: 0px 16px 10px; div { @@ -175,6 +189,12 @@ border-radius: 4px; min-height: 47px; border: 1px solid #e8e8e8; + .column-box { + display: flex; + } + .column-box:not(:first-child) { + border-top: 1px solid #e8e8e8; + } .page-card { position: relative; padding: 0px; @@ -182,6 +202,7 @@ > div { padding: 12px 8px; cursor: move; + height: 100%; } .ant-table-column-sorter { position: relative; diff --git a/src/components/sidemenu/comtableconfig/menuform/index.jsx b/src/components/sidemenu/comtableconfig/menuform/index.jsx new file mode 100644 index 0000000..11b1b38 --- /dev/null +++ b/src/components/sidemenu/comtableconfig/menuform/index.jsx @@ -0,0 +1,102 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { Form, Row, Col, Input, Select, notification } from 'antd' +import './index.scss' + +class MainSearch extends Component { + static propTpyes = { + dict: PropTypes.object, // 瀛楀吀椤� + formlist: PropTypes.array + } + + getFields() { + const { getFieldDecorator } = this.props.form + const fields = [] + this.props.formlist.forEach((item, index) => { + if (item.type === 'text') { // 鏂囨湰鎼滅储 + fields.push( + <Col span={24} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: !!item.required, + message: this.props.dict['form.required.input'] + item.label + '!' + } + ] + })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)} + </Form.Item> + </Col> + ) + } else if (item.type === 'select') { // 涓嬫媺鎼滅储 + fields.push( + <Col span={24} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: !!item.required, + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <Select + showSearch + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + getPopupContainer={() => document.getElementById('qazxcvbn')} + > + {item.options.map(option => + <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}> + {option.text} + </Select.Option> + )} + </Select> + )} + </Form.Item> + </Col> + ) + } + }) + return fields + } + + handleConfirm = () => { + // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� + return new Promise((resolve, reject) => { + this.props.form.validateFieldsAndScroll((err, values) => { + if (!err) { + resolve(values) + } else { + notification.warning({ + top: 92, + message: this.props.dict['header.menu.basemsg'], + duration: 10 + }) + reject(err) + } + }) + }) + } + + render() { + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 24 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 24 } + } + } + return ( + <Form {...formItemLayout} className="ant-advanced-search-form" id="qazxcvbn"> + <Row gutter={24}>{this.getFields()}</Row> + </Form> + ) + } +} + +export default Form.create()(MainSearch) \ No newline at end of file diff --git a/src/components/sidemenu/comtableconfig/menuform/index.scss b/src/components/sidemenu/comtableconfig/menuform/index.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/components/sidemenu/comtableconfig/menuform/index.scss diff --git a/src/components/sidemenu/comtableconfig/searchform/index.jsx b/src/components/sidemenu/comtableconfig/searchform/index.jsx index 3f03957..9207158 100644 --- a/src/components/sidemenu/comtableconfig/searchform/index.jsx +++ b/src/components/sidemenu/comtableconfig/searchform/index.jsx @@ -1,7 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -// import { is, fromJS } from 'immutable' -import { Form, Row, Col, Input, Select, Icon, Radio } from 'antd' +import { Form, Row, Col, Input, Select, Icon, Radio, notification } from 'antd' import moment from 'moment' import EditTable from '../editable' import './index.scss' @@ -11,28 +10,31 @@ class MainSearch extends Component { static propTpyes = { dict: PropTypes.object, // 瀛楀吀椤� - formlist: PropTypes.any + formlist: PropTypes.any, + card: PropTypes.object } state = { - card: null, - inputType: 'text', - selectType: 0, - options: null, + openType: null, + resourceType: null, formlist: null } 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']] + if (value === 'select' && this.state.resourceType === '0') { + _options = [..._options, ...['resourceType', 'setAll', 'options', 'display']] + } else if (value === 'select' && this.state.resourceType === '1') { + _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']] + } else if (value === 'link' && this.state.resourceType === '0') { + _options = [..._options, ...['resourceType', 'setAll', 'options', 'linkField', 'display']] + } else if (value === 'link' && this.state.resourceType === '1') { + _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'linkField', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']] } this.setState({ + openType: value, formlist: this.state.formlist.map(form => { form.hidden = !_options.includes(form.key) return form @@ -45,13 +47,18 @@ 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']] + if (this.state.openType === 'select' && value === '0') { + _options = [..._options, ...['options', 'display']] + } else if (this.state.openType === 'select' && value === '1') { + _options = [..._options, ...['dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']] + } else if (this.state.openType === 'link' && value === '0') { + _options = [..._options, ...['options', 'linkField', 'display']] + } else if (this.state.openType === 'link' && value === '1') { + _options = [..._options, ...['dataSource', 'linkField', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']] } this.setState({ + resourceType: value, formlist: this.state.formlist.map(form => { form.hidden = !_options.includes(form.key) return form @@ -68,9 +75,9 @@ if (item.type === 'text') { // 鏂囨湰鎼滅储 let placeholder = '' - if (item.key === 'initval' && this.state.inputType === 'dateday') { + if (item.key === 'initval' && this.state.openType === 'dateday') { placeholder = '渚嬶細' + moment().format('YYYY-MM-DD') - } else if (item.key === 'initval' && this.state.inputType === 'datetime') { + } else if (item.key === 'initval' && this.state.openType === 'datetime') { placeholder = '渚嬶細' + moment().format('YYYY-MM-DD HH:mm:ss') } fields.push( @@ -121,7 +128,15 @@ fields.push( <Col span={12} key={index}> <Form.Item label={item.label}> - {getFieldDecorator(item.key, { initialValue: item.initVal })( + {getFieldDecorator(item.key, { + initialValue: item.initVal, + rules: [ + { + required: !!item.required, + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}> { item.options.map(option => { @@ -155,7 +170,7 @@ } else if (item.type === 'options') { fields.push( <Col span={20} offset={4} key={index}> - <EditTable data={item.initVal} ref="editTable"/> + <EditTable data={item.initVal} type={this.state.openType} ref="editTable"/> </Col> ) } @@ -168,19 +183,38 @@ return new Promise((resolve, reject) => { this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { - if (values.type === 'select' && values.resourceType === '0') { + let isvalid = true + values.id = this.props.card.id + values.uuid = this.props.card.uuid + // 涓嬫媺鑿滃崟鎴栧叧鑱旇彍鍗� + if ((values.type === 'select' || values.type === 'link') && values.resourceType === '0') { values.options = this.refs.editTable.state.dataSource values.dataSource = '' - } else if (values.type === 'select' && values.resourceType === '1') { + let emptys = [] + if (values.type === 'select') { + emptys = values.options.filter(op => !(op.Value && op.Text)) + } else { + emptys = values.options.filter(op => !(op.Value && op.Text && op.ParentID)) + } + if (emptys.length > 0) { + isvalid = false + } + } else if ((values.type === 'select' || values.type === 'link') && values.resourceType === '1') { values.options = [] } - values.id = this.props.card.id - values.uuid = this.props.card.uuid - resolve({ - type: 'search', - values - }) + if (isvalid) { + resolve({ + type: 'search', + values + }) + } else { + notification.warning({ + top: 92, + message: this.props.dict['header.form.selectItem.error'], + duration: 10 + }) + } } else { reject(err) } @@ -194,12 +228,18 @@ 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']] + _options = [..._options, ...['resourceType', 'setAll', 'options', 'display']] } else if (type === 'select' && resourceType === '1') { - _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']] + _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']] + } else if (type === 'link' && resourceType === '0') { + _options = [..._options, ...['resourceType', 'setAll', 'options', 'linkField', 'display']] + } else if (type === 'link' && resourceType === '1') { + _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'linkField', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']] } this.setState({ + openType: type, + resourceType: resourceType, formlist: formlist.map(form => { form.hidden = !_options.includes(form.key) return form diff --git a/src/components/sidemenu/editthdmenu/index.jsx b/src/components/sidemenu/editthdmenu/index.jsx index 2b7f5cf..3e1e65d 100644 --- a/src/components/sidemenu/editthdmenu/index.jsx +++ b/src/components/sidemenu/editthdmenu/index.jsx @@ -8,7 +8,7 @@ import TransferForm from '@/components/transferform' import Utils from '@/utils/utils.js' import DragElement from '../menuelement' -import MenuForm from '../menuform' +// import MenuForm from '../menuform' import ComTableConfig from '../comtableconfig' import Api from '@/api' import zhCN from '@/locales/zh-CN/header.js' @@ -51,11 +51,8 @@ baseTemplates: [{ title: '鍩虹琛ㄦ牸', type: 'CommonTable', - url: illust['CommonTable'] - }, { - title: '鏁版嵁琛ㄦ牸', - type: 'datatable', - url: illust['CommonTable'] + url: illust['CommonTable'], + baseconfig: '' }] } @@ -106,52 +103,33 @@ } Api.getSystemConfig(param).then(res => { if (res.status) { + let _LongParam = window.atob(res.LongParam) + try { + _LongParam = JSON.parse(_LongParam) + } catch (e) { + _LongParam = { + type: 'system', + search: [], + action: [], + columns: [] + } + } + _menu.LongParam = _LongParam + console.log(_menu) + // 妫�娴嬫ā鏉挎槸鍚﹀瓨鍦� + let _Template = this.state.baseTemplates.filter(temp => temp.type === _menu.PageParam.Template) this.setState({ - editMvisible: true, - title: this.state.dict['header.menu.editTitle'], type: 'edit', - editMenu: {..._menu, LongParam: res.LongParam}, - formlist: [ - { - type: 'select', - key: 'parentId', - label: this.state.dict['header.menu.supMenu'], - initVal: this.props.supMenu.MenuID, - required: true, - options: this.props.supMenuList - }, - { - type: 'text', - key: 'menuName', - label: this.state.dict['header.menu.menuName'], - initVal: menu.card.text, - required: true, - readonly: false - }, - { - type: 'text', - key: 'menuNo', - label: this.state.dict['header.menu.menuNo'], - initVal: menu.card.MenuNo, - required: true, - readonly: false - }, - { - type: 'select', - key: 'opentype', - label: '鎵撳紑鏂瑰紡', - initVal: menu.card.PageParam.OpenType || 'newtab', - required: true, - options: [{ - MenuID: 'newtab', - text: '鏂版爣绛鹃〉' - }, { - MenuID: 'newpage', - text: '鏂伴〉闈�' - }] - } - ] + editMenu: _menu, + tabview: _Template.length > 0 ? _menu.PageParam.Template : 'template' }) + if (_Template.length === 0) { + notification.warning({ + top: 92, + message: this.state.dict['header.menu.template.empty'], + duration: 10 + }) + } } else { notification.warning({ top: 92, @@ -231,94 +209,94 @@ } } - memuHandleSubmit = () => { - if (this.state.type === 'add') { - // 鏂板缓鑿滃崟锛氭彁浜� - this.menuFormRef.handleConfirm().then(values => { - let param = { - func: 'sPC_TrdMenu_Add', - ParentID: this.props.supMenu.MenuID, - MenuID: Utils.getuuid(), - MenuNo: values.menuNo, - Template: this.state.selectTemp.type, - MenuName: values.menuName, - Sort: (this.props.menulist.length + 1) * 10, - PageParam: JSON.stringify({ - OpenType: values.opentype, - Template: this.state.selectTemp.type - }), - LongParam: window.btoa(JSON.stringify(this.state.selectTemp.baseconfig)) - } - this.setState({ - confirmLoading: true - }) - Api.getSystemConfig(param).then(res => { - if (res.status) { - this.setState({ - confirmLoading: false, - tabview: '', - visible: false - }) - this.props.reload() - this.resetFormlist() - } else { - this.setState({ - confirmLoading: false - }) - notification.warning({ - top: 92, - message: res.message, - duration: 10 - }) - } - }) - }, () => {}) - } else if (this.state.type === 'edit') { - // 缂栬緫鑿滃崟锛氭彁浜� - this.menuFormRef.handleConfirm().then(values => { - let param = { - func: 'sPC_TrdMenu_Upt', - ParentID: values.parentId, - MenuID: this.state.editMenu.MenuID, - MenuNo: values.menuNo, - Template: this.state.editMenu.PageParam.Template || '', - MenuName: values.menuName, - PageParam: JSON.stringify(this.state.editMenu.PageParam), - LongParam: this.state.editMenu.LongParam ? window.btoa(this.state.editMenu.LongParam) : '' - } - this.setState({ - confirmLoading: true - }) - Api.getSystemConfig(param).then(res => { - if (res.status) { - this.setState({ - confirmLoading: false, - editMvisible: false - }) - this.props.reload() - this.resetFormlist() - } else { - this.setState({ - confirmLoading: false - }) - notification.warning({ - top: 92, - message: res.message, - duration: 10 - }) - } - }) - }, () => {}) - } - } + // memuHandleSubmit = () => { + // if (this.state.type === 'add') { + // // 鏂板缓鑿滃崟锛氭彁浜� + // this.menuFormRef.handleConfirm().then(values => { + // let param = { + // func: 'sPC_TrdMenu_Add', + // ParentID: this.props.supMenu.MenuID, + // MenuID: Utils.getuuid(), + // MenuNo: values.menuNo, + // Template: this.state.selectTemp.type, + // MenuName: values.menuName, + // Sort: (this.props.menulist.length + 1) * 10, + // PageParam: JSON.stringify({ + // OpenType: values.opentype, + // Template: this.state.selectTemp.type + // }), + // LongParam: window.btoa(JSON.stringify(this.state.selectTemp.baseconfig)) + // } + // this.setState({ + // confirmLoading: true + // }) + // Api.getSystemConfig(param).then(res => { + // if (res.status) { + // this.setState({ + // confirmLoading: false, + // tabview: '', + // visible: false + // }) + // this.props.reload() + // this.resetFormlist() + // } else { + // this.setState({ + // confirmLoading: false + // }) + // notification.warning({ + // top: 92, + // message: res.message, + // duration: 10 + // }) + // } + // }) + // }, () => {}) + // } else if (this.state.type === 'edit') { + // // 缂栬緫鑿滃崟锛氭彁浜� + // this.menuFormRef.handleConfirm().then(values => { + // let param = { + // func: 'sPC_TrdMenu_Upt', + // ParentID: values.parentId, + // MenuID: this.state.editMenu.MenuID, + // MenuNo: values.menuNo, + // Template: this.state.editMenu.PageParam.Template || '', + // MenuName: values.menuName, + // PageParam: JSON.stringify(this.state.editMenu.PageParam), + // LongParam: this.state.editMenu.LongParam ? window.btoa(this.state.editMenu.LongParam) : '' + // } + // this.setState({ + // confirmLoading: true + // }) + // Api.getSystemConfig(param).then(res => { + // if (res.status) { + // this.setState({ + // confirmLoading: false, + // editMvisible: false + // }) + // this.props.reload() + // this.resetFormlist() + // } else { + // this.setState({ + // confirmLoading: false + // }) + // notification.warning({ + // top: 92, + // message: res.message, + // duration: 10 + // }) + // } + // }) + // }, () => {}) + // } + // } - memuHandleCancel = () => { - this.setState({ - editMvisible: false, - visible: false - }) - this.resetFormlist() - } + // memuHandleCancel = () => { + // this.setState({ + // editMvisible: false, + // visible: false + // }) + // this.resetFormlist() + // } thawMemuSubmit = () => { // 涓夌骇鑿滃崟瑙i櫎鍐荤粨 @@ -389,164 +367,133 @@ } useTemplate = (template) => { + const { type, editMenu } = this.state // 閫夋嫨妯℃澘锛氭坊鍔犺彍鍗曟椂 - if (this.state.type === 'add') { + if (type === 'add') { this.setState({ tabview: template.type, - menuConfig: template.baseconfig + editMenu: { + MenuID: Utils.getuuid(), + MenuName: '', + MenuNo: '', + id: this.props.menulist.length, + src: '', + text: '', + type: template.type, + PageParam: {OpenType: "newtab", Template: template.type}, + LongParam: '' + } }) - // this.setState({ - // visible: true, - // title: this.state.dict['header.menu.addtitle'], - // selectTemp: template, - // formlist: [ - // { - // type: 'text', - // key: 'parentId', - // label: this.state.dict['header.menu.supMenu'], - // initVal: this.props.supMenu.text, - // required: true, - // readonly: true - // }, - // { - // type: 'text', - // key: 'menuName', - // label: this.state.dict['header.menu.menuName'], - // initVal: '', - // required: true, - // readonly: false - // }, - // { - // type: 'text', - // key: 'menuNo', - // label: this.state.dict['header.menu.menuNo'], - // initVal: '', - // required: true, - // readonly: false - // }, - // { - // type: 'select', - // key: 'opentype', - // label: '鎵撳紑鏂瑰紡', - // initVal: 'newtab', - // required: true, - // options: [{ - // MenuID: 'newtab', - // text: '鏂版爣绛鹃〉' - // }, { - // MenuID: 'newpage', - // text: '鏂伴〉闈�' - // }] - // } - // ] - // }) } else { - // this.setState({ - // tabview: this.state.selectTemp.type - // }) - } - } + let _PageParam = {OpenType: editMenu.PageParam.OpenType, Template: template.type} - submitMenuConfig = () => { - if (this.state.type !== 'edit') { this.setState({ - visible: true, - title: this.state.dict['header.menu.addtitle'], - formlist: [ - { - type: 'text', - key: 'parentId', - label: this.state.dict['header.menu.supMenu'], - initVal: this.props.supMenu.text, - required: true, - readonly: true - }, - { - type: 'text', - key: 'menuName', - label: this.state.dict['header.menu.menuName'], - initVal: '', - required: true, - readonly: false - }, - { - type: 'text', - key: 'menuNo', - label: this.state.dict['header.menu.menuNo'], - initVal: '', - required: true, - readonly: false - }, - { - type: 'select', - key: 'opentype', - label: '鎵撳紑鏂瑰紡', - initVal: 'newtab', - required: true, - options: [{ - MenuID: 'newtab', - text: '鏂版爣绛鹃〉' - }, { - MenuID: 'newpage', - text: '鏂伴〉闈�' - }] - } - ] - }) - } else { - console.log(this.state.editMenu) - // confirm({ - // title: this.state.dict['header.menu.update'].replace('@M', menu.card.text), - // content: '', - // okText: this.state.dict['header.confirm'], - // cancelText: this.state.dict['header.cancel'], - // onOk() { - // let param = { - // func: 'sPC_MainMenu_Del', - // MenuID: menu.card.MenuID - // } - // return Api.getSystemConfig(param).then(res => { - // if (res.status) { - // _this.props.reload() - // } else { - // notification.warning({ - // top: 92, - // message: res.message, - // duration: 10 - // }) - // } - // }) - // }, - // onCancel() {} - // }) - this.setState({ - tabview: this.state.selectTemp.type + tabview: template.type, + editMenu: {...editMenu, ...{LongParam: template.baseconfig, PageParam: _PageParam, type: template.type}} }) } } - changeTemp = () => { - this.setState({ - editMvisible: false, - tabview: 'template' - }) - this.resetFormlist() - } + // submitMenuConfig = () => { + // if (this.state.type !== 'edit') { + // this.setState({ + // visible: true, + // title: this.state.dict['header.menu.addtitle'], + // formlist: [ + // { + // type: 'text', + // key: 'parentId', + // label: this.state.dict['header.menu.supMenu'], + // initVal: this.props.supMenu.text, + // required: true, + // readonly: true + // }, + // { + // type: 'text', + // key: 'menuName', + // label: this.state.dict['header.menu.menuName'], + // initVal: '', + // required: true, + // readonly: false + // }, + // { + // type: 'text', + // key: 'menuNo', + // label: this.state.dict['header.menu.menuNo'], + // initVal: '', + // required: true, + // readonly: false + // }, + // { + // type: 'select', + // key: 'opentype', + // label: '鎵撳紑鏂瑰紡', + // initVal: 'newtab', + // required: true, + // options: [{ + // MenuID: 'newtab', + // text: '鏂版爣绛鹃〉' + // }, { + // MenuID: 'newpage', + // text: '鏂伴〉闈�' + // }] + // } + // ] + // }) + // } else { + // console.log(this.state.editMenu) + // // confirm({ + // // title: this.state.dict['header.menu.update'].replace('@M', menu.card.text), + // // content: '', + // // okText: this.state.dict['header.confirm'], + // // cancelText: this.state.dict['header.cancel'], + // // onOk() { + // // let param = { + // // func: 'sPC_MainMenu_Del', + // // MenuID: menu.card.MenuID + // // } + // // return Api.getSystemConfig(param).then(res => { + // // if (res.status) { + // // _this.props.reload() + // // } else { + // // notification.warning({ + // // top: 92, + // // message: res.message, + // // duration: 10 + // // }) + // // } + // // }) + // // }, + // // onCancel() {} + // // }) + // this.setState({ + // tabview: this.state.selectTemp.type + // }) + // } + // } - changeConfig = () => { - this.setState({ - editMvisible: false, - tabview: this.state.editMenu.PageParam.Template, - menuConfig: window.atob(this.state.editMenu.LongParam) - }) - this.resetFormlist() - } + // changeTemp = () => { + // this.setState({ + // editMvisible: false, + // tabview: 'template' + // }) + // this.resetFormlist() + // } + + // changeConfig = () => { + // this.setState({ + // editMvisible: false, + // tabview: this.state.editMenu.PageParam.Template, + // menuConfig: window.atob(this.state.editMenu.LongParam) + // }) + // this.resetFormlist() + // } - resetFormlist = () => { - setTimeout(() => { - this.setState({formlist: null}) - }, 300) - } + // resetFormlist = () => { + // setTimeout(() => { + // this.setState({formlist: null}) + // }, 300) + // } getUsedTemplate = () => { Api.getSystemConfig({func: 'sPC_Get_UserTemp'}).then(res => { @@ -576,8 +523,8 @@ this.setState({tabview: ''}) } - handleConfig = () => { - this.setState({tabview: ''}) + handleConfig = (type) => { + this.setState({tabview: type}) } UNSAFE_componentWillMount () { @@ -662,12 +609,17 @@ </div> </div>} {this.state.tabview === 'CommonTable' && - <ComTableConfig config={this.state.menuConfig} handleConfig={this.handleConfig} /> + <ComTableConfig + menu={this.state.editMenu} + supMenu={this.props.supMenu} + supMenuList={this.props.supMenuList} + handleConfig={this.handleConfig} + /> } {/* 鍥剧墖棰勮 */} <Preview cancel={this.cancelPrePicture} preview={this.state.preview}/> {/* 娣诲姞妯℃�佹 */} - <Modal + {/* <Modal title={this.state.title} okText={this.state.dict['header.confirm']} cancelText={this.state.dict['header.cancel']} @@ -681,9 +633,9 @@ formlist={this.state.formlist} wrappedComponentRef={(inst) => this.menuFormRef = inst} />} - </Modal> + </Modal> */} {/* 缂栬緫妯℃�佹 */} - <Modal + {/* <Modal title={this.state.title} visible={this.state.editMvisible} footer={null} @@ -700,7 +652,7 @@ <Button onClick={this.memuHandleCancel}>{this.state.dict['header.cancel']}</Button> <Button type="primary" onClick={this.memuHandleSubmit} loading={this.state.confirmLoading}>{this.state.dict['header.confirm']}</Button> </div> - </Modal> + </Modal> */} {/* 瑙e喕鑿滃崟妯℃�佹 */} <Modal title={this.state.dict['header.thawmenu']} diff --git a/src/locales/en-US/header.js b/src/locales/en-US/header.js index 81842ef..a94e7c3 100644 --- a/src/locales/en-US/header.js +++ b/src/locales/en-US/header.js @@ -24,6 +24,9 @@ 'header.menu.update': 'Are you sure to modify the configuration information of the menu <<@M>> ?', 'header.menu.presave': 'Menu order has been adjusted, Please save!', 'header.menu.resetorder': 'Are you sure to adjust the menu sequence ?', + 'header.menu.basemsg': '璇峰畬鍠勮彍鍗曞熀鏈俊鎭紒', + 'header.menu.template.empty': '鑿滃崟妯℃澘涓㈠け锛岃閲嶆柊閫夋嫨妯℃澘锛�', + 'header.menu.template.change': '鍒囨崲妯℃澘', 'header.menu.addtitle': 'The new menu', 'header.menu.editTitle': 'The edit menu', 'header.menu.menuID': 'Menu ID', @@ -40,16 +43,26 @@ 'header.menu.thawmenu.target': 'Unfreeze', 'header.menu.thawmenu.itemUnit': 'item', 'header.menu.thawmenu.itemsUnit': 'items', + 'header.form.search.placeholder': '璇锋坊鍔犳悳绱㈡潯浠�', + 'header.form.action.placeholder': '璇锋坊鍔犳寜閽�', + 'header.form.column.placeholder': '璇锋坊鍔犳樉绀哄垪', 'header.form.name': 'Name', 'header.form.field': '瀛楁', - 'header.form.func': '瀛樺偍杩囩▼', + 'header.form.func': '鍑芥暟鍚�', + 'header.form.callbackFunc': '鍥炶皟鍑芥暟', + 'header.form.intertype': '鎺ュ彛绫诲瀷', + 'header.form.interface': '鎺ュ彛鍦板潃', + 'header.form.interface.inner': '鍐呴儴', + 'header.form.interface.outer': '澶栭儴', + 'header.form.pageTemplate': '椤甸潰妯℃澘', 'header.form.type': 'Type', 'header.form.text': 'Text', 'header.form.select': 'Select', + 'header.form.link': '鍏宠仈鑿滃崟', 'header.form.dateday': 'Date(Day)', 'header.form.datetime': 'Date(Second)', 'header.form.initval': 'Initial Value', - 'header.form.isRequired': '鏄惁閫夋嫨琛�', + 'header.form.isRequired': '琛岃缃�', 'header.form.notRequired': '涓嶉�夋嫨琛�', 'header.form.requiredSgl': '閫夋嫨鍗曡', 'header.form.required': '閫夋嫨澶氳', @@ -73,5 +86,20 @@ 'header.form.true': '鏄�', 'header.form.false': '鍚�', 'header.form.setAll': '璁剧疆鍏ㄩ儴椤�', - 'form.required.input': 'Please enter the ' + 'header.form.resourceType': '閫夐」鏉ユ簮', + 'header.form.custom': '鑷畾涔�', + 'header.form.datasource': '鏁版嵁婧�', + 'header.form.valueField': '鍊悸峰瓧娈�', + 'header.form.valueText': '鏂囨湰路瀛楁', + 'header.form.orderBy': '鎺掑簭路瀛楁', + 'header.form.orderType': '鎺掑簭鏂瑰紡', + 'header.form.asc': '姝e簭', + 'header.form.desc': '鍊掑簭', + 'header.form.linkField': '鍏宠仈瀛楁', + 'header.form.display': '鏄剧ず鏂瑰紡', + 'header.form.dropdown': '涓嬫媺鑿滃崟', + 'header.form.button': '鎸夐挳', + 'header.form.selectItem.error': '涓嬫媺閫夐」璁剧疆閿欒锛�', + 'form.required.input': 'Please enter the ', + 'form.required.select': '璇烽�夋嫨' } \ No newline at end of file diff --git a/src/locales/zh-CN/header.js b/src/locales/zh-CN/header.js index 2a4f8e6..e9b2a23 100644 --- a/src/locales/zh-CN/header.js +++ b/src/locales/zh-CN/header.js @@ -24,6 +24,9 @@ 'header.menu.update': '纭畾淇敼鑿滃崟銆夽M銆嬬殑閰嶇疆淇℃伅鍚楋紵', 'header.menu.presave': '鑿滃崟椤哄簭宸茶皟鏁达紝璇蜂繚瀛橈紒', 'header.menu.resetorder': '纭璋冩暣鑿滃崟椤哄簭鍚楋紵', + 'header.menu.basemsg': '璇峰畬鍠勮彍鍗曞熀鏈俊鎭紒', + 'header.menu.template.empty': '鑿滃崟妯℃澘涓㈠け锛岃閲嶆柊閫夋嫨妯℃澘锛�', + 'header.menu.template.change': '鍒囨崲妯℃澘', 'header.menu.addtitle': '鏂板缓鑿滃崟', 'header.menu.editTitle': '缂栬緫鑿滃崟', 'header.menu.menuID': '鑿滃崟ID', @@ -40,16 +43,26 @@ 'header.menu.thawmenu.target': '瑙i櫎鍐荤粨', 'header.menu.thawmenu.itemUnit': '椤�', 'header.menu.thawmenu.itemsUnit': '椤�', + 'header.form.search.placeholder': '璇锋坊鍔犳悳绱㈡潯浠�', + 'header.form.action.placeholder': '璇锋坊鍔犳寜閽�', + 'header.form.column.placeholder': '璇锋坊鍔犳樉绀哄垪', 'header.form.name': '鍚嶇О', 'header.form.field': '瀛楁', - 'header.form.func': '瀛樺偍杩囩▼', + 'header.form.func': '鍑芥暟鍚�', + 'header.form.callbackFunc': '鍥炶皟鍑芥暟', + 'header.form.intertype': '鎺ュ彛绫诲瀷', + 'header.form.interface': '鎺ュ彛鍦板潃', + 'header.form.interface.inner': '鍐呴儴', + 'header.form.interface.outer': '澶栭儴', + 'header.form.pageTemplate': '椤甸潰妯℃澘', 'header.form.type': '绫诲瀷', 'header.form.text': '鏂囨湰', 'header.form.select': '閫夋嫨', + 'header.form.link': '鍏宠仈鑿滃崟', 'header.form.dateday': '鏃ユ湡锛堝ぉ锛�', 'header.form.datetime': '鏃ユ湡锛堢锛�', 'header.form.initval': '鍒濆鍊�', - 'header.form.isRequired': '鏄惁閫夋嫨琛�', + 'header.form.isRequired': '琛岃缃�', 'header.form.notRequired': '涓嶉�夋嫨琛�', 'header.form.requiredSgl': '閫夋嫨鍗曡', 'header.form.required': '閫夋嫨澶氳', @@ -82,6 +95,11 @@ 'header.form.orderType': '鎺掑簭鏂瑰紡', 'header.form.asc': '姝e簭', 'header.form.desc': '鍊掑簭', - 'form.required.input': '璇疯緭鍏�' - + 'header.form.linkField': '鍏宠仈瀛楁', + 'header.form.display': '鏄剧ず鏂瑰紡', + 'header.form.dropdown': '涓嬫媺鑿滃崟', + 'header.form.button': '鎸夐挳', + 'header.form.selectItem.error': '涓嬫媺閫夐」璁剧疆閿欒锛�', + 'form.required.input': '璇疯緭鍏�', + 'form.required.select': '璇烽�夋嫨' } \ No newline at end of file -- Gitblit v1.8.0