权限按钮封装

src/components/LevelButton/index.vue

@@ -1,76 +0,0 @@
-<template>
-  <div v-if="hasPermission" class="level-button">
-    <el-button
-      :size="size"
-      :type="type"
-      :plain="plain"
-      :round="round"
-      :circle="circle"
-      :loading="loading"
-      :disabled="disabled"
-      :icon="icon"
-      :autofocus="autofocus"
-      :native-type="nativeType"
-      @click="$emit('click')"
-    ><slot /></el-button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LevelButton',
-  props: {
-    permission: {
-      type: Array,
-      default: () => []
-    },
-    size: {
-      type: String,
-      default: 'medium',
-      validator: value => ['medium', 'small', 'mini'].indexOf(value) !== -1
-    },
-    type: {
-      type: String,
-      default: 'primary',
-      validator: value => ['primary', 'success', 'warning', 'danger', 'info', 'text'].indexOf(value) !== -1
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    round: {
-      type: Boolean,
-      default: false
-    },
-    circle: {
-      type: Boolean,
-      default: false },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    nativeType: {
-      type: String,
-      default: 'button',
-      validator: value => ['button', 'submit', 'reset'].indexOf(value) !== -1
-    }
-  },
-  computed: {
-    hasPermission() {
-      return this.permission.length === 0
-    }
-  }
-}
-</script>

src/directive/permission/permission.js

@@ -1,6 +1,6 @@
 import store from '@/store'
 
