添加体验账号权限（只能查看不能操作）

.env.development

@@ -1,11 +1,11 @@
 ENV = 'development'
 
 # 线上测试
-# VITE_BASE_URL = 'http://advise.ytmdm.com/yt-gateway'
+VITE_BASE_URL = 'http://advise.ytmdm.com/yt-gateway'
 # VITE_BASE_URL = 'https://test.book.ytpm.net/yt-gateway'
 # VITE_BASE_URL = 'http://119.45.71.139:25001'
 
 # 本地 
-VITE_BASE_URL = 'http://192.168.1.9:25001'
+# VITE_BASE_URL = 'http://192.168.1.9:25001'
 # VITE_BASE_URL = 'http://192.168.1.159:25001'
 

src/config/index.js

@@ -5,10 +5,19 @@ const systemSubTitle = '渠道商营销管理系统' // 系统提示信息，用
 /** 使用后端路由 */
 const isBackMenu = false
 
+/**
+ * 体验用户ID
+ * 只能查看筛选，不能操作数据
+ */
+const lookPermissionUser = [
+  '888'
+]
+
 
 export {
   showLogo,
   systemTitle,
   systemSubTitle,
   isBackMenu,
+  lookPermissionUser,
 }

src/directive/hasButton/index.js

@@ -0,0 +1,36 @@
+/**
+ * 自定义权限按钮指令
+ * 使用方法 v-permission="'companyAdmin:add'"
+ * @param {*} store 权限数组
+ * @returns 
+ */
+
+import { lookPermissionUser } from '@/config'
+
+
+export default function createPermissionDirective(store) {
+    function getPermissionCodes(store) {
+        const userId = store.state.user.info?.userId || ''
+        // 写死判断用户ID是 888 的用户隐藏掉所有操作
+        if (lookPermissionUser.includes(userId)) {
+            return []
+        } else {
+            return ['permission']
+        }
+        /* const all = store.state.user.info?.permissionList || []
+        return all
+            .filter(item => item?.type === 'permission' && item?.permissionCode)
+            .map(item => item.permissionCode) */
+    }
+
+    return {
+        mounted(el, binding) {
+            const requiredCode = binding.value
+            const permissionCodes = getPermissionCodes(store)
+
+            if (!permissionCodes.includes(requiredCode)) {
+                el.parentNode && el.parentNode.removeChild(el)
+            }
+        }
+    }
+}

src/hooks/usePermission.js

@@ -0,0 +1,23 @@
+/**
+ * 获取按钮权限数据
+ */
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { lookPermissionUser } from '@/config'
+
+export function usePermission() {
+    const store = useStore()
+    const userId = computed(() => store.state.user.info.userId || [])
+
+    const permissionCodes = computed(() =>
+        // 写死判断用户ID是 888 的用户隐藏掉所有操作
+        lookPermissionUser.includes(userId.value) ? [] : ['permission'] 
+    )
+
+    const checkPermission = (code) => permissionCodes.value.includes(code)
+
+    return {
+        permissionCodes,
+        checkPermission,
+    }
+}

src/main.js

@@ -11,6 +11,8 @@ import App from './App.vue'
 import store from './store'
 import router from './router'
 import { getAuthRoutes } from './router/permission'
+// 引入自定义指令
+import createPermissionDirective  from './directive/hasButton/index'
 /* if (import.meta.env.MODE !== 'development') { // 非开发环境调用百度统计
   baidu()
 } */
@@ -21,6 +23,7 @@ getAuthRoutes().then(() => {
   app.use(ElementPlus, { size: store.state.app.elementSize, locale: locale })
   app.use(store)
   app.use(router)
+  app.directive('permission', createPermissionDirective(store))
   // app.config.performance = true
   app.mount('#app')
 })

src/views/main/outBagModule/appAdmin.vue

@@ -2,7 +2,7 @@
   <div class="layout-container">
     <!-- 菜单栏 -->
     <From :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset"
-      is_add_button="新增" @addForm="edit" />
+    :is_add_button="checkPermission('permission') ? '新增' : null" @addForm="edit" />
 
     <!-- 表格 -->
     <div class="layout-container">
