安环管理-环保管理-环保巡检点配置-新增权限/排序

src/views/safetyManagement/equipmentInspectionPoint/index.vue

@@ -8,7 +8,7 @@
       v-model:page="page"
       ref="crud"
       @row-del="rowDel"
-      @row-save="rowSave" 
+      @row-save="rowSave"
       @row-update="rowUpdate"
       @search-change="searchChange"
       @search-reset="searchReset"
@@ -17,43 +17,64 @@
       @size-change="sizeChange"
       @refresh-change="refreshChange"
       @on-load="onLoad"
+      @sort-change="sortChange"
+      :permission="permissionList"
     >
       <template #menu-left>
-        <el-button type="primary" @click="handleAdd">新增 </el-button>
-        <el-button type="danger" @click="handleDelete"
-          >删除
+        <el-button type="primary" v-if="permission.equipmentInspectionPoint_add" @click="handleAdd">
+          新增
+        </el-button>
+        <el-button
+          type="danger"
+          v-if="permission.equipmentInspectionPoint_del"
+          @click="handleDelete"
+        >
+          删除
         </el-button>
       </template>
       <template #menu-right>
-        <el-button type="primary"  @click="handleImport"
+        <el-button
+          type="primary"
+          v-if="permission.equipmentInspectionPoint_import"
+          @click="handleImport"
           >导入
         </el-button>
       </template>
     </avue-crud>
-      <!-- 导入 -->
-    <basic-import v-if="isShowImport" title="导入" :isShow="isShowImport"
+    <!-- 导入 -->
+    <basic-import
+      v-if="isShowImport"
+      title="导入"
+      :isShow="isShowImport"
       templateUrl="/blade-desk/bsEpciuInspectionPoint/downloadExcelTemplate"
       templateName="环保巡检点配置表模板.xls"
       importUrl="/blade-desk/bsEpciuInspectionPoint/importExcel"
-      @closeDialog="closeImportDialog"></basic-import>
-      <!-- 新增弹窗 -->
-    <addInspectDailog v-if="showDialog" :showDialog="showDialog" :moldAddMore="moldAddMore" @closeDialog="closeDialog"
-      :title="title"></addInspectDailog>
+      @closeDialog="closeImportDialog"
+    ></basic-import>
+    <!-- 新增弹窗 -->
+    <addInspectDailog
+      v-if="showDialog"
+      :showDialog="showDialog"
+      :moldAddMore="moldAddMore"
+      @closeDialog="closeDialog"
+      :title="title"
+    ></addInspectDailog>
   </basic-container>
 </template>
 
 <script>
 import basicImport from '@/components/basic-import/main.vue';
 import { getList, add, remove, update } from '@/api/safetyManagement/equipmentInspectionPoint';
