1

manifest.json

@@ -5,11 +5,11 @@
     "versionName" : "1.1.8",
     "versionCode" : 118,
     "transformPx" : false,
-    "networkTimeout": {
-        "request": 300000,
-        "connectSocket": 300000,
-        "uploadFile": 600000,
-        "downloadFile": 600000
+    "networkTimeout" : {
+        "request" : 300000,
+        "connectSocket" : 300000,
+        "uploadFile" : 600000,
+        "downloadFile" : 600000
     },
     "app-plus" : {
         /* 5+App特有相关 */
@@ -138,5 +138,6 @@
         },
         "title" : "智慧工程"
     },
-    "vueVersion" : "3"
+    "vueVersion" : "3",
+    "fallbackLocale" : "zh-Hans"
 }

pages/task/index.vue

@@ -1,77 +1,101 @@
 <template>
-    <z-paging class="hc-task-page" ref="pageRef" v-model="taskList" @query="getTaskList">
-        <template #top>
-            <view class="hc-paging-top-bar">
-                <view class="task-nav-bar">
-                    <view class="segmented-bar">
-                        <template v-for="item in taskTypeData">
-                            <view class="task-tab-item"
-                                :class="item.key === taskType?'task-cur':''"
-                                @click="taskTypeChange(item)"
-                            >{{item.name}}</view>
-                        </template>
-                    </view>
-                    <view class="more-bar" v-if="taskType === 1 && taskList.length > 0" @click="moreBarClick">
-                        <text class="i-ri-more-2-fill icon"/>
-                    </view>
+    <hc-sys id="app-sys" class="h-100vh hc-task-page" navBarUi="hc-task-nav-bar">
+        <template #navBar>
+            <view class="task-nav-bar">
+                <view class="segmented-bar">
+                    <template v-for="item in taskTypeData">
+                        <view class="task-tab-item"
+                              :class="item.key === taskType?'task-cur':''"
+                              @click="taskTypeChange(item)"
+                        >{{item.name}}</view>
+                    </template>
                 </view>
-                <view class="controls-bar-box">
-                    <view class="controls-bar">
-                        <view class="left">
-                            <text class="i-ri-filter-fill icon" :class="isControlsFilter?'cur':''" @click="dateFilterClick"/>
-                            <text class="i-ri-filter-off-fill icon" @click="dateFilterClear"/>
-                        </view>
-                        <view class="right">
-                            <text class="i-ri-sort-desc icon" :class="searchForm.ordType === 1?'cur':''" @click="changeOrdType(1)"/>
-                            <text class="i-ri-sort-asc icon" :class="searchForm.ordType === 2?'cur':''" @click="changeOrdType(2)"/>
+                <view class="more-bar" v-if="taskType === 1 && taskList.length > 0" @click="moreBarClick">
+                    <text class="i-ri-more-2-fill icon"/>
+                </view>
+            </view>
+        </template>
+        <view id="controls-bar" class="controls-bar-box">
+            <view class="controls-bar">
+                <view class="left">
+                    <text class="i-ri-filter-fill icon" :class="isControlsFilter?'cur':''" @click="dateFilterClick"/>
+                    <text class="i-ri-filter-off-fill icon" @click="dateFilterClear"/>
+                </view>
+                <view class="right">
+                    <text class="i-ri-sort-desc icon" :class="searchForm.ordType === 1?'cur':''" @click="changeOrdType(1)"/>
+                    <text class="i-ri-sort-asc icon" :class="searchForm.ordType === 2?'cur':''" @click="changeOrdType(2)"/>
+                </view>
+            </view>
+            <view class="controls-filter" v-if="isControlsFilter">
+                <view class="search-form-date">
+                    <picker class="search-date-input" mode="date" :value="searchForm.startTime" @change="startDateChange">
+                        <view class="content">
+                            <view class="text">{{searchForm.startTime??'点此选择开始日期'}}</view>
+                            <text class="i-ri-close-circle-line icon" v-if="searchForm.startTime" @click.stop="startDateClear"/>
                         </view>
