权限按钮抽离成全局组件

src/views/components/PermissionButton/index.vue → src/components/PermissionButton/index.vue

@@ -1,40 +1,40 @@
-<template>
-  <el-button v-bind="$attrs" @click="handleClick"><slot /></el-button>
-</template>
-
-<script>
-export default {
-  name: 'PermissionButton',
-  data() {
-    return {
-      hasPermission: true
-    }
-  },
-  methods: {
-    handleClick($event) {
-      const { freeUseFlag, vipStatus } = this.$store.getters.vipInfo
-      // (已过期 or 非会员) and 非试用期
-      this.hasPermission = !((vipStatus === 0 || vipStatus === 3) && freeUseFlag === 0)
-      if (this.hasPermission) {
-        this.$emit('click', $event)
-      } else {
-        this.$confirm('对不起，您的会员账号已到期，请尽快续费，以免影响正常使用！', '提示', {
-          confirmButtonText: '开通会员',
-          cancelButtonText: '取消'
-        })
-          .then(() => {
-            // jumpAction()
-            // console.log('开通会员')
-            this.$router.push('/vip/vip-open')
-          })
-          .catch(() => {
-            this.$message({
-              type: 'info',
-              message: '已取消操作'
-            })
-          })
-      }
-    }
-  }
-}
-</script>
+<template>
+  <el-button v-bind="$attrs" @click="handleClick"><slot /></el-button>
+</template>
+
+<script>
+export default {
+  name: 'PermissionButton',
+  data() {
+    return {
+      hasPermission: true
+    }
+  },
+  methods: {
+    handleClick($event) {
+      const { freeUseFlag, vipStatus } = this.$store.getters.vipInfo
+      // (已过期 or 非会员) and 非试用期
+      this.hasPermission = !((vipStatus === 0 || vipStatus === 3) && freeUseFlag === 0)
+      if (this.hasPermission) {
+        this.$emit('click', $event)
+      } else {
+        this.$confirm('对不起，您的会员账号已到期，请尽快续费，以免影响正常使用！', '提示', {
+          confirmButtonText: '开通会员',
+          cancelButtonText: '取消'
+        })
+          .then(() => {
+            // jumpAction()
+            // console.log('开通会员')
+            this.$router.push('/vip/vip-open')
+          })
+          .catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消操作'
+            })
+          })
+      }
+    }
+  }
+}
+</script>

src/views/components/PermissionButton/jumpAction.js → src/components/PermissionButton/jumpAction.js

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

src/components/index.js

@@ -2,12 +2,14 @@ import AuditStatus from './AuditStatus'
 import AuditButtonGroup from './AuditButtonGroup'
 import Pagination from './Pagination'
 import ParamList from './ParamList'
