权限按钮绑定

src/styles/themeB/common.scss

@@ -116,7 +116,7 @@
   }
   &:focus {
     opacity: 0.85;
-    background: #0762b6;
+    background: #0762b6!important;
     border: 1px solid #0762b6!important;
   }
 }

src/utils/commonField.js

@@ -3,34 +3,39 @@ const commonField = {
   typeParent: 'text',
   typePrimary: 'primary',
   typeSuccess: 'success',
-  nameParent: '删除',
-  resetPassword: '重置密码',
+  typeWarning: 'warning',
+  queryClass: 'queryBtn', // 查询按钮class
+  resetClass: 'resetBtn', // 重置按钮class
+  addClass: 'addBtn', // 新增按钮class
+  updateClass: 'updateBtn', // 修改按钮class
+  delClass: 'delBtn', // 删除按钮class
+  importClass: 'importBtn', // 导入按钮class
+  exportClass: 'exportBtn', // 导出按钮class
+  addClassText: 'addBtnText', // 文字类型的新增按钮class
+  resetPasClass: 'resetBtnText', // 文字类型的重置按钮class
+  queryName: '查询',
   resetName: '重置',
-  addClass: 'addBtn',
-  queryClass: 'queryBtn',
-  exportClass: 'exportBtn',
-  updateClass: 'updateBtn',
-  addClassText: 'addBtnText',
-  resetPasClass: 'resetBtnText',
-  delClass: 'delBtn',
   addName: '新增',
-  queryName: '查询',
-  exportName: '导出',
   updateName: '修改',
+  deleteName: '删除',
+  dataPower: '数据权限',
+  resetPassword: '重置密码',
+  exportName: '导出',
+  importName: '导入',
+  cleanName: '清空',
+  viewName: '查看',
   size: 'mini',
   smallSize: 'small',
-  delIcon: 'el-icon-delete',
+  queryIcon: 'el-icon-search',
+  resetIcon: 'el-icon-refresh',
   addIcon: 'el-icon-plus',
+  delIcon: 'el-icon-delete',
+  importIcon: 'el-icon-upload',
   exportIcon: 'el-icon-download',
-  queryIcon: 'el-icon-search',
-  resetIcon: '',
   deleteTypePrimary: 'danger',
-  deleteName: '删除',
   deleteSize: 'small',
   deleteDisabled: 'ids.length === 0',
   cleanTypePrimary: 'danger',
-  cleanName: '清空',
-  viewName: '查看',
   cleanSize: 'small',
   miniSize: 'mini',
   exportTypePrimary: 'success',

src/views/system/dept/index.vue

@@ -22,23 +22,33 @@
           </el-select>
         </el-form-item>
         <el-form-item>
+
+          <!--          //查询按钮-->
           <el-button
-            class="queryBtn"
-            type="primary"
-            size="small"
-            icon="el-icon-search"
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
             @click="getList"
-          >查询</el-button>
-          <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          >{{ commonField.queryName }}</el-button>
+          <!--          //重置按钮-->
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+          >{{ commonField.resetName }}</el-button>
         </el-form-item>
         <el-form-item style="float: right">
+          <!--          //新增按钮-->
           <el-button
-            class="addBtn"
-            type="primary"
-            size="small"
-            icon="el-icon-plus"
+            v-hasPermi="hasAddDeptPerm"
+            :class="commonField.addClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.addIcon"
+            :size="commonField.smallSize"
             @click="handleAdd"
-          >新增</el-button>
+          >{{ commonField.addName }}</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -72,9 +82,30 @@
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-            <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdateDeptPerm" @btn-click="handleUpdate(scope.row)" />
-            <coolbutton :class-name="commonField.addClassText" :type="commonField.typeParent" :name="commonField.addName" :size="commonField.size" :haspermi="hasAddDeptPerm" @btn-click="handleAdd(scope.row)" />
-            <coolbutton :class-name="commonField.delClass" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDelDeptPerm" @btn-click="handleDelete(scope.row)" />
+            <!--              //修改-->
+            <el-button
+              v-hasPermi="hasUpdateDeptPerm"
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleUpdate(scope.row)"
+            >{{ commonField.updateName }}</el-button>
+            <!--          //新增按钮-->
+            <el-button
+              v-hasPermi="hasAddDeptPerm"
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleAdd(scope.row)"
+            >{{ commonField.addName }}</el-button>
+            <!--              //删除-->
+            <el-button
+              v-hasPermi="hasDelDeptPerm"
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleDelete(scope.row)"
+            >{{ commonField.deleteName }}</el-button>
           </template>
         </el-table-column>
       </el-table>

src/views/system/dict/index.vue

@@ -53,12 +53,42 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button class="queryBtn" type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
-          <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          <!--          //查询按钮-->
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="handleQuery"
+          >{{ commonField.queryName }}</el-button>
+          <!--          //重置按钮-->
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+          >{{ commonField.resetName }}</el-button>
         </el-form-item>
         <div style="padding-bottom: 15px">
-          <coolbutton :class-name="commonField.addClass" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasDictAddPerm" @btn-click="handleAdd" />
-          <coolbutton :class-name="commonField.exportClass" :type="commonField.typeSuccess" :name="commonField.exportName" :icon="commonField.exportIcon" :size="commonField.size" :haspermi="exportHaspermi" @btn-click="handleExport" />
+          <!--          //新增按钮-->
+          <el-button
+            v-hasPermi="hasDictAddPerm"
+            :class="commonField.addClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.addIcon"
+            :size="commonField.smallSize"
+            @click="handleAdd"
+          >{{ commonField.addName }}</el-button>
+          <!--          //导出-->
+          <el-button
+            v-hasPermi="exportHaspermi"
+            :class="commonField.exportClass"
+            :type="commonField.typeSuccess"
+            :icon="commonField.exportIcon"
+            :size="commonField.smallSize"
+            @click="handleExport"
+          >{{ commonField.exportName }}</el-button>
+
         </div>
       </el-form>
     </div>
@@ -108,8 +138,22 @@
         </el-table-column>
         <el-table-column label="操作" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-            <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasDictUpdatePerm" @btn-click="handleUpdate(scope.row)" />
-            <coolbutton :class-name="commonField.delClass" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDictDelPerm" @btn-click="handleDelete(scope.row)" />
+            <!--              //修改-->
+            <el-button
+              v-hasPermi="hasDictUpdatePerm"
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleUpdate(scope.row)"
+            >{{ commonField.updateName }}</el-button>
+            <!--              //删除-->
+            <el-button
+              v-hasPermi="hasDictDelPerm"
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleDelete(scope.row)"
+            >{{ commonField.deleteName }}</el-button>
           </template>
         </el-table-column>
       </el-table>

src/views/system/menu/index.vue

@@ -13,12 +13,33 @@
           />
         </el-form-item>
         <el-form-item>
-          <coolbutton :class-name="commonField.queryClass" :icon="commonField.queryIcon" :type="commonField.typePrimary" :name="commonField.queryName" :size="commonField.smallSize" :haspermi="hasQueryMenuPerm" @btn-click="handleQuery" />
-          <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          <!--          //查询按钮-->
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="handleQuery"
+          >{{ commonField.queryName }}</el-button>
+          <!--          //重置按钮-->
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+          >{{ commonField.resetName }}</el-button>
         </el-form-item>
         <div style="float: right">
           <el-form-item>
-            <coolbutton :class-name="commonField.addClass" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddMenuPerm" @btn-click="handleAdd" />
+            <!--          //新增按钮-->
+            <el-button
+              v-hasPermi="hasAddMenuPerm"
+              :class="commonField.addClass"
+              :type="commonField.typePrimary"
+              :icon="commonField.addIcon"
+              :size="commonField.smallSize"
+              @click="handleAdd"
+            >{{ commonField.addName }}</el-button>
           </el-form-item>
         </div>
       </el-form>
@@ -61,7 +82,14 @@
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
           <template slot-scope="scope">
-            <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdateMenuPerm" @btn-click="handleUpdate(scope.row)" />
+            <!--              //修改-->
+            <el-button
+              v-hasPermi="hasUpdateMenuPerm"
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleUpdate(scope.row)"
+            >{{ commonField.updateName }}</el-button>
             <el-switch
               v-model="scope.row.flag"
               active-value="1"
@@ -74,10 +102,24 @@
               </span>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item>
-                  <coolbutton :class-name="commonField.delClass" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDelMenuPerm" @btn-click="handleDelete(scope.row)" />
+                  <!--              //删除-->
+                  <el-button
+                    v-hasPermi="hasDelMenuPerm"
+                    :class="commonField.delClass"
+                    :type="commonField.typeParent"
+                    :size="commonField.size"
+                    @click="handleDelete(scope.row)"
+                  >{{ commonField.deleteName }}</el-button>
                 </el-dropdown-item>
                 <el-dropdown-item>
-                  <coolbutton :class-name="commonField.delClass" :type="commonField.typeParent" :name="commonField.addName" :size="commonField.size" :haspermi="hasAddMenuPerm" @btn-click="handleAdd(scope.row)" />
+                  <!--          //新增按钮-->
+                  <el-button
+                    v-hasPermi="hasAddMenuPerm"
+                    :class="commonField.delClass"
+                    :type="commonField.typeParent"
+                    :size="commonField.size"
+                    @click="handleAdd(scope.row)"
+                  >{{ commonField.addName }}</el-button>
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>

src/views/system/role/index.vue

@@ -40,13 +40,42 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button class="queryBtn" type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
-          <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          <!--          //查询按钮-->
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="handleQuery"
+          >{{ commonField.queryName }}</el-button>
+          <!--          //重置按钮-->
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+          >{{ commonField.resetName }}</el-button>
         </el-form-item>
         <div style="float: right">
           <el-form-item>
-            <coolbutton :class-name="commonField.addClass" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
-            <coolbutton :class-name="commonField.exportClass" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasExportPerm" @btn-click="handleExport" />
+            <!--          //新增按钮-->
+            <el-button
+              v-hasPermi="hasAddPerm"
+              :class="commonField.addClass"
+              :type="commonField.typePrimary"
+              :icon="commonField.addIcon"
+              :size="commonField.smallSize"
+              @click="handleAdd"
+            >{{ commonField.addName }}</el-button>
+            <!--          //导出-->
+            <el-button
+              v-hasPermi="hasExportPerm"
+              :class="commonField.exportClass"
+              :type="commonField.typeSuccess"
+              :icon="commonField.exportIcon"
+              :size="commonField.smallSize"
+              @click="handleExport"
+            >{{ commonField.exportName }}</el-button>
           </el-form-item>
         </div>
       </el-form>
@@ -87,20 +116,29 @@
         </el-table-column>
         <el-table-column label="操作" class-name="small-padding fixed-width" width="200px">
           <template slot-scope="scope">
-            <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
+            <!--              //修改-->
             <el-button
-              v-hasPermi="['sys:role:update']"
-              class="resetBtnText"
-              size="mini"
-              type="text"
+              v-hasPermi="hasUpdatePerm"
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleUpdate(scope.row)"
+            >{{ commonField.updateName }}</el-button>
+            <el-button
+              v-hasPermi="hasDelPerm"
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
               @click="handleMenu(scope.row)"
-            >数据权限</el-button>
+            >{{ commonField.dataPower }}</el-button>
+            <!--              //删除-->
             <el-button
-              class="delBtn"
-              size="mini"
-              type="text"
+              v-hasPermi="hasDelPerm"
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
               @click="handleDelete(scope.row)"
-            >删除</el-button>
+            >{{ commonField.deleteName }}</el-button>
           </template>
         </el-table-column>
       </el-table>

src/views/system/user/index.vue

@@ -29,19 +29,50 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button class="queryBtn" type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
-          <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+<!--          //查询按钮-->
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="handleQuery"
+          >{{ commonField.queryName }}</el-button>
+<!--          //重置按钮-->
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+          >{{ commonField.resetName }}</el-button>
         </el-form-item>
         <el-form-item style="float: right">
-          <coolbutton :class-name="commonField.addClass" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
+<!--          //新增按钮-->
           <el-button
-            class="importBtn"
-            type="warning"
-            icon="el-icon-upload"
-            size="small"
+            v-hasPermi="hasAddPerm"
+            :class="commonField.addClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.addIcon"
+            :size="commonField.smallSize"
+            @click="handleAdd"
+          >{{ commonField.addName }}</el-button>
+<!--          //导入按钮-->
+          <el-button
+            v-hasPermi="hasImportPerm"
+            :class="commonField.importClass"
+            :type="commonField.typeWarning"
+            :icon="commonField.importIcon"
+            :size="commonField.smallSize"
             @click="handleImport"
-          >导入</el-button>
-          <coolbutton :class-name="commonField.exportClass" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasAddPerm" @btn-click="handleExport" />
+          >{{ commonField.importName }}</el-button>
+<!--          //导出-->
+          <el-button
+            v-hasPermi="hasExportPerm"
+            :class="commonField.exportClass"
+            :type="commonField.typeSuccess"
+            :icon="commonField.exportIcon"
+            :size="commonField.smallSize"
+            @click="handleExport"
+          >{{ commonField.exportName }}</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -122,9 +153,31 @@
             class-name="small-padding fixed-width"
           >
             <template slot-scope="scope">
-              <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
-              <coolbutton :class-name="commonField.resetPasClass" :type="commonField.typeParent" :name="commonField.resetPassword" :size="commonField.size" :haspermi="hasResetPerm" @btn-click="handleResetPwd(scope.row)" />
-              <coolbutton v-if="scope.row.businessId !== 1" :class-name="commonField.delClass" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDelPerm" @btn-click="handleDelete(scope.row)" />
+<!--              //修改-->
+              <el-button
+                v-hasPermi="hasUpdatePerm"
+                :class="commonField.updateClass"
+                :type="commonField.typeParent"
+                :size="commonField.size"
+                @click="handleUpdate(scope.row)"
+              >{{ commonField.updateName }}</el-button>
+<!--              //重置密码-->
+              <el-button
+                v-hasPermi="hasResetPerm"
+                :class="commonField.resetPasClass"
+                :type="commonField.typeParent"
+                :size="commonField.size"
+                @click="handleResetPwd(scope.row)"
+              >{{ commonField.resetPassword }}</el-button>
+<!--              //删除-->
+              <el-button
+                v-if="scope.row.businessId !== 1"
+                v-hasPermi="hasDelPerm"
+                :class="commonField.delClass"
+                :type="commonField.typeParent"
+                :size="commonField.size"
+                @click="handleDelete(scope.row)"
+              >{{ commonField.deleteName }}</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -340,12 +393,11 @@ import { treeSelect } from '@/api/system/dept'
 import TreeSelect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { getListRole } from '@/api/system/role'
-import Coolbutton from '@/components/coolbutton'
 import { getDataCache, setDataCache } from '@/assets/js/filterData'
 import commonField from '@/utils/commonField'
 export default {
   name: 'User',
-  components: { TreeSelect, Coolbutton },
+  components: { TreeSelect },
   data() {
     const trueGroupName = (rule, value, callback) => {
       if (value && !value.trim()) {
@@ -365,11 +417,12 @@ export default {
         text: true,
         password: false
       },
-      hasDelPerm: ['sys:user:delete'],
-      hasResetPerm: ['sys:user:resetPwd'],
-      hasUpdatePerm: ['sys:user:update'],
       hasAddPerm: ['sys:user:add'],
+      hasUpdatePerm: ['sys:user:update'],
+      hasDelPerm: ['sys:user:delete'],
+      hasImportPerm: ['sys:user:import'],
       hasExportPerm: ['sys:user:export'],
+      hasResetPerm: ['sys:user:resetPwd'],
       pwdType: 'password',
       // 遮罩层
       loading: true,