排序功能

src/api/position/PositionService.js

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

src/views/common/SortTableDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <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"
+          :show-header="false"
+        >
+          <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>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        dataListSort: [],
+        keyNum: 0,
+        sortIndex: '',
+        dialogTableVisible: false
+      }
+    },
+    created () {
+    },
+    methods: {
+      init (dataList) {
+        this.dialogTableVisible = true
+        this.dataListSort = dataList
+      },
+      rowClick (event) {
+        this.sortIndex = event.rowIndex
+      },
+      sortUp () {
+        let s = this.$sortUtils.sortUp(this.dataListSort, this.sortIndex)
+        this.dataListSort = s.dataList
+        this.sortIndex = s.index
+        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++
+      },
+      closeSortDialog () {
+        this.sortIndex = ''
+        this.dataListSort = []
+        this.dialogTableVisible = false
+        this.$emit('refreshDataList')
+      },
+      rowStyle (event) {
+        if (event.rowIndex === this.sortIndex) {
+          return 'cursor:pointer;background-color:#e8f6f3'
+        }
+        return 'cursor:pointer;'
+      },
+      sortChange () {
+        for (let i = 0; i < this.dataListSort.length; i++) {
+          this.dataListSort[i].sort = i
+        }
+        this.loading = true
+        this.$emit('dataSort', this.dataListSort)
+        this.sortIndex = ''
+        this.dataListSort = []
+        this.dialogTableVisible = false
+      }
+    }
+  }
+</script>

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

@@ -20,36 +20,6 @@
         </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"
@@ -95,11 +65,13 @@
       </div>
     </div>
     <PositionCategoryForm  ref="positionCategoryForm" @refreshDataList="refreshList"></PositionCategoryForm>
+    <SortTableDialog ref="sortTableDialog" @refreshDataList="refreshList" @dataSort="dataSort"></SortTableDialog>
   </div>
 </template>
 
 <script>
   import PositionCategoryForm from './PositionCategoryForm'
+  import SortTableDialog from '../../../common/SortTableDialog'
   import PositionCategoryService from '@/api/position/PositionCategoryService'
   export default {
     props: {
@@ -117,21 +89,16 @@
         searchForm: {
         },
         dataList: [],
-        dataListsort: [],
         tablePage: {
           total: 0,
           currentPage: 1,
           pageSize: 10,
           orders: []
         },
-        loading: false,
-        keyNum: 0,
-        sortIndex: '',
-        dialogTableVisible: false
+        loading: false
       }
     },
     positionCategoryService: null,
-    sortUtils: null,
     created () {
       this.positionCategoryService = new PositionCategoryService()
     },
@@ -143,7 +110,8 @@
       }
     },
     components: {
-      PositionCategoryForm
+      PositionCategoryForm,
+      SortTableDialog
     },
     mounted () {
       this.refreshList()
@@ -218,61 +186,12 @@
         this.$refs.searchForm.resetFields()
         this.refreshList()
       },
-      rowClick (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()
+        this.$refs.sortTableDialog.init(this.dataList)
       },
-      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
+      dataSort (dataListSort) {
+        this.positionCategoryService.updateSort(dataListSort).then(() => {
+          this.refreshList()
         })
       }
     }

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

@@ -16,6 +16,7 @@
           <el-button v-if="hasPermission('job:position:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
           <el-button v-if="hasPermission('job:position:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()" :disabled="$refs.positionTable && $refs.positionTable.getCheckboxRecords().length === 0" plain>删除</el-button>
           <el-button type="default" size="small"  @click="goLog()"  plain>变更日志</el-button>
+          <el-button v-if="hasPermission('job:position:view')" type="default" size="small"  @click="openSortDialog()"  plain>排序</el-button>
         </template>
       </vxe-toolbar>
       <div style="height: calc(100% - 80px)">
@@ -60,11 +61,13 @@
       </div>
     </div>
     <PositionForm  ref="positionForm" @refreshDataList="refreshList"></PositionForm>
+    <SortTableDialog ref="sortTableDialog" @refreshDataList="refreshList" @dataSort="dataSort"></SortTableDialog>
   </div>
 </template>
 
 <script>
   import PositionForm from './PositionForm'
+  import SortTableDialog from '../../../common/SortTableDialog'
   import PositionService from '@/api/position/PositionService'
   export default {
     props: {
@@ -96,7 +99,8 @@
       this.positionService = new PositionService()
     },
     components: {
-      PositionForm
+      PositionForm,
+      SortTableDialog
     },
     mounted () {
       this.refreshList()
@@ -176,6 +180,14 @@
       resetSearch () {
         this.$refs.searchForm.resetFields()
         this.refreshList()
+      },
+      openSortDialog () {
+        this.$refs.sortTableDialog.init(this.dataList)
+      },
+      dataSort (dataListSort) {
+        this.positionService.updateSort(dataListSort).then(() => {
+          this.refreshList()
+        })
       }
     }
   }