-                    </view>
-                    <view class="controls-filter" v-show="isControlsFilter">
-                        <view class="search-form-date">
-                            <picker class="search-date-input" mode="date" :value="searchForm.startTime" @change="startDateChange">
-                                <view class="content">
-                                    <view class="text">{{searchForm.startTime??'点此选择开始日期'}}</view>
-                                    <text class="i-ri-close-circle-line icon" v-if="searchForm.startTime" @click.stop="startDateClear"/>
-                                </view>
-                            </picker>
+                    </picker>
+                </view>
+                <view class="search-form-date">
+                    <picker class="search-date-input" mode="date" :value="searchForm.endTime" @change="endDateChange">
+                        <view class="content">
+                            <view class="text">{{searchForm.endTime??'点此选择结束日期'}}</view>
+                            <text class="i-ri-close-circle-line icon" v-if="searchForm.endTime" @click.stop="endDateClear"/>
                         </view>
-                        <view class="search-form-date">
-                            <picker class="search-date-input" mode="date" :value="searchForm.endTime" @change="endDateChange">
-                                <view class="content">
-                                    <view class="text">{{searchForm.endTime??'点此选择结束日期'}}</view>
-                                    <text class="i-ri-close-circle-line icon" v-if="searchForm.endTime" @click.stop="endDateClear"/>
-                                </view>
-                            </picker>
+                    </picker>
+                </view>
+                <button class="search-form-btn" type="primary" size="mini" @click="searchClick">查询</button>
+            </view>
+        </view>
+        <!--下拉刷新区域-->
+        <z-paging ref="pageRef" :style="pagingStyle" v-model="taskList" @query="getTaskList">
+            <uni-card v-for="item in taskList" padding="0" :class="item.check?'is-check':''" @click="taskItemClick(item)">
+                <view class="py-3 text-30 text-black">{{item.taskName}}</view>
+                <view slot="actions" class="card-actions no-border">
+                    <view class="card-actions-item">
+                        <view class="item-icon-check" v-if="showCheck">
+                            <uni-icons type="checkbox-filled" size="26" color="#ee5b20" v-if="item.check"/>
+                            <uni-icons type="checkbox" size="26" color="#9a9a9a" v-else/>
                         </view>
-                        <button class="search-form-btn" type="primary" size="mini" @click="searchClick">查询</button>
+                        <text>{{item.startTime}}提交的申请</text>
+                    </view>
+                    <view class="card-actions-item">
+                        <uni-icons type="calendar" size="18" color="#EE5B20"/>
+                        <text class="card-actions-item-text" style="color: #EE5B20;">审批</text>
                     </view>
                 </view>
-            </view>
-        </template>
-        <!--任务列表-->
-        <uni-card v-for="item in taskList" padding="0" :class="item.check?'is-check':''" @click="taskItemClick(item)">
-            <view class="py-3 text-30 text-black">{{item.taskName}}</view>
-            <view slot="actions" class="card-actions no-border">
-                <view class="card-actions-item">
-                    <view class="item-icon-check" v-if="showCheck">
-                        <uni-icons type="checkbox-filled" size="26" color="#ee5b20" v-if="item.check"/>
+            </uni-card>
+        </z-paging>
+        <!--底部操作区域 -->
+        <view id="hc-bottom-bar" class="hc-bottom-bar"/>
+        <view id="hc-bottom-btn-bar" class="hc-bottom-btn-bar">
+            <view class="show-check-tabbars" v-if="showCheck">
+                <view class="check-bar">
+                    <view class="check-box" @click="allCheckClick">
+                        <text class="text">全选</text>
+                        <uni-icons type="checkbox-filled" size="26" color="#ee5b20" v-if="isAllCheck"/>
                         <uni-icons type="checkbox" size="26" color="#9a9a9a" v-else/>
                     </view>
