From 2a4edcdf826f7bc3177d17a58b9e24d653c6e44b Mon Sep 17 00:00:00 2001
From: suxiaoxin <hellosean1025@163.com>
Date: Tue, 19 Sep 2017 17:20:37 +0800
Subject: [PATCH] feat: add drag case

---
 .../InterfaceCol/InterfaceColContent.js       | 182 +++++++++++++----
 .../InterfaceCol/InterfaceColMenu.scss        |  47 +++++
 npm-shrinkwrap.json                           | 185 ++++++++++++------
 package.json                                  |   5 +
 server/controllers/interfaceCol.js            |  12 +-
 server/router.js                              |   1 -
 6 files changed, 312 insertions(+), 120 deletions(-)

diff --git a/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js b/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js
index 0e56fbd1..808214cd 100755
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js
@@ -3,9 +3,17 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types'
 import { withRouter } from 'react-router'
 import { Link } from 'react-router-dom'
-import { Table, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { fetchInterfaceColList, fetchCaseList, setColData } from '../../../../reducer/modules/interfaceCol'
-import { formatTime } from '../../../../common.js'
+import HTML5Backend from 'react-dnd-html5-backend';
+import { DragDropContext } from 'react-dnd';
+
+// import { formatTime } from '../../../../common.js'
+import * as Table from 'reactabular-table';
+import * as dnd from 'reactabular-dnd';
+import * as resolve from 'table-resolver';
+import axios from 'axios'
+
 
 @connect(
   state => {
@@ -24,7 +32,8 @@ import { formatTime } from '../../../../common.js'
   }
 )
 @withRouter
-export default class InterfaceColContent extends Component {
+@DragDropContext(HTML5Backend)
+class InterfaceColContent extends Component {
 
   static propTypes = {
     match: PropTypes.object,
@@ -40,7 +49,13 @@ export default class InterfaceColContent extends Component {
   }
 
   constructor(props) {
-    super(props)
+    super(props);
+
+    this.state = {
+      rows: []
+    };
+    this.onRow = this.onRow.bind(this);
+    this.onMoveRow = this.onMoveRow.bind(this);
   }
 
   async componentWillMount() {
@@ -49,14 +64,55 @@ export default class InterfaceColContent extends Component {
     const params = this.props.match.params;
     const { actionId } = params;
     currColId = +actionId ||
-                result.payload.data.data.find(item => +item._id === +currColId) && +currColId ||
-                result.payload.data.data[0]._id;
+      result.payload.data.data.find(item => +item._id === +currColId) && +currColId ||
+      result.payload.data.data[0]._id;
     this.props.history.push('/project/' + params.id + '/interface/col/' + currColId)
-    if(currColId && currColId != 0){
-      this.props.fetchCaseList(currColId);
-      this.props.setColData({currColId: +currColId, isShowCol: true})
+    if (currColId && currColId != 0) {
+      await this.props.fetchCaseList(currColId);
+      this.props.setColData({ currColId: +currColId, isShowCol: true })
+      this.handleColdata(this.props.currCaseList)
+    }
+
+  }
+
+  handleColdata = (rows)=>{
+    rows = rows.map((item) => {
+      item.id = item._id;
+      return item;
+    })
+    rows = rows.sort((n, o)=>{
+      return n.index>o.index
+    })
+    this.setState({
+      rows: rows
+    })
+  }
+
+
+
+  onRow(row) {
+    return {
+      rowId: row.id,
+      onMove: this.onMoveRow
+    };
+  }
+  onMoveRow({ sourceRowId, targetRowId }) {
+    let rows = dnd.moveRows({
+      sourceRowId,
+      targetRowId
+    })(this.state.rows);
+    let changes = [];
+    rows.forEach((item, index)=>{
+      changes.push({
+        id: item._id,
+        index: index
+      })
+    })
+
+    axios.post('/api/col/up_col_index', changes).then()
+    if (rows) {
+      this.setState({ rows });
     }
-    
   }
 
   componentWillReceiveProps(nextProps) {
@@ -66,56 +122,96 @@ export default class InterfaceColContent extends Component {
     if (!interfaceColList.find(item => +item._id === +newColId)) {
       this.props.history.push('/project/' + id + '/interface/col/' + interfaceColList[0]._id)
     } else if (oldColId !== newColId) {
-      if(newColId && newColId != 0){
+      if (newColId && newColId != 0) {
         this.props.fetchCaseList(newColId);
-        this.props.setColData({currColId: +newColId, isShowCol: true})
+        this.props.setColData({ currColId: +newColId, isShowCol: true })
+        this.handleColdata(this.props.currCaseList)
       }
-      
+
     }
   }
 
   render() {
-
-    const { currCaseList } = this.props;
-
     const columns = [{
-      title: '用例名称',
-      dataIndex: 'casename',
-      key: 'casename',
-      render: (text, item)=>{
-        return <Link to={"/project/" + item.project_id + "/interface/case/" + item._id} >{text}</Link>
+      property: 'casename',
+      header: {
+        label: '用例名称'
+      },
+      cell: {
+        formatters: [
+          (text,{rowData}) => {
+            let record = rowData;
+            return <Link to={"/project/" + record.project_id + "/interface/case/" + record._id}>{record.casename}</Link>
+          }            
+        ]
       }
     }, {
-      title: '接口路径',
-      dataIndex: 'path',
-      key: 'path',
-      render: (path, record) => {
-        return (
-          <Tooltip title="跳转到对应接口">
-            <Link to={`/project/${record.project_id}/interface/api/${record.interface_id}`}>{path}</Link>
-          </Tooltip>
-        )
+      property: 'path',
+      header: {
+        label: '接口路径'
+      },
+      cell: {
+        formatters: [
+          (text,{rowData}) => {
+            let record = rowData;
+            return (
+              <Tooltip title="跳转到对应接口">
+                <Link to={`/project/${record.project_id}/interface/api/${record.interface_id}`}>{record.path}</Link>
+              </Tooltip>
+            )
+          }
+        ]
       }
     }, {
-      title: '请求方法',
-      dataIndex: 'method',
-      key: 'method'
-    }, {
-      title: '更新时间',
-      dataIndex: 'up_time',
-      key: 'up_time',
-      render: (item) => {
-        return <span>{formatTime(item)}</span>
+      header: {
+        label: '请求方法'
+      },
+      property: 'method'
+    }
+    ];
+    const { rows } = this.state;
+    if (rows.length === 0) {
+      return null;
+    }
+    const components = {
+      header: {
+        cell: dnd.Header
+      },
+      body: {
+        row: dnd.Row
       }
-    }];
+    };
+
+    const resolvedColumns = resolve.columnChildren({ columns });
+    const resolvedRows = resolve.resolve({
+      columns: resolvedColumns,
+      method: resolve.nested
+    })(rows);
 
     return (
       <div>
-        <div style={{padding:"16px"}}>
-          <h2 style={{marginBottom: '10px'}}>测试集合</h2>
-          <Table dataSource={currCaseList} columns={columns} pagination={false} rowKey="_id"/>
+        <div style={{ padding: "16px" }}>
+          <h2 style={{ marginBottom: '10px' }}>测试集合</h2>
+          <Table.Provider
+            components={components}
+            columns={resolvedColumns}
+            style={{width:'100%', lineHeight: '30px'}}
+          >
+            <Table.Header
+              style={{textAlign: 'left'}}
+              headerRows={resolve.headerRows({ columns })}
+            />
+
+            <Table.Body
+              rows={resolvedRows}
+              rowKey="id"
+              onRow={this.onRow}
+            />
+          </Table.Provider>
         </div>
       </div>
     )
   }
 }
+
+export default InterfaceColContent
\ No newline at end of file
diff --git a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
index 4fb8a4ab..e6c13fa1 100755
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
@@ -23,3 +23,50 @@
     }
   }
 }
+
+.container {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.container:nth-child(odd) {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+/*
+ * note that styling gu-mirror directly is a bad practice because it's too generic.
+ * you're better off giving the draggable elements a unique class and styling that directly!
+ */
+.container div,
+.gu-mirror {
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  transition: opacity 0.4s ease-in-out;
+}
+.container div {
+  cursor: move;
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  margin-bottom: 10px;
+}
+.container div:last-child {
+  margin-bottom: 0;
+}
+.gu-mirror {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}
+.container .ex-moved {
+  background-color: #e74c3c;
+}
+.container.ex-over {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.handle {
+  padding: 0 5px;
+  margin-right: 5px;
+  background-color: rgba(0, 0, 0, 0.4);
+  cursor: move;
+}
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 37106811..226ae18d 100755
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -1,6 +1,6 @@
 {
   "name": "yapi",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -240,7 +240,7 @@
     },
     "are-we-there-yet": {
       "version": "1.1.4",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
       "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
       "requires": {
         "delegates": "1.0.0",
@@ -428,7 +428,7 @@
     },
     "async-foreach": {
       "version": "0.1.3",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/async-foreach/-/async-foreach-0.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
     },
     "async-validator": {
@@ -1664,7 +1664,7 @@
     },
     "block-stream": {
       "version": "0.0.9",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/block-stream/-/block-stream-0.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
       "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
       "requires": {
         "inherits": "2.0.3"
@@ -2168,7 +2168,7 @@
     },
     "cli-source-preview": {
       "version": "1.1.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/cli-source-preview/-/cli-source-preview-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/cli-source-preview/-/cli-source-preview-1.1.0.tgz",
       "integrity": "sha1-BTA6sSeakJPq0aODez7iMfMAZUQ=",
       "requires": {
         "chalk": "1.1.3"
@@ -2176,7 +2176,7 @@
       "dependencies": {
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "2.2.1",
@@ -2492,7 +2492,7 @@
     },
     "console-control-strings": {
       "version": "1.1.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
     "consolidate": {
@@ -2707,7 +2707,7 @@
     },
     "cross-spawn": {
       "version": "3.0.1",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/cross-spawn/-/cross-spawn-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
       "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
       "requires": {
         "lru-cache": "4.1.1",
@@ -3196,6 +3196,22 @@
         "randombytes": "2.0.5"
       }
     },
+    "disposables": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/disposables/-/disposables-1.0.1.tgz",
+      "integrity": "sha1-BkcnoltU9QK9griaot+4358bOeM="
+    },
+    "dnd-core": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-2.5.1.tgz",
+      "integrity": "sha1-F49a1lJs4C3VlQjxFVNfe/wM6U4=",
+      "requires": {
+        "asap": "2.0.6",
+        "invariant": "2.2.2",
+        "lodash": "4.17.4",
+        "redux": "3.7.2"
+      }
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -4495,7 +4511,7 @@
     },
     "fs-promise": {
       "version": "0.5.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/fs-promise/-/fs-promise-0.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/fs-promise/-/fs-promise-0.5.0.tgz",
       "integrity": "sha1-Q0fWv2JGVacGGkMZITw5MnatPvM=",
       "requires": {
         "any-promise": "1.3.0",
@@ -4506,7 +4522,7 @@
       "dependencies": {
         "fs-extra": {
           "version": "0.26.7",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/fs-extra/-/fs-extra-0.26.7.tgz",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
           "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
           "requires": {
             "graceful-fs": "4.1.11",
@@ -5296,14 +5312,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
-          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -5314,6 +5322,14 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
+          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -5428,7 +5444,7 @@
     },
     "fstream": {
       "version": "1.0.11",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/fstream/-/fstream-1.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "requires": {
         "graceful-fs": "4.1.11",
@@ -5444,7 +5460,7 @@
     },
     "gauge": {
       "version": "2.7.4",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/gauge/-/gauge-2.7.4.tgz",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "requires": {
         "aproba": "1.1.2",
@@ -6051,7 +6067,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.0",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/async/-/async-1.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.0.tgz",
           "integrity": "sha1-J5ZkJyNXOFlWVjP8YnRES+4vjOM="
         },
         "loader-utils": {
@@ -6111,7 +6127,7 @@
     },
     "has-unicode": {
       "version": "2.0.1",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/has-unicode/-/has-unicode-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
     "hash-base": {
@@ -6464,7 +6480,7 @@
     },
     "in-publish": {
       "version": "2.0.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/in-publish/-/in-publish-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
     },
     "indent-string": {
@@ -8190,7 +8206,7 @@
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
     },
     "lodash.cond": {
@@ -8312,7 +8328,7 @@
     },
     "lodash.mergewith": {
       "version": "4.6.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
       "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU="
     },
     "lodash.once": {
@@ -8948,7 +8964,7 @@
     },
     "node-gyp": {
       "version": "3.6.2",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/node-gyp/-/node-gyp-3.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
       "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
       "requires": {
         "fstream": "1.0.11",
@@ -8968,7 +8984,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
         }
       }
@@ -9028,7 +9044,7 @@
     },
     "node-sass-china": {
       "version": "4.5.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/node-sass-china/-/node-sass-china-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-sass-china/-/node-sass-china-4.5.0.tgz",
       "integrity": "sha1-YnbBcNzqWBz14lwC/sqjUPcyx1Q=",
       "requires": {
         "async-foreach": "0.1.3",
@@ -9053,7 +9069,7 @@
       "dependencies": {
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "2.2.1",
@@ -9065,7 +9081,7 @@
         },
         "gaze": {
           "version": "1.1.2",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/gaze/-/gaze-1.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
           "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
           "requires": {
             "globule": "1.2.0"
@@ -9073,7 +9089,7 @@
         },
         "globule": {
           "version": "1.2.0",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/globule/-/globule-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
           "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
           "requires": {
             "glob": "7.1.2",
@@ -9083,7 +9099,7 @@
         },
         "lodash.assign": {
           "version": "4.2.0",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/lodash.assign/-/lodash.assign-4.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
           "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
         }
       }
@@ -9240,7 +9256,7 @@
     },
     "nopt": {
       "version": "3.0.6",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/nopt/-/nopt-3.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
       "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
       "requires": {
         "abbrev": "1.1.0"
@@ -11438,6 +11454,27 @@
         }
       }
     },
+    "react-dnd": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-2.5.1.tgz",
+      "integrity": "sha1-7O8dnYR4y3av1Zdc1RI+98O+v+U=",
+      "requires": {
+        "disposables": "1.0.1",
+        "dnd-core": "2.5.1",
+        "hoist-non-react-statics": "2.3.1",
+        "invariant": "2.2.2",
+        "lodash": "4.17.4",
+        "prop-types": "15.5.10"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-2.5.1.tgz",
+      "integrity": "sha1-02VuUUsMRpkCpIX/+nX4aE4hx3c=",
+      "requires": {
+        "lodash": "4.17.4"
+      }
+    },
     "react-dock": {
       "version": "0.2.4",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/react-dock/-/react-dock-0.2.4.tgz",
@@ -12182,6 +12219,19 @@
         "slick-carousel": "1.7.1"
       }
     },
+    "reactabular-dnd": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/reactabular-dnd/-/reactabular-dnd-8.9.0.tgz",
+      "integrity": "sha1-B5LeSto2H5Qlj4pqGg1svYPSpaA="
+    },
+    "reactabular-table": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/reactabular-table/-/reactabular-table-8.9.0.tgz",
+      "integrity": "sha1-RvbO9jnNm9SyuvHxTiaG+ys14oQ=",
+      "requires": {
+        "classnames": "2.2.5"
+      }
+    },
     "read-all-stream": {
       "version": "3.1.0",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -12588,22 +12638,6 @@
         }
       }
     },
-    "require_optional": {
-      "version": "1.0.1",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/require_optional/-/require_optional-1.0.1.tgz",
-      "integrity": "sha1-TPNaQkf2TKPfjC7yCMxJSxyo/C4=",
-      "requires": {
-        "resolve-from": "2.0.0",
-        "semver": "5.4.1"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "2.0.0",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/resolve-from/-/resolve-from-2.0.0.tgz",
-          "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
-        }
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/require-directory/-/require-directory-2.1.1.tgz",
@@ -12628,6 +12662,22 @@
         "resolve-from": "1.0.1"
       }
     },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha1-TPNaQkf2TKPfjC7yCMxJSxyo/C4=",
+      "requires": {
+        "resolve-from": "2.0.0",
+        "semver": "5.4.1"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "2.0.0",
+          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/resolve-from/-/resolve-from-2.0.0.tgz",
+          "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
+        }
+      }
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/requires-port/-/requires-port-1.0.0.tgz",
@@ -12785,7 +12835,7 @@
     },
     "sass-graph": {
       "version": "2.2.4",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/sass-graph/-/sass-graph-2.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
       "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
       "requires": {
         "glob": "7.1.2",
@@ -12827,7 +12877,7 @@
     },
     "scss-tokenizer": {
       "version": "0.2.3",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
       "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
       "requires": {
         "js-base64": "2.1.9",
@@ -12836,7 +12886,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "requires": {
             "amdefine": "1.0.1"
@@ -13244,7 +13294,7 @@
     },
     "stdout-stream": {
       "version": "1.4.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/stdout-stream/-/stdout-stream-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
       "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
       "requires": {
         "readable-stream": "2.3.3"
@@ -13301,14 +13351,6 @@
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "string-convert": {
       "version": "0.2.1",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/string-convert/-/string-convert-0.2.1.tgz",
@@ -13395,6 +13437,14 @@
         "strip-ansi": "3.0.1"
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/stringstream/-/stringstream-0.0.5.tgz",
@@ -13644,6 +13694,11 @@
         }
       }
     },
+    "table-resolver": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/table-resolver/-/table-resolver-3.2.0.tgz",
+      "integrity": "sha512-DQrDHFdJPnvIhyjAcTqF4vhu/Uhp5eNRst9Url9KmBNqxYSMrPXOJoxhU7HPCd3efi1Hua7lMIDnBAphsdhPQw=="
+    },
     "tapable": {
       "version": "0.2.8",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/tapable/-/tapable-0.2.8.tgz",
@@ -13651,7 +13706,7 @@
     },
     "tar": {
       "version": "2.2.1",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/tar/-/tar-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "requires": {
         "block-stream": "0.0.9",
@@ -14679,7 +14734,7 @@
     },
     "webpack-dev-middleware": {
       "version": "1.12.0",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz",
       "integrity": "sha1-007++y7dp+HTtdvgcolRMhllFwk=",
       "requires": {
         "memory-fs": "0.4.1",
@@ -14691,7 +14746,7 @@
       "dependencies": {
         "time-stamp": {
           "version": "2.0.0",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/time-stamp/-/time-stamp-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-2.0.0.tgz",
           "integrity": "sha1-lcakRTDhW6jW9KPsuMOj+sRto1c="
         }
       }
@@ -15215,7 +15270,7 @@
     },
     "ykit-config-antd": {
       "version": "0.1.3",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/ykit-config-antd/-/ykit-config-antd-0.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/ykit-config-antd/-/ykit-config-antd-0.1.3.tgz",
       "integrity": "sha1-qUWmV0EHgAd0OrPgz3eBbD9KPN4=",
       "requires": {
         "antd": "2.12.8",
diff --git a/package.json b/package.json
index 7a45f5c3..7c2f4fb1 100755
--- a/package.json
+++ b/package.json
@@ -78,10 +78,14 @@
     "rc-queue-anim": "^1.2.0",
     "rc-scroll-anim": "^1.0.7",
     "react": "^15.6.1",
+    "react-dnd": "^2.5.1",
+    "react-dnd-html5-backend": "^2.5.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.1.1",
     "react-scripts": "1.0.10",
+    "reactabular-dnd": "^8.9.0",
+    "reactabular-table": "^8.9.0",
     "redux": "^3.7.1",
     "redux-promise": "^0.5.3",
     "redux-thunk": "^2.2.0",
@@ -89,6 +93,7 @@
     "sha1": "^1.1.1",
     "string-replace-webpack-plugin": "^0.1.3",
     "style-loader": "^0.18.2",
+    "table-resolver": "^3.2.0",
     "underscore": "^1.8.3",
     "universal-cookie": "^2.0.8",
     "url": "^0.11.0",
diff --git a/server/controllers/interfaceCol.js b/server/controllers/interfaceCol.js
index 629bc3f6..601ae850 100755
--- a/server/controllers/interfaceCol.js
+++ b/server/controllers/interfaceCol.js
@@ -412,9 +412,8 @@ class interfaceColController extends baseController{
             if(!params || !Array.isArray(params)){
                 ctx.body =  yapi.commons.resReturn(null, 400, "请求参数必须是数组")
             }
-            // let caseName = "";
             params.forEach((item) => {
-                if(item.id && item.index){
+                if(item.id){
                     this.caseModel.upCaseIndex(item.id, item.index).then((res) => {}, (err) => {
                         yapi.commons.log(err.message, 'error')
                     })
@@ -422,15 +421,6 @@ class interfaceColController extends baseController{
 
             });
 
-            // let username = this.getUsername();
-            // yapi.commons.saveLog({
-            //     content: `用户 "${username}" 更新了接口集 "${params.col_name}"`,
-            //     type: 'project',
-            //     uid: this.getUid(),
-            //     username: username,
-            //     typeid: params.project_id
-            // });
-
             return ctx.body = yapi.commons.resReturn('成功！')
         }catch(e){
             ctx.body = yapi.commons.resReturn(null, 400, e.message)
diff --git a/server/router.js b/server/router.js
index e4fc8ea0..e145cbaf 100755
--- a/server/router.js
+++ b/server/router.js
@@ -407,7 +407,6 @@ for(let ctrl in routerConfig){
  * @param {*} action controller_action_name
  */
 function createAction(controller, action, path, method) {
-	console.log(method)
     router[method]("/api" +  INTERFACE_CONFIG[controller].prefix + path, async (ctx) => {
         let inst = new INTERFACE_CONFIG[controller].controller(ctx);