|
@@ -0,0 +1,290 @@
|
|
|
+<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">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <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('recentlyUsed',5)"></u-icon>
|
|
|
+ <!-- <u-icon class="grid-area_icon" name="arrow-up" color="#000" size="18" @click="splitNum('recentlyUsed',5)"></u-icon> -->
|
|
|
+ <!-- <u-icon name="arrow-bottom" size="20" color="#000" @click="returnTo('index')"></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.formList" :key="index">
|
|
|
+ <image class="grid-area_center_item_image" :src="item.icon"></image>
|
|
|
+ <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"></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 { 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:[],
|
|
|
+ statistics:{
|
|
|
+ "pendingSum": 0,
|
|
|
+ "alreadySum": 0,
|
|
|
+ "myInitiated": 0,
|
|
|
+ "myReceived": 0
|
|
|
+ },//头部统计
|
|
|
+ });
|
|
|
+
|
|
|
+ const { dialogFlag, formList, statistics } = toRefs(state);
|
|
|
+
|
|
|
+ function init(){
|
|
|
+ getFormList(); //获取表单列表数据
|
|
|
+ getStatistics();//获取头部统计
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @scrollView刷新数据
|
|
|
+ */
|
|
|
+ function refresh() {
|
|
|
+ getAppRoutersData(); //调用路由信息接口
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 表单权限列表
|
|
|
+ */
|
|
|
+ function getFormList(){
|
|
|
+ getOaFormDefinition().then((res) => {
|
|
|
+ state.formList = res.data;
|
|
|
+ for(let i=0;i<state.formList.length;i++){
|
|
|
+ state.formList[i].icon = proxy.$common.getAssetsFile(`images/oa/${state.formList[i].formImage}.png`);
|
|
|
+ }
|
|
|
+ console.log(res.data,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}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ *
|
|
|
+ * @param array 展示数组
|
|
|
+ * @param num 显示数量
|
|
|
+ */
|
|
|
+ function splitNum(array,num) {
|
|
|
+ state[array] = state[array].slice(0, num);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @获取路由信息
|
|
|
+ * @api接口请求
|
|
|
+ */
|
|
|
+ function getAppRoutersData() {
|
|
|
+ getAppRouters().then((res) => {
|
|
|
+ state.cuIconList = res.data;
|
|
|
+ storageSystem.set("homeList", state);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ onLoad((options) => {
|
|
|
+ // uni.hideTabBar(); //隐藏自带tabbar
|
|
|
+ // init(options);
|
|
|
+ });
|
|
|
+
|
|
|
+ onShow(() => {
|
|
|
+ init()
|
|
|
+ // var storages = storageSystem.get("homeList");
|
|
|
+ // Object.keys(storages).forEach((key) => {
|
|
|
+ // state[key] = storages[key];
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ </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>
|
|
|
+
|