排序功能

src/api/position/PositionCategoryService.js

@@ -29,4 +29,11 @@ export default class PositionCategoryService {
       params: {ids: ids}
     })
   }
+  updateSort (params) {
+    return request({
+      url: `/job/position_category/updateSort`,
+      method: 'post',
+      data: params
+    })
+  }
 }

src/main.js

@@ -9,6 +9,7 @@ import '@/assets/scss/index.scss'
 import httpRequest from '@/utils/httpRequest'
 import dictUtils from '@/utils/dictUtils'
 import utils from '@/utils'
+import sortUtils from '@/utils/sortUtils'
 import '@/utils/filter'
 import validator from '@/utils/validator'
 import cloneDeep from 'lodash/cloneDeep'
@@ -144,6 +145,7 @@ Vue.prototype.treeDataTranslate = utils.treeDataTranslate // 树形数据转换
 Vue.prototype.$utils = utils
 Vue.prototype.$window = window
 Vue.prototype.$dictUtils = dictUtils
+Vue.prototype.$sortUtils = sortUtils
 Vue.prototype.recover = utils.recover
 Vue.prototype.recoverNotNull = utils.recoverNotNull
 Vue.prototype.$axios = axios

src/utils/sortUtils.js

@@ -0,0 +1,39 @@
+// 将当前下标的元素，在数组中向上移动一位
+export function sortUp (dataList, index) {
+  if (index !== 0) {
+    const row = dataList[index]
+    dataList[index] = dataList[index - 1]
+    dataList[index - 1] = row
+    return {dataList: dataList, index: index - 1}
+  }
+  return {dataList: dataList, index: index}
+}
+// 将当前下标的元素，在数组中向下移动一位
+export function sortDown (dataList, index) {
+  if (index !== dataList.length - 1) {
+    const row = dataList[index]
+    dataList[index] = dataList[index + 1]
+    dataList[index + 1] = row
+    return {dataList: dataList, index: index + 1}
+  }
+  return {dataList: dataList, index: index}
+}
+// 将当前下标的元素，移动到数组的第一位
+export function sortTop (dataList, index) {
+  const row = dataList[index]
+  for (let i = index; i > 0; i--) {
+    dataList[i] = dataList[i - 1]
+  }
+  dataList[0] = row
+  return {dataList: dataList, index: 0}
+}
+// 将当前下标的元素，移动到数组的最后一位
+export function sortBottom (dataList, index) {
+  const row = dataList[index]
+  for (let i = index; i < dataList.length - 1; i++) {
+    dataList[i] = dataList[i + 1]
+  }
+  dataList[dataList.length - 1] = row
+  return {dataList: dataList, index: dataList.length - 1}
+}
+export default { sortUp, sortDown, sortTop, sortBottom }

src/views/modules/position/tabs/PositionCategoryList.vue

@@ -16,8 +16,40 @@
           <el-button v-if="hasPermission('job:position_category:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
           <el-button v-if="hasPermission('job:position_category:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()" :disabled="$refs.positionCategoryTable && $refs.positionCategoryTable.getCheckboxRecords().length === 0" plain>删除</el-button>
           <el-button type="default" size="small"  @click="goLog()"  plain>变更日志</el-button>
+          <el-button v-if="hasPermission('job:position_category:view')" type="default" size="small"  @click="openSortDialog"  plain>排序</el-button>
         </template>
       </vxe-toolbar>
+
+      <el-dialog title="调整默认顺序" :visible.sync="dialogTableVisible" style="height: 700px">
+        <div style="height: 700px">
+          <vxe-toolbar>
+            <template #buttons>
+              <vxe-button @click="sortUp" icon="el-icon-arrow-up"></vxe-button>
+              <vxe-button @click="sortDown" icon="el-icon-arrow-down"></vxe-button>
+              <vxe-button @click="sortTop" icon="el-icon-top"></vxe-button>
+              <vxe-button @click="sortBottom" icon="el-icon-bottom"></vxe-button>
+            </template>
+          </vxe-toolbar>
+          <vxe-table
+            border="inner"
+            auto-resize
+            resizable
+            height="auto"
+            :row-config="{isHover: true}"
+            :data="dataListsort"
+            :key="keyNum"
+            :checkbox-config="{}"
+            :row-style="rowStyle"
+            @cell-click="rowClick"
+          >
+            <vxe-column title="职务分类名称" field="name" ></vxe-column>
+          </vxe-table>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="small" @click="closeSortDialog()" icon="el-icon-circle-close">关闭</el-button>
+          <el-button size="small" type="primary"  @click="sortChange()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
+        </span>
+      </el-dialog>
       <div style="height: calc(100% - 80px)">
         <vxe-table
           border="inner"
