Merge remote-tracking branch 'origin/dev-kol-20210324' into dev-kol-20210324

# Conflicts:
#	src/components/yqrange/kol-manage.vue

src/components/yqrange/kol-component/kolTable.vue

+<template>
+  <div class="kmc">
+    <el-row class="table-content">
+      <!-- 表格 -->
+      <div class="table-title">
+        <span class="table-t" v-for="(item,index) of titleList" :key="index">{{item.title}}</span>
+      </div>
+      <draggable :list="groupData" :move="getdata" @update="datadragEnd" :options="{handle:'.dargDiv'}">
+        <transition-group name="list-complete">
+            <div v-for="(element, index) in groupData" :key="index" class="list-complete-item dargDiv" v-bind:class="{ border_top: index == 0}">
+                <div class="styleclass" style="width: 100px">{{ index+1 }}</div>
+                <div class="styleclass" >{{ element.name }}</div>
+                <div class="styleclass" >{{ element.district }}</div>
+                <div class="styleclass" >{{ element.hospital }}</div>
+                <div class="styleclass" >{{ element.department }}</div>
+                <div class="styleclass" >{{ element.title }}</div>
+                <div class="styleclass" >{{ element.team }}</div>
+                <div class="styleclass" >{{ element.status }}</div>
+                <div class="styleclass" >
+                    <el-button type="danger" size="small" @click="deletefn(index)">删除</el-button>
+                </div>
+            </div>
+        </transition-group>
+      </draggable>
+    </el-row>
+    
+    
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      groupData: [],
+      titleList: [
+        {
+          title: '顺序'
+        },
+        {
+          title: '姓名'
+        },
+        {
+          title: '地区'
+        },
+        {
+          title: '所在医院'
+        },
+        {
+          title: '科室'
+        },
+        {
+          title: '职称'
+        },
+        {
+          title: '所属团队'
+        },
+        {
+          title: '发布状态'
+        },
+        {
+          title: '操作'
+        }
+      ]
+    }
+  },
+  watch: {
+    tableData: {
+      deep: true,
+      immediate: true,
+      handler(newv){
+        this.groupData = newv
+      }
+    }
+  },
+  methods: {
+    getdata: function(evt){
+    },
+    datadragEnd:function(evt){
+      console.log('拖动前的索引：'+evt.oldIndex);
+      console.log('拖动后的索引：'+evt.newIndex);
+    },
+    deletefn(index) {
+      this.groupData.splice(index,1)
+    },
+    getNewData() {
+      this.groupData.forEach((element,index) => {
+        element.seq = index + 1
+      });
+      return this.groupData
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.table-content {
+  margin-top: 15px;
+}
+.save-btn {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+.table-title {
+  display: flex;
+  height: 60px;
+  line-height: 60px;
+  background: #fafafa;
+  border-bottom: 1px solid #efefef;
+  .table-t {
+    flex: 1;
+    width: 11%;
+    display: inline-block;
+    text-align: center;
+  }
+}
+.dargDiv {
+  display: flex;
+  padding: 20px 0;
+  border-bottom: 1px solid #efefef;
+  overflow: hidden;
+}
+.dargDiv .styleclass{
+    flex: 1;
+    width: 11%;
+    text-align: center;
+    height: 100px;
+    // line-height: 100px;
+    // overflow: hidden;
+    // text-overflow:ellipsis;
+    // white-space: nowrap;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+</style>

src/components/yqrange/kol-manage.vue

@@ -22,28 +22,7 @@
       </el-row>
     </el-form>
     <el-row class="table-content">
-      <el-table
-        :data="tableData"
-        border
-        id="kolTable"
-        style="width: 100%"
-      >
-        <el-table-column
-          show-overflow-tooltip
-          v-for="(item, key) in col"
-          :key="`col_${key}`"
-          :prop="col[key].prop"
-          :label="item.label"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <p>{{ scope.row[item.prop] }}</p>
-            <div v-if="item.prop === 'operate'">
-              <el-button size="small" @click="deleteItem(scope.$index)">移除</el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <kol-table :tableData="tableData" ref="kolTable"></kol-table>
       <el-row class="save-btn">
         <el-button type="primary" @click="handleSave">保存</el-button>
       </el-row>
@@ -72,8 +51,7 @@
                 v-for="item in expertList"
                 :key="item.userId"
                 :label="item.option"
-                :value="item.userId"
-                :disabled="item.disabled">
+                :value="item.userId">
             </el-option>
           </el-select>
         </el-form-item>
@@ -87,14 +65,13 @@
 </template>
 
 <script>
-import Sortable from 'sortablejs';
-import { kolCol } from './util/common';
+import kolTable from './kol-component/kolTable'
 import { getExpertList, getExperNametList, saveKolConfig } from '@/utils/yqrange/rangeApi'
 import { openLoading, closeLoading } from "@/utils/utils";
 
 export default {
   components: {
-    Sortable
+    kolTable
   },
   props: {
     circleId: {
@@ -130,15 +107,11 @@ export default {
           { required: true, message: '请输入专家姓名或医院名称,多个关键字用空格隔开', trigger: 'change' },
         ],
       },
-      col: kolCol,
       tableData: []
     }
   },
   mounted() {
     this.initData();
-    this.$nextTick(() => {
-      this.rowDrop();
-    });
   },
   methods: {
     initData() {
@@ -153,10 +126,6 @@ export default {
         console.log('网络出现点儿问题，稍后重试')
       })
     },
-    rowDrop() {
-      const tbody = document.querySelector('#kolTable tbody');
-      Sortable.create(tbody);
-    },
     handleAdd() {
       this.addFormVisible = true;
       if (this.$refs['addForm']) {
@@ -166,6 +135,8 @@ export default {
       this.selectExpertItem = {};
     },
     handleSave() {
+      // 排序和删除后的table数据
+      let newTableData = this.$refs.kolTable.getNewData()
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
           // console.log('form校验通过')

src/main.js

@@ -6,6 +6,8 @@ import store from './store/'
 const mixins = require('@/utils/mixins');
 import FastClick from 'fastclick'
 import vueFilters from '@/utils/filter'
+import draggable from 'vuedraggable'
+Vue.component('draggable', draggable);
 // import '@/utils/toBlob';
 
 // 引入ElementUI