Blame view

pages/workbench/index.vue 6.18 KB
c293da23   刘淇   新园林init
1
  <template>
48ff5b95   刘淇   底部导航
2
    <view class="page-container">
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
3
      <!-- 加载页 -->
9b30ab8c   刘淇   新增快速工单,原版
4
      <up-loading-page
48ff5b95   刘淇   底部导航
5
          :loading="loading"
9b30ab8c   刘淇   新增快速工单,原版
6
7
          loading-text="加载中..."
          color="#577ee3"
48ff5b95   刘淇   底部导航
8
          zIndex="1000"
9b30ab8c   刘淇   新增快速工单,原版
9
10
      ></up-loading-page>
  
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
11
      <!-- 蓝色装饰块 -->
12e66ec8   刘淇   新增树
12
      <view class="blue-decor-block" v-show="!loading">
578c1373   刘淇   样式优化
13
        <text class="welcome-text u-line-1">你好{{ userInfo?.user?.nickname || '' }},欢迎登录</text>
6bce1057   刘淇   ai 大区经理
14
        <text class="platform-name">蓟城山水智慧园林养护平台</text>
12e66ec8   刘淇   新增树
15
      </view>
c293da23   刘淇   新园林init
16
  
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
17
      <!-- 内容容器 -->
37c26bd3   刘淇   巡查计划
18
      <view class="content-wrap">
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
19
        <!-- 空状态:过滤后无数据且非加载中时显示 -->
37c26bd3   刘淇   巡查计划
20
        <u-empty
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
21
            v-if="!filteredModuleList.length && !loading"
48ff5b95   刘淇   底部导航
22
            mode="permission"
37c26bd3   刘淇   巡查计划
23
24
        ></u-empty>
  
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
25
26
        <!-- 菜单卡片列表:仅渲染有子节点的父模块 -->
        <view class="menu-card-wrap">
37c26bd3   刘淇   巡查计划
27
          <up-card
578c1373   刘淇   样式优化
28
29
              :title-size="14"
              :titleColor="'#000'"
48ff5b95   刘淇   底部导航
30
31
              :border="false"
              :shadow="true"
578c1373   刘淇   样式优化
32
33
34
              :head-style="{
               fontWeight:'500'
              }"
48ff5b95   刘淇   底部导航
35
              :foot-border-top="false"
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
36
              v-for="(parentModule, index) in filteredModuleList"
48ff5b95   刘淇   底部导航
37
              :key="`$parentModule.id_${index}`"
993d98fa   刘淇   工作台
38
              :title="parentModule.name"
48ff5b95   刘淇   底部导航
39
              class="card-container"
37c26bd3   刘淇   巡查计划
40
          >
37c26bd3   刘淇   巡查计划
41
            <template #body>
48ff5b95   刘淇   底部导航
42
43
44
45
46
47
              <view class="card-content">
                <view
                    v-for="(listItem, listIndex) in parentModule.children"
                    :key="listItem.id"
                    class="content-block"
                    @click="handleMenuClick(listItem)"
37c26bd3   刘淇   巡查计划
48
                >
48ff5b95   刘淇   底部导航
49
50
51
                  <u-image
                      :src="listItem.icon"
                      mode="aspectFit"
578c1373   刘淇   样式优化
52
53
                      width="48px"
                      height="48px"
48ff5b95   刘淇   底部导航
54
                      lazy-load
cf70629b   刘淇   养护计划 照片 自己写样式
55
                      radius="8px"
48ff5b95   刘淇   底部导航
56
57
58
59
                      class="block-icon"
                  ></u-image>
                  <text class="grid-text">{{ listItem.name }}</text>
                </view>
37c26bd3   刘淇   巡查计划
60
61
62
              </view>
            </template>
          </up-card>
c293da23   刘淇   新园林init
63
64
65
66
67
        </view>
      </view>
    </view>
  </template>
  
37c26bd3   刘淇   巡查计划
68
  <script setup lang="ts">
578c1373   刘淇   样式优化
69
70
71
  import {ref, computed} from 'vue';
  import {onShow} from '@dcloudio/uni-app';
  import {useUserStore} from '@/pinia/user';
993d98fa   刘淇   工作台
72
73
  import globalConfig from '@/common/config/global';
  import cache from '@/common/utils/cache';
37c26bd3   刘淇   巡查计划
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
  
  interface MenuItem {
    id: number;
    name: string;
    subtitle?: string;
    type: number;
    sort: number;
    parentId: number;
    icon: string;
    jumpUrl: string;
    miniAppId?: string;
    badgeText?: string;
    badgeColor?: string;
    statisticCount: number | null;
    hasStatistic: boolean;
    extra: any;
    children: MenuItem[];
  }
