通用界面，不良功能搬运至平板程序

wbc

7 天以前 983dddd66ab8a999544272089e8c0fc12370f356

 pages/BasePages/main.vue

@@ -1,7 +1,7 @@
<template>
   <uni-base-page :footer="false">
      <view slot="page">
         <view v-if="loginInfo.hasLogin">
         <view v-if="loginInfo.hasLogin" class="main-container">
            <!-- 教学视频、公司内部宣传图片等 -->
            <!--        <swiper indicator-dots="true" :autoplay="true" :interval="3000">-->
            <!--          <swiper-item v-for="(img,key) in imgUrls" :key="key">-->
@@ -10,11 +10,56 @@
            <!--        </swiper>-->
            <!-- 通报批评、消息预警、公告、报告 -->
            <uni-notice-bar :show-icon="true" :scrollable="true" :speed="30" :single="true" :text="msg" />
				
            <!-- 筛选按钮 -->
            <view class="filter-btn" @click="toggleFilter">
               <uni-icons type="funnel-fill" size="20" color="#fff"></uni-icons>
               <text class="filter-btn-text">筛选</text>
               <view v-if="selectedDepartmentId || selectedLineId" class="filter-badge"></view>
            </view>
				
            <!-- 筛选弹出层 -->
            <view v-if="showFilter" class="filter-overlay" @click="closeFilter">
               <view class="filter-panel" @click.stop>
                  <view class="filter-header">
                     <text class="filter-title">筛选条件</text>
                     <view class="close-icon" @click="closeFilter">
                        <uni-icons type="close" size="20" color="#666"></uni-icons>
                     </view>
                  </view>
						
                  <view class="filter-content">
                     <view class="filter-row">
                        <text class="filter-label">车间</text>
                        <picker @change="onDepartmentChange" :value="departmentIndex" :range="departments" range-key="departmentname" class="filter-picker">
                           <view class="picker-text">
                              {{departmentIndex >= 0 ? departments[departmentIndex].departmentname : '请选择车间'}}
                           </view>
                        </picker>
                     </view>
							
                     <view class="filter-row">
                        <text class="filter-label">线体</text>
                        <picker @change="onLineChange" :value="lineIndex" :range="lines" range-key="lineName" :disabled="!selectedDepartmentId" class="filter-picker">
                           <view class="picker-text" :class="{'disabled': !selectedDepartmentId}">
                              {{lineIndex >= 0 ? lines[lineIndex].lineName : selectedDepartmentId ? '请选择线体' : '请先选择车间'}}
                           </view>
                        </picker>
                     </view>
                  </view>
						
                  <view class="filter-footer">
                     <button class="reset-btn" @click="clearFilters">清空</button>
                     <button class="confirm-btn" @click="closeFilter">确定</button>
                  </view>
               </view>
            </view>
				
            <!-- 用户系统菜单模块 -->
            <view class="example-body">
               <uni-grid :column="col" :showBorder="false">
                  <uni-grid-item v-for="(item, index) in userMenu" :index="index" :key="index" class="grid-item">
                     <navigator navigateTo class="grid-item-box" hover-class="none" :url="`../${item.path}`">
                     <navigator navigateTo class="grid-item-box" hover-class="none" :url="`../${item.path}`" @click="handleMenuClick(item)">
                        <image v-if="item.icoimg" class="imgMenu" :src="`${item.icoimg}`"></image>
                        <image v-else class="imgMenu" src="/static/img/imgMenu/WARBAAHtml.png"></image>
                        <!--       <uni-notice-bar v-if="item.pagE_VIEW.length>6" :speed="30"