-                    <text>{{item.startTime}}提交的申请</text>
+                    <view class="text-box">
+                        <text class="text">共勾选</text>
+                        <text class="text" style="color: #ee5b20;">{{itemCheckIndex}}</text>
+                        <text class="text">条任务</text>
+                    </view>
                 </view>
-                <view class="card-actions-item">
-                    <uni-icons type="calendar" size="18" color="#EE5B20"/>
-                    <text class="card-actions-item-text" style="color: #EE5B20;">审批</text>
+                <view class="btn-bar">
+                    <button class="check-btn" size="mini" @click="batchApproval">批量审批</button>
+                    <button class="check-btn" size="mini"  @click="cancelTaskClick">批量废除</button>
+                    <button class="check-btn cancel" size="mini" @click="cancelCheckClick">取消操作</button>
                 </view>
             </view>
-        </uni-card>
-    </z-paging>
+        </view>
+    </hc-sys>
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
+import {getCurrentInstance, ref} from "vue";
 import mainApi from '~api/tasks/data';
-import {errorToast, successToast} from "@/utils/tools";
+import {onReady} from '@dcloudio/uni-app'
+import {errorToast, querySelect, successToast} from "@/utils/tools";
 import {arrToKey, getArrValue, getObjValue} from "js-fast-way";
 import {useAppStore} from "@/store";
 
@@ -79,9 +103,33 @@ import {useAppStore} from "@/store";
 const store = useAppStore()
 const projectId = ref(store.projectId);
 const contractId = ref(store.contractId);
-
+const instance = getCurrentInstance().proxy
 const pageRef = ref(null)
 
