client-app/pages/task/index.vue

<template>
    <z-paging class="hc-task-page" ref="pageRef" v-model="taskList" @query="getTaskList">
        <template #top>
            <view class="hc-paging-top-bar">
                <hc-nav-bar 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-nav-bar>
                <!--条件筛选-->
                <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>
                    </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>
                            </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>
                            </picker>
                        </view>
                        <button class="search-form-btn" type="primary" size="mini" @click="searchClick">查询</button>
                    </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-icons type="checkbox" size="26" color="#9a9a9a" v-else/>
                    </view>
                    <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>
        </uni-card>
        <template #bottom>
            <hc-tabbars class="hc-paging-bottom-bar" v-if="showCheck">
                <view class="show-check-tabbars">
                    <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>
                        <view class="text-box">
                            <text class="text">共勾选</text>
                            <text class="text" style="color: #ee5b20;">{{itemCheckIndex}}</text>
                            <text class="text">条任务</text>
                        </view>
                    </view>
                    <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>
            </hc-tabbars>
        </template>
    </z-paging>
</template>

<script setup>
import {nextTick, ref, watch} from "vue";
import {onLoad} from '@dcloudio/uni-app'
import mainApi from '~api/tasks/data';
import {errorToast, successToast} from "@/utils/tools";
import {arrToKey, getArrValue, getObjValue} from "js-fast-way";
import {useAppStore} from "@/store";

//初始变量
const store = useAppStore()
const projectId = ref(store.projectId);
const contractId = ref(store.contractId);

const pageRef = ref(null)

onLoad(() => {

})

//顶部类型切换
const taskType = ref(1)
const taskTypeData = [
    {key: 1, name: '我的审批'},
    {key: 2, name: '我发起的'},
    {key: 3, name: '已办结的'}
]
const taskTypeChange = ({key}) => {
    taskType.value = key
    searchClick()
}

//批量操作
const showCheck = ref(false)
const moreBarClick = () => {
    showCheck.value = !showCheck.value
}

//日期选择器弹出框
const isControlsFilter = ref(false)

//监听顶部高度变化
watch(isControlsFilter, (res) => {
    nextTick(() => {
        pageRef.value?.updatePageScrollTopHeight()
    })
})

//监听底部高度变化
watch(showCheck, (res) => {
    nextTick(() => {
        pageRef.value?.updatePageScrollBottomHeight()
    })
})

const dateFilterClick = () => {
    isControlsFilter.value = !isControlsFilter.value
}
const dateFilterClear = () => {
    isControlsFilter.value = false
    searchForm.value.startTime = null
    searchForm.value.endTime = null
    searchClick()
}

//开启日期选择完毕
const startDateChange = (e) => {
    const val = e.detail.value, endTime = searchForm.value.endTime
    if (endTime && val && val > endTime) {
        errorToast('开始日期不能大于结束日期', 2000)
        return false
    } else {
        searchForm.value.startTime = val
    }
}
const startDateClear = () => {
    searchForm.value.startTime = null
}
//结束日期选择完毕
const endDateChange = (e) => {
    const val = e.detail.value, startTime = searchForm.value.startTime
    if (startTime && val && val < startTime) {
        errorToast('结束日期不能小于开始日期', 2000)
        return false
    } else {
        searchForm.value.endTime = val
    }
}
const endDateClear = () => {
    searchForm.value.endTime = null
}

//条件搜索
const searchClick = () => {
    pageRef.value?.reload()
}

//排序切换
const changeOrdType = (type) => {
    searchForm.value.ordType = type
    searchClick()
}

//搜索表单
const searchForm = ref({
    startTime: null, endTime: null, ordType: 1
})

