update: 更新权限控制

src/PagesStatistics/index.vue

@@ -1,6 +1,14 @@
 <template>
-  <Box>
+  <Box
-    <view v-for="(item, index) in list" :key="index">
+    v-if="
+      isShowModule(list[0].child.concat(list[1].child).concat(list[2].child))
+    "
+  >
+    <view
+      v-for="(item, index) in list"
+      :key="index"
+      v-show="isShowModule(item.child)"
+    >
       <view class="title">
         <Title :title="item.title" />
       </view>
@@ -9,8 +17,10 @@
           v-for="(child, index) in item.child"
           :key="index"
           @click="(child as any).fn(child)"
+          v-show="isShowModule([{title: child.title}])"
+          :class="{'box': isShowModule([{title: child.title}])}"
         >
-          <view>
+          <view v-if="isShowModule([{title: child.title}])"> 
             <up-image
               :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pagesStatistics/${child.icon}`"
               mode="aspectFill"
@@ -18,19 +28,30 @@
               height="60rpx"
             ></up-image>
           </view>
-          <view>{{ child.title }}</view>
+          <view v-if="isShowModule([{title: child.title}])">{{ child.title }}</view>
         </view>
       </view>
 
       <view class="line" v-show="index < list.length - 1"></view>
     </view>
   </Box>
+  <!-- 当收货 出货 常用app全部为空 显示暂无权限 -->
+  <up-empty
+    v-else
+    mode="permission"
+    icon="http://cdn.uviewui.com/uview/empty/permission.png"
+    :text="'暂无相关权限, 请联系管理员'"
+  >
+  </up-empty>
   <TabBar></TabBar>
 </template>
 <script setup lang="ts">
 import Box from "@/components/Box/index.vue";
 import Title from "@/components/Title/index.vue";
 import TabBar from "@/components/TabBar/index.vue";
+import { useMemberStore } from "@/store/index";
+import { ProfileApi } from "@/services";
+const store = useMemberStore();
 const list = reactive([
   {
     title: "收货",
@@ -111,6 +132,27 @@ const list = reactive([
     ],
   },
 ]);
+
+// 收货、出货、常用app是否显示
+const isShowModule = (list: any) => {
+  let flag = false;
+  list.forEach((item: any) => {
+    if (store.profile.menusNameList.indexOf(item.title) > -1) {
+      flag = true;
+      return;
+    }
+  });
+  return flag;
+};
+
+onMounted(() => {
+  // 重新获取权限
+  ProfileApi.getUserInfo().then((res:any) => {
+    if (res.code === 200) {
+      store.setProfile({...res.data, token: store.profile.token});
+    }
+  });
+});
 </script>
 <style lang="scss" scoped>
 .title {
@@ -121,7 +163,7 @@ const list = reactive([
   display: flex;
   margin: 22rpx 0rpx;
   padding: 0rpx 20rpx;
-  > view {
+  .box {
     width: 142rpx;
     height: 142rpx;
     background: #f9f9f9;
@@ -143,7 +185,7 @@ const list = reactive([
       width: 100%;
     }
   }
-  > view + view {
+  > .box + .box {
     margin-left: 32rpx;
   }
   ::v-deep .u-transition {

src/pagesHome/index.vue

@@ -16,7 +16,9 @@
           backgroundSize: 'cover',
         }" -->
       <view class="panel" v-for="(item, index) in summaryList" :key="index">
-        <image :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/${item.imgUrl}`" />
+        <image
+          :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/${item.imgUrl}`"
+        />
         <view class="box">
           <view class="num">{{ item.num }}</view>
           <view class="title">{{ item.title }}</view>
@@ -25,18 +27,26 @@
     </view>
 
     <view class="data-detail">
-      <view class="p-15">
+      <view
+        class="p-15"
+        v-if="isShowModule(receiveList) || isShowModule(shipmentList)"
+      >
         <!-- 收货入库 -->
+        <view v-if="isShowModule(receiveList)">
           <text class="title">收货入库</text>
           <view class="data-receive">
-          <up-row justify="center" gutter="10">
+            <up-row justify="flex-start" gutter="10">
               <up-col
                 span="3"
                 v-for="(item, index) in receiveList"
                 :key="index"
                 @click="(item as any).fn()"
+                :customStyle="{
+                  display: isShowModule([{ title: item.title }]) ? '' : 'none',
+                }"
               >
                 <view
+                  v-if="isShowModule([{ title: item.title }])"
                   class="box"
                   :style="{
                     backgroundColor: boxStyleList[index].backgroundColor,
@@ -57,18 +67,24 @@
               </up-col>
             </up-row>
           </view>
+        </view>
 
         <!-- 出货入库 -->
+        <view v-if="isShowModule(shipmentList)">
           <text class="title title-shipment">出货销售</text>
           <view class="data-shipment">
-          <up-row justify="center" gutter="10">
+            <up-row justify="flex-start" gutter="10">
               <up-col
                 span="3"
                 v-for="(item, index) in shipmentList"
                 :key="index"
                 @click="(item as any).fn()"
+                :customStyle="{
+                  display: isShowModule([{ title: item.title }]) ? '' : 'none',
+                }"
               >
                 <view
+                  v-if="isShowModule([{ title: item.title }])"
                   class="box"
                   :style="{
                     backgroundColor: boxStyleList[index].backgroundColor,
@@ -90,38 +106,58 @@
             </up-row>
           </view>
         </view>
+      </view>
 
       <!-- 线条 -->
       <view class="line"> </view>
 
       <!-- 常用应用 -->
-      <view class="app-list">
+      <view class="app-list" v-if="isShowModule(appList)">
         <view class="name">常用应用</view>
         <u-grid :border="false" col="4">
           <u-grid-item
             v-for="(item, listIndex) in appList"
             :key="listIndex"
             @click="item.fn"
+            :customStyle="{
+              display: isShowModule([{ title: item.title }]) ? '' : 'none',
+            }"
           >
             <up-image
+              v-if="isShowModule([{ title: item.title }])"
               :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pagesHome/${item.icon}`"
               width="60rpx"
               height="60rpx"
             ></up-image>
