add

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

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import { Modal, Input, Icon, Select, Radio } from 'antd'
+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'
+// import CheckBox from 'rc-checkbox'
 
 export default class Index extends Component {
   constructor (props) {
@@ -45,6 +45,16 @@ export default class Index extends Component {
     // },
     {
       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>
@@ -60,49 +70,66 @@ export default class Index extends Component {
             <span>* 订阅类型</span>
             <span>* 缓存类型-天</span>
             <span>* 缓存类型-小时</span>
+            <span>* 操作</span>
           </div>
           <div>
             {fieldsJson.map((f, index) => <div>
-              <Input value={f.key} onChange={(e) => {
-                fieldsJson[index].key = e.target.value
-                this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 130, marginRight: 10 }}/>
               <Input value={f.description} onChange={(e) => {
                 fieldsJson[index].description = e.target.value
                 this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 130, marginRight: 10 }}/>
+              }} style={{ width: 120, marginRight: 10 }}/>
               <Input value={f.name} onChange={(e) => {
                 fieldsJson[index].name = e.target.value
                 this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 130, marginRight: 10 }}/>
+              }} style={{ width: 120, marginRight: 10 }}/>
               <Input value={f.uniqueId} onChange={(e) => {
                 fieldsJson[index].uniqueId = e.target.value
                 this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 130, marginRight: 10 }}/>
+              }} style={{ width: 120, marginRight: 10 }}/>
               <Input value={f.fields} onChange={(e) => {
                 fieldsJson[index].fields = e.target.value
                 this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 130, marginRight: 10 }}/>
-              <Select style={{width:130}}>
-                <Select.Option value="1" selected>自增</Select.Option>
-                <Select.Option value="1">变量增加</Select.Option>
+              }} 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>
-              <Input value={f.type} onChange={(e) => {
-                fieldsJson[index].type = e.target.value
-                this.onParamsChange('fieldsJson', fieldsJson)
-              }} style={{ width: 130, marginRight: 10 }}/>
-              <CheckBox>按天缓存</CheckBox>
-              <CheckBox>按小时缓存</CheckBox>
-              <Icon onClick={(e) => {
+              <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>)}
+              }} 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 }
@@ -133,7 +160,7 @@ export default class Index extends Component {
         onCancel={onCancel}
         // 确认按钮点击后，发起接口会处罚loading值的变化，从而控制确认按钮的状态（disable or enable）
         okButtonProps={{ disabled: loading }}
-        width={1800}
+        width={1200}
       >
         <FormItem formSetting={this.formSetting} params={params} onChange={this.onParamsChange} />
       </Modal>

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

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

src/pages/dc/subscribe/data.js

@@ -95,15 +95,11 @@ class Index extends React.PureComponent {
         dataIndex: 'actions',
         // 所有需要弹窗操作的都可以用编辑的逻辑；所有不需要弹窗的操作，比如上架、发布等，都可以用”删除“的逻辑
         render: (text, record) => <span><a onClick={() => this.editItem(record)}>编辑</a>
-        <Divider type="vertical"/><a onClick={()=> this.editJob(record)}>新增统计任务</a><Divider
+        <Divider type="vertical"/><a onClick={()=> this.editJob(record)}>任务</a><Divider
           type="vertical"/><Popconfirm
           title="确定删除"
           onConfirm={() => this.delItem(record)}>
           <a>删除</a>
-        </Popconfirm><Divider type="vertical"/><Popconfirm
-          title="确定执行"
-          onConfirm={() => this.execItem(record)}>
-          <a>执行</a>
         </Popconfirm></span>
       }
     ],