@@ -45,7 +45,7 @@
             {{ getDictionaryName("enabled", scope.row.enabled) }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="100">
+        <el-table-column label="操作" width="100" v-permission="'permission'">
           <template #default="scope">
             <div class="button">
               <el-link class="button-item" type="primary" style="margin-bottom: 5px" @click="edit(scope.row)">
@@ -124,7 +124,9 @@ import { ditchList } from '@/api/outBagModule.js'
 import From from "@/components/from/index.vue";
 import Table from "@/components/table/index.vue";
 import Layer from "@/components/layer/index.vue";
+import { usePermission } from '@/hooks/usePermission.js'
 
+const { checkPermission } = usePermission()
 const { loadDictData, getDictionaryName } = useGetDictList();
 const tableData = ref([]);
 

src/views/main/outBagModule/channelTypeAdmin.vue

@@ -2,7 +2,7 @@
   <div class="layout-container">
     <!-- 菜单栏 -->
     <From :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset"
-      is_add_button="新增" @addForm="edit" />
+      :is_add_button="checkPermission('permission') ? '新增' : null" @addForm="edit" />
 
     <!-- 表格 -->
     <div class="layout-container">
@@ -15,7 +15,7 @@
             {{ convertUTCToBeijing(scope.row.createTime) }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="100">
+        <el-table-column label="操作" width="100" v-permission="'permission'">
           <template #default="scope">
             <div class="button">
               <el-link class="button-item" type="primary" style="margin-bottom: 5px;" @click="edit(scope.row)">
@@ -54,7 +54,9 @@ import { convertUTCToBeijing } from '@/utils/index.js'
 import { useGetDictList } from '@/hooks/useGetDictList.js'
 import { useStore } from 'vuex'
 import { ditchList, ditchAddOne, ditchDeleteOne, ditchUpdateOne } from '@/api/outBagModule.js'
+import { usePermission } from '@/hooks/usePermission.js'
 
+const { checkPermission } = usePermission()
 const store = useStore()
 const { dictData, loadDictData, getOptions, getDictionaryName } = useGetDictList();
 const form = ref(null);
@@ -88,6 +90,7 @@ const settingData = () => {
         label: '渠道名称',
         prop: 'ditchName',
         type: 'input',
+        labelWidth: 100,
         needEnterEvent: true
       },
     ]

src/views/main/riskModule/riskControlConfig.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout-container">
     <!-- 菜单栏 -->
-    <From :form-items="dynamicFormItems" is_add_button="新增风控配置" @addForm="edit" @formSubmitted="handleFormSubmitted"
+    <From :form-items="dynamicFormItems" :is_add_button="checkPermission('permission') ? '新增风控配置' : null" @addForm="edit" @formSubmitted="handleFormSubmitted"
       @formReset="handleFormReset" />
 
     <!-- 表格 -->
@@ -67,7 +67,7 @@
         </el-table-column>
         <el-table-column prop="updateNickName" label="修改者" width="90" />
 
-        <el-table-column label="操作" width="170">
+        <el-table-column label="操作" width="170" v-permission="'permission'">
           <template #default="scope">
             <div class="button">
               <el-link class="button-item" type="primary" @click="edit(scope.row)">
@@ -120,7 +120,9 @@
   import { convertUTCToBeijing } from '@/utils/index.js'
   import { useGetDictList } from '@/hooks/useGetDictList.js'
   import { useStore } from 'vuex'
+  import { usePermission } from '@/hooks/usePermission.js'
 
+  const { checkPermission } = usePermission()
   const store = useStore()
   const { dictData, loadDictData, getOptions, getDictionaryName } = useGetDictList();
   const form = ref(null);

src/views/main/userModule/userList.vue

@@ -58,7 +58,7 @@
         <el-table-column prop="versionCode" label="版本号" />
         <el-table-column prop="withdrawCount" label="提现笔数" width="90" />
         <el-table-column prop="withdrawTotal" label="提现总额" width="90" />
-        <el-table-column label="操作" width="220">
+        <el-table-column label="操作" width="220" v-permission="'permission'">
           <template #default="scope">
             <div class="button">
               <el-link class="button-item" type="primary" @click="editUserType(scope.row)">
@@ -178,7 +178,7 @@
     nickName: undefined,// 用户昵称
     userId: undefined,// 用户ID
     page: 1,// 当前页码
-    registryTimeBegin: undefined,// 注册时间
+    registryTimeBegin: new Date().toISOString(),// 注册时间
     registryTimeEnd: undefined,// 注册时间
     userStatus: 1,// 用户类型
     appIds: undefined, //所属应用
@@ -228,7 +228,7 @@
           defaultVal: 1,
           options: getOptions('user_status'),
         },
-        { label: '注册时间开始', prop: 'registryTimeBegin', type: 'date' },
+        { label: '注册时间开始', prop: 'registryTimeBegin', type: 'date',defaultVal: new Date().toISOString() },
         { label: '注册时间结束', prop: 'registryTimeEnd', type: 'date' },
       ]