用户权限管理，url替换后端获取，安装树状结构插件da-tree

zxl

7 天以前 232225891f27532a550ab9eb50d84f2f07dfac7f

 pages/userPermissions/userPermissions.vue

@@ -6,7 +6,7 @@

      </view>
      <view>
         <button class="add-btn" @click="navigateToAdd()">新增用户</button>
         <button class="add-btn" @click="navigateToAdd()" :disabled="!isShopkeeper">新增用户</button>
      </view>
      <!-- 搜索框 -->
      <view class="search-box">
@@ -18,32 +18,38 @@
         <view class="user-item" v-for="(user, index) in userList" :key="user.id" >

            <view class="user-info">
               <text class="realName">{{ user.realName }}</text>
               <text class="realName">{{ user.realName ? user.realName: '未设置人名' }}</text>
               <text class="mobile">{{ user.mobile }}</text>
            </view>
            <!-- 操作按钮区域 -->
            <view class="action-buttons">
               <u-button type="primary" size="mini" @click.stop="restPassword(user.memberId)" class="edit-btn">重置密码</u-button>
               <u-button type="primary" size="mini" @click.stop="navigateToDetail(user.id)" class="edit-btn">修改</u-button>
               <u-button type="error" size="mini" @click.stop="deleteUser(user.id)"
                  class="delete-btn">删除</u-button>
            </view>
               <u-button type="primary" size="mini" @click.stop="restPassword(user.memberId)" class="edit-btn" :disabled="!checkPermission(user)">重置密码</u-button>
               <u-button type="primary" size="mini" @click.stop="navigateToDetail(user.id)" class="edit-btn" :disabled="!checkPermission(user)">修改</u-button>
               <u-button type="error" size="mini" @click.stop="deleteUser(user.id)" 
                  class="delete-btn" :disabled="!checkPermission(user)">删除</u-button>
            </view> 

         </view>

         <!-- 加载更多提示 -->
         <view class="load-more" v-if="loading">
            <u-loading :show="loading"></u-loading>
			
         <view class="load-more">
           <u-loadmore 
             v-if="userList.length > 0"
             :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'"
             :load-text="{
               loadmore: '上拉加载更多',
               loading: '正在加载',
               nomore: '没有更多了'
             }"
           />
         </view>
         <view class="load-more" v-if="noMoreData">
            <text>没有更多数据了</text>
         <view style="height:150rpx">
								  
         </view>
      </scroll-view>

      <!-- 空状态 -->
      <view class="empty" v-else>
         <text>暂无用户数据</text>
      </view>

   </view>
</template>

@@ -53,7 +59,8 @@
      del,
      add,
      update,
      restPassword
      restPassword,
      checkClerkPermission
   } from "@/api/userPermissions.js"
   import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
   import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
@@ -62,9 +69,14 @@
   import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
   import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue';
   import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue';
   import ULoading from '@/uview-components/uview-ui/components/u-loading/u-loading.vue'
   import ULoading from '@/uview-components/uview-ui/components/u-loading/u-loading.vue';
   import ULoadmore from '@/uview-components/uview-ui/components/u-loadmore/u-loadmore.vue';


   import storage from "@/utils/storage.js"; //缓存
   import {
      getUserInfo
   } from "@/api/members";
	
   export default {
      components: {
         UIcon,
@@ -74,7 +86,8 @@
         UInput,
         USearch,
         UPopup,
         ULoading
         ULoading,
         ULoadmore,
      },
      data() {
         return {
@@ -83,11 +96,12 @@
            noMoreData: false, // 是否没有更多数据
            query: {
               realName: '',
               page: 1,
               pageSize: 10,
            }


               pageNumber: 1,
               pageSize: 15,
            },
            isSuper:false,
            isShopkeeper:false,
            clerkId:'',//登录账号id
         }
      },
      onShow() {
@@ -95,8 +109,31 @@
      },
      onLoad() {
         this.getPage()
         //获得用户权限
         checkClerkPermission().then(res=>{
            this.isSuper = res.data.data.isSuper;
            this.isShopkeeper = res.data.data.isShopkeeper;
            this.clerkId = res.data.data.clerkId;
         })
			
      },
	
      methods: {
         //检查权限
         checkPermission(user){
            if(this.isShopkeeper){
               return true;
            }
            if(this.clerkId === user.id){
               return true;
            }else{
               if(this.isSuper && !user.isSuper){
                  return true;
               }
               return false;
            }
					
         },
         restPassword(id){
            restPassword(id).then(res=>{
               if(res.statusCode === 200){
@@ -117,8 +154,9 @@
               uni.hideLoading();
               if (res.statusCode === 200) {
                  const data = res.data.data;
                  if (this.query.page === 1) {
                  if (this.query.pageNumber === 1) {
                     this.userList = data || [];
                     console.log(this.userList.length)
                  } else {
                     // 否则追加数据
                     this.userList = [...this.userList, ...(data || [])];
@@ -132,7 +170,7 @@

         // 搜索用户
         searchUser() {
            this.query.page = 1
            this.query.pageNumber = 1
            this.noMoreData = false
            this.userList = []
            this.getPage()
@@ -141,7 +179,7 @@
         // 加载更多
         loadMore() {
            if (!this.noMoreData) {
               this.query.page++
               this.query.pageNumber++
               this.getPage()
            }
         },
@@ -163,7 +201,9 @@
                  this.getPage();
               }
            })
         }
         },
			
			
      }
   }
</script>
@@ -270,30 +310,12 @@
         }
      }
   }

   .load-more {
      padding: 20rpx;
      text-align: center;
      color: #999;
      font-size: 28rpx;
   }
            padding: 20rpx 0;
            text-align: center;
            color: #999;
            font-size: 26rpx;
            background-color: #f7f8fa;
         }

   .empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40rpx;

      image {
         width: 200rpx;
         margin-bottom: 20rpx;
      }

      text {
         color: #999;
         font-size: 28rpx;
      }
   }
</style>