@@ -34,13 +66,17 @@
           @sort-change="sortChangeHandle"
           :sort-config="{remote:true}"
           :data="dataList"
-          @cell-click="rowClick"
           :checkbox-config="{}">
           <vxe-column type="seq" width="40"></vxe-column>
           <vxe-column type="checkbox" width="40" ></vxe-column>
-          <vxe-column title="职务分类名称" field="name"></vxe-column>
+          <vxe-column field="name" title="职务分类名称" :edit-render="{}">
+            <template #edit="{ row }">
+              <vxe-input v-model="row.name" type="text" placeholder="请输入职务分类名称"></vxe-input>
+            </template>
+          </vxe-column>
           <vxe-column title="操作" width="200px" fixed="right" align="center">
             <template  slot-scope="scope">
+
               <el-button v-if="hasPermission('job:position_category:edit')" type="text" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
               <el-button v-if="hasPermission('job:position_category:del')" type="text"  icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
             </template>
@@ -81,16 +117,21 @@
         searchForm: {
         },
         dataList: [],
+        dataListsort: [],
         tablePage: {
           total: 0,
           currentPage: 1,
           pageSize: 10,
           orders: []
         },
-        loading: false
+        loading: false,
+        keyNum: 0,
+        sortIndex: '',
+        dialogTableVisible: false
       }
     },
     positionCategoryService: null,
+    sortUtils: null,
     created () {
       this.positionCategoryService = new PositionCategoryService()
     },
@@ -178,7 +219,61 @@
         this.refreshList()
       },
       rowClick (event) {
-        console.log('1223', event)
+        this.sortIndex = event.rowIndex
+      },
+      sortUp () {
+        let s = this.$sortUtils.sortUp(this.dataListsort, this.sortIndex)
+        this.dataListsort = s.dataList
+        this.sortIndex = s.index
+        console.log(this.sortIndex)
+        this.keyNum++
+      },
+      sortDown () {
+        let s = this.$sortUtils.sortDown(this.dataListsort, this.sortIndex)
+        this.dataListsort = s.dataList
+        this.sortIndex = s.index
+        this.keyNum++
+      },
+      sortTop () {
+        let s = this.$sortUtils.sortTop(this.dataListsort, this.sortIndex)
+        this.dataListsort = s.dataList
+        this.sortIndex = s.index
+        this.keyNum++
+      },
+      sortBottom () {
+        let s = this.$sortUtils.sortBottom(this.dataListsort, this.sortIndex)
+        this.dataListsort = s.dataList
+        this.sortIndex = s.index
+        this.keyNum++
+      },
+      openSortDialog () {
+        this.dialogTableVisible = true
+        this.dataListsort = this.dataList
+      },
+      closeSortDialog () {
+        this.sortIndex = ''
+        this.dataListsort = []
+        this.dialogTableVisible = false
+        this.refreshList()
+      },
+      rowStyle (event) {
+        if (event.rowIndex === this.sortIndex) {
+          return 'cursor:pointer;background-color:#e8f6f3'
+        }
+        // console.log(i)
+        return 'cursor:pointer;'
+      },
+      sortChange () {
+        for (let i = 0; i < this.dataListsort.length; i++) {
+          this.dataListsort[i].sort = i
+        }
+        this.loading = true
+        this.positionCategoryService.updateSort(this.dataListsort).then(() => {
+          this.closeSortDialog()
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        })
       }
     }
   }