-            <text class="grid-text">{{ item.title }}</text>
+            <text
+              class="grid-text"
+              v-if="isShowModule([{ title: item.title }])"
+              >{{ item.title }}</text
+            >
           </u-grid-item>
         </u-grid>
       </view>
     </view>
+    <!-- 当收货 出货 常用app全部为空 显示暂无权限 -->
+    <up-empty
+      v-if="
+        !isShowModule(receiveList.concat(shipmentList)) &&
+        !isShowModule(appList)
+      "
+      mode="permission"
+      icon="http://cdn.uviewui.com/uview/empty/permission.png"
+      :text="'暂无相关权限, 请联系管理员'"
+    >
+    </up-empty>
   </view>
 
-  <TabBar/>
+  <TabBar />
 </template>
 
 <script setup lang="ts">
 import { useMemberStore } from "@/store/index";
-import { ReceiveApi, ShipmentApi } from "@/services/index";
+import { ProfileApi, ReceiveApi, ShipmentApi } from "@/services/index";
-import TabBar from '@/components/TabBar/index.vue'
+import TabBar from "@/components/TabBar/index.vue";
 const store = useMemberStore();
 const navbarRect = reactive({
   height: 32,
@@ -438,9 +474,6 @@ const appList = reactive([
     },
   },
 ]);
-
-
-
 // 收货入库相关信息
 ReceiveApi.countOrderByMonth().then((res) => {
   if (res.code === 200) {
@@ -479,6 +512,19 @@ ShipmentApi.countOrderByMonth().then((res) => {
     shipmentList[3].num = toBeSettled;
   }
 });
+
+// 收货、出货、常用app是否显示
+const isShowModule = (list: any) => {
+  let flag = false;
+  list.forEach((item: any) => {
+    if (store.profile.menusNameList.indexOf(item.title) > -1) {
+      flag = true;
+      return;
+    }
+  });
+  return flag;
+};
+
 onMounted(() => {
   // #ifdef APP-PLUS || MP-WEIXIN
   let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
@@ -486,7 +532,12 @@ onMounted(() => {
   navbarRect.top = menuButtonInfo.top;
   getSafeHeight();
   // #endif
-  // 获取统计数据
+  // 重新获取权限
+  ProfileApi.getUserInfo().then((res: any) => {
+    if (res.code === 200) {
+      store.setProfile({ ...res.data, token: store.profile.token });
+    }
+  });
 });
 </script>
 
@@ -533,7 +584,7 @@ onMounted(() => {
   }
   .data-detail {
     margin-top: 15rpx;
-    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
+    // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
     border-radius: 13rpx;
     position: relative;
     .title {

src/services/profile.ts

@@ -1,5 +1,6 @@
 // 存放路径: src/services/home.ts
 
+import type { User } from "@/types/user";
 import { http } from "@/utils/http";
 
 // 登陆
@@ -180,11 +181,10 @@ export const getUserListByPage = (data: any) => {
 };
 
 // 获取用户信息
-export const getUserInfo = (data: any) => {
+export const getUserInfo = () => {
   return http({
     method: "GET",
     url: "/api/user/getUserInfo",
-    data
   });
 };
 

src/store/modules/member.ts

@@ -1,23 +1,26 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-
+import _ from "underscore";
+import type { LoginResult } from "@/types/user";
 // 定义 Store
 export const useMemberStore = defineStore(
   "member",
   () => {
     // 会员信息
-    const profile = ref({
+    const profile = ref<LoginResult>({
       token: '',
       userInfo: {
         userName: "",
-        factory_name: "",
+        factoryName: "",
-       
       },
+      menusList:[],
+      menusNameList: []
     });
 
     // 保存会员信息，登录时使用
     const setProfile = (val: any) => {
       profile.value = val;
+      profile.value.menusNameList = _.pluck(val.menusList, "name");
     };
 
     // 清理会员信息，退出时使用

src/types/global.d.ts

@@ -22,3 +22,13 @@ export type Result = {
 }
 
 export type ComType = {[attrName: string]: any }
+
+export type BaseField = {
+  updateTime: string;
+  createTime: string;
+  createUserId: number;
+  createUserName: string;
+  updateUserId: number;
+  updateUserName: string;
+  isDeleted: boolean;
+}

src/types/user.d.ts

@@ -1,4 +1,4 @@
-interface User {
+export type User = {
   name: string;
   gender: number; // 性别1=男2=女
   phone: string;
@@ -11,16 +11,9 @@ interface User {
   userName: string;
   password: string;
   state: number; // 状态 1=有效 0=无效
-  updateTime: string;
-  createTime: string;
-  createUserId: number;
-  createUserName: string;
-  updateUserId: number;
-  updateUserName: string;
-  isDeleted: boolean;
   cardCode?: string; // 卡号
   roleVos?: array
-}
+} & BaseField;
 
 interface Customer {
   name?: string,
@@ -28,3 +21,18 @@ interface Customer {
   contacts?:string,
   cardCode?: string,
 }
+
+export type MenusItem = {
+  id: number,
+  name: string,
+  [attrName: string]: any;
+}
+
+export type LoginResult = {
+  menusList: array<MenusItem>
+  token: string,
+  userId?:string,
+  userInfo: User,
+  userName?: string,
+  [attrName: string]: any;
+}