@@ -54,11 +99,160 @@
            ],
            col: 4, //菜单列数
            msg: "宁波广深科技有限公司",
            updateChecked: false

            updateChecked: false,
            // 车间和线体筛选相关数据
            departments: [],
            departmentIndex: -1,
            selectedDepartmentId: '',
            lines: [],
            lineIndex: -1,
            selectedLineId: '',
            showFilter: false // 控制筛选面板显示
         };
      },
      methods: {
         // 切换筛选面板显示
         toggleFilter() {
            this.showFilter = !this.showFilter;
         },
			
         // 关闭筛选面板
         closeFilter() {
            this.showFilter = false;
         },
			
         // 获取车间列表
         getDepartments() {
            this.$post({
               url: "/Base/GetQCDepartments",
               data: {}
            }).then(res => {
               this.departments = res.data || [];
               // 从缓存中恢复选择
               const cachedDeptId = uni.getStorageSync('qc_filter_departmentId');
               if (cachedDeptId && this.departments.length > 0) {
                  const index = this.departments.findIndex(d => d.departmentid == cachedDeptId);
                  if (index >= 0) {
                     this.departmentIndex = index;
                     this.selectedDepartmentId = cachedDeptId;
                     this.getLines();
                  }
               }
            }).catch(err => {
               console.error('获取车间列表失败:', err);
            });
         },
			
         // 获取线体列表（根据车间过滤）
         getLines() {
            if (!this.selectedDepartmentId) {
               this.lines = [];
               return;
            }
				
            this.$post({
               url: "/Base/GetQCLines",
               data: {
                  departmentId: this.selectedDepartmentId
               }
            }).then(res => {
               this.lines = res.data || [];
               // 从缓存中恢复选择
               const cachedLineId = uni.getStorageSync('qc_filter_lineId');
               if (cachedLineId && this.lines.length > 0) {
                  const index = this.lines.findIndex(l => l.lineNo == cachedLineId);
                  if (index >= 0) {
                     this.lineIndex = index;
                     this.selectedLineId = cachedLineId;
                  } else {
                     // 如果缓存的线体不在当前车间下，清除线体选择
                     this.lineIndex = -1;
                     this.selectedLineId = '';
                     uni.removeStorageSync('qc_filter_lineId');
                     uni.removeStorageSync('qc_filter_lineName');
                  }
               }
            }).catch(err => {
               console.error('获取线体列表失败:', err);
            });
         },
			
         // 车间选择改变
         onDepartmentChange(e) {
            const index = parseInt(e.detail.value);
            this.departmentIndex = index;
				
            if (index >= 0 && this.departments[index]) {
               this.selectedDepartmentId = this.departments[index].departmentid;
               const departmentName = this.departments[index].departmentname;
					
               // 保存到缓存
               uni.setStorageSync('qc_filter_departmentId', this.selectedDepartmentId);
               uni.setStorageSync('qc_filter_departmentName', departmentName);
					
               // 清除线体选择
               this.lineIndex = -1;
               this.selectedLineId = '';
               uni.removeStorageSync('qc_filter_lineId');
               uni.removeStorageSync('qc_filter_lineName');
					
               // 加载该车间下的线体
               this.getLines();
					
               uni.showToast({
                  title: `已选择车间：${departmentName}`,
                  icon: 'none'
               });
            }
         },
			
         // 线体选择改变
         onLineChange(e) {
            const index = parseInt(e.detail.value);
            this.lineIndex = index;
				
            if (index >= 0 && this.lines[index]) {
               this.selectedLineId = this.lines[index].lineNo;
               const lineName = this.lines[index].lineName;
					
               // 保存到缓存
               uni.setStorageSync('qc_filter_lineId', this.selectedLineId);
               uni.setStorageSync('qc_filter_lineName', lineName);
					
               uni.showToast({
                  title: `已选择线体：${lineName}`,
                  icon: 'none'
               });
            }
         },
			
         // 清空筛选条件
         clearFilters() {
            this.departmentIndex = -1;
            this.selectedDepartmentId = '';
            this.lineIndex = -1;
            this.selectedLineId = '';
            this.lines = [];
				
            // 清除缓存
            uni.removeStorageSync('qc_filter_departmentId');
            uni.removeStorageSync('qc_filter_departmentName');
            uni.removeStorageSync('qc_filter_lineId');
            uni.removeStorageSync('qc_filter_lineName');
				
            uni.showToast({
               title: '已清空筛选条件',
               icon: 'success'
            });
         },
			
         // 处理菜单点击
         handleMenuClick(item) {
            // 存储功能名称
            uni.setStorageSync("code", this.$loginInfo.account);
            uni.setStorageSync('functionName', item.pagE_VIEW);
         },
			
         getMenu(isShowMask) {
            if (isShowMask) uni.showLoading({
               mask: true,
@@ -199,12 +393,26 @@
            
            this.getMenu(true);
            this.checkForUpdate();
            this.getDepartments(); // 加载车间列表
         }


      },
      onShow() {
         // this.getIsMsg();
         // 每次显示页面时恢复筛选条件显示
         if (this.loginInfo.hasLogin && this.departments.length === 0) {
            this.getDepartments();
         }
         // 检查缓存的筛选条件，如果不存在则重置UI状态
         const cachedDeptId = uni.getStorageSync('qc_filter_departmentId');
         if (!cachedDeptId) {
            this.departmentIndex = -1;
            this.selectedDepartmentId = '';
            this.lineIndex = -1;
            this.selectedLineId = '';
            this.lines = [];
         }
      },
      onPullDownRefresh() {
         if (this.loginInfo.hasLogin)
@@ -268,4 +476,160 @@
      flex-direction: row;
      justify-content: flex-start;
   }
	
   .main-container {
      position: relative;
   }
	
   /* 筛选按钮样式 */
   .filter-btn {
      position: fixed;
      top: 20rpx;
      right: 20rpx;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 8rpx;
      padding: 12rpx 24rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50rpx;
      box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
   }
	
   .filter-btn-text {
      font-size: 24rpx;
      color: #fff;
      font-weight: 600;
   }
	
   .filter-badge {
      position: absolute;
      top: 4rpx;
      right: 4rpx;
      width: 16rpx;
      height: 16rpx;
      background-color: #ff4757;
      border-radius: 50%;
      border: 2rpx solid #fff;
   }
	
   /* 筛选弹出层 */
   .filter-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 80rpx 20rpx 20rpx 20rpx;
   }
	
   .filter-panel {
      width: 500rpx;
      max-width: 90%;
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
      animation: slideIn 0.3s ease-out;
   }
	
   @keyframes slideIn {
      from {
         transform: translateX(100%);
         opacity: 0;
      }
      to {
         transform: translateX(0);
         opacity: 1;
      }
   }
	
   .filter-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 28rpx;
      border-bottom: 1rpx solid #f0f0f0;
   }
	
   .filter-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #333;
   }
	
   .close-icon {
      padding: 8rpx;
   }
	
   .filter-content {
      padding: 32rpx 28rpx;
   }
	
   .filter-row {
      margin-bottom: 32rpx;
   }
	
   .filter-row:last-child {
      margin-bottom: 0;
   }
	
   .filter-label {
      display: block;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
      font-weight: 600;
   }
	
   .filter-picker {
      width: 100%;
   }
	
   .picker-text {
      padding: 20rpx 24rpx;
      background-color: #f8f9ff;
      border-radius: 12rpx;
      border: 2rpx solid #e0e5ff;
      font-size: 28rpx;
      color: #333;
      text-align: left;
   }
	
   .picker-text.disabled {
      background-color: #f5f5f5;
      color: #999;
      border-color: #e5e5e5;
   }
	
   .filter-footer {
      display: flex;
      gap: 16rpx;
      padding: 24rpx 28rpx;
      border-top: 1rpx solid #f0f0f0;
   }
	
   .reset-btn,
   .confirm-btn {
      flex: 1;
      padding: 20rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      font-weight: 600;
      border: none;
   }
	
   .reset-btn {
      background-color: #f5f5f5;
      color: #666;
   }
	
   .confirm-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
   }
</style>