安环管理-安全管理-安全巡检点配置-新增排序

src/views/safetyManagement/safetyInspectionPoint/index.vue

@@ -16,14 +16,15 @@
       @size-change="sizeChange"
       @refresh-change="refreshChange"
       @on-load="onLoad"
+      @sort-change="sortChange"
     >
       <template #menu-left>
-        <el-button type="primary"  @click="handleAdd">新增 </el-button>
-        <el-button type="danger"  @click="handleDelete">删除 </el-button>
+        <el-button type="primary" @click="handleAdd">新增 </el-button>
+        <el-button type="danger" @click="handleDelete">删除 </el-button>
       </template>
       <template #menu-right>
         <!-- <el-button type="primary"  @click="handlePrint">打印 </el-button> -->
-        <el-button type="primary"  @click="handleImport">导入 </el-button>
+        <el-button type="primary" @click="handleImport">导入 </el-button>
       </template>
     </avue-crud>
     <!-- 导入 -->
@@ -37,25 +38,24 @@
       @closeDialog="closeImportDialog"
     ></basic-import>
     <!-- 新增弹窗 -->
-      <addInspectDailog
+    <addInspectDailog
       v-if="showDialog"
       :showDialog="showDialog"
       :moldAddMore="moldAddMore"
       @closeDialog="closeDialog"
       :title="title"
-    ></addInspectDailog> 
+    ></addInspectDailog>
   </basic-container>
 </template>
 
 <script>
 import basicImport from '@/components/basic-import/main.vue';
 import { getList, add, remove, update } from '@/api/safetyManagement/safetyInspectionPoint.js';
-import addInspectDailog from './addInspectDailog.vue'
-
+import addInspectDailog from './addInspectDailog.vue';
 export default {
   components: {
     basicImport,
-    addInspectDailog
+    addInspectDailog,
   },
   data() {
     return {
@@ -206,18 +206,18 @@ export default {
   methods: {
     // 点击导入按钮
     handleImport() {
-      this.isShowImport = true
+      this.isShowImport = true;
     },
     // 保存
-    rowSave(row, done, loading) {   
-    add(row).then(
-      res => {
-        this.onLoad(this.page);
-        this.$message({
-          type: 'success',
-          message: '操作成功!',
-        });
-         done();
+    rowSave(row, done, loading) {
+      add(row).then(
+        res => {
+          this.onLoad(this.page);
+          this.$message({
+            type: 'success',
+            message: '操作成功!',
+          });
+          done();
         },
         error => {
           window.console.log(error);
@@ -275,7 +275,7 @@ export default {
         });
     },
     //更新
-    rowUpdate(row, index, done, loading) { 
+    rowUpdate(row, index, done, loading) {
       update(row).then(
         () => {
           this.onLoad(this.page);
@@ -297,15 +297,29 @@ export default {
     },
     // 搜索重置
     searchReset() {
-     this.query = {} 
-     this.onLoad(this.page)
+      this.query = {};
+      this.onLoad(this.page);
     },
     selectionClear() {
       this.selectionList = [];
       this.$refs.table.clearSelection();
     },
+    // 排序
+    sortChange({ prop, order }) {
+      if (!prop) {
+        // 如果取消排序，清空排序参数
+        this.query.orderByField = undefined;
+        this.query.isAsc = undefined;
+      } else {
+        const orderByField = prop.replace(/([a-z])([A-Z0-9])/g, '$1_$2').toUpperCase();
+        this.query.orderByField = orderByField;
+        this.query.isAsc = order === 'ascending' ? true : false;
+      }
+      // // 重新加载数据
+      this.onLoad(this.page, this.query);
+    },
     // 加载页面数据
-     onLoad(page, params = {}) {
+    onLoad(page, params = {}) {
       this.loading = true;
       getList(page.currentPage, page.pageSize, Object.assign(params, this.query))
         .then(res => {
@@ -326,9 +340,8 @@ export default {
     searchChange(params, done) {
       this.query = params;
       this.page.currentPage = 1;
-      this.onLoad(this.page, params)
-      done()
-      
+      this.onLoad(this.page, params);
+      done();
     },
     // 关闭弹窗
     closeDialog() {