优化

package.json

@@ -21,7 +21,8 @@
     "less-loader": "^4.1.0",
     "svg-sprite-loader": "^5.0.0",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuedraggable": "^2.24.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/style/common.less

@@ -18,3 +18,16 @@
   -ms-user-select: none;
   user-select: none;
 }
+.center(){
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+// ::-webkit-scrollbar {
+//   width: 0 !important;
+// }
+// ::-webkit-scrollbar {
+//   width: 0 !important;height: 0;
+// }

src/views/kpi/workbench/assessmentGroup/edit/components/templateSet.vue

@@ -40,8 +40,79 @@
         <div  class="set-add">
           <el-button icon="el-icon-plus" size="small" @click="handleAdd" round>添加考核维度</el-button>
         </div>
-
+        <div class="set-content">
-        <div>
+           <draggable
+            v-model="materialsList"
+            :options='options'
+            @change="change"
+            @start="start"
+            @end="end"
+            @move="move"
+            >
+              <div class="set-content-item item" v-for="i in materialsList" :key="i">
+                <div class="set-content-item-top commonFont">
+                  <div class="set-content-item-top-left my-handle sortable-drag">
+                    {{i}}呵呵呵
+                  </div>
+                  <div class="set-content-item-top-right">
+                    <i class="el-icon-edit"></i>
+                    <i class="el-icon-delete"></i>
+                  </div>
+                </div>
+                <div class="set-content-item-center commonFont">
+                  <div class="set-content-item-center-left">
+                    2154325
+                  </div>
+                  <div class="set-content-item-center-right">
+                    2154325
+                  </div>
+                </div>
+                <div v-if="tableData.length !==0" class="set-content-item-table">
+                   <el-table
+                    :data="tableData"
+                    style="width: 100%">
+                    <el-table-column
+                      fixed
+                      prop="name"
+                      label="指标名称">
+                    </el-table-column>
+                    <el-table-column
+                      prop="number"
+                      label="考核标准">
+                    </el-table-column>
+                    <el-table-column
+                      prop="number"
+                      label="权重(%)">
+                    </el-table-column>
+                    <el-table-column
+                      fixed="right"
+                      label="操作"
+                      width="120">
+                      <template slot-scope="scope">
+                        <el-button
+                          @click.native.prevent="deleteRow(scope.$index)"
+                          type="text"
+                          size="small">
+                          编辑
+                        </el-button>
+                        <el-button
+                          @click.native.prevent="deleteRow(scope.$index)"
+                          type="text"
+                          size="small">
+                          删除
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+                <div class="set-content-item-bottom">
+                    <el-button size="mini"  plain>选择指标项</el-button>
+                    <el-button  size="mini" plain>增加指标项</el-button>
+                </div>
+              </div>
+          </draggable>
+        </div>
+         <div>
           <popup-right v-if="show" @cancel='handleCancel' @submit="handleSubmit" title="添加维度"/>
         </div>
     </div>
@@ -49,23 +120,60 @@
 
 <script>
 import PopupRight from '@/components/PopupRight'
+import draggable from 'vuedraggable'
+import Sortable from 'sortablejs'
+console.log('Sortable: ', Sortable)
 export default {
   data () {
     return {
       show: false,
-      form: {}
+      form: {},
+      materialsList: [0, 1, 2, 3, 4, 5],
+      tableData: [{name: '12345', number: 1}, {name: '78945', number: 2}, {name: '5566655', number: 3}],
+      options: {
+        group: 'name',
+        draggable: '.item',
+        handle: '.my-handle',
+        dragClass: 'sortable-drag',
+        sort: true, // 内部排序列表
+        delay: 0, // 以毫秒为单位定义排序何时开始。
+        touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
+        disabled: false, // 如果设置为真，则禁用sortable。
+        store: null, // @see Store
+        animation: 150 // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
+      }
     }
   },
   components: {
-    PopupRight
+    PopupRight,
+    draggable
   },
   computed: {},
   beforeMount () {},
-  mounted () {},
+  mounted () {
+    this.rowDrop()
+  },
   methods: {
+    // 行拖拽
+    rowDrop () {
+      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd ({ newIndex, oldIndex }) {
+          const currRow = _this.tableData.splice(oldIndex, 1)[0]
+          _this.tableData.splice(newIndex, 0, currRow)
+        }
+      })
+    },
+    change () {},
+    start () {},
+    end () {},
+    move () {},
     // 添加考核维度
     handleAdd () {
-      this.show = true
+      // this.show = true
+
+      console.log('materialsList: ', this.materialsList)
     },
     handleCancel () {
       this.show = false
@@ -79,7 +187,6 @@ export default {
 }
 
 </script>
-
 <style lang='less' scoped>
 .set{
   &-top{
@@ -108,5 +215,76 @@ export default {
   &-add{
     margin: 20px 0;
   }
+  &-content{
+    &-item{
+      width: 100%;
+      margin-bottom: 20px;
+      min-height: 40px;
+      box-sizing: border-box;
+      border: 1px solid @borderColor;
+      &-top{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 50px;
+        background: #f7f7f7;
+        border-bottom: 1px solid @borderColor;
+        &-left{
+          padding-left: 20px;
+          height: 100%;
+          .center();
+          cursor: move ;
+          position: relative;
+        }
+         .my-handle::before{
+            content: "";
+            position: absolute;
+            z-index: 10;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            width:14px;
+            height: 27px;
+            background: url('./imgs/before.png') no-repeat;
+            background-size: 100% 100%;
+          }
+        &-right{
+          display: flex;
+          align-items: center;
+          i{
+            margin-right: 20px;
+            cursor: pointer;
+          }
+          .el-icon-edit:hover{
+            color: @fontBlue;
+          }
+          .el-icon-delete:hover{
+            color: red;
+          }
+        }
+      }
+      &-center{
+        height: 40px;
+        background: #f7f7f7;
+        padding: 0 20px;
+        display: flex;
+        font-size: 14px;
+        align-items: center;
+        &-left{
+          padding-right: 20px;
+          border-right: 1px solid @borderColor;
+        }
+        &-right{
+          margin-left: 20px;
+        }
+      }
+      &-table{
+      }
+      &-bottom{
+        padding: 10px;
+      }
+    }
+  }
 }
 </style>