update 页面

src/pages/dc/subscribe/components/Edit/index.js

@@ -11,102 +11,133 @@ export default class Index extends Component {
       params: {}
     }
     this.formSetting = [
-    //   {
-    //   label: '规则名',
-    //   type: 'input',
-    //   key: 'rule',
-    //   isRequired: true,
-    //   placeholder: '请输入'
-    // },
-    // {
-    //   label: '接口名',
-    //   type: 'input',
-    //   key: 'url',
-    //   isRequired: true,
-    //   placeholder: '请输入'
-    // },
-    // {
-    //   label: '状态',
-    //   type: 'select',
-    //   key: 'status',
-    //   options: [
-    //     { value: 1, label: '可运行' },
-    //     { value: 2, label: '停止' }
-    //   ],
-    //   style: { width: '100%' },
-    //   isRequired: true,
-    //   placeholder: '请输入'
-    // }, {
-    //   label: '描述',
-    //   type: 'input',
-    //   key: 'desc',
-    //   isRequired: true,
-    //   placeholder: '请输入'
-    // },
+      {
+      label: '订阅描述',
+      type: 'input',
+      key: 'description',
+      isRequired: true,
+      placeholder: '请输入'
+    },
     {
-      label: 'JSON',
-      formItemLayout:{
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 1 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 23 },
-        },
-      },
-      render: () => {
-        const { fieldsJson } = this.state.params
-        return <div>
-          <div><Icon type="plus" onClick={() => {
-            fieldsJson.push({})
-            this.onParamsChange('fieldsJson', fieldsJson)
-          }}/></div>
-          <div className={s.spanMargin}>
-            <span>* 订阅描述</span>
-            <span>* 查询名</span>
-            <span>* 唯一标识</span>
-            <span>* 返回数据字段</span>
-            <span>* 订阅类型</span>
-            <span>* 缓存类型-天</span>
-            <span>* 缓存类型-小时</span>
-            <span>* 操作</span>
-          </div>
-          <div>
-            {fieldsJson.map((f, index) => <div>
-              <Input value={f.description} onChange={(e) => {
-                fieldsJson[index].description = e.target.value
-                this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 120, marginRight: 10 }}/>
-              <Input value={f.name} onChange={(e) => {
-                fieldsJson[index].name = e.target.value
-                this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 120, marginRight: 10 }}/>
-              <Input value={f.uniqueId} onChange={(e) => {
-                fieldsJson[index].uniqueId = e.target.value
-                this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 120, marginRight: 10 }}/>
-              <Input value={f.fields} onChange={(e) => {
-                fieldsJson[index].fields = e.target.value
-                this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 120, marginRight: 10 }}/>
-              <Select value={f.type} style={{width:120, marginRight: 10}}>
-                <Select.Option value={1}>自增</Select.Option>
-                <Select.Option value={2}>变量增加</Select.Option>
-              </Select>
-              <Checkbox style={{width:120, marginRight: 10}}>按天缓存</Checkbox>
-              <Checkbox style={{width:120, marginRight: 10}}>按小时缓存</Checkbox>
-              <Button type="primary"  onClick={this.clickSaveJob} size="small" style={{marginRight: 5}}>保存</Button>
-              <Button type="danger" onClick={this.clickDeleteJob} size="small" onClick={this.deleteItem(index)}>删除</Button>
-              {/* <Icon onClick={(e) => {
-                fieldsJson.splice(index, 1)
-                this.onParamsChange('fieldsJson', fieldsJson)
-              }} type="close"/> */}
-            </div>)}
-          </div>
-        </div>
-      }
-    }]
+      label: '订阅主题',
+      type: 'input',
+      key: 'topic',
+      isRequired: true,
+      placeholder: '请输入'
+    },
+    {
+      label: '回调地址',
+      type: 'input',
+      key: 'url',
+      isRequired: true,
+      placeholder: '请输入'
+    }, {
+      label: '订阅数据库',
+      type: 'input',
+      key: 'subDb',
+      isRequired: true,
+      placeholder: '请输入'
+    },
+    {
+      label:'订阅数据表',
+      type:'input',
+      key:'subTable',
+      isRequired:true,
+      placeholder:'请输入'
+    },
+    {
+      label:'订阅事件',
+      type:'input',
+      key:'subEvent',
+      isRequired:true,
+      placeholder:'请输入'
+    },
+    {
+      label:'订阅字段',
+      type:'input',
+      key:'subFields',
+      isRequired:true,
+      placeholder:'请输入'
+    },
+    {
+      label:'过滤条件',
+      type:'input',
+      key:'subFilter',
+      isRequired:true,
+      placeholder:'请输入'
+    },
+    {
+      label:'回调参数',
+      type:'input',
+      key:'params',
+      isRequired:true,
+      placeholder:'请输入'
+    },
+    // {
+    //   label: 'JSON',
+    //   formItemLayout:{
+    //     labelCol: {
+    //       xs: { span: 24 },
+    //       sm: { span: 1 },
+    //     },
+    //     wrapperCol: {
+    //       xs: { span: 24 },
+    //       sm: { span: 23 },
+    //     },
+    //   },
+    //   render: () => {
+    //     const { fieldsJson } = this.state.params
+    //     return <div>
+    //       <div><Icon type="plus" onClick={() => {
+    //         fieldsJson.push({})
+    //         this.onParamsChange('fieldsJson', fieldsJson)
+    //       }}/></div>
+    //       <div className={s.spanMargin}>
+    //         <span>* 订阅描述</span>
+    //         <span>* 查询名</span>
+    //         <span>* 唯一标识</span>
+    //         <span>* 返回数据字段</span>
+    //         <span>* 订阅类型</span>
+    //         <span>* 缓存类型-天</span>
+    //         <span>* 缓存类型-小时</span>
+    //         <span>* 操作</span>
+    //       </div>
+    //       <div>
+    //         {fieldsJson.map((f, index) => <div>
+    //           <Input value={f.description} onChange={(e) => {
+    //             fieldsJson[index].description = e.target.value
+    //             this.onParamsChange('fieldsJson', fieldsJson)
+    //           }} style={{ width: 120, marginRight: 10 }}/>
+    //           <Input value={f.name} onChange={(e) => {
+    //             fieldsJson[index].name = e.target.value
+    //             this.onParamsChange('fieldsJson', fieldsJson)
+    //           }} style={{ width: 120, marginRight: 10 }}/>
+    //           <Input value={f.uniqueId} onChange={(e) => {
+    //             fieldsJson[index].uniqueId = e.target.value
+    //             this.onParamsChange('fieldsJson', fieldsJson)
+    //           }} style={{ width: 120, marginRight: 10 }}/>
+    //           <Input value={f.fields} onChange={(e) => {
+    //             fieldsJson[index].fields = e.target.value
+    //             this.onParamsChange('fieldsJson', fieldsJson)
+    //           }} style={{ width: 120, marginRight: 10 }}/>
+    //           <Select value={f.type} style={{width:120, marginRight: 10}}>
+    //             <Select.Option value={1}>自增</Select.Option>
+    //             <Select.Option value={2}>变量增加</Select.Option>
+    //           </Select>
+    //           <Checkbox style={{width:120, marginRight: 10}}>按天缓存</Checkbox>
+    //           <Checkbox style={{width:120, marginRight: 10}}>按小时缓存</Checkbox>
+    //           <Button type="primary"  onClick={this.clickSaveJob} size="small" style={{marginRight: 5}}>保存</Button>
+    //           <Button type="danger" onClick={this.clickDeleteJob} size="small" onClick={this.deleteItem(index)}>删除</Button>
+    //           {/* <Icon onClick={(e) => {
+    //             fieldsJson.splice(index, 1)
+    //             this.onParamsChange('fieldsJson', fieldsJson)
+    //           }} type="close"/> */}
+    //         </div>)}
+    //       </div>
+    //     </div>
+    //   }
+    // }
+    ]
   }
 
   clickSaveJob = () => {

src/pages/dc/subscribe/components/Job/index.js

@@ -0,0 +1,138 @@
+import React, { Component } from 'react'
+import { Modal, Input, Icon, Select, Radio, Checkbox, Button } from 'antd'
+import { FormItem } from 'wptpc-design'
+import s from './index.less'
+// import CheckBox from 'rc-checkbox'
+
+export default class JobModal extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      params: {}
+    }
+    debugger;
+    this.formSetting = [
+    {
+      label: 'JSON',
+      formItemLayout:{
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 1 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 23 },
+        },
+      },
+      render: () => {
+        const { fieldsJson } = this.state.params
+        return <div>
+          <div><Icon type="plus" onClick={() => {
+            fieldsJson.push({})
+            this.onParamsChange('fieldsJson', fieldsJson)
+          }}/></div>
+          <div className={s.spanMargin}>
+            <span>* 订阅描述</span>
+            <span>* 查询名</span>
+            <span>* 唯一标识</span>
+            <span>* 返回数据字段</span>
+            <span>* 订阅类型</span>
+            <span>* 缓存类型-天</span>
+            <span>* 缓存类型-小时</span>
+            <span>* 操作</span>
+          </div>
+          <div>
+            {fieldsJson.map((f, index) => <div>
+              <Input value={f.description} onChange={(e) => {
+                fieldsJson[index].description = e.target.value
+                this.onParamsChange('fieldsJson', fieldsJson)
+              }} style={{ width: 120, marginRight: 10 }}/>
+              <Input value={f.name} onChange={(e) => {
+                fieldsJson[index].name = e.target.value
+                this.onParamsChange('fieldsJson', fieldsJson)
+              }} style={{ width: 120, marginRight: 10 }}/>
+              <Input value={f.uniqueId} onChange={(e) => {
+                fieldsJson[index].uniqueId = e.target.value
+                this.onParamsChange('fieldsJson', fieldsJson)
+              }} style={{ width: 120, marginRight: 10 }}/>
+              <Input value={f.fields} onChange={(e) => {
+                fieldsJson[index].fields = e.target.value
+                this.onParamsChange('fieldsJson', fieldsJson)
+              }} style={{ width: 120, marginRight: 10 }}/>
+              <Select value={f.type} style={{width:120, marginRight: 10}}>
+                <Select.Option value={1}>自增</Select.Option>
+                <Select.Option value={2}>变量增加</Select.Option>
+              </Select>
+              <Checkbox style={{width:120, marginRight: 10}}>按天缓存</Checkbox>
+              <Checkbox style={{width:120, marginRight: 10}}>按小时缓存</Checkbox>
+              <Button type="primary"  onClick={this.clickSaveJob} size="small" style={{marginRight: 5}}>保存</Button>
+              <Button type="danger" onClick={this.clickDeleteJob} size="small" onClick={this.deleteItem(index)}>删除</Button>
+              {/* <Icon onClick={(e) => {
+                fieldsJson.splice(index, 1)
+                this.onParamsChange('fieldsJson', fieldsJson)
+              }} type="close"/> */}
+            </div>)}
+          </div>
+        </div>
+      }
+    }]
+  }
+
+  clickSaveJob = () => {
+    console.log('save');
+
+  }
+
+  deleteItem = (index) => () => {
+    const { params } = this.state;
+    const { fieldsJson } = params;
+    fieldsJson.splice(index, 1);
+    this.setState({
+      params:{
+        ...params,
+        fieldsJson,
+      }
+    });
+  }
+
+  clickDeleteJob = () => {
+    console.log('delete')
+  }
+
+  // 组件挂在的时候调用的生命周期函数
+  componentDidMount () {
+    const params = { ...this.props.params }
+    this.setState({ params })
+  }
+
+  onOk = () => {
+    const params = { ...this.state.params }
+    this.props.onOk(params)
+  }
+
+  // 表单里面的控件修改的时候出发onchange事件
+  onParamsChange = (key, value) => {
+    const params = { ...this.state.params }
+    params[key] = value
+    this.setState({ params })
+  }
+
+  render () {
+    const { showModal, onCancel, loading } = this.props
+    const { params } = this.state
+
+    return (
+      <Modal
+        title={'创建'}
+        visible={showModal}
+        onOk={this.onOk}
+        onCancel={onCancel}
+        // 确认按钮点击后，发起接口会处罚loading值的变化，从而控制确认按钮的状态（disable or enable）
+        okButtonProps={{ disabled: loading }}
+        width={1200}
+      >
+        <FormItem formSetting={this.formSetting} params={params} onChange={this.onParamsChange} />
+      </Modal>
+    )
+  }
+}