c293da23   刘淇   新园林init
92
  
12e66ec8   刘淇   新增树
93
  // ========== 全局变量定义区 ==========
9b30ab8c   刘淇   新增快速工单,原版
94
  const loading = ref(true);
c293da23   刘淇   新园林init
95
  const userStore = useUserStore();
37c26bd3   刘淇   巡查计划
96
  const moduleList = ref<MenuItem[]>([]);
12e66ec8   刘淇   新增树
97
  const userInfo = ref<any>(cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {});
37c26bd3   刘淇   巡查计划
98
  
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
99
100
101
  // 计算属性:过滤出有子节点的父模块(children 存在且长度 > 0)
  const filteredModuleList = computed(() => {
    return moduleList.value.filter(item => {
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
102
103
104
105
      return Array.isArray(item.children) && item.children.length > 0;
    });
  });
  
37c26bd3   刘淇   巡查计划
106
  onShow(async () => {
c293da23   刘淇   新园林init
107
    try {
9b30ab8c   刘淇   新增快速工单,原版
108
      loading.value = true;
12e66ec8   刘淇   新增树
109
      userInfo.value = cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {};
e6a04285   刘淇   单图情况 宽高70*70
110
  
12e66ec8   刘淇   新增树
111
      // 登录状态判断(多维度校验,确保准确性)
e6a04285   刘淇   单图情况 宽高70*70
112
      const isLogin = () => {
e6a04285   刘淇   单图情况 宽高70*70
113
        const token = cache.get(globalConfig.cache.tokenKey) || userStore.token;
12e66ec8   刘淇   新增树
114
115
        const userInfoVal = userInfo.value;
        console.log('当前用户信息:', userInfoVal?.user);
12e66ec8   刘淇   新增树
116
        return !!token && !!userInfoVal;
e6a04285   刘淇   单图情况 宽高70*70
117
118
      };
  
12e66ec8   刘淇   新增树
119
      // 未登录处理:跳转登录页,阻止后续逻辑执行
e6a04285   刘淇   单图情况 宽高70*70
120
      if (!isLogin()) {
578c1373   刘淇   样式优化
121
        uni.showToast({title: '请先登录', icon: 'none', duration: 1500});
e6a04285   刘淇   单图情况 宽高70*70
122
        setTimeout(() => {
e6a04285   刘淇   单图情况 宽高70*70
123
          uni.reLaunch({
12e66ec8   刘淇   新增树
124
            url: '/pages/login/index',
e6a04285   刘淇   单图情况 宽高70*70
125
126
            fail: (err) => {
              console.error('跳转登录页失败:', err);
578c1373   刘淇   样式优化
127
              uni.showToast({title: '跳转登录页异常', icon: 'none'});
e6a04285   刘淇   单图情况 宽高70*70
128
129
130
            }
          });
        }, 1500);
e6a04285   刘淇   单图情况 宽高70*70
131
        loading.value = false;
e6a04285   刘淇   单图情况 宽高70*70
132
133
134
        return;
      }
  
993d98fa   刘淇   工作台
135
      const rawMenuData = userStore.moduleListInfo || cache.get(globalConfig.cache.moduleListKey);
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
136
      moduleList.value = rawMenuData || [];
48ff5b95   刘淇   底部导航
137
      loading.value = false;
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
138
139
      console.log('原始菜单数据:', moduleList.value);
      console.log('过滤后有子节点的父模块:', filteredModuleList.value);
37c26bd3   刘淇   巡查计划
140
141
142
    } catch (error) {
      console.error('获取菜单数据失败:', error);
      moduleList.value = [];
9b30ab8c   刘淇   新增快速工单,原版
143
      loading.value = false;
c293da23   刘淇   新园林init
144
    }
37c26bd3   刘淇   巡查计划
145
  });
c293da23   刘淇   新园林init
146
  
37c26bd3   刘淇   巡查计划
147
148
  const handleMenuClick = (item: MenuItem) => {
    if (!item.jumpUrl) {
578c1373   刘淇   样式优化
149
      uni.showToast({title: '暂无跳转链接', icon: 'none', duration: 2000});
37c26bd3   刘淇   巡查计划
150
      return;
c293da23   刘淇   新园林init
151
    }
37c26bd3   刘淇   巡查计划
152
153
154
155
    uni.navigateTo({
      url: item.jumpUrl,
      fail: (err) => {
        console.error('页面跳转失败:', err);
578c1373   刘淇   样式优化
156
        uni.showToast({title: '页面路径错误', icon: 'none', duration: 2000});
37c26bd3   刘淇   巡查计划
157
158
      }
    });
c293da23   刘淇   新园林init
159
160
161
  };
  </script>
  