+import PermissionButton from './PermissionButton'
 
 const install = (Vue) => {
   Vue.component(AuditStatus.name, AuditStatus)
   Vue.component(AuditButtonGroup.name, AuditButtonGroup)
   Vue.component(Pagination.name, Pagination)
   Vue.component(ParamList.name, ParamList)
+  Vue.component(PermissionButton.name, PermissionButton)
 }
 
 export default {

src/views/admin/logistics-licensed/club/device/index.vue

@@ -10,7 +10,7 @@
         <el-input v-model="listQuery.snCode" placeholder="设备SN码" @keyup.enter.native="handleFilter" />
       </div>
       <div class="filter-control">
-        <permission-button type="primary" @click="handleFilter">查询</permission-button>
+        <el-button type="primary" @click="handleFilter">查询</el-button>
       </div>
     </div>
     <!-- 表格区域 -->
@@ -56,14 +56,13 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { getProdList } from '@/api/product'
 import Qrcode from '@/components/qrcode'
 import { mapGetters } from 'vuex'
 import { setStorage } from '@/utils/storage'
 export default {
   name: 'ComplexTable',
-  components: { Qrcode, PermissionButton },
+  components: { Qrcode },
 
   data() {
     return {

src/views/normal/audit/club/components/club-list.vue

@@ -59,18 +59,18 @@
 
       <el-table-column label="操作" width="240px" align="center">
         <template slot-scope="{ row }">
-          <el-button
+          <permission-button
             type="warning"
             size="mini"
             style="margin-right: 5px"
             @click="$_navigationTo(`/supplier-audit/club/club-detail?authId=${row.authId}`)"
-          >审核</el-button>
+          >审核</permission-button>
           <el-badge :hidden="row.shopWaitAuditNum === 0" :value="row.shopWaitAuditNum" :max="99">
-            <el-button
+            <permission-button
               type="primary"
               size="mini"
               @click="$_navigationTo(`/supplier-audit/club/device/list?authId=${row.authId}`)"
-            >设备认证</el-button>
+            >设备认证</permission-button>
           </el-badge>
         </template>
       </el-table-column>

src/views/normal/audit/club/components/device-list.vue

@@ -11,7 +11,7 @@
         <el-input v-model="listQuery.snCode" placeholder="请输入设备SN码" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
-        <el-button type="primary" @click="getList">查询</el-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
       </div>
     </div>
     <!-- 搜索区域END -->
@@ -54,12 +54,12 @@
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
         <template slot-scope="{ row }">
-          <el-button
+          <permission-button
             v-if="row.shopAuditStatus !== 1"
             type="primary"
             size="mini"
             @click="$_navigationTo(`/supplier-audit/club/device-detail?id=${row.productId}&authId=${listQuery.authId}`)"
-          >审核</el-button>
+          >审核</permission-button>
           <span v-else class="status success el-icon-check">&nbsp;已审核</span>
         </template>
       </el-table-column>

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

@@ -88,8 +88,6 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { mapGetters } from 'vuex'
 import { fetchProductCateList, removeProductCate, updateProductCateStatus } from '@/api/product'
 
@@ -103,7 +101,6 @@ const resetFormData = () => ({
 
 export default {
   name: 'ComplexTable',
-  components: { Pagination, PermissionButton },
   data() {
     return {
       isLoading: false,

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

@@ -29,10 +29,7 @@
       </div>
       <div class="filter-control">
         <permission-button type="primary" @click="handleFilter">查询</permission-button>
-        <permission-button
-          type="primary"
-          @click="$_navigationTo(`device-add?type=add`)"
-        >添加</permission-button>
+        <permission-button type="primary" @click="$_navigationTo(`device-add?type=add`)">添加</permission-button>
       </div>
     </div>
     <!-- 表格区域 -->
@@ -43,7 +40,7 @@
       border
       fit
       highlight-current-row
-      style="width: 100%;"
+      style="width: 100%"
       header-row-class-name="tableHeader"
     >
       <el-table-column label="序号" :index="indexMethod" type="index" align="center" width="80" />
@@ -61,17 +58,17 @@
           <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
-              <span style="margin-right:10px;" class="status danger">已下线</span>
+              <span style="margin-right: 10px" class="status danger">已下线</span>
               <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
-              <span style="margin-right:10px;" class="status success ">已上线</span>
+              <span style="margin-right: 10px" class="status success">已上线</span>
               <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else>
             <!-- <el-tag type="warning">待上线</el-tag> -->
-            <span style="margin-right:10px;" class="status warning">待上线</span>
+            <span style="margin-right: 10px" class="status warning">待上线</span>
           </template>
         </template>
       </el-table-column>
@@ -90,26 +87,17 @@
           >
             编辑
           </permission-button>
-          <permission-button type="danger" size="mini" @click="handleRemoveProduct(row)">
-            删除
-          </permission-button>
+          <permission-button type="danger" size="mini" @click="handleRemoveProduct(row)"> 删除 </permission-button>
           <permission-button v-if="row.auditStatus === 1" type="primary" size="mini" @click="handleShowQRcode(row)">
             二维码
           </permission-button>
-          <permission-button v-else type="info" size="mini" disabled>
-            二维码
-          </permission-button>
+          <permission-button v-else type="info" size="mini" disabled> 二维码 </permission-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 页码 -->
-    <pagination
-      :total="total"
-      :page.sync="listQuery.pageNum"
-      :limit.sync="listQuery.pageSize"
-      @pagination="getList"
-    />
+    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
 
     <!-- 二维码 -->
     <transition name="fade">
@@ -119,14 +107,13 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { getProdList, setProductStatus, removeProduct } from '@/api/product'
 import Qrcode from '@/components/qrcode'
 import { mapGetters } from 'vuex'
 import { setStorage } from '@/utils/storage'
 export default {
   name: 'ComplexTable',
-  components: { Qrcode, PermissionButton },
+  components: { Qrcode },
   data() {
     return {
       authParty: '',
@@ -165,7 +152,7 @@ export default {
     // 获取列表信息
     getList() {
       getProdList(this.listQuery)
-        .then(res => {
+        .then((res) => {
           const { total, list } = res.data
           this.total = total
           this.list = list
@@ -187,7 +174,7 @@ export default {
         const { status, productId } = item
         const newStatus = status === 0 ? 1 : 0
         setProductStatus({ status: newStatus, productId })
-          .then(res => {
+          .then((res) => {
             // this.$message.success(res.data)
             this.$message({
               message: '操作成功',
@@ -213,7 +200,7 @@ export default {
       if (text !== 'confirm') return
 
       removeProduct({ productId: item.productId })
-        .then(res => {
+        .then((res) => {
           const h = this.$createElement
           this.$notify.success({
             title: '删除商品',
@@ -234,7 +221,7 @@ export default {
     // 获取审核未通过条数
     // Audit failed 审核未通过
     checkAuditFailedList(data) {
-      this.auditFailedList = data.filter(item => item.auditStatus === 0)
+      this.auditFailedList = data.filter((item) => item.auditStatus === 0)
       if (this.auditFailedList.length > 0 && this.auditNoticeFlag) {
         this.$notify.info({
           title: '消息通知',
@@ -252,6 +239,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/normal/club/index.vue

@@ -73,7 +73,6 @@
             </template>
           </template>
           <template v-else>
-            <!-- <el-tag type="warning">待上线</el-tag> -->
             <span style="margin-right: 10px" class="status warning">待上线</span>
           </template>
         </template>
@@ -116,26 +115,7 @@
     <!-- 页码 -->
     <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
 
-    <!-- 对话框区域 -->
-    <el-dialog :title="dialogTitle" :visible.sync="showAddAuthDialog" width="30%" @close="dialogClosed">
-      <el-form ref="addAuthForm" :rules="addAuthFormRules" :model="addAuthFormData" label-width="100px">
-        <el-form-item label="授权机构：" prop="authParty">
-          <el-input v-model="addAuthFormData.authParty" placeholder="请输入授权机构名称" />
-        </el-form-item>
-        <!-- <el-form-item label="上线状态：">
-          <el-select v-model="addAuthFormData.status">
-            <el-option label="上线" :value="1" />
-            <el-option label="下线" :value="0" />
-          </el-select>
-        </el-form-item> -->
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <permission-button @click="showAddAuthDialog = false">取 消</permission-button>
-        <permission-button type="primary" :disabled="disabled" @click="handleUpdateBrandAuth">确 定</permission-button>
-      </span>
-    </el-dialog>
     <!-- 导入对话框 -->
-    <!-- dialog Start -->
     <el-dialog title="导入" :visible.sync="improtDialogVisible" width="30%" @close="improtDialogClose">
       <el-form ref="dialogForm" :model="improtDialogFormData" label-width="86px" :rules="improtDialogFormRules">
         <el-form-item label="文件路径:" prop="fileUrl">
@@ -153,7 +133,6 @@
         >确 定</permission-button>
       </span>
     </el-dialog>
-    <!-- dialog END -->
 
     <!-- 二维码 -->
     <transition name="fade">
@@ -163,16 +142,15 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import FileUpload from '@/components/FileUpload'
 import Qrcode from '@/components/qrcode/club-qrcode.vue'
-import { fecthAuthList, saveBrandAuth, changeAuthStatus, removeAuth, authImportExcel } from '@/api/auth'
+import { fecthAuthList, changeAuthStatus, removeAuth, authImportExcel } from '@/api/auth'
 import { mapGetters } from 'vuex'
 import { debounce, downloadWithUrl } from '@/utils/tools'
 import handleClipboard from '@/utils/clipboard'
 export default {
   name: 'ComplexTable',
-  components: { FileUpload, PermissionButton, Qrcode },
+  components: { FileUpload, Qrcode },
   data() {
     return {
       showQRcode: false,
@@ -191,24 +169,7 @@ export default {
         pageSize: 10, // 分页
         status: ''
       },
-      // 添加品牌授权
-      showAddAuthDialog: false, // 显示添加供应商对话框
-      dialogTitle: '',
-      addAuthFormData: {
-        authId: '', // 授权id
-        authUserId: '', // 供应商用户id
-        authParty: '', // 授权机构
-        createBy: '', // 创建人id
-        status: 2 // 授权状态 0下线，1上线  2待审核
-      },
-      addAuthFormRules: {
-        authParty: [{ required: true, message: '请输入授权机构名称', trigger: 'blur' }]
-      },
-      disabled: false,
-      // 审核未通过
-      auditFailedList: [],
-      auditNoticeFlag: true,
-      // ------------------
+
       improtDialogVisible: false,
       requestLoading: false,
       uploadFileList: [],
@@ -252,7 +213,6 @@ export default {
 
     // 复制链接
     cotyClubLink($event, row) {
-      // http://192.168.2.92:8888/114/app/record/club/detail
       handleClipboard(
         `${process.env.VUE_APP_WWW_HOST}/${this.authUserId}/app/form/link-register?type=link&authId=${row.authId}`,
         '链接已复制到粘贴板',
@@ -265,8 +225,7 @@ export default {
       this.$refs.dialogForm.validate((valid) => {
         console.log(valid)
         if (!valid) return
-        this.requestLoading = true // 上传文件
-        // this.$refs.fileUpload.submit()
+        this.requestLoading = true
         this.handleSave()
       })
     },
@@ -431,8 +390,6 @@ export default {
           // this.formatList(list)
           this.list = list
           this.total = total
-          // 获取审核未通过的列表
-          // this.checkAuditFailedList(list)
         })
         .catch((err) => {
           console.log(err)
@@ -442,73 +399,7 @@ export default {
           this.listLoading = false
         })
     },
-    // 获取审核未通过条数
-    // Audit failed 审核未通过
-    checkAuditFailedList(data) {
-      this.auditFailedList = data.filter((item) => item.auditStatus === 0)
-      if (this.auditFailedList.length > 0 && this.auditNoticeFlag) {
-        this.$notify.info({
-          title: '消息通知',
-          dangerouslyUseHTMLString: true,
-          message: `共有<b style="color:red">${this.auditFailedList.length}</b>个授权机构未能通过审核，请查看原因并及时修改！`,
-          duration: 3000
-        })
-        this.auditNoticeFlag = false
-      }
-    },
-    // 检查机构名是否存在 true:存在  false:不存在
-    handleCheckAuthName(name) {
-      const flag = this.list.some((item) => item.authParty === name)
-      console.log(flag)
-      return flag
-    },
-    // 添加授权
-    handleUpdateBrandAuth() {
-      if (this.handleCheckAuthName(this.addAuthFormData.authParty) && this.dialogFlag) {
-        this.$message({
-          message: '该授权机构已存在',
-          duration: 1000,
-          type: 'warning'
-        })
-        return
-      }
-      this.$refs.addAuthForm.validate((valide) => {
-        if (valide) {
-          this.disabled = true
-          this.listLoading = true
-          // authUserId先判断是否为代理操作，是就从代理数据中获取，否则直接获取当前登录用户的信息
-          this.addAuthFormData.authUserId = this.authUserId
-          this.addAuthFormData.createBy = this.addAuthFormData.authUserId
-          saveBrandAuth(this.addAuthFormData)
-            .then((res) => {
-              if (res.code !== 0) {
-                return
-              }
-              this.getList()
-              const h = this.$createElement
-              this.$notify.success({
-                title: `${this.noticeTitle}授权机构`,
-                message: h(
-                  'i',
-                  { style: 'color: #333' },
-                  `已${this.noticeTitle}授权机构："${this.addAuthFormData.authParty}"`
-                ),
-                duration: 3000
-              })
-              this.$refs.addAuthForm.resetFields()
-            })
-            .catch((err) => {
-              console.log(err)
-              this.$message.danger('操作失败')
-            })
-            .finally(() => {
-              this.showAddAuthDialog = false
-              this.listLoading = false
-              this.disabled = false
-            })
-        }
-      })
-    },
+
     // 删除品牌授权
     async handleRemoveAuth(item) {
       const text = await this.$confirm('确认删除该数据吗？删除后，对应的商品数据也将全部删除', '提示', {
@@ -572,36 +463,10 @@ export default {
     // 过滤列表
     handleFilter() {
       this.listQuery.page = 1
+      this.list = []
       this.getList()
     },
-    // 添加供应商
-    handleAddAuth() {
-      console.log('添加供应商')
-    },
-    // 对话框关闭事件
-    dialogClosed() {
-      console.log('dialog is closed')
-      this.addAuthFormData.authParty = ''
-      this.addAuthFormData.authId = ''
-      this.addAuthFormData.status = 1
-      this.noticeTitle = '添加'
-      this.$refs.addAuthForm.resetFields()
-    },
-    handleShowEditDialog(title, data) {
-      this.dialogTitle = title
-      if (data) {
-        this.addAuthFormData.authId = data.authId
-        this.addAuthFormData.authUserId = data.authUserId
-        this.addAuthFormData.authParty = data.authParty
-        this.addAuthFormData.createBy = data.createBy
-        this.status = data.status
-        this.noticeTitle = '修改'
-        this.dialogFlag = false
-      } else {
-        this.dialogFlag = true
-      }
-      this.showAddAuthDialog = true
-    },
+
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     }

src/views/normal/feedback/index.vue

@@ -116,11 +116,9 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { mapGetters } from 'vuex'
 import { getFeedbackList } from '@/api/auth'
 export default {
-  components: { PermissionButton },
   data() {
     return {
       listLoading: false,

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

@@ -107,11 +107,9 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { mapGetters } from 'vuex'
 import { changeArticleStatus, getArticleList, removeArticle } from '@/api/doc'
 export default {
-  components: { PermissionButton },
   data() {
     return {
       listLoading: false,

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

@@ -138,13 +138,12 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import UploadFile from '@/components/UploadFile'
 import { mapGetters } from 'vuex'
 import { changeFileStatus, getFileList, removeFile, saveFile } from '@/api/doc'
 import openWindow from '@/utils/open-window'
 export default {
-  components: { UploadFile, PermissionButton },
+  components: { UploadFile },
   data() {
     return {
       listLoading: false, // 列表加载

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

@@ -100,11 +100,9 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { mapGetters } from 'vuex'
 import { changeImageStatus, getImageList, removeImage } from '@/api/doc'
 export default {
-  components: { PermissionButton },
   data() {
     return {
       listLoading: false,

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

@@ -132,13 +132,12 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import UploadFile from '@/components/UploadFile'
 import { mapGetters } from 'vuex'
 import { changeFileStatus, getFileList, removeFile, saveFile } from '@/api/doc'
 import openWindow from '@/utils/open-window'
 export default {
-  components: { UploadFile, PermissionButton },
+  components: { UploadFile },
   data() {
     return {
       listLoading: false, // 列表加载

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

@@ -168,13 +168,12 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import UploadImage from '@/components/UploadImage'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
 import { changeVideoStatus, getVideoList, removeVideo, saveVideo } from '@/api/doc'
 export default {
-  components: { PermissionButton, UploadImage },
+  components: { UploadImage },
   data() {
     return {
       dialogPreviewVisible: false,

src/views/normal/personnel/operate/index.vue

@@ -94,12 +94,10 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { mapGetters } from 'vuex'
 import { fetchDoctorList, removeDoctor, doctorStatusChange } from '@/api/doctor'
 
 export default {
-  components: { PermissionButton },
   data() {
     return {
       listLoading: false,

src/views/normal/personnel/training/index.vue

@@ -94,12 +94,10 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { mapGetters } from 'vuex'
 import { fetchDoctorList, removeDoctor, doctorStatusChange } from '@/api/doctor'
 
 export default {
-  components: { PermissionButton },
   data() {
     return {
       listLoading: false,

src/views/normal/user/index.vue

@@ -99,9 +99,6 @@
 
     <el-dialog title="添加用户" width="30%" :visible.sync="dialogVisible" @close="onDialogClose">
       <el-form ref="form" label-width="80px" :model="formData" :rules="rules">
-        <!-- <el-form-item label="姓名：" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入姓名" />
-        </el-form-item> -->
         <el-form-item label="手机号：" prop="mobile">
           <el-input v-model="formData.mobile" placeholder="请输入手机号" maxlength="11" show-word-limit />
         </el-form-item>
@@ -115,7 +112,6 @@
 </template>
 
 <script>
-import PermissionButton from '@/views/components/PermissionButton'
 import { mapGetters } from 'vuex'
 import { authUserStatusChange, createClubUser, getAuthUserList, resetClubUserPassword } from '@/api/auth'
 import { isMobile } from '@/utils/validate'
@@ -127,7 +123,6 @@ const resetFormData = () => ({
 })
 
 export default {
-  components: { PermissionButton },
   data() {
     const validateMobile = (rule, value, callback) => {
       console.log(value)