src/pages/dc/subscribe/components/Job/index.less

@@ -0,0 +1,7 @@
+.spanMargin > span {
+    display: inline-flex;;
+    width: 130px;
+    font-weight: bold;
+    text-align: center;
+  }
+  

src/pages/dc/subscribe/data.js

@@ -4,6 +4,7 @@ import { Divider, message, Popconfirm } from 'antd'
 import { FilterTable } from 'wptpc-design'
 import s from './data.less'
 import Edit from './components/Edit'
+import Job from './components/Job'
 import { dc } from '@/conf/config'
 
 const apiUrl = `${dc}/dc/web/get-sub-rule-list`
@@ -16,7 +17,11 @@ class Index extends React.PureComponent {
   state = {
     // 这两个state字段用来进行表单显示、隐藏控制以及表单里面的数据
     showModal: false,
-    params: {}
+    params: {},
+    jobModel:{
+      state: false,
+      params: {},
+    }
   }
 
   // filtertable的搜索项配置
@@ -131,10 +136,12 @@ class Index extends React.PureComponent {
       cacheHour:fields[f].cacheHour
     }))
     this.setState({
-      showModal: true,
-      params: {
-        ...record,
-        fieldsJson
+      jobModel:{
+        state: true,
+        params:{
+          ...record,
+          fieldsJson
+        }
       }
     })
   }
@@ -152,7 +159,7 @@ class Index extends React.PureComponent {
       showModal: true,
       params: {
         ...record,
-        fieldsJson
+        fieldsJson,
       }
     })
   }
@@ -226,8 +233,17 @@ class Index extends React.PureComponent {
     })
   }
 
+  onJobModalClose = () => {
+    this.setState({
+      jobModel:{
+        state: false,
+        params:{},
+      }
+    });
+  }
+
   render () {
-    const { showModal, params } = this.state
+    const { showModal, params, jobModel } = this.state
     const { actionLoading } = this.props
 
     return (
@@ -236,6 +252,7 @@ class Index extends React.PureComponent {
           isPage={false}/>
         {showModal && <Edit showModal={showModal} params={params} onCancel={this.onModalCancel} onOk={this.onModalOk}
           loading={actionLoading}/>}
+        {jobModel.state && <Job showModal={jobModel.state} params={jobModel.params} onCancel={this.onJobModalClose} onOk={this.onJobModalClose} />}
       </div>
     )
   }