//获取任务列表数据
const taskList = ref([])
const getTaskList = async (pageNo, pageSize) => {
    let task_type = taskType.value, res = {};
    uni.showLoading({title: '获取数据中...', mask: true});
    if (task_type === 1) {
        const { data } = await mainApi.queryUserToDoTaskList({
            projectId: projectId.value,
            contractId: contractId.value,
            ...searchForm.value,
            current: pageNo,
            size: pageSize,
        })
        res = getObjValue(data)
    } else if (task_type === 2) {
        const { data } = await mainApi.queryUserStartFlow({
            projectId: projectId.value,
            contractId: contractId.value,
            ...searchForm.value,
            current: pageNo,
            size: pageSize,
        })
        res = getObjValue(data)
    } else if (task_type === 3) {
        const { data } = await mainApi.queryUserDoneTaskList({
            projectId: projectId.value,
            contractId: contractId.value,
            ...searchForm.value,
            current: pageNo,
            size: pageSize,
        })
        res = getObjValue(data)
    }
    uni.hideLoading();
    pageRef.value?.complete(getArrValue(res?.records));
    if (isAllCheck.value) {
        isAllCheck.value = itemCheckIndex.value === taskList.value.length
    }
}

//任务被点击
const itemCheckIndex = ref(0)
const taskItemClick = (item) => {
    if (showCheck.value) {
        const check = !item.check, list = taskList.value
        if (check) {
            itemCheckIndex.value++
        } else {
            itemCheckIndex.value--
        }
        item.check = check
        isAllCheck.value = list.length === itemCheckIndex.value
    } else {
        toTaskDetail([item])
    }
}

//全选
const isAllCheck = ref(false)
const allCheckClick = () => {
    uni.showLoading({title: '处理中...', mask: true});
    const list = taskList.value, isCheck = !isAllCheck.value
    for (let i = 0; i < list.length; i++) {
        list[i].check = isCheck;
    }
    itemCheckIndex.value = isCheck ? list.length : 0
    isAllCheck.value = isCheck
    uni.hideLoading();
}

//取消操作
const cancelCheckClick = () => {
    const list = taskList.value
    for (let i = 0; i < list.length; i++) {
        list[i].check = false;
    }
    itemCheckIndex.value = 0
    showCheck.value = false
}

//批量审批
const batchApproval = () => {
    let rows = taskList.value.filter((item) => {
        return item.check
    })
    if (rows.length <= 0) {
        errorToast('请选择需要审批的任务')
        return false
    }
    //路由跳转
    toTaskDetail(rows)
}

//跳转任务详情
const toTaskDetail = (rows) => {
    uni.navigateTo({
        url: '/pages/task/detail',
        events: {
            finish: () => {
                searchClick();
            }
        },
        success: (res) => {
            res.eventChannel.emit('data', {
                rows: rows,
                //是否可以审批
                isTask: taskType.value === 1
            })
        }
    });
}

//批量废除
const popupRef = ref(null)
const argument = ref('')
const cancelTaskList = ref([])
const cancelTaskClick = () => {
    cancelTaskList.value = []
    let rows = taskList.value.filter((item) => {
        return item.check
    })
    if (rows.length <= 0) {
        errorToast('请选择需要废除的任务')
        return false
    }
    cancelTaskList.value = rows
    argument.value = ''
    popupRef.value?.open()
}

//确认废除
const confirmRepeal = () => {
    if (!argument.value) {
        errorToast('请先填写废除理由')
        return false
    }
    batchCompleteApprovalTaskApi(cancelTaskList.value)
}

//批量废除接口
const batchCompleteApprovalTaskApi = async (rows) => {
    uni.showLoading({title: '批量废除中...', mask: true});
    let taskIds = arrToKey(rows, 'taskId', ',')
    let approvalType = arrToKey(rows, 'approvalType', ',')
    let formDataId = arrToKey(rows, 'formDataId', ',')
    let parallelProcessInstanceIds = arrToKey(rows, 'parallelProcessInstanceId', ',')
    const {error, code, msg} = await mainApi.batchCompleteApprovalTask({
        flag: 'NO',
        comment: argument.value,
        taskIds: taskIds,
        approvalType: approvalType,
        formDataId: formDataId,
        parallelProcessInstanceIds: parallelProcessInstanceIds,
    })
    uni.hideLoading();
    if (!error && code === 200) {
        successToast('废除成功')
        cancelClick()
        searchClick()
    } else {
        errorToast(`废除失败：${msg}`)
    }
}

//取消废除
const cancelClick = () => {
    popupRef.value?.close()
    argument.value = ''
}
</script>

<style lang="scss" scoped>
page {
    background: #EFEFF4;
    height: 100%;
}
</style>

<style lang="scss">
@import "@/style/task/index.scss";
</style>