48ff5b95   刘淇   底部导航
162
  <style scoped lang="scss">
48ff5b95   刘淇   底部导航
163
  .page-container {
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
164
165
    position: relative;
    min-height: 100vh;
5cb33b90   刘淇   完成巡查计划 详情
166
  }
37c26bd3   刘淇   巡查计划
167
  
37c26bd3   刘淇   巡查计划
168
169
170
171
172
  .blue-decor-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
24c0bbe7   刘淇   登录账号密码 加密存储
173
    padding: 80px 15px 115px;
12e66ec8   刘淇   新增树
174
175
    background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
    background-size: 100% 100%;
37c26bd3   刘淇   巡查计划
176
    z-index: 1;
578c1373   刘淇   样式优化
177
    color: #fff;
12e66ec8   刘淇   新增树
178
    text-align: left;
cf70629b   刘淇   养护计划 照片 自己写样式
179
  
12e66ec8   刘淇   新增树
180
    .welcome-text {
4570c70a   刘淇   消息中心
181
      font-size: 16px;
12e66ec8   刘淇   新增树
182
      display: block;
24c0bbe7   刘淇   登录账号密码 加密存储
183
      margin-bottom: 4px;
12e66ec8   刘淇   新增树
184
185
186
187
    }
  
    .platform-name {
      margin-bottom: 10px;
4570c70a   刘淇   消息中心
188
      font-size: 16px;
12e66ec8   刘淇   新增树
189
      display: block;
12e66ec8   刘淇   新增树
190
    }
c293da23   刘淇   新园林init
191
  }
37c26bd3   刘淇   巡查计划
192
  
37c26bd3   刘淇   巡查计划
193
194
195
  .content-wrap {
    position: relative;
    z-index: 2;
24c0bbe7   刘淇   登录账号密码 加密存储
196
    padding: 125px 0 0;
48ff5b95   刘淇   底部导航
197
198
    display: flex;
    flex-direction: column;
cf70629b   刘淇   养护计划 照片 自己写样式
199
    gap: 10px;
48ff5b95   刘淇   底部导航
200
201
  }
  
48ff5b95   刘淇   底部导航
202
203
204
205
  .menu-card-wrap {
    width: 100%;
  }
  
48ff5b95   刘淇   底部导航
206
  .card-container {
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
207
    --u-card-content-padding: 0;
cf70629b   刘淇   养护计划 照片 自己写样式
208
    border-radius: 4px;
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
209
    overflow: hidden;
48ff5b95   刘淇   底部导航
210
211
  }
  
48ff5b95   刘淇   底部导航
212
213
  .card-content {
    display: flex;
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
214
    flex-wrap: wrap;
cf70629b   刘淇   养护计划 照片 自己写样式
215
    gap: 10px;
48ff5b95   刘淇   底部导航
216
217
  }
  
48ff5b95   刘淇   底部导航
218
  .content-block {
cf70629b   刘淇   养护计划 照片 自己写样式
219
    width: calc((100% - 3 * 10px) / 4);
48ff5b95   刘淇   底部导航
220
221
    display: flex;
    flex-direction: column;
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
222
223
    align-items: center;
    justify-content: center;
cf70629b   刘淇   养护计划 照片 自己写样式
224
225
    padding: 7px 0;
    border-radius: 4px;
48ff5b95   刘淇   底部导航
226
227
    touch-action: manipulation;
    transition: background-color 0.2s;
c293da23   刘淇   新园林init
228
  }
37c26bd3   刘淇   巡查计划
229
  
48ff5b95   刘淇   底部导航
230
231
232
  .content-block:active {
    background-color: #e9ecef;
  }
37c26bd3   刘淇   巡查计划
233
  
48ff5b95   刘淇   底部导航
234
  .block-icon {
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
235
236
    display: block;
    margin: 0 auto;
48ff5b95   刘淇   底部导航
237
238
  }
  
37c26bd3   刘淇   巡查计划
239
  .grid-text {
cf70629b   刘淇   养护计划 照片 自己写样式
240
    font-size: 13px;
578c1373   刘淇   样式优化
241
    color: #1C1C1C;
37c26bd3   刘淇   巡查计划
242
    text-align: center;
cf70629b   刘淇   养护计划 照片 自己写样式
243
    margin-top: 5px;
67af4c8e   刘淇   工作台 如果没有子节点就不渲染父节点
244
    display: block;
c293da23   刘淇   新园林init
245
  }
37c26bd3   刘淇   巡查计划
246
  </style>