-function checkPermission(el, binding) {
+function checkPermission(el, binding, vnode) {
   const { value } = binding
   const roles = store.getters && store.getters.roles
 
@@ -11,7 +11,6 @@ function checkPermission(el, binding) {
       const hasPermission = roles.some(role => {
         return permissionRoles.includes(role)
       })
-
       if (!hasPermission) {
         el.parentNode && el.parentNode.removeChild(el)
       }

src/router/index.js

@@ -55,6 +55,10 @@ export const constantRoutes = [
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/proxy'),
     hidden: true
   },
+  {
+    path: '/test',
+    component: () => import('@/views/test')
+  },
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/error-page/404'),

src/views/admin/supplier/index.vue

@@ -60,7 +60,7 @@
       <el-table-column label="创建人" class-name="status-col" width="100px" prop="createBy" />
       <el-table-column label="操作" align="center" width="360" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <el-button v-permission="['admin']" size="mini" type="primary" @click="$_navigationTo(`supplier-edit?id=${row.authUserId}&type=edit`)">
+          <el-button size="mini" type="primary" @click="$_navigationTo(`supplier-edit?id=${row.authUserId}&type=edit`)">
             编辑
           </el-button>
           <el-button size="mini" type="primary" @click="handleProxy(row)">
@@ -89,12 +89,9 @@ import { resetPassword } from '@/api/user'
 import { fetchBrandList } from '@/api/brand'
 import { formatDate } from '@/utils'
 
-import permission from '@/directive/permission/index.js' // 权限判断指令
-
 export default {
   name: 'ComplexTable',
   components: { Pagination },
-  directives: { permission },
   filters: {
     formatTime(time) {
       if (!time) {

src/views/components/PermissionButton/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-button
+    :size="size"
+    :type="type"
+    :plain="plain"
+    :round="round"
+    :circle="circle"
+    :loading="loading"
+    :disabled="disabled"
+    :icon="icon"
+    :autofocus="autofocus"
+    :native-type="nativeType"
+    @click="handleClick"
+  ><slot /></el-button>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import jumpAction from './jumpAction'
+export default {
+  name: 'PermissionButton',
+  props: {
+    permission: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: value => ['medium', 'small', 'mini'].indexOf(value) !== -1
+    },
+    type: {
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'success', 'warning', 'danger', 'info', 'text'].indexOf(value) !== -1
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    circle: {
+      type: Boolean,
+      default: false },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    nativeType: {
+      type: String,
+      default: 'button',
+      validator: value => ['button', 'submit', 'reset'].indexOf(value) !== -1
+    }
+  },
+  data() {
+    return {
+      hasPermission: true
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.permission.length > 0) this.hasPermission = checkPermission(this.permission)
+      if (this.hasPermission) {
+        this.$emit('click')
+      } else {
+        this.$confirm('对不起，您的账号试用已到期，请尽快开通会员，以免影响正常使用！', '提示', {
+          confirmButtonText: '开通会员',
+          cancelButtonText: '取消'
+        }).then(() => {
+          jumpAction()
+          console.log('开通会员')
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消操作'
+          })
+        })
+      }
+    }
+  }
+}
+</script>

src/views/components/PermissionButton/jumpAction.js

@@ -0,0 +1,8 @@
+// import router from '@/router'
+// const jumpList = {}
+
+// 跳转到页面
+export default function jumpToPage(type) {
+  // router.push(jumpList[type])
+  console.log('页面跳转')
+}

src/views/normal/club/device/index.vue

@@ -33,8 +33,8 @@
         <el-option label="待上线" :value="2" />
         <el-option label="未上线" :value="0" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
-      <el-button icon="el-icon-edit" type="primary" @click="$_navigationTo(`device-add?type=add`)">添加</el-button>
+      <permission-button type="primary" icon="el-icon-search" @click="handleFilter">查询</permission-button>
+      <permission-button icon="el-icon-edit" type="primary" @click="$_navigationTo(`device-add?type=add`)">添加</permission-button>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -81,11 +81,11 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</el-button>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button type="info" size="mini" @click="handleChangeStatus(row)">下线</el-button>
+              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else>
@@ -102,18 +102,18 @@
       <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <el-button type="default" size="mini" @click="$_navigationTo(`device-edit?type=edit&id=${row.productId}`)">
+          <permission-button type="default" size="mini" @click="$_navigationTo(`device-edit?type=edit&id=${row.productId}`)">
             编辑
-          </el-button>
-          <el-button type="danger" size="mini" @click="handleRemoveProduct(row)">
+          </permission-button>
+          <permission-button type="danger" size="mini" @click="handleRemoveProduct(row)">
             删除
-          </el-button>
-          <el-button v-if="row.auditStatus === 1" type="primary" size="mini" @click="handleShowQRcode(row)">
+          </permission-button>
+          <permission-button v-if="row.auditStatus === 1" type="primary" size="mini" @click="handleShowQRcode(row)">
             二维码
-          </el-button>
-          <el-button v-else type="info" size="mini" disabled>
+          </permission-button>
+          <permission-button v-else type="info" size="mini" disabled>
             二维码
-          </el-button>
+          </permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -129,6 +129,7 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import { getProdList, setProductStatus, removeProduct } from '@/api/product'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import Qrcode from '@/components/qrcode'
@@ -137,7 +138,7 @@ import { mapGetters } from 'vuex'
 import { setStorage } from '@/utils/storage'
 export default {
   name: 'ComplexTable',
-  components: { Pagination, Qrcode },
+  components: { Pagination, Qrcode, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -274,7 +275,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button{
+  .permission-button{
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/normal/club/index.vue

@@ -32,13 +32,13 @@
         <el-option label="未上线" :value="0" />
       </el-select>
 
-      <el-button icon="el-icon-search" type="primary" @click="getList">查询</el-button>
-      <el-button icon="el-icon-edit" type="primary" @click="$_navigationTo('club-add?type=edit')">添加</el-button>
-      <el-button icon="el-icon-upload" type="primary" @click="improtDialogVisible = true">导入</el-button>
-      <el-button icon="el-icon-document" type="primary" @click="handleExportExcel">导出</el-button>
-      <el-button icon="el-icon-document-copy" type="primary" @click="downLoadExportExcel">获取导入模板</el-button>
-      <el-button type="primary" icon="el-icon-download" @click="handleExport(1)">一键下载授权牌</el-button>
-      <el-button type="primary" icon="el-icon-download" @click="handleExport(2)">一键下载二维码</el-button>
+      <permission-button icon="el-icon-search" type="primary" @click="getList">查询</permission-button>
+      <permission-button icon="el-icon-edit" type="primary" @click="$_navigationTo('club-add?type=edit')">添加</permission-button>
+      <permission-button icon="el-icon-upload" type="primary" @click="improtDialogVisible = true">导入</permission-button>
+      <permission-button icon="el-icon-document" type="primary" @click="handleExportExcel">导出</permission-button>
+      <permission-button icon="el-icon-document-copy" type="primary" @click="downLoadExportExcel">获取导入模板</permission-button>
+      <permission-button type="primary" icon="el-icon-download" @click="handleExport(1)">一键下载授权牌</permission-button>
+      <permission-button type="primary" icon="el-icon-download" @click="handleExport(2)">一键下载二维码</permission-button>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -85,11 +85,11 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</el-button>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button type="info" size="mini" @click="handleChangeStatus(row)">下线</el-button>
+              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else>
@@ -108,18 +108,18 @@
       <!-- <el-table-column label="创建人" class-name="status-col" width="160px" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="400px" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="$_navigationTo(`club-edit?type=edit&id=${row.authId}`)">
+          <permission-button type="primary" size="mini" @click="$_navigationTo(`club-edit?type=edit&id=${row.authId}`)">
             编辑
-          </el-button>
-          <el-button type="primary" size="mini" @click="$_navigationTo(`user-list?id=${row.authId}`)">
+          </permission-button>
+          <permission-button type="primary" size="mini" @click="$_navigationTo(`user-list?id=${row.authId}`)">
             登录用户
-          </el-button>
-          <el-button type="primary" size="mini" @click="$_navigationTo(`device-list?id=${row.authId}`)">
+          </permission-button>
+          <permission-button type="primary" size="mini" @click="$_navigationTo(`device-list?id=${row.authId}`)">
             查看设备认证
-          </el-button>
-          <el-button type="danger" size="mini" @click="handleRemoveAuth(row)">
+          </permission-button>
+          <permission-button type="danger" size="mini" @click="handleRemoveAuth(row)">
             删除
-          </el-button>
+          </permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -146,8 +146,8 @@
         </el-form-item> -->
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="showAddAuthDialog = false">取 消</el-button>
-        <el-button type="primary" :disabled="disabled" @click="handleUpdateBrandAuth">确 定</el-button>
+        <permission-button @click="showAddAuthDialog = false">取 消</permission-button>
+        <permission-button type="primary" :disabled="disabled" @click="handleUpdateBrandAuth">确 定</permission-button>
       </span>
     </el-dialog>
     <!-- 导入对话框 -->
@@ -165,8 +165,8 @@
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="improtDialogVisible = false">取 消</el-button>
-        <el-button type="primary" :disabled="!saveBtnClickable" :loading="requestLoading" @click="submitUpload">确 定</el-button>
+        <permission-button @click="improtDialogVisible = false">取 消</permission-button>
+        <permission-button type="primary" :disabled="!saveBtnClickable" :loading="requestLoading" @click="submitUpload">确 定</permission-button>
       </span>
     </el-dialog>
     <!-- dialog END -->
@@ -174,6 +174,7 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import FileUpload from '@/components/FileUpload'
 import { fecthAuthList, saveBrandAuth, changeAuthStatus, removeAuth, authImportExcel } from '@/api/auth'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
@@ -182,7 +183,7 @@ import { formatDate } from '@/utils'
 import { debounce, downLoadWithATag } from '@/utils/tools'
 export default {
   name: 'ComplexTable',
-  components: { Pagination, FileUpload },
+  components: { Pagination, FileUpload, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {

src/views/normal/club/user/index.vue

@@ -24,8 +24,8 @@
         <el-option label="未绑定" :value="0" />
         <el-option label="已过期" :value="2" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button icon="el-icon-thumb" type="primary" @click="handleMakeGenerate">生成邀请码</el-button>
+      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      <permission-button icon="el-icon-thumb" type="primary" @click="handleMakeGenerate">生成邀请码</permission-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -78,8 +78,8 @@
       </el-table-column>
       <el-table-column label="操作" width="200px" align="center">
         <template slot-scope="{row}">
-          <el-button v-if="row.status === 1" type="danger" size="mini" style="margin-right:5px" @click="handleUnbindGenerate(row)">解绑邀请码</el-button>
-          <el-button v-else type="primary" size="mini" style="margin-right:5px" @click="handleUpdateGenerate(row)">更新邀请码</el-button>
+          <permission-button v-if="row.status === 1" type="danger" size="mini" style="margin-right:5px" @click="handleUnbindGenerate(row)">解绑邀请码</permission-button>
+          <permission-button v-else type="primary" size="mini" style="margin-right:5px" @click="handleUpdateGenerate(row)">更新邀请码</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -89,12 +89,13 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
 import { getAuthUserList, makeGenerate, unbindGenerate, updateGenerate } from '@/api/auth'
 export default {
-  components: { Pagination },
+  components: { Pagination, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -199,7 +200,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button {
+  .permission-button {
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/normal/doctor/index.vue

@@ -31,8 +31,8 @@
         <el-option label="待上线" :value="2" />
         <el-option label="未上线" :value="0" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button type="primary" icon="el-icon-edit" @click="$_navigationTo('add?type=add')">添加</el-button>
+      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      <permission-button type="primary" icon="el-icon-edit" @click="$_navigationTo('add?type=add')">添加</permission-button>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -79,11 +79,11 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</el-button>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button type="info" size="mini" @click="handleChangeStatus(row)">下线</el-button>
+              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else-if="row.auditStatus === 2">
@@ -105,12 +105,12 @@
       <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="$_navigationTo(`edit?type=edit&id=${row.doctorId}`)">
+          <permission-button type="primary" size="mini" @click="$_navigationTo(`edit?type=edit&id=${row.doctorId}`)">
             编辑
-          </el-button>
-          <el-button type="danger" size="mini" @click="handleRemoveDoctor(row)">
+          </permission-button>
+          <permission-button type="danger" size="mini" @click="handleRemoveDoctor(row)">
             删除
-          </el-button>
+          </permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -120,13 +120,14 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { mapGetters } from 'vuex'
 import { formatDate } from '@/utils'
 import { fetchDoctorList, removeDoctor, doctorStatusChange } from '@/api/doctor'
 
 export default {
-  components: { Pagination },
+  components: { Pagination, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -208,7 +209,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button{
+  .permission-button{
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/normal/feedback/index.vue

@@ -25,7 +25,7 @@
         <el-option label="已处理" :value="1" />
         <el-option label="未处理" :value="0" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -99,7 +99,7 @@
       </el-table-column>
       <el-table-column label="操作" width="120px" align="center">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`/feedback/detail?feedbackId=${row.feedbackId}`)">处理</el-button>
+          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`/feedback/detail?feedbackId=${row.feedbackId}`)">处理</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -110,12 +110,13 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import Pagination from '@/components/Pagination'
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
 import { getFeedbackList } from '@/api/auth'
 export default {
-  components: { Pagination },
+  components: { Pagination, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -178,7 +179,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button {
+  .permission-button {
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/normal/material/article/index.vue

@@ -38,12 +38,12 @@
         <el-option label="待上线" :value="2" />
         <el-option label="未上线" :value="0" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button
+      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      <permission-button
         icon="el-icon-edit"
         type="primary"
         @click="$_navigationTo(`article-edit`)"
-      >添加文章</el-button>
+      >添加文章</permission-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -94,20 +94,20 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button
+              <permission-button
                 type="primary"
                 size="mini"
                 @click="handleChangeStatus(row)"
-              >上线</el-button>
+              >上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button
+              <permission-button
                 type="info"
                 size="mini"
                 plain
                 @click="handleChangeStatus(row)"
-              >下线</el-button>
+              >下线</permission-button>
             </template>
           </template>
           <template v-else>
@@ -123,20 +123,20 @@
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
         <template slot-scope="{ row }">
-          <el-button
+          <permission-button
             type="primary"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-edit"
             @click="$_navigationTo(`article-edit?articleId=${row.articleId}`)"
-          >编辑</el-button>
-          <el-button
+          >编辑</permission-button>
+          <permission-button
             type="danger"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-s-check"
             @click="handleRemoveArticle(row)"
-          >删除</el-button>
+          >删除</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -146,12 +146,13 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
 import { changeArticleStatus, getArticleList, removeArticle } from '@/api/doc'
 export default {
-  components: { Pagination },
+  components: { Pagination, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -256,7 +257,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button {
+  .permission-button {
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/normal/material/file/index.vue

@@ -38,12 +38,12 @@
         <el-option label="待上线" :value="2" />
         <el-option label="未上线" :value="0" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button
+      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      <permission-button
         icon="el-icon-edit"
         type="primary"
         @click="handleShowDialog('add')"
-      >添加文件</el-button>
+      >添加文件</permission-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -81,20 +81,20 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button
+              <permission-button
                 type="primary"
                 size="mini"
                 @click="handleChangeStatus(row)"
-              >上线</el-button>
+              >上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button
+              <permission-button
                 type="info"
                 size="mini"
                 plain
                 @click="handleChangeStatus(row)"
-              >下线</el-button>
+              >下线</permission-button>
             </template>
           </template>
           <template v-else>
@@ -110,27 +110,27 @@
       </el-table-column>
       <el-table-column label="操作" width="280px" align="center">
         <template slot-scope="{ row }">
-          <el-button
+          <permission-button
             type="primary"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-view"
             @click="handlePreviewFile(row)"
-          >预览</el-button>
-          <el-button
+          >预览</permission-button>
+          <permission-button
             type="primary"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-edit"
             @click="handleShowDialog('edit', row)"
-          >编辑</el-button>
-          <el-button
+          >编辑</permission-button>
+          <permission-button
             type="danger"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-s-check"
             @click="handleRemoveFile(row)"
-          >删除</el-button>
+          >删除</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -170,14 +170,15 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="submitLoading" @click="handleSave">提 交</el-button>
+        <permission-button @click="dialogVisible = false">取 消</permission-button>
+        <permission-button type="primary" :loading="submitLoading" @click="handleSave">提 交</permission-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import UploadFile from '@/components/UploadFile'
 import { formatDate } from '@/utils'
@@ -185,7 +186,7 @@ import { mapGetters } from 'vuex'
 import { changeFileStatus, getFileList, removeFile, saveFile } from '@/api/doc'
 import openWindow from '@/utils/open-window'
 export default {
-  components: { Pagination, UploadFile },
+  components: { Pagination, UploadFile, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -442,7 +443,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button {
+  .permission-button {
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/normal/material/image/index.vue

@@ -38,12 +38,12 @@
         <el-option label="待上线" :value="2" />
         <el-option label="未上线" :value="0" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button
+      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      <permission-button
         icon="el-icon-edit"
         type="primary"
         @click="$_navigationTo(`image-edit?type=add`)"
-      >添加图片</el-button>
+      >添加图片</permission-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -87,11 +87,11 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</el-button>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button type="info" size="mini" plain @click="handleChangeStatus(row)">下线</el-button>
+              <permission-button type="info" size="mini" plain @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else>
@@ -107,8 +107,8 @@
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`image-edit?type=edit&imageId=${row.imageId}`)">编辑</el-button>
-          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveImage(row)">删除</el-button>
+          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`image-edit?type=edit&imageId=${row.imageId}`)">编辑</permission-button>
+          <permission-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveImage(row)">删除</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -118,12 +118,13 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
 import { changeImageStatus, getImageList, removeImage } from '@/api/doc'
 export default {
-  components: { Pagination },
+  components: { Pagination, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -229,7 +230,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button {
+  .permission-button {
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/normal/material/video/index.vue

@@ -38,8 +38,8 @@
         <el-option label="待上线" :value="2" />
         <el-option label="未上线" :value="0" />
       </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button icon="el-icon-edit" type="primary" @click="handleShowDialog('add')">添加视频</el-button>
+      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      <permission-button icon="el-icon-edit" type="primary" @click="handleShowDialog('add')">添加视频</permission-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -83,11 +83,11 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</el-button>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button type="info" size="mini" plain @click="handleChangeStatus(row)">下线</el-button>
+              <permission-button type="info" size="mini" plain @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else>
@@ -103,9 +103,9 @@
       </el-table-column>
       <el-table-column label="操作" width="280px" align="center">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-video-play" @click="handlePlayer(row)">播放</el-button>
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="handleShowDialog('edit',row)">编辑</el-button>
-          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveVideo(row)">删除</el-button>
+          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-video-play" @click="handlePlayer(row)">播放</permission-button>
+          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="handleShowDialog('edit',row)">编辑</permission-button>
+          <permission-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveVideo(row)">删除</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -142,7 +142,7 @@
               :before-upload="beforeUpload"
               :file-list="fileList"
             >
-              <el-button size="mini" type="primary" style="width:100%">上传视频</el-button>
+              <permission-button size="mini" type="primary" style="width:100%">上传视频</permission-button>
             </el-upload>
             <el-input v-model="dialogData.videoPreviewUrl" type="hidden" class="hiddenInput" />
           </div>
@@ -150,8 +150,8 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提 交</el-button>
+        <permission-button @click="dialogVisible = false">取 消</permission-button>
+        <permission-button type="primary" :loading="submitLoading" @click="handleSubmit">提 交</permission-button>
       </div>
     </el-dialog>
     <!-- 视频预览对话框END -->
@@ -167,7 +167,7 @@
         您的浏览器不支持播放该视频
       </video>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogPreviewVisible = false">关闭</el-button>
+        <permission-button type="primary" @click="dialogPreviewVisible = false">关闭</permission-button>
       </div>
     </el-dialog>
     <!-- 视频预览对话框END -->
@@ -176,13 +176,14 @@
 </template>
 
 <script>
+import PermissionButton from '@/views/components/PermissionButton'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
 import { changeVideoStatus, getVideoList, removeVideo, saveVideo } from '@/api/doc'
 export default {
-  components: { Pagination },
+  components: { Pagination, PermissionButton },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -457,7 +458,7 @@ export default {
     vertical-align: middle;
     font-size: 14px;
   }
-  .el-button {
+  .permission-button {
     display: inline-block;
     margin-bottom: 10px;
     vertical-align: middle;

src/views/test/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <permission-button :permission="['normal']" @click="handleClick">按钮</permission-button>
+  </div>
+</template>
+
+<script>
+import PermissionButton from '@/views/components/PermissionButton'
+export default {
+  components: { PermissionButton },
+  methods: {
+    handleClick() {
+      console.log('handle click')
+    }
+  }
+}
+</script>