usky-web-mobile/src/pages/business/oa/approval/index.vue

<template>
    <u-navbar :autoBack="false" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
      <template #left>
        <u-icon name="arrow-left" size="20" color="#fff" @click="returnTo('index')"></u-icon>
      </template>
      <template #center>
        <text class="grid-area_center_item_title" style="color: #fff;">我的申请</text>
      </template>
    </u-navbar>
    <oa-scroll
      customClass="scroll-height"
      :customStyle="{ height: `calc(100vh - (104px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))` }"
      :refresherLoad="false"
      :refresherEnabled="true"
      :refresherEnabledTitle="false"
      :refresherDefaultStyle="'none'"
      :refresherThreshold="44"
      :refresherBackground="'#f5f6f7'"
      @refresh="refresh"
    >
      <template #default>
        <view class="home-container">
            <!-- 我的宫格 -->
          <view class="grid-area bg-white">
            <view class="grid-area_center cu-list grid col-4 no-border">
              <view class="grid-area_center_item cu-item justify-center align-center" @click="navItemClick(1)">
                <text class="grid-area_center_item_num">{{ state.statistics.pendingSum }}</text>
                <text class="grid-area_center_item_title">待处理</text>
              </view>
              <view class="grid-area_center_item cu-item justify-center align-center" @click="navItemClick(2)">
                <text class="grid-area_center_item_num">{{ state.statistics.alreadySum }}</text>
                <text class="grid-area_center_item_title">已处理</text>
              </view>
              <view class="grid-area_center_item cu-item justify-center align-center" @click="navItemClick(4)">
                <text class="grid-area_center_item_num">{{ state.statistics.myInitiated }}</text>
                <text class="grid-area_center_item_title">已发起</text>
              </view>
              <view class="grid-area_center_item cu-item justify-center align-center" @click="navItemClick(3)">
                <text class="grid-area_center_item_num">{{ state.statistics.myReceived }}</text>
                <text class="grid-area_center_item_title">我收到的</text>
              </view>
            </view>
          </view>
          <!-- 我的宫格 -->
          <view class="grid-area bg-white" v-if="state.formList.length > 0">
            <view class="grid-area_title">我的</view>
            <u-icon class="grid-area_icon"  name="arrow-down" color="#000" size="18"  @click="splitNum(0,5)" v-if="state.appContent[0].direction == '0' && state.formList.length>5"></u-icon>
            <u-icon class="grid-area_icon"  name="arrow-up" color="#000" size="18"  @click="splitNum(0,5)" v-if="state.appContent[0].direction == '1' && state.formList.length>5"></u-icon>
            <view class="grid-area_center cu-list grid col-5 no-border" >
              <view class="grid-area_center_item cu-item align-center" v-for="(item, index) in state.appContent[0].array" :key="index" @click="toForm(item.formSign)">
                <!-- <image class="grid-area_center_item_image" :src="item.icon"></image> -->
                <img :src="item.icon" alt="" style="width: 40px;height: 40px;">
                <text class="grid-area_center_item_title" >{{ item.formName }}</text>
              </view>
            </view>
          </view>
  
          <!-- 常用功能宫格 -->
          <!-- <view class="grid-area bg-white">
            <view class="grid-area_title">人事功能</view>
            <view class="grid-area_center cu-list grid col-5 no-border">
              <view class="grid-area_center_item cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in state.cuIconList" :key="index">
                <image class="grid-area_center_item_image" :src="item.meta.icon"></image>
                <text class="grid-area_center_item_title">{{ item.meta.aliasTitle ? item.meta.aliasTitle : item.meta.title }}</text>
              </view>
            </view>
          </view> -->
        </view>
      </template>
    </oa-scroll>
  
    <oa-tabbar :tabbarValue="0" :tabbarList="proxy.$constData.oaApprovalTabbar" :isSwitchTab="false"></oa-tabbar>