+onReady(() => {
+    setPagingStyle()
+})
+
+//内容区域
+const pagingStyle = ref({
+    position: 'relative',
+    width: '100%',
+    bottom: 0,
+})
+const setPagingStyle = async () => {
+    const {height: appHeight} = await querySelect(instance, 'app-sys')
+    const {height: navHeight} = await querySelect(instance, 'hc-nav-bar')
+    const {height: controlsHeight} = await querySelect(instance, 'controls-bar')
+    const {height: bottomHeight} = await querySelect(instance, 'hc-bottom-bar')
+    const {height: bottomBtnHeight} = await querySelect(instance, 'hc-bottom-btn-bar')
+    let content = navHeight + controlsHeight + bottomHeight + bottomBtnHeight
+    // #ifdef APP-PLUS
+    const {statusBarHeight} = uni.getSystemInfoSync()
+    content = navHeight + controlsHeight + bottomHeight + bottomBtnHeight + statusBarHeight
+    // #endif
+    pagingStyle.value.height = (appHeight - content) + 'px'
+}
+
 //顶部类型切换
 const taskType = ref(2)
 const taskTypeData = [
@@ -98,23 +146,15 @@ const taskTypeChange = ({key}) => {
 const showCheck = ref(false)
 const moreBarClick = () => {
     showCheck.value = !showCheck.value
+    setPagingStyle()
 }
 
 //日期选择器弹出框
 const isControlsFilter = ref(false)
 
-//监听顶部高度变化
-watch(isControlsFilter, (res) => {
-    pageRef.value?.updatePageScrollTopHeight()
-})
-
-//监听底部高度变化
-watch(showCheck, (res) => {
-    pageRef.value?.updatePageScrollBottomHeight()
-})
-
 const dateFilterClick = () => {
     isControlsFilter.value = !isControlsFilter.value
+    setPagingStyle()
 }
 const dateFilterClear = () => {
     isControlsFilter.value = false
@@ -169,7 +209,7 @@ const searchForm = ref({
 //获取任务列表数据
 const taskList = ref([])
 const getTaskList = async (pageNo, pageSize) => {
-    let task_type = taskType.value, res = {};
+    /*let task_type = taskType.value, res = {};
     uni.showLoading({title: '获取数据中...', mask: true});
     if (task_type === 1) {
         const { data } = await mainApi.queryUserToDoTaskList({
@@ -199,8 +239,9 @@ const getTaskList = async (pageNo, pageSize) => {
         })
         res = getObjValue(data)
     }
-    uni.hideLoading();
-    pageRef.value?.complete(getArrValue(res?.records));
+    uni.hideLoading();*/
+    //pageRef.value?.complete(getArrValue(res?.records));
+    pageRef.value?.complete([{id:1}, {id:2}]);
     if (isAllCheck.value) {
         isAllCheck.value = itemCheckIndex.value === taskList.value.length
     }
@@ -244,6 +285,7 @@ const cancelCheckClick = () => {
     }
     itemCheckIndex.value = 0
     showCheck.value = false
+    setPagingStyle()
 }
 
 //批量审批

style/task/index.scss

@@ -1,14 +1,14 @@
 .hc-task-page {
-    :deep(.task-nav-bar) {
+    :deep(.hc-task-nav-bar) {
         background: #554D84;
         color: white;
+        padding-top: calc(var(--status-bar-height) + 10rpx);
     }
     .task-nav-bar {
         position: relative;
         display: flex;
         align-items: center;
         padding: .6rem .9rem;
-        padding-top: calc(var(--status-bar-height) + 20rpx);
         .segmented-bar {
             position: relative;
             display: flex;
@@ -58,6 +58,7 @@
     }
     .controls-bar-box {
         position: relative;
+        z-index: 999;
         .controls-bar {
             position: relative;
             display: flex;
@@ -133,52 +134,64 @@
             align-items: center;
         }
     }
-    .show-check-tabbars {
+    .hc-bottom-bar {
+        height: var(--window-bottom);
+        position: absolute;
+        z-index: -1;
+        bottom: 0;
+        width: 100%;
+    }
+    .hc-bottom-btn-bar {
         position: relative;
-        display: flex;
-        align-items: flex-end;
-        .check-bar {
-            font-size: 24rpx;
-            margin-right: 50rpx;
-            .check-box {
-                position: relative;
-                display: flex;
-                align-items: center;
-                .text {
-                    margin-right: 10rpx;
-                }
-            }
-            .text-box {
-                margin-top: 10rpx;
-            }
-        }
-        .btn-bar {
+        .show-check-tabbars {
             position: relative;
             display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            flex: 1;
-            .check-btn {
-                padding: 0;
-                display: inline-block;
-                line-height: initial;
+            align-items: flex-end;
+            padding: 22rpx;
+            background: white;
+            .check-bar {
                 font-size: 24rpx;
-                height: 54rpx;
-                width: 144rpx;
-                border: 3rpx solid #EE5B20;
+                margin-right: 50rpx;
+                .check-box {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    .text {
+                        margin-right: 10rpx;
+                    }
+                }
+                .text-box {
+                    margin-top: 10rpx;
+                }
+            }
+            .btn-bar {
+                position: relative;
                 display: flex;
                 align-items: center;
-                justify-content: center;
-                color: #EE5B20;
-                background-color: white;
-                border-radius: 100rpx;
-                &:after {
-                    display: none;
+                justify-content: flex-end;
+                flex: 1;
+                .check-btn {
+                    padding: 0;
+                    display: inline-block;
+                    line-height: initial;
+                    font-size: 24rpx;
+                    height: 54rpx;
+                    width: 144rpx;
+                    border: 3rpx solid #EE5B20;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #EE5B20;
+                    background-color: white;
+                    border-radius: 100rpx;
+                    &:after {
+                        display: none;
+                    }
+                }
+                .check-btn.cancel {
+                    border-color: #4F4F4F;
+                    color: #4F4F4F;
                 }
-            }
-            .check-btn.cancel {
-                border-color: #4F4F4F;
-                color: #4F4F4F;
             }
         }
     }