|
|
@@ -0,0 +1,376 @@
|
|
|
+<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>
|
|
|
+ </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>
|
|
|
+ </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 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)
|
|
|
+
|
|
|
+//顶部类型切换
|
|
|
+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>
|
