添加两个属性页面

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,8 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="RequiredAttributes" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myAdditionalRequiredHtmlAttributes" value="align,htmlType" />
+    </inspection_tool>
+  </profile>
+</component>

package.json

@@ -80,7 +80,8 @@
     "webpack": "4.19.1",
     "webpack-dev-server": ">=3.1.11",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.2"
+    "workbox-webpack-plugin": "3.6.2",
+    "prop-types": "latest"
   },
   "scripts": {
     "start": "node scripts/start.js",
@@ -143,4 +144,4 @@
     "eslint-plugin-react-hooks": "^1.6.0"
   },
   "description": "项目的管理后台"
-}
+}

src/pages/config/CommonConfig.js

@@ -0,0 +1,14 @@
+
+import React from 'react'
+
+class CommonConfig extends React.Component{
+
+
+    render() {
+        return (<div>通用的配置</div>)
+    }
+
+}
+
+
+export default CommonConfig

src/pages/config/ConfigLabel.js

@@ -61,11 +61,11 @@ class ConfigLabel extends React.Component {
     }
 
     render() {
-        const { data: labelList = {} } = this.props.findPLabel || {};
+        const { data: labelList = {} ,isFetching} = this.props.findPLabel || {};
         const { currentLabel, loading, addModalTitle } = this.state;
         return (<div>
             <div className='prop-label-header'>
-                <Button type='primary' icon='sync' onClick={this._fetchLabels.bind(this)}/>
+                <Button type='primary' icon='sync' loading={isFetching} onClick={this._fetchLabels.bind(this)}/>
                 <Button type='primary' icon='plus' onClick={()=>this.setState({currentLabel:{}})}/>
             </div>
 
@@ -99,4 +99,4 @@ class ConfigLabel extends React.Component {
 
 }
 
-export default withRouter(connectAlita(['findPLabel'])(ConfigLabel));
+export default withRouter(connectAlita(['findPLabel'])(ConfigLabel));

src/pages/config/SystemProperties.js

@@ -1,13 +1,23 @@
 import React from 'react'
+import { Button } from 'antd';
+import SystemPropertiesForm from './widget/SystemPropertiesForm';
 
 
 export default class SystemProperties extends React.Component{
     constructor(props){
         super(props);
+        this.state={
+            addModalVisible:false
+        }
     }
 
     render() {
-        return (<div>系统的基本属性配置</div>)
+        return (<div>
+            <Button htmlType='button' type='primary' onClick={()=>this.setState({addModalVisible:true})} icon='plus'/>
+            <SystemPropertiesForm visible={this.state.addModalVisible}
+                                  onHide={()=>this.setState({addModalVisible:false})}/>
+            系统的基本属性配置
+        </div>)
     }
 
 }

src/pages/config/widget/AddLabelForm.js

@@ -27,15 +27,16 @@ class AddLabelForm extends React.Component {
     handleSubmit = e => {
         e.preventDefault();
         const _this = this;
+        let params = { id: _this.state.label.id, pid: _this.state.label.pid };
         this.props.form.validateFieldsAndScroll((err, values) => {
             if (!err) {
                 if (_this.state.label.id) {
-                    _this.props.setAlitaState({ funcName: 'labelEdit', params: values })
-                        .then((resp)=>{
-                            console.log(' resp ',resp)
-                        })
+                    _this.props.setAlitaState({ funcName: 'labelEdit', params: { ...values, ...params } })
+                        .then((resp) => {
+                            console.log(' resp ', resp);
+                        });
                 } else {
-                    _this.props.setAlitaState({ funcName: 'labelAdd', params: values });
+                    _this.props.setAlitaState({ funcName: 'labelAdd', params: { ...values, ...params } });
                 }
             }
         });
@@ -57,13 +58,12 @@ class AddLabelForm extends React.Component {
     }
 
     render() {
-        console.log('props=>',this.props)
         const { getFieldDecorator } = this.props.form;
         let { label } = this.props;
         if (!label) return null;
         const { data: dataSource, isFetching } = this.props.searchLabel || { data: {} };
-        const { isFetching: isSubmitLoading } = this.props.labelAdd||{};
-        const { isFetching: isEditLoading } = this.props.labelEdit||{};
+        const { isFetching: isSubmitLoading } = this.props.labelAdd || {};
+        const { isFetching: isEditLoading } = this.props.labelEdit || {};
 
         if (!dataSource.records) dataSource.records = [];
         return (<Form onSubmit={this.handleSubmit}>
@@ -74,12 +74,6 @@ class AddLabelForm extends React.Component {
                                                          onSelect={this.onSelect.bind(this, dataSource.records)}
                                                          placeholder='输入关键词查询上级标签'/>)}
             </Form.Item>)}
-            <Form.Item style={{ display: 'none' }}>
-                {getFieldDecorator('id', { initialValue: label.id })}(<Input/>
-            </Form.Item>
-            <Form.Item style={{ display: 'none' }}>
-                {getFieldDecorator('pid', { initialValue: label.pid })}(<Input/>
-            </Form.Item>
             <Form.Item>
                 {getFieldDecorator('label', {
                     rules: [{ required: true, message: '请输入标签' }],
@@ -103,4 +97,4 @@ class AddLabelForm extends React.Component {
 
 }
 
-export default connectAlita(['searchLabel', 'labelAdd','labelEdit'])(Form.create({ name: 'AddLabelForm' })(AddLabelForm));
+export default connectAlita(['searchLabel', 'labelAdd', 'labelEdit'])(Form.create({ name: 'AddLabelForm' })(AddLabelForm));

src/pages/config/widget/SystemPropertiesForm.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Modal, Form, Input } from 'antd';
+import { connectAlita } from 'redux-alita';
+import * as PropTypes from 'prop-types'
+
+class SystemPropertiesForm extends React.Component {
+
+
+    static defaultProps = {
+        visible: false,
+        config:{},
+        onHide:()=>{}
+    };
+
+    static propTypes={
+        visible:PropTypes.bool,
+        config:PropTypes.object,
+        onHide:PropTypes.func
+    };
+
+    render() {
+        const { getFieldDecorator } = this.props.form;
+        let {config,visible,onHide} = this.props;
+        return (<Modal  title={config.id?'编辑配置':'添加配置'} visible={visible} onCancel={onHide}>
+            <Form>
+                <Form.Item>
+                    {getFieldDecorator('title')(<Input/>)}
+                </Form.Item>
+            </Form>
+        </Modal>);
+
+
+    }
+
+}
+
+export default connectAlita([])(Form.create()(SystemPropertiesForm));

src/pages/index.js

@@ -1,7 +1,6 @@
-import PropertiesLabel from './config/PropertiesLabel'
-import SystemProperties from './config/SystemProperties'
+import SystemProperties from './config/SystemProperties';
 
 
 export default {
-    PropertiesLabel,SystemProperties
-}
+    SystemProperties,
+};

src/routes/config.js

@@ -1,4 +1,5 @@
 import ConfigLabel from '../pages/config/ConfigLabel';
+import CommonConfig from '../pages/config/CommonConfig';
 
 export default {
     menus: [
@@ -6,7 +7,12 @@ export default {
         { key: '/app/dashboard/index', title: '首页', icon: 'mobile', component: 'Dashboard' },
         {
             key: '/app/config', title: '配置中心', icon: 'mobile',
-            subs: [{ key: '/app/config/label', title: '属性标签', component: ConfigLabel}],
+            subs: [
+                { key: '/app/config/label', title: '属性标签', component: ConfigLabel },
+                { key: '/app/config/properties', title: '微服务配置', component: 'SystemProperties' },
+                { key: '/app/config/common', title: '通用配置', component: CommonConfig },
+            ],
+
         },
         {
             key: '/app/ui',
@@ -26,15 +32,6 @@ export default {
                 { key: '/app/ui/map', title: '地图', component: 'MapUi' },
             ],
         },
-        {
-            key: '/app/config',
-            title: '配置中心',
-            icon: 'scan',
-            subs: [
-                { key: '/app/config/label', title: '属性标签', component: 'PropertiesLabel' },
-                { key: '/app/config/properties', title: '系统配置', component: 'SystemProperties' },
-            ],
-        },
         {
             key: '/app/animation',
             title: '动画',

yarn.lock

@@ -7188,6 +7188,15 @@ prop-types@^15.6.1, prop-types@~15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@latest:
+  version "15.7.2"
+  resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"