基础数据-班次管理-新增排序/权限

src/views/basicData/shiftManagement.vue

@@ -17,13 +17,16 @@
       @size-change="sizeChange"
       @refresh-change="refreshChange"
       @on-load="onLoad"
+      @sort-change="sortChange"
+      :permission="permissionList"
     >
     </avue-crud>
   </basic-container>
 </template>
 
 <script>
-import {getList,addShift,updateShift} from "@/api/basicData/shiftManagement"
+import { getList, addShift, updateShift } from '@/api/basicData/shiftManagement';
+import { mapGetters } from 'vuex';
 export default {
   data() {
     return {
@@ -39,8 +42,8 @@ export default {
       excelBox: false,
       option: {
         tip: false,
-        height: "auto",
-        rowKey: "csId",
+        height: 'auto',
+        rowKey: 'csId',
         calcHeight: 32,
         simplePage: false,
         searchShow: true,
@@ -53,9 +56,9 @@ export default {
         selection: false,
         viewBtn: false,
         delBtn: false,
-        editBtnText: "修改",
-        editBtnIcon: " ",
-        viewBtnText: "详情",
+        editBtnText: '修改',
+        editBtnIcon: ' ',
+        viewBtnText: '详情',
         labelWidth: 120,
         menuWidth: 120,
         dialogWidth: 300,
@@ -65,22 +68,22 @@ export default {
         searchShowBtn: false,
         excelBtn: true,
         showOverflowTooltip: true,
-        searchLabelPosition: "left",
+        searchLabelPosition: 'left',
         searchGutter: 24,
         searchSpan: 6,
-        menuAlign: "center",
+        menuAlign: 'center',
         gridBtn: false,
-        searchMenuPosition: "right",
-        searchLabelWidth:'auto',
-        addBtnIcon: " ",
-        viewBtnIcon: " ",
-        delBtnIcon: " ",
-        editBtnIcon: " ",
-        align: "center",
+        searchMenuPosition: 'right',
+        searchLabelWidth: 'auto',
+        addBtnIcon: ' ',
+        viewBtnIcon: ' ',
+        delBtnIcon: ' ',
+        editBtnIcon: ' ',
+        align: 'center',
         column: [
           {
-            label: "班次",
-            prop: "name",
+            label: '班次',
+            prop: 'name',
             search: true,
             sortable: true,
             filter: true,
@@ -90,8 +93,8 @@ export default {
             rules: [
               {
                 required: true,
-                message: "请输入班次",
-                trigger: "blur",
+                message: '请输入班次',
+                trigger: 'blur',
               },
             ],
           },
@@ -102,21 +105,21 @@ export default {
         emptyBtn: false,
         column: [
           {
-            label: "模板上传",
-            prop: "excelFile",
-            type: "upload",
+            label: '模板上传',
+            prop: 'excelFile',
+            type: 'upload',
             drag: true,
-            loadText: "模板上传中，请稍等",
+            loadText: '模板上传中，请稍等',
             span: 24,
             propsHttp: {
-              res: "data",
+              res: 'data',
             },
-            tip: "请上传 .xls,.xlsx 标准格式文件",
-            action: "/blade-system/user/import-user",
+            tip: '请上传 .xls,.xlsx 标准格式文件',
+            action: '/blade-system/user/import-user',
           },
           {
-            label: "模板下载",
-            prop: "excelTemplate",
+            label: '模板下载',
+            prop: 'excelTemplate',
             formslot: true,
             span: 24,
           },
@@ -125,7 +128,15 @@ export default {
       selectionList: [],
     };
   },
-  mounted() {},
+  computed: {
+    ...mapGetters(['permission']),
+    permissionList() {
+      return {
+        addBtn: this.validData(this.permission.shiftManagement_add, false),
+        editBtn: this.validData(this.permission.shiftManagement_edit, false),
+      };
+    },
+  },
   methods: {
     handleImport() {
       this.excelBox = true;
@@ -139,22 +150,22 @@ export default {
       this.$refs.crud.toggleSelection();
     },
     rowUpdate(row, index, done, loading) {
-      updateShift(row).then(res =>{
-        if(res.data.code == 200){
-          this.$message.success("修改成功")
-          this.onLoad()
-          done()
+      updateShift(row).then(res => {
+        if (res.data.code == 200) {
+          this.$message.success('修改成功');
+          this.onLoad();
+          done();
         }
-      })
+      });
     },
     rowSave(row, done, loading) {
-      addShift(row).then(res =>{
-        if(res.data.code == 200){
-          this.$message.success("新增成功")
-          this.onLoad()
-          done()
+      addShift(row).then(res => {
+        if (res.data.code == 200) {
+          this.$message.success('新增成功');
+          this.onLoad();
+          done();
         }
-      })
+      });
       // done();
     },
     searchReset() {
@@ -168,10 +179,10 @@ export default {
       done();
     },
     rowDel(row, index, done) {
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      this.$confirm('确定将选择数据删除?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
       }).then(() => {});
     },
     currentChange(currentPage) {
@@ -183,17 +194,31 @@ export default {
     refreshChange() {
       this.onLoad(this.page, this.query);
     },
+    // 排序
+    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();
+    },
     onLoad() {
       this.loading = true;
       getList({
-        current:1,
-        size:10,
-        ...this.query
-      }).then(res =>{
-        this.data = res.data.data.records
-        this.page.total = res.data.data.total
-        this.loading = false
-      })
+        current: 1,
+        size: 10,
+        ...this.query,
+      }).then(res => {
+        this.data = res.data.data.records;
+        this.page.total = res.data.data.total;
+        this.loading = false;
+      });
     },
   },
 };