博客专栏支持排序

Author: fxss5201

src/service/column.js

@@ -59,3 +59,12 @@ export const apiColumnArticleAllList = (paramsData) => {
     }
   })
 }
+
+export const apiColumnChangeSort = (paramsData) => {
+  return Vue.axios.post('/column/changeSort', {
+    ...paramsData
+  },
+  {
+    showLoading: true
+  })
+}

src/views/AdminColumn.vue

@@ -3,7 +3,9 @@
     <el-page-header @back="$router.back()" content="专栏列表"></el-page-header>
     <div class="row">
       <el-button plain @click="addColumn">添加专栏</el-button>
+      <el-button plain @click="changeSort">更新排序</el-button>
     </div>
+    <div class="row">提示：排序值尽量填不同的数值，以免排列顺序有误。</div>
     <el-table
       v-if="tableData.length"
       :data="tableData"
@@ -26,6 +28,20 @@
         label="创建时间"
         width="240">
       </el-table-column>
+      <el-table-column
+        label="排序"
+        width="155">
+        <template slot-scope="scope">
+          <el-input-number
+            v-model="scope.row.columnSort"
+            :min="1"
+            size="mini"
+            :step="1"
+            placeholder="排序数值"
+            step-strictly>
+          </el-input-number>
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         width="220">
@@ -48,7 +64,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { apiColumnList, apiColumnDelete } from './../service/column'
+import { apiColumnList, apiColumnDelete, apiColumnChangeSort } from './../service/column'
 export default {
   name: 'AdminColumn',
   data () {
@@ -126,6 +142,14 @@ export default {
         })
         this.apiColumnListMethod()
       }
+    },
+    async changeSort () {
+      let result = await apiColumnChangeSort({
+        list: this.tableData
+      })
+      if (result.isok) {
+        this.apiColumnListMethod()
+      }
     }
   }
 }