实现营养素模板的拖拽排序

package.json

@@ -24,7 +24,8 @@
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "sortablejs": "1.12.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/api/nutrientTemplate.js

@@ -70,6 +70,15 @@ export function updateTemplateNutrientSort(id, nutrientId, data) {
   })
 }
 
+// 批量更新营养素排序
+export function updateBatchDetailSorts(id, data) {
+  return request({
+    url: `/api/nutrient-templates/${id}/nutrients/sorts`,
+    method: 'post',
+    data
+  })
+}
+
 // 上移下移
 export function updateSort(id, data) {
   return request({

src/views/nutrientTemplate/detail.vue

@@ -51,6 +51,7 @@
       </el-button>
 
       <el-table
+        ref="detailTable"
         :key="tableKey"
         v-loading="listLoading"
         :data="list"
@@ -102,8 +103,26 @@
             <span v-else>{{ row.nvSpecUnit }}</span>
           </template>
         </el-table-column>
-
-
+        <el-table-column label="信息来源" align="center" width="200">
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-autocomplete
+                v-model="row.source"
+                :fetch-suggestions="querySources"
+                placeholder="请输入信息来源"
+              />
+            </template>
+            <span v-else>{{ row.source }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="信息来源备注" align="center" width="200">
+          <template slot-scope="{row}">
+            <template v-if="row.edit">
+              <el-input type="text" :rows="2" v-model="row.sourceNote" />
+            </template>
+            <span v-else>{{ row.sourceNote }}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="320px">
           <template slot-scope="{row}">
             <template v-if="row.edit">
@@ -124,12 +143,6 @@
             </template>
             <template v-else>
               <el-button size="mini" type="primary" @click="row.edit=true">编辑</el-button>
-              <el-button type="primary" size="mini" @click="updateSort(row, 0)">
-                上移
-              </el-button>
-              <el-button type="primary" size="mini" @click="updateSort(row, 1)">
-                下移
-              </el-button>
               <el-button size="mini" type="danger" @click="removeNutrient(row)">
                 删除
               </el-button>
@@ -145,7 +158,8 @@
 import { getList } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
 import { getNutrients, addTemplateNutrient, updateTemplateNutrient, removeNutrient,
-  updateTemplateNutrientSort } from '@/api/nutrientTemplate'
+  updateTemplateNutrientSort, updateBatchDetailSorts } from '@/api/nutrientTemplate'
+import Sortable from 'sortablejs'
 
 export default {
   name: 'Detail',
@@ -161,7 +175,8 @@ export default {
       params: {},
       loading: false,
       unitLoading: false,
-      sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }]
+      sources: [{ value: "营养标签" }, { value: "食品官方资料" }, { value: "计算值" }],
+      sortable: null
     }
   },
   created() {
@@ -174,6 +189,7 @@ export default {
     this.queryNutrients()
     this.$nextTick(() => {
       this.$refs['nutrientSelect'].focus()
+      this.setSort()
     })
   },
   methods: {
@@ -260,6 +276,37 @@ export default {
       return (restaurant) => {
         return (restaurant.value.toLowerCase().indexOf(query.toLowerCase()) === 0);
       };
+    },
+    setSort() {
+      const el = this.$refs.detailTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      this.sortable = Sortable.create(el, {
+        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+        setData: function(dataTransfer) {
+          // to avoid Firefox bug
+          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+          dataTransfer.setData('Text', '')
+        },
+        onEnd: evt => {
+          let sortOrders = []
+          let ids = []
+          this.list.forEach(item => sortOrders.push(item.sortOrder))
+
+          let list = this.list.slice()
+          const targetRow = list.splice(evt.oldIndex, 1)[0]
+          list.splice(evt.newIndex, 0, targetRow)
+
+          list.forEach(item => ids.push(item.id))
+          this.list = []
+
+          updateBatchDetailSorts(this.templateId, { ids, sortOrders }).then(res => {
+            this.fetchNutrients()
+            this.$notify.success('提交成功')
+          }).catch(res => {
+            this.fetchNutrients()
+            this.$message.error(res.data.message)
+          })
+        }
+      })
     }
   }
 }