</template>
  
  <script setup>
  /*----------------------------------依赖引入-----------------------------------*/
  import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
  import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs, nextTick } from "vue";
  /*----------------------------------接口引入-----------------------------------*/
  import { scan_push, getHomePageData, getFunctionalModuleStatistics, getAppRouters, qrCodeSend, getMobileBanner } from "@/api/index";
  import { getOaFormDefinition, getFormCount } from "@/api/oa/approval/index";
  /*----------------------------------组件引入-----------------------------------*/
  /*----------------------------------store引入-----------------------------------*/
  import { useStores } from "@/store/modules/index";
  /*----------------------------------公共方法引入-----------------------------------*/
  import * as jwx from "@/utils/jssdk.js"; //引入js sdk的封装
  import config from "@/config";
  import { getToken, setToken, removeToken } from "@/utils/auth";
  import { storage, storageSystem } from "@/utils/storage"; // 公共方法引用
  /*----------------------------------公共变量-----------------------------------*/
  const { proxy } = getCurrentInstance();
  const useStore = useStores();
  /*----------------------------------变量声明-----------------------------------*/
  const state = reactive({
    dialogFlag: false,
  
    swiperBool: false,
    swiperIndex: 0,
    swiperTime: 5000,
    swiperList: [],
  
    cuIconList: [],
    recentlyUsed: [],
    formList:[],
    appContent:[
      {name:"my",array:[],direction:"0"},//我的app
    ],
    statistics:{
      "pendingSum": 0, 
      "alreadySum": 0, 
      "myInitiated": 0, 
      "myReceived": 0
    },//头部统计
  });
  
  const { dialogFlag, formList, statistics,appContent } = toRefs(state);

  function init(){
    getFormList(); //获取表单列表数据
    getStatistics();//获取头部统计
  }
  
  /**
   * @scrollView刷新数据
   */
  function refresh() {
    getAppRoutersData(); //调用路由信息接口
  }
  /**
   * 表单权限列表
   */
  function getFormList(){
    console.log(config.baseUrl)
    var prefix = ""
    prefix = "https://manager.usky.cn/mobile/static/"
    getOaFormDefinition().then((res) => {
      state.formList = res.data;
      for(let i=0;i<state.formList.length;i++){
        state.formList[i].icon = prefix + `images/oa/${state.formList[i].formImage}.png`
        console.log(state.formList[i].icon)
      }
      state.appContent[0].array = state.formList
    })
  }
  function getStatistics(){
    getFormCount().then((res)=>{
      state.statistics = res.data
    })
  }
  /**
   * 返回上级页面
   * @param defaultPage 默认页面
   */
  function returnTo(defaultPage) {
    if(getCurrentPages().length > 1){
      uni.navigateBack()
    }else{
      uni.switchTab({
        url: `/pages/${defaultPage}`
      })
    }
  }
  /**
   * 跳转表单模版
   */
  function toForm(formSign){
    console.log(formSign)
    if(formSign == "QJD" || formSign == "JBD" || formSign == "SXSQ"){
      uni.navigateTo({
        url: `/pages/business/oa/approval/formType?formSign=${formSign}`
      })
    }
  }
  function navItemClick(index){
    uni.navigateTo({
        url: `/pages/business/oa/toDo/index?queryType=${index}`
      })
  }
  /**
   * 
   * @param sub 数组下标
   * @param num 显示数量
   */
  function splitNum(sub,num) {
    state.appContent[sub].array = state.appContent[sub].direction == "0" ? state.formList.slice(0, num) : state.formList
    state.appContent[sub].direction = state.appContent[sub].direction == "0" ? 1 : "0"
  }
  /**
   * @获取路由信息
   * @api接口请求
   */
  function getAppRoutersData() {
    getAppRouters().then((res) => {
      state.cuIconList = res.data;
      storageSystem.set("homeList", state);
    });
  }
  onShow(() => {
    init()
  });
  </script>
  
  <style lang="scss" scoped>
  .home-container {
    font-family: "Alibaba_PuHuiTi_Regular";
    .transition {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1100;
  
      &-section {
        position: absolute;
        top: 10px;
        right: 15px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.2);
  
        &-divider {
          border-bottom: 0.5px rgba(0, 0, 0, 0.1) solid;
          margin: 0 20px;
        }
  
        &-content {
          display: flex;
          padding: 15px 20px;
  
          &-icon {
            font-size: 18px;
            color: #000;
          }
  
          &-text {
            margin: 0 20px;
          }
        }
  
        &-content:first-child {
          padding-top: 15px;
          border-radius: 10px 10px 0 0;
        }
  
        &-content:last-child {
          padding-bottom: 15px;
          border-radius: 0 0 10px 10px;
        }
  
        &-content:hover {
          // transform: 3s;
          // transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
          transition: all 3s cubic-bezier(0.7, -0.5, 0.2, 2);
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
    }
  
    .grid-area {
      margin-top: 10px;
      width:calc(100% - 20px);
      margin-left:10px;
      border-radius: 6px;
      position: relative;
      &_title {
        padding: 10px 10px 5px 10px;
        color: #000000;
        font-size: $uni-font-size-base;
      }
      &_icon {
        position: absolute;
        right: 10px;
        top:10px;
      }
      &_center {
        border-radius: 6px;
        color:#000;
        &_item {
          &_image {
            width: 40px;
            height: 40px;
          }
          &_title {
            font-size: $uni-font-size-sm;
            word-wrap: break-word;
            max-width: 60px;
            text-align: center;
          }
          &_num {
            font-size: 16px;
            
          }
        }
      }
    }
  }
  .topReturn{
    width:100%;
    height:44px;
    line-height: 44px;
  }
  </style>