slide列表删除

pc4mobx/hrmSalary/components/EditTable/index.js

@@ -1,9 +1,10 @@
-import { Table, Input, Icon, Button, Popconfirm } from 'antd';
+import { Table, Input, Icon, Button, Popconfirm, Popover, Tooltip } from 'antd';
 import "./index.less"
 
 export class EditableCell extends React.Component {
   state = {
     value: this.props.value,
+    record: this.props.record
   }
   handleChange = (e) => {
     const value = e.target.value;
@@ -13,14 +14,16 @@ export class EditableCell extends React.Component {
   render() {
     const { value, editable } = this.state;
     return (
-      <div className="editable-cell">
-        <div className="editable-cell-input-wrapper">
+     
+        <div className="editable-cell">
+          <div className="editable-cell-input-wrapper">
             <Input
-            value={value}
-            onChange={this.handleChange}
+              value={value}
+              onChange={this.handleChange}
             />
+          </div>
         </div>
-      </div>
+      
     );
   }
 }
@@ -31,69 +34,69 @@ export default class EditableTable extends React.Component {
     const { columns } = this.props;
     this.columns = columns;
     this.columns.map(item => {
-        if(item.editable) {
-            item.render = (text, record) => (
-                <EditableCell
-                  value={text}
-                  onChange={this.onCellChange(record.key, item.dataIndex)}
-                />
-            )
-        }
+      if (item.editable) {
+        item.render = (text, record) => (
+          <EditableCell
+            value={text}
+            record={record}
+            onChange={this.onCellChange(record.key, item.dataIndex)}
+          />
+        )
+      }
 
-        if(item.children) {
-            item.children.map(child => {
-                if(child.editable) {
-                    child.render = (text, record) => (
-                        <EditableCell
-                            value={text}
-                            onChange={this.onCellChange(record.key, child.dataIndex)}
-                        />
-                    )
-                }
-            }
+      if(item.popover) {
+        item.render = (text, record) => (
+          <Tooltip title={
+            <div className="popoverBtnWrapper">
+              <i className="icon-coms-Delete popBtnItem" onClick={() => {this.onItemDelete(record)}} />
+            </div>
+          }>
+            <div>{text}</div>
+          </Tooltip>
+        )
+        
+      }
+
+      if (item.children) {
+        item.children.map(child => {
+          if (child.editable) {
+            child.render = (text, record) => (
+              <EditableCell
+                value={text}
+                onChange={this.onCellChange(record.key, child.dataIndex)}
+              />
             )
+          }
         }
+        )
+      }
     })
 
-    this.state = {
-      dataSource: this.props.dataSource,
-    };
   }
   onCellChange = (key, dataIndex) => {
     return (value) => {
-      const dataSource = [...this.state.dataSource];
+      const dataSource = [...this.props.dataSource];
       const target = dataSource.find(item => item.key === key);
       if (target) {
         target[dataIndex] = value;
         this.props.onDataSourceChange(dataSource)
       }
-      
+
     };
   }
-  onDelete = (key) => {
-    const dataSource = [...this.state.dataSource];
-    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
-  }
-  handleAdd = () => {
-    const { count, dataSource } = this.state;
-    const newData = {
-      key: count,
-      name: `Edward King ${count}`,
-      age: 32,
-      address: `London, Park Lane no. ${count}`,
-    };
-    this.setState({
-      dataSource: [...dataSource, newData],
-      count: count + 1,
-    });
+
+  onItemDelete = (record) => {
+    let dataSource = [...this.props.dataSource];
+    dataSource = dataSource.filter(item => item.indexNum != record.indexNum)
+    dataSource.map((item, index) => {item.indexNum = index + 1})
+    this.props.onDataSourceChange(dataSource)
   }
   render() {
-    const { dataSource } = this.state;
     const columns = this.columns;
     return (
       <div>
         <div className="operateWrapper">
-            <i className="icon-coms-tianjia operateItem" onClick={() => {this.props.addItem()}}/>
+          <i className="icon-coms-tianjia operateItem" onClick={() => { this.props.addItem() }} />
         </div>
         <Table columns={this.columns} dataSource={this.props.dataSource} {...this.props} />
       </div>

pc4mobx/hrmSalary/components/EditTable/index.less

@@ -47,4 +47,10 @@
         cursor: pointer;
         color: #2db7f5;
     }
+}
+
+.popoverBtnWrapper {
+  .popBtnItem {
+    cursor: pointer;
+  }
 }

pc4mobx/hrmSalary/pages/taxRate/columns.js

@@ -43,6 +43,7 @@ export const slideColumns = [
       title: '序号',
       dataIndex: 'indexNum',
       key: 'indexNum',
+      popover: true
     },
     {
       title: '收入',