-import addInspectDailog from './addInspectDailog.vue'
+import addInspectDailog from './addInspectDailog.vue';
+import { mapGetters } from 'vuex';
 export default {
   components: {
     basicImport,
-    addInspectDailog
+    addInspectDailog,
   },
   data() {
     return {
-      isShowImport:false,
+      isShowImport: false,
       page: {
         pageSize: 10,
         currentPage: 1,
@@ -62,7 +83,7 @@ export default {
       selectionList: [],
       data: [],
       option: {
-        height: "auto",
+        height: 'auto',
         calcHeight: 32,
         tip: false,
         simplePage: true,
@@ -78,11 +99,11 @@ export default {
         delBtn: false,
         addBtn: false,
         editBtn: true,
-        editBtnText: "修改",
-        addBtnIcon: " ",
-        viewBtnIcon: " ",
-        delBtnIcon: " ",
-        editBtnIcon: " ",
+        editBtnText: '修改',
+        addBtnIcon: ' ',
+        viewBtnIcon: ' ',
+        delBtnIcon: ' ',
+        editBtnIcon: ' ',
         labelWidth: 120,
         menuWidth: 80,
         dialogWidth: 600,
@@ -96,18 +117,18 @@ export default {
         columnSort: true,
         index: false,
         showOverflowTooltip: true,
-        searchLabelPosition: "left",
-        searchLabelPosition: "left",
+        searchLabelPosition: 'left',
+        searchLabelPosition: 'left',
         searchGutter: 24,
         searchSpan: 6,
-        menuAlign: "center",
+        menuAlign: 'center',
         gridBtn: false,
-        searchMenuPosition: "right",
-        align: "center",
+        searchMenuPosition: 'right',
+        align: 'center',
         column: [
           {
-            label: "巡检点编号",
-            prop: "insNum",
+            label: '巡检点编号',
+            prop: 'insNum',
             sortable: true,
             filter: true,
             span: 24,
@@ -116,14 +137,14 @@ export default {
             rules: [
               {
                 required: true,
-                message: "请输入巡检点编号",
-                trigger: "blur",
+                message: '请输入巡检点编号',
+                trigger: 'blur',
               },
             ],
           },
           {
-            label: "巡检点位置",
-            prop: "insSite",
+            label: '巡检点位置',
+            prop: 'insSite',
             sortable: true,
             filter: true,
             span: 24,
@@ -132,14 +153,14 @@ export default {
             rules: [
               {
                 required: true,
-                message: "请输入巡检点位置",
-                trigger: "blur",
+                message: '请输入巡检点位置',
+                trigger: 'blur',
               },
             ],
           },
           {
-            label: "巡检点类型",
-            prop: "insType",
+            label: '巡检点类型',
+            prop: 'insType',
             sortable: true,
             filter: true,
             span: 24,
@@ -153,14 +174,14 @@ export default {
             rules: [
               {
                 required: true,
-                message: "请输入巡检点位置",
-                trigger: "blur",
+                message: '请输入巡检点位置',
+                trigger: 'blur',
               },
             ],
           },
-            {
-            label: "巡检周期(h)",
-            prop: "insCycle",
+          {
+            label: '巡检周期(h)',
+            prop: 'insCycle',
             sortable: true,
             filter: true,
             span: 24,
@@ -170,14 +191,14 @@ export default {
             rules: [
               {
                 required: true,
-                message: "请输入巡检周期(h)",
-                trigger: "blur",
+                message: '请输入巡检周期(h)',
+                trigger: 'blur',
               },
             ],
           },
           {
-            label: "上次检验日期",
-            prop: "lastInsCycle",
+            label: '上次检验日期',
+            prop: 'lastInsCycle',
             sortable: true,
             filter: true,
             span: 24,
@@ -186,20 +207,20 @@ export default {
             searchLabelWidth: 100,
           },
           {
-            label: "备注",
-            prop: "memo",
+            label: '备注',
+            prop: 'memo',
             sortable: true,
             filter: true,
             span: 24,
             search: false,
-            type: "textarea",
+            type: 'textarea',
             searchLabelWidth: 90,
             rows: 3,
             rules: [
               {
                 required: false,
-                message: "请输入备注",
-                trigger: "blur",
+                message: '请输入备注',
+                trigger: 'blur',
               },
             ],
           },
@@ -208,6 +229,7 @@ export default {
       title: '新增',
       showDialog: false,
       moldAddMore: false,
+      query: {},
     };
   },
   computed: {
@@ -218,11 +240,18 @@ export default {
       });
       return ids.join(',');
     },
+    ...mapGetters(['permission']),
+    permissionList() {
+      return {
+        editBtn: this.validData(this.permission.equipmentInspectionPoint_edit, false),
+        delBtn: this.validData(this.permission.equipmentInspectionPoint_del, false),
+      };
+    },
   },
   methods: {
     // 点击导入按钮
     handleImport() {
-      this.isShowImport = true
+      this.isShowImport = true;
     },
     // 关闭导入弹窗
     closeImportDialog() {
@@ -276,7 +305,6 @@ export default {
     },
     //更新
     rowUpdate(row, index, done, loading) {
-     
       update(row).then(
         () => {
           this.onLoad(this.page);
@@ -298,24 +326,35 @@ 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 = {}) {
       this.loading = true;
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(
-        (res) => {
-          this.data = res.data.data.records;
-          this.loading = false;
-          this.page.total = res.data.data.total;
-        }
-      );
-
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        this.data = res.data.data.records;
+        this.loading = false;
+        this.page.total = res.data.data.total;
+      });
     },
     //刷新
     refreshChange() {
@@ -325,17 +364,15 @@ 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(isRefresh=false) {
+    closeDialog(isRefresh = false) {
       this.showDialog = false;
       if (isRefresh) {
         this.onLoad(this.page);
       }
-     
     },
     // 新增
     handleAdd() {